Merge pull request #44 from wilcorrea-forks/master

#4 Support template syntax

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

@@ -0,0 +1,108 @@
+import components from 'src/config/app/components'
+import create from 'src/config/app/field'
+
+import PrototypeField from 'src/app/Prototype/Components/Form/PrototypeField'
+import FormComponent from 'src/app/Prototype/Contracts/Form/FormComponent'
+
+/**
+ * @type {AppField}
+ */
+export default {
+  /**
+   */
+  name: 'AppField',
+  /**
+   */
+  mixins: [
+    PrototypeField, FormComponent
+  ],
+  /**
+   */
+  props: {
+    as: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    value: {
+      required: true
+    },
+    hidden: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data: () => ({
+    field: {}
+  }),
+  /**
+   */
+  methods: {
+    /**
+     * @param $event
+     */
+    input ($event) {
+      this.$emit('input', $event)
+      if (this.$listeners.input) {
+        this.$listeners.input($event)
+      }
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} field
+     * @returns {*}
+     */
+    renderFieldComponent (h, field) {
+      return h(field.is, {
+        domProps: { tabindex: this.$attrs.tabindex, value: this.value },
+        attrs: { ...field.attrs, value: this.value },
+        on: { ...field.listeners, input: this.input }
+      })
+    },
+    /**
+     * @param {string} key
+     * @returns {*}
+     */
+    errorContent (key) {
+      return ''
+    },
+    /**
+     * @returns {*}
+     */
+    schema () {
+      // QPage, AppForm, TestWithTemplateForm
+      return this.$util.prop(this.$parent, `$parent.$parent.$options.schema.${this.name}`, {})
+    }
+  },
+  /**
+   * @param {Function} h
+   * @returns {*}
+   */
+  render (h) {
+    let schema = this.schema()
+    if (typeof schema !== 'object') {
+      throw new Error('Schema is required')
+    }
+
+    if (schema.attrs === undefined) {
+      schema.attrs = {}
+    }
+
+    let component = components[this.as]
+
+    const attrs = { ...component.attrs, ...schema.attrs, ...this.$attrs, label: undefined }
+    const on = { ...this.$listeners, input: this.input }
+
+    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

@@ -0,0 +1,124 @@
+/**
+ * @type {AppForm}
+ */
+export default {
+  /**
+   */
+  name: 'AppForm',
+  /**
+   */
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  /**
+   */
+  computed: {
+    /**
+     */
+    debuggers () {
+      return this.$store.getters['app/getDebuggers']
+    }
+  },
+  /**
+   */
+  methods: {
+    /**
+     * @param {Object} schema
+     * @returns {Object}
+     */
+    parseAppFormRecord (schema) {
+      return Object.keys(schema).reduce((record, key) => {
+        record[key] = schema[key].default
+        return record
+      }, {})
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} schema
+     * @returns {*}
+     */
+    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 (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 } })])
+    }
+  },
+  /**
+   */
+  created () {
+    this.$schema = this.$parent.$options.schema
+    const record = this.parseAppFormRecord(this.$schema)
+    this.$emit('input', { ...record, ...this.value })
+  },
+  /**
+   * @param {Function} h
+   * @returns {*}
+   */
+  render (h) {
+    if (typeof this.$parent.$options.schema !== 'object') {
+      throw new Error('Schema is required')
+    }
+
+    const data = { class: 'PrototypeForm', attrs: { padding: true } }
+    const children = [
+      this.renderAppForm(h, this.$schema),
+      this.renderAppFormDebuggers(h, this.$schema)
+    ]
+
+    return h('q-page', data, children)
+  }
+}

src/app/Components/index.js

@@ -2,9 +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/Base.js

@@ -118,7 +118,7 @@ export default class Base {
   /**
    */
   init () {
-    this.constructor.mixins.forEach(mixin => this.mixin(mixin))
+    this.constructor.mixins.forEach((mixin) => this.mixin(mixin))
   }
 
   /**
@@ -151,15 +151,12 @@ export default class Base {
     if (typeof mixin !== 'object') {
       return
     }
-    Object.keys(mixin).forEach(method => {
-      if (this[method]) {
-        return
+    for (let fragment in mixin) {
+      if (this[fragment]) {
+        continue
       }
-      if (typeof mixin[method] !== 'function') {
-        return
-      }
-      this[method] = mixin[method].bind(this)
-    })
+      Base.prototype[fragment] = mixin[fragment]
+    }
   }
 
   /**