vuetify 3.4.2 → 3.4.3

package/lib/blueprints/index.d.mts

@@ -1,5 +1,36 @@
 import { Ref, JSXComponent, PropType } from 'vue';
 
+interface DateAdapter<T = unknown> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
+    startOfDay(date: T): T;
+    endOfDay(date: T): T;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
+    isValid(date: any): boolean;
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
+    getWeekdays(): string[];
+    getMonth(date: T): number;
+    setMonth(date: T, month: number): T;
+    getNextMonth(date: T): T;
+}
+
 interface LocaleMessages {
     [key: string]: LocaleMessages | string;
 }
@@ -22,6 +53,23 @@ interface RtlOptions {
     rtl?: Record<string, boolean>;
 }
 
+interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
+    locale?: any;
+}
+/** Supports module augmentation to specify date object types */
+interface DateInstanceType {
+    instanceType: unknown;
+}
+type InternalDateOptions<T = unknown> = {
+    adapter: (new (options: {
+        locale: any;
+        formats?: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, any>;
+    locale: Record<string, any>;
+};
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
+
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -87,54 +135,6 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
-interface DateAdapter<T = unknown> {
-    date(value?: any): T | null;
-    format(date: T, formatString: string): string;
-    toJsDate(value: T): Date;
-    parseISO(date: string): T;
-    toISO(date: T): string;
-    startOfDay(date: T): T;
-    endOfDay(date: T): T;
-    startOfMonth(date: T): T;
-    endOfMonth(date: T): T;
-    startOfYear(date: T): T;
-    endOfYear(date: T): T;
-    isBefore(date: T, comparing: T): boolean;
-    isAfter(date: T, comparing: T): boolean;
-    isEqual(date: T, comparing: T): boolean;
-    isSameDay(date: T, comparing: T): boolean;
-    isSameMonth(date: T, comparing: T): boolean;
-    isValid(date: any): boolean;
-    isWithinRange(date: T, range: [T, T]): boolean;
-    addDays(date: T, amount: number): T;
-    addMonths(date: T, amount: number): T;
-    getYear(date: T): number;
-    setYear(date: T, year: number): T;
-    getDiff(date: T, comparing: T | string, unit?: string): number;
-    getWeekArray(date: T): T[][];
-    getWeekdays(): string[];
-    getMonth(date: T): number;
-    setMonth(date: T, month: number): T;
-    getNextMonth(date: T): T;
-}
-
-interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
-    locale?: any;
-}
-/** Supports module augmentation to specify date object types */
-interface DateInstanceType {
-    instanceType: unknown;
-}
-type InternalDateOptions<T = unknown> = {
-    adapter: (new (options: {
-        locale: any;
-        formats?: any;
-    }) => DateInstance<T>) | DateInstance<T>;
-    formats?: Record<string, any>;
-    locale: Record<string, any>;
-};
-type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
-
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {

package/lib/blueprints/md1.d.mts

@@ -1,5 +1,36 @@
 import { Ref, JSXComponent, PropType } from 'vue';
 
+interface DateAdapter<T = unknown> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
+    startOfDay(date: T): T;
+    endOfDay(date: T): T;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
+    isValid(date: any): boolean;
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
+    getWeekdays(): string[];
+    getMonth(date: T): number;
+    setMonth(date: T, month: number): T;
+    getNextMonth(date: T): T;
+}
+
 interface LocaleMessages {
     [key: string]: LocaleMessages | string;
 }
@@ -22,6 +53,23 @@ interface RtlOptions {
     rtl?: Record<string, boolean>;
 }
 
+interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
+    locale?: any;
+}
+/** Supports module augmentation to specify date object types */
+interface DateInstanceType {
+    instanceType: unknown;
+}
+type InternalDateOptions<T = unknown> = {
+    adapter: (new (options: {
+        locale: any;
+        formats?: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, any>;
+    locale: Record<string, any>;
+};
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
+
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -87,54 +135,6 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
-interface DateAdapter<T = unknown> {
-    date(value?: any): T | null;
-    format(date: T, formatString: string): string;
-    toJsDate(value: T): Date;
-    parseISO(date: string): T;
-    toISO(date: T): string;
-    startOfDay(date: T): T;
-    endOfDay(date: T): T;
-    startOfMonth(date: T): T;
-    endOfMonth(date: T): T;
-    startOfYear(date: T): T;
-    endOfYear(date: T): T;
-    isBefore(date: T, comparing: T): boolean;
-    isAfter(date: T, comparing: T): boolean;
-    isEqual(date: T, comparing: T): boolean;
-    isSameDay(date: T, comparing: T): boolean;
-    isSameMonth(date: T, comparing: T): boolean;
-    isValid(date: any): boolean;
-    isWithinRange(date: T, range: [T, T]): boolean;
-    addDays(date: T, amount: number): T;
-    addMonths(date: T, amount: number): T;
-    getYear(date: T): number;
-    setYear(date: T, year: number): T;
-    getDiff(date: T, comparing: T | string, unit?: string): number;
-    getWeekArray(date: T): T[][];
-    getWeekdays(): string[];
-    getMonth(date: T): number;
-    setMonth(date: T, month: number): T;
-    getNextMonth(date: T): T;
-}
-
-interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
-    locale?: any;
-}
-/** Supports module augmentation to specify date object types */
-interface DateInstanceType {
-    instanceType: unknown;
-}
-type InternalDateOptions<T = unknown> = {
-    adapter: (new (options: {
-        locale: any;
-        formats?: any;
-    }) => DateInstance<T>) | DateInstance<T>;
-    formats?: Record<string, any>;
-    locale: Record<string, any>;
-};
-type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
-
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {

package/lib/blueprints/md2.d.mts

@@ -1,5 +1,36 @@
 import { Ref, JSXComponent, PropType } from 'vue';
 
+interface DateAdapter<T = unknown> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
+    startOfDay(date: T): T;
+    endOfDay(date: T): T;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
+    isValid(date: any): boolean;
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
+    getWeekdays(): string[];
+    getMonth(date: T): number;
+    setMonth(date: T, month: number): T;
+    getNextMonth(date: T): T;
+}
+
 interface LocaleMessages {
     [key: string]: LocaleMessages | string;
 }
@@ -22,6 +53,23 @@ interface RtlOptions {
     rtl?: Record<string, boolean>;
 }
 
+interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
+    locale?: any;
+}
+/** Supports module augmentation to specify date object types */
+interface DateInstanceType {
+    instanceType: unknown;
+}
+type InternalDateOptions<T = unknown> = {
+    adapter: (new (options: {
+        locale: any;
+        formats?: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, any>;
+    locale: Record<string, any>;
+};
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
+
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -87,54 +135,6 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
-interface DateAdapter<T = unknown> {
-    date(value?: any): T | null;
-    format(date: T, formatString: string): string;
-    toJsDate(value: T): Date;
-    parseISO(date: string): T;
-    toISO(date: T): string;
-    startOfDay(date: T): T;
-    endOfDay(date: T): T;
-    startOfMonth(date: T): T;
-    endOfMonth(date: T): T;
-    startOfYear(date: T): T;
-    endOfYear(date: T): T;
-    isBefore(date: T, comparing: T): boolean;
-    isAfter(date: T, comparing: T): boolean;
-    isEqual(date: T, comparing: T): boolean;
-    isSameDay(date: T, comparing: T): boolean;
-    isSameMonth(date: T, comparing: T): boolean;
-    isValid(date: any): boolean;
-    isWithinRange(date: T, range: [T, T]): boolean;
-    addDays(date: T, amount: number): T;
-    addMonths(date: T, amount: number): T;
-    getYear(date: T): number;
-    setYear(date: T, year: number): T;
-    getDiff(date: T, comparing: T | string, unit?: string): number;
-    getWeekArray(date: T): T[][];
-    getWeekdays(): string[];
-    getMonth(date: T): number;
-    setMonth(date: T, month: number): T;
-    getNextMonth(date: T): T;
-}
-
-interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
-    locale?: any;
-}
-/** Supports module augmentation to specify date object types */
-interface DateInstanceType {
-    instanceType: unknown;
-}
-type InternalDateOptions<T = unknown> = {
-    adapter: (new (options: {
-        locale: any;
-        formats?: any;
-    }) => DateInstance<T>) | DateInstance<T>;
-    formats?: Record<string, any>;
-    locale: Record<string, any>;
-};
-type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
-
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {

package/lib/blueprints/md3.d.mts

@@ -1,5 +1,36 @@
 import { Ref, JSXComponent, PropType } from 'vue';
 
+interface DateAdapter<T = unknown> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
+    startOfDay(date: T): T;
+    endOfDay(date: T): T;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
+    isValid(date: any): boolean;
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
+    getWeekdays(): string[];
+    getMonth(date: T): number;
+    setMonth(date: T, month: number): T;
+    getNextMonth(date: T): T;
+}
+
 interface LocaleMessages {
     [key: string]: LocaleMessages | string;
 }
@@ -22,6 +53,23 @@ interface RtlOptions {
     rtl?: Record<string, boolean>;
 }
 
+interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
+    locale?: any;
+}
+/** Supports module augmentation to specify date object types */
+interface DateInstanceType {
+    instanceType: unknown;
+}
+type InternalDateOptions<T = unknown> = {
+    adapter: (new (options: {
+        locale: any;
+        formats?: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, any>;
+    locale: Record<string, any>;
+};
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
+
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -87,54 +135,6 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
-interface DateAdapter<T = unknown> {
-    date(value?: any): T | null;
-    format(date: T, formatString: string): string;
-    toJsDate(value: T): Date;
-    parseISO(date: string): T;
-    toISO(date: T): string;
-    startOfDay(date: T): T;
-    endOfDay(date: T): T;
-    startOfMonth(date: T): T;
-    endOfMonth(date: T): T;
-    startOfYear(date: T): T;
-    endOfYear(date: T): T;
-    isBefore(date: T, comparing: T): boolean;
-    isAfter(date: T, comparing: T): boolean;
-    isEqual(date: T, comparing: T): boolean;
-    isSameDay(date: T, comparing: T): boolean;
-    isSameMonth(date: T, comparing: T): boolean;
-    isValid(date: any): boolean;
-    isWithinRange(date: T, range: [T, T]): boolean;
-    addDays(date: T, amount: number): T;
-    addMonths(date: T, amount: number): T;
-    getYear(date: T): number;
-    setYear(date: T, year: number): T;
-    getDiff(date: T, comparing: T | string, unit?: string): number;
-    getWeekArray(date: T): T[][];
-    getWeekdays(): string[];
-    getMonth(date: T): number;
-    setMonth(date: T, month: number): T;
-    getNextMonth(date: T): T;
-}
-
-interface DateInstance<T = DateInstanceType['instanceType']> extends DateAdapter<T> {
-    locale?: any;
-}
-/** Supports module augmentation to specify date object types */
-interface DateInstanceType {
-    instanceType: unknown;
-}
-type InternalDateOptions<T = unknown> = {
-    adapter: (new (options: {
-        locale: any;
-        formats?: any;
-    }) => DateInstance<T>) | DateInstance<T>;
-    formats?: Record<string, any>;
-    locale: Record<string, any>;
-};
-type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
-
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {

package/lib/components/VBtn/VBtn.css

@@ -392,6 +392,9 @@
 .v-pagination .v-btn {
   border-radius: 4px;
 }
+.v-pagination .v-btn--rounded {
+  border-radius: 50%;
+}
 .v-btn__overlay {
   transition: none;
 }

package/lib/components/VBtn/VBtn.sass

@@ -225,6 +225,10 @@
   .v-pagination &
     @include tools.rounded($button-pagination-border-radius)
 
+  &--rounded
+    .v-pagination &
+      @include tools.rounded($button-pagination-rounded-border-radius)
+
   &__overlay
     transition: none
 

package/lib/components/VBtn/_variables.scss

@@ -12,6 +12,7 @@ $button-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !
 $button-banner-actions-padding: 0 8px !default; // @deprecated
 $button-pagination-active-overlay-opacity: var(--v-border-opacity) !default;
 $button-pagination-border-radius: settings.$border-radius-root !default;
+$button-pagination-rounded-border-radius: map.get(settings.$rounded, 'circle') !default;
 $button-border-color: settings.$border-color-root !default;
 $button-border-radius: settings.$border-radius-root !default;
 $button-border-style: settings.$border-style-root !default;

package/lib/components/VCarousel/VCarousel.css

@@ -5,7 +5,6 @@
 }
 .v-carousel__controls {
   align-items: center;
-  background: rgba(var(--v-theme-surface-variant), 0.3);
   bottom: 0;
   display: flex;
   height: 50px;
@@ -14,6 +13,8 @@
   position: absolute;
   width: 100%;
   z-index: 1;
+  background: rgba(var(--v-theme-surface-variant), 0.3);
+  color: rgb(var(--v-theme-on-surface-variant));
 }
 .v-carousel__controls > .v-item-group {
   flex: 0 1 auto;

package/lib/components/VCarousel/VCarousel.mjs

@@ -109,7 +109,7 @@ export const VCarousel = genericComponent()({
               const props = {
                 id: `carousel-item-${item.id}`,
                 'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
-                class: [group.isSelected(item.id) && 'v-btn--active'],
+                class: ['v-carousel__controls__item', group.isSelected(item.id) && 'v-btn--active'],
                 onClick: () => group.select(item.id, true)
               };
               return slots.item ? slots.item({

package/lib/components/VCarousel/VCarousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCarousel.mjs","names":["VBtn","VDefaultsProvider","VProgressLinear","makeVWindowProps","VWindow","IconValue","useLocale","useProxiedModel","onMounted","ref","watch","convertToUnit","genericComponent","propsFactory","useRender","makeVCarouselProps","color","String","cycle","Boolean","delimiterIcon","type","default","height","Number","hideDelimiters","hideDelimiterBackground","interval","validator","value","progress","verticalDelimiters","continuous","mandatory","showArrows","VCarousel","name","props","emits","setup","_ref","slots","model","t","windowRef","slideTimeout","restartTimeout","val","window","clearTimeout","startTimeout","setTimeout","group","next","requestAnimationFrame","windowProps","filterProps","_createVNode","_mergeProps","$event","class","style","additional","_ref2","_Fragment","left","right","items","length","icon","size","variant","map","item","index","id","isSelected","onClick","select","undefined","getItemIndex","prev"],"sources":["../../../src/components/VCarousel/VCarousel.tsx"],"sourcesContent":["// Styles\nimport './VCarousel.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VProgressLinear } from '@/components/VProgressLinear'\nimport { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { onMounted, ref, watch } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VWindowSlots } from '@/components/VWindow/VWindow'\nimport type { GroupProvide } from '@/composables/group'\nimport type { GenericProps } from '@/util'\n\nexport const makeVCarouselProps = propsFactory({\n  color: String,\n  cycle: Boolean,\n  delimiterIcon: {\n    type: IconValue,\n    default: '$delimiter',\n  },\n  height: {\n    type: [Number, String],\n    default: 500,\n  },\n  hideDelimiters: Boolean,\n  hideDelimiterBackground: Boolean,\n  interval: {\n    type: [Number, String],\n    default: 6000,\n    validator: (value: string | number) => Number(value) > 0,\n  },\n  progress: [Boolean, String],\n  verticalDelimiters: [Boolean, String] as PropType<boolean | 'left' | 'right'>,\n\n  ...makeVWindowProps({\n    continuous: true,\n    mandatory: 'force' as const,\n    showArrows: true,\n  }),\n}, 'VCarousel')\n\ntype VCarouselSlots = VWindowSlots & {\n  item: {\n    props: Record<string, any>\n    item: {\n      id: number\n      value: unknown\n      disabled: boolean | undefined\n    }\n  }\n}\n\nexport const VCarousel = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n  },\n  slots: VCarouselSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VCarousel',\n\n  props: makeVCarouselProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { t } = useLocale()\n    const windowRef = ref<typeof VWindow>()\n\n    let slideTimeout = -1\n    watch(model, restartTimeout)\n    watch(() => props.interval, restartTimeout)\n    watch(() => props.cycle, val => {\n      if (val) restartTimeout()\n      else window.clearTimeout(slideTimeout)\n    })\n\n    onMounted(startTimeout)\n\n    function startTimeout () {\n      if (!props.cycle || !windowRef.value) return\n\n      slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000)\n    }\n\n    function restartTimeout () {\n      window.clearTimeout(slideTimeout)\n      window.requestAnimationFrame(startTimeout)\n    }\n\n    useRender(() => {\n      const windowProps = VWindow.filterProps(props)\n\n      return (\n        <VWindow\n          ref={ windowRef }\n          { ...windowProps }\n          v-model={ model.value }\n          class={[\n            'v-carousel',\n            {\n              'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,\n              'v-carousel--vertical-delimiters': props.verticalDelimiters,\n            },\n            props.class,\n          ]}\n          style={[\n            { height: convertToUnit(props.height) },\n            props.style,\n          ]}\n        >\n          {{\n            default: slots.default,\n            additional: ({ group }: { group: GroupProvide }) => (\n              <>\n                { !props.hideDelimiters && (\n                  <div\n                    class=\"v-carousel__controls\"\n                    style={{\n                      left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',\n                      right: props.verticalDelimiters === 'right' ? 0 : 'auto',\n                    }}\n                  >\n                    { group.items.value.length > 0 && (\n                      <VDefaultsProvider\n                        defaults={{\n                          VBtn: {\n                            color: props.color,\n                            icon: props.delimiterIcon,\n                            size: 'x-small',\n                            variant: 'text',\n                          },\n                        }}\n                        scoped\n                      >\n                        { group.items.value.map((item, index) => {\n                          const props = {\n                            id: `carousel-item-${item.id}`,\n                            'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),\n                            class: [group.isSelected(item.id) && 'v-btn--active'],\n                            onClick: () => group.select(item.id, true),\n                          }\n\n                          return slots.item\n                            ? slots.item({ props, item })\n                            : (<VBtn { ...item } { ...props } />)\n                        })}\n                      </VDefaultsProvider>\n                    )}\n                  </div>\n                )}\n\n                { props.progress && (\n                  <VProgressLinear\n                    class=\"v-carousel__progress\"\n                    color={ typeof props.progress === 'string' ? props.progress : undefined }\n                    modelValue={ (group.getItemIndex(model.value) + 1) / group.items.value.length * 100 }\n                  />\n                )}\n              </>\n            ),\n            prev: slots.prev,\n            next: slots.next,\n          }}\n        </VWindow>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCarousel = InstanceType<typeof VCarousel>\n"],"mappings":"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"}
+{"version":3,"file":"VCarousel.mjs","names":["VBtn","VDefaultsProvider","VProgressLinear","makeVWindowProps","VWindow","IconValue","useLocale","useProxiedModel","onMounted","ref","watch","convertToUnit","genericComponent","propsFactory","useRender","makeVCarouselProps","color","String","cycle","Boolean","delimiterIcon","type","default","height","Number","hideDelimiters","hideDelimiterBackground","interval","validator","value","progress","verticalDelimiters","continuous","mandatory","showArrows","VCarousel","name","props","emits","setup","_ref","slots","model","t","windowRef","slideTimeout","restartTimeout","val","window","clearTimeout","startTimeout","setTimeout","group","next","requestAnimationFrame","windowProps","filterProps","_createVNode","_mergeProps","$event","class","style","additional","_ref2","_Fragment","left","right","items","length","icon","size","variant","map","item","index","id","isSelected","onClick","select","undefined","getItemIndex","prev"],"sources":["../../../src/components/VCarousel/VCarousel.tsx"],"sourcesContent":["// Styles\nimport './VCarousel.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VProgressLinear } from '@/components/VProgressLinear'\nimport { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { onMounted, ref, watch } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VWindowSlots } from '@/components/VWindow/VWindow'\nimport type { GroupProvide } from '@/composables/group'\nimport type { GenericProps } from '@/util'\n\nexport const makeVCarouselProps = propsFactory({\n  color: String,\n  cycle: Boolean,\n  delimiterIcon: {\n    type: IconValue,\n    default: '$delimiter',\n  },\n  height: {\n    type: [Number, String],\n    default: 500,\n  },\n  hideDelimiters: Boolean,\n  hideDelimiterBackground: Boolean,\n  interval: {\n    type: [Number, String],\n    default: 6000,\n    validator: (value: string | number) => Number(value) > 0,\n  },\n  progress: [Boolean, String],\n  verticalDelimiters: [Boolean, String] as PropType<boolean | 'left' | 'right'>,\n\n  ...makeVWindowProps({\n    continuous: true,\n    mandatory: 'force' as const,\n    showArrows: true,\n  }),\n}, 'VCarousel')\n\ntype VCarouselSlots = VWindowSlots & {\n  item: {\n    props: Record<string, any>\n    item: {\n      id: number\n      value: unknown\n      disabled: boolean | undefined\n    }\n  }\n}\n\nexport const VCarousel = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n  },\n  slots: VCarouselSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VCarousel',\n\n  props: makeVCarouselProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { t } = useLocale()\n    const windowRef = ref<typeof VWindow>()\n\n    let slideTimeout = -1\n    watch(model, restartTimeout)\n    watch(() => props.interval, restartTimeout)\n    watch(() => props.cycle, val => {\n      if (val) restartTimeout()\n      else window.clearTimeout(slideTimeout)\n    })\n\n    onMounted(startTimeout)\n\n    function startTimeout () {\n      if (!props.cycle || !windowRef.value) return\n\n      slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000)\n    }\n\n    function restartTimeout () {\n      window.clearTimeout(slideTimeout)\n      window.requestAnimationFrame(startTimeout)\n    }\n\n    useRender(() => {\n      const windowProps = VWindow.filterProps(props)\n\n      return (\n        <VWindow\n          ref={ windowRef }\n          { ...windowProps }\n          v-model={ model.value }\n          class={[\n            'v-carousel',\n            {\n              'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,\n              'v-carousel--vertical-delimiters': props.verticalDelimiters,\n            },\n            props.class,\n          ]}\n          style={[\n            { height: convertToUnit(props.height) },\n            props.style,\n          ]}\n        >\n          {{\n            default: slots.default,\n            additional: ({ group }: { group: GroupProvide }) => (\n              <>\n                { !props.hideDelimiters && (\n                  <div\n                    class=\"v-carousel__controls\"\n                    style={{\n                      left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',\n                      right: props.verticalDelimiters === 'right' ? 0 : 'auto',\n                    }}\n                  >\n                    { group.items.value.length > 0 && (\n                      <VDefaultsProvider\n                        defaults={{\n                          VBtn: {\n                            color: props.color,\n                            icon: props.delimiterIcon,\n                            size: 'x-small',\n                            variant: 'text',\n                          },\n                        }}\n                        scoped\n                      >\n                        { group.items.value.map((item, index) => {\n                          const props = {\n                            id: `carousel-item-${item.id}`,\n                            'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),\n                            class: [\n                              'v-carousel__controls__item',\n                              group.isSelected(item.id) && 'v-btn--active',\n                            ],\n                            onClick: () => group.select(item.id, true),\n                          }\n\n                          return slots.item\n                            ? slots.item({ props, item })\n                            : (<VBtn { ...item } { ...props } />)\n                        })}\n                      </VDefaultsProvider>\n                    )}\n                  </div>\n                )}\n\n                { props.progress && (\n                  <VProgressLinear\n                    class=\"v-carousel__progress\"\n                    color={ typeof props.progress === 'string' ? props.progress : undefined }\n                    modelValue={ (group.getItemIndex(model.value) + 1) / group.items.value.length * 100 }\n                  />\n                )}\n              </>\n            ),\n            prev: slots.prev,\n            next: slots.next,\n          }}\n        </VWindow>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCarousel = InstanceType<typeof VCarousel>\n"],"mappings":"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"}

package/lib/components/VCarousel/VCarousel.sass

@@ -1,3 +1,4 @@
+@use '../../styles/tools'
 @use './variables' as *
 
 .v-carousel
@@ -7,7 +8,6 @@
 
   &__controls
     align-items: center
-    background: $carousel-controls-bg
     bottom: 0
     display: flex
     height: $carousel-controls-size
@@ -17,6 +17,8 @@
     width: 100%
     z-index: 1
 
+    @include tools.theme($carousel-controls-theme...)
+
     > .v-item-group
       flex: 0 1 auto
 

package/lib/components/VCarousel/_variables.scss

@@ -1,7 +1,13 @@
 // VCarousel
 $carousel-controls-bg: rgba(var(--v-theme-surface-variant), .3) !default;
+$carousel-controls-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $carousel-controls-size: 50px !default;
 $carousel-dot-margin: 0 8px !default;
 $carousel-dot-inactive-opacity: .5 !default;
 $carousel-dot-active-opacity: 1 !default;
 $carousel-dot-hover-opacity: .8 !default;
+
+$carousel-controls-theme: (
+  $carousel-controls-bg,
+  $carousel-controls-color
+) !default;