@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -2,20 +2,20 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 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 { VColorPickerPreview } from "./VColorPickerPreview.mjs";
+import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs";
+import { VSheet } from "../VSheet/index.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 { makeThemeProps } from "../../composables/theme.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-import { onMounted, ref } from 'vue';
-import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
-import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs"; // Types
+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',
@@ -93,51 +93,53 @@ export const VColorPicker = defineComponent({
     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
-          })
-        },
-        "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)]
-      });
-    };
+    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
+        })
+      },
+      "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.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"}
+{"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,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerCanvas.css

@@ -11,7 +11,7 @@
   height: 15px;
   background: transparent;
   border-radius: 50%;
-  box-shadow: 0px 0px 0px 1.5px white, inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3);
+  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);

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -2,8 +2,8 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VColorPickerCanvas.css"; // Utilities
 
-import { computed, onMounted, ref, watch } from 'vue';
-import { clamp, convertToUnit, defineComponent, getEventCoordinates } from "../../util/index.mjs"; // Types
+import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
+import { computed, onMounted, ref, watch } from 'vue'; // Types
 
 export const VColorPickerCanvas = defineComponent({
   name: 'VColorPickerCanvas',
@@ -98,7 +98,7 @@ export const VColorPickerCanvas = defineComponent({
     }
 
     watch(dotPosition, () => {
-      var _props$color$h, _props$color, _props$color$a, _props$color2;
+      var _props$color, _props$color2;
 
       if (isOutsideUpdate.value) {
         isOutsideUpdate.value = false;
@@ -115,15 +115,15 @@ export const VColorPickerCanvas = defineComponent({
         y
       } = dotPosition.value;
       emit('update:color', {
-        h: (_props$color$h = (_props$color = props.color) == null ? void 0 : _props$color.h) != null ? _props$color$h : 0,
+        h: ((_props$color = props.color) == null ? void 0 : _props$color.h) ?? 0,
         s: clamp(x, 0, width) / width,
         v: 1 - clamp(y, 0, height) / height,
-        a: (_props$color$a = (_props$color2 = props.color) == null ? void 0 : _props$color2.a) != null ? _props$color$a : 1
+        a: ((_props$color2 = props.color) == null ? void 0 : _props$color2.a) ?? 1
       });
     });
 
     function updateCanvas() {
-      var _props$color$h2, _props$color3;
+      var _props$color3;
 
       if (!canvasRef.value) return;
       const canvas = canvasRef.value;
@@ -132,7 +132,7 @@ export const VColorPickerCanvas = defineComponent({
       const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
       saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white
 
-      saturationGradient.addColorStop(1, `hsla(${(_props$color$h2 = (_props$color3 = props.color) == null ? void 0 : _props$color3.h) != null ? _props$color$h2 : 0}, 100%, 50%, 1)`);
+      saturationGradient.addColorStop(1, `hsla(${((_props$color3 = props.color) == null ? void 0 : _props$color3.h) ?? 0}, 100%, 50%, 1)`);
       ctx.fillStyle = saturationGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
@@ -168,7 +168,7 @@ export const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    return () => _createVNode("div", {
+    useRender(() => _createVNode("div", {
       "class": "v-color-picker-canvas",
       "style": {
         width: convertToUnit(props.width),
@@ -186,7 +186,8 @@ export const VColorPickerCanvas = defineComponent({
         'v-color-picker-canvas__dot--disabled': props.disabled
       }],
       "style": dotStyles.value
-    }, null)]);
+    }, null)]));
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"names":["computed","onMounted","ref","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\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: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\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(${props.color?.h ?? 0}, 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    watch(() => props.color?.h, updateCanvas, { immediate: true })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    return () => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\n        <div\n          class={[\n            'v-color-picker-canvas__dot',\n            {\n              'v-color-picker-canvas__dot--disabled': props.disabled,\n            },\n          ]}\n          style={ dotStyles.value }\n        />\n      </div>\n    )\n  },\n})\n"],"file":"VColorPickerCanvas.mjs"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["clamp","convertToUnit","defineComponent","getEventCoordinates","useRender","computed","onMounted","ref","watch","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\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: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\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(${props.color?.h ?? 0}, 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    watch(() => props.color?.h, updateCanvas, { immediate: true })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\n        <div\n          class={[\n            'v-color-picker-canvas__dot',\n            {\n              'v-color-picker-canvas__dot--disabled': props.disabled,\n            },\n          ]}\n          style={ dotStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerCanvas.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -5,7 +5,7 @@ import "./VColorPickerEdit.css"; // Components
 import { VBtn } from "../VBtn/index.mjs"; // Utilities
 
 import { computed } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 import { modes } from "./util/index.mjs"; // Types
 
 const VColorPickerInput = _ref => {
@@ -72,7 +72,7 @@ export const VColorPickerEdit = defineComponent({
         };
       });
     });
-    return () => {
+    useRender(() => {
       var _inputs$value;
 
       return _createVNode("div", {
@@ -86,7 +86,8 @@ export const VColorPickerEdit = defineComponent({
           emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);
         }
       }, null)]);
-    };
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"names":["VBtn","computed","defineComponent","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input {...rest} />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: 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  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color, target.value)))\n          },\n        }\n      })\n    })\n\n    return () => (\n      <div\n        class=\"v-color-picker-edit\"\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput {...props} />\n        )) }\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            } }\n          />\n        ) }\n      </div>\n    )\n  },\n})\n"],"file":"VColorPickerEdit.mjs"}
+{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","useRender","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input {...rest} />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: 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  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-edit\"\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput {...props} />\n        )) }\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            } }\n          />\n        ) }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerEdit.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -4,7 +4,7 @@ import "./VColorPickerPreview.css"; // Components
 
 import { VSlider } from "../VSlider/index.mjs"; // Utilities
 
-import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
+import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
 import { nullColor } from "./util/index.mjs"; // Types
 
 export const VColorPickerPreview = defineComponent({
@@ -24,8 +24,8 @@ export const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
-    return () => {
-      var _props$color, _props$color2, _props$color4;
+    useRender(() => {
+      var _props$color, _props$color2;
 
       return _createVNode("div", {
         "class": ['v-color-picker-preview', {
@@ -35,20 +35,16 @@ export const VColorPickerPreview = defineComponent({
         "class": "v-color-picker-preview__dot"
       }, [_createVNode("div", {
         "style": {
-          background: HSVAtoCSS((_props$color = props.color) != null ? _props$color : nullColor)
+          background: HSVAtoCSS(props.color ?? nullColor)
         }
       }, null)]), _createVNode("div", {
         "class": "v-color-picker-preview__sliders"
       }, [_createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__hue",
-        "modelValue": (_props$color2 = props.color) == null ? void 0 : _props$color2.h,
-        "onUpdate:modelValue": h => {
-          var _props$color3;
-
-          return emit('update:color', { ...((_props$color3 = props.color) != null ? _props$color3 : nullColor),
-            h
-          });
-        },
+        "modelValue": (_props$color = props.color) == null ? void 0 : _props$color.h,
+        "onUpdate:modelValue": h => emit('update:color', { ...(props.color ?? nullColor),
+          h
+        }),
         "step": 0,
         "min": 0,
         "max": 360,
@@ -59,14 +55,10 @@ export const VColorPickerPreview = defineComponent({
         "hideDetails": true
       }, null), !props.hideAlpha && _createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
-        "modelValue": (_props$color4 = props.color) == null ? void 0 : _props$color4.a,
-        "onUpdate:modelValue": a => {
-          var _props$color5;
-
-          return emit('update:color', { ...((_props$color5 = props.color) != null ? _props$color5 : nullColor),
-            a
-          });
-        },
+        "modelValue": (_props$color2 = props.color) == null ? void 0 : _props$color2.a,
+        "onUpdate:modelValue": a => emit('update:color', { ...(props.color ?? nullColor),
+          a
+        }),
         "step": 0,
         "min": 0,
         "max": 1,
@@ -76,7 +68,8 @@ export const VColorPickerPreview = defineComponent({
         "trackFillColor": "white",
         "hideDetails": true
       }, null)])]);
-    };
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"names":["VSlider","defineComponent","HSVAtoCSS","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","emit","background","h","a"],"mappings":";AAAA;AACA,mC,CAEA;;SACSA,O,gCAET;;SACSC,e,EAAiBC,S;SACjBC,S,4BAET;;AAIA,OAAO,MAAMC,mBAAmB,GAAGH,eAAe,CAAC;AACjDI,EAAAA,IAAI,EAAE,qBAD2C;AAGjDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC;AADD,KADF;AAILC,IAAAA,QAAQ,EAAEC,OAJL;AAKLC,IAAAA,SAAS,EAAED;AALN,GAH0C;AAWjDE,EAAAA,KAAK,EAAE;AACL,oBAAiBN,KAAD,IAAiB;AAD5B,GAX0C;;AAejDO,EAAAA,KAAK,CAAER,KAAF,QAAmB;AAAA,QAAV;AAAES,MAAAA;AAAF,KAAU;AACtB,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,wBADK,EAEL;AACE,gDAAsCT,KAAK,CAACM;AAD9C,SAFK;AAFJ;AAAA,iBASQ;AATR;AAAA,iBAUW;AAAEI,UAAAA,UAAU,EAAEd,SAAS,iBAACI,KAAK,CAACC,KAAP,2BAAgBJ,SAAhB;AAAvB;AAVX;AAAA,iBAYQ;AAZR;AAAA,iBAcO,2DAdP;AAAA,uCAecG,KAAK,CAACC,KAfpB,qBAec,cAAaU,CAf3B;AAAA,+BAgBuBA,CAAC;AAAA;;AAAA,iBAAIF,IAAI,CAAC,cAAD,EAAiB,EAAE,qBAAIT,KAAK,CAACC,KAAV,4BAAmBJ,SAAnB,CAAF;AAAiCc,YAAAA;AAAjC,WAAjB,CAAR;AAAA,SAhBxB;AAAA,gBAiBQ,CAjBR;AAAA,eAkBO,CAlBP;AAAA,eAmBO,GAnBP;AAAA,oBAoBYX,KAAK,CAACI,QApBlB;AAAA,qBAqBa,EArBb;AAAA,qBAsBa,CAtBb;AAAA,0BAuBgB,OAvBhB;AAAA;AAAA,gBA0BC,CAACJ,KAAK,CAACM,SAAP;AAAA,iBAEQ,6DAFR;AAAA,uCAGeN,KAAK,CAACC,KAHrB,qBAGe,cAAaW,CAH5B;AAAA,+BAIwBA,CAAC;AAAA;;AAAA,iBAAIH,IAAI,CAAC,cAAD,EAAiB,EAAE,qBAAIT,KAAK,CAACC,KAAV,4BAAmBJ,SAAnB,CAAF;AAAiCe,YAAAA;AAAjC,WAAjB,CAAR;AAAA,SAJzB;AAAA,gBAKS,CALT;AAAA,eAMQ,CANR;AAAA,eAOQ,CAPR;AAAA,oBAQaZ,KAAK,CAACI,QARnB;AAAA,qBASc,EATd;AAAA,qBAUc,CAVd;AAAA,0BAWiB,OAXjB;AAAA;AAAA,cA1BD;AAAA,KAAP;AA4CD;;AA5DgD,CAAD,CAA3C","sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    return () => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n        ]}\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVAtoCSS(props.color ?? nullColor) }} />\n        </div>\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 0 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          ) }\n        </div>\n      </div>\n    )\n  },\n})\n"],"file":"VColorPickerPreview.mjs"}
+{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","defineComponent","HSVAtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","emit","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n        ]}\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVAtoCSS(props.color ?? nullColor) }} />\n        </div>\n\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 0 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          ) }\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,mC,CAEA;;SACSA,O,gCAET;;SACSC,e,EAAiBC,S,EAAWC,S;SAC5BC,S,4BAET;;AAIA,OAAO,MAAMC,mBAAmB,GAAGJ,eAAe,CAAC;EACjDK,IAAI,EAAE,qBAD2C;EAGjDC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IADD,CADF;IAILC,QAAQ,EAAEC,OAJL;IAKLC,SAAS,EAAED;EALN,CAH0C;EAWjDE,KAAK,EAAE;IACL,gBAAiBN,KAAD,IAAiB;EAD5B,CAX0C;;EAejDO,KAAK,CAAER,KAAF,QAAmB;IAAA,IAAV;MAAES;IAAF,CAAU;IACtBb,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,wBADK,EAEL;UACE,sCAAsCI,KAAK,CAACM;QAD9C,CAFK;MAFD;QAAA,SASK;MATL;QAAA,SAUQ;UAAEI,UAAU,EAAEf,SAAS,CAACK,KAAK,CAACC,KAAN,IAAeJ,SAAhB;QAAvB;MAVR;QAAA,SAaK;MAbL;QAAA,SAeI,2DAfJ;QAAA,8BAgBWG,KAAK,CAACC,KAhBjB,qBAgBW,aAAaU,CAhBxB;QAAA,uBAiBoBA,CAAC,IAAIF,IAAI,CAAC,cAAD,EAAiB,EAAE,IAAIT,KAAK,CAACC,KAAN,IAAeJ,SAAnB,CAAF;UAAiCc;QAAjC,CAAjB,CAjB7B;QAAA,QAkBK,CAlBL;QAAA,OAmBI,CAnBJ;QAAA,OAoBI,GApBJ;QAAA,YAqBSX,KAAK,CAACI,QArBf;QAAA,aAsBU,EAtBV;QAAA,aAuBU,CAvBV;QAAA,kBAwBa,OAxBb;QAAA;MAAA,UA4BF,CAACJ,KAAK,CAACM,SAAP;QAAA,SAEQ,6DAFR;QAAA,+BAGeN,KAAK,CAACC,KAHrB,qBAGe,cAAaW,CAH5B;QAAA,uBAIwBA,CAAC,IAAIH,IAAI,CAAC,cAAD,EAAiB,EAAE,IAAIT,KAAK,CAACC,KAAN,IAAeJ,SAAnB,CAAF;UAAiCe;QAAjC,CAAjB,CAJjC;QAAA,QAKS,CALT;QAAA,OAMQ,CANR;QAAA,OAOQ,CAPR;QAAA,YAQaZ,KAAK,CAACI,QARnB;QAAA,aASc,EATd;QAAA,aAUc,CAVd;QAAA,kBAWiB,OAXjB;QAAA;MAAA,QA5BE;IAAA,CAAD,CAAT;IA+CA,OAAO,EAAP;EACD;;AAhEgD,CAAD,CAA3C"}

package/lib/components/VColorPicker/VColorPickerPreview.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerSwatches.mjs

@@ -4,9 +4,9 @@ import "./VColorPickerSwatches.css"; // Components
 
 import { VIcon } from "../VIcon/index.mjs"; // Utilities
 
-import { convertToUnit, deepEqual, defineComponent, getContrast } from "../../util/index.mjs";
-import colors from "../../util/colors.mjs";
-import { parseColor } from "./util/index.mjs"; // Types
+import { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from "../../util/index.mjs";
+import { parseColor } from "./util/index.mjs";
+import colors from "../../util/colors.mjs"; // Types
 
 function parseDefaultColors(colors) {
   return Object.keys(colors).map(key => {
@@ -34,7 +34,7 @@ export const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
-    return () => _createVNode("div", {
+    useRender(() => _createVNode("div", {
       "class": "v-color-picker-swatches",
       "style": {
         maxHeight: convertToUnit(props.maxHeight)
@@ -55,7 +55,8 @@ export const VColorPickerSwatches = defineComponent({
         "icon": "$success",
         "color": getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black'
       }, null) : undefined])]);
-    })]))])]);
+    })]))])]));
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"names":["VIcon","convertToUnit","deepEqual","defineComponent","getContrast","colors","parseColor","parseDefaultColors","Object","keys","map","key","color","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","swatches","type","Array","default","disabled","Boolean","maxHeight","Number","String","emits","setup","emit","swatch","hsva","background","undefined"],"mappings":";AAAA;AACA,oC,CAEA;;SACSA,K,8BAET;;SACSC,a,EAAeC,S,EAAWC,e,EAAiBC,W;OAC7CC,M;SACEC,U,4BAET;;AAIA,SAASC,kBAAT,CAA6BF,MAA7B,EAA6E;AAC3E,SAAOG,MAAM,CAACC,IAAP,CAAYJ,MAAZ,EAAoBK,GAApB,CAAwBC,GAAG,IAAI;AACpC,UAAMC,KAAK,GAAGP,MAAM,CAACM,GAAD,CAApB;AACA,WAAOC,KAAK,CAACC,IAAN,GAAa,CAClBD,KAAK,CAACC,IADY,EAElBD,KAAK,CAACE,OAFY,EAGlBF,KAAK,CAACG,OAHY,EAIlBH,KAAK,CAACI,OAJY,EAKlBJ,KAAK,CAACK,OALY,EAMlBL,KAAK,CAACM,QANY,EAOlBN,KAAK,CAACO,QAPY,EAQlBP,KAAK,CAACQ,QARY,EASlBR,KAAK,CAACS,QATY,EAUlBT,KAAK,CAACU,QAVY,CAAb,GAWH,CACFV,KAAK,CAACW,KADJ,EAEFX,KAAK,CAACY,KAFJ,EAGFZ,KAAK,CAACa,WAHJ,CAXJ;AAgBD,GAlBM,CAAP;AAmBD;;AAED,OAAO,MAAMC,oBAAoB,GAAGvB,eAAe,CAAC;AAClDwB,EAAAA,IAAI,EAAE,sBAD4C;AAGlDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEC,KADE;AAERC,MAAAA,OAAO,EAAE,MAAMzB,kBAAkB,CAACF,MAAD;AAFzB,KADL;AAKL4B,IAAAA,QAAQ,EAAEC,OALL;AAMLtB,IAAAA,KAAK,EAAEJ,MANF;AAOL2B,IAAAA,SAAS,EAAE,CAACC,MAAD,EAASC,MAAT;AAPN,GAH2C;AAalDC,EAAAA,KAAK,EAAE;AACL,oBAAiB1B,KAAD,IAAiB;AAD5B,GAb2C;;AAiBlD2B,EAAAA,KAAK,CAAEX,KAAF,QAAmB;AAAA,QAAV;AAAEY,MAAAA;AAAF,KAAU;AACtB,WAAO;AAAA,eAEG,yBAFH;AAAA,eAGI;AACLL,QAAAA,SAAS,EAAElC,aAAa,CAAC2B,KAAK,CAACO,SAAP;AADnB;AAHJ,mCAQCP,KAAK,CAACC,QAAN,CAAenB,GAAf,CAAmB+B,MAAM;AAAA,eACd;AADc,QAErBA,MAAM,CAAC/B,GAAP,CAAWE,KAAK,IAAI;AACpB,YAAM8B,IAAI,GAAGpC,UAAU,CAACM,KAAD,CAAvB;AAEA;AAAA,iBAEU,gCAFV;AAAA,mBAGa,MAAM8B,IAAI,IAAIF,IAAI,CAAC,cAAD,EAAiBE,IAAjB;AAH/B;AAAA,iBAKgB;AAAEC,UAAAA,UAAU,EAAE/B;AAAd;AALhB,UAMQgB,KAAK,CAAChB,KAAN,IAAeV,SAAS,CAAC0B,KAAK,CAAChB,KAAP,EAAc8B,IAAd,CAAxB;AAAA,gBACc,SADd;AAAA,gBAC6B,UAD7B;AAAA,iBAC+CtC,WAAW,CAACQ,KAAD,EAAQ,SAAR,CAAX,GAAgC,CAAhC,GAAoC,OAApC,GAA8C;AAD7F,iBAEEgC,SARV;AAaD,KAhBC,CAFqB,EAAzB,CARD,IAAP;AAgCD;;AAlDiD,CAAD,CAA5C","sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Utilities\nimport { convertToUnit, deepEqual, defineComponent, getContrast } from '@/util'\nimport colors from '@/util/colors'\nimport { parseColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: {\n    swatches: {\n      type: Array as PropType<string[][]>,\n      default: () => parseDefaultColors(colors),\n    },\n    disabled: Boolean,\n    color: Object as PropType<HSVA | null>,\n    maxHeight: [Number, String],\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    return () => (\n      <div\n        class=\"v-color-picker-swatches\"\n        style={{\n          maxHeight: convertToUnit(props.maxHeight),\n        }}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const hsva = parseColor(color)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={() => hsva && emit('update:color', hsva)}\n                  >\n                    <div style={{ background: color }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              }) }\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  },\n})\n"],"file":"VColorPickerSwatches.mjs"}
+{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","convertToUnit","deepEqual","defineComponent","getContrast","useRender","parseColor","colors","parseDefaultColors","Object","keys","map","key","color","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","swatches","type","Array","default","disabled","Boolean","maxHeight","Number","String","emits","setup","emit","swatch","hsva","background","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Utilities\nimport { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from '@/util'\nimport { parseColor } from './util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: {\n    swatches: {\n      type: Array as PropType<string[][]>,\n      default: () => parseDefaultColors(colors),\n    },\n    disabled: Boolean,\n    color: Object as PropType<HSVA | null>,\n    maxHeight: [Number, String],\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class=\"v-color-picker-swatches\"\n        style={{\n          maxHeight: convertToUnit(props.maxHeight),\n        }}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const hsva = parseColor(color)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={() => hsva && emit('update:color', hsva)}\n                  >\n                    <div style={{ background: color }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              }) }\n            </div>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,oC,CAEA;;SACSA,K,8BAET;;SACSC,a,EAAeC,S,EAAWC,e,EAAiBC,W,EAAaC,S;SACxDC,U;OACFC,M,+BAEP;;AAIA,SAASC,kBAAT,CAA6BD,MAA7B,EAA6E;EAC3E,OAAOE,MAAM,CAACC,IAAP,CAAYH,MAAZ,EAAoBI,GAApB,CAAwBC,GAAG,IAAI;IACpC,MAAMC,KAAK,GAAGN,MAAM,CAACK,GAAD,CAApB;IACA,OAAOC,KAAK,CAACC,IAAN,GAAa,CAClBD,KAAK,CAACC,IADY,EAElBD,KAAK,CAACE,OAFY,EAGlBF,KAAK,CAACG,OAHY,EAIlBH,KAAK,CAACI,OAJY,EAKlBJ,KAAK,CAACK,OALY,EAMlBL,KAAK,CAACM,QANY,EAOlBN,KAAK,CAACO,QAPY,EAQlBP,KAAK,CAACQ,QARY,EASlBR,KAAK,CAACS,QATY,EAUlBT,KAAK,CAACU,QAVY,CAAb,GAWH,CACFV,KAAK,CAACW,KADJ,EAEFX,KAAK,CAACY,KAFJ,EAGFZ,KAAK,CAACa,WAHJ,CAXJ;EAgBD,CAlBM,CAAP;AAmBD;;AAED,OAAO,MAAMC,oBAAoB,GAAGxB,eAAe,CAAC;EAClDyB,IAAI,EAAE,sBAD4C;EAGlDC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,KADE;MAERC,OAAO,EAAE,MAAMzB,kBAAkB,CAACD,MAAD;IAFzB,CADL;IAKL2B,QAAQ,EAAEC,OALL;IAMLtB,KAAK,EAAEJ,MANF;IAOL2B,SAAS,EAAE,CAACC,MAAD,EAASC,MAAT;EAPN,CAH2C;EAalDC,KAAK,EAAE;IACL,gBAAiB1B,KAAD,IAAiB;EAD5B,CAb2C;;EAiBlD2B,KAAK,CAAEX,KAAF,QAAmB;IAAA,IAAV;MAAEY;IAAF,CAAU;IACtBpC,SAAS,CAAC;MAAA,SAEA,yBAFA;MAAA,SAGC;QACL+B,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAP;MADnB;IAHD,+BAQFP,KAAK,CAACC,QAAN,CAAenB,GAAf,CAAmB+B,MAAM;MAAA,SACd;IADc,IAErBA,MAAM,CAAC/B,GAAP,CAAWE,KAAK,IAAI;MACpB,MAAM8B,IAAI,GAAGrC,UAAU,CAACO,KAAD,CAAvB;MAEA;QAAA,SAEU,gCAFV;QAAA,WAGa,MAAM8B,IAAI,IAAIF,IAAI,CAAC,cAAD,EAAiBE,IAAjB;MAH/B;QAAA,SAKgB;UAAEC,UAAU,EAAE/B;QAAd;MALhB,IAMQgB,KAAK,CAAChB,KAAN,IAAeX,SAAS,CAAC2B,KAAK,CAAChB,KAAP,EAAc8B,IAAd,CAAxB;QAAA,QACc,SADd;QAAA,QAC6B,UAD7B;QAAA,SAC+CvC,WAAW,CAACS,KAAD,EAAQ,SAAR,CAAX,GAAgC,CAAhC,GAAoC,OAApC,GAA8C;MAD7F,WAEEgC,SARV;IAaD,CAhBC,CAFqB,EAAzB,CARE,IAAD,CAAT;IAiCA,OAAO,EAAP;EACD;;AApDiD,CAAD,CAA5C"}

package/lib/components/VColorPicker/VColorPickerSwatches.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/_variables.scss

@@ -1,20 +1,27 @@
+// VColorPicker
 $color-picker-border-radius: 4px !default;
-$color-picker-elevation: 2 !default;
 $color-picker-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat !default;
-$color-picker-swatch-color-width: 45px !default;
+$color-picker-controls-padding: 16px !default;
+$color-picker-elevation: 2 !default;
+$color-picker-input-font-size: 0.75rem !default;
+$color-picker-input-height: 32px !default;
+$color-picker-input-margin: 8px !default;
+$color-picker-preview-margin-bottom: 24px !default;
+$color-picker-input-margin-bottom: 8px !default;
+
+// VColorPickerSwatch
+$color-picker-swatch-color-border-radius: 2px !default;
 $color-picker-swatch-color-height: 18px !default;
 $color-picker-swatch-color-margin: 2px 4px !default;
-$color-picker-swatch-color-border-radius: 2px !default;
+$color-picker-swatch-color-width: 45px !default;
 $color-picker-swatch-margin-bottom: 10px !default;
 $color-picker-swatches-border-radius: 8px !default;
-$color-picker-canvas-dot-size: 15px !default;
+
+// VColorCanvas
 $color-picker-canvas-dot-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 1), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default;
 $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) !default;
-$color-picker-controls-padding: 16px !default;
-$color-picker-preview-margin-bottom: 24px !default;
-$color-picker-input-height: 32px !default;
-$color-picker-input-font-size: 0.75rem !default;
-$color-picker-input-margin: 8px !default;
-$color-picker-input-margin-bottom: 8px !default;
+$color-picker-canvas-dot-size: 15px !default;
+
+// VColorPickerPreview
 $color-picker-preview-dot-size: 30px !default;
 $color-picker-preview-dot-margin: 24px !default;