feat(QSelect): dialog - add close icon; add class and style; open whe…

…n typing in field; fix focus on field quasarframework#6523, quasarframework#6858 quasarframework#6523, quasarframework#6858
pdanpdan · Mar 2, 2021 · 80aef59 · 80aef59
1 parent e8afdad
commit 80aef59
Show file tree

Hide file tree

Showing 6 changed files with 445 additions and 229 deletions.
diff --git a/ui/dev/src/pages/form/select-part-5-kbd.vue b/ui/dev/src/pages/form/select-part-5-kbd.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="q-layout-padding">
-    <div class="bg-black text-white q-pa-sm q-mb-xl">
-      <q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" /> / ModelS: {{ modelS || 'null' }} / ModelM: {{ modelM || 'null' }}
+    <div class="row items-center bg-black text-white q-pa-sm q-mb-xl">
+      <q-checkbox v-model="forceMenu" toggle-indeterminate dark :label="forceMenuLabel" />
+      <q-checkbox v-model="dialogCloseIcon" toggle-indeterminate dark :label="dialogCloseIconLabel" />
+
+      <div class="col text-right q-pr-md">
+        ModelS: {{ modelS || 'null' }} / ModelM: {{ modelM || 'null' }}
+      </div>
     </div>
 
     <div class="row q-col-gutter-md">
@@ -14,6 +19,7 @@
           label="Single"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -23,6 +29,14 @@
               </q-item-section>
             </q-item>
           </template>
+
+          <template v-slot:prepend>
+            <q-icon name="colorize" />
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="lock" />
+          </template>
         </q-select>
 
         <q-select
@@ -35,6 +49,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -44,6 +59,14 @@
               </q-item-section>
             </q-item>
           </template>
+
+          <template v-slot:prepend>
+            <q-icon name="colorize" />
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="lock" />
+          </template>
         </q-select>
 
         <q-select
@@ -57,6 +80,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -79,6 +103,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -101,6 +126,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -122,6 +148,7 @@
           label="Multiple"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -143,6 +170,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -165,6 +193,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -187,6 +216,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -210,6 +240,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -232,6 +263,7 @@
           label="Multiple Chips"
           :options="options"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -254,6 +286,7 @@
           input-debounce="0"
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -277,6 +310,7 @@
           hide-selected
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -300,6 +334,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -324,6 +359,7 @@
           fill-input
           @filter="filterFn"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -348,6 +384,7 @@
           input-debounce="0"
           @filter="filterFnObj"
           clearable
+          :dialog-close-icon="dialogCloseIconValue"
           :behavior="behavior"
         >
           <template v-slot:no-option>
@@ -370,6 +407,7 @@
         option-value="value"
         option-label="label"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -383,6 +421,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -396,6 +435,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -407,6 +447,7 @@
         option-value="value"
         option-label="label"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -418,6 +459,7 @@
         :option-value="kOptionValue"
         :option-label="kOptionLabel"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -431,6 +473,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -444,6 +487,7 @@
         emit-value
         map-options
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
 
@@ -455,6 +499,7 @@
         :option-value="kOptionValue"
         :option-label="kOptionLabel"
         clearable
+        :dialog-close-icon="dialogCloseIconValue"
         :behavior="behavior"
       />
     </div>
@@ -490,7 +535,8 @@ export default {
       optionsK,
       objOptions,
       objOptionsK,
-      forceMenu: null
+      forceMenu: null,
+      dialogCloseIcon: false
     }
   },
 
@@ -507,7 +553,21 @@ export default {
       }
 
       return this.forceMenu === false ? 'Force dialog' : 'Based on platform'
-    }
+    },
+
+    dialogCloseIconValue () {
+      return this.dialogCloseIcon === null
+        ? 'close'
+        : this.dialogCloseIcon
+    },
+
+    dialogCloseIconLabel () {
+      if (this.dialogCloseIcon === true) {
+        return 'Default dialog close icon'
+      }
+
+      return this.dialogCloseIcon === false ? 'No dialog close icon' : 'Custom dialog close icon'
+    },
   },
 
   methods: {