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

package/dist/vuetify-labs.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.
 */
@@ -18719,7 +18719,7 @@
         }
         return {
           ...option,
-          title: t(option.title)
+          title: !isNaN(Number(option.title)) ? option.title : t(option.title)
         };
       }));
       useRender(() => {
@@ -20769,6 +20769,14 @@
     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()({
@@ -20793,6 +20801,10 @@
       const adapter = useDate();
       const rangeStart = vue.shallowRef();
       const rangeStop = vue.shallowRef();
+      const isReverse = vue.shallowRef(false);
+      const transition = vue.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) {
@@ -20803,6 +20815,10 @@
         const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity;
         return model.value.length >= max;
       });
+      vue.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) {
@@ -20862,48 +20878,53 @@
         "class": "v-date-picker-month__day"
       }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
-      }, [week]))]), vue.createVNode("div", {
-        "ref": daysRef,
-        "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => vue.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 vue.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) && vue.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]))]), vue.createVNode(MaybeTransition, {
+        "name": transition.value
+      }, {
+        default: () => [vue.createVNode("div", {
+          "ref": daysRef,
+          "key": daysInMonth.value[0].date.toString(),
+          "class": "v-date-picker-month__days"
+        }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => vue.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) ?? vue.createVNode(VBtn, slotProps.props, null)]
-        })]);
-      })])]);
+          return vue.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) && vue.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) ?? vue.createVNode(VBtn, slotProps.props, null)]
+          })]);
+        })])]
+      })]);
     }
   });
 
@@ -27675,7 +27696,7 @@
       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
@@ -27928,7 +27949,7 @@
 
   /* 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 */