feat(form components): New prop ("name") useful for form processing quasarframework#5963 (replaces quasarframework#6265)

Author: rstoenescu

ui/dev/src/pages/form/checkbox-radio-toggle-test.vue

@@ -7,14 +7,14 @@
     <q-card tag="form" @submit.prevent="onSubmit" :dark="dark" :disabled="disable">
       <q-card-section>
         <div class="q-mb-lg row q-col-gutter-x-md">
-          <q-select filled class="col" for="select1" v-model="select1" dense :options="options" :dark="dark" :disable="disable" label="Single" clearable />
-          <q-select filled class="col" for="select2" v-model="select2" dense :options="options" :dark="dark" :disable="disable" label="Multiple" multiple clearable />
+          <q-select name="select1" filled class="col" v-model="select1" dense :options="options" :dark="dark" :disable="disable" label="select1 - Single" clearable />
+          <q-select name="select2" filled class="col" v-model="select2" dense :options="options" :dark="dark" :disable="disable" label="select2 - Multiple" multiple clearable />
         </div>
 
         <div class="q-mb-lg row q-col-gutter-x-md">
-          <q-input filled class="col" for="text1" v-model="text1" dense :dark="dark" :disable="disable" clearable label="Text" />
-          <q-input filled class="col" for="textarea1" v-model="text2" dense :dark="dark" :disable="disable" clearable type="textarea" autogrow label="Textarea" />
-          <q-file filled class="col" for="file1" v-model="file" dense :dark="dark" :disable="disable" clearable label="File" />
+          <q-input name="text1" filled class="col" v-model="text1" dense :dark="dark" :disable="disable" clearable label="text1 - Text" />
+          <q-input name="textarea1" filled class="col" v-model="text2" dense :dark="dark" :disable="disable" clearable type="textarea" autogrow label="textarea1 - Textarea" />
+          <q-file name="file1" filled class="col" v-model="file" dense :dark="dark" :disable="disable" clearable label="file1 - File" />
         </div>
 
         <div class="q-my-lg">
@@ -162,7 +162,7 @@ export default {
       for (const [ name, value ] of formData.entries()) {
         submitResult.push({
           name,
-          value: value.name || value
+          value
         })
       }
       this.submitResult = submitResult

ui/src/components/field/QField.js

@@ -59,7 +59,9 @@ export default Vue.extend({
 
     autofocus: Boolean,
 
-    for: [String],
+    for: String,
+    name: String,
+
     maxlength: [Number, String],
     maxValues: [Number, String] // private, do not add to JSON; internally needed by QSelect
   },
@@ -206,6 +208,10 @@ export default Vue.extend({
         value: this.value,
         emitValue: this.__emitValue
       }
+    },
+
+    nameProp () {
+      return this.name || this.for
     }
   },
 

ui/src/components/field/__QField.json

@@ -161,10 +161,18 @@
 
     "for": {
       "type": "String",
-      "desc": "DOM element id to be used as 'for' attribute of the label and as 'id' for the focus target",
-      "examples": [ "for=\"myFieldsId\"" ],
+      "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
+      "examples": [ "myFieldsId" ],
       "category": "behavior",
       "addedIn": "v1.4.2"
+    },
+
+    "name": {
+      "type": "String",
+      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists",
+      "examples": [ "car_id" ],
+      "category": "behavior",
+      "addedIn": "v1.9.0"
     }
   },
 

ui/src/components/file/QFile.js

