@vuetify/nightly 3.5.9-dev.2024-03-29 → 3.5.9-dev.2024-03-30

package/dist/vuetify-labs.d.ts

@@ -27678,6 +27678,7 @@ type VDatePickerSlots = Omit<VPickerSlots, 'header'> & {
 };
 declare const VDatePicker: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
+        transition: string;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -27687,6 +27688,7 @@ declare const VDatePicker: {
         tile: boolean;
         nextIcon: string;
         prevIcon: string;
+        reverseTransition: string;
         modeIcon: string;
         viewMode: "month" | "year" | "months";
         showAdjacentMonths: boolean;
@@ -27728,6 +27730,7 @@ declare const VDatePicker: {
         'update:year': (date: any) => true;
         'update:viewMode': (date: any) => true;
     }, "multiple" | "$children" | "v-slot:default" | "v-slots" | "modelValue" | "v-slot:title" | "update:modelValue" | "v-slot:header" | "v-slot:actions">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        transition: string;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -27737,6 +27740,7 @@ declare const VDatePicker: {
         tile: boolean;
         nextIcon: string;
         prevIcon: string;
+        reverseTransition: string;
         modeIcon: string;
         viewMode: "month" | "year" | "months";
         showAdjacentMonths: boolean;
@@ -27774,6 +27778,7 @@ declare const VDatePicker: {
         "onUpdate:viewMode"?: ((date: any) => any) | undefined;
     }, {
         active: string | string[];
+        transition: string;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -27784,6 +27789,7 @@ declare const VDatePicker: {
         tile: boolean;
         nextIcon: string;
         prevIcon: string;
+        reverseTransition: string;
         modeIcon: string;
         viewMode: "month" | "year" | "months";
         showAdjacentMonths: boolean;
@@ -27815,6 +27821,7 @@ declare const VDatePicker: {
         M: {};
         Defaults: {};
     }, {
+        transition: string;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -27824,6 +27831,7 @@ declare const VDatePicker: {
         tile: boolean;
         nextIcon: string;
         prevIcon: string;
+        reverseTransition: string;
         modeIcon: string;
         viewMode: "month" | "year" | "months";
         showAdjacentMonths: boolean;
@@ -27861,6 +27869,7 @@ declare const VDatePicker: {
         "onUpdate:viewMode"?: ((date: any) => any) | undefined;
     }, {}, {}, {}, {}, {
         active: string | string[];
+        transition: string;
         header: string;
         style: vue.StyleValue;
         title: string;
@@ -27871,6 +27880,7 @@ declare const VDatePicker: {
         tile: boolean;
         nextIcon: string;
         prevIcon: string;
+        reverseTransition: string;
         modeIcon: string;
         viewMode: "month" | "year" | "months";
         showAdjacentMonths: boolean;
@@ -27883,6 +27893,7 @@ declare const VDatePicker: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    transition: string;
     header: string;
     style: vue.StyleValue;
     title: string;
@@ -27892,6 +27903,7 @@ declare const VDatePicker: {
     tile: boolean;
     nextIcon: string;
     prevIcon: string;
+    reverseTransition: string;
     modeIcon: string;
     viewMode: "month" | "year" | "months";
     showAdjacentMonths: boolean;
@@ -27934,6 +27946,7 @@ declare const VDatePicker: {
     'update:viewMode': (date: any) => true;
 }, "multiple" | "$children" | "v-slot:default" | "v-slots" | "modelValue" | "v-slot:title" | "update:modelValue" | "v-slot:header" | "v-slot:actions">, string, {
     active: string | string[];
+    transition: string;
     header: string;
     style: vue.StyleValue;
     title: string;
@@ -27944,6 +27957,7 @@ declare const VDatePicker: {
     tile: boolean;
     nextIcon: string;
     prevIcon: string;
+    reverseTransition: string;
     modeIcon: string;
     viewMode: "month" | "year" | "months";
     showAdjacentMonths: boolean;
@@ -28044,6 +28058,14 @@ declare const VDatePicker: {
     hideWeekdays: BooleanConstructor;
     multiple: vue.PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    reverseTransition: {
+        type: StringConstructor;
+        default: string;
+    };
     active: {
         type: vue.PropType<string | string[]>;
         default: undefined;
@@ -28138,6 +28160,14 @@ declare const VDatePicker: {
     hideWeekdays: BooleanConstructor;
     multiple: vue.PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    reverseTransition: {
+        type: StringConstructor;
+        default: string;
+    };
     active: {
         type: vue.PropType<string | string[]>;
         default: undefined;
@@ -28521,7 +28551,9 @@ type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>;
 
 declare const VDatePickerMonth: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
+        transition: string;
         disabled: boolean;
+        reverseTransition: string;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -28572,7 +28604,9 @@ declare const VDatePickerMonth: {
         'update:month': (date: number) => true;
         'update:year': (date: number) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        transition: string;
         disabled: boolean;
+        reverseTransition: string;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -28619,7 +28653,9 @@ declare const VDatePickerMonth: {
         "onUpdate:month"?: ((date: number) => any) | undefined;
         "onUpdate:year"?: ((date: number) => any) | undefined;
     }, {
+        transition: string;
         disabled: boolean;
+        reverseTransition: string;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -28642,7 +28678,9 @@ declare const VDatePickerMonth: {
         M: {};
         Defaults: {};
     }, {
+        transition: string;
         disabled: boolean;
+        reverseTransition: string;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -28689,7 +28727,9 @@ declare const VDatePickerMonth: {
         "onUpdate:month"?: ((date: number) => any) | undefined;
         "onUpdate:year"?: ((date: number) => any) | undefined;
     }, () => JSX.Element, {}, {}, {}, {
+        transition: string;
         disabled: boolean;
+        reverseTransition: string;
         showAdjacentMonths: boolean;
         weekdays: number[];
         hideWeekdays: boolean;
@@ -28699,7 +28739,9 @@ declare const VDatePickerMonth: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    transition: string;
     disabled: boolean;
+    reverseTransition: string;
     showAdjacentMonths: boolean;
     weekdays: number[];
     hideWeekdays: boolean;
@@ -28750,7 +28792,9 @@ declare const VDatePickerMonth: {
     'update:month': (date: number) => true;
     'update:year': (date: number) => true;
 }, string, {
+    transition: string;
     disabled: boolean;
+    reverseTransition: string;
     showAdjacentMonths: boolean;
     weekdays: number[];
     hideWeekdays: boolean;
@@ -28796,6 +28840,14 @@ declare const VDatePickerMonth: {
     hideWeekdays: BooleanConstructor;
     multiple: PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    reverseTransition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, vue.ExtractPropTypes<{
     allowedDates: PropType<unknown[] | ((date: unknown) => boolean)>;
     disabled: BooleanConstructor;
@@ -28827,6 +28879,14 @@ declare const VDatePickerMonth: {
     hideWeekdays: BooleanConstructor;
     multiple: PropType<number | boolean | "range" | (string & {})>;
     showWeek: BooleanConstructor;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    reverseTransition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>;
 type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>;
 

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.9-dev.2024-03-29
+* Vuetify v3.5.9-dev.2024-03-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -18715,7 +18715,7 @@ const VDataTableFooter = genericComponent()({
       }
       return {
         ...option,
-        title: t(option.title)
+        title: !isNaN(Number(option.title)) ? option.title : t(option.title)
       };
     }));
     useRender(() => {
@@ -20765,6 +20765,14 @@ const makeVDatePickerMonthProps = propsFactory({
   hideWeekdays: Boolean,
   multiple: [Boolean, Number, String],
   showWeek: Boolean,
+  transition: {
+    type: String,
+    default: 'picker-transition'
+  },
+  reverseTransition: {
+    type: String,
+    default: 'picker-reverse-transition'
+  },
   ...makeCalendarProps()
 }, 'VDatePickerMonth');
 const VDatePickerMonth = genericComponent()({
@@ -20789,6 +20797,10 @@ const VDatePickerMonth = genericComponent()({
     const adapter = useDate();
     const rangeStart = shallowRef();
     const rangeStop = shallowRef();
+    const isReverse = shallowRef(false);
+    const transition = computed(() => {
+      return !isReverse.value ? props.transition : props.reverseTransition;
+    });
     if (props.multiple === 'range' && model.value.length > 0) {
       rangeStart.value = model.value[0];
       if (model.value.length > 1) {
@@ -20799,6 +20811,10 @@ const VDatePickerMonth = genericComponent()({
       const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity;
       return model.value.length >= max;
     });
+    watch(daysInMonth, (val, oldVal) => {
+      if (!oldVal) return;
+      isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date);
+    });
     function onRangeClick(value) {
       const _value = adapter.startOfDay(value);
       if (!rangeStart.value) {
@@ -20858,48 +20874,53 @@ const VDatePickerMonth = genericComponent()({
       "class": "v-date-picker-month__day"
     }, [createTextVNode("\xA0")]), weekNumbers.value.map(week => createVNode("div", {
       "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
-    }, [week]))]), createVNode("div", {
-      "ref": daysRef,
-      "class": "v-date-picker-month__days"
-    }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => createVNode("div", {
-      "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
-    }, [weekDay])), daysInMonth.value.map((item, i) => {
-      const slotProps = {
-        props: {
-          onClick: () => onClick(item.date)
-        },
-        item,
-        i
-      };
-      if (atMax.value && !item.isSelected) {
-        item.isDisabled = true;
-      }
-      return createVNode("div", {
-        "class": ['v-date-picker-month__day', {
-          'v-date-picker-month__day--adjacent': item.isAdjacent,
-          'v-date-picker-month__day--hide-adjacent': item.isHidden,
-          'v-date-picker-month__day--selected': item.isSelected,
-          'v-date-picker-month__day--week-end': item.isWeekEnd,
-          'v-date-picker-month__day--week-start': item.isWeekStart
-        }],
-        "data-v-date": !item.isDisabled ? item.isoDate : undefined
-      }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
-        "defaults": {
-          VBtn: {
-            class: 'v-date-picker-month__day-btn',
-            color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
-            disabled: item.isDisabled,
-            icon: true,
-            ripple: false,
-            text: item.localized,
-            variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
+    }, [week]))]), createVNode(MaybeTransition, {
+      "name": transition.value
+    }, {
+      default: () => [createVNode("div", {
+        "ref": daysRef,
+        "key": daysInMonth.value[0].date.toString(),
+        "class": "v-date-picker-month__days"
+      }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => createVNode("div", {
+        "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
+      }, [weekDay])), daysInMonth.value.map((item, i) => {
+        const slotProps = {
+          props: {
             onClick: () => onClick(item.date)
-          }
+          },
+          item,
+          i
+        };
+        if (atMax.value && !item.isSelected) {
+          item.isDisabled = true;
         }
-      }, {
-        default: () => [slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null)]
-      })]);
-    })])]);
+        return createVNode("div", {
+          "class": ['v-date-picker-month__day', {
+            'v-date-picker-month__day--adjacent': item.isAdjacent,
+            'v-date-picker-month__day--hide-adjacent': item.isHidden,
+            'v-date-picker-month__day--selected': item.isSelected,
+            'v-date-picker-month__day--week-end': item.isWeekEnd,
+            'v-date-picker-month__day--week-start': item.isWeekStart
+          }],
+          "data-v-date": !item.isDisabled ? item.isoDate : undefined
+        }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              class: 'v-date-picker-month__day-btn',
+              color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
+              disabled: item.isDisabled,
+              icon: true,
+              ripple: false,
+              text: item.localized,
+              variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
+              onClick: () => onClick(item.date)
+            }
+          }
+        }, {
+          default: () => [slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null)]
+        })]);
+      })])]
+    })]);
   }
 });
 
@@ -27671,7 +27692,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.9-dev.2024-03-29";
+const version$1 = "3.5.9-dev.2024-03-30";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -27924,7 +27945,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.9-dev.2024-03-29";
+const version = "3.5.9-dev.2024-03-30";
 
 /* eslint-disable local-rules/sort-imports */