Tweaks related to controls (quasarframework#1518)

* Add tests for rating. Add dark, disable and readonly

* Lots of tweaks for controls

Author: pdanpdan

dev/components/form/all.vue

@@ -44,11 +44,8 @@ export default {
     },
     displayValue: String,
     placeholder: String,
-    clearable: Boolean,
     okLabel: String,
-    cancelLabel: String,
-    disable: Boolean,
-    readonly: Boolean
+    cancelLabel: String
   },
   data () {
     let data = this.isPopover ? {} : {
@@ -104,7 +101,7 @@ export default {
       }
     },
     __onFocus () {
-      if (this.focused) {
+      if (this.disable || this.focused) {
         return
       }
       this.__setModel(this.value || this.defaultSelection)

src/components/color/QColor.js

@@ -15,9 +15,10 @@ export default {
     TouchPan
   },
   props: {
-    value: {
+    value: [String, Object],
+    defaultSelection: {
       type: [String, Object],
-      required: true
+      default: '#000'
     },
     type: {
       type: String,
@@ -30,7 +31,7 @@ export default {
   data () {
     return {
       view: !this.value || typeof this.value === 'string' ? 'hex' : 'rgb',
-      model: this.__parseModel(this.value),
+      model: this.__parseModel(this.value || this.defaultSelection),
       inputError: {
         hex: false,
         r: false,
@@ -42,7 +43,7 @@ export default {
   watch: {
     value: {
       handler (v) {
-        const model = this.__parseModel(v)
+        const model = this.__parseModel(v || this.defaultSelection)
         if (model.hex !== this.model.hex) {
           this.model = model
         }
@@ -78,7 +79,7 @@ export default {
       }
       return this.isHex
         ? this.value.length > 7
-        : this.value.a !== void 0
+        : this.value && this.value.a !== void 0
     },
     swatchStyle () {
       return {
@@ -203,19 +204,16 @@ export default {
               type: 'number',
               min: 0,
               max,
-              readonly: !this.editable
+              readonly: !this.editable,
+              tabindex: this.disable ? 0 : -1
             },
             staticClass: 'full-width text-center q-no-input-spinner',
             domProps: {
               value: Math.round(this.model[type])
             },
             on: {
-              input: evt => {
-                this.__onNumericChange(evt, type, max)
-              },
-              blur: evt => {
-                this.__onNumericChange(evt, type, max, true)
-              }
+              input: evt => this.__onNumericChange(evt, type, max),
+              blur: evt => this.editable && this.__onNumericChange(evt, type, max, true)
             }
           }),
           h('div', { staticClass: 'q-color-label text-center uppercase' }, [
@@ -232,11 +230,11 @@ export default {
               domProps: { value: this.model.hex },
               attrs: {
                 readonly: !this.editable,
-                tabindex: this.editable ? 0 : -1
+                tabindex: this.disable ? 0 : -1
               },
               on: {
                 input: this.__onHexChange,
-                blur: evt => this.__onHexChange(evt, true)
+                blur: evt => this.editable && this.__onHexChange(evt, true)
               },
               staticClass: 'full-width text-center uppercase'
             }),
@@ -255,7 +253,8 @@ export default {
           h(QBtn, {
             props: {
               flat: true,
-              color: 'grey-7'
+              color: 'grey-7',
+              disable: this.disable
             },
             on: {
               click: this.__nextInputView

src/components/color/QColorPicker.js

@@ -95,6 +95,9 @@ export default {
       }
     },
     __onFocus () {
+      if (this.disable || this.focused) {
+        return
+      }
       if (this.defaultView) {
         const target = this.$refs.target
         if (target.view !== this.defaultView) {
@@ -104,9 +107,6 @@ export default {
           target.__scrollView()
         }
       }
-      if (this.focused) {
-        return
-      }
       this.__setModel(isValid(this.value) ? this.value : this.defaultSelection)
       this.focused = true
       this.$emit('focus')
@@ -219,6 +219,7 @@ export default {
         error: this.error,
         warning: this.warning,
         disable: this.disable,
+        readonly: this.readonly,
         inverted: this.inverted,
         dark: this.dark,
         hideUnderline: this.hideUnderline,

src/components/datetime/QDatetime.js

@@ -7,21 +7,21 @@
           <span
             :class="{active: view === 'month'}"
             class="q-datetime-link small col-auto col-md-12"
-            @click="view = 'month'"
+            @click="!disable && (view = 'month')"
           >
             {{ monthString }}
           </span>
           <span
             :class="{active: view === 'day'}"
             class="q-datetime-link col-auto col-md-12"
-            @click="view = 'day'"
+            @click="!disable && (view = 'day')"
           >
             {{ day }}
           </span>
           <span
             :class="{active: view === 'year'}"
             class="q-datetime-link small col-auto col-md-12"
-            @click="view = 'year'"
+            @click="!disable && (view = 'year')"
           >
             {{ year }}
           </span>
@@ -35,15 +35,15 @@
           <span
             :class="{active: view === 'hour'}"
             class="q-datetime-link col-auto col-md-12"
-            @click="view = 'hour'"
+            @click="!disable && (view = 'hour')"
           >
             {{ __pad(hour, '&nbsp;&nbsp;') }}
           </span>
           <span style="opacity: 0.6">:</span>
           <span
             :class="{active: view === 'minute'}"
             class="q-datetime-link col-auto col-md-12"
-            @click="view = 'minute'"
+            @click="!disable && (view = 'minute')"
           >
             {{ __pad(minute) }}
           </span>
@@ -74,6 +74,8 @@
             flat
             class="q-datetime-btn full-width"
             :class="{active: n + yearMin === year}"
+            :color="dark ? 'light' : 'dark'"
+            :disable="!editable"
             @click="setYear(n + yearMin)"
           >
             {{ n + yearMin }}
@@ -90,6 +92,8 @@
             flat
             class="q-datetime-btn full-width"
             :class="{active: month === index + monthMin}"
+            :color="dark ? 'light' : 'dark'"
+            :disable="!editable"
             @click="setMonth(index + monthMin, true)"
           >
             {{ $q.i18n.date.months[index + monthMin - 1] }}
@@ -106,29 +110,29 @@
               dense
               flat
               :color="color"
-              @click="setMonth(month - 1)"
-              :disabled="beforeMinDays"
               :icon="$q.icon.datetime.arrowLeft"
               :repeatTimeout="__getRepeatEasing()"
+              :disable="beforeMinDays || disable || readonly"
+              @click="setMonth(month - 1)"
             ></q-btn>
-            <div class="col q-datetime-dark">
+            <div class="col" :class="classDark">
               {{ monthStamp }}
             </div>
             <q-btn
               round
               dense
               flat
               :color="color"
-              @click="setMonth(month + 1)"
-              :disabled="afterMaxDays"
               :icon="$q.icon.datetime.arrowRight"
               :repeatTimeout="__getRepeatEasing()"
+              :disable="afterMaxDays || disable || readonly"
+              @click="setMonth(month + 1)"
             ></q-btn>
           </div>
-          <div class="q-datetime-weekdays row items-center justify-start">
+          <div class="q-datetime-weekdays row items-center justify-start" :class="classDark">
             <div v-for="day in headerDayNames" :key="`dh${day}`">{{day}}</div>
           </div>
-          <div class="q-datetime-days row wrap items-center justify-start content-center">
+          <div class="q-datetime-days row wrap items-center justify-start content-center" :class="classDark">
             <div v-for="fillerDay in fillerDays" :key="`fd${fillerDay}`" class="q-datetime-fillerday"></div>
             <template v-if="min">
               <div v-for="fillerDay in beforeMinDays" :key="`fb${fillerDay}`" class="row items-center content-center justify-center disabled">
@@ -139,10 +143,11 @@
               v-for="monthDay in daysInterval"
               :key="`md${monthDay}`"
               class="row items-center content-center justify-center cursor-pointer"
-              :class="{
+              :class="[color && monthDay === day ? `text-${color}` : null, {
                 'q-datetime-day-active': monthDay === day,
-                'q-datetime-day-today': monthDay === today
-              }"
+                'q-datetime-day-today': monthDay === today,
+                'disabled': !editable
+              }]"
               @click="setDay(monthDay)"
             >
               <span>{{ monthDay }}</span>
@@ -276,6 +281,9 @@ export default {
     }
   },
   computed: {
+    classDark () {
+      return this.dark ? 'q-datetime-light' : 'q-datetime-dark'
+    },
     classes () {
       const cls = []
       if (this.disable) {

src/components/datetime/QDatetimePicker.mat.vue

@@ -14,6 +14,10 @@ export const inline = {
     validator: modelValidator,
     required: true
   },
+  defaultSelection: {
+    type: [String, Number, Date],
+    default: null
+  },
   type: {
     type: String,
     default: 'date',
@@ -23,6 +27,7 @@ export const inline = {
     type: String,
     default: 'primary'
   },
+  dark: Boolean,
   min: {
     validator: modelValidator,
     default: null
@@ -51,14 +56,7 @@ export const inline = {
 export const input = {
   format: String,
   placeholder: String,
-  clearable: Boolean,
   okLabel: String,
   cancelLabel: String,
-  defaultSelection: {
-    type: [String, Number, Date],
-    default: null
-  },
-  displayValue: String,
-  disable: Boolean,
-  readonly: Boolean
+  displayValue: String
 }

src/components/datetime/datetime-props.js

@@ -13,6 +13,9 @@
 .q-datetime-dark
   color black
 
+.q-datetime-light
+  color white
+
 .q-datetime-header
   background currentColor
   > div
@@ -55,7 +58,6 @@ div + .q-datetime-time
   height 300px
 
 .q-datetime-weekdays
-  color rgba(0, 0, 0, .87)
   font-size .75rem
   margin-top 10px
   margin-bottom 5px
@@ -77,8 +79,6 @@ div + .q-datetime-time
   height 35px
   border-radius 50%
 
-  &:not(.q-datetime-day-active)
-    color black
   &.q-datetime-day-active
     background currentColor
     > span
@@ -92,8 +92,6 @@ div + .q-datetime-time
 
 .q-datetime-btn
   font-weight normal
-  &:not(.active)
-    color black !important
   &.active
     font-size 1.5rem
     padding-top 1rem

src/components/datetime/datetime.mat.styl

@@ -78,7 +78,7 @@
     />
 
     <q-icon
-      v-if="isPassword && !noPassToggle && length"
+      v-if="!disable && isPassword && !noPassToggle && length"
       slot="after"
       :name="$q.icon.input[showPass ? 'showPass' : 'hidePass']"
       class="q-if-control"
@@ -88,7 +88,7 @@
     ></q-icon>
 
     <q-icon
-      v-if="keyboardToggle"
+      v-if="editable && keyboardToggle"
       slot="after"
       :name="$q.icon.input[showNumber ? 'showNumber' : 'hideNumber']"
       class="q-if-control"
@@ -221,10 +221,10 @@ export default {
     },
     inputType () {
       if (this.isPassword) {
-        return this.showPass ? 'text' : 'password'
+        return this.showPass && this.editable ? 'text' : 'password'
       }
       return this.isNumber
-        ? (this.showNumber ? 'number' : 'text')
+        ? (this.showNumber || !this.editable ? 'number' : 'text')
         : this.type
     },
     length () {

src/components/input/QInput.vue

@@ -9,10 +9,7 @@ export default {
     TouchPan
   },
   props: {
-    value: {
-      type: Number,
-      required: true
-    },
+    value: Number,
     min: {
       type: Number,
       default: 0
@@ -97,7 +94,7 @@ export default {
         })
       }
       else {
-        this.model = this.computedDecimals
+        this.model = this.computedDecimals && typeof value === 'number'
           ? parseFloat(value.toFixed(this.computedDecimals))
           : value
       }

src/components/knob/QKnob.js

@@ -20,9 +20,12 @@ export default {
   props: {
     value: {
       type: Object,
-      required: true,
+      default: () => ({
+        min: 0,
+        max: 0
+      }),
       validator (value) {
-        return typeof value.min !== 'undefined' && typeof value.max !== 'undefined'
+        return value.hasOwnProperty('min') && value.hasOwnProperty('max')
       }
     },
     dragRange: Boolean,