@vuetify/nightly 3.2.0-dev-20230214.0 → 3.2.0-dev-20230322.0

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

@@ -1,8 +1,164 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType } from 'vue';
+
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
 
 declare function deepEqual(a: any, b: any): boolean;
 
-declare const VChipGroup: vue.DefineComponent<{
+declare const VChipGroup: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            filter: boolean;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            column: boolean;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: any;
+            selectedClass: string;
+            valueComparator: typeof deepEqual;
+        }> & Omit<{
+            filter: boolean;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            column: boolean;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            selectedClass: string;
+            valueComparator: typeof deepEqual;
+        } & {
+            max?: number | undefined;
+            color?: string | undefined;
+            mandatory?: boolean | "force" | undefined;
+            theme?: string | undefined;
+            modelValue?: any;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "filter" | "disabled" | "multiple" | "tag" | "column" | "variant" | "modelValue" | "selectedClass" | "valueComparator">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: "update:modelValue", value: any) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            filter: boolean;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            column: boolean;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            selectedClass: string;
+            valueComparator: typeof deepEqual;
+        } & {
+            max?: number | undefined;
+            color?: string | undefined;
+            mandatory?: boolean | "force" | undefined;
+            theme?: string | undefined;
+            modelValue?: any;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'update:modelValue': (value: any) => boolean;
+        }, string, {
+            filter: boolean;
+            disabled: boolean;
+            multiple: boolean;
+            tag: string;
+            column: boolean;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: any;
+            selectedClass: string;
+            valueComparator: typeof deepEqual;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        filter: boolean;
+        disabled: boolean;
+        multiple: boolean;
+        tag: string;
+        column: boolean;
+        variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        selectedClass: string;
+        valueComparator: typeof deepEqual;
+    } & {
+        max?: number | undefined;
+        color?: string | undefined;
+        mandatory?: boolean | "force" | undefined;
+        theme?: string | undefined;
+        modelValue?: any;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     filter: boolean;
     disabled: boolean;
     multiple: boolean;
@@ -21,32 +177,9 @@ declare const VChipGroup: vue.DefineComponent<{
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (value: any) => boolean;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
-    filter: boolean;
-    disabled: boolean;
-    multiple: boolean;
-    tag: string;
-    column: boolean;
-    variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-    selectedClass: string;
-    valueComparator: typeof deepEqual;
-} & {
-    max?: number | undefined;
-    color?: string | undefined;
-    mandatory?: boolean | "force" | undefined;
-    theme?: string | undefined;
-    modelValue?: any;
-} & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+    $slots?: {
         default?: (() => vue.VNodeChild) | undefined;
-    };
+    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -54,7 +187,9 @@ declare const VChipGroup: vue.DefineComponent<{
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}, {
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => boolean;
+}, string, {
     filter: boolean;
     disabled: boolean;
     multiple: boolean;
@@ -64,7 +199,73 @@ declare const VChipGroup: vue.DefineComponent<{
     modelValue: any;
     selectedClass: string;
     valueComparator: typeof deepEqual;
-}>;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
+        default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    column: BooleanConstructor;
+    filter: BooleanConstructor;
+    valueComparator: {
+        type: PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+}, vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
+        default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: null;
+        default: undefined;
+    };
+    multiple: BooleanConstructor;
+    mandatory: PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    column: BooleanConstructor;
+    filter: BooleanConstructor;
+    valueComparator: {
+        type: PropType<typeof deepEqual>;
+        default: typeof deepEqual;
+    };
+}>>;
 type VChipGroup = InstanceType<typeof VChipGroup>;
 
 export { VChipGroup };

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

@@ -1,11 +1,111 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
 
-declare const VCode: vue.DefineComponent<{
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
+
+declare const VCode: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            tag: string;
+        }> & Omit<{
+            tag: string;
+        } & {} & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            tag: string;
+        } & {} & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+                default?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            tag: string;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        tag: string;
+    } & {} & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     tag: string;
 } & {} & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -13,20 +113,19 @@ declare const VCode: vue.DefineComponent<{
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     tag: string;
-} & {} & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    tag: {
+        type: StringConstructor;
+        default: string;
     };
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {
-    tag: string;
-}>;
+}, vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>;
 type VCode = InstanceType<typeof VCode>;
 
 export { VCode };

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -11,7 +11,8 @@ import { VSheet } from "../VSheet/index.mjs"; // Composables
 import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
 import { makeThemeProps } from "../../composables/theme.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 import { defineComponent, HSVtoCSS, useRender } from "../../util/index.mjs";
 import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs";
 import { onMounted, ref } from 'vue';
