feat(form components): polish and finalize native form submit + docs

rstoenescu · rstoenescu · commit 3ec872fa27d3 · 2020-02-11T12:05:02.000+02:00
diff --git a/docs/src/examples/QColor/NativeForm.vue b/docs/src/examples/QColor/NativeForm.vue
@@ -7,6 +7,7 @@
       <q-color
         name="accent_color"
         v-model="color"
+        style="width: 200px; max-width: 100%;"
       />
 
       <div>
diff --git a/docs/src/examples/QFile/NativeForm.vue b/docs/src/examples/QFile/NativeForm.vue
@@ -7,12 +7,14 @@
       <q-file
         name="poster_file"
         v-model="file"
+        filled
         label="Select poster image"
       />
 
       <q-file
         name="cover_files"
         v-model="files"
+        filled
         multiple
         use-chips
         label="Select cover images"
diff --git a/docs/src/pages/vue-components/button-toggle.md b/docs/src/pages/vue-components/button-toggle.md
@@ -16,27 +16,37 @@ The QBtnToggle component is another basic element for user input, similar to QRa
 
 ## Usage
 
+### Basic
+
 <doc-example title="Basic" file="QBtnToggle/Basic" />
 
+### Design
+
 ::: tip
 Since QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.
 :::
 
 <doc-example title="Some design examples" file="QBtnToggle/Design" />
 
+<doc-example title="Spread horizontally" file="QBtnToggle/Spread" />
+
+<doc-example title="On a dark background" file="QBtnToggle/Dark" dark />
+
+### Custom content
+
 First QBtnToggle below has tooltips on each button. Second QBtnToggle has customized the content. Notice the `slot` prop in the `options` Object definition. When you use this `slot` prop, you don't necessary need the `label`/`icon` props in `options`.
 
 <doc-example title="Custom buttons content" file="QBtnToggle/CustomContent" />
 
-<doc-example title="Spread horizontally" file="QBtnToggle/Spread" />
+### Disable and readonly
 
 <doc-example title="Disable and readonly" file="QBtnToggle/DisableReadonly" />
 
-<doc-example title="On a dark background" file="QBtnToggle/Dark" dark />
-
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QBtnToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QBtnToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QBtnToggle/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/checkbox.md b/docs/src/pages/vue-components/checkbox.md
@@ -82,7 +82,9 @@ In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QCheckbox, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QCheckbox, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QCheckbox/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/color-picker.md b/docs/src/pages/vue-components/color-picker.md
@@ -64,7 +64,9 @@ You can also pick the default view, like in example below, where we also specify
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QColor, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QColor, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QColor/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/date.md b/docs/src/pages/vue-components/date.md
@@ -158,7 +158,9 @@ When using the persian calendar, the mask for QDate is forced to `YYYY/MM/DD`.
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QDate, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QDate, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QDate/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/file-picker.md b/docs/src/pages/vue-components/file-picker.md
@@ -90,7 +90,9 @@ You can also apply custom filters (which are executed after user picks files):
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QFile, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QFile, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QFile/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/form.md b/docs/src/pages/vue-components/form.md
@@ -55,13 +55,24 @@ this.$refs.myForm.resetValidation()
 
 ## Turning off Autocompletion
 If you want to turn off the way that some browsers use autocorrection or spellchecking of all of the input elements of your form, you can also add these pure HTML attributes to the QForm component:
+
 ```html
 autocorrect="off"
 autocapitalize="off"
 autocomplete="off"
 spellcheck="false"
 ```
 
+## Submitting to a URL
+If you are using the native `action` and `method` attributes on a QForm, please remember to use the `name` prop on each Quasar form component, so that the sent formData to actually contain what the user has filled in.
+
+```html
+<q-form action="https://some-url.com" method="POST">
+  <q-input name="firstname" ...>
+  <!-- ... -->
+</q-form>
+```
+
 ## QForm API
 <doc-api file="QForm" />
 
diff --git a/docs/src/pages/vue-components/input.md b/docs/src/pages/vue-components/input.md
@@ -292,9 +292,11 @@ You can also customize the slot for error message:
 
 <doc-example title="Slot for error message" file="QInput/ValidationSlots" />
 
-### Native form submit
+## Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QInput, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QInput, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QInput/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/knob.md b/docs/src/pages/vue-components/knob.md
@@ -11,25 +11,40 @@ The QKnob component is used to take a number input from the user through mouse/t
 <doc-installation components="QKnob" />
 
 ## Usage
+
 By default, QKnob inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.
 
+### Basic
+
 <doc-example title="Basic" file="QKnob/Basic" />
 
+### Show value
+
 In the example below, `show-value` property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The `font-size` prop refers to the inner label font size.
 
 <doc-example title="Show value" file="QKnob/ShowValue" />
 
+### Min and max
+
 <doc-example title="Custom min/max" file="QKnob/MinMax" />
 
+### Custom step
+
 <doc-example title="Custom step" file="QKnob/Step" />
 
+### Offset angle
+
 <doc-example title="Offset angle" file="QKnob/Angle" />
 
