vuetify 3.6.2 → 3.6.4

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

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType, Ref, JSXComponent, UnwrapRef } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, ComponentPublicInstance, PropType, Ref, JSXComponent, UnwrapRef } from 'vue';
 
 type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = {
     $children?: (VNodeChild | (T extends {
@@ -34,6 +34,11 @@ declare function deepEqual(a: any, b: any): boolean;
 type SelectItemKey<T = Record<string, any>> = boolean | null | undefined | string | readonly (string | number)[] | ((item: T, fallback?: any) => any);
 type EventProp<T extends any[] = any[], F = (...args: T) => void> = F;
 declare const EventProp: <T extends any[] = any[]>() => PropType<(...args: T) => void>;
+type TemplateRef = {
+    (target: Element | ComponentPublicInstance | null): void;
+    value: HTMLElement | ComponentPublicInstance | null | undefined;
+    readonly el: HTMLElement | undefined;
+};
 
 interface LoaderSlotProps {
     color: string | undefined;
@@ -207,7 +212,7 @@ declare function provideSelection(props: SelectionProps, { allItems, currentPage
     isSomeSelected: (items: SelectableItem | SelectableItem[]) => boolean;
     someSelected: vue.ComputedRef<boolean>;
     allSelected: vue.ComputedRef<boolean>;
-    showSelectAll: boolean;
+    showSelectAll: vue.ComputedRef<boolean>;
 };
 
 declare const breakpoints: readonly ["sm", "md", "lg", "xl", "xxl"];
@@ -248,7 +253,7 @@ type VDataTableHeadersSlots = {
 };
 declare const VDataTableHeaders: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         multiSort: boolean;
         sortAscIcon: IconValue;
@@ -280,7 +285,7 @@ declare const VDataTableHeaders: {
         "v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
         "v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
     }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         multiSort: boolean;
         sortAscIcon: IconValue;
@@ -312,7 +317,7 @@ declare const VDataTableHeaders: {
         "v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
         "v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
     }, {
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         multiSort: boolean;
         sortAscIcon: IconValue;
@@ -341,7 +346,7 @@ declare const VDataTableHeaders: {
         M: {};
         Defaults: {};
     }, {
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         multiSort: boolean;
         sortAscIcon: IconValue;
@@ -373,7 +378,7 @@ declare const VDataTableHeaders: {
         "v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
         "v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
     }, {}, {}, {}, {}, {
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         multiSort: boolean;
         sortAscIcon: IconValue;
@@ -383,7 +388,7 @@ declare const VDataTableHeaders: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     multiSort: boolean;
     sortAscIcon: IconValue;
@@ -415,7 +420,7 @@ declare const VDataTableHeaders: {
     "v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
     "v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => vue.VNodeChild) | undefined;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     multiSort: boolean;
     sortAscIcon: IconValue;
@@ -439,8 +444,8 @@ declare const VDataTableHeaders: {
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -460,8 +465,8 @@ declare const VDataTableHeaders: {
 }, vue.ExtractPropTypes<{
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -522,7 +527,7 @@ type VDataTableRowSlots<T> = {
 };
 declare const VDataTableRow: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
-        mobile: boolean;
+        mobile: boolean | null;
     } & {
         onClick?: ((args_0: MouseEvent) => void) | undefined;
         onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
@@ -530,7 +535,7 @@ declare const VDataTableRow: {
         mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         index?: number | undefined;
     }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "item" | "cellProps" | `v-slot:header.${string}` | `v-slot:item.${string}`>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        mobile: boolean;
+        mobile: boolean | null;
     } & {
         onClick?: ((args_0: MouseEvent) => void) | undefined;
         onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
@@ -538,7 +543,7 @@ declare const VDataTableRow: {
         mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         index?: number | undefined;
     }, {
-        mobile: boolean;
+        mobile: boolean | null;
     }, true, {}, vue.SlotsType<Partial<{
         [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -566,7 +571,7 @@ declare const VDataTableRow: {
         M: {};
         Defaults: {};
     }, {
-        mobile: boolean;
+        mobile: boolean | null;
     } & {
         onClick?: ((args_0: MouseEvent) => void) | undefined;
         onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
@@ -574,13 +579,13 @@ declare const VDataTableRow: {
         mobileBreakpoint?: number | DisplayBreakpoint | undefined;
         index?: number | undefined;
     }, {}, {}, {}, {}, {
-        mobile: boolean;
+        mobile: boolean | null;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    mobile: boolean;
+    mobile: boolean | null;
 } & {
     onClick?: ((args_0: MouseEvent) => void) | undefined;
     onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
@@ -588,7 +593,7 @@ declare const VDataTableRow: {
     mobileBreakpoint?: number | DisplayBreakpoint | undefined;
     index?: number | undefined;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "item" | "cellProps" | `v-slot:header.${string}` | `v-slot:item.${string}`>, string, {
-    mobile: boolean;
+    mobile: boolean | null;
 }, {}, string, vue.SlotsType<Partial<{
     [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
@@ -616,8 +621,8 @@ declare const VDataTableRow: {
     cellProps?: CellProps<T> | undefined;
 }, VDataTableRowSlots<T>>) & FilterPropsOptions<{
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     index: NumberConstructor;
@@ -628,8 +633,8 @@ declare const VDataTableRow: {
     onDblclick: PropType<(args_0: MouseEvent) => void>;
 }, vue.ExtractPropTypes<{
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     index: NumberConstructor;
@@ -654,7 +659,7 @@ declare const VDataTableRows: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
         noDataText: string;
         loadingText: string;
-        mobile: boolean;
+        mobile: boolean | null;
         hideNoData: boolean;
     } & {
         loading?: string | boolean | undefined;
@@ -664,7 +669,7 @@ declare const VDataTableRows: {
     }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "items" | "v-slot:item" | "v-slot:no-data" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         noDataText: string;
         loadingText: string;
-        mobile: boolean;
+        mobile: boolean | null;
         hideNoData: boolean;
     } & {
         loading?: string | boolean | undefined;
@@ -674,7 +679,7 @@ declare const VDataTableRows: {
     }, {
         noDataText: string;
         loadingText: string;
-        mobile: boolean;
+        mobile: boolean | null;
         hideNoData: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -744,7 +749,7 @@ declare const VDataTableRows: {
     }, {
         noDataText: string;
         loadingText: string;
-        mobile: boolean;
+        mobile: boolean | null;
         hideNoData: boolean;
     } & {
         loading?: string | boolean | undefined;
@@ -754,7 +759,7 @@ declare const VDataTableRows: {
     }, {}, {}, {}, {}, {
         noDataText: string;
         loadingText: string;
-        mobile: boolean;
+        mobile: boolean | null;
         hideNoData: boolean;
     }>;
     __isFragment?: undefined;
@@ -763,7 +768,7 @@ declare const VDataTableRows: {
 } & vue.ComponentOptionsBase<{
     noDataText: string;
     loadingText: string;
-    mobile: boolean;
+    mobile: boolean | null;
     hideNoData: boolean;
 } & {
     loading?: string | boolean | undefined;
@@ -773,7 +778,7 @@ declare const VDataTableRows: {
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "items" | "v-slot:item" | "v-slot:no-data" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row">, string, {
     noDataText: string;
     loadingText: string;
-    mobile: boolean;
+    mobile: boolean | null;
     hideNoData: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -839,8 +844,8 @@ declare const VDataTableRows: {
     items?: readonly (DataTableItem<T> | Group<T>)[] | undefined;
 }, VDataTableRowsSlots<T>>) & FilterPropsOptions<{
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     loading: (StringConstructor | BooleanConstructor)[];
@@ -861,8 +866,8 @@ declare const VDataTableRows: {
     cellProps: PropType<CellProps<any>>;
 }, vue.ExtractPropTypes<{
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     loading: (StringConstructor | BooleanConstructor)[];
@@ -931,7 +936,7 @@ declare const VDataTable: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -1006,7 +1011,7 @@ declare const VDataTable: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -1072,7 +1077,7 @@ declare const VDataTable: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -1220,7 +1225,7 @@ declare const VDataTable: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -1286,7 +1291,7 @@ declare const VDataTable: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -1334,7 +1339,7 @@ declare const VDataTable: {
     sortBy: readonly SortItem[];
     pageText: string;
     page: string | number;
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -1409,7 +1414,7 @@ declare const VDataTable: {
     sortBy: readonly SortItem[];
     pageText: string;
     page: string | number;
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -1684,8 +1689,8 @@ declare const VDataTable: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -1891,8 +1896,8 @@ declare const VDataTable: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -2303,7 +2308,7 @@ type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
     'body.prepend': VDataTableVirtualSlotProps<T>;
     'body.append': VDataTableVirtualSlotProps<T>;
     item: {
-        itemRef: Ref<HTMLElement | undefined>;
+        itemRef: TemplateRef;
     };
 };
 type ItemType$1<T> = T extends readonly (infer U)[] ? U : never;
@@ -2314,7 +2319,7 @@ declare const VDataTableVirtual: {
         noDataText: string;
         loadingText: string;
         sortBy: readonly SortItem[];
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -2412,7 +2417,7 @@ declare const VDataTableVirtual: {
         noDataText: string;
         loadingText: string;
         sortBy: readonly SortItem[];
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -2504,7 +2509,7 @@ declare const VDataTableVirtual: {
         noDataText: string;
         loadingText: string;
         sortBy: readonly SortItem[];
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -2570,7 +2575,7 @@ declare const VDataTableVirtual: {
         } & {
             props: Record<string, any>;
         } & {
-            itemRef: Ref<HTMLElement | undefined>;
+            itemRef: TemplateRef;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -2620,7 +2625,7 @@ declare const VDataTableVirtual: {
         noDataText: string;
         loadingText: string;
         sortBy: readonly SortItem[];
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -2712,7 +2717,7 @@ declare const VDataTableVirtual: {
         noDataText: string;
         loadingText: string;
         sortBy: readonly SortItem[];
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -2744,7 +2749,7 @@ declare const VDataTableVirtual: {
     noDataText: string;
     loadingText: string;
     sortBy: readonly SortItem[];
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -2842,7 +2847,7 @@ declare const VDataTableVirtual: {
     noDataText: string;
     loadingText: string;
     sortBy: readonly SortItem[];
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -2908,7 +2913,7 @@ declare const VDataTableVirtual: {
     } & {
         props: Record<string, any>;
     } & {
-        itemRef: Ref<HTMLElement | undefined>;
+        itemRef: TemplateRef;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -2999,8 +3004,8 @@ declare const VDataTableVirtual: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -3151,8 +3156,8 @@ declare const VDataTableVirtual: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -3279,7 +3284,7 @@ declare const VDataTableServer: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -3393,7 +3398,7 @@ declare const VDataTableServer: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -3499,7 +3504,7 @@ declare const VDataTableServer: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -3645,7 +3650,7 @@ declare const VDataTableServer: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -3751,7 +3756,7 @@ declare const VDataTableServer: {
         sortBy: readonly SortItem[];
         pageText: string;
         page: string | number;
-        mobile: boolean;
+        mobile: boolean | null;
         sticky: boolean;
         expanded: readonly string[];
         density: Density;
@@ -3797,7 +3802,7 @@ declare const VDataTableServer: {
     sortBy: readonly SortItem[];
     pageText: string;
     page: string | number;
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -3911,7 +3916,7 @@ declare const VDataTableServer: {
     sortBy: readonly SortItem[];
     pageText: string;
     page: string | number;
-    mobile: boolean;
+    mobile: boolean | null;
     sticky: boolean;
     expanded: readonly string[];
     density: Density;
@@ -4130,8 +4135,8 @@ declare const VDataTableServer: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;
@@ -4333,8 +4338,8 @@ declare const VDataTableServer: {
     hover: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     mobile: {
-        type: BooleanConstructor;
-        default: null;
+        type: vue.PropType<boolean | null>;
+        default: boolean;
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     color: StringConstructor;

package/lib/components/VDatePicker/VDatePickerYears.mjs

@@ -6,8 +6,8 @@ import "./VDatePickerYears.css";
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 import { useDate } from "../../composables/date/index.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-import { computed, nextTick, onMounted, ref, watchEffect } from 'vue';
-import { convertToUnit, createRange, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { computed, nextTick, onMounted, watchEffect } from 'vue';
+import { convertToUnit, createRange, genericComponent, propsFactory, templateRef, useRender } from "../../util/index.mjs"; // Types
 // Types
 export const makeVDatePickerYearsProps = propsFactory({
   color: String,
@@ -53,10 +53,10 @@ export const VDatePickerYears = genericComponent()({
     watchEffect(() => {
       model.value = model.value ?? adapter.getYear(adapter.date());
     });
-    const yearRef = ref();
+    const yearRef = templateRef();
     onMounted(async () => {
       await nextTick();
-      yearRef.value?.$el.scrollIntoView({
+      yearRef.el?.scrollIntoView({
         block: 'center'
       });
     });

package/lib/components/VDatePicker/VDatePickerYears.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerYears.mjs","names":["VBtn","useDate","useProxiedModel","computed","nextTick","onMounted","ref","watchEffect","convertToUnit","createRange","genericComponent","propsFactory","useRender","makeVDatePickerYearsProps","color","String","height","Number","min","max","modelValue","VDatePickerYears","name","props","emits","year","setup","_ref","emit","slots","adapter","model","years","getYear","date","startOfYear","setYear","map","i","text","format","value","yearRef","$el","scrollIntoView","block","_createVNode","btnProps","undefined","active","rounded","variant","onClick","_mergeProps"],"sources":["../../../src/components/VDatePicker/VDatePickerYears.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerYears.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDate } from '@/composables/date'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watchEffect } from 'vue'\nimport { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VDatePickerYearsSlots = {\n  year: {\n    year: {\n      text: string\n      value: number\n    }\n    i: number\n    props: {\n      active: boolean\n      color?: string\n      rounded: boolean\n      text: string\n      variant: 'flat' | 'text'\n      onClick: () => void\n    }\n  }\n}\n\nexport const makeVDatePickerYearsProps = propsFactory({\n  color: String,\n  height: [String, Number],\n  min: null as any as PropType<unknown>,\n  max: null as any as PropType<unknown>,\n  modelValue: Number,\n}, 'VDatePickerYears')\n\nexport const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({\n  name: 'VDatePickerYears',\n\n  props: makeVDatePickerYearsProps(),\n\n  emits: {\n    'update:modelValue': (year: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const model = useProxiedModel(props, 'modelValue')\n    const years = computed(() => {\n      const year = adapter.getYear(adapter.date())\n\n      let min = year - 100\n      let max = year + 52\n\n      if (props.min) {\n        min = adapter.getYear(adapter.date(props.min))\n      }\n\n      if (props.max) {\n        max = adapter.getYear(adapter.date(props.max))\n      }\n\n      let date = adapter.startOfYear(adapter.date())\n\n      date = adapter.setYear(date, min)\n\n      return createRange(max - min + 1, min).map(i => {\n        const text = adapter.format(date, 'year')\n        date = adapter.setYear(date, adapter.getYear(date) + 1)\n\n        return {\n          text,\n          value: i,\n        }\n      })\n    })\n\n    watchEffect(() => {\n      model.value = model.value ?? adapter.getYear(adapter.date())\n    })\n\n    const yearRef = ref<VBtn>()\n    onMounted(async () => {\n      await nextTick()\n      yearRef.value?.$el.scrollIntoView({ block: 'center' })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-date-picker-years\"\n        style={{\n          height: convertToUnit(props.height),\n        }}\n      >\n        <div class=\"v-date-picker-years__content\">\n          { years.value.map((year, i) => {\n            const btnProps = {\n              ref: model.value === year.value ? yearRef : undefined,\n              active: model.value === year.value,\n              color: model.value === year.value ? props.color : undefined,\n              rounded: true,\n              text: year.text,\n              variant: model.value === year.value ? 'flat' : 'text',\n              onClick: () => {\n                if (model.value === year.value) {\n                  emit('update:modelValue', model.value)\n                  return\n                }\n                model.value = year.value\n              },\n            } as const\n\n            return slots.year?.({\n              year,\n              i,\n              props: btnProps,\n            }) ?? (\n              <VBtn\n                key=\"month\"\n                { ...btnProps }\n              />\n            )\n          })}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDatePickerYears = InstanceType<typeof VDatePickerYears>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI,6BAEb;AAAA,SACSC,OAAO;AAAA,SACPC,eAAe,8CAExB;AACA,SAASC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,WAAW,QAAQ,KAAK;AAAA,SAC5DC,aAAa,EAAEC,WAAW,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAE9E;AAGA;AAmBA,OAAO,MAAMC,yBAAyB,GAAGF,YAAY,CAAC;EACpDG,KAAK,EAAEC,MAAM;EACbC,MAAM,EAAE,CAACD,MAAM,EAAEE,MAAM,CAAC;EACxBC,GAAG,EAAE,IAAgC;EACrCC,GAAG,EAAE,IAAgC;EACrCC,UAAU,EAAEH;AACd,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMI,gBAAgB,GAAGX,gBAAgB,CAAwB,CAAC,CAAC;EACxEY,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAEV,yBAAyB,CAAC,CAAC;EAElCW,KAAK,EAAE;IACL,mBAAmB,EAAGC,IAAY,IAAK;EACzC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAMG,OAAO,GAAG7B,OAAO,CAAC,CAAC;IACzB,MAAM8B,KAAK,GAAG7B,eAAe,CAACqB,KAAK,EAAE,YAAY,CAAC;IAClD,MAAMS,KAAK,GAAG7B,QAAQ,CAAC,MAAM;MAC3B,MAAMsB,IAAI,GAAGK,OAAO,CAACG,OAAO,CAACH,OAAO,CAACI,IAAI,CAAC,CAAC,CAAC;MAE5C,IAAIhB,GAAG,GAAGO,IAAI,GAAG,GAAG;MACpB,IAAIN,GAAG,GAAGM,IAAI,GAAG,EAAE;MAEnB,IAAIF,KAAK,CAACL,GAAG,EAAE;QACbA,GAAG,GAAGY,OAAO,CAACG,OAAO,CAACH,OAAO,CAACI,IAAI,CAACX,KAAK,CAACL,GAAG,CAAC,CAAC;MAChD;MAEA,IAAIK,KAAK,CAACJ,GAAG,EAAE;QACbA,GAAG,GAAGW,OAAO,CAACG,OAAO,CAACH,OAAO,CAACI,IAAI,CAACX,KAAK,CAACJ,GAAG,CAAC,CAAC;MAChD;MAEA,IAAIe,IAAI,GAAGJ,OAAO,CAACK,WAAW,CAACL,OAAO,CAACI,IAAI,CAAC,CAAC,CAAC;MAE9CA,IAAI,GAAGJ,OAAO,CAACM,OAAO,CAACF,IAAI,EAAEhB,GAAG,CAAC;MAEjC,OAAOT,WAAW,CAACU,GAAG,GAAGD,GAAG,GAAG,CAAC,EAAEA,GAAG,CAAC,CAACmB,GAAG,CAACC,CAAC,IAAI;QAC9C,MAAMC,IAAI,GAAGT,OAAO,CAACU,MAAM,CAACN,IAAI,EAAE,MAAM,CAAC;QACzCA,IAAI,GAAGJ,OAAO,CAACM,OAAO,CAACF,IAAI,EAAEJ,OAAO,CAACG,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEvD,OAAO;UACLK,IAAI;UACJE,KAAK,EAAEH;QACT,CAAC;MACH,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF/B,WAAW,CAAC,MAAM;MAChBwB,KAAK,CAACU,KAAK,GAAGV,KAAK,CAACU,KAAK,IAAIX,OAAO,CAACG,OAAO,CAACH,OAAO,CAACI,IAAI,CAAC,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEF,MAAMQ,OAAO,GAAGpC,GAAG,CAAO,CAAC;IAC3BD,SAAS,CAAC,YAAY;MACpB,MAAMD,QAAQ,CAAC,CAAC;MAChBsC,OAAO,CAACD,KAAK,EAAEE,GAAG,CAACC,cAAc,CAAC;QAAEC,KAAK,EAAE;MAAS,CAAC,CAAC;IACxD,CAAC,CAAC;IAEFjC,SAAS,CAAC,MAAAkC,YAAA;MAAA;MAAA,SAGC;QACL9B,MAAM,EAAER,aAAa,CAACe,KAAK,CAACP,MAAM;MACpC;IAAC,IAAA8B,YAAA;MAAA;IAAA,IAGGd,KAAK,CAACS,KAAK,CAACJ,GAAG,CAAC,CAACZ,IAAI,EAAEa,CAAC,KAAK;MAC7B,MAAMS,QAAQ,GAAG;QACfzC,GAAG,EAAEyB,KAAK,CAACU,KAAK,KAAKhB,IAAI,CAACgB,KAAK,GAAGC,OAAO,GAAGM,SAAS;QACrDC,MAAM,EAAElB,KAAK,CAACU,KAAK,KAAKhB,IAAI,CAACgB,KAAK;QAClC3B,KAAK,EAAEiB,KAAK,CAACU,KAAK,KAAKhB,IAAI,CAACgB,KAAK,GAAGlB,KAAK,CAACT,KAAK,GAAGkC,SAAS;QAC3DE,OAAO,EAAE,IAAI;QACbX,IAAI,EAAEd,IAAI,CAACc,IAAI;QACfY,OAAO,EAAEpB,KAAK,CAACU,KAAK,KAAKhB,IAAI,CAACgB,KAAK,GAAG,MAAM,GAAG,MAAM;QACrDW,OAAO,EAAEA,CAAA,KAAM;UACb,IAAIrB,KAAK,CAACU,KAAK,KAAKhB,IAAI,CAACgB,KAAK,EAAE;YAC9Bb,IAAI,CAAC,mBAAmB,EAAEG,KAAK,CAACU,KAAK,CAAC;YACtC;UACF;UACAV,KAAK,CAACU,KAAK,GAAGhB,IAAI,CAACgB,KAAK;QAC1B;MACF,CAAU;MAEV,OAAOZ,KAAK,CAACJ,IAAI,GAAG;QAClBA,IAAI;QACJa,CAAC;QACDf,KAAK,EAAEwB;MACT,CAAC,CAAC,IAAAD,YAAA,CAAA9C,IAAA,EAAAqD,WAAA;QAAA;MAAA,GAGON,QAAQ,QAEhB;IACH,CAAC,CAAC,IAGP,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VDatePickerYears.mjs","names":["VBtn","useDate","useProxiedModel","computed","nextTick","onMounted","watchEffect","convertToUnit","createRange","genericComponent","propsFactory","templateRef","useRender","makeVDatePickerYearsProps","color","String","height","Number","min","max","modelValue","VDatePickerYears","name","props","emits","year","setup","_ref","emit","slots","adapter","model","years","getYear","date","startOfYear","setYear","map","i","text","format","value","yearRef","el","scrollIntoView","block","_createVNode","btnProps","ref","undefined","active","rounded","variant","onClick","_mergeProps"],"sources":["../../../src/components/VDatePicker/VDatePickerYears.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerYears.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDate } from '@/composables/date'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onMounted, watchEffect } from 'vue'\nimport { convertToUnit, createRange, genericComponent, propsFactory, templateRef, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VDatePickerYearsSlots = {\n  year: {\n    year: {\n      text: string\n      value: number\n    }\n    i: number\n    props: {\n      active: boolean\n      color?: string\n      rounded: boolean\n      text: string\n      variant: 'flat' | 'text'\n      onClick: () => void\n    }\n  }\n}\n\nexport const makeVDatePickerYearsProps = propsFactory({\n  color: String,\n  height: [String, Number],\n  min: null as any as PropType<unknown>,\n  max: null as any as PropType<unknown>,\n  modelValue: Number,\n}, 'VDatePickerYears')\n\nexport const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({\n  name: 'VDatePickerYears',\n\n  props: makeVDatePickerYearsProps(),\n\n  emits: {\n    'update:modelValue': (year: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const model = useProxiedModel(props, 'modelValue')\n    const years = computed(() => {\n      const year = adapter.getYear(adapter.date())\n\n      let min = year - 100\n      let max = year + 52\n\n      if (props.min) {\n        min = adapter.getYear(adapter.date(props.min))\n      }\n\n      if (props.max) {\n        max = adapter.getYear(adapter.date(props.max))\n      }\n\n      let date = adapter.startOfYear(adapter.date())\n\n      date = adapter.setYear(date, min)\n\n      return createRange(max - min + 1, min).map(i => {\n        const text = adapter.format(date, 'year')\n        date = adapter.setYear(date, adapter.getYear(date) + 1)\n\n        return {\n          text,\n          value: i,\n        }\n      })\n    })\n\n    watchEffect(() => {\n      model.value = model.value ?? adapter.getYear(adapter.date())\n    })\n\n    const yearRef = templateRef()\n\n    onMounted(async () => {\n      await nextTick()\n      yearRef.el?.scrollIntoView({ block: 'center' })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-date-picker-years\"\n        style={{\n          height: convertToUnit(props.height),\n        }}\n      >\n        <div class=\"v-date-picker-years__content\">\n          { years.value.map((year, i) => {\n            const btnProps = {\n              ref: model.value === year.value ? yearRef : undefined,\n              active: model.value === year.value,\n              color: model.value === year.value ? props.color : undefined,\n              rounded: true,\n              text: year.text,\n              variant: model.value === year.value ? 'flat' : 'text',\n              onClick: () => {\n                if (model.value === year.value) {\n                  emit('update:modelValue', model.value)\n                  return\n                }\n                model.value = year.value\n              },\n            } as const\n\n            return slots.year?.({\n              year,\n              i,\n              props: btnProps,\n            }) ?? (\n              <VBtn\n                key=\"month\"\n                { ...btnProps }\n              />\n            )\n          })}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDatePickerYears = InstanceType<typeof VDatePickerYears>\n"],"mappings":"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","ignoreList":[]}