add option to upload file when creating a table

resources/assets/js/components/ColumnEditor.vue

@@ -63,6 +63,9 @@ Complex animated column editor for the table edit page
                 <input v-model="col.name"
                        :class="['form-control', { 'is-invalid': col._errors && col._errors['name'] }]"
                        :title="(col._errors && col._errors['name']) ? col._errors['name'][0] : null"
+                       :ref="`edit-${i}-name`"
+                       @keydown.down="verticalTab(i, 'name', 1)"
+                       @keydown.up="verticalTab(i, 'name', -1)"
                        type="text">
               </td>
 
@@ -81,6 +84,9 @@ Complex animated column editor for the table edit page
                 <input v-model="col.title"
                        :title="(col._errors && col._errors['title']) ? col._errors['title'][0] : null"
                        :class="['form-control', { 'is-invalid': col._errors && col._errors['title'] }]"
+                       :ref="`edit-${i}-title`"
+                       @keydown.down="verticalTab(i, 'title', 1)"
+                       @keydown.up="verticalTab(i, 'title', -1)"
                        type="text">
               </td>
             </template>
@@ -141,7 +147,7 @@ Complex animated column editor for the table edit page
 
   @media screen and (min-width: 625px) {
     table.new-table {
-      margin-left: -53px;
+      margin-left: -66px;
     }
   }
 
@@ -471,6 +477,34 @@ export default {
       for (const [key, value] of Object.entries(col._loadvals)) {
         col[key] = value
       }
+    },
+
+    /**
+     * Move to next or prev editable cell vertically
+     *
+     * @param index
+     * @param field
+     * @param dir - +1 down, -1 up
+     */
+    verticalTab (index, field, dir) {
+      if (dir == -1) {
+        // up
+        for(let i = index-1; i>= 0; i--) {
+          if (this.columns[i]._editing || this.newTable) {
+            this.$refs[`edit-${i}-${field}`][0].focus()
+            break;
+          }
+        }
+      }
+      else {
+        // down
+        for(let i = index+1; i < this.columns.length; i++) {
+          if (this.columns[i]._editing || this.newTable) {
+            this.$refs[`edit-${i}-${field}`][0].focus()
+            break;
+          }
+        }
+      }
     }
   }
 }