vuetify 3.4.7 → 3.4.9

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.7
+* Vuetify v3.4.9
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1895,7 +1895,8 @@ var en = {
     }
   },
   calendar: {
-    moreEvents: '{0} more'
+    moreEvents: '{0} more',
+    today: 'Today'
   },
   input: {
     clear: 'Clear {0}',
@@ -9825,7 +9826,7 @@ const VOverlay = genericComponent()({
     } = useRtl();
     const {
       hasContent,
-      onAfterLeave
+      onAfterLeave: _onAfterLeave
     } = useLazy(props, isActive);
     const scrimColor = useBackgroundColor(computed(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
@@ -9892,6 +9893,10 @@ const VOverlay = genericComponent()({
     }, {
       immediate: true
     });
+    onBeforeUnmount(() => {
+      if (!IN_BROWSER) return;
+      window.removeEventListener('keydown', onKeydown);
+    });
     function onKeydown(e) {
       if (e.key === 'Escape' && globalTop.value) {
         if (!props.persistent) {
@@ -9937,6 +9942,10 @@ const VOverlay = genericComponent()({
         easing: standardEasing
       });
     }
+    function onAfterLeave() {
+      _onAfterLeave();
+      emit('afterLeave');
+    }
     useRender(() => createVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
       props: mergeProps({
@@ -9965,10 +9974,7 @@ const VOverlay = genericComponent()({
         "persisted": true,
         "transition": props.transition,
         "target": target.value,
-        "onAfterLeave": () => {
-          onAfterLeave();
-          emit('afterLeave');
-        }
+        "onAfterLeave": onAfterLeave
       }, {
         default: () => [withDirectives(createVNode("div", mergeProps({
           "ref": contentEl,
@@ -16591,6 +16597,20 @@ function getWeekArray(date, locale) {
   }
   return weeks;
 }
+function startOfWeek(date) {
+  const d = new Date(date);
+  while (d.getDay() !== 0) {
+    d.setDate(d.getDate() - 1);
+  }
+  return d;
+}
+function endOfWeek(date) {
+  const d = new Date(date);
+  while (d.getDay() !== 6) {
+    d.setDate(d.getDate() + 1);
+  }
+  return d;
+}
 function startOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth(), 1);
 }
@@ -16619,14 +16639,18 @@ function date(value) {
   return null;
 }
 const sundayJanuarySecond2000 = new Date(2000, 0, 2);
+
+// The number of letters returned by getWeekday() varies by date library
+// So we've opted for 3-letter abbreviations for all locales
 function getWeekdays(locale) {
   const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()];
   return createRange(7).map(i => {
     const weekday = new Date(sundayJanuarySecond2000);
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
-    return new Intl.DateTimeFormat(locale, {
-      weekday: 'narrow'
+    const formattedDay = new Intl.DateTimeFormat(locale, {
+      weekday: 'short'
     }).format(weekday);
+    return formattedDay.charAt(0).toUpperCase() + formattedDay.slice(1);
   });
 }
 function format(value, formatString, locale, formats) {
@@ -16645,6 +16669,12 @@ function format(value, formatString, locale, formats) {
         year: 'numeric'
       };
       break;
+    case 'hours12h':
+      options = {
+        hour: 'numeric',
+        hour12: true
+      };
+      break;
     case 'normalDateWithWeekday':
       options = {
         weekday: 'short',
@@ -16693,6 +16723,11 @@ function format(value, formatString, locale, formats) {
         day: 'numeric'
       };
       break;
+    case 'weekdayShort':
+      options = {
+        weekday: 'short'
+      };
+      break;
     case 'year':
       options = {
         year: 'numeric'
@@ -16717,11 +16752,26 @@ function parseISO(value) {
   const [year, month, day] = value.split('-').map(Number);
   return new Date(year, month - 1, day);
 }
+function addMinutes(date, amount) {
+  const d = new Date(date);
+  d.setMinutes(d.getMinutes() + amount);
+  return d;
+}
+function addHours(date, amount) {
+  const d = new Date(date);
+  d.setHours(d.getHours() + amount);
+  return d;
+}
 function addDays(date, amount) {
   const d = new Date(date);
   d.setDate(d.getDate() + amount);
   return d;
 }
+function addWeeks(date, amount) {
+  const d = new Date(date);
+  d.setDate(d.getDate() + amount * 7);
+  return d;
+}
 function addMonths(date, amount) {
   const d = new Date(date);
   d.setMonth(d.getMonth() + amount);
@@ -16736,6 +16786,12 @@ function getMonth(date) {
 function getNextMonth(date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 1);
 }
+function getHours(date) {
+  return date.getHours();
+}
+function getMinutes(date) {
+  return date.getMinutes();
+}
 function startOfYear(date) {
   return new Date(date.getFullYear(), 0, 1);
 }
@@ -16772,6 +16828,16 @@ function getDiff(date, comparing, unit) {
   }
   return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
 }
+function setHours(date, count) {
+  const d = new Date(date);
+  d.setHours(count);
+  return d;
+}
+function setMinutes(date, count) {
+  const d = new Date(date);
+  d.setMinutes(count);
+  return d;
+}
 function setMonth(date, count) {
   const d = new Date(date);
   d.setMonth(count);
@@ -16805,15 +16871,30 @@ class VuetifyDateAdapter {
   parseISO(date) {
     return parseISO(date);
   }
+  addMinutes(date, amount) {
+    return addMinutes(date, amount);
+  }
+  addHours(date, amount) {
+    return addHours(date, amount);
+  }
   addDays(date, amount) {
     return addDays(date, amount);
   }
+  addWeeks(date, amount) {
+    return addWeeks(date, amount);
+  }
   addMonths(date, amount) {
     return addMonths(date, amount);
   }
   getWeekArray(date) {
     return getWeekArray(date, this.locale);
   }
+  startOfWeek(date) {
+    return startOfWeek(date);
+  }
+  endOfWeek(date) {
+    return endOfWeek(date);
+  }
   startOfMonth(date) {
     return startOfMonth(date);
   }
@@ -16844,6 +16925,12 @@ class VuetifyDateAdapter {
   isSameMonth(date, comparing) {
     return isSameMonth(date, comparing);
   }
+  setMinutes(date, count) {
+    return setMinutes(date, count);
+  }
+  setHours(date, count) {
+    return setHours(date, count);
+  }
   setMonth(date, count) {
     return setMonth(date, count);
   }
@@ -16865,6 +16952,12 @@ class VuetifyDateAdapter {
   getNextMonth(date) {
     return getNextMonth(date);
   }
+  getHours(date) {
+    return getHours(date);
+  }
+  getMinutes(date) {
+    return getMinutes(date);
+  }
   startOfDay(date) {
     return startOfDay(date);
   }
@@ -17746,7 +17839,7 @@ const VDataTableFooter = genericComponent()({
       "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,
@@ -19613,21 +19706,140 @@ const VDatePickerHeader = genericComponent()({
   }
 });
 
+// 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 = 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 = 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 genDays = (days, today) => {
+    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 daysInWeek = computed(() => {
+    const lastDay = adapter.startOfWeek(model.value);
+    const week = [];
+    for (let day = 0; day <= 6; day++) {
+      week.push(adapter.addDays(lastDay, day));
+    }
+    const days = week;
+    const today = adapter.date();
+    return genDays(days, today);
+  });
+  const daysInMonth = computed(() => {
+    const days = weeksInMonth.value.flat();
+    const today = adapter.date();
+    return genDays(days, today);
+  });
+  const weekNumbers = 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,
+    daysInWeek,
+    genDays,
+    model,
+    weeksInMonth,
+    weekNumbers
+  };
+}
+
+const makeVDatePickerMonthProps = propsFactory({
+  color: String,
+  hideWeekdays: Boolean,
+  multiple: Boolean,
+  showWeek: Boolean,
+  ...makeCalendarProps()
 }, 'VDatePickerMonth');
 const VDatePickerMonth = genericComponent()({
   name: 'VDatePickerMonth',
@@ -19643,87 +19855,12 @@ const VDatePickerMonth = genericComponent()({
       slots
     } = _ref;
     const daysRef = 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 = 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 = 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 = 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 = 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));
@@ -19738,10 +19875,6 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
-    watch(displayValue, val => {
-      month.value = val;
-      year.value = val;
-    });
     return () => createVNode("div", {
       "class": "v-date-picker-month"
     }, [props.showWeek && createVNode("div", {
@@ -19750,14 +19883,14 @@ const VDatePickerMonth = genericComponent()({
     }, [!props.hideWeekdays && createVNode("div", {
       "key": "hide-week-days",
       "class": "v-date-picker-month__day"
-    }, [createTextVNode("\xA0")]), weeks.value.map(week => createVNode("div", {
+    }, [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) => {
+    }, [weekDay[0]])), daysInMonth.value.map((item, i) => {
       const slotProps = {
         props: {
           onClick: () => onClick(item.date)
@@ -19769,7 +19902,6 @@ const VDatePickerMonth = genericComponent()({
         "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
@@ -20186,7 +20318,10 @@ const VDatePicker = genericComponent()({
           "key": "header"
         }, datePickerHeaderProps, headerProps, {
           "onClick": viewMode.value !== 'month' ? onClickDate : undefined
-        }), slots),
+        }), {
+          ...slots,
+          default: undefined
+        }),
         default: () => createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "text": text.value,
@@ -22050,6 +22185,7 @@ const VOtpInput = genericComponent()({
         "key": i
       }, {
         ...slots,
+        loader: undefined,
         default: () => {
           return createVNode("input", {
             "ref": val => inputRef.value[i] = val,
@@ -25200,7 +25336,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.7";
+const version$1 = "3.4.9";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25225,7 +25361,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.4.7";
+const version = "3.4.9";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };