@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha25

package/src/components/VColorPicker/VColorPicker.ts

@@ -1,4 +1,5 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VColorPicker.sass'
 
@@ -11,7 +12,6 @@ import VColorPickerSwatches from './VColorPickerSwatches'
 
 // Helpers
 import { VColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'
-import mixins from '../../util/mixins'
 import { deepEqual } from '../../util/helpers'
 
 // Mixins
@@ -19,11 +19,13 @@ import Elevatable from '../../mixins/elevatable'
 import Themeable from '../../mixins/themeable'
 
 // Types
-import { VNode, PropType } from 'vue'
+import type { VNode, PropType } from 'vue'
 
-export default mixins(Elevatable, Themeable).extend({
+export default defineComponent({
   name: 'v-color-picker',
 
+  mixins: [Elevatable, Themeable],
+
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -59,20 +61,23 @@ export default mixins(Elevatable, Themeable).extend({
     },
   },
 
-  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 (): boolean {
       if (!this.modelValue) return false
-
       return !hasAlpha(this.modelValue)
     },
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (color: any) {
         this.updateColor(parseColor(color, this.internalValue))
       },
@@ -90,6 +95,7 @@ export default mixins(Elevatable, Themeable).extend({
         this.$emit('update:color', this.internalValue)
       }
     },
+
     genCanvas (): VNode {
       return h(VColorPickerCanvas, {
         color: this.internalValue,
@@ -100,6 +106,7 @@ export default mixins(Elevatable, Themeable).extend({
         'onUpdate:color': this.updateColor
       })
     },
+
     genControls (): VNode {
       return h('div', {
         class: 'v-color-picker__controls',
@@ -108,6 +115,7 @@ export default mixins(Elevatable, Themeable).extend({
         !this.hideInputs && this.genEdit(),
       ])
     },
+
     genEdit (): VNode {
       return h(VColorPickerEdit, {
         color: this.internalValue,
@@ -116,49 +124,38 @@ export default mixins(Elevatable, Themeable).extend({
         hideModeSwitch: this.hideModeSwitch,
         mode: this.mode,
         'onUpdate:color': this.updateColor,
-        'onUpdate:mode': (v: Mode) => this.$emit('update:mode', v),
+        'onUpdate:mode': (v: string) => this.$emit('update:mode', v),
       })
     },
+
     genPreview (): VNode {
       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 (): VNode {
       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,
       })
     },
   },
 
   render (): VNode {
     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(),

package/src/components/VColorPicker/VColorPickerCanvas.ts

@@ -1,4 +1,5 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VColorPickerCanvas.sass'
 
@@ -7,7 +8,7 @@ import { clamp, convertToUnit } from '../../util/helpers'
 import { fromHSVA, VColorPickerColor, fromRGBA } from './util'
 
 // Types
-import { defineComponent, VNode, PropType } from 'vue'
+import type { VNode, PropType } from 'vue'
 
 export default defineComponent({
   name: 'v-color-picker-canvas',
@@ -32,6 +33,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:color'],
+
   data () {
     return {
       boundingRect: {
@@ -44,18 +47,20 @@ export default defineComponent({
   },
 
   computed: {
-    dot (): { x: number, y: number} {
+    dot () {
       if (!this.color) return { x: 0, 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 () {
@@ -63,22 +68,13 @@ export default defineComponent({
   },
 
   methods: {
-    emitColor (x: number, y: number) {
-      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 as HTMLCanvasElement
-      const ctx = canvas.getContext('2d')
+      if (!canvas) return
 
+      const ctx = canvas.getContext('2d')
       if (!ctx) return
 
       const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
@@ -93,12 +89,35 @@ export default defineComponent({
       ctx.fillStyle = valueGradient
       ctx.fillRect(0, 0, canvas.width, canvas.height)
     },
+
+    emitColor (x: number, y: number) {
+      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,
+      }))
+    },
+
     handleClick (e: MouseEvent) {
       if (this.disabled) return
 
       this.boundingRect = this.$el.getBoundingClientRect()
       this.emitColor(e.clientX, e.clientY)
     },
+
+    handleMouseMove (e: MouseEvent) {
+      if (this.disabled) return
+      this.emitColor(e.clientX, e.clientY)
+    },
+
+    handleMouseUp () {
+      window.removeEventListener('mousemove', this.handleMouseMove)
+      window.removeEventListener('mouseup', this.handleMouseUp)
+    },
+
     handleMouseDown (e: MouseEvent) {
       // To prevent selection while moving cursor
       e.preventDefault()
@@ -110,34 +129,24 @@ export default defineComponent({
       window.addEventListener('mousemove', this.handleMouseMove)
       window.addEventListener('mouseup', this.handleMouseUp)
     },
-    handleMouseMove (e: MouseEvent) {
-      if (this.disabled) return
 
-      this.emitColor(e.clientX, e.clientY)
-    },
-    handleMouseUp () {
-      window.removeEventListener('mousemove', this.handleMouseMove)
-      window.removeEventListener('mouseup', this.handleMouseUp)
-    },
     genCanvas (): VNode {
       return h('canvas', {
         ref: 'canvas',
-        attrs: {
-          width: this.width,
-          height: this.height,
-        },
+        width: this.width,
+        height: this.height,
       })
     },
+
     genDot (): VNode {
-      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),
@@ -154,10 +163,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/src/components/VColorPicker/VColorPickerEdit.ts

@@ -1,4 +1,5 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VColorPickerEdit.sass'
 
@@ -10,7 +11,7 @@ import VIcon from '../VIcon'
 import { parseHex } from '../../util/colorUtils'
 
 // Types
-import { defineComponent, VNode, PropType } from 'vue'
+import type { VNode, PropType } from 'vue'
 import { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'
 
 type Input = [string, number, string]
@@ -48,7 +49,10 @@ export default defineComponent({
   name: 'v-color-picker-edit',
 
   props: {
-    color: Object as PropType<VColorPickerColor>,
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
     disabled: Boolean,
     hideAlpha: Boolean,
     hideModeSwitch: Boolean,
@@ -59,48 +63,48 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:color', 'update:mode'],
+
   data () {
     return {
-      modes,
       internalMode: this.mode,
     }
   },
 
   computed: {
     currentMode (): Mode {
-      return this.modes[this.internalMode]
+      return modes[this.internalMode]
     },
   },
 
   watch: {
-    mode (mode) {
+    mode (mode: string) {
       this.internalMode = mode
     },
   },
 
-  created () {
-    this.internalMode = this.mode
-  },
-
   methods: {
     getValue (v: any, type: string) {
       if (type === 'float') return Math.round(v * 100) / 100
       else if (type === 'int') return Math.round(v)
       else return 0
     },
+
     parseValue (v: string, type: string) {
       if (type === 'float') return parseFloat(v)
       else if (type === 'int') return parseInt(v, 10) || 0
       else return 0
     },
+
     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: string, attrs: any, value: any, on: any): VNode {
+
+    genInput (target: string, attrs: any, value: any, onChange: any): VNode {
       return h('div', {
         class: 'v-color-picker__input',
       }, [
@@ -108,14 +112,15 @@ export default defineComponent({
           key: target,
           ...attrs,
           value,
-          ...on,
+          onChange,
         }),
         h('span', target.toUpperCase()),
       ])
     },
+
     genInputs (): VNode[] | VNode {
       if (this.internalMode === 'hexa') {
-        const hex = this.color.hexa
+        const hex = this.color!.hexa
         const value = this.hideAlpha && hex.endsWith('FF') ? hex.substr(0, 7) : hex
         return this.genInput(
           'hex',
@@ -124,17 +129,15 @@ export default defineComponent({
             disabled: this.disabled,
           },
           value,
-          {
-            change: (e: Event) => {
-              const el = e.target as HTMLInputElement
-              this.$emit('update:color', this.currentMode.from(parseHex(el.value)))
-            },
+          (e: Event) => {
+            const el = e.target as HTMLInputElement
+            this.$emit('update:color', this.currentMode.from(parseHex(el.value)))
           }
         )
       } else {
         const inputs = this.hideAlpha ? this.currentMode.inputs!.slice(0, -1) : this.currentMode.inputs!
         return inputs.map(([target, max, type]) => {
-          const value = this.color[this.internalMode as keyof VColorPickerColor] as any
+          const value = this.color![this.internalMode as keyof VColorPickerColor] as any
           return this.genInput(
             target,
             {
@@ -145,30 +148,29 @@ export default defineComponent({
               disabled: this.disabled,
             },
             this.getValue(value[target], type),
-            {
-              input: (e: Event) => {
-                const el = e.target as HTMLInputElement
-                const newVal = this.parseValue(el.value || '0', type)
-
-                this.$emit('update:color', this.currentMode.from(
-                  Object.assign({}, value, { [target]: newVal }),
-                  this.color.alpha
-                ))
-              },
+            (e: Event) => {
+              const el = e.target as HTMLInputElement
+              const newVal = this.parseValue(el.value || '0', type)
+
+              this.$emit('update:color', this.currentMode.from(
+                Object.assign({}, value, { [target]: newVal }),
+                this.color!.alpha
+              ))
             }
           )
         })
       }
     },
+
     genSwitch (): VNode {
       return h(VBtn, {
         small: true,
         icon: true,
         disabled: this.disabled,
         onClick: this.changeMode,
-      }, [
-        h(VIcon, '$unfold'),
-      ])
+      }, {
+        default: () => [h(VIcon, {}, '$unfold')]
+      })
     },
   },
 

package/src/components/VColorPicker/VColorPickerPreview.ts

@@ -1,4 +1,5 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VColorPickerPreview.sass'
 
@@ -9,36 +10,74 @@ import VSlider from '../VSlider/VSlider'
 import { RGBtoCSS, RGBAtoCSS } from '../../util/colorUtils'
 
 // Types
-import { defineComponent, VNode, VNodeData, PropType } from 'vue'
-import { VColorPickerColor, fromHSVA } from './util'
+import type { VNode, PropType } from 'vue'
+import type { VColorPickerColor } from './util'
+import { fromHSVA } from './util'
 
 export default defineComponent({
   name: 'v-color-picker-preview',
 
   props: {
-    color: Object as PropType<VColorPickerColor>,
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
     disabled: Boolean,
     hideAlpha: Boolean,
   },
 
+  emits: ['update:color'],
+
   methods: {
     genAlpha (): VNode {
+      if (!this.color) return h('div')
       return this.genTrack({
         class: 'v-color-picker__alpha',
         thumbColor: 'grey lighten-2',
         hideDetails: true,
-        value: this.color.alpha,
+        modelValue: this.color.alpha,
         step: 0,
         min: 0,
         max: 1,
         style: {
           backgroundImage: this.disabled
             ? undefined
-            : `linear-gradient(to ${this.$vuetify.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,
+            : `linear-gradient(to ${this.$vuetify?.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,
+        },
+        'onUpdate:modelValue': (val: number) => {
+          if (this.color && this.color.alpha !== val) {
+            this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val }))
+          }
         },
-        onInput: (val: number) => this.color.alpha !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val })),
       })
     },
+
+    genHue (): VNode {
+      if (!this.color) return h('div')
+      return this.genTrack({
+        class: 'v-color-picker__hue',
+        thumbColor: 'grey lighten-2',
+        hideDetails: true,
+        modelValue: this.color.hue,
+        step: 0,
+        min: 0,
+        max: 360,
+        'onUpdate:modelValue': (val: number) => {
+          if (this.color && this.color.hue !== val) {
+            this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val }))
+          }
+        },
+      })
+    },
+
+    genTrack (options: Record<string, any>): VNode {
+      return h(VSlider, {
+        class: 'v-color-picker__track',
+        disabled: this.disabled,
+        ...options,
+      })
+    },
+
     genSliders (): VNode {
       return h('div', {
         class: 'v-color-picker__sliders',
@@ -47,37 +86,18 @@ export default defineComponent({
         !this.hideAlpha && this.genAlpha(),
       ])
     },
+
     genDot (): VNode {
       return h('div', {
         class: 'v-color-picker__dot',
       }, [
         h('div', {
           style: {
-            background: RGBAtoCSS(this.color.rgba),
+            background: this.color ? RGBAtoCSS(this.color.rgba) : 'transparent',
           },
         }),
       ])
     },
-    genHue (): VNode {
-      return this.genTrack({
-        class: 'v-color-picker__hue',
-        thumbColor: 'grey lighten-2',
-        hideDetails: true,
-        value: this.color.hue,
-        step: 0,
-        min: 0,
-        max: 360,
-        onInput: (val: number) => this.color.hue !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val })),
-      })
-    },
-    genTrack (options: VNodeData): VNode {
-      return h(VSlider, {
-        class: 'v-color-picker__track',
-        ...options,
-        disabled: this.disabled,
-        ...options.props
-      })
-    },
   },
 
   render (): VNode {

package/src/components/VColorPicker/VColorPickerSwatches.ts

@@ -1,4 +1,5 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VColorPickerSwatches.sass'
 
@@ -9,12 +10,13 @@ import VIcon from '../VIcon'
 import colors from '../../util/colors'
 import { VColorPickerColor, fromHex, parseColor } from './util'
 import { convertToUnit, deepEqual } from '../../util/helpers'
-import mixins from '../../util/mixins'
+import { contrastRatio } from '../../util/colorUtils'
+
+// Mixins
 import Themeable from '../../mixins/themeable'
 
 // Types
-import { VNode, PropType } from 'vue'
-import { contrastRatio } from '../../util/colorUtils'
+import type { VNode, PropType } from 'vue'
 
 function parseDefaultColors (colors: Record<string, Record<string, string>>) {
   return Object.keys(colors).map(key => {
@@ -41,22 +43,29 @@ function parseDefaultColors (colors: Record<string, Record<string, string>>) {
 const white = fromHex('#FFFFFF').rgba
 const black = fromHex('#000000').rgba
 
-export default mixins(Themeable).extend({
+export default defineComponent({
   name: 'v-color-picker-swatches',
 
+  mixins: [Themeable],
+
   props: {
     swatches: {
       type: Array as PropType<string[][]>,
       default: () => parseDefaultColors(colors),
     },
     disabled: Boolean,
-    color: Object as PropType<VColorPickerColor>,
+    color: {
+      type: Object as PropType<VColorPickerColor>,
+      required: true,
+    },
     maxWidth: [Number, String],
     maxHeight: [Number, String],
   },
 
+  emits: ['update:color'],
+
   methods: {
-    genColor (color: string) {
+    genColor (color: string): VNode {
       const content = h('div', {
         style: {
           background: color,
@@ -71,13 +80,15 @@ export default mixins(Themeable).extend({
 
       return h('div', {
         class: 'v-color-picker__color',
-        on: {
-          // TODO: Less hacky way of catching transparent
-          click: () => this.disabled || this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color)),
+        onClick: () => {
+          if (!this.disabled) {
+            this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color))
+          }
         },
       }, [content])
     },
-    genSwatches () {
+
+    genSwatches (): VNode[] {
       return this.swatches.map(swatch => {
         const colors = swatch.map(this.genColor)
 
@@ -90,7 +101,7 @@ export default mixins(Themeable).extend({
 
   render (): VNode {
     return h('div', {
-      class: 'v-color-picker__swatches',
+      class: ['v-color-picker__swatches', this.themeClasses],
       style: {
         maxWidth: convertToUnit(this.maxWidth),
         maxHeight: convertToUnit(this.maxHeight),