vuetify 3.3.0 → 3.3.2

package/lib/components/VChipGroup/index.d.mts

@@ -28,14 +28,14 @@ declare const VChipGroup: {
             class?: any;
             mandatory?: boolean | "force" | undefined;
             $children?: vue.VNodeChild | {
-                default?: ((args_0: {
+                default?: ((arg: {
                     isSelected: (id: number) => boolean;
                     select: (id: number, value: boolean) => void;
                     next: () => void;
                     prev: () => void;
                     selected: readonly number[];
                 }) => vue.VNodeChild) | undefined;
-            } | ((args_0: {
+            } | ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -46,7 +46,7 @@ declare const VChipGroup: {
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
             theme?: string | undefined;
-            "v-slot:default"?: false | ((args_0: {
+            "v-slot:default"?: false | ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -54,16 +54,7 @@ declare const VChipGroup: {
                 selected: readonly number[];
             }) => vue.VNodeChild) | undefined;
             'v-slots'?: {
-                default?: false | ((args_0: {
-                    isSelected: (id: number) => boolean;
-                    select: (id: number, value: boolean) => void;
-                    next: () => void;
-                    prev: () => void;
-                    selected: readonly number[];
-                }) => vue.VNodeChild) | undefined;
-            } | undefined;
-            $slots?: {
-                default?: ((args_0: {
+                default?: false | ((arg: {
                     isSelected: (id: number) => boolean;
                     select: (id: number, value: boolean) => void;
                     next: () => void;
@@ -118,7 +109,7 @@ declare const VChipGroup: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: ((args_0: {
+            default?: ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -151,14 +142,14 @@ declare const VChipGroup: {
             modelValue?: any;
         } & {
             $children?: vue.VNodeChild | {
-                default?: ((args_0: {
+                default?: ((arg: {
                     isSelected: (id: number) => boolean;
                     select: (id: number, value: boolean) => void;
                     next: () => void;
                     prev: () => void;
                     selected: readonly number[];
                 }) => vue.VNodeChild) | undefined;
-            } | ((args_0: {
+            } | ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -166,7 +157,7 @@ declare const VChipGroup: {
                 selected: readonly number[];
             }) => vue.VNodeChild);
             'v-slots'?: {
-                default?: false | ((args_0: {
+                default?: false | ((arg: {
                     isSelected: (id: number) => boolean;
                     select: (id: number, value: boolean) => void;
                     next: () => void;
@@ -175,23 +166,13 @@ declare const VChipGroup: {
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | ((args_0: {
+            "v-slot:default"?: false | ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
                 prev: () => void;
                 selected: readonly number[];
             }) => vue.VNodeChild) | undefined;
-        } & {
-            $slots?: {
-                default?: ((args_0: {
-                    isSelected: (id: number) => boolean;
-                    select: (id: number, value: boolean) => void;
-                    next: () => void;
-                    prev: () => void;
-                    selected: readonly number[];
-                }) => vue.VNodeChild) | undefined;
-            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -208,7 +189,7 @@ declare const VChipGroup: {
             selectedClass: string;
             valueComparator: typeof deepEqual;
         }, {}, string, vue.SlotsType<Partial<{
-            default: (args_0: {
+            default: (arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -256,14 +237,14 @@ declare const VChipGroup: {
         modelValue?: any;
     } & {
         $children?: vue.VNodeChild | {
-            default?: ((args_0: {
+            default?: ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
                 prev: () => void;
                 selected: readonly number[];
             }) => vue.VNodeChild) | undefined;
-        } | ((args_0: {
+        } | ((arg: {
             isSelected: (id: number) => boolean;
             select: (id: number, value: boolean) => void;
             next: () => void;
@@ -271,7 +252,7 @@ declare const VChipGroup: {
             selected: readonly number[];
         }) => vue.VNodeChild);
         'v-slots'?: {
-            default?: false | ((args_0: {
+            default?: false | ((arg: {
                 isSelected: (id: number) => boolean;
                 select: (id: number, value: boolean) => void;
                 next: () => void;
@@ -280,23 +261,13 @@ declare const VChipGroup: {
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | ((args_0: {
+        "v-slot:default"?: false | ((arg: {
             isSelected: (id: number) => boolean;
             select: (id: number, value: boolean) => void;
             next: () => void;
             prev: () => void;
             selected: readonly number[];
         }) => vue.VNodeChild) | undefined;
-    } & {
-        $slots?: {
-            default?: ((args_0: {
-                isSelected: (id: number) => boolean;
-                select: (id: number, value: boolean) => void;
-                next: () => void;
-                prev: () => void;
-                selected: readonly number[];
-            }) => vue.VNodeChild) | undefined;
-        } | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
@@ -322,14 +293,14 @@ declare const VChipGroup: {
     modelValue?: any;
 } & {
     $children?: vue.VNodeChild | {
-        default?: ((args_0: {
+        default?: ((arg: {
             isSelected: (id: number) => boolean;
             select: (id: number, value: boolean) => void;
             next: () => void;
             prev: () => void;
             selected: readonly number[];
         }) => vue.VNodeChild) | undefined;
-    } | ((args_0: {
+    } | ((arg: {
         isSelected: (id: number) => boolean;
         select: (id: number, value: boolean) => void;
         next: () => void;
@@ -337,7 +308,7 @@ declare const VChipGroup: {
         selected: readonly number[];
     }) => vue.VNodeChild);
     'v-slots'?: {
-        default?: false | ((args_0: {
+        default?: false | ((arg: {
             isSelected: (id: number) => boolean;
             select: (id: number, value: boolean) => void;
             next: () => void;
@@ -346,23 +317,13 @@ declare const VChipGroup: {
         }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | ((args_0: {
+    "v-slot:default"?: false | ((arg: {
         isSelected: (id: number) => boolean;
         select: (id: number, value: boolean) => void;
         next: () => void;
         prev: () => void;
         selected: readonly number[];
     }) => vue.VNodeChild) | undefined;
-} & {
-    $slots?: {
-        default?: ((args_0: {
-            isSelected: (id: number) => boolean;
-            select: (id: number, value: boolean) => void;
-            next: () => void;
-            prev: () => void;
-            selected: readonly number[];
-        }) => vue.VNodeChild) | undefined;
-    } | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -379,7 +340,7 @@ declare const VChipGroup: {
     selectedClass: string;
     valueComparator: typeof deepEqual;
 }, {}, string, vue.SlotsType<Partial<{
-    default: (args_0: {
+    default: (arg: {
         isSelected: (id: number) => boolean;
         select: (id: number, value: boolean) => void;
         next: () => void;

package/lib/components/VCode/index.d.mts

@@ -24,9 +24,6 @@ declare const VCode: {
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -95,10 +92,6 @@ declare const VCode: {
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & {
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
         }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
@@ -142,10 +135,6 @@ declare const VCode: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    } & {
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
     } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>> & {} & vue.ComponentCustomProperties & {};
@@ -166,10 +155,6 @@ declare const VCode: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-} & {
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {

package/lib/components/VCode/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["createSimpleFunctional","VCode"],"sources":["../../../src/components/VCode/index.ts"],"sourcesContent":["import './VCode.sass'\n\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCode = createSimpleFunctional('v-code')\n\nexport type VCode = InstanceType<typeof VCode>\n"],"mappings":"AAAA;AAAqB,SAEZA,sBAAsB;AAE/B,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"index.mjs","names":["createSimpleFunctional","VCode"],"sources":["../../../src/components/VCode/index.ts"],"sourcesContent":["// Styles\nimport './VCode.sass'\n\n// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCode = createSimpleFunctional('v-code')\n\nexport type VCode = InstanceType<typeof VCode>\n"],"mappings":"AAAA;AACA;;AAEA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,KAAK,GAAGD,sBAAsB,CAAC,QAAQ,CAAC"}

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -3,21 +3,18 @@ import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import "./VColorPicker.css";
 
 // Components
-import { makeVSheetProps, VSheet } from "../VSheet/VSheet.mjs";
 import { VColorPickerCanvas } from "./VColorPickerCanvas.mjs";
 import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
 import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
-import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs"; // Composables
-import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs";
+import { makeVSheetProps, VSheet } from "../VSheet/VSheet.mjs"; // Composables
 import { provideDefaults } from "../../composables/defaults.mjs";
-import { useRtl } from "../../composables/locale.mjs"; // Utilities
-import { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from "../../util/index.mjs";
-import { extractColor, modes, nullColor } from "./util/index.mjs";
+import { useRtl } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { onMounted, ref } from 'vue';
-
-// Types
-
-export const makeVPickerProps = propsFactory({
+import { extractColor, modes, nullColor } from "./util/index.mjs";
+import { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from "../../util/index.mjs"; // Types
+export const makeVColorPickerProps = propsFactory({
   canvasHeight: {
     type: [String, Number],
     default: 150
@@ -52,10 +49,10 @@ export const makeVPickerProps = propsFactory({
   ...omit(makeVSheetProps({
     width: 300
   }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
-}, 'v-color-picker');
+}, 'VColorPicker');
 export const VColorPicker = defineComponent({
   name: 'VColorPicker',
-  props: makeVPickerProps(),
+  props: makeVColorPickerProps(),
   emits: {
     'update:modelValue': color => true,
     'update:mode': mode => true
@@ -64,6 +61,7 @@ export const VColorPicker = defineComponent({
     const mode = useProxiedModel(props, 'mode');
     const lastPickedColor = ref(null);
     const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
+      if (v == null || v === '') return null;
       let c;
       try {
         c = RGBtoHSV(parseColor(v));

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.mjs","names":["makeVSheetProps","VSheet","VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","useProxiedModel","provideDefaults","useRtl","consoleWarn","defineComponent","HSVtoCSS","omit","parseColor","propsFactory","RGBtoHSV","useRender","extractColor","modes","nullColor","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","err","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 { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\nimport { extractColor, modes, nullColor } from './util'\nimport { onMounted, ref } from 'vue'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, 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 as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\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<DeepReadonly<Color[][]>>,\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: keyof typeof modes) => 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: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\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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"}
+{"version":3,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVSheetProps","VSheet","provideDefaults","useRtl","useProxiedModel","onMounted","ref","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","omit","parseColor","propsFactory","RGBtoHSV","useRender","makeVColorPickerProps","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","err","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 { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { onMounted, ref } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerProps = 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 as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\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<DeepReadonly<Color[][]>>,\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}, 'VColorPicker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVColorPickerProps(),\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: keyof typeof modes) => 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        if (v == null || v === '') return null\n\n        let c: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\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,11 +5,8 @@ import "./VColorPickerCanvas.css";
 // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
-import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from "../../util/index.mjs";
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
-
-// Types
-
+import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVColorPickerCanvasProps = propsFactory({
   color: {
     type: Object
@@ -28,7 +25,7 @@ export const makeVColorPickerCanvasProps = propsFactory({
     default: 300
   },
   ...makeComponentProps()
-}, 'v-color-picker-canvas');
+}, 'VColorPickerCanvas');
 export const VColorPickerCanvas = defineComponent({
   name: 'VColorPickerCanvas',
   props: makeVColorPickerCanvasProps(),

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","computed","onMounted","ref","shallowRef","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, shallowRef, 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 = shallowRef(false)\n    const isOutsideUpdate = shallowRef(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 = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(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","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","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 { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\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}, 'VColorPickerCanvas')\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 = shallowRef(false)\n    const isOutsideUpdate = shallowRef(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 = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(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,8 +6,8 @@ import "./VColorPickerEdit.css";
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { computed } from 'vue';
-import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
-import { modes, nullColor } from "./util/index.mjs"; // Types
+import { modes, nullColor } from "./util/index.mjs";
+import { defineComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 const VColorPickerInput = _ref => {
   let {
     label,
@@ -31,7 +31,7 @@ export const makeVColorPickerEditProps = propsFactory({
     validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
   },
   ...makeComponentProps()
-}, 'v-color-picker-edit');
+}, 'VColorPickerEdit');
 export const VColorPickerEdit = defineComponent({
   name: 'VColorPickerEdit',
   props: makeVColorPickerEditProps(),

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

@@ -1 +1 @@
-{"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 as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\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: keyof typeof modes) => 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","modes","nullColor","defineComponent","propsFactory","useRender","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 { modes, nullColor } from './util'\nimport { defineComponent, propsFactory, useRender } 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 as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\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}, 'VColorPickerEdit')\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: keyof typeof modes) => 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,8 +5,8 @@ import "./VColorPickerPreview.css";
 // Components
 import { VSlider } from "../VSlider/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
-import { defineComponent, HSVtoCSS, propsFactory, useRender } from "../../util/index.mjs";
-import { nullColor } from "./util/index.mjs"; // Types
+import { nullColor } from "./util/index.mjs";
+import { defineComponent, HSVtoCSS, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVColorPickerPreviewProps = propsFactory({
   color: {
     type: Object
@@ -14,7 +14,7 @@ export const makeVColorPickerPreviewProps = propsFactory({
   disabled: Boolean,
   hideAlpha: Boolean,
   ...makeComponentProps()
-}, 'v-color-picker-preview');
+}, 'VColorPickerPreview');
 export const VColorPickerPreview = defineComponent({
   name: 'VColorPickerPreview',
   props: makeVColorPickerPreviewProps(),

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"VColorPickerPreview.mjs","names":["VSlider","makeComponentProps","nullColor","defineComponent","HSVtoCSS","propsFactory","useRender","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 { nullColor } from './util'\nimport { defineComponent, HSVtoCSS, propsFactory, useRender } 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}, 'VColorPickerPreview')\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,SAAS;AAAA,SACTC,eAAe,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,SAAS,gCAE3D;AAIA,OAAO,MAAMC,4BAA4B,GAAGF,YAAY,CAAC;EACvDG,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACDC,QAAQ,EAAEC,OAAO;EACjBC,SAAS,EAAED,OAAO;EAElB,GAAGX,kBAAkB;AACvB,CAAC,EAAE,qBAAqB,CAAC;AAEzB,OAAO,MAAMa,mBAAmB,GAAGX,eAAe,CAAC;EACjDY,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;IACpBb,SAAS,CAAC,MAAAe,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,EAAEpB,QAAQ,CAACY,KAAK,CAACR,KAAK,IAAIN,SAAS;MAAE;IAAC,YAAAmB,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,IAAIN,SAAS,CAAC;QAAEuB;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,IAAIN,SAAS,CAAC;QAAEwB;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

@@ -16,7 +16,7 @@ export const makeVColorPickerSwatchesProps = propsFactory({
   color: Object,
   maxHeight: [Number, String],
   ...makeComponentProps()
-}, 'v-color-picker-swatches');
+}, 'VColorPickerSwatches');
 function parseDefaultColors(colors) {
   return Object.keys(colors).map(key => {
     const color = colors[key];