chore(QField): Use .q-field__input for custom input in QField and QSelect quasarframework#6049 (quasarframework#6061)

Author: pdanpdan

docs/src/pages/vue-components/input.md

@@ -193,7 +193,7 @@ You can use v-money directive:
   hint="Mask: $ #,###.00 #"
 >
   <template v-slot:control="{ id, floatingLabel, value, emitValue }">
-    <input :id="id" class="q-field__native text-right" :value="value" @change="e => emitValue(e.target.value)" v-money="moneyFormatForDirective" v-show="floatingLabel">
+    <input :id="id" class="q-field__input text-right" :value="value" @change="e => emitValue(e.target.value)" v-money="moneyFormatForDirective" v-show="floatingLabel">
   </template>
 </q-field>
 ```
@@ -219,7 +219,7 @@ Or you can use money component:
   hint="Mask: $ #,###.00 #"
 >
   <template v-slot:control="{ id, floatingLabel, value, emitValue }">
-    <money :id="id" class="q-field__native text-right" :value="value" @input="emitValue" v-bind="moneyFormatForComponent" v-show="floatingLabel" />
+    <money :id="id" class="q-field__input text-right" :value="value" @input="emitValue" v-bind="moneyFormatForComponent" v-show="floatingLabel" />
   </template>
 </q-field>
 ```

ui/dev/components/form/input.vue

@@ -30,6 +30,12 @@
 
       <q-input v-bind="props" v-model="text" required label="Required" placeholder="Write something" />
 
+      <q-field v-bind="props" v-model="text" required label="Required - Custom input">
+        <template v-slot:control="{ id, floatingLabel, value, emitValue }">
+          <input :id="id" class="q-field__input" :value="value" @input="e => emitValue(e.target.value)" v-show="floatingLabel">
+        </template>
+      </q-field>
+
       <q-input v-bind="props" v-model="invalid" pattern="[a-z]*" label="Only [a-z]" placeholder="Write something" />
 
       <q-input v-bind="props" v-model="number" type="number" label="Number" placeholder="Write a number" />

ui/dev/components/form/select-part-5-kbd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-layout-padding">
-    <div class="bg-black text-white q-pa-sm">
+    <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>
 

ui/src/components/field/QField.sass

@@ -96,7 +96,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     &:before
       border-radius: inherit
 
-  &__native, &__prefix, &__suffix
+  &__native, &__prefix, &__suffix, &__input
     font-weight: 400
     line-height: 28px
     letter-spacing: .00937em
@@ -109,12 +109,17 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     outline: 0
     padding: 6px 0
 
-  &__native
+  &__native, &__input
     width: 100%
     min-width: 0 // needed for FF
     outline: 0 !important // needed for FF
-    &[type="file"]
-      line-height: 1em // needed for Chrome type="file"
+  &__native[type="file"]
+    line-height: 1em // needed for Chrome type="file"
+  &__input
+    padding: 0
+    height: 0
+    min-height: 24px
+    line-height: 24px
   &__prefix, &__suffix
     transition: opacity $field-transition
     white-space: nowrap
@@ -129,10 +134,10 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
 
   &--readonly
     &.q-field--labeled
-      .q-field__native
+      .q-field__native, .q-field__input
         cursor: default
     &.q-field--float
-      .q-field__native
+      .q-field__native, .q-field__input
         cursor: text
 
   &--disabled
@@ -167,7 +172,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     right: calc(-100% / 3)
     transition: transform $field-transition, right $field-transition-label-right-down
 
-  .q-field__native, .q-select__input
+  .q-field__native, .q-field__input
     &:-webkit-autofill
       -webkit-animation-name: q-autofill
       -webkit-animation-fill-mode: both
@@ -298,7 +303,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     .q-field__control:hover:before
       border-color: #fff
 
-    .q-field__native, .q-field__prefix, .q-field__suffix, .q-select__input
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
       color: #fff
 
     &:not(.q-field--focused) .q-field__label, .q-field__marginal, .q-field__bottom
@@ -327,7 +332,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       .q-field__control
         box-shadow: $shadow-2
         background: #000
-      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
+      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
         color: #fff
 
     &.q-field--readonly
@@ -344,7 +349,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       &.q-field--focused
         .q-field__control
           background: #fff
-        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
           color: #000
       &.q-field--readonly
         .q-field__control:before
@@ -360,7 +365,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       .q-field__prefix, .q-field__suffix
         opacity: 0
 
-      .q-field__native, .q-select__input
+      .q-field__native, .q-field__input
         &::-webkit-input-placeholder
           color: transparent
         &::-moz-placeholder
@@ -399,7 +404,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     &.q-field--float .q-field__label
       transform: translateY(-30%) scale(.75)
 
-    .q-field__native, .q-select__input
+    .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
       &[type="number"]:invalid + .q-field__label

ui/src/components/field/QField.styl

@@ -96,7 +96,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     &:before
       border-radius: inherit
 
-  &__native, &__prefix, &__suffix
+  &__native, &__prefix, &__suffix, &__input
     font-weight: 400
     line-height: 28px
     letter-spacing: .00937em
