vuetify 3.4.7 → 3.4.8

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.7
+* Vuetify v3.4.8
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -9829,7 +9829,7 @@
       } = useRtl();
       const {
         hasContent,
-        onAfterLeave
+        onAfterLeave: _onAfterLeave
       } = useLazy(props, isActive);
       const scrimColor = useBackgroundColor(vue.computed(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
@@ -9896,6 +9896,10 @@
       }, {
         immediate: true
       });
+      vue.onBeforeUnmount(() => {
+        if (!IN_BROWSER) return;
+        window.removeEventListener('keydown', onKeydown);
+      });
       function onKeydown(e) {
         if (e.key === 'Escape' && globalTop.value) {
           if (!props.persistent) {
@@ -9941,6 +9945,10 @@
           easing: standardEasing
         });
       }
+      function onAfterLeave() {
+        _onAfterLeave();
+        emit('afterLeave');
+      }
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         props: vue.mergeProps({
@@ -9969,10 +9977,7 @@
           "persisted": true,
           "transition": props.transition,
           "target": target.value,
-          "onAfterLeave": () => {
-            onAfterLeave();
-            emit('afterLeave');
-          }
+          "onAfterLeave": onAfterLeave
         }, {
           default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
             "ref": contentEl,
@@ -17750,7 +17755,7 @@
         "last-aria-label": props.lastPageLabel,
         "length": pageCount.value,
         "next-aria-label": props.nextPageLabel,
-        "prev-aria-label": props.prevPageLabel,
+        "previous-aria-label": props.prevPageLabel,
         "rounded": true,
         "show-first-last-page": true,
         "total-visible": props.showCurrentPage ? 1 : 0,
@@ -19617,21 +19622,125 @@
     }
   });
 
+  // Composables
+
   // Types
 
