Added description field

plugin-src/column.tsx

@@ -1,30 +1,35 @@
-const { widget } = figma
+const { widget } = figma;
 const {
   // Components
   AutoLayout,
   Text,
-} = widget
+} = widget;
 
-import {
-  KeyType,
-  getKeyDecorator,
-} from "./key"
+import { KeyType, getKeyDecorator } from "./key";
 
 export interface Column {
-  name: string
-  type: string
-  nullable: boolean
-  keyType:
-  | KeyType
-  | "normal"
+  name: string;
+  type: string;
+  nullable: boolean;
+  keyType: KeyType | "normal";
+  description?: string;
 }
 
 export function KeyColumn(props) {
-  const { column } = props
-  const { icon, color } = getKeyDecorator(column)
+  const { column } = props;
+  const { icon, color } = getKeyDecorator(column);
 
   return (
-    (
+    <AutoLayout
+      width="fill-parent"
+      fill="#ffffff"
+      verticalAlignItems="center"
+      horizontalAlignItems="center"
+      direction="vertical"
+      padding={{
+        right: 16,
+      }}
+    >
       <AutoLayout
         width="fill-parent"
         height={48}
@@ -34,6 +39,7 @@ export function KeyColumn(props) {
         fill="#ffffff"
         verticalAlignItems="center"
         horizontalAlignItems="center"
+        tooltip={column.description}
       >
         <Text
           width={32}
@@ -47,22 +53,36 @@ export function KeyColumn(props) {
         >
           {icon}
         </Text>
-        <Text
-          width="fill-parent"
-          fontFamily="Roboto Mono"
-          fontSize={18}
-        >
+
+        <Text width="fill-parent" fontFamily="Roboto Mono" fontSize={18}>
           {column.name}
         </Text>
-        <Text
-          fontFamily="Roboto Mono"
-          fontSize={18}
-        >
-          {column.type}{column.nullable ? "?" : ""}
+        <Text fontFamily="Roboto Mono" fontSize={18}>
+          {column.type}
+          {column.nullable ? "?" : ""}
         </Text>
       </AutoLayout>
-    )
-  )
+      {column.description && (
+        <AutoLayout
+          width="fill-parent"
+          padding={{
+            left: 32,
+            bottom: 8,
+          }}
+        >
+          <Text
+            width="fill-parent"
+            fontFamily="Roboto Mono"
+            fontSize={14}
+            italic
+            fill="#666"
+          >
+            {column.description}
+          </Text>
+        </AutoLayout>
+      )}
+    </AutoLayout>
+  );
 }
 
-export default KeyColumn
+export default KeyColumn;

ui-src/edit/fields-table/field-row.vue

@@ -8,16 +8,17 @@ tr
     index-selector(v-model="field.keyType")
   td
     input(v-model="field.nullable" type="checkbox")
+  td
+    input(v-model="field.description" placeholder="Description" type="text")
   td
     button.button(type="reset" @click="$emit('remove')")
       svg(width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg")
         path(d="M0 3H1.5M12 3H10.5M3.5 3V2.5C3.5 1.67157 4.17157 1 5 1H7C7.82843 1 8.5 1.67157 8.5 2.5V3M3.5 3H8.5M3.5 3H1.5M8.5 3H10.5M10.5 3V13.5C10.5 14.3284 9.82843 15 9 15H3C2.17157 15 1.5 14.3284 1.5 13.5V3M4.5 6.5V10.5M7.5 6.5V10.5")
 </template>
 
-
 <script>
-import TypeSelector from "./type-selector"
-import IndexSelector from "./index-selector"
+import TypeSelector from "./type-selector";
+import IndexSelector from "./index-selector";
 
 export default {
   components: {
@@ -27,8 +28,6 @@ export default {
   props: {
     field: Object,
   },
-  emits: [
-    "remove",
-  ],
-}
+  emits: ["remove"],
+};
 </script>

ui-src/edit/fields-table/fields-table.vue

@@ -6,6 +6,7 @@ table
       th Type
       th Index
       th Nullable
+      th Description
       th
   tbody
     field-row(
@@ -22,7 +23,7 @@ table
 </template>
 
 <script>
-import FieldRow from "./field-row"
+import FieldRow from "./field-row";
 
 export default {
   components: {
@@ -31,51 +32,48 @@ export default {
   props: {
     fields: Array,
   },
-  emits: [
-    "remove",
-    "move",
-  ],
+  emits: ["remove", "move"],
   data() {
     return {
       row: {
         old: null,
         new: null,
       },
-    }
+    };
   },
   methods: {
     dragStart(event) {
-      this.row.old = event.currentTarget.dataset.index
+      this.row.old = event.currentTarget.dataset.index;
     },
     dragEnd() {
-      this.$emit("move", this.row)
+      this.$emit("move", this.row);
     },
     dragOver(event) {
-      let overRow = event.currentTarget
+      let overRow = event.currentTarget;
 
-      this.row.new = overRow.dataset.index
+      this.row.new = overRow.dataset.index;
 
-      let newIndex = this.row.new
-      let prevIndex = this.row.old
+      let newIndex = this.row.new;
+      let prevIndex = this.row.old;
 
-      let targetClass = ""
+      let targetClass = "";
       if (newIndex == prevIndex) {
-        return
+        return;
       }
 
       if (newIndex < prevIndex) {
-        targetClass = "has-dragged-top"
+        targetClass = "has-dragged-top";
       } else {
-        targetClass = "has-dragged-bottom"
+        targetClass = "has-dragged-bottom";
       }
 
-      overRow.classList.add(targetClass)
+      overRow.classList.add(targetClass);
     },
     dragLeave(event) {
-      let overRow = event.currentTarget
+      let overRow = event.currentTarget;
 
-      overRow.classList.remove("has-dragged-bottom", "has-dragged-top")
+      overRow.classList.remove("has-dragged-bottom", "has-dragged-top");
     },
   },
-}
+};
 </script>

ui-src/edit/index.vue

@@ -4,8 +4,8 @@ fields-table(:fields="fields" @remove="remove" @move="move")
 </template>
 
 <script>
-import Controls from "./controls"
-import FieldsTable from "./fields-table"
+import Controls from "./controls";
+import FieldsTable from "./fields-table";
 
 export default {
   components: {
@@ -20,7 +20,7 @@ export default {
       fields: this.columns,
       row: null,
       changedRow: null,
-    }
+    };
   },
   methods: {
     newColumn() {
@@ -29,23 +29,27 @@ export default {
         type: "int",
         keyType: "normal",
         nullable: false,
-      })
+        description: "",
+      });
     },
     save() {
-      parent.postMessage({
-        pluginMessage: JSON.stringify({
-          action: "edit",
-          data: this.fields,
-        }),
-      }, "*")
+      parent.postMessage(
+        {
+          pluginMessage: JSON.stringify({
+            action: "edit",
+            data: this.fields,
+          }),
+        },
+        "*"
+      );
     },
     remove(index) {
-      this.fields.splice(index, 1)
+      this.fields.splice(index, 1);
     },
     move(row) {
-      let currentColumn = this.fields.splice(row.old, 1)
-      this.fields.splice(row.new, 0, currentColumn[0])
+      let currentColumn = this.fields.splice(row.old, 1);
+      this.fields.splice(row.new, 0, currentColumn[0]);
     },
   },
-}
+};
 </script>