@@ -109,12 +109,17 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     outline: 0
     padding: 6px 0
 
-  &__native
+  &__native, &__input
     width: 100%
     min-width: 0 // needed for FF
     outline: 0 !important // needed for FF
-    &[type="file"]
-      line-height: 1em // needed for Chrome type="file"
+  &__native[type="file"]
+    line-height: 1em // needed for Chrome type="file"
+  &__input
+    padding: 0
+    height: 0
+    min-height: 24px
+    line-height: 24px
   &__prefix, &__suffix
     transition: opacity $field-transition
     white-space: nowrap
@@ -129,10 +134,10 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
 
   &--readonly
     &.q-field--labeled
-      .q-field__native
+      .q-field__native, .q-field__input
         cursor: default
     &.q-field--float
-      .q-field__native
+      .q-field__native, .q-field__input
         cursor: text
 
   &--disabled
@@ -167,7 +172,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     right: calc(-100% / 3)
     transition: transform $field-transition, right $field-transition-label-right-down
 
-  .q-field__native, .q-select__input
+  .q-field__native, .q-field__input
     &:-webkit-autofill
       -webkit-animation-name: q-autofill
       -webkit-animation-fill-mode: both
@@ -298,7 +303,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     .q-field__control:hover:before
       border-color: #fff
 
-    .q-field__native, .q-field__prefix, .q-field__suffix, .q-select__input
+    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
       color: #fff
 
     &:not(.q-field--focused) .q-field__label, .q-field__marginal, .q-field__bottom
@@ -327,7 +332,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
       .q-field__control
         box-shadow: $shadow-2
         background: #000
-      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
+      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
         color: #fff
 
     &.q-field--readonly
@@ -344,7 +349,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
       &.q-field--focused
         .q-field__control
           background: #fff
-        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
+        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
           color: #000
       &.q-field--readonly
         .q-field__control:before
@@ -360,7 +365,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
       .q-field__prefix, .q-field__suffix
         opacity: 0
 
-      .q-field__native, .q-select__input
+      .q-field__native, .q-field__input
         &::-webkit-input-placeholder
           color: transparent
         &::-moz-placeholder
@@ -399,7 +404,7 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     &.q-field--float .q-field__label
       transform: translateY(-30%) scale(.75)
 
-    .q-field__native, .q-select__input
+    .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
       &[type="number"]:invalid + .q-field__label

ui/src/components/select/QSelect.js

@@ -161,8 +161,8 @@ export default Vue.extend({
       }
 
       return this.inputClass === void 0
-        ? 'q-select__input--padding'
-        : [this.inputClass, 'q-select__input--padding']
+        ? 'q-field__input--padding'
+        : [this.inputClass, 'q-field__input--padding']
     },
 
     menuContentClass () {
@@ -819,7 +819,7 @@ export default Vue.extend({
 
       return h('input', {
         ref: 'target',
-        staticClass: 'q-select__input q-placeholder col',
+        staticClass: 'q-field__input q-placeholder col',
         style: this.inputStyle,
         class: this.computedInputClass,
         domProps: { value: this.inputValue !== void 0 ? this.inputValue : '' },
@@ -950,7 +950,7 @@ export default Vue.extend({
           if (this.hasDialog !== true) {
             // label from QField will propagate click on the input (except IE)
             if (
-              (this.useInput === true && e.target.classList.contains('q-select__input') !== true) ||
+              (this.useInput === true && e.target.classList.contains('q-field__input') !== true) ||
               (this.useInput !== true && e.target.classList.contains('no-outline') === true)
             ) {
               return

ui/src/components/select/QSelect.sass

@@ -6,15 +6,8 @@
     .q-field__control
       cursor: text
 
-  &__input
-    border: 0
-    outline: 0 !important // needed for FF
-    background: transparent
+  .q-field__input
     min-width: 50px !important
-    padding: 0
-    height: 0
-    min-height: 24px
-    line-height: 24px
 
     &--padding
       padding-left: 4px
@@ -25,12 +18,6 @@
   &.q-field--readonly
     .q-field__control, .q-select__dropdown-icon
       cursor: default
-    &.q-field--labeled
-      .q-select__input
-        cursor: default
-    &.q-field--float
-      .q-select__input
-        cursor: text
 
   &__dialog
     width: 90vw !important

ui/src/components/select/QSelect.styl

@@ -6,15 +6,8 @@
     .q-field__control
       cursor: text
 
-  &__input
-    border: 0
-    outline: 0 !important // needed for FF
-    background: transparent
+  .q-field__input
     min-width: 50px !important
-    padding: 0
-    height: 0
-    min-height: 24px
-    line-height: 24px
 
     &--padding
       padding-left: 4px
@@ -25,12 +18,6 @@
   &.q-field--readonly
     .q-field__control, .q-select__dropdown-icon
       cursor: default
-    &.q-field--labeled
-      .q-select__input
-        cursor: default
-    &.q-field--float
-      .q-select__input
-        cursor: text
 
   &__dialog
     width: 90vw !important