feat(docs): enhance Dialog plugin page - more explicit examples

docs/public/examples/Dialog/NativeAttributes.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-btn label="Prompt (1-10, step 2)" color="primary" @click="prompt" />
+  </div>
+</template>
+
+<script>
+import { useQuasar } from 'quasar'
+
+export default {
+  setup () {
+    const $q = useQuasar()
+
+    function prompt () {
+      $q.dialog({
+        title: 'Prompt with native attributes',
+        message: 'Please type a value between 0 and 10:',
+        prompt: {
+          model: 2,
+          type: 'number',
+
+          // native attributes:
+          min: 0,
+          max: 10,
+          step: 2
+        },
+        cancel: true,
+        persistent: true
+      }).onOk(data => {
+        // console.log('>>>> OK, received', data)
+      }).onCancel(() => {
+        // console.log('>>>> Cancel')
+      }).onDismiss(() => {
+        // console.log('I am triggered on both OK and Cancel')
+      })
+    }
+
+    return { prompt }
+  }
+}
+</script>

docs/src/pages/quasar-plugins/dialog.md

@@ -36,7 +36,7 @@ In order to create #2, the options selection form, you have the `options` proper
 
 <doc-installation plugins="Dialog" />
 
-## Usage
+## Built-in component
 
 ```js
 // outside of a Vue file
@@ -54,7 +54,7 @@ setup () {
 
 Please check the API card to see what the returned Object is.
 
-### Predefined
+### Usage
 
 ::: tip
 For all the examples below, also see the browser console while you check them out.
@@ -72,7 +72,13 @@ This is not an exhaustive list of what you can do with Dialogs as Quasar Plugins
 
 <doc-example title="Other options" file="Dialog/OtherOptions" />
 
-### Basic validation
+### Native attributes
+
+You can also supply native HTML attributes to the inner QInput or QOptionGroup components, like in the example below.
+
+<doc-example title="Using native attributes" file="Dialog/NativeAttributes" />
+
+### User input validation
 
 There is a basic validation system that you can use so that the user won't be able to submit the dialog (click/tap on "OK" or press <kbd>ENTER</kbd>) until the expected values are filled in.
 
@@ -89,7 +95,7 @@ You can use HTML on title and message if you specify the `html: true` prop. **Pl
 
 <doc-example title="Unsafe HTML message" file="Dialog/UnsafeHtml" />
 
-### Invoking custom component
+## Invoking custom component
 
 You can also invoke your own custom component rather than relying on the default one that the Dialog plugin comes with out of the box. But in this case you will be responsible for handling everything (including your own component props).
 
@@ -272,7 +278,7 @@ emits: {
   ...useDialogPluginComponent.emitsObject,
 
   // ...your own definitions
-]
+}
 ```
 
 #### Options API variant

ui/src/components/dialog-plugin/DialogPlugin.js

@@ -211,12 +211,12 @@ export default createComponent({
     function getPrompt () {
       return [
         h(QInput, {
-          modelValue: model.value,
-          ...formProps.value,
           color: vmColor.value,
           dense: true,
           autofocus: true,
           dark: isDark.value,
+          ...formProps.value,
+          modelValue: model.value,
           'onUpdate:modelValue': onUpdateModel,
           onKeyup: onInputKeyup
         })
@@ -226,11 +226,11 @@ export default createComponent({
     function getOptions () {
       return [
         h(QOptionGroup, {
-          modelValue: model.value,
-          ...formProps.value,
           color: vmColor.value,
           options: props.options.items,
           dark: isDark.value,
+          ...formProps.value,
+          modelValue: model.value,
           'onUpdate:modelValue': onUpdateModel
         })
       ]

ui/src/plugins/Dialog.json

@@ -76,72 +76,21 @@
                   }
                 },
 
-                "attrs": {
-                  "type": "Object",
-                  "desc": "Attributes to pass to prompt control",
-                  "examples": [ "{ autocomplete: 'off' }" ]
-                },
-
-                "label": {
-                  "type": "String",
-                  "desc": "A text label that will “float” up above the input field, once the field gets focus",
-                  "examples": [ "Username" ]
-                },
-
-                "stackLabel": {
-                  "type": "Boolean",
-                  "desc": "Label will be always shown above the field regardless of field content (if any)"
-                },
-
-                "filled": {
-                  "type": "Boolean",
-                  "desc": "Use 'filled' design for the field"
-                },
-
-                "outlined": {
-                  "type": "Boolean",
-                  "desc": "Use 'outlined' design for the field"
-                },
-
-                "standout": {
-                  "type": [ "Boolean", "String" ],
-                  "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
+                "...QInputProps": {
+                  "type": "Any",
+                  "desc": "Any QInput props, like color, label, stackLabel, filled, outlined, rounded, prefix etc",
                   "examples": [
-                    "standout",
-                    "standout=\"bg-primary text-white\""
+                    "label: 'My Label'",
+                    "standout: true",
+                    "counter: true",
+                    "maxlength: 12"
                   ]
                 },
 
-                "rounded": {
-                  "extends": "rounded"
-                },
-
-                "square": {
-                  "type": "Boolean",
-                  "desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop"
-                },
-
-                "counter": {
-                  "type": "Boolean",
-                  "desc": "Show an automatic counter on bottom right"
-                },
-
-                "maxlength": {
-                  "type": [ "String", "Number" ],
-                  "desc": "Specify a max length of model",
-                  "examples": [ "12" ]
-                },
-
-                "prefix": {
-                  "type": "String",
-                  "desc": "Prefix",
-                  "examples": [ "$" ]
-                },
-
-                "suffix": {
-                  "type": "String",
-                  "desc": "Suffix",
-                  "examples": [ "@gmail.com" ]
+                "...nativeAttributes": {
+                  "type": "Object",
+                  "desc": "Any native attributes to pass to the prompt control",
+                  "examples": [ "autocomplete: 'off'" ]
                 }
               }
             },
@@ -193,6 +142,23 @@
                     "type": "Boolean",
                     "desc": "The selection passed validation or not"
                   }
+                },
+
+                "...QOptionGroupProps": {
+                  "type": "Any",
+                  "desc": "Any QOptionGroup props",
+                  "examples": [
+                    "color: 'deep-purple-4'",
+                    "inline: true",
+                    "dense: true",
+                    "leftLabel: true"
+                  ]
+                },
+
+                "...nativeAttributes": {
+                  "type": "Object",
+                  "desc": "Any native attributes to pass to the inner QOptionGroup",
+                  "__exemption": [ "examples" ]
                 }
               }
             },