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

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.9-dev.2024-03-26
+* Vuetify v3.5.9-dev.2024-03-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -18948,7 +18948,7 @@ const VDataTableFooter = genericComponent()({
       }
       return {
         ...option,
-        title: t(option.title)
+        title: !isNaN(Number(option.title)) ? option.title : t(option.title)
       };
     }));
     useRender(() => {
@@ -20998,6 +20998,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()({
@@ -21022,6 +21030,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) {
@@ -21032,6 +21044,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) {
@@ -21091,48 +21107,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)]
+        })]);
+      })])]
+    })]);
   }
 });
 
@@ -25506,100 +25527,6 @@ const VThemeProvider = genericComponent()({
   }
 });
 
-// Types
-
-const makeVTimelineProps = propsFactory({
-  align: {
-    type: String,
-    default: 'center',
-    validator: v => ['center', 'start'].includes(v)
-  },
-  direction: {
-    type: String,
-    default: 'vertical',
-    validator: v => ['vertical', 'horizontal'].includes(v)
-  },
-  justify: {
-    type: String,
-    default: 'auto',
-    validator: v => ['auto', 'center'].includes(v)
-  },
-  side: {
-    type: String,
-    validator: v => v == null || ['start', 'end'].includes(v)
-  },
-  lineInset: {
-    type: [String, Number],
-    default: 0
-  },
-  lineThickness: {
-    type: [String, Number],
-    default: 2
-  },
-  lineColor: String,
-  truncateLine: {
-    type: String,
-    validator: v => ['start', 'end', 'both'].includes(v)
-  },
-  ...makeComponentProps(),
-  ...makeDensityProps(),
-  ...makeTagProps(),
-  ...makeThemeProps()
-}, 'VTimeline');
-const VTimeline = genericComponent()({
-  name: 'VTimeline',
-  props: makeVTimelineProps(),
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
-    const {
-      densityClasses
-    } = useDensity(props);
-    const {
-      rtlClasses
-    } = useRtl();
-    provideDefaults({
-      VTimelineDivider: {
-        lineColor: toRef(props, 'lineColor')
-      },
-      VTimelineItem: {
-        density: toRef(props, 'density'),
-        lineInset: toRef(props, 'lineInset')
-      }
-    });
-    const sideClasses = computed(() => {
-      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
-      return side && `v-timeline--side-${side}`;
-    });
-    const truncateClasses = computed(() => {
-      const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
-      switch (props.truncateLine) {
-        case 'both':
-          return classes;
-        case 'start':
-          return classes[0];
-        case 'end':
-          return classes[1];
-        default:
-          return null;
-      }
-    });
-    useRender(() => createVNode(props.tag, {
-      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
-        'v-timeline--inset-line': !!props.lineInset
-      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
-      "style": [{
-        '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-      }, props.style]
-    }, slots));
-    return {};
-  }
-});
-
 const makeVTimelineDividerProps = propsFactory({
   dotColor: String,
   fillDot: Boolean,
@@ -25746,6 +25673,103 @@ const VTimelineItem = genericComponent()({
   }
 });
 
+const makeVTimelineProps = propsFactory({
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['center', 'start'].includes(v)
+  },
+  direction: {
+    type: String,
+    default: 'vertical',
+    validator: v => ['vertical', 'horizontal'].includes(v)
+  },
+  justify: {
+    type: String,
+    default: 'auto',
+    validator: v => ['auto', 'center'].includes(v)
+  },
+  side: {
+    type: String,
+    validator: v => v == null || ['start', 'end'].includes(v)
+  },
+  lineThickness: {
+    type: [String, Number],
+    default: 2
+  },
+  lineColor: String,
+  truncateLine: {
+    type: String,
+    validator: v => ['start', 'end', 'both'].includes(v)
+  },
+  ...only(makeVTimelineItemProps({
+    lineInset: 0
+  }), ['dotColor', 'fillDot', 'hideOpposite', 'iconColor', 'lineInset', 'size']),
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'VTimeline');
+const VTimeline = genericComponent()({
+  name: 'VTimeline',
+  props: makeVTimelineProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      rtlClasses
+    } = useRtl();
+    provideDefaults({
+      VTimelineDivider: {
+        lineColor: toRef(props, 'lineColor')
+      },
+      VTimelineItem: {
+        density: toRef(props, 'density'),
+        dotColor: toRef(props, 'lineColor'),
+        fillDot: toRef(props, 'fillDot'),
+        hideOpposite: toRef(props, 'hideOpposite'),
+        iconColor: toRef(props, 'iconColor'),
+        lineColor: toRef(props, 'lineColor'),
+        lineInset: toRef(props, 'lineInset'),
+        size: toRef(props, 'size')
+      }
+    });
+    const sideClasses = computed(() => {
+      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
+      return side && `v-timeline--side-${side}`;
+    });
+    const truncateClasses = computed(() => {
+      const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
+      switch (props.truncateLine) {
+        case 'both':
+          return classes;
+        case 'start':
+          return classes[0];
+        case 'end':
+          return classes[1];
+        default:
+          return null;
+      }
+    });
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+        'v-timeline--inset-line': !!props.lineInset
+      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
+      "style": [{
+        '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
+      }, props.style]
+    }, slots));
+    return {};
+  }
+});
+
 const makeVToolbarItemsProps = propsFactory({
   ...makeComponentProps(),
   ...makeVariantProps({
@@ -26256,7 +26280,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.9-dev.2024-03-26";
+const version$1 = "3.5.9-dev.2024-03-30";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26281,7 +26305,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.5.9-dev.2024-03-26";
+const version = "3.5.9-dev.2024-03-30";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };