[xprototype#4/feature] Add radio component

wilcorrea-forks · Mar 29, 2019 · e8ee6dc · e8ee6dc
1 parent 5f78ff8
commit e8ee6dc
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 40 deletions.
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -83,6 +83,7 @@ module.exports = function (context) {
         'QCheckbox',
         'QSelect',
         'QRadio',
+        'QOptionGroup',
         'QCard',
         'QCardSection',
         'QCardActions',

diff --git a/src/app/Prototype/Prototype/FieldIs.js b/src/app/Prototype/Prototype/FieldIs.js
@@ -23,81 +23,96 @@ export default {
   },
 
   /**
-   * @param {Boolean} upperCase
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsInput (upperCase = true) {
+  fieldIsInput (attrs = {}) {
     this.setComponent('input')
-    return this.setAttrs({ upperCase })
-  },
-
-  /**
-   * @returns {Prototype}
-   */
-  fieldIsNumber () {
-    this.setComponent('input')
-    this.setAttrs({ type: 'number' })
+    this.setAttrs({ ...attrs })
     return this
   },
 
   /**
-   * @param {Array} options
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsSelect (options) {
-    this.setComponent('select')
-    this.setAttrs({ options })
-    this.setLayout({
-      tableFormat (value/* , row */) {
-        return options.find((option) => option.value === value).label
-      }
-    })
+  fieldIsNumber (attrs = {}) {
+    this.setComponent('number')
+    this.setAttrs({ ...attrs })
     return this
   },
 
   /**
-   * @param {Number} rows
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsText (rows = 3) {
-    this.setComponent('text')
-    return this.setAttrs({ rows })
+  fieldIsPassword (attrs = {}) {
+    this.setComponent('password')
+    this.setAttrs({ ...attrs })
+    return this
   },
 
   /**
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsPassword () {
-    return this.setComponent('password')
+  fieldIsEmail (attrs = {}) {
+    this.setComponent('email')
+    this.setAttrs({ ...attrs })
+    return this
   },
 
   /**
+   * @param {Number} rows
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsRadio () {
-    return this.setComponent('radio')
+  fieldIsText (rows = 4, attrs = {}) {
+    this.setComponent('text')
+    this.setAttrs({ ...attrs, rows })
+    return this
   },
 
   /**
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsHtml () {
-    return this.setComponent('html')
+  fieldIsCheckbox (attrs = {}) {
+    this.setComponent('checkbox')
+    this.setAttrs({ ...attrs })
+    return this
   },
 
   /**
+   * @param {Array} options
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsFile () {
-    return this.setComponent('file')
+  fieldIsRadio (options = undefined, attrs = {}) {
+    if (!Array.isArray(options)) {
+      options = [
+        { value: true, label: 'Yes' },
+        { value: false, label: 'No' }
+      ]
+    }
+    this.setComponent('radio')
+    this.setAttrs({ ...attrs, options })
+    return this
   },
 
   /**
+   * @param {Array} options
+   * @param {Object} attrs
    * @returns {Prototype}
    */
-  fieldIsEmail () {
-    this.setComponent('input')
-    this.setAttrs({ type: 'password' })
+  fieldIsSelect (options, attrs = {}) {
+    this.setComponent('select')
+    this.setAttrs({ ...attrs, options })
+    this.setLayout({
+      tableFormat (value/* , row */) {
+        return options.find((option) => option.value === value).label
+      }
+    })
     return this
   }
 }
diff --git a/src/config/app/components.js b/src/config/app/components.js
@@ -5,22 +5,46 @@ export default {
     is: 'q-input',
     attrs: { ...attrs }
   },
-  text: {
+  number: {
     is: 'q-input',
     attrs: {
-      type: 'textarea',
-      rows: 4,
+      type: 'number',
       ...attrs
     }
   },
   password: {
     is: 'q-input',
-    attrs: { ...attrs }
+    attrs: {
+      type: 'number',
+      ...attrs
+    }
   },
-  image: {
+  email: {
     is: 'q-input',
+    attrs: {
+      type: 'email',
+      ...attrs
+    }
+  },
+  text: {
+    is: 'q-input',
+    attrs: {
+      type: 'textarea',
+      rows: 4,
+      ...attrs
+    }
+  },
+  checkbox: {
+    is: 'q-checkbox',
     attrs: { ...attrs }
   },
+  radio: {
+    is: 'q-option-group',
+    attrs: {
+      inline: true,
+      ...attrs
+    }
+  },
   select: {
     is: 'q-select',
     attrs: { ...attrs }