Further QColor work

Author: rstoenescu

dev/components/form/color-picker.vue

@@ -7,6 +7,10 @@
 
       <div>
         <q-color v-model="model" />
+
+        <q-color v-model="model" readonly />
+
+        <q-color v-model="model" disable />
       </div>
     </div>
   </div>

src/components/color/QColor.js

@@ -43,13 +43,16 @@ export default {
       return !this.disable && !this.readonly
     }
   },
-  data: () => ({ view: 'hex' }),
+  data: () => ({
+    view: 'hex'
+  }),
   created () {
     this.__saturationChange = throttle(this.__saturationChange, 20)
   },
   render (h) {
     return h('div', {
-      staticClass: 'q-color'
+      staticClass: 'q-color',
+      'class': { disabled: this.disable }
     }, [
       this.__getSaturation(h),
       this.__getSliders(h),
@@ -62,13 +65,16 @@ export default {
         ref: 'saturation',
         staticClass: 'q-color-saturation non-selectable relative-position overflow-hidden cursor-pointer',
         style: this.saturationStyle,
-        on: {
-          click: this.__saturationClick
-        },
-        directives: [{
-          name: 'touch-pan',
-          value: this.__saturationPan
-        }]
+        'class': { readonly: this.readonly },
+        on: this.editable
+          ? { click: this.__saturationClick }
+          : null,
+        directives: this.editable
+          ? [{
+            name: 'touch-pan',
+            value: this.__saturationPan
+          }]
+          : null
       }, [
         h('div', { staticClass: 'q-color-saturation-white absolute-full' }),
         h('div', { staticClass: 'q-color-saturation-black absolute-full' }),
@@ -96,7 +102,8 @@ export default {
                 color: 'none',
                 min: 0,
                 max: 360,
-                fillHandleAlways: true
+                fillHandleAlways: true,
+                readonly: !this.editable
               },
               style: {
                 color: this.value.hex
@@ -113,7 +120,8 @@ export default {
                 color: 'none',
                 min: 0,
                 max: 100,
-                fillHandleAlways: true
+                fillHandleAlways: true,
+                readonly: this.readonly
               },
               style: {
                 color: this.value.hex
@@ -136,10 +144,13 @@ export default {
             attrs: {
               type: 'number',
               min: 0,
-              max
+              max,
+              readonly: !this.editable
             },
             staticClass: 'full-width text-center',
-            domProps: { value: (type === 'a' ? 100 : 1) * this.value[type] },
+            domProps: {
+              value: (type === 'a' ? 100 : 1) * this.value[type]
+            },
             on: {
               input: evt => {
                 this.__onPropChange(evt, type, max)
@@ -158,9 +169,8 @@ export default {
           h('div', { staticClass: 'col' }, [
             h('input', {
               domProps: { value: this.value.hex },
-              on: {
-                input: this.__onHexChange
-              },
+              attrs: { readonly: this.readonly },
+              on: { input: this.__onHexChange },
               staticClass: 'full-width text-center uppercase'
             }),
             h('div', { staticClass: 'q-color-label text-center' }, [
@@ -246,10 +256,6 @@ export default {
     },
 
     __saturationPan (evt) {
-      if (!this.editable) {
-        return
-      }
-
       if (evt.isFinal) {
         this.__dragStop(evt)
       }
@@ -261,18 +267,14 @@ export default {
       }
     },
     __dragStart (event) {
-      if (!this.editable) {
-        return
-      }
-
       event.evt.stopPropagation()
       event.evt.preventDefault()
 
       this.saturationDragging = true
       this.__saturationChange(event)
     },
     __dragMove (event) {
-      if (!this.saturationDragging || !this.editable) {
+      if (!this.saturationDragging) {
         return
       }
       event.evt.stopPropagation()
@@ -281,10 +283,6 @@ export default {
       this.__saturationChange(event)
     },
     __dragStop (event) {
-      if (!this.editable) {
-        return
-      }
-
       event.evt.stopPropagation()
       event.evt.preventDefault()
       this.saturationDragging = false

src/components/slider/slider-utils.js

@@ -57,17 +57,22 @@ export let mixin = {
     color: String,
     fillHandleAlways: Boolean,
     error: Boolean,
+    readonly: Boolean,
     disable: Boolean
   },
+  data () {
+    return {
+      clickDisabled: false
+    }
+  },
   computed: {
-    data () {
-      return {
-        clickDisabled: false
-      }
+    editable () {
+      return !this.disable && !this.readonly
     },
     classes () {
       const cls = {
         disabled: this.disable,
+        readonly: this.readonly,
         'label-always': this.labelAlways,
         'has-error': this.error
       }
@@ -86,7 +91,7 @@ export let mixin = {
   },
   methods: {
     __pan (event) {
-      if (this.disable) {
+      if (!this.editable) {
         return
       }
       if (event.isFinal) {
@@ -104,7 +109,7 @@ export let mixin = {
       }
     },
     __click (event) {
-      if (this.disable || this.clickDisabled) {
+      if (!this.editable || this.clickDisabled) {
         return
       }
       this.__setActive(event)

src/components/slider/slider.mat.styl

@@ -90,7 +90,7 @@ $slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
   transition all .2s ease-in
   background currentColor
 
-.q-slider:not(.disabled)
+.q-slider:not(.disabled):not(.readonly)
   &:focus, &:hover
     .q-slider-ring
       opacity .4

src/css/core/visibility.styl

@@ -23,6 +23,8 @@
   &-3-lines
     -webkit-line-clamp 3
 
+.readonly
+  cursor default !important
 .disabled, [disabled]
   &, * // @stylint ignore
     cursor not-allowed !important

src/utils/colors.js

@@ -94,9 +94,9 @@ export function hsvToRgb (h, s, v) {
 
 export function rgbToHsv (r, g, b) {
   if (arguments.length === 1) {
+    r = r.r
     g = r.g
     b = r.b
-    r = r.r
   }
 
   let