@@ -89,6 +90,13 @@ export const VColorPicker = defineComponent({
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
+    provideDefaults({
+      VSlider: {
+        color: undefined,
+        trackColor: undefined,
+        trackFillColor: undefined
+      }
+    });
     useRender(() => _createVNode(VSheet, {
       "rounded": props.rounded,
       "elevation": props.elevation,

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","VSheet","makeElevationProps","makeRoundedProps","makeThemeProps","useProxiedModel","defineComponent","HSVtoCSS","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","rounded","elevation","theme","a","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { VSheet } from '@/components/VSheet'\n\n// Composables\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, 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    width: {\n      type: [Number, String],\n      default: 300,\n    },\n\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<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    useRender(() => (\n      <VSheet\n        rounded={ props.rounded }\n        elevation={ props.elevation }\n        theme={ props.theme }\n        class={[\n          'v-color-picker',\n        ]}\n        style={{\n          '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n        }}\n        maxWidth={ props.width }\n      >\n        { !props.hideCanvas && (\n          <VColorPickerCanvas\n            key=\"canvas\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            disabled={ props.disabled }\n            dotSize={ props.dotSize }\n            width={ props.width }\n            height={ props.canvasHeight }\n          />\n        ) }\n\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div key=\"controls\" class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                key=\"preview\"\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            ) }\n\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                key=\"edit\"\n                modes={ props.modes }\n                mode={ mode.value }\n                onUpdate:mode={ m => mode.value = m }\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                disabled={ props.disabled }\n              />\n            ) }\n          </div>\n        ) }\n\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            key=\"swatches\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            maxHeight={ props.swatchesMaxHeight }\n            swatches={ props.swatches }\n            disabled={ props.disabled }\n          />\n        ) }\n      </VSheet>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","VSheet","makeElevationProps","makeRoundedProps","makeThemeProps","useProxiedModel","provideDefaults","defineComponent","HSVtoCSS","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","rounded","elevation","theme","a","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { VSheet } from '@/components/VSheet'\n\n// Composables\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { defineComponent, HSVtoCSS, 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    width: {\n      type: [Number, String],\n      default: 300,\n    },\n\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<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      <VSheet\n        rounded={ props.rounded }\n        elevation={ props.elevation }\n        theme={ props.theme }\n        class={[\n          'v-color-picker',\n        ]}\n        style={{\n          '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n        }}\n        maxWidth={ props.width }\n      >\n        { !props.hideCanvas && (\n          <VColorPickerCanvas\n            key=\"canvas\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            disabled={ props.disabled }\n            dotSize={ props.dotSize }\n            width={ props.width }\n            height={ props.canvasHeight }\n          />\n        )}\n\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div key=\"controls\" class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                key=\"preview\"\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            )}\n\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                key=\"edit\"\n                modes={ props.modes }\n                mode={ mode.value }\n                onUpdate:mode={ m => mode.value = m }\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                disabled={ props.disabled }\n              />\n            )}\n          </div>\n        )}\n\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            key=\"swatches\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            maxHeight={ props.swatchesMaxHeight }\n            swatches={ props.swatches }\n            disabled={ props.disabled }\n          />\n        )}\n      </VSheet>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerCanvas.css

@@ -1,7 +1,8 @@
 .v-color-picker-canvas {
+  display: flex;
   position: relative;
   overflow: hidden;
-  contain: strict;
+  contain: content;
 }
 .v-color-picker-canvas__dot {
   position: absolute;

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -2,7 +2,8 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VColorPickerCanvas.css";
 
-// Utilities
+// Composables
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
 import { computed, onMounted, ref, watch } from 'vue';
 
@@ -55,6 +56,19 @@ export const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
+    const canvasWidth = ref(parseFloat(props.width));
+    const canvasHeight = ref(parseFloat(props.height));
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!resizeRef.value?.offsetParent) return;
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      canvasWidth.value = width;
+      canvasHeight.value = height;
+    });
     function updateDotPosition(x, y, rect) {
       const {
         left,
@@ -99,18 +113,14 @@ export const VColorPickerCanvas = defineComponent({
         return;
       }
       if (!canvasRef.value) return;
-      const {
-        width,
-        height
-      } = canvasRef.value.getBoundingClientRect();
       const {
         x,
         y
       } = dotPosition.value;
       emit('update:color', {
         h: props.color?.h ?? 0,
-        s: clamp(x, 0, width) / width,
-        v: 1 - clamp(y, 0, height) / height,
+        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
+        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
         a: props.color?.a ?? 1
       });
     });
@@ -133,16 +143,27 @@ export const VColorPickerCanvas = defineComponent({
     watch(() => props.color?.h, updateCanvas, {
       immediate: true
     });
+    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {
+      updateCanvas();
+      dotPosition.value = {
+        x: dotPosition.value.x * newVal[0] / oldVal[0],
+        y: dotPosition.value.y * newVal[1] / oldVal[1]
+      };
+    }, {
+      flush: 'post'
+    });
     watch(() => props.color, () => {
       if (isInteracting.value) {
         isInteracting.value = false;
         return;
       }
-      if (!props.color) return;
       isOutsideUpdate.value = true;
-      dotPosition.value = {
-        x: props.color.s * parseInt(props.width, 10),
-        y: (1 - props.color.v) * parseInt(props.height, 10)
+      dotPosition.value = props.color ? {
+        x: props.color.s * canvasWidth.value,
+        y: (1 - props.color.v) * canvasHeight.value
+      } : {
+        x: 0,
+        y: 0
       };
     }, {
       deep: true,
@@ -150,19 +171,16 @@ export const VColorPickerCanvas = defineComponent({
     });
     onMounted(() => updateCanvas());
     useRender(() => _createVNode("div", {
+      "ref": resizeRef,
       "class": "v-color-picker-canvas",
-      "style": {
-        width: convertToUnit(props.width),
-        height: convertToUnit(props.height)
-      },
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown
     }, [_createVNode("canvas", {
       "ref": canvasRef,
-      "width": props.width,
-      "height": props.height
-    }, null), _createVNode("div", {
+      "width": canvasWidth.value,
+      "height": canvasHeight.value
+    }, null), props.color && _createVNode("div", {
       "class": ['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
       }],