@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VCode/index.mjs

@@ -0,0 +1,4 @@
+import "./VCode.css";
+import { createSimpleFunctional } from "../../util/index.mjs";
+export const VCode = createSimpleFunctional('v-code');
+//# sourceMappingURL=index.mjs.map

package/lib/components/VCode/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VCode/index.ts"],"names":["createSimpleFunctional","VCode"],"mappings":"AAAA;SAESA,sB;AAET,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAD,CAApC","sourcesContent":["import './VCode.sass'\n\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCode = createSimpleFunctional('v-code')\n"],"file":"index.mjs"}

package/lib/components/VColorPicker/VColorPicker.css

@@ -0,0 +1,21 @@
+.v-color-picker {
+  align-self: flex-start;
+  contain: content;
+}
+.v-color-picker.v-sheet {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+
+.v-color-picker__controls {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.v-color-picker--flat {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -1,24 +1,25 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VColorPicker.sass"; // Components
-
-import VSheet from "../VSheet/VSheet.mjs";
-import VColorPickerPreview from "./VColorPickerPreview.mjs";
-import VColorPickerCanvas from "./VColorPickerCanvas.mjs";
-import VColorPickerEdit, { modes } from "./VColorPickerEdit.mjs";
-import VColorPickerSwatches from "./VColorPickerSwatches.mjs"; // Helpers
-
-import { parseColor, fromRGBA, extractColor, hasAlpha } from "./util/index.mjs";
-import mixins from "../../util/mixins.mjs";
-import { deepEqual } from "../../util/helpers.mjs"; // Mixins
-
-import Elevatable from "../../mixins/elevatable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Types
-
-export default mixins(Elevatable, Themeable).extend({
-  name: 'v-color-picker',
+import "./VColorPicker.css"; // Components
+
+import { VSheet } from "../VSheet/index.mjs";
+import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
+import { VColorPickerCanvas } from "./VColorPickerCanvas.mjs";
+import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
+import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs"; // Composables
+
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { makeElevationProps } from "../../composables/elevation.mjs";
+import { makeRoundedProps } from "../../composables/rounded.mjs";
+import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
+
+import { onMounted, ref } from 'vue';
+import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
+import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs"; // Types
+
+export const VColorPicker = defineComponent({
+  name: 'VColorPicker',
+  inheritAttrs: false,
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -29,145 +30,114 @@ export default mixins(Elevatable, Themeable).extend({
       type: [Number, String],
       default: 10
     },
-    flat: Boolean,
     hideCanvas: Boolean,
     hideSliders: Boolean,
     hideInputs: Boolean,
-    hideModeSwitch: Boolean,
     mode: {
       type: String,
       default: 'rgba',
       validator: v => Object.keys(modes).includes(v)
     },
+    modes: {
+      type: Array,
+      default: () => Object.keys(modes),
+      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
+    },
     showSwatches: Boolean,
     swatches: Array,
     swatchesMaxHeight: {
       type: [Number, String],
       default: 150
     },
-    value: {
+    modelValue: {
       type: [Object, String]
     },
     width: {
       type: [Number, String],
       default: 300
-    }
-  },
-  data: () => ({
-    internalValue: fromRGBA({
-      r: 255,
-      g: 0,
-      b: 0,
-      a: 1
-    })
-  }),
-  computed: {
-    hideAlpha() {
-      if (!this.value) return false;
-      return !hasAlpha(this.value);
-    }
-
+    },
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeThemeProps()
   },
-  watch: {
-    value: {
-      handler(color) {
-        this.updateColor(parseColor(color, this.internalValue));
-      },
-
-      immediate: true
-    }
+  emits: {
+    'update:modelValue': color => true,
+    'update:mode': mode => true
   },
-  methods: {
-    updateColor(color) {
-      this.internalValue = color;
-      const value = extractColor(this.internalValue, this.value);
 
-      if (!deepEqual(value, this.value)) {
-        this.$emit('input', value);
-        this.$emit('update:color', this.internalValue);
+  setup(props) {
+    const mode = useProxiedModel(props, 'mode');
+    const lastPickedColor = ref(null);
+    const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
+      let c = parseColor(v);
+      if (!c) return null;
+
+      if (lastPickedColor.value) {
+        c = { ...c,
+          h: lastPickedColor.value.h
+        };
+        lastPickedColor.value = null;
       }
-    },
 
-    genCanvas() {
-      return this.$createElement(VColorPickerCanvas, {
-        props: {
-          color: this.internalValue,
-          disabled: this.disabled,
-          dotSize: this.dotSize,
-          width: this.width,
-          height: this.canvasHeight
+      return c;
+    }, v => {
+      if (!v) return null;
+      return extractColor(v, props.modelValue);
+    });
+
+    const updateColor = hsva => {
+      currentColor.value = hsva;
+      lastPickedColor.value = hsva;
+    };
+
+    onMounted(() => {
+      if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
+    });
+    return () => {
+      var _currentColor$value;
+
+      return _createVNode(VSheet, {
+        "rounded": props.rounded,
+        "elevation": props.elevation,
+        "theme": props.theme,
+        "class": ['v-color-picker'],
+        "style": {
+          '--v-color-picker-color-hsv': HSVAtoCSS({ ...((_currentColor$value = currentColor.value) != null ? _currentColor$value : nullColor),
+            a: 1
+          })
         },
-        on: {
-          'update:color': this.updateColor
-        }
+        "maxWidth": props.width
+      }, {
+        default: () => [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "disabled": props.disabled,
+          "dotSize": props.dotSize,
+          "width": props.width,
+          "height": props.canvasHeight
+        }, null), (!props.hideSliders || !props.hideInputs) && _createVNode("div", {
+          "class": "v-color-picker__controls"
+        }, [!props.hideSliders && _createVNode(VColorPickerPreview, {
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "hideAlpha": !mode.value.endsWith('a'),
+          "disabled": props.disabled
+        }, null), !props.hideInputs && _createVNode(VColorPickerEdit, {
+          "modes": props.modes,
+          "mode": mode.value,
+          "onUpdate:mode": m => mode.value = m,
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "disabled": props.disabled
+        }, null)]), props.showSwatches && _createVNode(VColorPickerSwatches, {
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "maxHeight": props.swatchesMaxHeight,
+          "swatches": props.swatches,
+          "disabled": props.disabled
+        }, null)]
       });
-    },
-
-    genControls() {
-      return this.$createElement('div', {
-        staticClass: 'v-color-picker__controls'
-      }, [!this.hideSliders && this.genPreview(), !this.hideInputs && this.genEdit()]);
-    },
-
-    genEdit() {
-      return this.$createElement(VColorPickerEdit, {
-        props: {
-          color: this.internalValue,
-          disabled: this.disabled,
-          hideAlpha: this.hideAlpha,
-          hideModeSwitch: this.hideModeSwitch,
-          mode: this.mode
-        },
-        on: {
-          'update:color': this.updateColor,
-          'update:mode': v => this.$emit('update:mode', v)
-        }
-      });
-    },
-
-    genPreview() {
-      return this.$createElement(VColorPickerPreview, {
-        props: {
-          color: this.internalValue,
-          disabled: this.disabled,
-          hideAlpha: this.hideAlpha
-        },
-        on: {
-          'update:color': this.updateColor
-        }
-      });
-    },
-
-    genSwatches() {
-      return this.$createElement(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
-        }
-      });
-    }
-
-  },
-
-  render(h) {
-    return h(VSheet, {
-      staticClass: 'v-color-picker',
-      class: {
-        'v-color-picker--flat': this.flat,
-        ...this.themeClasses,
-        ...this.elevationClasses
-      },
-      props: {
-        maxWidth: this.width
-      }
-    }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
+    };
   }
 
 });

package/lib/components/VColorPicker/VColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPicker.ts"],"names":["VSheet","VColorPickerPreview","VColorPickerCanvas","VColorPickerEdit","modes","VColorPickerSwatches","parseColor","fromRGBA","extractColor","hasAlpha","mixins","deepEqual","Elevatable","Themeable","extend","name","props","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","flat","hideCanvas","hideSliders","hideInputs","hideModeSwitch","mode","validator","v","Object","keys","includes","showSwatches","swatches","Array","swatchesMaxHeight","value","width","data","internalValue","r","g","b","a","computed","hideAlpha","watch","handler","color","updateColor","immediate","methods","$emit","genCanvas","$createElement","height","on","genControls","staticClass","genPreview","genEdit","genSwatches","dark","light","maxHeight","render","h","class","themeClasses","elevationClasses","maxWidth"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\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 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 this.$createElement(VColorPickerCanvas, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          dotSize: this.dotSize,\n          width: this.width,\n          height: this.canvasHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genControls (): VNode {\n      return this.$createElement('div', {\n        staticClass: 'v-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n    genEdit (): VNode {\n      return this.$createElement(VColorPickerEdit, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n          hideModeSwitch: this.hideModeSwitch,\n          mode: this.mode,\n        },\n        on: {\n          'update:color': this.updateColor,\n          'update:mode': (v: Mode) => this.$emit('update:mode', v),\n        },\n      })\n    },\n    genPreview (): VNode {\n      return this.$createElement(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 this.$createElement(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 (h): VNode {\n    return h(VSheet, {\n      staticClass: '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"],"file":"VColorPicker.mjs"}
+{"version":3,"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"names":["VSheet","VColorPickerPreview","VColorPickerCanvas","VColorPickerEdit","VColorPickerSwatches","useProxiedModel","makeElevationProps","makeRoundedProps","makeThemeProps","onMounted","ref","defineComponent","HSVAtoCSS","extractColor","modes","nullColor","parseColor","VColorPicker","name","inheritAttrs","props","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","hideCanvas","hideSliders","hideInputs","mode","validator","v","Object","keys","includes","Array","isArray","every","m","showSwatches","swatches","swatchesMaxHeight","modelValue","width","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","updateColor","hsva","rounded","elevation","theme","a","endsWith"],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VSheet } from '@/components/VSheet'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { onMounted, ref } from 'vue'\nimport { defineComponent, HSVAtoCSS } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  inheritAttrs: false,\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    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\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] as PropType<Record<string, unknown> | string | undefined | null>,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSVA | null>(null)\n    const currentColor = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        let c = parseColor(v)\n\n        if (!c) return null\n\n        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n\n    const updateColor = (hsva: HSVA) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    return () => (\n      <VSheet\n        rounded={ props.rounded }\n        elevation={ props.elevation }\n        theme={ props.theme }\n        class={[\n          'v-color-picker',\n        ]}\n        style={{\n          '--v-color-picker-color-hsv': HSVAtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n        }}\n        maxWidth={ props.width }\n      >\n        { !props.hideCanvas && (\n          <VColorPickerCanvas\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            disabled={ props.disabled }\n            dotSize={ props.dotSize }\n            width={ props.width }\n            height={ props.canvasHeight }\n          />\n        ) }\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            ) }\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                modes={ props.modes }\n                mode={ mode.value }\n                onUpdate:mode={ m => mode.value = m }\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                disabled={ props.disabled }\n              />\n            ) }\n          </div>\n        ) }\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            maxHeight={ props.swatchesMaxHeight }\n            swatches={ props.swatches }\n            disabled={ props.disabled }\n          />\n        ) }\n      </VSheet>\n    )\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"file":"VColorPicker.mjs"}

package/lib/components/VColorPicker/VColorPicker.sass

@@ -1,22 +1,15 @@
-@import './_variables.scss'
-
-+theme(v-color-picker) using ($material)
-  .v-color-picker__input input
-    border: thin solid map-get($material, 'dividers')
-    color: map-deep-get($material, 'text', 'primary')
-
-  span
-    color: map-deep-get($material, 'text', 'secondary')
-
-  .v-color-picker__dot, .v-color-picker__color
-    background-color: map-deep-get($material, 'color-picker', 'checkerboard')
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 // Block
 .v-color-picker
   align-self: flex-start
-  border-radius: $color-picker-border-radius
   contain: content
-  +elevation(2)
+
+  &.v-sheet
+    +tools.elevation($color-picker-elevation)
+    +tools.rounded($color-picker-border-radius)
 
 // Element
 .v-color-picker__controls
@@ -26,7 +19,7 @@
 
 // Modifier
 .v-color-picker--flat
-  +elevation(0)
+  +tools.elevation(0)
 
-  .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specifity
-    +elevation(0)
+  .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
+    +tools.elevation(0)

package/lib/components/VColorPicker/VColorPickerCanvas.css

@@ -0,0 +1,21 @@
+.v-color-picker-canvas {
+  position: relative;
+  overflow: hidden;
+  contain: strict;
+}
+.v-color-picker-canvas__dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  background: transparent;
+  border-radius: 50%;
+  box-shadow: 0px 0px 0px 1.5px rgb(255, 255, 255), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+}
+.v-color-picker-canvas__dot--disabled {
+  box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+}
+.v-color-picker-canvas:hover .v-color-picker-canvas__dot {
+  will-change: transform;
+}