From e8ee6dc76ca42880472df3f95f4caed57926d2fd Mon Sep 17 00:00:00 2001 From: William Correa Date: Thu, 28 Mar 2019 21:29:44 -0300 Subject: [PATCH] [#4/feature] Add radio component --- quasar.conf.js | 1 + src/app/Prototype/Prototype/FieldIs.js | 85 +++++++++++++++----------- src/config/app/components.js | 34 +++++++++-- 3 files changed, 80 insertions(+), 40 deletions(-) diff --git a/quasar.conf.js b/quasar.conf.js index f0400c0..c6f9fe2 100644 --- 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 index 55292e4..a8da1c3 100644 --- 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 index d167caf..2148a53 100644 --- 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 }