-  const makeVDatePickerMonthProps = propsFactory({
+  // Types
+
+  // Composables
+  const makeCalendarProps = propsFactory({
     allowedDates: [Array, Function],
     disabled: Boolean,
-    color: String,
+    displayValue: null,
+    modelValue: Array,
     month: [Number, String],
-    hideWeekdays: Boolean,
     max: null,
     min: null,
-    modelValue: Array,
-    multiple: Boolean,
     showAdjacentMonths: Boolean,
-    showWeek: Boolean,
     year: [Number, String]
+  }, 'calendar');
+  function useCalendar(props) {
+    const adapter = useDate();
+    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v));
+    const displayValue = vue.computed(() => {
+      if (props.displayValue) return adapter.date(props.displayValue);
+      if (model.value.length > 0) return adapter.date(model.value[0]);
+      if (props.min) return adapter.date(props.min);
+      if (Array.isArray(props.allowedDates)) return adapter.date(props.allowedDates[0]);
+      return adapter.date();
+    });
+    const year = useProxiedModel(props, 'year', undefined, v => {
+      const value = v != null ? Number(v) : adapter.getYear(displayValue.value);
+      return adapter.startOfYear(adapter.setYear(adapter.date(), value));
+    }, v => adapter.getYear(v));
+    const month = useProxiedModel(props, 'month', undefined, v => {
+      const value = v != null ? Number(v) : adapter.getMonth(displayValue.value);
+      const date = adapter.setYear(adapter.date(), adapter.getYear(year.value));
+      return adapter.setMonth(date, value);
+    }, v => adapter.getMonth(v));
+    const weeksInMonth = vue.computed(() => {
+      const weeks = adapter.getWeekArray(month.value);
+      const days = weeks.flat();
+
+      // Make sure there's always 6 weeks in month (6 * 7 days)
+      // But only do it if we're not hiding adjacent months?
+      const daysInMonth = 6 * 7;
+      if (days.length < daysInMonth) {
+        const lastDay = days[days.length - 1];
+        let week = [];
+        for (let day = 1; day <= daysInMonth - days.length; day++) {
+          week.push(adapter.addDays(lastDay, day));
+          if (day % 7 === 0) {
+            weeks.push(week);
+            week = [];
+          }
+        }
+      }
+      return weeks;
+    });
+    const daysInMonth = vue.computed(() => {
+      const days = weeksInMonth.value.flat();
+      const today = adapter.date();
+      return days.map((date, index) => {
+        const isoDate = adapter.toISO(date);
+        const isAdjacent = !adapter.isSameMonth(date, month.value);
+        const isStart = adapter.isSameDay(date, adapter.startOfMonth(month.value));
+        const isEnd = adapter.isSameDay(date, adapter.endOfMonth(month.value));
+        const isSame = adapter.isSameDay(date, month.value);
+        return {
+          date,
+          isoDate,
+          formatted: adapter.format(date, 'keyboardDate'),
+          year: adapter.getYear(date),
+          month: adapter.getMonth(date),
+          isDisabled: isDisabled(date),
+          isWeekStart: index % 7 === 0,
+          isWeekEnd: index % 7 === 6,
+          isToday: adapter.isSameDay(date, today),
+          isAdjacent,
+          isHidden: isAdjacent && !props.showAdjacentMonths,
+          isStart,
+          isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+          isEnd,
+          isSame,
+          localized: adapter.format(date, 'dayOfMonth')
+        };
+      });
+    });
+    const weekNumbers = vue.computed(() => {
+      return weeksInMonth.value.map(week => {
+        return week.length ? getWeek(adapter, week[0]) : null;
+      });
+    });
+    function isDisabled(value) {
+      if (props.disabled) return true;
+      const date = adapter.date(value);
+      if (props.min && adapter.isAfter(adapter.date(props.min), date)) return true;
+      if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
+      if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
+        return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
+      }
+      if (typeof props.allowedDates === 'function') {
+        return !props.allowedDates(date);
+      }
+      return false;
+    }
+    return {
+      displayValue,
+      daysInMonth,
+      model,
+      weeksInMonth,
+      weekNumbers
+    };
+  }
+
+  const makeVDatePickerMonthProps = propsFactory({
+    color: String,
+    hideWeekdays: Boolean,
+    multiple: Boolean,
+    showWeek: Boolean,
+    ...makeCalendarProps()
   }, 'VDatePickerMonth');
   const VDatePickerMonth = genericComponent()({
     name: 'VDatePickerMonth',
@@ -19647,87 +19756,12 @@
         slots
       } = _ref;
       const daysRef = vue.ref();
+      const {
+        daysInMonth,
+        model,
+        weekNumbers
+      } = useCalendar(props); // TODO: fix typing
       const adapter = useDate();
-      // model comes in always as array
-      // leaves as array if multiple
-      const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v));
-      const displayValue = vue.computed(() => {
-        if (model.value.length > 0) return adapter.date(model.value[0]);
-        if (props.min) return adapter.date(props.min);
-        if (Array.isArray(props.allowedDates)) return adapter.date(props.allowedDates[0]);
-        return adapter.date();
-      });
-      const year = useProxiedModel(props, 'year', undefined, v => {
-        const value = v != null ? Number(v) : adapter.getYear(displayValue.value);
-        return adapter.startOfYear(adapter.setYear(adapter.date(), value));
-      }, v => adapter.getYear(v));
-      const month = useProxiedModel(props, 'month', undefined, v => {
-        const value = v != null ? Number(v) : adapter.getMonth(displayValue.value);
-        const date = adapter.setYear(adapter.date(), adapter.getYear(year.value));
-        return adapter.setMonth(date, value);
-      }, v => adapter.getMonth(v));
-      const weeksInMonth = vue.computed(() => {
-        const weeks = adapter.getWeekArray(month.value);
-        const days = weeks.flat();
-
-        // Make sure there's always 6 weeks in month (6 * 7 days)
-        // But only do it if we're not hiding adjacent months?
-        const daysInMonth = 6 * 7;
-        if (days.length < daysInMonth) {
-          const lastDay = days[days.length - 1];
-          let week = [];
-          for (let day = 1; day <= daysInMonth - days.length; day++) {
-            week.push(adapter.addDays(lastDay, day));
-            if (day % 7 === 0) {
-              weeks.push(week);
-              week = [];
-            }
-          }
-        }
-        return weeks;
-      });
-      const daysInMonth = vue.computed(() => {
-        const days = weeksInMonth.value.flat();
-        const today = adapter.date();
-        return days.map((date, index) => {
-          const isoDate = adapter.toISO(date);
-          const isAdjacent = !adapter.isSameMonth(date, month.value);
-          return {
-            date,
-            isoDate,
-            formatted: adapter.format(date, 'keyboardDate'),
-            year: adapter.getYear(date),
-            month: adapter.getMonth(date),
-            isDisabled: isDisabled(date),
-            isWeekStart: index % 7 === 0,
-            isWeekEnd: index % 7 === 6,
-            isSelected: model.value.some(value => adapter.isSameDay(date, value)),
-            isToday: adapter.isSameDay(date, today),
-            isAdjacent,
-            isHidden: isAdjacent && !props.showAdjacentMonths,
-            isHovered: false,
-            localized: adapter.format(date, 'dayOfMonth')
-          };
-        });
-      });
-      const weeks = vue.computed(() => {
-        return weeksInMonth.value.map(week => {
-          return getWeek(adapter, week[0]);
-        });
-      });
-      function isDisabled(value) {
-        if (props.disabled) return true;
-        const date = adapter.date(value);
-        if (props.min && adapter.isAfter(adapter.date(props.min), date)) return true;
-        if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
-        if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
-          return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
-        }
-        if (typeof props.allowedDates === 'function') {
-          return !props.allowedDates(date);
-        }
-        return false;
-      }
       function onClick(value) {
         if (props.multiple) {
           const index = model.value.findIndex(selection => adapter.isSameDay(selection, value));
@@ -19742,10 +19776,6 @@
           model.value = [value];
         }
       }
-      vue.watch(displayValue, val => {
-        month.value = val;
-        year.value = val;
-      });
       return () => vue.createVNode("div", {
         "class": "v-date-picker-month"
       }, [props.showWeek && vue.createVNode("div", {
@@ -19754,7 +19784,7 @@
       }, [!props.hideWeekdays && vue.createVNode("div", {
         "key": "hide-week-days",
         "class": "v-date-picker-month__day"
-      }, [vue.createTextVNode("\xA0")]), weeks.value.map(week => vue.createVNode("div", {
+      }, [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,
@@ -19773,7 +19803,6 @@
           "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--hovered': item.isHovered,
             '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
@@ -22054,6 +22083,7 @@
           "key": i
         }, {
           ...slots,
+          loader: undefined,
           default: () => {
             return vue.createVNode("input", {
               "ref": val => inputRef.value[i] = val,
@@ -25204,7 +25234,7 @@
       date
     };
   }
-  const version$1 = "3.4.7";
+  const version$1 = "3.4.8";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25229,7 +25259,7 @@
       ...options
     });
   };
-  const version = "3.4.7";
+  const version = "3.4.8";
   createVuetify.version = version;
 
   exports.components = components;