vuetify 3.2.1 → 3.2.3

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -9,51 +9,53 @@ import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
 import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
 import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs"; // Composables
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
-import { defineComponent, HSVtoCSS, omit, useRender } from "../../util/index.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useRtl } from "../../composables/locale.mjs"; // Utilities
+import { defineComponent, HSVtoCSS, omit, propsFactory, useRender } from "../../util/index.mjs";
 import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs";
 import { onMounted, ref } from 'vue';
 
 // Types
 
+export const makeVPickerProps = propsFactory({
+  canvasHeight: {
+    type: [String, Number],
+    default: 150
+  },
+  disabled: Boolean,
+  dotSize: {
+    type: [Number, String],
+    default: 10
+  },
+  hideCanvas: Boolean,
+  hideSliders: Boolean,
+  hideInputs: 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
+  },
+  modelValue: {
+    type: [Object, String]
+  },
+  ...omit(makeVSheetProps({
+    width: 300
+  }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
+}, 'v-color-picker');
 export const VColorPicker = defineComponent({
   name: 'VColorPicker',
-  props: {
-    canvasHeight: {
-      type: [String, Number],
-      default: 150
-    },
-    disabled: Boolean,
-    dotSize: {
-      type: [Number, String],
-      default: 10
-    },
-    hideCanvas: Boolean,
-    hideSliders: Boolean,
-    hideInputs: 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
-    },
-    modelValue: {
-      type: [Object, String]
-    },
-    ...omit(makeVSheetProps({
-      width: 300
-    }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
-  },
+  props: makeVPickerProps(),
   emits: {
     'update:modelValue': color => true,
     'update:mode': mode => true
@@ -76,6 +78,9 @@ export const VColorPicker = defineComponent({
       if (!v) return null;
       return extractColor(v, props.modelValue);
     });
+    const {
+      rtlClasses
+    } = useRtl();
     const updateColor = hsva => {
       currentColor.value = hsva;
       lastPickedColor.value = hsva;
@@ -96,7 +101,7 @@ export const VColorPicker = defineComponent({
         "rounded": props.rounded,
         "elevation": props.elevation,
         "theme": props.theme,
-        "class": ['v-color-picker', props.class],
+        "class": ['v-color-picker', rtlClasses.value, props.class],
         "style": [{
           '--v-color-picker-color-hsv': HSVtoCSS({
             ...(currentColor.value ?? nullColor),

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.mjs","names":["makeVSheetProps","VSheet","VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","useProxiedModel","provideDefaults","defineComponent","HSVtoCSS","omit","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","VColorPicker","name","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","VSlider","trackColor","trackFillColor","sheetProps","filterProps","_createVNode","_mergeProps","rounded","elevation","theme","class","a","style","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, omit, 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 { HSV } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\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\n    ...omit(makeVSheetProps({ width: 300 }), [\n      'height',\n      'location',\n      'minHeight',\n      'maxHeight',\n      'minWidth',\n      'maxWidth',\n    ]),\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<HSV | 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: HSV) => {\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    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n\n      return (\n        <VSheet\n          rounded={ props.rounded }\n          elevation={ props.elevation }\n          theme={ props.theme }\n          class={[\n            'v-color-picker',\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          { ...sheetProps }\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\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPicker.mjs","names":["makeVSheetProps","VSheet","VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","useProxiedModel","provideDefaults","useRtl","defineComponent","HSVtoCSS","omit","propsFactory","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","makeVPickerProps","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","VColorPicker","name","props","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","rtlClasses","updateColor","hsva","VSlider","trackColor","trackFillColor","sheetProps","filterProps","_createVNode","_mergeProps","rounded","elevation","theme","class","a","style","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useRtl } from '@/composables/locale'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, omit, propsFactory, 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 { HSV } from '@/util'\n\nexport const makeVPickerProps = propsFactory({\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\n  ...omit(makeVSheetProps({ width: 300 }), [\n    'height',\n    'location',\n    'minHeight',\n    'maxHeight',\n    'minWidth',\n    'maxWidth',\n  ]),\n}, 'v-color-picker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVPickerProps(),\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<HSV | 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    const { rtlClasses } = useRtl()\n\n    const updateColor = (hsva: HSV) => {\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    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const [sheetProps] = VSheet.filterProps(props)\n\n      return (\n        <VSheet\n          rounded={ props.rounded }\n          elevation={ props.elevation }\n          theme={ props.theme }\n          class={[\n            'v-color-picker',\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          { ...sheetProps }\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\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -5,32 +5,33 @@ import "./VColorPickerCanvas.css";
 // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
-import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
+import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from "../../util/index.mjs";
 import { computed, onMounted, ref, watch } from 'vue';
 
 // Types
 
+export const makeVColorPickerCanvasProps = propsFactory({
+  color: {
+    type: Object
+  },
+  disabled: Boolean,
+  dotSize: {
+    type: [Number, String],
+    default: 10
+  },
+  height: {
+    type: [Number, String],
+    default: 150
+  },
+  width: {
+    type: [Number, String],
+    default: 300
+  },
+  ...makeComponentProps()
+}, 'v-color-picker-canvas');
 export const VColorPickerCanvas = defineComponent({
   name: 'VColorPickerCanvas',
-  props: {
-    color: {
-      type: Object
-    },
-    disabled: Boolean,
-    dotSize: {
-      type: [Number, String],
-      default: 10
-    },
-    height: {
-      type: [Number, String],
-      default: 150
-    },
-    width: {
-      type: [Number, String],
-      default: 300
-    },
-    ...makeComponentProps()
-  },
+  props: makeVColorPickerCanvasProps(),
   emits: {
     'update:color': color => true,
     'update:position': hue => true

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","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","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","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","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSV } 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<HSV | 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    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:color': (color: HSV) => 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    const canvasWidth = ref(parseFloat(props.width))\n    const canvasHeight = ref(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\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 { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\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    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\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        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","computed","onMounted","ref","watch","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","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","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSV } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | 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  ...makeComponentProps(),\n}, 'v-color-picker-canvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => 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    const canvasWidth = ref(parseFloat(props.width))\n    const canvasHeight = ref(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\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 { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\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    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\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        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -6,7 +6,7 @@ import "./VColorPickerEdit.css";
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { computed } from 'vue';
-import { defineComponent, useRender } from "../../util/index.mjs";
+import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
 import { modes, nullColor } from "./util/index.mjs"; // Types
 const VColorPickerInput = _ref => {
   let {
@@ -17,23 +17,24 @@ const VColorPickerInput = _ref => {
     "class": "v-color-picker-edit__input"
   }, [_createVNode("input", rest, null), _createVNode("span", null, [label])]);
 };
+export const makeVColorPickerEditProps = propsFactory({
+  color: Object,
+  disabled: 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))
+  },
+  ...makeComponentProps()
+}, 'v-color-picker-edit');
 export const VColorPickerEdit = defineComponent({
   name: 'VColorPickerEdit',
-  props: {
-    color: Object,
-    disabled: 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))
-    },
-    ...makeComponentProps()
-  },
+  props: makeVColorPickerEditProps(),
   emits: {
     'update:color': color => true,
     'update:mode': mode => true

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","makeComponentProps","computed","defineComponent","useRender","modes","nullColor","VColorPickerInput","_ref","label","rest","_createVNode","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","class","style","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes, nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } 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<HSV | 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    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:color': (color: HSV) => 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) : null\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: color && 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 ?? nullColor, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\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\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","makeComponentProps","computed","defineComponent","propsFactory","useRender","modes","nullColor","VColorPickerInput","_ref","label","rest","_createVNode","makeVColorPickerEditProps","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","VColorPickerEdit","name","props","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","class","style","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, propsFactory, useRender } from '@/util'\nimport { modes, nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } 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 makeVColorPickerEditProps = propsFactory({\n  color: Object as PropType<HSV | 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  ...makeComponentProps(),\n}, 'v-color-picker-edit')\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: makeVColorPickerEditProps(),\n\n  emits: {\n    'update:color': (color: HSV) => 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) : null\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: color && 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 ?? nullColor, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\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\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -5,18 +5,19 @@ import "./VColorPickerPreview.css";
 // Components
 import { VSlider } from "../VSlider/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
-import { defineComponent, HSVtoCSS, useRender } from "../../util/index.mjs";
+import { defineComponent, HSVtoCSS, propsFactory, useRender } from "../../util/index.mjs";
 import { nullColor } from "./util/index.mjs"; // Types
+export const makeVColorPickerPreviewProps = propsFactory({
+  color: {
+    type: Object
+  },
+  disabled: Boolean,
+  hideAlpha: Boolean,
+  ...makeComponentProps()
+}, 'v-color-picker-preview');
 export const VColorPickerPreview = defineComponent({
   name: 'VColorPickerPreview',
-  props: {
-    color: {
-      type: Object
-    },
-    disabled: Boolean,
-    hideAlpha: Boolean,
-    ...makeComponentProps()
-  },
+  props: makeVColorPickerPreviewProps(),
   emits: {
     'update:color': color => true
   },

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","makeComponentProps","defineComponent","HSVtoCSS","useRender","nullColor","VColorPickerPreview","name","props","color","type","Object","disabled","Boolean","hideAlpha","emits","setup","_ref","emit","_createVNode","class","style","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: {\n    color: {\n      type: Object as PropType<HSV | null>,\n    },\n    disabled: Boolean,\n    hideAlpha: Boolean,\n\n    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:color': (color: HSV) => 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          props.class,\n        ]}\n        style={ props.style }\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(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 ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\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\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,OAAO,gCAEhB;AAAA,SACSC,kBAAkB,2CAE3B;AAAA,SACSC,eAAe,EAAEC,QAAQ,EAAEC,SAAS;AAAA,SACpCC,SAAS,4BAElB;AAIA,OAAO,MAAMC,mBAAmB,GAAGJ,eAAe,CAAC;EACjDK,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IACR,CAAC;IACDC,QAAQ,EAAEC,OAAO;IACjBC,SAAS,EAAED,OAAO;IAElB,GAAGZ,kBAAkB;EACvB,CAAC;EAEDc,KAAK,EAAE;IACL,cAAc,EAAGN,KAAU,IAAK;EAClC,CAAC;EAEDO,KAAKA,CAAER,KAAK,EAAAS,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBb,SAAS,CAAC,MAAAe,YAAA;MAAA,SAEC,CACL,wBAAwB,EACxB;QACE,oCAAoC,EAAEX,KAAK,CAACM;MAC9C,CAAC,EACDN,KAAK,CAACY,KAAK,CACZ;MAAA,SACOZ,KAAK,CAACa;IAAK,IAAAF,YAAA;MAAA,SAER;IAA6B,IAAAA,YAAA;MAAA,SAC1B;QAAEG,UAAU,EAAEnB,QAAQ,CAACK,KAAK,CAACC,KAAK,IAAIJ,SAAS;MAAE;IAAC,YAAAc,YAAA;MAAA,SAGrD;IAAiC,IAAAA,YAAA,CAAAnB,OAAA;MAAA,SAElC,2DAA2D;MAAA,cACpDQ,KAAK,CAACC,KAAK,EAAEc,CAAC;MAAA,uBACLA,CAAC,IAAIL,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEkB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC;MAAA,OACF,CAAC;MAAA,OACD,GAAG;MAAA,YACEf,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,UAItB,CAACJ,KAAK,CAACM,SAAS,IAAAK,YAAA,CAAAnB,OAAA;MAAA,SAER,6DAA6D;MAAA,cACtDQ,KAAK,CAACC,KAAK,EAAEe,CAAC,IAAI,CAAC;MAAA,uBACVA,CAAC,IAAIN,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIV,KAAK,CAACC,KAAK,IAAIJ,SAAS,CAAC;QAAEmB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC,GAAG,GAAG;MAAA,OACR,CAAC;MAAA,OACD,CAAC;MAAA,YACIhB,KAAK,CAACI,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,QAGzB,IAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","makeComponentProps","defineComponent","HSVtoCSS","propsFactory","useRender","nullColor","makeVColorPickerPreviewProps","color","type","Object","disabled","Boolean","hideAlpha","VColorPickerPreview","name","props","emits","setup","_ref","emit","_createVNode","class","style","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, propsFactory, useRender } from '@/util'\nimport { nullColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerPreviewProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  hideAlpha: Boolean,\n\n  ...makeComponentProps(),\n}, 'v-color-picker-preview')\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: makeVColorPickerPreviewProps(),\n\n  emits: {\n    'update:color': (color: HSV) => 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          props.class,\n        ]}\n        style={ props.style }\n      >\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(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 ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\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\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,OAAO,gCAEhB;AAAA,SACSC,kBAAkB,2CAE3B;AAAA,SACSC,eAAe,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,SAAS;AAAA,SAClDC,SAAS,4BAElB;AAIA,OAAO,MAAMC,4BAA4B,GAAGH,YAAY,CAAC;EACvDI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACDC,QAAQ,EAAEC,OAAO;EACjBC,SAAS,EAAED,OAAO;EAElB,GAAGX,kBAAkB;AACvB,CAAC,EAAE,wBAAwB,CAAC;AAE5B,OAAO,MAAMa,mBAAmB,GAAGZ,eAAe,CAAC;EACjDa,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAET,4BAA4B,EAAE;EAErCU,KAAK,EAAE;IACL,cAAc,EAAGT,KAAU,IAAK;EAClC,CAAC;EAEDU,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBd,SAAS,CAAC,MAAAgB,YAAA;MAAA,SAEC,CACL,wBAAwB,EACxB;QACE,oCAAoC,EAAEL,KAAK,CAACH;MAC9C,CAAC,EACDG,KAAK,CAACM,KAAK,CACZ;MAAA,SACON,KAAK,CAACO;IAAK,IAAAF,YAAA;MAAA,SAER;IAA6B,IAAAA,YAAA;MAAA,SAC1B;QAAEG,UAAU,EAAErB,QAAQ,CAACa,KAAK,CAACR,KAAK,IAAIF,SAAS;MAAE;IAAC,YAAAe,YAAA;MAAA,SAGrD;IAAiC,IAAAA,YAAA,CAAArB,OAAA;MAAA,SAElC,2DAA2D;MAAA,cACpDgB,KAAK,CAACR,KAAK,EAAEiB,CAAC;MAAA,uBACLA,CAAC,IAAIL,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIJ,KAAK,CAACR,KAAK,IAAIF,SAAS,CAAC;QAAEmB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC;MAAA,OACF,CAAC;MAAA,OACD,GAAG;MAAA,YACET,KAAK,CAACL,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,UAItB,CAACK,KAAK,CAACH,SAAS,IAAAQ,YAAA,CAAArB,OAAA;MAAA,SAER,6DAA6D;MAAA,cACtDgB,KAAK,CAACR,KAAK,EAAEkB,CAAC,IAAI,CAAC;MAAA,uBACVA,CAAC,IAAIN,IAAI,CAAC,cAAc,EAAE;QAAE,IAAIJ,KAAK,CAACR,KAAK,IAAIF,SAAS,CAAC;QAAEoB;MAAE,CAAC,CAAC;MAAA,QAC9E,CAAC,GAAG,GAAG;MAAA,OACR,CAAC;MAAA,OACD,CAAC;MAAA,YACIV,KAAK,CAACL,QAAQ;MAAA,aACb,EAAE;MAAA,aACF,CAAC;MAAA,kBACE,OAAO;MAAA;IAAA,QAGzB,IAGN,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/VColorPickerSwatches.mjs

@@ -5,9 +5,19 @@ import "./VColorPickerSwatches.css";
 // Components
 import { VIcon } from "../VIcon/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
-import { convertToUnit, deepEqual, defineComponent, getContrast, useRender } from "../../util/index.mjs";
+import { convertToUnit, deepEqual, defineComponent, getContrast, propsFactory, useRender } from "../../util/index.mjs";
 import { parseColor } from "./util/index.mjs";
 import colors from "../../util/colors.mjs"; // Types
+export const makeVColorPickerSwatchesProps = propsFactory({
+  swatches: {
+    type: Array,
+    default: () => parseDefaultColors(colors)
+  },
+  disabled: Boolean,
+  color: Object,
+  maxHeight: [Number, String],
+  ...makeComponentProps()
+}, 'v-color-picker-swatches');
 function parseDefaultColors(colors) {
   return Object.keys(colors).map(key => {
     const color = colors[key];
@@ -16,16 +26,7 @@ function parseDefaultColors(colors) {
 }
 export const VColorPickerSwatches = defineComponent({
   name: 'VColorPickerSwatches',
-  props: {
-    swatches: {
-      type: Array,
-      default: () => parseDefaultColors(colors)
-    },
-    disabled: Boolean,
-    color: Object,
-    maxHeight: [Number, String],
-    ...makeComponentProps()
-  },
+  props: makeVColorPickerSwatchesProps(),
   emits: {
     'update:color': color => true
   },

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","makeComponentProps","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","_ref","emit","_createVNode","class","style","swatch","hsva","onClick","background","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\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 { HSV } 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<HSV | null>,\n    maxHeight: [Number, String],\n\n    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\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\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK,8BAEd;AAAA,SACSC,kBAAkB,2CAE3B;AAAA,SACSC,aAAa,EAAEC,SAAS,EAAEC,eAAe,EAAEC,WAAW,EAAEC,SAAS;AAAA,SACjEC,UAAU;AAAA,OACZC,MAAM,+BAEb;AAIA,SAASC,kBAAkBA,CAAED,MAA8C,EAAE;EAC3E,OAAOE,MAAM,CAACC,IAAI,CAACH,MAAM,CAAC,CAACI,GAAG,CAACC,GAAG,IAAI;IACpC,MAAMC,KAAK,GAAGN,MAAM,CAACK,GAAG,CAAC;IACzB,OAAOC,KAAK,CAACC,IAAI,GAAG,CAClBD,KAAK,CAACC,IAAI,EACVD,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,OAAO,EACbH,KAAK,CAACI,OAAO,EACbJ,KAAK,CAACK,OAAO,EACbL,KAAK,CAACM,QAAQ,EACdN,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACS,QAAQ,EACdT,KAAK,CAACU,QAAQ,CACf,GAAG,CACFV,KAAK,CAACW,KAAK,EACXX,KAAK,CAACY,KAAK,EACXZ,KAAK,CAACa,WAAW,CAClB;EACH,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMC,oBAAoB,GAAGxB,eAAe,CAAC;EAClDyB,IAAI,EAAE,sBAAsB;EAE5BC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,KAA6B;MACnCC,OAAO,EAAEA,CAAA,KAAMzB,kBAAkB,CAACD,MAAM;IAC1C,CAAC;IACD2B,QAAQ,EAAEC,OAAO;IACjBtB,KAAK,EAAEJ,MAA8B;IACrC2B,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IAE3B,GAAGtC,kBAAkB;EACvB,CAAC;EAEDuC,KAAK,EAAE;IACL,cAAc,EAAG1B,KAAU,IAAK;EAClC,CAAC;EAED2B,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBpC,SAAS,CAAC,MAAAsC,YAAA;MAAA,SAEC,CACL,yBAAyB,EACzBd,KAAK,CAACe,KAAK,CACZ;MAAA,SACM,CACL;QAAER,SAAS,EAAEnC,aAAa,CAAC4B,KAAK,CAACO,SAAS;MAAE,CAAC,EAC7CP,KAAK,CAACgB,KAAK;IACZ,IAAAF,YAAA,eAGGd,KAAK,CAACC,QAAQ,CAACnB,GAAG,CAACmC,MAAM,IAAAH,YAAA;MAAA,SACd;IAAiC,IACxCG,MAAM,CAACnC,GAAG,CAACE,KAAK,IAAI;MACpB,MAAMkC,IAAI,GAAGzC,UAAU,CAACO,KAAK,CAAC;MAE9B,OAAA8B,YAAA;QAAA,SAEU,gCAAgC;QAAA,WAC5BK,CAAA,KAAMD,IAAI,IAAIL,IAAI,CAAC,cAAc,EAAEK,IAAI;MAAC,IAAAJ,YAAA;QAAA,SAEtC;UAAEM,UAAU,EAAEpC;QAAM;MAAC,IAC7BgB,KAAK,CAAChB,KAAK,IAAIX,SAAS,CAAC2B,KAAK,CAAChB,KAAK,EAAEkC,IAAI,CAAC,GAAAJ,YAAA,CAAA5C,KAAA;QAAA,QAC7B,SAAS;QAAA,QAAM,UAAU;QAAA,SAASK,WAAW,CAACS,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WACnGqC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerSwatches.mjs","names":["VIcon","makeComponentProps","convertToUnit","deepEqual","defineComponent","getContrast","propsFactory","useRender","parseColor","colors","makeVColorPickerSwatchesProps","swatches","type","Array","default","parseDefaultColors","disabled","Boolean","color","Object","maxHeight","Number","String","keys","map","key","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","emits","setup","_ref","emit","_createVNode","class","style","swatch","hsva","onClick","background","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { convertToUnit, deepEqual, defineComponent, getContrast, propsFactory, useRender } from '@/util'\nimport { parseColor } from './util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { HSV } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeVColorPickerSwatchesProps = propsFactory({\n  swatches: {\n    type: Array as PropType<string[][]>,\n    default: () => parseDefaultColors(colors),\n  },\n  disabled: Boolean,\n  color: Object as PropType<HSV | null>,\n  maxHeight: [Number, String],\n\n  ...makeComponentProps(),\n}, 'v-color-picker-swatches')\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: makeVColorPickerSwatchesProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\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\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,KAAK,8BAEd;AAAA,SACSC,kBAAkB,2CAE3B;AAAA,SACSC,aAAa,EAAEC,SAAS,EAAEC,eAAe,EAAEC,WAAW,EAAEC,YAAY,EAAEC,SAAS;AAAA,SAC/EC,UAAU;AAAA,OACZC,MAAM,+BAEb;AAIA,OAAO,MAAMC,6BAA6B,GAAGJ,YAAY,CAAC;EACxDK,QAAQ,EAAE;IACRC,IAAI,EAAEC,KAA6B;IACnCC,OAAO,EAAEA,CAAA,KAAMC,kBAAkB,CAACN,MAAM;EAC1C,CAAC;EACDO,QAAQ,EAAEC,OAAO;EACjBC,KAAK,EAAEC,MAA8B;EACrCC,SAAS,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAE3B,GAAGrB,kBAAkB;AACvB,CAAC,EAAE,yBAAyB,CAAC;AAE7B,SAASc,kBAAkBA,CAAEN,MAA8C,EAAE;EAC3E,OAAOU,MAAM,CAACI,IAAI,CAACd,MAAM,CAAC,CAACe,GAAG,CAACC,GAAG,IAAI;IACpC,MAAMP,KAAK,GAAGT,MAAM,CAACgB,GAAG,CAAC;IACzB,OAAOP,KAAK,CAACQ,IAAI,GAAG,CAClBR,KAAK,CAACQ,IAAI,EACVR,KAAK,CAACS,OAAO,EACbT,KAAK,CAACU,OAAO,EACbV,KAAK,CAACW,OAAO,EACbX,KAAK,CAACY,OAAO,EACbZ,KAAK,CAACa,QAAQ,EACdb,KAAK,CAACc,QAAQ,EACdd,KAAK,CAACe,QAAQ,EACdf,KAAK,CAACgB,QAAQ,EACdhB,KAAK,CAACiB,QAAQ,CACf,GAAG,CACFjB,KAAK,CAACkB,KAAK,EACXlB,KAAK,CAACmB,KAAK,EACXnB,KAAK,CAACoB,WAAW,CAClB;EACH,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMC,oBAAoB,GAAGnC,eAAe,CAAC;EAClDoC,IAAI,EAAE,sBAAsB;EAE5BC,KAAK,EAAE/B,6BAA6B,EAAE;EAEtCgC,KAAK,EAAE;IACL,cAAc,EAAGxB,KAAU,IAAK;EAClC,CAAC;EAEDyB,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpBrC,SAAS,CAAC,MAAAuC,YAAA;MAAA,SAEC,CACL,yBAAyB,EACzBL,KAAK,CAACM,KAAK,CACZ;MAAA,SACM,CACL;QAAE3B,SAAS,EAAElB,aAAa,CAACuC,KAAK,CAACrB,SAAS;MAAE,CAAC,EAC7CqB,KAAK,CAACO,KAAK;IACZ,IAAAF,YAAA,eAGGL,KAAK,CAAC9B,QAAQ,CAACa,GAAG,CAACyB,MAAM,IAAAH,YAAA;MAAA,SACd;IAAiC,IACxCG,MAAM,CAACzB,GAAG,CAACN,KAAK,IAAI;MACpB,MAAMgC,IAAI,GAAG1C,UAAU,CAACU,KAAK,CAAC;MAE9B,OAAA4B,YAAA;QAAA,SAEU,gCAAgC;QAAA,WAC5BK,CAAA,KAAMD,IAAI,IAAIL,IAAI,CAAC,cAAc,EAAEK,IAAI;MAAC,IAAAJ,YAAA;QAAA,SAEtC;UAAEM,UAAU,EAAElC;QAAM;MAAC,IAC7BuB,KAAK,CAACvB,KAAK,IAAIf,SAAS,CAACsC,KAAK,CAACvB,KAAK,EAAEgC,IAAI,CAAC,GAAAJ,YAAA,CAAA9C,KAAA;QAAA,QAC7B,SAAS;QAAA,QAAM,UAAU;QAAA,SAASK,WAAW,CAACa,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG;MAAO,WACnGmC,SAAS;IAKrB,CAAC,CAAC,EAEL,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VColorPicker/index.d.ts

@@ -18,11 +18,11 @@ declare const VColorPicker: {
             rounded: string | number | boolean;
             dotSize: string | number;
             modes: string[];
+            canvasHeight: string | number;
             hideCanvas: boolean;
             hideSliders: boolean;
             hideInputs: boolean;
             showSwatches: boolean;
-            canvasHeight: string | number;
             swatchesMaxHeight: string | number;
         }> & Omit<Readonly<vue.ExtractPropTypes<{
             width: {
@@ -87,7 +87,7 @@ declare const VColorPicker: {
         }>> & {
             "onUpdate:modelValue"?: ((color: any) => any) | undefined;
             "onUpdate:mode"?: ((mode: string) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "width" | "style" | "disabled" | "tag" | "mode" | "rounded" | "dotSize" | "modes" | "hideCanvas" | "hideSliders" | "hideInputs" | "showSwatches" | "canvasHeight" | "swatchesMaxHeight">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "width" | "style" | "disabled" | "tag" | "mode" | "rounded" | "dotSize" | "modes" | "canvasHeight" | "hideCanvas" | "hideSliders" | "hideInputs" | "showSwatches" | "swatchesMaxHeight">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -176,11 +176,11 @@ declare const VColorPicker: {
             rounded: string | number | boolean;
             dotSize: string | number;
             modes: string[];
+            canvasHeight: string | number;
             hideCanvas: boolean;
             hideSliders: boolean;
             hideInputs: boolean;
             showSwatches: boolean;
-            canvasHeight: string | number;
             swatchesMaxHeight: string | number;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -344,11 +344,11 @@ declare const VColorPicker: {
     rounded: string | number | boolean;
     dotSize: string | number;
     modes: string[];
+    canvasHeight: string | number;
     hideCanvas: boolean;
     hideSliders: boolean;
     hideInputs: boolean;
     showSwatches: boolean;
-    canvasHeight: string | number;
     swatchesMaxHeight: string | number;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     width: {

package/lib/components/VColorPicker/util/index.mjs

@@ -99,7 +99,7 @@ const rgba = {
       let {
         a
       } = _ref;
-      return a ? Math.round(a * 100) / 100 : 1;
+      return a != null ? Math.round(a * 100) / 100 : 1;
     },
     getColor: (c, v) => ({
       ...c,
@@ -153,7 +153,7 @@ const hsla = {
       let {
         a
       } = _ref2;
-      return a ? Math.round(a * 100) / 100 : 1;
+      return a != null ? Math.round(a * 100) / 100 : 1;
     },
     getColor: (c, v) => ({
       ...c,