vuetify 3.3.12 → 3.4.0-alpha.0

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumbs.mjs","names":["VBreadcrumbsDivider","VBreadcrumbsItem","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","provideDefaults","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeTagProps","computed","toRef","genericComponent","propsFactory","useRender","makeVBreadcrumbsProps","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","VBreadcrumbs","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","map","item","title","raw","hasPrepend","prepend","_createVNode","value","class","style","start","_ref2","index","array","_Fragment","_mergeProps","length","undefined"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { LinkProps } from '@/composables/router'\nimport type { GenericProps } from '@/util'\n\nexport type BreadcrumbItem = string | (Partial<LinkProps> & {\n  title: string\n  disabled?: boolean\n})\n\nexport const makeVBreadcrumbsProps = propsFactory({\n  activeClass: String,\n  activeColor: String,\n  bgColor: String,\n  color: String,\n  disabled: Boolean,\n  divider: {\n    type: String,\n    default: '/',\n  },\n  icon: IconValue,\n  items: {\n    type: Array as PropType<readonly BreadcrumbItem[]>,\n    default: () => ([]),\n  },\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'ul' }),\n}, 'VBreadcrumbs')\n\nexport const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(\n  props: {\n    items?: T[]\n  },\n  slots: {\n    prepend: never\n    title: { item: T, index: number }\n    divider: { item: T, index: number }\n    default: never\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VBreadcrumbs',\n\n  props: makeVBreadcrumbsProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBreadcrumbsDivider: {\n        divider: toRef(props, 'divider'),\n      },\n      VBreadcrumbsItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor: toRef(props, 'activeColor'),\n        color: toRef(props, 'color'),\n        disabled: toRef(props, 'disabled'),\n      },\n    })\n\n    const items = computed(() => props.items.map(item => {\n      return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs',\n            backgroundColorClasses.value,\n            densityClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <li key=\"prepend\" class=\"v-breadcrumbs__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  start\n                  icon={ props.icon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.icon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </li>\n          )}\n\n          { items.value.map(({ item, raw }, index, array) => (\n            <>\n              <VBreadcrumbsItem\n                key={ item.title }\n                disabled={ index >= array.length - 1 }\n                { ...item }\n                v-slots={{\n                  default: slots.title ? () => slots.title?.({ item: raw, index }) : undefined,\n                }}\n              />\n\n              { index < array.length - 1 && (\n                <VBreadcrumbsDivider\n                  v-slots={{\n                    default: slots.divider ? () => slots.divider?.({ item: raw, index }) : undefined,\n                  }}\n                />\n              )}\n            </>\n          ))}\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"mappings":"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"}
+{"version":3,"file":"VBreadcrumbs.mjs","names":["VBreadcrumbsDivider","VBreadcrumbsItem","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","provideDefaults","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeTagProps","computed","toRef","genericComponent","propsFactory","useRender","makeVBreadcrumbsProps","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","VBreadcrumbs","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","map","item","title","raw","hasPrepend","prepend","_createVNode","value","class","style","start","_ref2","index","array","_Fragment","_mergeProps","length","undefined"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { LinkProps } from '@/composables/router'\nimport type { GenericProps } from '@/util'\n\nexport type BreadcrumbItem = string | (Partial<LinkProps> & {\n  title: string\n  disabled?: boolean\n})\n\nexport const makeVBreadcrumbsProps = propsFactory({\n  activeClass: String,\n  activeColor: String,\n  bgColor: String,\n  color: String,\n  disabled: Boolean,\n  divider: {\n    type: String,\n    default: '/',\n  },\n  icon: IconValue,\n  items: {\n    type: Array as PropType<readonly BreadcrumbItem[]>,\n    default: () => ([]),\n  },\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'ul' }),\n}, 'VBreadcrumbs')\n\nexport const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(\n  props: {\n    items?: T[]\n  },\n  slots: {\n    prepend: never\n    title: { item: T, index: number }\n    divider: { item: T, index: number }\n    item: { item: T, index: number }\n    default: never\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VBreadcrumbs',\n\n  props: makeVBreadcrumbsProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBreadcrumbsDivider: {\n        divider: toRef(props, 'divider'),\n      },\n      VBreadcrumbsItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor: toRef(props, 'activeColor'),\n        color: toRef(props, 'color'),\n        disabled: toRef(props, 'disabled'),\n      },\n    })\n\n    const items = computed(() => props.items.map(item => {\n      return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs',\n            backgroundColorClasses.value,\n            densityClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <li key=\"prepend\" class=\"v-breadcrumbs__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  start\n                  icon={ props.icon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.icon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </li>\n          )}\n\n          { items.value.map(({ item, raw }, index, array) => (\n            <>\n              { slots.item?.({ item, index }) ?? (\n                <VBreadcrumbsItem\n                  key={ index }\n                  disabled={ index >= array.length - 1 }\n                  { ...(typeof item === 'string' ? { title: item } : item) }\n                  v-slots={{\n                    default: slots.title ? () => slots.title?.({ item, index }) : undefined,\n                  }}\n                />\n              )}\n\n              { index < array.length - 1 && (\n                <VBreadcrumbsDivider\n                  v-slots={{\n                    default: slots.divider ? () => slots.divider?.({ item: raw, index }) : undefined,\n                  }}\n                />\n              )}\n            </>\n          ))}\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"mappings":"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"}

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

@@ -132,6 +132,12 @@ declare const VBreadcrumbs: {
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
+            item?: ((arg: {
+                item: BreadcrumbItem;
+                index: number;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
             default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
@@ -154,7 +160,7 @@ declare const VBreadcrumbs: {
             bgColor?: string | undefined;
             activeClass?: string | undefined;
             activeColor?: string | undefined;
-        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "v-slot:title" | "v-slot:prepend" | "v-slot:divider">, string, {
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "v-slot:title" | "v-slot:prepend" | "v-slot:item" | "v-slot:divider">, string, {
             style: vue.StyleValue;
             disabled: boolean;
             tag: string;
@@ -177,6 +183,12 @@ declare const VBreadcrumbs: {
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
+            item: (arg: {
+                item: BreadcrumbItem;
+                index: number;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
             default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
@@ -232,7 +244,7 @@ declare const VBreadcrumbs: {
     bgColor?: string | undefined;
     activeClass?: string | undefined;
     activeColor?: string | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "v-slot:title" | "v-slot:prepend" | "v-slot:divider">, string, {
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "v-slot:title" | "v-slot:prepend" | "v-slot:item" | "v-slot:divider">, string, {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
@@ -255,6 +267,12 @@ declare const VBreadcrumbs: {
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    item: (arg: {
+        item: BreadcrumbItem;
+        index: number;
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -270,6 +288,10 @@ declare const VBreadcrumbs: {
         item: T_1;
         index: number;
     };
+    item: {
+        item: T_1;
+        index: number;
+    };
     default: never;
 }) => GenericProps<{
     items?: T_1[] | undefined;
@@ -283,6 +305,10 @@ declare const VBreadcrumbs: {
         item: T_1;
         index: number;
     };
+    item: {
+        item: T_1;
+        index: number;
+    };
     default: never;
 }>) & FilterPropsOptions<{
     tag: Omit<{

package/lib/components/VBtn/VBtn.css

@@ -310,6 +310,9 @@
 .v-btn--rounded {
   border-radius: 24px;
 }
+.v-btn--rounded.v-btn--icon {
+  border-radius: 4px;
+}
 .v-btn .v-icon {
   --v-icon-size-multiplier: 0.8571428571;
 }

package/lib/components/VBtn/VBtn.sass

@@ -148,6 +148,9 @@
   &--rounded
     @include tools.rounded($button-rounded-border-radius)
 
+    &.v-btn--icon
+      @include tools.rounded($button-border-radius)
+
   .v-icon
     --v-icon-size-multiplier: #{calc(18/21)}
 

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

@@ -964,6 +964,7 @@ declare const VCarouselItem: {
             inline?: boolean | undefined;
             transition?: string | boolean | undefined;
             style?: vue.StyleValue | undefined;
+            draggable?: boolean | "false" | "true" | undefined;
             eager?: boolean | undefined;
             disabled?: boolean | undefined;
             options?: IntersectionObserverInit | undefined;
@@ -986,7 +987,9 @@ declare const VCarouselItem: {
                 error?: (() => vue.VNodeChild) | undefined;
                 sources?: (() => vue.VNodeChild) | undefined;
             };
+            referrerpolicy?: "origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
             alt?: string | undefined;
+            crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
             sizes?: string | undefined;
             srcset?: string | undefined;
             ref?: vue.VNodeRef | undefined;
@@ -1087,8 +1090,11 @@ declare const VCarouselItem: {
             minWidth?: string | number | undefined;
             transition?: string | boolean | undefined;
             value?: any;
+            draggable?: boolean | "false" | "true" | undefined;
             class?: any;
+            referrerpolicy?: "origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
             alt?: string | undefined;
+            crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
             sizes?: string | undefined;
             srcset?: string | undefined;
             contentClass?: string | undefined;
@@ -1118,6 +1124,7 @@ declare const VCarouselItem: {
             inline: boolean;
             transition: string | boolean;
             style: vue.StyleValue;
+            draggable: boolean | "false" | "true";
             eager: boolean;
             disabled: boolean;
             options: IntersectionObserverInit;
@@ -1175,8 +1182,11 @@ declare const VCarouselItem: {
         minWidth?: string | number | undefined;
         transition?: string | boolean | undefined;
         value?: any;
+        draggable?: boolean | "false" | "true" | undefined;
         class?: any;
+        referrerpolicy?: "origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
         alt?: string | undefined;
+        crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
         sizes?: string | undefined;
         srcset?: string | undefined;
         contentClass?: string | undefined;
@@ -1224,8 +1234,11 @@ declare const VCarouselItem: {
     minWidth?: string | number | undefined;
     transition?: string | boolean | undefined;
     value?: any;
+    draggable?: boolean | "false" | "true" | undefined;
     class?: any;
+    referrerpolicy?: "origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
     alt?: string | undefined;
+    crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
     sizes?: string | undefined;
     srcset?: string | undefined;
     contentClass?: string | undefined;
@@ -1255,6 +1268,7 @@ declare const VCarouselItem: {
     inline: boolean;
     transition: string | boolean;
     style: vue.StyleValue;
+    draggable: boolean | "false" | "true";
     eager: boolean;
     disabled: boolean;
     options: IntersectionObserverInit;
@@ -1303,6 +1317,10 @@ declare const VCarouselItem: {
     inline: BooleanConstructor;
     alt: StringConstructor;
     cover: BooleanConstructor;
+    draggable: {
+        type: vue.PropType<boolean | "false" | "true">;
+        default: undefined;
+    };
     gradient: StringConstructor;
     lazySrc: StringConstructor;
     options: {
@@ -1318,6 +1336,8 @@ declare const VCarouselItem: {
         type: vue.PropType<string | srcObject>;
         default: string;
     };
+    crossorigin: vue.PropType<"" | "anonymous" | "use-credentials">;
+    referrerpolicy: vue.PropType<"origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">;
     srcset: StringConstructor;
 }, vue.ExtractPropTypes<{
     eager: BooleanConstructor;
@@ -1348,6 +1368,10 @@ declare const VCarouselItem: {
     inline: BooleanConstructor;
     alt: StringConstructor;
     cover: BooleanConstructor;
+    draggable: {
+        type: vue.PropType<boolean | "false" | "true">;
+        default: undefined;
+    };
     gradient: StringConstructor;
     lazySrc: StringConstructor;
     options: {
@@ -1363,6 +1387,8 @@ declare const VCarouselItem: {
         type: vue.PropType<string | srcObject>;
         default: string;
     };
+    crossorigin: vue.PropType<"" | "anonymous" | "use-credentials">;
+    referrerpolicy: vue.PropType<"origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">;
     srcset: StringConstructor;
 }>>;
 type VCarouselItem = InstanceType<typeof VCarouselItem>;

package/lib/components/VCheckbox/VCheckbox.mjs

@@ -35,12 +35,12 @@ export const VCheckbox = genericComponent()({
     const uid = getUid();
     const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
-      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = VInput.filterProps(props);
       const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return _createVNode(VInput, _mergeProps({
         "class": ['v-checkbox', props.class]
-      }, inputAttrs, inputProps, {
+      }, rootAttrs, inputProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "id": id.value,

package/lib/components/VCheckbox/VCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCheckbox.mjs","names":["makeVCheckboxBtnProps","VCheckboxBtn","makeVInputProps","VInput","useFocus","useProxiedModel","computed","filterInputAttrs","genericComponent","getUid","omit","propsFactory","useRender","makeVCheckboxProps","VCheckbox","name","inheritAttrs","props","emits","value","focused","setup","_ref","attrs","slots","model","isFocused","focus","blur","uid","id","inputAttrs","controlAttrs","inputProps","_1","filterProps","checkboxProps","_2","_createVNode","_mergeProps","class","$event","style","default","_ref2","messagesId","isDisabled","isReadonly"],"sources":["../../../src/components/VCheckbox/VCheckbox.tsx"],"sourcesContent":["// Styles\nimport './VCheckbox.sass'\n\n// Components\nimport { makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nexport type VCheckboxSlots = VInputSlots & VSelectionControlSlots\n\nexport const makeVCheckboxProps = propsFactory({\n  ...makeVInputProps(),\n  ...omit(makeVCheckboxBtnProps(), ['inline']),\n}, 'VCheckbox')\n\nexport const VCheckbox = genericComponent<VCheckboxSlots>()({\n  name: 'VCheckbox',\n\n  inheritAttrs: false,\n\n  props: makeVCheckboxProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'update:focused': (focused: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `checkbox-${uid}`)\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [checkboxProps, _2] = VCheckboxBtn.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-checkbox',\n            props.class,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n            }) => (\n              <VCheckboxBtn\n                { ...checkboxProps }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                { ...controlAttrs }\n                v-model={ model.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                v-slots={ slots }\n              />\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckbox = InstanceType<typeof VCheckbox>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,qBAAqB,EAAEC,YAAY;AAAA,SACnCC,eAAe,EAAEC,MAAM,gCAEhC;AAAA,SACSC,QAAQ;AAAA,SACRC,eAAe,8CAExB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAElF;AAMA,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7C,GAAGT,eAAe,EAAE;EACpB,GAAGQ,IAAI,CAACV,qBAAqB,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC7C,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMc,SAAS,GAAGN,gBAAgB,EAAkB,CAAC;EAC1DO,IAAI,EAAE,WAAW;EAEjBC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEJ,kBAAkB,EAAE;EAE3BK,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAc,IAAK,IAAI;IAC7C,gBAAgB,EAAGC,OAAgB,IAAK;EAC1C,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAMG,KAAK,GAAGpB,eAAe,CAACY,KAAK,EAAE,YAAY,CAAC;IAClD,MAAM;MAAES,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGxB,QAAQ,CAACa,KAAK,CAAC;IAElD,MAAMY,GAAG,GAAGpB,MAAM,EAAE;IACpB,MAAMqB,EAAE,GAAGxB,QAAQ,CAAC,MAAMW,KAAK,CAACa,EAAE,IAAK,YAAWD,GAAI,EAAC,CAAC;IAExDjB,SAAS,CAAC,MAAM;MACd,MAAM,CAACmB,UAAU,EAAEC,YAAY,CAAC,GAAGzB,gBAAgB,CAACgB,KAAK,CAAC;MAC1D,MAAM,CAACU,UAAU,EAAEC,EAAE,CAAC,GAAG/B,MAAM,CAACgC,WAAW,CAAClB,KAAK,CAAC;MAClD,MAAM,CAACmB,aAAa,EAAEC,EAAE,CAAC,GAAGpC,YAAY,CAACkC,WAAW,CAAClB,KAAK,CAAC;MAE3D,OAAAqB,YAAA,CAAAnC,MAAA,EAAAoC,WAAA;QAAA,SAEW,CACL,YAAY,EACZtB,KAAK,CAACuB,KAAK;MACZ,GACIT,UAAU,EACVE,UAAU;QAAA,cACLR,KAAK,CAACN,KAAK;QAAA,uBAAAsB,MAAA,IAAXhB,KAAK,CAACN,KAAK,GAAAsB,MAAA;QAAA,MAChBX,EAAE,CAACX,KAAK;QAAA,WACHO,SAAS,CAACP,KAAK;QAAA,SACjBF,KAAK,CAACyB;MAAK;QAGjB,GAAGlB,KAAK;QACRmB,OAAO,EAAEC,KAAA;UAAA,IAAC;YACRd,EAAE;YACFe,UAAU;YACVC,UAAU;YACVC;UACF,CAAC,GAAAH,KAAA;UAAA,OAAAN,YAAA,CAAArC,YAAA,EAAAsC,WAAA,CAEQH,aAAa;YAAA,MACbN,EAAE,CAACX,KAAK;YAAA,oBACM0B,UAAU,CAAC1B,KAAK;YAAA,YACxB2B,UAAU,CAAC3B,KAAK;YAAA,YAChB4B,UAAU,CAAC5B;UAAK,GACtBa,YAAY;YAAA,cACPP,KAAK,CAACN,KAAK;YAAA,uBAAAsB,MAAA,IAAXhB,KAAK,CAACN,KAAK,GAAAsB,MAAA;YAAA,WACXd,KAAK;YAAA,UACNC;UAAI,IACHJ,KAAK;QAAA;MAElB;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VCheckbox.mjs","names":["makeVCheckboxBtnProps","VCheckboxBtn","makeVInputProps","VInput","useFocus","useProxiedModel","computed","filterInputAttrs","genericComponent","getUid","omit","propsFactory","useRender","makeVCheckboxProps","VCheckbox","name","inheritAttrs","props","emits","value","focused","setup","_ref","attrs","slots","model","isFocused","focus","blur","uid","id","rootAttrs","controlAttrs","inputProps","_1","filterProps","checkboxProps","_2","_createVNode","_mergeProps","class","$event","style","default","_ref2","messagesId","isDisabled","isReadonly"],"sources":["../../../src/components/VCheckbox/VCheckbox.tsx"],"sourcesContent":["// Styles\nimport './VCheckbox.sass'\n\n// Components\nimport { makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nexport type VCheckboxSlots = VInputSlots & VSelectionControlSlots\n\nexport const makeVCheckboxProps = propsFactory({\n  ...makeVInputProps(),\n  ...omit(makeVCheckboxBtnProps(), ['inline']),\n}, 'VCheckbox')\n\nexport const VCheckbox = genericComponent<VCheckboxSlots>()({\n  name: 'VCheckbox',\n\n  inheritAttrs: false,\n\n  props: makeVCheckboxProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'update:focused': (focused: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `checkbox-${uid}`)\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [checkboxProps, _2] = VCheckboxBtn.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-checkbox',\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n            }) => (\n              <VCheckboxBtn\n                { ...checkboxProps }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                { ...controlAttrs }\n                v-model={ model.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                v-slots={ slots }\n              />\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckbox = InstanceType<typeof VCheckbox>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,qBAAqB,EAAEC,YAAY;AAAA,SACnCC,eAAe,EAAEC,MAAM,gCAEhC;AAAA,SACSC,QAAQ;AAAA,SACRC,eAAe,8CAExB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAElF;AAMA,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7C,GAAGT,eAAe,EAAE;EACpB,GAAGQ,IAAI,CAACV,qBAAqB,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC7C,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMc,SAAS,GAAGN,gBAAgB,EAAkB,CAAC;EAC1DO,IAAI,EAAE,WAAW;EAEjBC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEJ,kBAAkB,EAAE;EAE3BK,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAc,IAAK,IAAI;IAC7C,gBAAgB,EAAGC,OAAgB,IAAK;EAC1C,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAMG,KAAK,GAAGpB,eAAe,CAACY,KAAK,EAAE,YAAY,CAAC;IAClD,MAAM;MAAES,SAAS;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGxB,QAAQ,CAACa,KAAK,CAAC;IAElD,MAAMY,GAAG,GAAGpB,MAAM,EAAE;IACpB,MAAMqB,EAAE,GAAGxB,QAAQ,CAAC,MAAMW,KAAK,CAACa,EAAE,IAAK,YAAWD,GAAI,EAAC,CAAC;IAExDjB,SAAS,CAAC,MAAM;MACd,MAAM,CAACmB,SAAS,EAAEC,YAAY,CAAC,GAAGzB,gBAAgB,CAACgB,KAAK,CAAC;MACzD,MAAM,CAACU,UAAU,EAAEC,EAAE,CAAC,GAAG/B,MAAM,CAACgC,WAAW,CAAClB,KAAK,CAAC;MAClD,MAAM,CAACmB,aAAa,EAAEC,EAAE,CAAC,GAAGpC,YAAY,CAACkC,WAAW,CAAClB,KAAK,CAAC;MAE3D,OAAAqB,YAAA,CAAAnC,MAAA,EAAAoC,WAAA;QAAA,SAEW,CACL,YAAY,EACZtB,KAAK,CAACuB,KAAK;MACZ,GACIT,SAAS,EACTE,UAAU;QAAA,cACLR,KAAK,CAACN,KAAK;QAAA,uBAAAsB,MAAA,IAAXhB,KAAK,CAACN,KAAK,GAAAsB,MAAA;QAAA,MAChBX,EAAE,CAACX,KAAK;QAAA,WACHO,SAAS,CAACP,KAAK;QAAA,SACjBF,KAAK,CAACyB;MAAK;QAGjB,GAAGlB,KAAK;QACRmB,OAAO,EAAEC,KAAA;UAAA,IAAC;YACRd,EAAE;YACFe,UAAU;YACVC,UAAU;YACVC;UACF,CAAC,GAAAH,KAAA;UAAA,OAAAN,YAAA,CAAArC,YAAA,EAAAsC,WAAA,CAEQH,aAAa;YAAA,MACbN,EAAE,CAACX,KAAK;YAAA,oBACM0B,UAAU,CAAC1B,KAAK;YAAA,YACxB2B,UAAU,CAAC3B,KAAK;YAAA,YAChB4B,UAAU,CAAC5B;UAAK,GACtBa,YAAY;YAAA,cACPP,KAAK,CAACN,KAAK;YAAA,uBAAAsB,MAAA,IAAXhB,KAAK,CAACN,KAAK,GAAAsB,MAAA;YAAA,WACXd,KAAK;YAAA,UACNC;UAAI,IACHJ,KAAK;QAAA;MAElB;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VCheckbox/VCheckboxBtn.mjs

@@ -4,7 +4,7 @@ import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionCont
 import { IconValue } from "../../composables/icons.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { computed } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVCheckboxBtnProps = propsFactory({
   indeterminate: Boolean,
   indeterminateIcon: {
@@ -40,16 +40,19 @@ export const VCheckboxBtn = genericComponent()({
     const trueIcon = computed(() => {
       return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
     });
-    useRender(() => _createVNode(VSelectionControl, _mergeProps(props, {
-      "modelValue": model.value,
-      "onUpdate:modelValue": [$event => model.value = $event, onChange],
-      "class": ['v-checkbox-btn', props.class],
-      "style": props.style,
-      "type": "checkbox",
-      "falseIcon": falseIcon.value,
-      "trueIcon": trueIcon.value,
-      "aria-checked": indeterminate.value ? 'mixed' : undefined
-    }), slots));
+    useRender(() => {
+      const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue']);
+      return _createVNode(VSelectionControl, _mergeProps(controlProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": [$event => model.value = $event, onChange],
+        "class": ['v-checkbox-btn', props.class],
+        "style": props.style,
+        "type": "checkbox",
+        "falseIcon": falseIcon.value,
+        "trueIcon": trueIcon.value,
+        "aria-checked": indeterminate.value ? 'mixed' : undefined
+      }), slots);
+    });
     return {};
   }
 });

package/lib/components/VCheckbox/VCheckboxBtn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCheckboxBtn.mjs","names":["makeVSelectionControlProps","VSelectionControl","IconValue","useProxiedModel","computed","genericComponent","propsFactory","useRender","makeVCheckboxBtnProps","indeterminate","Boolean","indeterminateIcon","type","default","falseIcon","trueIcon","VCheckboxBtn","name","props","emits","value","val","setup","_ref","slots","model","onChange","v","_createVNode","_mergeProps","$event","class","style","undefined"],"sources":["../../../src/components/VCheckbox/VCheckboxBtn.tsx"],"sourcesContent":["// Components\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport const makeVCheckboxBtnProps = propsFactory({\n  indeterminate: Boolean,\n  indeterminateIcon: {\n    type: IconValue,\n    default: '$checkboxIndeterminate',\n  },\n\n  ...makeVSelectionControlProps({\n    falseIcon: '$checkboxOff',\n    trueIcon: '$checkboxOn',\n  }),\n}, 'VCheckboxBtn')\n\nexport const VCheckboxBtn = genericComponent<VSelectionControlSlots>()({\n  name: 'VCheckboxBtn',\n\n  props: makeVCheckboxBtnProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n\n    function onChange (v: any) {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    const falseIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.falseIcon\n    })\n\n    const trueIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.trueIcon\n    })\n\n    useRender(() => (\n      <VSelectionControl\n        { ...props }\n        v-model={ model.value }\n        class={[\n          'v-checkbox-btn',\n          props.class,\n        ]}\n        style={ props.style }\n        type=\"checkbox\"\n        onUpdate:modelValue={ onChange }\n        falseIcon={ falseIcon.value }\n        trueIcon={ trueIcon.value }\n        aria-checked={ indeterminate.value ? 'mixed' : undefined }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>\n"],"mappings":";AAAA;AAAA,SACSA,0BAA0B,EAAEC,iBAAiB,sDAEtD;AAAA,SACSC,SAAS;AAAA,SACTC,eAAe,8CAExB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,aAAa,EAAEC,OAAO;EACtBC,iBAAiB,EAAE;IACjBC,IAAI,EAAEV,SAAS;IACfW,OAAO,EAAE;EACX,CAAC;EAED,GAAGb,0BAA0B,CAAC;IAC5Bc,SAAS,EAAE,cAAc;IACzBC,QAAQ,EAAE;EACZ,CAAC;AACH,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMC,YAAY,GAAGX,gBAAgB,EAA0B,CAAC;EACrEY,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEV,qBAAqB,EAAE;EAE9BW,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,sBAAsB,EAAGC,GAAY,IAAK;EAC5C,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAMd,aAAa,GAAGN,eAAe,CAACe,KAAK,EAAE,eAAe,CAAC;IAC7D,MAAMO,KAAK,GAAGtB,eAAe,CAACe,KAAK,EAAE,YAAY,CAAC;IAElD,SAASQ,QAAQA,CAAEC,CAAM,EAAE;MACzB,IAAIlB,aAAa,CAACW,KAAK,EAAE;QACvBX,aAAa,CAACW,KAAK,GAAG,KAAK;MAC7B;IACF;IAEA,MAAMN,SAAS,GAAGV,QAAQ,CAAC,MAAM;MAC/B,OAAOK,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACJ,SAAS;IACrB,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGX,QAAQ,CAAC,MAAM;MAC9B,OAAOK,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACH,QAAQ;IACpB,CAAC,CAAC;IAEFR,SAAS,CAAC,MAAAqB,YAAA,CAAA3B,iBAAA,EAAA4B,WAAA,CAEDX,KAAK;MAAA,cACAO,KAAK,CAACL,KAAK;MAAA,wBAAAU,MAAA,IAAXL,KAAK,CAACL,KAAK,GAAAU,MAAA,EAOCJ,QAAQ;MAAA,SANvB,CACL,gBAAgB,EAChBR,KAAK,CAACa,KAAK,CACZ;MAAA,SACOb,KAAK,CAACc,KAAK;MAAA,QACd,UAAU;MAAA,aAEHlB,SAAS,CAACM,KAAK;MAAA,YAChBL,QAAQ,CAACK,KAAK;MAAA,gBACVX,aAAa,CAACW,KAAK,GAAG,OAAO,GAAGa;IAAS,IAC9CT,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VCheckboxBtn.mjs","names":["makeVSelectionControlProps","VSelectionControl","IconValue","useProxiedModel","computed","genericComponent","omit","propsFactory","useRender","makeVCheckboxBtnProps","indeterminate","Boolean","indeterminateIcon","type","default","falseIcon","trueIcon","VCheckboxBtn","name","props","emits","value","val","setup","_ref","slots","model","onChange","v","controlProps","filterProps","_createVNode","_mergeProps","$event","class","style","undefined"],"sources":["../../../src/components/VCheckbox/VCheckboxBtn.tsx"],"sourcesContent":["// Components\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport const makeVCheckboxBtnProps = propsFactory({\n  indeterminate: Boolean,\n  indeterminateIcon: {\n    type: IconValue,\n    default: '$checkboxIndeterminate',\n  },\n\n  ...makeVSelectionControlProps({\n    falseIcon: '$checkboxOff',\n    trueIcon: '$checkboxOn',\n  }),\n}, 'VCheckboxBtn')\n\nexport const VCheckboxBtn = genericComponent<VSelectionControlSlots>()({\n  name: 'VCheckboxBtn',\n\n  props: makeVCheckboxBtnProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n\n    function onChange (v: any) {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    const falseIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.falseIcon\n    })\n\n    const trueIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.trueIcon\n    })\n\n    useRender(() => {\n      const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue'])\n      return (\n        <VSelectionControl\n          { ...controlProps }\n          v-model={ model.value }\n        class={[\n          'v-checkbox-btn',\n          props.class,\n        ]}\n        style={ props.style }\n          type=\"checkbox\"\n          onUpdate:modelValue={ onChange }\n          falseIcon={ falseIcon.value }\n          trueIcon={ trueIcon.value }\n        aria-checked={ indeterminate.value ? 'mixed' : undefined }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>\n"],"mappings":";AAAA;AAAA,SACSA,0BAA0B,EAAEC,iBAAiB,sDAEtD;AAAA,SACSC,SAAS;AAAA,SACTC,eAAe,8CAExB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAExD;AAGA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,aAAa,EAAEC,OAAO;EACtBC,iBAAiB,EAAE;IACjBC,IAAI,EAAEX,SAAS;IACfY,OAAO,EAAE;EACX,CAAC;EAED,GAAGd,0BAA0B,CAAC;IAC5Be,SAAS,EAAE,cAAc;IACzBC,QAAQ,EAAE;EACZ,CAAC;AACH,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMC,YAAY,GAAGZ,gBAAgB,EAA0B,CAAC;EACrEa,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEV,qBAAqB,EAAE;EAE9BW,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,sBAAsB,EAAGC,GAAY,IAAK;EAC5C,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAMd,aAAa,GAAGP,eAAe,CAACgB,KAAK,EAAE,eAAe,CAAC;IAC7D,MAAMO,KAAK,GAAGvB,eAAe,CAACgB,KAAK,EAAE,YAAY,CAAC;IAElD,SAASQ,QAAQA,CAAEC,CAAM,EAAE;MACzB,IAAIlB,aAAa,CAACW,KAAK,EAAE;QACvBX,aAAa,CAACW,KAAK,GAAG,KAAK;MAC7B;IACF;IAEA,MAAMN,SAAS,GAAGX,QAAQ,CAAC,MAAM;MAC/B,OAAOM,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACJ,SAAS;IACrB,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGZ,QAAQ,CAAC,MAAM;MAC9B,OAAOM,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACH,QAAQ;IACpB,CAAC,CAAC;IAEFR,SAAS,CAAC,MAAM;MACd,MAAMqB,YAAY,GAAGvB,IAAI,CAACL,iBAAiB,CAAC6B,WAAW,CAACX,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;MAClF,OAAAY,YAAA,CAAA9B,iBAAA,EAAA+B,WAAA,CAESH,YAAY;QAAA,cACPH,KAAK,CAACL,KAAK;QAAA,wBAAAY,MAAA,IAAXP,KAAK,CAACL,KAAK,GAAAY,MAAA,EAOCN,QAAQ;QAAA,SANzB,CACL,gBAAgB,EAChBR,KAAK,CAACe,KAAK,CACZ;QAAA,SACOf,KAAK,CAACgB,KAAK;QAAA,QACZ,UAAU;QAAA,aAEHpB,SAAS,CAACM,KAAK;QAAA,YAChBL,QAAQ,CAACK,KAAK;QAAA,gBACZX,aAAa,CAACW,KAAK,GAAG,OAAO,GAAGe;MAAS,IAC5CX,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, PropType, JSXComponent, WritableComputedRef, Ref, CSSProperties, ComputedRef } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType, JSXComponent, WritableComputedRef, Ref, CSSProperties, VNode, ComputedRef } 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>];
@@ -18,6 +18,8 @@ type SelectionControlSlot = {
     model: WritableComputedRef<any>;
     textColorClasses: Ref<string[]>;
     textColorStyles: Ref<CSSProperties>;
+    inputNode: VNode;
+    icon: IconValue | undefined;
     props: {
         onBlur: (e: Event) => void;
         onFocus: (e: FocusEvent) => void;
@@ -153,6 +155,7 @@ declare const VCheckbox: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
             defaultsTarget?: string | undefined;
+            baseColor?: string | undefined;
             trueValue?: any;
             falseValue?: any;
             "v-slot:input"?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
@@ -240,6 +243,7 @@ declare const VCheckbox: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
             defaultsTarget?: string | undefined;
+            baseColor?: string | undefined;
             trueValue?: any;
             falseValue?: any;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
@@ -391,6 +395,7 @@ declare const VCheckbox: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
         defaultsTarget?: string | undefined;
+        baseColor?: string | undefined;
         trueValue?: any;
         falseValue?: any;
         'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
@@ -477,6 +482,7 @@ declare const VCheckbox: {
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
     defaultsTarget?: string | undefined;
+    baseColor?: string | undefined;
     trueValue?: any;
     falseValue?: any;
     'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
@@ -621,6 +627,7 @@ declare const VCheckbox: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
     };
+    baseColor: StringConstructor;
     trueValue: null;
     falseValue: null;
     indeterminateIcon: {
@@ -710,6 +717,7 @@ declare const VCheckbox: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
     };
+    baseColor: StringConstructor;
     trueValue: null;
     falseValue: null;
     indeterminateIcon: {
@@ -843,6 +851,7 @@ declare const VCheckboxBtn: {
             modelValue?: any;
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
             defaultsTarget?: string | undefined;
+            baseColor?: string | undefined;
             trueValue?: any;
             falseValue?: any;
             "v-slot:input"?: false | ((arg: SelectionControlSlot) => vue.VNodeChild) | undefined;
@@ -901,6 +910,7 @@ declare const VCheckboxBtn: {
             theme?: string | undefined;
             modelValue?: any;
             defaultsTarget?: string | undefined;
+            baseColor?: string | undefined;
             trueValue?: any;
             falseValue?: any;
         } & {
@@ -1005,6 +1015,7 @@ declare const VCheckboxBtn: {
         theme?: string | undefined;
         modelValue?: any;
         defaultsTarget?: string | undefined;
+        baseColor?: string | undefined;
         trueValue?: any;
         falseValue?: any;
     } & {
@@ -1063,6 +1074,7 @@ declare const VCheckboxBtn: {
     theme?: string | undefined;
     modelValue?: any;
     defaultsTarget?: string | undefined;
+    baseColor?: string | undefined;
     trueValue?: any;
     falseValue?: any;
 } & {
@@ -1168,6 +1180,7 @@ declare const VCheckboxBtn: {
         default: typeof deepEqual;
     };
     label: StringConstructor;
+    baseColor: StringConstructor;
     trueValue: null;
     falseValue: null;
     value: null;
@@ -1222,6 +1235,7 @@ declare const VCheckboxBtn: {
         default: typeof deepEqual;
     };
     label: StringConstructor;
+    baseColor: StringConstructor;
     trueValue: null;
     falseValue: null;
     value: null;

package/lib/components/VColorPicker/VColorPickerEdit.css

@@ -10,12 +10,14 @@
   justify-content: center;
   text-align: center;
 }
-.v-color-picker-edit__input:not(:last-child).v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
+.v-locale--is-ltr.v-color-picker-edit__input:not(:last-child), .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
   margin-right: 8px;
 }
-.v-color-picker-edit__input:not(:last-child).v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
+
+.v-locale--is-rtl.v-color-picker-edit__input:not(:last-child), .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
   margin-left: 8px;
 }
+
 .v-color-picker-edit__input input {
   border-radius: 4px;
   margin-bottom: 8px;

package/lib/components/VColorPicker/VColorPickerPreview.css

@@ -1,12 +1,14 @@
 .v-color-picker-preview__alpha .v-slider-track__background {
   background-color: transparent !important;
 }
-.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
+.v-locale--is-ltr.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
   background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
 }
-.v-color-picker-preview__alpha .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
+
+.v-locale--is-rtl.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
   background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
 }
+
 .v-color-picker-preview__alpha .v-slider-track__background::after {
   content: "";
   z-index: -1;
@@ -33,21 +35,24 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.v-color-picker-preview__dot.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__dot {
+.v-locale--is-ltr.v-color-picker-preview__dot, .v-locale--is-ltr .v-color-picker-preview__dot {
   margin-right: 24px;
 }
-.v-color-picker-preview__dot.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__dot {
+
+.v-locale--is-rtl.v-color-picker-preview__dot, .v-locale--is-rtl .v-color-picker-preview__dot {
   margin-left: 24px;
 }
+
 .v-color-picker-preview__dot > div {
   width: 100%;
   height: 100%;
 }
 
-.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+.v-locale--is-ltr.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
   background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
 }
-.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background.v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
+
+.v-locale--is-rtl.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
   background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
 }
 
@@ -64,4 +69,9 @@
   align-items: center;
   display: flex;
   margin-bottom: 0;
+}
+
+.v-color-picker-preview__eye-dropper {
+  position: relative;
+  margin-right: 12px;
 }

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -3,10 +3,12 @@ import { createVNode as _createVNode } from "vue";
 import "./VColorPickerPreview.css";
 
 // Components
+import { VBtn } from "../VBtn/index.mjs";
 import { VSlider } from "../VSlider/index.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
+import { onUnmounted } from 'vue';
 import { nullColor } from "./util/index.mjs";
-import { defineComponent, HSVtoCSS, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { defineComponent, HexToHSV, HSVtoCSS, propsFactory, SUPPORTS_EYE_DROPPER, useRender } from "../../util/index.mjs"; // Types
 export const makeVColorPickerPreviewProps = propsFactory({
   color: {
     type: Object
@@ -25,12 +27,36 @@ export const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
+    const abortController = new AbortController();
+    onUnmounted(() => abortController.abort());
+    async function openEyeDropper() {
+      if (!SUPPORTS_EYE_DROPPER) return;
+      const eyeDropper = new window.EyeDropper();
+      try {
+        const result = await eyeDropper.open({
+          signal: abortController.signal
+        });
+        const colorHexValue = HexToHSV(result.sRGBHex);
+        emit('update:color', {
+          ...(props.color ?? nullColor),
+          ...colorHexValue
+        });
+      } catch (e) {}
+    }
     useRender(() => _createVNode("div", {
       "class": ['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
       }, props.class],
       "style": props.style
-    }, [_createVNode("div", {
+    }, [SUPPORTS_EYE_DROPPER && _createVNode("div", {
+      "class": "v-color-picker-preview__eye-dropper",
+      "key": "eyeDropper"
+    }, [_createVNode(VBtn, {
+      "onClick": openEyeDropper,
+      "icon": "$eyeDropper",
+      "variant": "plain",
+      "density": "comfortable"
+    }, null)]), _createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [_createVNode("div", {
       "style": {