vuetify 3.8.10 → 3.8.12

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.10
+* Vuetify v3.8.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -9709,7 +9709,7 @@ function useItems(props) {
 function transformItem$2(props, item) {
   const type = getPropertyFromItem(item, props.itemType, 'item');
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
-  const value = getPropertyFromItem(item, props.itemValue, undefined);
+  const value = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemValue, undefined);
   const children = getPropertyFromItem(item, props.itemChildren);
   const itemProps = props.itemProps === true ? omit(item, ['children']) : getPropertyFromItem(item, props.itemProps);
   const _props = {
@@ -10188,7 +10188,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     });
     if (flipped.isFull) {
       const values = flipped.values();
-      if (deepEqual(values.at(-1), values.at(-3))) {
+      if (deepEqual(values.at(-1), values.at(-3)) && !deepEqual(values.at(-1), values.at(-2))) {
         // Flipping is causing a container resize loop
         return;
       }
@@ -11954,11 +11954,7 @@ const VField = genericComponent()({
         default: slots.loader
       }), hasPrepend && createElementVNode("div", {
         "key": "prepend",
-        "class": "v-field__prepend-inner",
-        "onMousedown": e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }
+        "class": "v-field__prepend-inner"
       }, [props.prependInnerIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prependInner",
@@ -12027,11 +12023,7 @@ const VField = genericComponent()({
         })]), [[vShow, props.dirty]])]
       }), hasAppend && createElementVNode("div", {
         "key": "append",
-        "class": "v-field__append-inner",
-        "onMousedown": e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }
+        "class": "v-field__append-inner"
       }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "appendInner",
