[revamp] Redistribute methods of components

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

@@ -0,0 +1,35 @@
+/**
+ * @typedef {PrototypeButtonDropdown}
+ */
+export default {
+  /**
+   */
+  methods: {
+    /**
+     * @param {Function} h
+     * @param {Object} data
+     * @returns {*}
+     */
+    renderButtonDropdown (h, data) {
+      // TODO: implement dropdown items
+      /*
+      <q-list link>
+        <q-item
+          v-bind="button.attrs"
+          v-for="(action, key) in button.actions"
+          :key="key"
+          v-close-overlay
+          @click.native="action.native"
+        >
+          <q-item-main>
+            <q-item-tile label>{{ action.label }}</q-item-tile>
+          </q-item-main>
+        </q-item>
+      </q-list>
+      */
+      data.attrs.split = true
+
+      return h('q-btn-dropdown', data)
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+/**
+ * @typedef {PrototypeButtonParse}
+ */
+export default {
+  /**
+   */
+  methods: {
+    /**
+     * @param {Object} button
+     * @returns {Object}
+     */
+    parseAttrs (button) {
+      return { ...button.attrs, ...this.override }
+    },
+    /**
+     * @param {Object} button
+     * @returns {Object}
+     */
+    parseListeners (button) {
+      if (typeof button.listeners !== 'object') {
+        return button.listeners
+      }
+      let context = {}
+      if (this.context) {
+        context = this.$util.clone(this.context)
+      }
+      const reduce = (listeners, key) => {
+        listeners[key] = ($event) => button.listeners[key]($event, { context })
+        return listeners
+      }
+      return Object.keys(button.listeners).reduce(reduce, {})
+    },
+    /**
+     * @param {Object} button
+     */
+    parseButton (button) {
+      let action = button
+      if (button.configure && typeof button.configure === 'function') {
+        const clone = this.$util.clone(button)
+        const parameters = { context: this.context, position: this.position, scope: this.scope }
+        action = button.configure.call(this, clone, parameters)
+      }
+      return {
+        ...action,
+        attrs: this.parseAttrs(action),
+        listeners: this.parseListeners(action)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @typedef {PrototypeButtonSingle}
+ */
+export default {
+  /**
+   */
+  methods: {
+    /**
+     * @param {Function} h
+     * @param {Object} data
+     * @returns {*}
+     */
+    renderButtonSingle (h, data) {
+      return h('q-btn', data)
+    }
+  }
+}

src/app/Prototype/Components/Form/PrototypeComponents.js

@@ -1,10 +1,18 @@
-import PrototypeError from 'src/app/Prototype/Components/Form/PrototypeError'
+import PrototypeError from './PrototypeError'
+import PrototypeFieldComponent from './PrototypeFieldComponent'
+import PrototypeFieldLabel from './PrototypeFieldLabel'
+import PrototypeFieldError from './PrototypeFieldError'
 
 /**
  * @typedef {PrototypeFormComponents}
  */
 export default {
   name: 'PrototypeFormComponents',
+  /**
+   */
+  mixins: [
+    PrototypeFieldLabel, PrototypeFieldComponent, PrototypeFieldError
+  ],
   /**
    */
   components: {
@@ -16,25 +24,8 @@ export default {
     fields: {
       type: Object,
       default: () => ({})
-    },
-    value: {
-      type: Object,
-      default: () => ({})
-    },
-    errors: {
-      type: Object,
-      default: () => ({})
-    },
-    validations: {
-      type: Object,
-      default: () => ({})
     }
   },
-  /**
-   */
-  data: () => ({
-    record: {}
-  }),
   /**
    */
   methods: {
@@ -45,7 +36,7 @@ export default {
     renderField (h, field) {
       const key = field.$key
 
-      const error = this.hasError(key)
+      const error = this.fieldHasError(key)
       const style = {
         display: field.$layout.formHidden ? 'none' : ''
       }
@@ -63,39 +54,6 @@ export default {
 
       return h('div', data, children)
     },
-    /**
-     * @param {Function} h
-     * @param {Object} field
-     * @returns {*}
-     */
-    renderFieldLabel (h, field) {
-      return h('label', { domProps: { innerHTML: this.labelContent(field) } })
-    },
-    /**
-     * @param {Function} h
-     * @param {Object} field
-     * @returns {*}
-     */
-    renderFieldComponent (h, field) {
-      const key = field.$key
-
-      return h(field.is, {
-        ref: this.componentRef(field),
-        domProps: { tabIndex: this.componentTabIndex(), value: this.record[key] },
-        props: { value: this.record[key] },
-        attrs: { ...field.attrs },
-        on: { ...field.listeners, input: ($event) => this.componentInput($event, field) }
-      })
-    },
-    /**
-     * @param {Function} h
-     * @param {string} key
-     * @param {boolean} error
-     * @returns {*}
-     */
-    renderFieldError (h, key, error) {
-      return h('prototype-error', { attrs: { show: error, message: this.errorContent(key) } })
-    },
     /**
      * @param {string|number} width
      * @param {string|number} height
@@ -109,45 +67,10 @@ export default {
       }
       return classNames
     },
-    /**
-     * @param {Object} field
-     * @returns {string}
-     */
-    labelContent (field) {
-      // Se o field não possuir label, ele não exibe (*)
-      return (!field.label) ? '' : `${field.label} ${field.$required ? '*' : ''}`
-    },
-    /**
-     * @param {Object} field
-     */
-    componentRef (field) {
-      return `form:component-${field.$layout.formOrder}`
-    },
-    /**
-     * @returns {number}
-     */
-    componentTabIndex () {
-      if (!this.counter) {
-        this.counter = 0
-      }
-      this.counter++
-      return this.counter
-    },
-    /**
-     * @param {Object} $event
-     * @param {Object} component
-     */
-    componentInput ($event, component) {
-      this.record[component.$key] = component.parseInput($event)
-      this.$emit('input', component.$key, component.parseInput($event))
-      if (component.listeners.input) {
-        component.listeners.input($event)
-      }
-    },
     /**
      * @param {string} key
      */
-    hasError (key) {
+    fieldHasError (key) {
       if (this.errors[key]) {
         return true
       }
@@ -156,52 +79,8 @@ export default {
         return false
       }
       return record[key].$error
-    },
-    /**
-     * @param {string} key
-     * @returns {string}
-     */
-    errorContent (key) {
-      const errorMessages = []
-      const forEach = (validation) => {
-        if (!validations[validation]) {
-          let translation = `domains.${this.domain}.validations.${validation}`.replace(/\//g, '.')
-          if (!this.$te(translation)) {
-            translation = `validation.${validation}`
-          }
-          errorMessages.push(this.$t(translation, validations.$params[validation]))
-        }
-      }
-
-      const validations = this.$util.prop(this.validations, `record.${key}`)
-      if (validations) {
-        Object.keys(validations.$params).forEach(forEach)
-      }
-      if (this.errors[key]) {
-        errorMessages.push(this.errors[key])
-      }
-      return errorMessages.join(' / ')
-    }
-  },
-  /**
-   */
-  watch: {
-    /**
-     * @param value
-     */
-    value: {
-      deep: true,
-      handler (value) {
-        this.record = this.$util.clone(value)
-      }
     }
   },
-  /**
-   */
-  created () {
-    this.counter = 1
-    this.record = this.$util.clone(this.value)
-  },
   /**
    * @param {Function} h
    * @returns {*}
@@ -210,6 +89,7 @@ export default {
     // console.log('~> render', this.$options.name, JSON.stringify(this.record))
     const data = { class: 'form form-grid' }
     const children = Object.values(this.fields).map((field) => this.renderField(h, field))
+
     return h('div', data, children)
   }
 }

src/app/Prototype/Components/Form/PrototypeFieldComponent.js

@@ -0,0 +1,88 @@
+/**
+ * @typedef {PrototypeFieldComponent}
+ */
+export default {
+  /**
+   */
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    validations: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  /**
+   */
+  data: () => ({
+    record: {}
+  }),
+  /**
+   */
+  methods: {
+    /**
+     * @param {Object} field
+     */
+    componentRef (field) {
+      return `form:component-${field.$layout.formOrder}`
+    },
+    /**
+     * @returns {number}
+     */
+    componentTabIndex () {
+      if (!this.counter) {
+        this.counter = 0
+      }
+      this.counter++
+      return this.counter
+    },
+    /**
+     * @param {Object} $event
+     * @param {Object} component
+     */
+    componentInput ($event, component) {
+      this.record[component.$key] = component.parseInput($event)
+      this.$emit('input', component.$key, component.parseInput($event))
+      if (component.listeners.input) {
+        component.listeners.input($event)
+      }
+    },
+    /**
+     * @param {Function} h
+     * @param {Object} field
+     * @returns {*}
+     */
+    renderFieldComponent (h, field) {
+      const key = field.$key
+
+      return h(field.is, {
+        ref: this.componentRef(field),
+        domProps: { tabIndex: this.componentTabIndex(), value: this.record[key] },
+        props: { value: this.record[key] },
+        attrs: { ...field.attrs },
+        on: { ...field.listeners, input: ($event) => this.componentInput($event, field) }
+      })
+    }
+  },
+  /**
+   */
+  watch: {
+    /**
+     * @param value
+     */
+    value: {
+      deep: true,
+      handler (value) {
+        this.record = this.$util.clone(value)
+      }
+    }
+  },
+  /**
+   */
+  created () {
+    this.counter = 1
+    this.record = this.$util.clone(this.value)
+  }
+}