added fa config files, stub of Column editor

resources/assets/js/components/ColumnEditorAdvanced.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <input type="hidden" :name="name" :value="JSON.stringify(columns)">
+    <table class="editor-table">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Title</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(col, i) in columns">
+          <td>
+            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="move(i, -1)">
+              <v-icon class="fa-chevron-up" alt="Move Up" />
+            </a><!--
+            --><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" @click.prevent="move(i, 1)">
+              <v-icon class="fa-chevron-down" alt="Move Down" />
+            </a>
+          </td>
+
+          <td>
+            <input v-model="col.name" class="form-control" type="text" style="width: 140px">
+          </td>
+
+          <td>
+            <select v-model="col.type" class="form-control custom-select" style="width: 110px">
+              <option v-for="t in colTypes" :value="t">{{t}}</option>
+            </select>
+          </td>
+
+          <td>
+            <input v-model="col.title" class="form-control" type="text" style="width: 170px">
+          </td>
+
+          <td class="text-nowrap">
+            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="delCol(i)">
+              <v-icon class="fa-trash-o" alt="Delete column" />
+            </a><!--
+            --><a href="" class="btn btn-outline-secondary" v-if="i === columns.length - 1"
+                  @click.prevent="addCol()">
+              <v-icon class="fa-plus" alt="Add Column" />
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "base";
+
+  table {
+    border-collapse: collapse;
+  }
+
+  td, th {
+    @include pr(1);
+    @include py(1);
+  }
+
+  td .btn {
+    @include mr(1);
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    name: String,
+    initialColumns: Array,
+  },
+  data: function() {
+    return {
+      columns: this.initialColumns,
+      colTypes: ['string', 'int', 'float', 'bool'],
+    }
+  },
+  methods: {
+    delCol(n) {
+      if (n == 0) return
+
+      this.columns.splice(n, 1)
+    },
+    addCol() {
+      this.columns.push({
+        name: '',
+        type: 'string',
+        title: '',
+      })
+    },
+    move(i, dir) {
+      let cur = this.columns[i];
+      let next = this.columns[i+dir];
+      this.$set(this.columns, i, next);
+      this.$set(this.columns, i+dir, cur);
+    }
+  }
+}
+</script>

resources/assets/js/vue-init.js

@@ -1,8 +1,9 @@
 window.Vue = require('vue')
 
-const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
-const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
-const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
+const ColumnEditor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
+const ColumnEditorAdvanced = Vue.component('column-editor', require('./components/ColumnEditorAdvanced.vue'))
+const RowsEditor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
+const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
 
 // const app = new Vue({
 //   el: '#app'
@@ -10,18 +11,15 @@ const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
 
 window.app = {
   ColumnEditor: function (selector, data) {
-    new ColumnEditorCtor({
-      propsData: data
-    }).$mount(selector)
+    new ColumnEditor({ propsData: data }).$mount(selector)
+  },
+  ColumnEditorAdvanced: function (selector, data) {
+    new ColumnEditorAdvanced({ propsData: data }).$mount(selector)
   },
   RowsEditor: function (selector, data) {
-    new RowsEditorCtor({
-      propsData: data
-    }).$mount(selector)
+    new RowsEditor({ propsData: data }).$mount(selector)
   },
   Icon: function (selector, data) {
-    new IconCtor({
-      propsData: data
-    }).$mount(selector)
+    new Icon({ propsData: data }).$mount(selector)
   }
 }