@@ -222,6 +222,7 @@ export default Vue.extend({
           type: 'file',
           title: '', // try to remove default tooltip,
           accept: this.accept,
+          name: this.nameProp,
           ...this.$attrs,
           id: this.targetUid,
           disabled: this.editable !== true

ui/src/components/input/QInput.js

@@ -237,6 +237,7 @@ export default Vue.extend({
         'data-autofocus': this.autofocus,
         rows: this.type === 'textarea' ? 6 : void 0,
         'aria-label': this.label,
+        name: this.nameProp,
         ...this.$attrs,
         id: this.targetUid,
         type: this.type,

ui/src/components/radio/QRadio.js

@@ -10,8 +10,6 @@ import { cache } from '../../utils/vm.js'
 export default Vue.extend({
   name: 'QRadio',
 
-  inheritAttrs: false,
-
   mixins: [ DarkMixin, OptionSizeMixin ],
 
   props: {
@@ -22,6 +20,8 @@ export default Vue.extend({
       required: true
     },
 
+    name: String,
+
     label: String,
     leftLabel: Boolean,
 
@@ -62,12 +62,16 @@ export default Vue.extend({
       return this.disable === true ? -1 : this.tabindex || 0
     },
 
-    domProps () {
-      return {
-        type: 'radio',
-        value: this.val === Object(this.val) || this.val,
-        checked: this.isTrue
-      }
+    attrs () {
+      const prop = { type: 'radio' }
+
+      this.name !== void 0 && Object.assign(prop, {
+        checked: this.isTrue,
+        name: this.name,
+        value: this.val
+      })
+
+      return prop
     }
   },
 
@@ -108,8 +112,7 @@ export default Vue.extend({
     this.disable !== true && content.unshift(
       h('input', {
         staticClass: 'q-radio__native q-ma-none q-pa-none invisible',
-        attrs: this.$attrs,
-        domProps: this.domProps
+        attrs: this.attrs
       })
     )
 

ui/src/components/radio/QRadio.json

@@ -22,6 +22,14 @@
       "category": "model"
     },
 
+    "name": {
+      "type": "String",
+      "desc": "Used to specify the name of the control; Useful if dealing with forms",
+      "examples": [ "car_id" ],
+      "category": "behavior",
+      "addedIn": "v1.9.0"
+    },
+
     "label": {
       "type": "String",
       "desc": "Label to display along the radio control (or use the default slot instead of this prop)",

ui/src/components/select/QSelect.js

@@ -170,12 +170,6 @@ export default Vue.extend({
         (this.popupContentClass ? ' ' + this.popupContentClass : '')
     },
 
-    optionValueKey () {
-      return typeof this.optionValue === 'string'
-        ? this.optionValue
-        : 'value'
-    },
-
     innerValue () {
       const
         mapNull = this.mapOptions === true && this.multiple !== true,
@@ -240,7 +234,7 @@ export default Vue.extend({
       const { from, to } = this.virtualScrollSliceRange
 
       return this.options.slice(from, to).map((opt, i) => {
-        const disable = this.__isDisabled(opt)
+        const disable = this.__getOptionDisabled(opt) === true
         const index = from + i
 
         const itemProps = {
@@ -300,6 +294,18 @@ export default Vue.extend({
       return this.optionsSelectedClass !== void 0
         ? this.optionsSelectedClass
         : (this.color !== void 0 ? `text-${this.color}` : '')
+    },
+
+    __getOptionValue () {
+      return this.__getPropValueFn('optionValue', 'value')
+    },
+
+    __getOptionLabel () {
+      return this.__getPropValueFn('optionLabel', 'label')
+    },
+
+    __getOptionDisabled () {
+      return this.__getPropValueFn('optionDisable', 'disable')
     }
   },
 
@@ -354,7 +360,7 @@ export default Vue.extend({
     },
 
     toggleOption (opt, keepOpen) {
-      if (this.editable !== true || opt === void 0 || this.__isDisabled(opt) === true) {
+      if (this.editable !== true || opt === void 0 || this.__getOptionDisabled(opt) === true) {
         return
       }
 
@@ -431,7 +437,7 @@ export default Vue.extend({
             this.virtualScrollLength - 1
           )
         }
-        while (index !== -1 && index !== this.optionIndex && this.__isDisabled(this.options[index]) === true)
+        while (index !== -1 && index !== this.optionIndex && this.__getOptionDisabled(this.options[index]) === true)
 
         if (this.optionIndex !== index) {
           this.setOptionIndex(index)
@@ -452,38 +458,16 @@ export default Vue.extend({
       return this.options.find(fn) || innerValueCache.find(fn) || value
     },
 
-    __getOptionValue (opt) {
-      if (typeof this.optionValue === 'function') {
-        return this.optionValue(opt)
-      }
-      if (Object(opt) === opt && this.optionValueKey in opt) {
-        return opt[this.optionValueKey]
-      }
-      return opt
-    },
-
-    __getOptionLabel (opt) {
-      if (typeof this.optionLabel === 'function') {
-        return this.optionLabel(opt)
-      }
-      if (Object(opt) === opt) {
-        return typeof this.optionLabel === 'string'
-          ? opt[this.optionLabel]
-          : opt.label
-      }
-      return opt
-    },
+    __getPropValueFn (propName, defaultVal) {
+      const val = this[propName] !== void 0
+        ? this[propName]
+        : defaultVal
 
-    __isDisabled (opt) {
-      if (typeof this.optionDisable === 'function') {
-        return this.optionDisable(opt) === true
-      }
-      if (Object(opt) === opt) {
-        return typeof this.optionDisable === 'string'
-          ? opt[this.optionDisable] === true
-          : opt.disable === true
-      }
-      return false
+      return typeof val === 'function'
+        ? val
+        : opt => Object(opt) === opt && val in opt
+          ? opt[val]
+          : opt
     },
 
     __isSelected (opt) {
@@ -588,7 +572,7 @@ export default Vue.extend({
             index = normalizeToInterval(index + 1, -1, optionsLength - 1)
           }
           while (index !== this.optionIndex && (
-            this.__isDisabled(this.options[index]) === true ||
+            this.__getOptionDisabled(this.options[index]) === true ||
             searchRe.test(this.__getOptionLabel(this.options[index])) !== true
           ))
         }
@@ -714,7 +698,7 @@ export default Vue.extend({
         return this.selectedScope.map((scope, i) => h(QChip, {
           key: 'option-' + i,
           props: {
-            removable: this.__isDisabled(scope.opt) !== true,
+            removable: this.__getOptionDisabled(scope.opt) !== true,
             dense: true,
             textColor: this.color,
             tabindex: this.computedTabindex
@@ -767,23 +751,23 @@ export default Vue.extend({
         }))
       }
 
-      if (this.disable !== true && this.innerValue.length > 0) {
-        const options = this.innerValue
-          .filter(value => Object(value) !== value)
-          .map(value => h('option', {
-            domProps: {
-              value,
-              selected: true
-            }
-          }))
-
-        child.push(h('select', {
-          staticClass: 'hidden',
+      if (this.disable !== true && this.nameProp !== void 0 && this.innerValue.length > 0) {
+        const opts = this.innerValue.map(value => h('option', {
           attrs: {
-            name: this.targetUid,
-            multiple: this.multiple
+            value,
+            selected: true
           }
-        }, options))
+        }))
+
+        child.push(
+          h('select', {
+            staticClass: 'hidden',
+            attrs: {
+              name: this.nameProp,
+              multiple: this.multiple
+            }
+          }, opts)
+        )
       }
 
       return h('div', { staticClass: 'q-field__native row items-center', attrs: this.$attrs }, child)

ui/src/mixins/checkbox.js

@@ -9,15 +9,15 @@ import { cache } from '../utils/vm.js'
 export default {
   mixins: [ DarkMixin, OptionSizeMixin ],
 
-  inheritAttrs: false,
-
   props: {
     value: {
       required: true,
       default: null
     },
     val: {},
 
+    name: String,
+
     trueValue: { default: true },
     falseValue: { default: false },
 
@@ -94,12 +94,16 @@ export default {
       return `q-${this.type}__inner--${state}${color}`
     },
 
-    domProps () {
-      return {
-        type: 'checkbox',
-        value: this.trueValue === Object(this.trueValue) || this.trueValue,
-        checked: this.isIndeterminate === true ? void 0 : this.isTrue
-      }
+    attrs () {
+      const prop = { type: 'checkbox' }
+
+      this.name !== void 0 && Object.assign(prop, {
+        checked: this.isTrue,
+        name: this.name,
+        value: this.trueValue
+      })
+
+      return prop
     }
   },
 
@@ -159,8 +163,7 @@ export default {
     this.disable !== true && inner.unshift(
       h('input', {
         staticClass: `q-${this.type}__native absolute q-ma-none q-pa-none invisible`,
-        attrs: this.$attrs,
-        domProps: this.domProps
+        attrs: this.attrs
       })
     )
 

ui/src/mixins/checkbox.json

@@ -47,6 +47,14 @@
       "category": "behavior"
     },
 
+    "name": {
+      "type": "String",
+      "desc": "Used to specify the name of the control; Useful if dealing with forms",
+      "examples": [ "car_id" ],
+      "category": "behavior",
+      "addedIn": "v1.9.0"
+    },
+
     "size": {
       "addedIn": "v1.8.0"
     },