close quasarframework#1883 - refactor QDatetime and QColor model (quasarframework#1885)

- QDatetime on iOS does not have unselected value, so we're setting it to default
- QColor cannot have unselected value, so we're setting it to default

close quasarframework#1883

Author: pdanpdan

dev/components/form/all.vue

@@ -232,11 +232,11 @@
         <q-select :dark="dark" color="black" :error="error" :warning="warning" :disable="disable" :readonly="readonly" multiple chips inverted :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { options = val; onChange(val) }" @input="onInput" @clear="onClear" :value="options" :options="countries" float-label="Select multiple - chips (onChange)" filter />
 
         <p class="q-subtitle">Color selected: {{ JSON.stringify(color) }}</p>
-        <q-color :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="color" placeholder="Color (RGBA)" format-model="rgba" :after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
+        <q-color :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="color" placeholder="Color (RGBA)" format-model="rgba" :after="[ { icon: 'colorize', handler () { color = '#f00' } }]" />
         <q-color :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="color" float-label="Color (RGBA)" format-model="rgba" />
         <q-color :dark="dark" color="primary" :error="error" :warning="warning" :disable="disable" :readonly="readonly" inverted :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { color = val; onChange(val) }" @input="onInput" @clear="onClear" :value="color" float-label="Color (onChange)" />
         <q-color :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="color" :default-value="defaultColor" :float-label="`Color (default ${defaultColor})`" />
-        <q-color :dark="dark" color="primary" :error="error" :warning="warning" :disable="disable" :readonly="readonly" inverted :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { color = val; onChange(val) }" @input="onInput" @clear="onClear" :value="color" :default-value="defaultColor" :float-label="`Color (default ${defaultColor}, onChange)`" :after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
+        <q-color :dark="dark" color="primary" :error="error" :warning="warning" :disable="disable" :readonly="readonly" inverted :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { color = val; onChange(val) }" @input="onInput" @clear="onClear" :value="color" :default-value="defaultColor" :float-label="`Color (default ${defaultColor}, onChange)`" :after="[ { icon: 'colorize', handler () { color = '#f00' } }]" />
 
         <p class="q-subtitle">Color selected: {{ JSON.stringify(colorP) }}</p>
         <div class="row gutter-sm">
@@ -259,7 +259,7 @@
         </div>
 
         <p class="q-subtitle">Date selected: {{ JSON.stringify(date) }}</p>
-        <q-datetime :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" type="date" formatModel="date" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="date" placeholder="Date" :after="[ { icon: 'today', handler () { date = new Date() } }]" />
+        <q-datetime :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" type="date" formatModel="date" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="date" placeholder="Date" :after="[ { icon: 'today', handler () { date = new Date('2018-10-21') } }]" />
         <q-datetime :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" type="date" formatModel="date" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="date" float-label="Date" />
         <q-datetime :dark="dark" color="primary" :error="error" :warning="warning" :disable="disable" :readonly="readonly" type="date" formatModel="date" inverted :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { date = val; onChange(val) }" @input="onInput" @clear="onClear" :value="date" float-label="Date (onChange)" />
         <q-datetime :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" type="date" formatModel="date" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="date" :default-value="defaultDate" :float-label="`Date (default ${defaultDate})`" />

src/components/color/QColor.js

