[#4/feature] Support template sintax

src/app/Components/Button/AppButton.js

@@ -0,0 +1,74 @@
+import PrototypeButton from 'src/app/Prototype/Components/Buttons/PrototypeButton'
+/**
+ * @type {AppButton}
+ */
+export default {
+  /**
+   */
+  name: 'AppButton',
+  /**
+   */
+  mixins: [
+    PrototypeButton
+  ],
+  /**
+   */
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    hidden: {
+      type: Boolean,
+      required: false
+    },
+    dropdown: {
+      type: Boolean,
+      required: false
+    },
+    primary: {
+      type: Boolean,
+      required: false
+    },
+    submit: {
+      type: Boolean,
+      required: false
+    },
+    position: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: 'white'
+    },
+    textColor: {
+      type: String,
+      default: 'grey-10'
+    }
+  },
+  /**
+   * @param {Function} h
+   */
+  render (h) {
+    const color = this.$props.primary ? 'primary' : this.color
+    const type = this.$props.submit ? 'submit' : 'button'
+
+    const classNames = []
+    if (this.$attrs.class) {
+      classNames.push(this.$attrs.class)
+    }
+    if (this.position) {
+      classNames.push(`button-position-${this.position}`)
+    }
+
+    const button = {
+      key: this.name || this.$util.uniqueKey(),
+      class: classNames,
+      attrs: { ...this.$attrs, ...this.$props, color, type },
+      listeners: { ...this.$listeners }
+    }
+
+    return this.renderButton(h, button)
+  }
+}

src/app/Components/Field/AppField.js

@@ -8,6 +8,8 @@ import FormComponent from 'src/app/Prototype/Contracts/Form/FormComponent'
  * @type {AppField}
  */
 export default {
+  /**
+   */
   name: 'AppField',
   /**
    */
@@ -27,8 +29,15 @@ export default {
     },
     value: {
       required: true
+    },
+    hidden: {
+      type: Boolean,
+      required: false
     }
   },
+  data: () => ({
+    field: {}
+  }),
   /**
    */
   methods: {
@@ -90,6 +99,9 @@ export default {
     const options = { label: this.$attrs.label, width: this.$attrs.width }
     const field = create(this.name, options, attrs, on)
     field.is = component.is
+    if (this.hidden) {
+      field.$layout.formHidden = this.hidden
+    }
 
     return this.renderField(h, this.parseField(field))
   }

src/app/Components/Form/AppForm.js

@@ -1,3 +1,6 @@
+/**
+ * @type {AppForm}
+ */
 export default {
   /**
    */
@@ -10,6 +13,15 @@ export default {
       default: () => ({})
     }
   },
+  /**
+   */
+  computed: {
+    /**
+     */
+    debuggers () {
+      return this.$store.getters['app/getDebuggers']
+    }
+  },
   /**
    */
   methods: {
@@ -24,24 +36,65 @@ export default {
       }, {})
     },
     /**
+     * @param {Function} h
      * @param {Object} schema
      * @returns {*}
      */
-    renderAppFormBody (schema) {
+    renderAppForm (h, schema) {
+      const data = {
+        class: 'app-form-wrapper',
+        on: {
+          submit: ($event) => {
+            $event.preventDefault()
+            $event.stopPropagation()
+            this.$emit('submit', $event)
+          }
+        }
+      }
+      const children = [
+        h('div', { class: 'app-form-body' }, [
+          h('div', { class: 'form form-grid' }, this.renderAppFormBody(h, schema))
+        ]),
+        h('div', { class: 'app-form-buttons' }, this.renderAppFormButtons(h, schema))
+      ]
+
+      return h('form', data, children)
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} schema
+     * @returns {*}
+     */
+    renderAppFormBody (h, schema) {
       if (!this.$scopedSlots.body) {
         return
       }
       return this.$scopedSlots.body(schema)
     },
     /**
+     * @param {Function} h
      * @param {Object} schema
      * @returns {*}
      */
-    renderAppFormButtons (schema) {
+    renderAppFormButtons (h, schema) {
       if (!this.$scopedSlots.buttons) {
         return
       }
       return this.$scopedSlots.buttons(schema)
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} schema
+     * @returns {*}
+     */
+    renderAppFormDebuggers (h, schema) {
+      if (!this.debuggers) {
+        return
+      }
+      if (this.$scopedSlots.debuggers) {
+        return h('div', {}, this.$scopedSlots.debuggers(schema))
+      }
+      return h('div', {}, [h('app-debugger', { attrs: { label: 'Schema', inspect: schema } })])
     }
   },
   /**
@@ -62,21 +115,10 @@ export default {
 
     const data = { class: 'PrototypeForm', attrs: { padding: true } }
     const children = [
-      h('div', { class: 'app-form-wrapper' }, [
-        h('div', { class: 'app-form-body' }, [
-          h('div', { class: 'form form-grid' }, this.renderAppFormBody(this.$schema))
-        ]),
-        h('div', { class: 'app-form-buttons' }, this.renderAppFormButtons(this.$schema))
-      ])
+      this.renderAppForm(h, this.$schema),
+      this.renderAppFormDebuggers(h, this.$schema)
     ]
 
     return h('q-page', data, children)
-    /*
-    <q-page padding>
-      <form @submit.prevent="submit">
-        <slot />
-      </form>
-    </q-page>
-    */
   }
 }