+### Disable and readonly
+
 <doc-example title="Disable and readonly" file="QKnob/DisableReadonly" />
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QKnob, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QKnob, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QKnob/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/option-group.md b/docs/src/pages/vue-components/option-group.md
@@ -51,7 +51,9 @@ The model for checkboxes/toggles must be an array.
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QOptionGroup, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QOptionGroup, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QOptionGroup/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/radio.md b/docs/src/pages/vue-components/radio.md
@@ -67,7 +67,9 @@ In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QRadio, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QRadio, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QRadio/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/range.md b/docs/src/pages/vue-components/range.md
@@ -92,7 +92,9 @@ Using simple CSS you can get nice effects.
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QRange, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QRange, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QRange/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/rating.md b/docs/src/pages/vue-components/rating.md
@@ -67,7 +67,9 @@ Apart from the standard sizes below, you can define your own through the `size`
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QRating, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QRating, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QRating/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/select.md b/docs/src/pages/vue-components/select.md
@@ -257,9 +257,11 @@ When the list of options is opened:
     - select the option and close the list of options if `multiple` is not set
     - toggle the option if `multiple` is set
 
-### Native form submit
+## Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QSelect, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QSelect, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QSelect/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/slider.md b/docs/src/pages/vue-components/slider.md
@@ -74,7 +74,9 @@ The example below is better highlighting how QSlider handles label positioning s
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QSlider, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QSlider, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QSlider/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/time.md b/docs/src/pages/vue-components/time.md
@@ -111,7 +111,9 @@ You can use the default slot for adding buttons:
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QTime, otherwise formData will not contain it (if it should):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QTime, otherwise formData will not contain it (if it should):
 
 <doc-example title="Native form" file="QTime/NativeForm" />
 
diff --git a/docs/src/pages/vue-components/toggle.md b/docs/src/pages/vue-components/toggle.md
@@ -84,7 +84,9 @@ You can also use [QOptionGroup](/vue-components/option-group), which simplifies
 
 ### Native form submit
 
-When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with DotNet controllers), you need to specify the `name` property on QToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
+<q-badge label="v1.9+" />
+
+When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):
 
 <doc-example title="Native form" file="QToggle/NativeForm" />
 
diff --git a/ui/src/components/option-group/QOptionGroup.js b/ui/src/components/option-group/QOptionGroup.js
@@ -14,6 +14,8 @@ const components = {
   toggle: QToggle
 }
 
+const typeValues = Object.keys(components)
+
 export default Vue.extend({
   name: 'QOptionGroup',
 
@@ -34,7 +36,7 @@ export default Vue.extend({
 
     type: {
       default: 'radio',
-      validator: v => ['radio', 'checkbox', 'toggle'].includes(v)
+      validator: v => typeValues.includes(v)
     },
 
     color: String,
@@ -54,7 +56,9 @@ export default Vue.extend({
     },
 
     model () {
-      return Array.isArray(this.value) ? this.value.slice() : this.value
+      return Array.isArray(this.value)
+        ? this.value.slice()
+        : this.value
     },
 
     classes () {
@@ -77,7 +81,7 @@ export default Vue.extend({
         console.error('q-option-group: model should not be array')
       }
     }
-    else if (!isArray) {
+    else if (isArray === false) {
       console.error('q-option-group: model should be array in your case')
     }
   },
@@ -91,7 +95,7 @@ export default Vue.extend({
         props: {
           value: this.value,
           val: opt.value,
-          name: this.name,
+          name: this.name || opt.name,
           disable: this.disable || opt.disable,
           label: opt.label,
           leftLabel: this.leftLabel || opt.leftLabel,
diff --git a/ui/src/components/radio/QRadio.js b/ui/src/components/radio/QRadio.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import DarkMixin from '../../mixins/dark.js'
 import OptionSizeMixin from '../../mixins/option-size.js'
-import { FormRadioMixin } from '../../mixins/form.js'
+import FormMixin from '../../mixins/form.js'
 
 import { stopAndPrevent } from '../../utils/event.js'
 import { slot, mergeSlot } from '../../utils/slot.js'
@@ -11,7 +11,7 @@ import { cache } from '../../utils/vm.js'
 export default Vue.extend({
   name: 'QRadio',
 
-  mixins: [ DarkMixin, OptionSizeMixin, FormRadioMixin ],
+  mixins: [ DarkMixin, OptionSizeMixin, FormMixin ],
 
   props: {
     value: {
@@ -69,6 +69,12 @@ export default Vue.extend({
       })
 
       return prop
+    },
+
+    formDomProps () {
+      if (this.name !== void 0 && this.isTrue === true) {
+        return { checked: true }
+      }
     }
   },
 
diff --git a/ui/src/mixins/form.js b/ui/src/mixins/form.js
@@ -13,34 +13,6 @@ export default {
     }
   },
 
-  methods: {
-    __injectFormInput (child, action, className) {
-      child[action](
-        this.$createElement('input', {
-          staticClass: 'hidden',
-          class: className,
-          attrs: this.formAttrs
-        })
-      )
-    }
-  }
-}
-
-export const FormRadioMixin = {
-  props: {
-    name: String
-  },
-
-  computed: {
-    formDomProps () {
-      if (this.name !== void 0 && this.isTrue === true) {
-        return {
-          checked: true
-        }
-      }
-    }
-  },
-
   methods: {
     __injectFormInput (child, action, className) {
       child[action](
