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

package/lib/components/VCode/VCode.sass

@@ -0,0 +1,8 @@
+@use './variables' as *
+
+.v-code
+  background-color: rgb($code-background-color)
+  border-radius: $code-border-radius
+  font-size: $code-font-size
+  font-weight: $code-font-weight
+  padding: $code-padding

package/lib/components/VCode/_variables.scss

@@ -0,0 +1,5 @@
+$code-background-color: var(--v-code-background-color) !default;
+$code-border-radius: 3px !default;
+$code-font-size: 85% !default;
+$code-font-weight: normal !default;
+$code-padding: .2em .4em !default;

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

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 var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-penumbra-opacity, 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 var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, 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 var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, 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 { VColorPickerCanvas } from "./VColorPickerCanvas.mjs";
+import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
+import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
+import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs";
+import { VSheet } from "../VSheet/index.mjs"; // Composables
+
+import { makeElevationProps } from "../../composables/elevation.mjs";
+import { makeRoundedProps } from "../../composables/rounded.mjs";
+import { makeThemeProps } from "../../composables/theme.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+
+import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
+import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs";
+import { onMounted, ref } from 'vue'; // Types
+
+export const VColorPicker = defineComponent({
+  name: 'VColorPicker',
+  inheritAttrs: false,
   props: {
     canvasHeight: {
       type: [String, Number],
@@ -29,145 +30,116 @@ 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
-        },
-        on: {
-          'update:color': this.updateColor
-        }
-      });
-    },
-
-    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
+      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];
+    });
+    useRender(() => _createVNode(VSheet, {
+      "rounded": props.rounded,
+      "elevation": props.elevation,
+      "theme": props.theme,
+      "class": ['v-color-picker'],
+      "style": {
+        '--v-color-picker-color-hsv': HSVAtoCSS({ ...(currentColor.value ?? nullColor),
+          a: 1
+        })
       },
-      props: {
-        maxWidth: this.width
-      }
-    }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
+      "maxWidth": props.width
+    }, {
+      default: () => [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
+        "key": "canvas",
+        "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", {
+        "key": "controls",
+        "class": "v-color-picker__controls"
+      }, [!props.hideSliders && _createVNode(VColorPickerPreview, {
+        "key": "preview",
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "hideAlpha": !mode.value.endsWith('a'),
+        "disabled": props.disabled
+      }, null), !props.hideInputs && _createVNode(VColorPickerEdit, {
+        "key": "edit",
+        "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, {
+        "key": "swatches",
+        "color": currentColor.value,
+        "onUpdate:color": updateColor,
+        "maxHeight": props.swatchesMaxHeight,
+        "swatches": props.swatches,
+        "disabled": props.disabled
+      }, null)]
+    }));
+    return {};
   }
 
 });

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":"AAAA;;AACA;AAEA;AACA,6B,CAEA;;OACOA,M;OACAC,mB;OACAC,kB;OACAC,gB,IAA0BC,K;OAC1BC,oB,oCAEP;;SAC4BC,U,EAAYC,Q,EAAUC,Y,EAAcC,Q;OACzDC,M;SACEC,S,kCAET;;OACOC,U;OACAC,S,0CAEP;;AAGA,eAAeH,MAAM,CAACE,UAAD,EAAaC,SAAb,CAAN,CAA8BC,MAA9B,CAAqC;AAClDC,EAAAA,IAAI,EAAE,gBAD4C;AAGlDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT,CADM;AAEZC,MAAAA,OAAO,EAAE;AAFG,KADT;AAKLC,IAAAA,QAAQ,EAAEC,OALL;AAMLC,IAAAA,OAAO,EAAE;AACPN,MAAAA,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADC;AAEPE,MAAAA,OAAO,EAAE;AAFF,KANJ;AAULI,IAAAA,IAAI,EAAEF,OAVD;AAWLG,IAAAA,UAAU,EAAEH,OAXP;AAYLI,IAAAA,WAAW,EAAEJ,OAZR;AAaLK,IAAAA,UAAU,EAAEL,OAbP;AAcLM,IAAAA,cAAc,EAAEN,OAdX;AAeLO,IAAAA,IAAI,EAAE;AACJZ,MAAAA,IAAI,EAAEC,MADF;AAEJE,MAAAA,OAAO,EAAE,MAFL;AAGJU,MAAAA,SAAS,EAAGC,CAAD,IAAeC,MAAM,CAACC,IAAP,CAAY9B,KAAZ,EAAmB+B,QAAnB,CAA4BH,CAA5B;AAHtB,KAfD;AAoBLI,IAAAA,YAAY,EAAEb,OApBT;AAqBLc,IAAAA,QAAQ,EAAEC,KArBL;AAsBLC,IAAAA,iBAAiB,EAAE;AACjBrB,MAAAA,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADW;AAEjBE,MAAAA,OAAO,EAAE;AAFQ,KAtBd;AA0BLmB,IAAAA,KAAK,EAAE;AACLtB,MAAAA,IAAI,EAAE,CAACe,MAAD,EAASd,MAAT;AADD,KA1BF;AA6BLsB,IAAAA,KAAK,EAAE;AACLvB,MAAAA,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADD;AAELE,MAAAA,OAAO,EAAE;AAFJ;AA7BF,GAH2C;AAsClDqB,EAAAA,IAAI,EAAE,OAAO;AACXC,IAAAA,aAAa,EAAEpC,QAAQ,CAAC;AAAEqC,MAAAA,CAAC,EAAE,GAAL;AAAUC,MAAAA,CAAC,EAAE,CAAb;AAAgBC,MAAAA,CAAC,EAAE,CAAnB;AAAsBC,MAAAA,CAAC,EAAE;AAAzB,KAAD;AADZ,GAAP,CAtC4C;AA0ClDC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,SAAS,GAAa;AACpB,UAAI,CAAC,KAAKT,KAAV,EAAiB,OAAO,KAAP;AAEjB,aAAO,CAAC/B,QAAQ,CAAC,KAAK+B,KAAN,CAAhB;AACD;;AALO,GA1CwC;AAkDlDU,EAAAA,KAAK,EAAE;AACLV,IAAAA,KAAK,EAAE;AACLW,MAAAA,OAAO,CAAEC,KAAF,EAAc;AACnB,aAAKC,WAAL,CAAiB/C,UAAU,CAAC8C,KAAD,EAAQ,KAAKT,aAAb,CAA3B;AACD,OAHI;;AAILW,MAAAA,SAAS,EAAE;AAJN;AADF,GAlD2C;AA2DlDC,EAAAA,OAAO,EAAE;AACPF,IAAAA,WAAW,CAAED,KAAF,EAA4B;AACrC,WAAKT,aAAL,GAAqBS,KAArB;AACA,YAAMZ,KAAK,GAAGhC,YAAY,CAAC,KAAKmC,aAAN,EAAqB,KAAKH,KAA1B,CAA1B;;AAEA,UAAI,CAAC7B,SAAS,CAAC6B,KAAD,EAAQ,KAAKA,KAAb,CAAd,EAAmC;AACjC,aAAKgB,KAAL,CAAW,OAAX,EAAoBhB,KAApB;AACA,aAAKgB,KAAL,CAAW,cAAX,EAA2B,KAAKb,aAAhC;AACD;AACF,KATM;;AAUPc,IAAAA,SAAS,GAAW;AAClB,aAAO,KAAKC,cAAL,CAAoBxD,kBAApB,EAAwC;AAC7Cc,QAAAA,KAAK,EAAE;AACLoC,UAAAA,KAAK,EAAE,KAAKT,aADP;AAELrB,UAAAA,QAAQ,EAAE,KAAKA,QAFV;AAGLE,UAAAA,OAAO,EAAE,KAAKA,OAHT;AAILiB,UAAAA,KAAK,EAAE,KAAKA,KAJP;AAKLkB,UAAAA,MAAM,EAAE,KAAK1C;AALR,SADsC;AAQ7C2C,QAAAA,EAAE,EAAE;AACF,0BAAgB,KAAKP;AADnB;AARyC,OAAxC,CAAP;AAYD,KAvBM;;AAwBPQ,IAAAA,WAAW,GAAW;AACpB,aAAO,KAAKH,cAAL,CAAoB,KAApB,EAA2B;AAChCI,QAAAA,WAAW,EAAE;AADmB,OAA3B,EAEJ,CACD,CAAC,KAAKnC,WAAN,IAAqB,KAAKoC,UAAL,EADpB,EAED,CAAC,KAAKnC,UAAN,IAAoB,KAAKoC,OAAL,EAFnB,CAFI,CAAP;AAMD,KA/BM;;AAgCPA,IAAAA,OAAO,GAAW;AAChB,aAAO,KAAKN,cAAL,CAAoBvD,gBAApB,EAAsC;AAC3Ca,QAAAA,KAAK,EAAE;AACLoC,UAAAA,KAAK,EAAE,KAAKT,aADP;AAELrB,UAAAA,QAAQ,EAAE,KAAKA,QAFV;AAGL2B,UAAAA,SAAS,EAAE,KAAKA,SAHX;AAILpB,UAAAA,cAAc,EAAE,KAAKA,cAJhB;AAKLC,UAAAA,IAAI,EAAE,KAAKA;AALN,SADoC;AAQ3C8B,QAAAA,EAAE,EAAE;AACF,0BAAgB,KAAKP,WADnB;AAEF,yBAAgBrB,CAAD,IAAa,KAAKwB,KAAL,CAAW,aAAX,EAA0BxB,CAA1B;AAF1B;AARuC,OAAtC,CAAP;AAaD,KA9CM;;AA+CP+B,IAAAA,UAAU,GAAW;AACnB,aAAO,KAAKL,cAAL,CAAoBzD,mBAApB,EAAyC;AAC9Ce,QAAAA,KAAK,EAAE;AACLoC,UAAAA,KAAK,EAAE,KAAKT,aADP;AAELrB,UAAAA,QAAQ,EAAE,KAAKA,QAFV;AAGL2B,UAAAA,SAAS,EAAE,KAAKA;AAHX,SADuC;AAM9CW,QAAAA,EAAE,EAAE;AACF,0BAAgB,KAAKP;AADnB;AAN0C,OAAzC,CAAP;AAUD,KA1DM;;AA2DPY,IAAAA,WAAW,GAAW;AACpB,aAAO,KAAKP,cAAL,CAAoBrD,oBAApB,EAA0C;AAC/CW,QAAAA,KAAK,EAAE;AACLkD,UAAAA,IAAI,EAAE,KAAKA,IADN;AAELC,UAAAA,KAAK,EAAE,KAAKA,KAFP;AAGL7C,UAAAA,QAAQ,EAAE,KAAKA,QAHV;AAILe,UAAAA,QAAQ,EAAE,KAAKA,QAJV;AAKLe,UAAAA,KAAK,EAAE,KAAKT,aALP;AAMLyB,UAAAA,SAAS,EAAE,KAAK7B;AANX,SADwC;AAS/CqB,QAAAA,EAAE,EAAE;AACF,0BAAgB,KAAKP;AADnB;AAT2C,OAA1C,CAAP;AAaD;;AAzEM,GA3DyC;;AAuIlDgB,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAACtE,MAAD,EAAS;AACf8D,MAAAA,WAAW,EAAE,gBADE;AAEfS,MAAAA,KAAK,EAAE;AACL,gCAAwB,KAAK9C,IADxB;AAEL,WAAG,KAAK+C,YAFH;AAGL,WAAG,KAAKC;AAHH,OAFQ;AAOfzD,MAAAA,KAAK,EAAE;AACL0D,QAAAA,QAAQ,EAAE,KAAKjC;AADV;AAPQ,KAAT,EAUL,CACD,CAAC,KAAKf,UAAN,IAAoB,KAAK+B,SAAL,EADnB,EAED,CAAC,CAAC,KAAK9B,WAAN,IAAqB,CAAC,KAAKC,UAA5B,KAA2C,KAAKiC,WAAL,EAF1C,EAGD,KAAKzB,YAAL,IAAqB,KAAK6B,WAAL,EAHpB,CAVK,CAAR;AAeD;;AAvJiD,CAArC,CAAf","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,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","VSheet","makeElevationProps","makeRoundedProps","makeThemeProps","useProxiedModel","defineComponent","HSVAtoCSS","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","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"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { VSheet } from '@/components/VSheet'\n\n// Composables\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS, useRender } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\nimport { onMounted, ref } from 'vue'\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    useRender(() => (\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            key=\"canvas\"\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\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div key=\"controls\" class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                key=\"preview\"\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            ) }\n\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                key=\"edit\"\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\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            key=\"swatches\"\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    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPicker.sass

@@ -1,22 +1,14 @@
-@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')
+@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 +18,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;
+}