QColor updates

Author: rstoenescu

dev/components/form/color-picker.vue

@@ -30,11 +30,31 @@
         </div>
       </div>
 
+      <h4>Lazy</h4>
+      <div class="row md-gutter" style="width: 550px">
+        <div class="col-6">
+          <q-color-picker :value="modelHex" @change="model => { modelHex = model }" />
+          <div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: this.modelHex }">
+            <pre>Hex: {{modelHex}}</pre>
+          </div>
+        </div>
+        <div class="col-6">
+          <q-color-picker :value="modelHexa" @change="model => { modelHexa = model }" />
+          <div class="inline-block text-white" style="text-shadow: black 0px 0px 7px; padding: 10px" :style="{ backgroundColor: this.modelHexa }">
+            <pre>Hexa: {{modelHexa}}</pre>
+          </div>
+        </div>
+      </div>
+
       <h4>Input</h4>
-      <q-color v-model="inputModelHex" />
+      <q-color v-model="inputModelHex" clearable default-selection="#ffffff" />
       <q-color v-model="inputModelHex" inverted />
-      <q-color v-model="inputModelRgb" />
-      <q-color v-model="inputModelRgb" inverted />
+      <q-color v-model="inputModelRgb" readonly float-label="Readonly" />
+      <q-color v-model="inputModelRgb" inverted disable float-label="Disable" />
+
+      <h4>Lazy Input</h4>
+      <q-color :value="inputModelHex" @change="val => inputModelHex = val" clearable />
+      <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" clearable />
 
       <h4>Readonly</h4>
       <div class="row md-gutter" style="width: 550px">

dev/components/form/datetime-range.vue

@@ -6,6 +6,7 @@ import QColorPicker from './QColorPicker'
 import { QBtn } from '../btn'
 import { QModal } from '../modal'
 import clone from '../../utils/clone'
+import { stopAndPrevent } from '../../utils/event'
 
 let contentCss = __THEME__ === 'ios'
   ? {
@@ -36,10 +37,11 @@ export default {
     },
     displayValue: String,
     placeholder: String,
-    noClear: Boolean,
-    clearLabel: String,
+    clearable: Boolean,
     okLabel: String,
-    cancelLabel: String
+    cancelLabel: String,
+    disable: Boolean,
+    readonly: Boolean
   },
   data () {
     let data = this.isPopover() ? {} : {
@@ -58,6 +60,9 @@ export default {
     usingPopover () {
       return this.isPopover()
     },
+    editable () {
+      return !this.disable && !this.readonly
+    },
     actualValue () {
       if (this.displayValue) {
         return this.displayValue
@@ -90,15 +95,14 @@ export default {
       this.focused = false
       return this.$refs.popup.hide()
     },
-    clear () {
-      if (this.value) {
-        this.$emit('input', null)
-        this.$emit('change', null)
-      }
-      this.$refs.popup.hide()
+    clear (evt) {
+      stopAndPrevent(evt)
+      this.$emit('input', null)
+      this.$emit('change', null)
     },
 
     __onFocus () {
+      this.__setModel(this.value)
       this.focused = true
       this.$emit('focus')
     },
@@ -114,15 +118,20 @@ export default {
     __onHide () {
       this.focused = false
       this.$emit('blur')
+      if (this.usingPopover) {
+        this.__update(true)
+      }
     },
-    __setModel () {
-      this.model = this.value
-        ? clone(this.value)
+    __setModel (val = this.value) {
+      this.model = val
+        ? clone(val)
         : this.defaultSelection
     },
-    __update () {
+    __update (change) {
       this.$emit('input', this.model)
-      this.$emit('change', this.model)
+      if (change) {
+        this.$emit('change', this.model)
+      }
     },
 
     __getPicker (h, modal) {
@@ -131,14 +140,19 @@ export default {
           staticClass: `no-border${modal ? ' full-width' : ''}`,
           props: extend({
             color: this.color,
-            value: this.model
+            value: this.model,
+            disable: this.disable,
+            readonly: this.readonly
           }, this.$attrs),
           on: {
             input: v => {
               this.model = v
               if (this.usingPopover) {
                 this.__update()
               }
+            },
+            change: v => {
+              this.model = v
             }
           }
         })
@@ -148,18 +162,6 @@ export default {
         child[__THEME__ === 'mat' ? 'push' : 'unshift'](h('div', {
           staticClass: 'modal-buttons modal-buttons-top row full-width'
         }, [
-          !this.noClear && this.model
-            ? h(QBtn, {
-              props: {
-                color: this.color,
-                flat: true,
-                label: this.clearLabel || this.$q.i18n.label.clear,
-                waitForRipple: true,
-                compact: true
-              },
-              on: { click: this.clear }
-            })
-            : null,
           h('div', { staticClass: 'col' }),
           h(QBtn, {
             props: {
@@ -171,21 +173,23 @@ export default {
             },
             on: { click: this.hide }
           }),
-          h(QBtn, {
-            props: {
-              color: this.color,
-              flat: true,
-              label: this.okLabel || this.$q.i18n.label.set,
-              waitForRipple: true,
-              compact: true
-            },
-            on: {
-              click: () => {
-                this.hide()
-                this.__update()
+          this.editable
+            ? h(QBtn, {
+              props: {
+                color: this.color,
+                flat: true,
+                label: this.okLabel || this.$q.i18n.label.set,
+                waitForRipple: true,
+                compact: true
+              },
+              on: {
+                click: () => {
+                  this.hide()
+                  this.__update(true)
+                }
               }
-            }
-          })
+            })
+            : null
         ]))
       }
 
@@ -256,6 +260,15 @@ export default {
           }
         }, this.__getPicker(h, true)),
 
+      this.editable && this.clearable && this.actualValue.length
+        ? h('q-icon', {
+          slot: 'after',
+          props: { name: this.$q.icon.input.clear },
+          on: { click: this.clear },
+          staticClass: 'q-if-control'
+        })
+        : null,
+
       h('q-icon', {
         slot: 'after',
         props: { name: this.$q.icon.input.dropdown },