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

package/dist/vuetify-labs.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.
 */
@@ -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)]
+          })]);
+        })])]
+      })]);
     }
   });
 
@@ -25277,100 +25298,6 @@
     }
   });
 
-  // 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: vue.toRef(props, 'lineColor')
-        },
-        VTimelineItem: {
-          density: vue.toRef(props, 'density'),
-          lineInset: vue.toRef(props, 'lineInset')
-        }
-      });
-      const sideClasses = vue.computed(() => {
-        const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
-        return side && `v-timeline--side-${side}`;
-      });
-      const truncateClasses = vue.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(() => vue.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,
@@ -25517,6 +25444,103 @@
     }
   });
 
+  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: vue.toRef(props, 'lineColor')
+        },
+        VTimelineItem: {
+          density: vue.toRef(props, 'density'),
+          dotColor: vue.toRef(props, 'lineColor'),
+          fillDot: vue.toRef(props, 'fillDot'),
+          hideOpposite: vue.toRef(props, 'hideOpposite'),
+          iconColor: vue.toRef(props, 'iconColor'),
+          lineColor: vue.toRef(props, 'lineColor'),
+          lineInset: vue.toRef(props, 'lineInset'),
+          size: vue.toRef(props, 'size')
+        }
+      });
+      const sideClasses = vue.computed(() => {
+        const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
+        return side && `v-timeline--side-${side}`;
+      });
+      const truncateClasses = vue.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(() => vue.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({
@@ -27672,7 +27696,7 @@
       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
@@ -27925,7 +27949,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.5.9-dev.2024-03-26";
+  const version = "3.5.9-dev.2024-03-30";
 
   /* eslint-disable local-rules/sort-imports */