@@ -12142,7 +12134,7 @@ const VTextField = genericComponent()({
       if (!isFocused.value) focus();
       nextTick(() => {
         if (inputRef.value !== document.activeElement) {
-          inputRef.value?.focus();
+          nextTick(() => inputRef.value?.focus());
         }
       });
     }
@@ -12476,7 +12468,7 @@ function useVirtual(props, items) {
     raf = requestAnimationFrame(_calculateVisibleItems);
   }
   function _calculateVisibleItems() {
-    if (!containerRef.value || !viewportHeight.value) return;
+    if (!containerRef.value || !viewportHeight.value || !itemHeight.value) return;
     const scrollTop = lastScrollTop - markerOffset;
     const direction = Math.sign(scrollVelocity);
     const startPx = Math.max(0, scrollTop - BUFFER_PX);
@@ -15225,6 +15217,7 @@ const VCarousel = genericComponent()({
               }) : createVNode(VBtn, mergeProps(item, props), null);
             })]
           })]), props.progress && createVNode(VProgressLinear, {
+            "absolute": true,
             "class": "v-carousel__progress",
             "color": typeof props.progress === 'string' ? props.progress : undefined,
             "modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
@@ -17307,7 +17300,7 @@ function format(value, formatString, locale, formats) {
     case 'fullDate':
       options = {
         year: 'numeric',
-        month: 'long',
+        month: 'short',
         day: 'numeric'
       };
       break;
@@ -19295,7 +19288,8 @@ function sortItems(items, sortByItems, locale, options) {
 
       // Dates should be compared numerically
       if (sortA instanceof Date && sortB instanceof Date) {
-        return sortA.getTime() - sortB.getTime();
+        sortA = sortA.getTime();
+        sortB = sortB.getTime();
       }
       [sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s);
       if (sortA !== sortB) {
@@ -20019,7 +20013,6 @@ const VDataTableColumn = defineFunctionalComponent({
   } = _ref;
   const Tag = props.tag ?? 'td';
   return createVNode(Tag, {
-    "tabindex": "0",
     "class": normalizeClass(['v-data-table__td', {
       'v-data-table-column--fixed': props.fixed,
       'v-data-table-column--last-fixed': props.lastFixed,
@@ -20420,14 +20413,14 @@ const VDataTableHeaders = genericComponent()({
         },
         "colspan": column.colspan,
         "rowspan": column.rowspan,
-        "onClick": column.sortable ? () => toggleSort(column) : undefined,
         "fixed": column.fixed,
         "nowrap": column.nowrap,
         "lastFixed": column.lastFixed,
-        "noPadding": noPadding
-      }, headerProps, {
-        "onKeydown": event => column.sortable && handleEnterKeyPress(event, column)
-      }), {
+        "noPadding": noPadding,
+        "tabindex": column.sortable ? 0 : undefined,
+        "onClick": column.sortable ? () => toggleSort(column) : undefined,
+        "onKeydown": column.sortable ? event => handleEnterKeyPress(event, column) : undefined
+      }, headerProps), {
         default: () => {
           const columnSlotName = `header.${column.key}`;
           const columnSlotProps = {
@@ -22103,10 +22096,9 @@ function useCalendar(props) {
     const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
     return adapter.setMonth(date, value);
   }, v => adapter.getMonth(v));
-  const weekDays = computed(() => {
+  const weekdayLabels = computed(() => {
     const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
-    // Always generate all days, regardless of props.weekdays
-    return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7);
+    return adapter.getWeekdays(props.firstDayOfWeek).filter((_, i) => props.weekdays.includes((i + firstDayOfWeek) % 7));
   });
   const weeksInMonth = computed(() => {
     const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
@@ -22130,13 +22122,14 @@ function useCalendar(props) {
   });
   function genDays(days, today) {
     return days.filter(date => {
-      return weekDays.value.includes(adapter.toJsDate(date).getDay());
+      return props.weekdays.includes(adapter.toJsDate(date).getDay());
     }).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);
+      const weekdaysCount = props.weekdays.length;
       return {
         date,
         formatted: adapter.format(date, 'keyboardDate'),
@@ -22148,8 +22141,8 @@ function useCalendar(props) {
         isSelected: model.value.some(value => adapter.isSameDay(date, value)),
         isStart,
         isToday: adapter.isSameDay(date, today),
-        isWeekEnd: index % 7 === 6,
-        isWeekStart: index % 7 === 0,
+        isWeekEnd: index % weekdaysCount === weekdaysCount - 1,
+        isWeekStart: index % weekdaysCount === 0,
         isoDate,
         localized: adapter.format(date, 'dayOfMonth'),
         month: adapter.getMonth(date),
@@ -22187,7 +22180,7 @@ function useCalendar(props) {
     if (typeof props.allowedDates === 'function') {
       return !props.allowedDates(date);
     }
-    return !props.weekdays.includes(adapter.toJsDate(date).getDay());
+    return false;
   }
   return {
     displayValue,
@@ -22196,7 +22189,7 @@ function useCalendar(props) {
     genDays,
     model,
     weeksInMonth,
-    weekDays,
+    weekdayLabels,
     weekNumbers
   };
 }
@@ -22235,7 +22228,8 @@ const VDatePickerMonth = genericComponent()({
     const {
       daysInMonth,
       model,
-      weekNumbers
+      weekNumbers,
+      weekdayLabels
     } = useCalendar(props);
     const adapter = useDate();
     const rangeStart = shallowRef();
@@ -22307,7 +22301,10 @@ const VDatePickerMonth = genericComponent()({
       }
     }
     useRender(() => createElementVNode("div", {
-      "class": "v-date-picker-month"
+      "class": "v-date-picker-month",
+      "style": {
+        '--v-date-picker-days-in-week': props.weekdays.length
+      }
     }, [props.showWeek && createElementVNode("div", {
       "key": "weeks",
       "class": "v-date-picker-month__weeks"
@@ -22323,7 +22320,7 @@ const VDatePickerMonth = genericComponent()({
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createElementVNode("div", {
+      }, [!props.hideWeekdays && weekdayLabels.value.map(weekDay => createElementVNode("div", {
         "class": normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -24925,6 +24922,8 @@ function useHold(_ref) {
   function holdStart(value) {
     holdStop();
     tick(value);
+    window.addEventListener('pointerup', holdStop);
+    document.addEventListener('blur', holdStop);
     timeout = window.setTimeout(() => {
       interval = window.setInterval(() => tick(value), HOLD_REPEAT);
     }, HOLD_DELAY);
@@ -24932,6 +24931,8 @@ function useHold(_ref) {
   function holdStop() {
     window.clearTimeout(timeout);
     window.clearInterval(interval);
+    window.removeEventListener('pointerup', holdStop);
+    document.removeEventListener('blur', holdStop);
   }
   function tick(value) {
     toggleUpDown(value === 'up');
@@ -25043,7 +25044,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     const decrementSlotProps = {
@@ -25051,7 +25052,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     watch(() => props.precision, () => formatInputValue());
@@ -25131,7 +25132,6 @@ const VNumberInput = genericComponent()({
       const el = e.currentTarget;
       el?.releasePointerCapture(e.pointerId);
       e.preventDefault();
-      e.stopPropagation();
       holdStop();
     }
     function onUpControlMousedown(e) {
@@ -25148,11 +25148,6 @@ const VNumberInput = genericComponent()({
       e.stopPropagation();
       holdStart('down');
     }
-    function onControlPointerCancel(e) {
-      const el = e.currentTarget;
-      el?.releasePointerCapture(e.pointerId);
-      holdStop();
-    }
     function clampModel() {
       if (controlsDisabled.value) return;
       if (!vTextFieldRef.value) return;
@@ -25202,7 +25197,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onUpControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -25232,7 +25227,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onDownControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -25379,19 +25374,21 @@ const VOtpInput = genericComponent()({
     const contentRef = ref();
     const inputRef = ref([]);
     const current = computed(() => inputRef.value[focusIndex.value]);
-    const intersectScope = effectScope();
-    intersectScope.run(() => {
-      const {
-        intersectionRef,
-        isIntersecting
-      } = useIntersectionObserver();
-      watch(isIntersecting, v => {
-        if (!v) return;
-        intersectionRef.value?.focus();
-        intersectScope.stop();
-      });
-      watchEffect(() => {
-        intersectionRef.value = inputRef.value[0];
+    useToggleScope(() => props.autofocus, () => {
+      const intersectScope = effectScope();
+      intersectScope.run(() => {
+        const {
+          intersectionRef,
+          isIntersecting
+        } = useIntersectionObserver();
+        watchEffect(() => {
+          intersectionRef.value = inputRef.value[0];
+        });
+        watch(isIntersecting, v => {
+          if (!v) return;
+          intersectionRef.value?.focus();
+          intersectScope.stop();
+        });
       });
     });
     function onInput() {
@@ -28805,7 +28802,7 @@ const VCalendarIntervalEvent = genericComponent()({
       }
     };
     useRender(() => {
-      return createElementVNode("div", null, [slots.intervalEvent?.({
+      return createElementVNode("div", null, [slots['interval-event']?.({
         height: calcHeight().height,
         margin: calcHeight().margin,
         eventClass: 'v-calendar-internal-event',
@@ -28902,13 +28899,13 @@ const VCalendarInterval = genericComponent()({
         "style": normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
       }, [createElementVNode("div", mergeProps({
         "class": "v-calendar-day__row-label"
-      }, getPrefixedEventHandlers(attrs, ':time', () => props)), [slots.intervalTitle?.({
+      }, getPrefixedEventHandlers(attrs, ':time', () => props)), [slots['interval-title']?.({
         interval: interval.value
       }) ?? (props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : '12 AM')]), createElementVNode("div", {
         "class": "v-calendar-day__row-hairline"
       }, null), createElementVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
+      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots['interval-body']?.({
         interval: interval.value
       }) ?? createElementVNode("div", null, [interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
         "event": event,
@@ -28917,8 +28914,8 @@ const VCalendarInterval = genericComponent()({
         "intervalDuration": props.intervalDuration,
         "intervalHeight": props.intervalHeight
       }, attrs), {
-        ...(slots.intervalEvent ? {
-          intervalEvent: _ref2 => {
+        ...(slots['interval-event'] ? {
+          'interval-event': _ref2 => {
             let {
               height,
               margin,
@@ -28926,7 +28923,7 @@ const VCalendarInterval = genericComponent()({
               event,
               interval
             } = _ref2;
-            return slots.intervalEvent?.({
+            return slots['interval-event']?.({
               height,
               margin,
               eventClass,
@@ -28940,7 +28937,7 @@ const VCalendarInterval = genericComponent()({
         "style": normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
       }, [createElementVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
+      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots['interval-body']?.({
         interval: interval.value
       }) ?? interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
         "event": event,
@@ -28949,8 +28946,8 @@ const VCalendarInterval = genericComponent()({
         "intervalDuration": props.intervalDuration,
         "intervalHeight": props.intervalHeight
       }, attrs), {
-        ...(slots.intervalEvent ? {
-          intervalEvent: _ref3 => {
+        ...(slots['interval-event'] ? {
+          'interval-event': _ref3 => {
             let {
               height,
               margin,
@@ -28958,7 +28955,7 @@ const VCalendarInterval = genericComponent()({
               event,
               interval
             } = _ref3;
-            return slots.intervalEvent?.({
+            return slots['interval-event']?.({
               height,
               margin,
               eventClass,
@@ -29013,7 +29010,7 @@ const VCalendarDay = genericComponent()({
       }), null)])]), intervals.value.map((_, index) => slots.interval?.(calendarIntervalProps) ?? createVNode(VCalendarInterval, mergeProps({
         "index": index
       }, calendarIntervalProps, attrs, getPrefixedEventHandlers(attrs, ':interval', () => calendarIntervalProps)), {
-        ...pick(slots, ['intervalBody', 'intervalEvent', 'intervalTitle'])
+        ...pick(slots, ['interval-body', 'interval-event', 'interval-title'])
       }))]);
     });
     return {
@@ -29157,7 +29154,7 @@ const VCalendarMonthDay = genericComponent()({
       }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? createElementVNode("div", {
         "key": "title",
         "class": "v-calendar-weekly__day-label"
-      }, [slots.dayTitle?.({
+      }, [slots['day-title']?.({
         title: props.title
       }) ?? createVNode(VBtn, mergeProps({
         "class": props.day?.isToday ? 'v-calendar-weekly__day-label__today' : undefined,
@@ -29170,12 +29167,12 @@ const VCalendarMonthDay = genericComponent()({
       }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? createElementVNode("div", {
         "key": "content",
         "class": "v-calendar-weekly__day-content"
-      }, [slots.dayBody?.({
+      }, [slots['day-body']?.({
         day: props.day,
         events: props.events
       }) ?? createElementVNode("div", null, [createElementVNode("div", {
         "class": "v-calendar-weekly__day-alldayevents-container"
-      }, [props.events?.filter(event => event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
+      }, [props.events?.filter(event => event.allDay).map(event => slots['day-event'] ? slots['day-event']({
         day: props.day,
         allDay: true,
         event
@@ -29185,7 +29182,7 @@ const VCalendarMonthDay = genericComponent()({
         "allDay": true
       }, attrs), null))]), createElementVNode("div", {
         "class": "v-calendar-weekly__day-events-container"
-      }, [props.events?.filter(event => !event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
+      }, [props.events?.filter(event => !event.allDay).map(event => slots['day-event'] ? slots['day-event']({
         day: props.day,
         event,
         allDay: false
@@ -29230,9 +29227,8 @@ const VCalendar = genericComponent()({
       model,
       displayValue,
       weekNumbers,
-      weekDays
+      weekdayLabels
     } = useCalendar(props);
-    const dayNames = adapter.getWeekdays();
     function onClickNext() {
       if (props.viewMode === 'month') {
         model.value = [adapter.addMonths(displayValue.value, 1)];
@@ -29270,6 +29266,7 @@ const VCalendar = genericComponent()({
     useRender(() => {
       const calendarDayProps = VCalendarDay.filterProps(props);
       const calendarHeaderProps = VCalendarHeader.filterProps(props);
+      const weekdaysCount = daysInWeek.value.length;
       return createElementVNode("div", {
         "class": normalizeClass(['v-calendar', {
           'v-calendar-monthly': props.viewMode === 'month',
@@ -29291,19 +29288,19 @@ const VCalendar = genericComponent()({
       }), {
         title: slots.title
       }))]), createElementVNode("div", {
-        "class": normalizeClass(['v-calendar__container', `days__${weekDays.value.length}`])
+        "class": normalizeClass(['v-calendar__container', `days__${weekdaysCount}`])
       }, [props.viewMode === 'month' && !props.hideDayHeader && createElementVNode("div", {
-        "class": normalizeClass(['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])]),
+        "class": normalizeClass(['v-calendar-weekly__head', `days__${weekdaysCount}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])]),
         "key": "calendarWeeklyHead"
       }, [!props.hideWeekNumber ? createElementVNode("div", {
         "key": "weekNumber0",
         "class": "v-calendar-weekly__head-weeknumber"
-      }, null) : '', weekDays.value.map(weekday => createElementVNode("div", {
+      }, null) : '', weekdayLabels.value.map(weekday => createElementVNode("div", {
         "class": normalizeClass(`v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`)
-      }, [dayNames[weekday]]))]), props.viewMode === 'month' && createElementVNode("div", {
+      }, [weekday]))]), props.viewMode === 'month' && createElementVNode("div", {
         "key": "VCalendarMonth",
-        "class": normalizeClass(['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])])
-      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createElementVNode("div", mergeProps({
+        "class": normalizeClass(['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekdaysCount}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])])
+      }, [chunkArray(daysInMonth.value, weekdaysCount).map((week, wi) => [!props.hideWeekNumber ? createElementVNode("div", mergeProps({
         "class": "v-calendar-month__weeknumber"
       }, getPrefixedEventHandlers(attrs, ':weekNumber', () => ({
         weekNumber: weekNumbers.value[wi],
@@ -29326,7 +29323,7 @@ const VCalendar = genericComponent()({
         "dayIndex": i,
         "events": props.events?.filter(e => adapter.isSameDay(e.start, day.date) || adapter.isSameDay(e.end, day.date))
       }, attrs), {
-        ...pick(slots, ['interval', 'intervalBody', 'intervalEvent', 'intervalTitle'])
+        ...pick(slots, ['interval', 'interval-body', 'interval-event', 'interval-title'])
       })), props.viewMode === 'day' && (slots['day-interval'] ? slots['day-interval']({
         day: genDays([displayValue.value], adapter.date())[0],
         dayIndex: 0,
@@ -30246,6 +30243,7 @@ const VIconBtn = genericComponent()({
         opacity: props.opacity
       };
       return createVNode(props.tag, {
+        "type": props.tag === 'button' ? 'button' : undefined,
         "class": normalizeClass([{
           'v-icon-btn': true,
           'v-icon-btn--active': isActive.value,
@@ -32198,7 +32196,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.10";
+const version$1 = "3.8.12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32496,7 +32494,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.10";
+const version = "3.8.12";
 
 /* eslint-disable local-rules/sort-imports */