@@ -34,7 +34,7 @@ export default {
     },
     defaultValue: {
       type: [String, Object],
-      default: null
+      default: '#000'
     },
     formatModel: {
       type: String,
@@ -48,7 +48,7 @@ export default {
   },
   watch: {
     value (v) {
-      if (!this.disable && this.$refs.popup && this.$refs.popup.showing) {
+      if (!this.disable && this.isPopover) {
         this.model = clone(v)
       }
     }
@@ -76,7 +76,7 @@ export default {
       return ''
     },
     modalBtnColor () {
-      return this.$q.theme === 'mat'
+      return __THEME__ === 'mat'
         ? this.color
         : (this.dark ? 'light' : 'dark')
     }
@@ -87,18 +87,11 @@ export default {
     },
     show () {
       if (!this.disable) {
-        const val = this.value || this.defaultValue
-        if (this.focused) {
-          this.model = clone(val)
-        }
-        else {
-          this.__setModel(val)
-        }
+        this.__setModel(this.value || this.defaultValue)
         return this.$refs.popup.show()
       }
     },
     hide () {
-      this.focused = false
       return this.$refs.popup.hide()
     },
 
@@ -118,7 +111,7 @@ export default {
       if (this.disable || this.focused) {
         return
       }
-      this.__setModel(this.value || this.defaultValue)
+      this.model = clone(this.value || this.defaultValue)
       this.focused = true
       this.$emit('focus')
     },
@@ -136,15 +129,15 @@ export default {
       }, 1)
     },
     __onHide (forceUpdate) {
+      this.focused && this.$emit('blur')
       this.focused = false
-      this.$emit('blur')
-      if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
+      if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
     },
     __setModel (val, forceUpdate) {
       this.model = clone(val)
-      if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
+      if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
     },
@@ -233,6 +226,7 @@ export default {
         error: this.error,
         warning: this.warning,
         disable: this.disable,
+        readonly: this.readonly,
         inverted: this.inverted,
         invertedLight: this.invertedLight,
         dark: this.dark,

src/components/datetime/QDatetime.js

@@ -6,7 +6,7 @@ import { QInputFrame } from '../input-frame'
 import { QPopover } from '../popover'
 import QDatetimePicker from './QDatetimePicker'
 import { QBtn } from '../btn'
-import { clone, formatDate, isSameDate, isValid } from '../../utils/date'
+import { clone, formatDate, isSameDate, isValid, startOfDate } from '../../utils/date'
 import { QModal } from '../modal'
 import { getEventKey, stopAndPrevent } from '../../utils/event'
 
@@ -31,7 +31,7 @@ export default {
   ),
   watch: {
     value (v) {
-      if (!this.disable && this.$refs.popup && this.$refs.popup.showing) {
+      if (!this.disable && this.isPopover) {
         this.model = clone(v)
       }
     }
@@ -41,7 +41,7 @@ export default {
       transition: __THEME__ === 'ios' ? 'q-modal-bottom' : 'q-modal'
     }
     data.focused = false
-    data.model = clone(isValid(this.value) ? this.value : this.defaultValue)
+    data.model = clone(this.computedValue)
     return data
   },
   computed: {
@@ -70,8 +70,17 @@ export default {
 
       return formatDate(this.value, format, /* for reactiveness */ this.$q.i18n.date)
     },
+    computedValue () {
+      if (isValid(this.value)) {
+        return this.value
+      }
+      if (__THEME__ === 'ios') {
+        return this.defaultValue || startOfDate(new Date(), 'day')
+      }
+      return this.defaultValue
+    },
     modalBtnColor () {
-      return this.$q.theme === 'mat'
+      return __THEME__ === 'mat'
         ? this.color
         : (this.dark ? 'light' : 'dark')
     }
@@ -82,18 +91,11 @@ export default {
     },
     show () {
       if (!this.disable) {
-        const val = isValid(this.value) ? this.value : this.defaultValue
-        if (this.focused) {
-          this.model = clone(val)
-        }
-        else {
-          this.__setModel(val)
-        }
+        this.__setModel(this.computedValue)
         return this.$refs.popup.show()
       }
     },
     hide () {
-      this.focused = false
       return this.$refs.popup.hide()
     },
 
@@ -122,7 +124,7 @@ export default {
           target.setView()
         }
       }
-      this.__setModel(isValid(this.value) ? this.value : this.defaultValue)
+      this.model = clone(this.computedValue)
       this.focused = true
       this.$emit('focus')
     },
@@ -140,15 +142,15 @@ export default {
       }, 1)
     },
     __onHide (forceUpdate) {
+      this.focused && this.$emit('blur')
       this.focused = false
-      this.$emit('blur')
-      if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
+      if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
     },
     __setModel (val, forceUpdate) {
       this.model = clone(val)
-      if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
+      if (forceUpdate || this.isPopover) {
         this.__update(forceUpdate)
       }
     },
@@ -230,7 +232,8 @@ export default {
                     color: this.modalBtnColor,
                     flat: true,
                     label: this.okLabel || this.$q.i18n.label.set,
-                    noRipple: true
+                    noRipple: true,
+                    disable: !this.model
                   },
                   on: {
                     click: () => {

src/components/datetime/QDatetimePicker.mat.vue

@@ -142,7 +142,7 @@
               :key="`md${monthDay}`"
               class="row items-center content-center justify-center cursor-pointer"
               :class="[color && monthDay === day ? `text-${color}` : null, {
-                'q-datetime-day-active': monthDay === day,
+                'q-datetime-day-active': isValid && monthDay === day,
                 'q-datetime-day-today': monthDay === today,
                 'disabled': !editable
               }]"
@@ -238,7 +238,7 @@
 import { height, width, offset, cssTransform } from '../../utils/dom'
 import { position, stopAndPrevent } from '../../utils/event'
 import { QBtn } from '../btn'
-import { isSameDate, adjustDate } from '../../utils/date'
+import { isSameDate, isValid, adjustDate } from '../../utils/date'
 import DateMixin from './datetime-mixin'
 import ParentFieldMixin from '../../mixins/parent-field'
 import Ripple from '../../directives/ripple'
@@ -379,6 +379,9 @@ export default {
 
       return cssTransform(`rotate(${degrees}deg)`)
     },
+    isValid () {
+      return isValid(this.value)
+    },
     today () {
       const today = new Date()
       return isSameDate(today, this.model, 'month')