@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

package/lib/components/VColorPicker/VColorPicker.js

@@ -1,4 +1,4 @@
-import { h } from 'vue'; // Styles
+import { h, defineComponent } from 'vue'; // Styles
 
 import "../../../src/components/VColorPicker/VColorPicker.sass"; // Components
 
@@ -9,13 +9,14 @@ import VColorPickerEdit, { modes } from './VColorPickerEdit';
 import VColorPickerSwatches from './VColorPickerSwatches'; // Helpers
 
 import { parseColor, fromRGBA, extractColor, hasAlpha } from './util';
-import mixins from '../../util/mixins';
-import { deepEqual } from '../../util/helpers'; // Mixins
+import { deepEqual } from '../../util/helpers';
+import { breaking } from '../../util/console'; // Mixins
 
 import Elevatable from '../../mixins/elevatable';
 import Themeable from '../../mixins/themeable';
-export default mixins(Elevatable, Themeable).extend({
+export default defineComponent({
   name: 'v-color-picker',
+  mixins: [Elevatable, Themeable],
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -42,7 +43,7 @@ export default mixins(Elevatable, Themeable).extend({
       type: [Number, String],
       default: 150
     },
-    value: {
+    modelValue: {
       type: [Object, String]
     },
     width: {
@@ -50,23 +51,38 @@ export default mixins(Elevatable, Themeable).extend({
       default: 300
     }
   },
-  data: () => ({
-    internalValue: fromRGBA({
-      r: 255,
-      g: 0,
-      b: 0,
-      a: 1
-    })
-  }),
+  emits: ['update:modelValue', 'update:color', 'update:mode'],
+
+  data() {
+    return {
+      internalValue: fromRGBA({
+        r: 255,
+        g: 0,
+        b: 0,
+        a: 1
+      })
+    };
+  },
+
   computed: {
     hideAlpha() {
-      if (!this.value) return false;
-      return !hasAlpha(this.value);
+      if (!this.modelValue) return false;
+      return !hasAlpha(this.modelValue);
     }
 
   },
+
+  created() {
+    const breakingProps = [['value', 'modelValue'], ['onInput', 'onUpdate:modelValue']];
+    /* istanbul ignore next */
+
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
+    });
+  },
+
   watch: {
-    value: {
+    modelValue: {
       handler(color) {
         this.updateColor(parseColor(color, this.internalValue));
       },
@@ -77,10 +93,10 @@ export default mixins(Elevatable, Themeable).extend({
   methods: {
     updateColor(color) {
       this.internalValue = color;
-      const value = extractColor(this.internalValue, this.value);
+      const value = extractColor(this.internalValue, this.modelValue);
 
-      if (!deepEqual(value, this.value)) {
-        this.$emit('input', value);
+      if (!deepEqual(value, this.modelValue)) {
+        this.$emit('update:modelValue', value);
         this.$emit('update:color', this.internalValue);
       }
     },
@@ -116,30 +132,20 @@ export default mixins(Elevatable, Themeable).extend({
 
     genPreview() {
       return h(VColorPickerPreview, {
-        props: {
-          color: this.internalValue,
-          disabled: this.disabled,
-          hideAlpha: this.hideAlpha
-        },
-        on: {
-          'update:color': this.updateColor
-        }
+        color: this.internalValue,
+        disabled: this.disabled,
+        hideAlpha: this.hideAlpha,
+        'onUpdate:color': this.updateColor
       });
     },
 
     genSwatches() {
       return h(VColorPickerSwatches, {
-        props: {
-          dark: this.dark,
-          light: this.light,
-          disabled: this.disabled,
-          swatches: this.swatches,
-          color: this.internalValue,
-          maxHeight: this.swatchesMaxHeight
-        },
-        on: {
-          'update:color': this.updateColor
-        }
+        disabled: this.disabled,
+        swatches: this.swatches,
+        color: this.internalValue,
+        maxHeight: this.swatchesMaxHeight,
+        'onUpdate:color': this.updateColor
       });
     }
 
@@ -147,15 +153,12 @@ export default mixins(Elevatable, Themeable).extend({
 
   render() {
     return h(VSheet, {
-      class: 'v-color-picker',
-      class: {
+      class: ['v-color-picker', {
         'v-color-picker--flat': this.flat,
         ...this.themeClasses,
         ...this.elevationClasses
-      },
-      props: {
-        maxWidth: this.width
-      }
+      }],
+      maxWidth: this.width
     }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
   }
 

package/lib/components/VColorPicker/VColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import {h} from 'vue'\n// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport VSheet from '../VSheet/VSheet'\nimport VColorPickerPreview from './VColorPickerPreview'\nimport VColorPickerCanvas from './VColorPickerCanvas'\nimport VColorPickerEdit, { Mode, modes } from './VColorPickerEdit'\nimport VColorPickerSwatches from './VColorPickerSwatches'\n\n// Helpers\nimport { VColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'\nimport mixins from '../../util/mixins'\nimport { deepEqual } from '../../util/helpers'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport { VNode, PropType } from 'vue'\n\nexport default mixins(Elevatable, Themeable).extend({\n  name: 'v-color-picker',\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    flat: Boolean,\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    value: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data: () => ({\n    internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n  }),\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.value) return false\n\n      return !hasAlpha(this.value)\n    },\n  },\n\n  watch: {\n    value: {\n      handler (color: any) {\n        this.updateColor(parseColor(color, this.internalValue))\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    updateColor (color: VColorPickerColor) {\n      this.internalValue = color\n      const value = extractColor(this.internalValue, this.value)\n\n      if (!deepEqual(value, this.value)) {\n        this.$emit('input', value)\n        this.$emit('update:color', this.internalValue)\n      }\n    },\n    genCanvas (): VNode {\n      return h(VColorPickerCanvas, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        dotSize: this.dotSize,\n        width: this.width,\n        height: this.canvasHeight,\n        'onUpdate:color': this.updateColor\n      })\n    },\n    genControls (): VNode {\n      return h('div', {\n        class: 'v-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n    genEdit (): VNode {\n      return h(VColorPickerEdit, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        hideAlpha: this.hideAlpha,\n        hideModeSwitch: this.hideModeSwitch,\n        mode: this.mode,\n        'onUpdate:color': this.updateColor,\n        'onUpdate:mode': (v: Mode) => this.$emit('update:mode', v),\n      })\n    },\n    genPreview (): VNode {\n      return h(VColorPickerPreview, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genSwatches (): VNode {\n      return h(VColorPickerSwatches, {\n        props: {\n          dark: this.dark,\n          light: this.light,\n          disabled: this.disabled,\n          swatches: this.swatches,\n          color: this.internalValue,\n          maxHeight: this.swatchesMaxHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n  },\n\n  render (): VNode {\n    return h(VSheet, {\n      class: 'v-color-picker',\n      class: {\n        'v-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n      props: {\n        maxWidth: this.width,\n      },\n    }, [\n      !this.hideCanvas && this.genCanvas(),\n      (!this.hideSliders || !this.hideInputs) && this.genControls(),\n      this.showSwatches && this.genSwatches(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPicker.js"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { h, defineComponent } from 'vue'\n\n// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport VSheet from '../VSheet/VSheet'\nimport VColorPickerPreview from './VColorPickerPreview'\nimport VColorPickerCanvas from './VColorPickerCanvas'\nimport VColorPickerEdit, { Mode, modes } from './VColorPickerEdit'\nimport VColorPickerSwatches from './VColorPickerSwatches'\n\n// Helpers\nimport { VColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'\nimport { deepEqual } from '../../util/helpers'\nimport { breaking } from '../../util/console'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport type { VNode, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'v-color-picker',\n\n  mixins: [Elevatable, Themeable],\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    flat: Boolean,\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    modelValue: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  emits: ['update:modelValue', 'update:color', 'update:mode'],\n\n  data () {\n    return {\n      internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    }\n  },\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.modelValue) return false\n      return !hasAlpha(this.modelValue)\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['value', 'modelValue'],\n      ['onInput', 'onUpdate:modelValue'],\n    ]\n\n    /* istanbul ignore next */\n    breakingProps.forEach(([original, replacement]) => {\n      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)\n    })\n  },\n\n  watch: {\n    modelValue: {\n      handler (color: any) {\n        this.updateColor(parseColor(color, this.internalValue))\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    updateColor (color: VColorPickerColor) {\n      this.internalValue = color\n      const value = extractColor(this.internalValue, this.modelValue)\n\n      if (!deepEqual(value, this.modelValue)) {\n        this.$emit('update:modelValue', value)\n        this.$emit('update:color', this.internalValue)\n      }\n    },\n\n    genCanvas (): VNode {\n      return h(VColorPickerCanvas, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        dotSize: this.dotSize,\n        width: this.width,\n        height: this.canvasHeight,\n        'onUpdate:color': this.updateColor\n      })\n    },\n\n    genControls (): VNode {\n      return h('div', {\n        class: 'v-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n\n    genEdit (): VNode {\n      return h(VColorPickerEdit, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        hideAlpha: this.hideAlpha,\n        hideModeSwitch: this.hideModeSwitch,\n        mode: this.mode,\n        'onUpdate:color': this.updateColor,\n        'onUpdate:mode': (v: string) => this.$emit('update:mode', v),\n      })\n    },\n\n    genPreview (): VNode {\n      return h(VColorPickerPreview, {\n        color: this.internalValue,\n        disabled: this.disabled,\n        hideAlpha: this.hideAlpha,\n        'onUpdate:color': this.updateColor,\n      })\n    },\n\n    genSwatches (): VNode {\n      return h(VColorPickerSwatches, {\n        disabled: this.disabled,\n        swatches: this.swatches,\n        color: this.internalValue,\n        maxHeight: this.swatchesMaxHeight,\n        'onUpdate:color': this.updateColor,\n      })\n    },\n  },\n\n  render (): VNode {\n    return h(VSheet, {\n      class: ['v-color-picker', {\n        'v-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      }],\n      maxWidth: this.width,\n    }, [\n      !this.hideCanvas && this.genCanvas(),\n      (!this.hideSliders || !this.hideInputs) && this.genControls(),\n      this.showSwatches && this.genSwatches(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPicker.js"}

package/lib/components/VColorPicker/VColorPickerCanvas.js

@@ -1,11 +1,9 @@
-import { h } from 'vue'; // Styles
+import { h, defineComponent } from 'vue'; // Styles
 
 import "../../../src/components/VColorPicker/VColorPickerCanvas.sass"; // Helpers
 
 import { clamp, convertToUnit } from '../../util/helpers';
-import { fromHSVA, fromRGBA } from './util'; // Types
-
-import { defineComponent } from 'vue';
+import { fromHSVA, fromRGBA } from './util';
 export default defineComponent({
   name: 'v-color-picker-canvas',
   props: {
@@ -32,6 +30,7 @@ export default defineComponent({
       default: 300
     }
   },
+  emits: ['update:color'],
 
   data() {
     return {
@@ -51,14 +50,17 @@ export default defineComponent({
         y: 0
       };
       return {
-        x: this.color.hsva.s * parseInt(this.width, 10),
-        y: (1 - this.color.hsva.v) * parseInt(this.height, 10)
+        x: this.color.hsva.s * parseInt(String(this.width), 10),
+        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10)
       };
     }
 
   },
   watch: {
-    'color.hue': 'updateCanvas'
+    'color.hue'() {
+      this.updateCanvas();
+    }
+
   },
 
   mounted() {
@@ -66,24 +68,10 @@ export default defineComponent({
   },
 
   methods: {
-    emitColor(x, y) {
-      const {
-        left,
-        top,
-        width,
-        height
-      } = this.boundingRect;
-      this.$emit('update:color', fromHSVA({
-        h: this.color.hue,
-        s: clamp(x - left, 0, width) / width,
-        v: 1 - clamp(y - top, 0, height) / height,
-        a: this.color.alpha
-      }));
-    },
-
     updateCanvas() {
       if (!this.color) return;
       const canvas = this.$refs.canvas;
+      if (!canvas) return;
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
       const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
@@ -101,19 +89,25 @@ export default defineComponent({
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     },
 
-    handleClick(e) {
-      if (this.disabled) return;
-      this.boundingRect = this.$el.getBoundingClientRect();
-      this.emitColor(e.clientX, e.clientY);
+    emitColor(x, y) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = this.boundingRect;
+      this.$emit('update:color', fromHSVA({
+        h: this.color.hue,
+        s: clamp(x - left, 0, width) / width,
+        v: 1 - clamp(y - top, 0, height) / height,
+        a: this.color.alpha
+      }));
     },
 
-    handleMouseDown(e) {
-      // To prevent selection while moving cursor
-      e.preventDefault();
+    handleClick(e) {
       if (this.disabled) return;
       this.boundingRect = this.$el.getBoundingClientRect();
-      window.addEventListener('mousemove', this.handleMouseMove);
-      window.addEventListener('mouseup', this.handleMouseUp);
+      this.emitColor(e.clientX, e.clientY);
     },
 
     handleMouseMove(e) {
@@ -126,25 +120,31 @@ export default defineComponent({
       window.removeEventListener('mouseup', this.handleMouseUp);
     },
 
+    handleMouseDown(e) {
+      // To prevent selection while moving cursor
+      e.preventDefault();
+      if (this.disabled) return;
+      this.boundingRect = this.$el.getBoundingClientRect();
+      window.addEventListener('mousemove', this.handleMouseMove);
+      window.addEventListener('mouseup', this.handleMouseUp);
+    },
+
     genCanvas() {
       return h('canvas', {
         ref: 'canvas',
-        attrs: {
-          width: this.width,
-          height: this.height
-        }
+        width: this.width,
+        height: this.height
       });
     },
 
     genDot() {
-      const radius = parseInt(this.dotSize, 10) / 2;
+      const radius = parseInt(String(this.dotSize), 10) / 2;
       const x = convertToUnit(this.dot.x - radius);
       const y = convertToUnit(this.dot.y - radius);
       return h('div', {
-        class: 'v-color-picker__canvas-dot',
-        class: {
+        class: ['v-color-picker__canvas-dot', {
           'v-color-picker__canvas-dot--disabled': this.disabled
-        },
+        }],
         style: {
           width: convertToUnit(this.dotSize),
           height: convertToUnit(this.dotSize),
@@ -162,10 +162,8 @@ export default defineComponent({
         width: convertToUnit(this.width),
         height: convertToUnit(this.height)
       },
-      on: {
-        click: this.handleClick,
-        mousedown: this.handleMouseDown
-      }
+      onClick: this.handleClick,
+      onMousedown: this.handleMouseDown
     }, [this.genCanvas(), this.genDot()]);
   }
 

package/lib/components/VColorPicker/VColorPickerCanvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["import {h} from 'vue'\n// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport { defineComponent, VNode, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'v-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<VColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot (): { x: number, y: number} {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(this.width, 10),\n        y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue': 'updateCanvas',\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color.alpha,\n      }))\n    },\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    },\n    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n    genCanvas (): VNode {\n      return h('canvas', {\n        ref: 'canvas',\n        attrs: {\n          width: this.width,\n          height: this.height,\n        },\n      })\n    },\n    genDot (): VNode {\n      const radius = parseInt(this.dotSize, 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return h('div', {\n        class: 'v-color-picker__canvas-dot',\n        class: {\n          'v-color-picker__canvas-dot--disabled': this.disabled,\n        },\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: 'v-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      on: {\n        click: this.handleClick,\n        mousedown: this.handleMouseDown,\n      },\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerCanvas.js"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { h, defineComponent } from 'vue'\n\n// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport type { VNode, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'v-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<VColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  emits: ['update:color'],\n\n  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot () {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(String(this.width), 10),\n        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue' () {\n      this.updateCanvas()\n    },\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      if (!canvas) return\n\n      const ctx = canvas.getContext('2d')\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    },\n\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color!.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color!.alpha,\n      }))\n    },\n\n    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n      this.emitColor(e.clientX, e.clientY)\n    },\n\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n\n    genCanvas (): VNode {\n      return h('canvas', {\n        ref: 'canvas',\n        width: this.width,\n        height: this.height,\n      })\n    },\n\n    genDot (): VNode {\n      const radius = parseInt(String(this.dotSize), 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return h('div', {\n        class: ['v-color-picker__canvas-dot', {\n          'v-color-picker__canvas-dot--disabled': this.disabled,\n        }],\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: 'v-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      onClick: this.handleClick,\n      onMousedown: this.handleMouseDown,\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerCanvas.js"}

package/lib/components/VColorPicker/VColorPickerEdit.js

@@ -1,13 +1,11 @@
-import { h } from 'vue'; // Styles
+import { h, defineComponent } from 'vue'; // Styles
 
 import "../../../src/components/VColorPicker/VColorPickerEdit.sass"; // Components
 
 import VBtn from '../VBtn';
 import VIcon from '../VIcon'; // Helpers
 
-import { parseHex } from '../../util/colorUtils'; // Types
-
-import { defineComponent } from 'vue';
+import { parseHex } from '../../util/colorUtils';
 import { fromRGBA, fromHexa, fromHSLA } from './util';
 export const modes = {
   rgba: {
@@ -25,7 +23,10 @@ export const modes = {
 export default defineComponent({
   name: 'v-color-picker-edit',
   props: {
-    color: Object,
+    color: {
+      type: Object,
+      required: true
+    },
     disabled: Boolean,
     hideAlpha: Boolean,
     hideModeSwitch: Boolean,
@@ -35,17 +36,17 @@ export default defineComponent({
       validator: v => Object.keys(modes).includes(v)
     }
   },
+  emits: ['update:color', 'update:mode'],
 
   data() {
     return {
-      modes,
       internalMode: this.mode
     };
   },
 
   computed: {
     currentMode() {
-      return this.modes[this.internalMode];
+      return modes[this.internalMode];
     }
 
   },
@@ -55,11 +56,6 @@ export default defineComponent({
     }
 
   },
-
-  created() {
-    this.internalMode = this.mode;
-  },
-
   methods: {
     getValue(v, type) {
       if (type === 'float') return Math.round(v * 100) / 100;else if (type === 'int') return Math.round(v);else return 0;
@@ -70,21 +66,21 @@ export default defineComponent({
     },
 
     changeMode() {
-      const modes = Object.keys(this.modes);
-      const index = modes.indexOf(this.internalMode);
-      const newMode = modes[(index + 1) % modes.length];
+      const modeKeys = Object.keys(modes);
+      const index = modeKeys.indexOf(this.internalMode);
+      const newMode = modeKeys[(index + 1) % modeKeys.length];
       this.internalMode = newMode;
       this.$emit('update:mode', newMode);
     },
 
-    genInput(target, attrs, value, on) {
+    genInput(target, attrs, value, onChange) {
       return h('div', {
         class: 'v-color-picker__input'
       }, [h('input', {
         key: target,
         ...attrs,
         value,
-        ...on
+        onChange
       }), h('span', target.toUpperCase())]);
     },
 
@@ -95,11 +91,9 @@ export default defineComponent({
         return this.genInput('hex', {
           maxlength: this.hideAlpha ? 7 : 9,
           disabled: this.disabled
-        }, value, {
-          change: e => {
-            const el = e.target;
-            this.$emit('update:color', this.currentMode.from(parseHex(el.value)));
-          }
+        }, value, e => {
+          const el = e.target;
+          this.$emit('update:color', this.currentMode.from(parseHex(el.value)));
         });
       } else {
         const inputs = this.hideAlpha ? this.currentMode.inputs.slice(0, -1) : this.currentMode.inputs;
@@ -111,14 +105,12 @@ export default defineComponent({
             max,
             step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
             disabled: this.disabled
-          }, this.getValue(value[target], type), {
-            input: e => {
-              const el = e.target;
-              const newVal = this.parseValue(el.value || '0', type);
-              this.$emit('update:color', this.currentMode.from(Object.assign({}, value, {
-                [target]: newVal
-              }), this.color.alpha));
-            }
+          }, this.getValue(value[target], type), e => {
+            const el = e.target;
+            const newVal = this.parseValue(el.value || '0', type);
+            this.$emit('update:color', this.currentMode.from(Object.assign({}, value, {
+              [target]: newVal
+            }), this.color.alpha));
           });
         });
       }
@@ -130,7 +122,9 @@ export default defineComponent({
         icon: true,
         disabled: this.disabled,
         onClick: this.changeMode
-      }, [h(VIcon, '$unfold')]);
+      }, {
+        default: () => [h(VIcon, {}, '$unfold')]
+      });
     }
 
   },

package/lib/components/VColorPicker/VColorPickerEdit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerEdit.ts"],"names":[],"mappings":"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","sourcesContent":["import {h} from 'vue'\n// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport VBtn from '../VBtn'\nimport VIcon from '../VIcon'\n\n// Helpers\nimport { parseHex } from '../../util/colorUtils'\n\n// Types\nimport { defineComponent, VNode, PropType } from 'vue'\nimport { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'\n\ntype Input = [string, number, string]\n\nexport type Mode = {\n  inputs?: Input[]\n  from: Function\n}\n\nexport const modes = {\n  rgba: {\n    inputs: [\n      ['r', 255, 'int'],\n      ['g', 255, 'int'],\n      ['b', 255, 'int'],\n      ['a', 1, 'float'],\n    ],\n    from: fromRGBA,\n  },\n  hsla: {\n    inputs: [\n      ['h', 360, 'int'],\n      ['s', 1, 'float'],\n      ['l', 1, 'float'],\n      ['a', 1, 'float'],\n    ],\n    from: fromHSLA,\n  },\n  hexa: {\n    from: fromHexa,\n  },\n} as { [key: string]: Mode }\n\nexport default defineComponent({\n  name: 'v-color-picker-edit',\n\n  props: {\n    color: Object as PropType<VColorPickerColor>,\n    disabled: Boolean,\n    hideAlpha: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n  },\n\n  data () {\n    return {\n      modes,\n      internalMode: this.mode,\n    }\n  },\n\n  computed: {\n    currentMode (): Mode {\n      return this.modes[this.internalMode]\n    },\n  },\n\n  watch: {\n    mode (mode) {\n      this.internalMode = mode\n    },\n  },\n\n  created () {\n    this.internalMode = this.mode\n  },\n\n  methods: {\n    getValue (v: any, type: string) {\n      if (type === 'float') return Math.round(v * 100) / 100\n      else if (type === 'int') return Math.round(v)\n      else return 0\n    },\n    parseValue (v: string, type: string) {\n      if (type === 'float') return parseFloat(v)\n      else if (type === 'int') return parseInt(v, 10) || 0\n      else return 0\n    },\n    changeMode () {\n      const modes = Object.keys(this.modes)\n      const index = modes.indexOf(this.internalMode)\n      const newMode = modes[(index + 1) % modes.length]\n      this.internalMode = newMode\n      this.$emit('update:mode', newMode)\n    },\n    genInput (target: string, attrs: any, value: any, on: any): VNode {\n      return h('div', {\n        class: 'v-color-picker__input',\n      }, [\n        h('input', {\n          key: target,\n          ...attrs,\n          value,\n          ...on,\n        }),\n        h('span', target.toUpperCase()),\n      ])\n    },\n    genInputs (): VNode[] | VNode {\n      if (this.internalMode === 'hexa') {\n        const hex = this.color.hexa\n        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex\n        return this.genInput(\n          'hex',\n          {\n            maxlength: this.hideAlpha ? 7 : 9,\n            disabled: this.disabled,\n          },\n          value,\n          {\n            change: (e: Event) => {\n              const el = e.target as HTMLInputElement\n              this.$emit('update:color', this.currentMode.from(parseHex(el.value)))\n            },\n          }\n        )\n      } else {\n        const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs!\n        return inputs.map(([target, max, type]) => {\n          const value = this.color[this.internalMode as keyof VColorPickerColor] as any\n          return this.genInput(\n            target,\n            {\n              type: 'number',\n              min: 0,\n              max,\n              step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,\n              disabled: this.disabled,\n            },\n            this.getValue(value[target], type),\n            {\n              input: (e: Event) => {\n                const el = e.target as HTMLInputElement\n                const newVal = this.parseValue(el.value || '0', type)\n\n                this.$emit('update:color', this.currentMode.from(\n                  Object.assign({}, value, { [target]: newVal }),\n                  this.color.alpha\n                ))\n              },\n            }\n          )\n        })\n      }\n    },\n    genSwitch (): VNode {\n      return h(VBtn, {\n        small: true,\n        icon: true,\n        disabled: this.disabled,\n        onClick: this.changeMode,\n      }, [\n        h(VIcon, '$unfold'),\n      ])\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: 'v-color-picker__edit',\n    }, [\n      this.genInputs(),\n      !this.hideModeSwitch && this.genSwitch(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerEdit.js"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerEdit.ts"],"names":[],"mappings":"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","sourcesContent":["import { h, defineComponent } from 'vue'\n\n// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport VBtn from '../VBtn'\nimport VIcon from '../VIcon'\n\n// Helpers\nimport { parseHex } from '../../util/colorUtils'\n\n// Types\nimport type { VNode, PropType } from 'vue'\nimport { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'\n\ntype Input = [string, number, string]\n\nexport type Mode = {\n  inputs?: Input[]\n  from: Function\n}\n\nexport const modes = {\n  rgba: {\n    inputs: [\n      ['r', 255, 'int'],\n      ['g', 255, 'int'],\n      ['b', 255, 'int'],\n      ['a', 1, 'float'],\n    ],\n    from: fromRGBA,\n  },\n  hsla: {\n    inputs: [\n      ['h', 360, 'int'],\n      ['s', 1, 'float'],\n      ['l', 1, 'float'],\n      ['a', 1, 'float'],\n    ],\n    from: fromHSLA,\n  },\n  hexa: {\n    from: fromHexa,\n  },\n} as { [key: string]: Mode }\n\nexport default defineComponent({\n  name: 'v-color-picker-edit',\n\n  props: {\n    color: {\n      type: Object as PropType<VColorPickerColor>,\n      required: true,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n  },\n\n  emits: ['update:color', 'update:mode'],\n\n  data () {\n    return {\n      internalMode: this.mode,\n    }\n  },\n\n  computed: {\n    currentMode (): Mode {\n      return modes[this.internalMode]\n    },\n  },\n\n  watch: {\n    mode (mode: string) {\n      this.internalMode = mode\n    },\n  },\n\n  methods: {\n    getValue (v: any, type: string) {\n      if (type === 'float') return Math.round(v * 100) / 100\n      else if (type === 'int') return Math.round(v)\n      else return 0\n    },\n\n    parseValue (v: string, type: string) {\n      if (type === 'float') return parseFloat(v)\n      else if (type === 'int') return parseInt(v, 10) || 0\n      else return 0\n    },\n\n    changeMode () {\n      const modeKeys = Object.keys(modes)\n      const index = modeKeys.indexOf(this.internalMode)\n      const newMode = modeKeys[(index + 1) % modeKeys.length]\n      this.internalMode = newMode\n      this.$emit('update:mode', newMode)\n    },\n\n    genInput (target: string, attrs: any, value: any, onChange: any): VNode {\n      return h('div', {\n        class: 'v-color-picker__input',\n      }, [\n        h('input', {\n          key: target,\n          ...attrs,\n          value,\n          onChange,\n        }),\n        h('span', target.toUpperCase()),\n      ])\n    },\n\n    genInputs (): VNode[] | VNode {\n      if (this.internalMode === 'hexa') {\n        const hex = this.color!.hexa\n        const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex\n        return this.genInput(\n          'hex',\n          {\n            maxlength: this.hideAlpha ? 7 : 9,\n            disabled: this.disabled,\n          },\n          value,\n          (e: Event) => {\n            const el = e.target as HTMLInputElement\n            this.$emit('update:color', this.currentMode.from(parseHex(el.value)))\n          }\n        )\n      } else {\n        const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs!\n        return inputs.map(([target, max, type]) => {\n          const value = this.color![this.internalMode as keyof VColorPickerColor] as any\n          return this.genInput(\n            target,\n            {\n              type: 'number',\n              min: 0,\n              max,\n              step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,\n              disabled: this.disabled,\n            },\n            this.getValue(value[target], type),\n            (e: Event) => {\n              const el = e.target as HTMLInputElement\n              const newVal = this.parseValue(el.value || '0', type)\n\n              this.$emit('update:color', this.currentMode.from(\n                Object.assign({}, value, { [target]: newVal }),\n                this.color!.alpha\n              ))\n            }\n          )\n        })\n      }\n    },\n\n    genSwitch (): VNode {\n      return h(VBtn, {\n        small: true,\n        icon: true,\n        disabled: this.disabled,\n        onClick: this.changeMode,\n      }, {\n        default: () => [h(VIcon, {}, '$unfold')]\n      })\n    },\n  },\n\n  render (): VNode {\n    return h('div', {\n      class: 'v-color-picker__edit',\n    }, [\n      this.genInputs(),\n      !this.hideModeSwitch && this.genSwitch(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"VColorPickerEdit.js"}