feat(QInput/QSelect/QField): ability to customize standout (now a Boolean or String prop) quasarframework#3914

Author: rstoenescu

docs/src/examples/QField/DesignOverview.vue

@@ -25,6 +25,12 @@
         </template>
       </q-field>
 
+      <q-field standout="bg-teal text-white" label="Custom standout" stack-label>
+        <template v-slot:control>
+          <div class="self-center full-width no-outline" tabindex="0">Field content</div>
+        </template>
+      </q-field>
+
       <q-field borderless label="Borderless" stack-label>
         <template v-slot:control>
           <div class="self-center full-width no-outline" tabindex="0">Field content</div>

docs/src/examples/QField/DesignStandout.vue

@@ -15,6 +15,12 @@
         </template>
       </q-field>
 
+      <q-field standout="bg-teal text-white" label="Custom standout" stack-label :dense="dense">
+        <template v-slot:control>
+          <div class="self-center full-width no-outline" tabindex="0">{{text}}</div>
+        </template>
+      </q-field>
+
       <q-field standout square hint="With perfect square borders" :dense="dense">
         <template v-slot:control>
           <div class="self-center full-width no-outline" tabindex="0">{{text}}</div>

docs/src/examples/QInput/DesignOverview.vue

@@ -9,6 +9,8 @@
 
       <q-input standout v-model="text" label="Standout" />
 
+      <q-input standout="bg-teal text-white" v-model="text" label="Custom standout" />
+
       <q-input borderless v-model="text" label="Borderless" />
 
       <q-input rounded filled v-model="text" label="Rounded filled" />

docs/src/examples/QInput/DesignStandout.vue

@@ -5,6 +5,8 @@
 
       <q-input standout v-model="text" :dense="dense" />
 
+      <q-input standout="bg-teal text-white" v-model="text" label="Custom standout" :dense="dense" />
+
       <q-input standout v-model="text" label="Label (stacked)" stack-label :dense="dense" />
 
       <q-input standout v-model="text" label="Label" :dense="dense" />

docs/src/examples/QSelect/DesignOverview.vue

@@ -9,6 +9,8 @@
 
       <q-select standout v-model="model" :options="options" label="Standout" />
 
+      <q-select standout="bg-teal text-white" v-model="model" :options="options" label="Custom standout" />
+
       <q-select borderless v-model="model" :options="options" label="Borderless" />
 
       <q-select rounded filled v-model="model" :options="options" label="Rounded filled" />

docs/src/layouts/Layout.vue

@@ -48,7 +48,7 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
           ref="docAlgolia"
           v-model="search"
           dense
-          standout
+          standout="bg-primary text-white"
           square
           placeholder="Search..."
         )

quasar/dev/components/form/input-validate.vue

@@ -16,6 +16,14 @@
         <q-btn label="Reset" @click="reset" color="primary" flat />
       </div>
 
+      <q-input
+        v-model.number="model"
+        type="number"
+        :rules="[
+          val => !!val || 'Type a number'
+        ]"
+      />
+
       <q-input
         ref="input1"
         v-bind="{[type]: true}"
@@ -323,6 +331,7 @@ export default {
     const n = 7
 
     const data = {
+      model: null,
       n,
       type: 'filled',
       modelExternal: '',

quasar/dev/components/form/input.vue

@@ -244,6 +244,12 @@
         </q-input>
       </div>
 
+      <div class="bg-white q-pa-lg">
+        <q-input :dense="dense" standout="bg-primary text-white" v-model="text">
+          <q-icon slot="append" name="search" />
+        </q-input>
+      </div>
+
       <div class="bg-primary q-pa-lg">
         <q-input :dense="dense" dark standout v-model="text">
           <q-icon slot="append" name="search" />

quasar/src/components/card/QCardActions.js

@@ -15,7 +15,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      return `q-card__actions--${this.vertical ? 'vert column justify-start' : 'horiz row ' + this.alignClass}`
+      return `q-card__actions--${this.vertical === true ? 'vert column justify-start' : 'horiz row ' + this.alignClass}`
     }
   },
 

quasar/src/components/field/QField.js

@@ -29,7 +29,7 @@ export default Vue.extend({
     filled: Boolean,
     outlined: Boolean,
     borderless: Boolean,
-    standout: Boolean,
+    standout: [Boolean, String],
 
     square: Boolean,
 
@@ -132,7 +132,7 @@ export default Vue.extend({
       if (this.filled === true) { return 'filled' }
       if (this.outlined === true) { return 'outlined' }
       if (this.borderless === true) { return 'borderless' }
-      if (this.standout === true) { return 'standout' }
+      if (this.standout) { return 'standout' }
       return 'standard'
     },
 
@@ -142,6 +142,9 @@ export default Vue.extend({
       if (this.hasError) {
         cls.push('text-negative')
       }
+      else if (typeof this.standout === 'string' && this.standout.length > 0 && this.focused === true) {
+        return this.standout
+      }
       else if (this.color !== void 0) {
         cls.push('text-' + this.color)
       }