src/app/Components/index.js

@@ -2,13 +2,15 @@ import { register } from 'src/app/Util'
 import PrototypeForm from 'src/app/Prototype/Components/PrototypeForm'
 import PrototypeTable from 'src/app/Prototype/Components/PrototypeTable'
 
+import AppButton from 'src/app/Components/Button/AppButton'
 import AppDebugger from 'src/app/Components/Debugger/AppDebugger'
 import AppField from 'src/app/Components/Field/AppField'
 import AppForm from 'src/app/Components/Form/AppForm'
 
 register('PrototypeTable', PrototypeTable)
 register('PrototypeForm', PrototypeForm)
 
+register('AppButton', AppButton)
 register('AppDebugger', AppDebugger)
 register('AppField', AppField)
 register('AppForm', AppForm)

src/app/Prototype/Components/Buttons/PrototypeButton.js

@@ -0,0 +1,46 @@
+import PrototypeButtonDropdown from './PrototypeButtonDropdown'
+import PrototypeButtonSingle from './PrototypeButtonSingle'
+
+/**
+ * @type {PrototypeButton}
+ */
+export default {
+  /**
+   */
+  mixins: [
+    PrototypeButtonDropdown, PrototypeButtonSingle
+  ],
+  /**
+   */
+  methods: {
+    /**
+     * @param {string} key
+     */
+    buttonRef (key) {
+      return `form:button-${key}`
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} button
+     * @returns {*}
+     */
+    renderButton (h, button) {
+      if (button.hidden) {
+        return
+      }
+
+      const data = {
+        key: button.$key,
+        ref: button.reference ? this.buttonRef(button.reference) : undefined,
+        class: button.class,
+        attrs: { ...button.attrs },
+        on: { ...button.listeners },
+        style: button.style
+      }
+      if (button.dropdown) {
+        return this.renderButtonDropdown(h, data)
+      }
+      return this.renderButtonSingle(h, data)
+    }
+  }
+}

src/app/Prototype/Components/PrototypeButtons.js

@@ -1,6 +1,5 @@
+import PrototypeButton from './Buttons/PrototypeButton'
 import PrototypeButtonParse from './Buttons/PrototypeButtonParse'
-import PrototypeButtonDropdown from './Buttons/PrototypeButtonDropdown'
-import PrototypeButtonSingle from './Buttons/PrototypeButtonSingle'
 
 /**
  * @typedef {PrototypeButtons}
@@ -10,7 +9,7 @@ export default {
   /**
    */
   mixins: [
-    PrototypeButtonParse, PrototypeButtonDropdown, PrototypeButtonSingle
+    PrototypeButtonParse, PrototypeButton
   ],
   /**
    */
@@ -47,38 +46,6 @@ export default {
         .map((button) => this.parseButton(button))
     }
   },
-  /**
-   */
-  methods: {
-    /**
-     * @param {Function} h
-     * @param {Object} button
-     * @returns {*}
-     */
-    renderButton (h, button) {
-      if (button.hidden) {
-        return
-      }
-
-      const data = {
-        key: button.$key,
-        ref: this.buttonRef(button.$key),
-        class: button.class,
-        attrs: { ...button.attrs },
-        on: { ...button.listeners }
-      }
-      if (button.dropdown) {
-        return this.renderButtonDropdown(h, data)
-      }
-      return this.renderButtonSingle(h, data)
-    },
-    /**
-     * @param {string} key
-     */
-    buttonRef (key) {
-      return `form:button-${key}`
-    }
-  },
   /**
    * @param {Function} h
    */

src/app/Prototype/Prototype/Action.js

@@ -137,7 +137,7 @@ export default {
    * @returns {Prototype}
    */
   actionNoMinWidth () {
-    return this.actionAddClassName('q-btn-no-min-width')
+    return this.actionAddClassName('button-no-min-width')
   },
 
   /**

src/app/Prototype/Prototype/FieldIs.js

@@ -18,7 +18,7 @@ export default {
       hiddenForm: false,
       ...options
     }
-    return this.field(options.key, options.label, Number)
+    return this.addField(options.key, options.label, Number)
       .fieldTableWidth(options.tableWith)
       .fieldFormWidth(options.formWidth)
       .fieldTableShow(options.tableShow)

src/app/Prototype/Skeleton.js

@@ -16,10 +16,10 @@ export default class Skeleton extends Base {
    * @param {*} type
    * @returns {Prototype}
    */
-  field ($key, label = '', type = undefined) {
+  addField ($key, label = '', type = undefined) {
     this.__currentField = $key
     if (this.__fields[$key]) {
-      return this
+      throw new Error(`Field ${$key} already exists`)
     }
 
     let is = this.is
@@ -52,6 +52,18 @@ export default class Skeleton extends Base {
     return this
   }
 
+  /**
+   * @param {string} $key
+   * @returns {Prototype}
+   */
+  getField ($key) {
+    if (!this.__fields[$key]) {
+      throw new Error(`Field ${$key} not exists`)
+    }
+    this.__currentField = $key
+    return this
+  }
+
   /**
    * @param {string} id
    * @param {string} label