vuetify 3.8.10 → 3.8.12

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.10
+* Vuetify v3.8.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -9713,7 +9713,7 @@
   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 = {
@@ -10192,7 +10192,7 @@
       });
       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;
         }
@@ -11958,11 +11958,7 @@
           default: slots.loader
         }), hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
-          "class": "v-field__prepend-inner",
-          "onMousedown": e => {
-            e.preventDefault();
-            e.stopPropagation();
-          }
+          "class": "v-field__prepend-inner"
         }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prependInner",
@@ -12031,11 +12027,7 @@
           })]), [[vue.vShow, props.dirty]])]
         }), hasAppend && vue.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 && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "appendInner",
@@ -12146,7 +12138,7 @@
         if (!isFocused.value) focus();
         vue.nextTick(() => {
           if (inputRef.value !== document.activeElement) {
-            inputRef.value?.focus();
+            vue.nextTick(() => inputRef.value?.focus());
           }
         });
       }
@@ -12480,7 +12472,7 @@
       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);
@@ -15229,6 +15221,7 @@
                 }) : vue.createVNode(VBtn, vue.mergeProps(item, props), null);
               })]
             })]), props.progress && vue.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
@@ -17311,7 +17304,7 @@
       case 'fullDate':
         options = {
           year: 'numeric',
-          month: 'long',
+          month: 'short',
           day: 'numeric'
         };
         break;
@@ -19299,7 +19292,8 @@
 
         // 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) {
@@ -20023,7 +20017,6 @@
     } = _ref;
     const Tag = props.tag ?? 'td';
     return vue.createVNode(Tag, {
-      "tabindex": "0",
       "class": vue.normalizeClass(['v-data-table__td', {
         'v-data-table-column--fixed': props.fixed,
         'v-data-table-column--last-fixed': props.lastFixed,
@@ -20424,14 +20417,14 @@
           },
           "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 = {
@@ -22107,10 +22100,9 @@
       const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
       return adapter.setMonth(date, value);
     }, v => adapter.getMonth(v));
-    const weekDays = vue.computed(() => {
+    const weekdayLabels = vue.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 = vue.computed(() => {
       const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
@@ -22134,13 +22126,14 @@
     });
     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'),
@@ -22152,8 +22145,8 @@
           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),
@@ -22191,7 +22184,7 @@
       if (typeof props.allowedDates === 'function') {
         return !props.allowedDates(date);
       }
-      return !props.weekdays.includes(adapter.toJsDate(date).getDay());
+      return false;
     }
     return {
       displayValue,
@@ -22200,7 +22193,7 @@
       genDays,
       model,
       weeksInMonth,
-      weekDays,
+      weekdayLabels,
       weekNumbers
     };
   }
@@ -22239,7 +22232,8 @@
       const {
         daysInMonth,
         model,
-        weekNumbers
+        weekNumbers,
+        weekdayLabels
       } = useCalendar(props);
       const adapter = useDate();
       const rangeStart = vue.shallowRef();
@@ -22311,7 +22305,10 @@
         }
       }
       useRender(() => vue.createElementVNode("div", {
-        "class": "v-date-picker-month"
+        "class": "v-date-picker-month",
+        "style": {
+          '--v-date-picker-days-in-week': props.weekdays.length
+        }
       }, [props.showWeek && vue.createElementVNode("div", {
         "key": "weeks",
         "class": "v-date-picker-month__weeks"
@@ -22327,7 +22324,7 @@
           "ref": daysRef,
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
-        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createElementVNode("div", {
+        }, [!props.hideWeekdays && weekdayLabels.value.map(weekDay => vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
@@ -24929,6 +24926,8 @@
     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);
@@ -24936,6 +24935,8 @@
     function holdStop() {
       window.clearTimeout(timeout);
       window.clearInterval(interval);
+      window.removeEventListener('pointerup', holdStop);
+      document.removeEventListener('blur', holdStop);
     }
     function tick(value) {
       toggleUpDown(value === 'up');
@@ -25047,7 +25048,7 @@
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onUpControlMousedown,
-          onPointercancel: onControlPointerCancel
+          onPointercancel: onControlMouseup
         }
       };
       const decrementSlotProps = {
@@ -25055,7 +25056,7 @@
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onDownControlMousedown,
-          onPointercancel: onControlPointerCancel
+          onPointercancel: onControlMouseup
         }
       };
       vue.watch(() => props.precision, () => formatInputValue());
@@ -25135,7 +25136,6 @@
         const el = e.currentTarget;
         el?.releasePointerCapture(e.pointerId);
         e.preventDefault();
-        e.stopPropagation();
         holdStop();
       }
       function onUpControlMousedown(e) {
@@ -25152,11 +25152,6 @@
         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;
@@ -25206,7 +25201,7 @@
             "onClick": onControlClick,
             "onPointerdown": onUpControlMousedown,
             "onPointerup": onControlMouseup,
-            "onPointercancel": onControlPointerCancel,
+            "onPointercancel": onControlMouseup,
             "size": controlNodeSize.value,
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
@@ -25236,7 +25231,7 @@
             "onClick": onControlClick,
             "onPointerdown": onDownControlMousedown,
             "onPointerup": onControlMouseup,
-            "onPointercancel": onControlPointerCancel,
+            "onPointercancel": onControlMouseup,
             "size": controlNodeSize.value,
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
@@ -25383,19 +25378,21 @@
       const contentRef = vue.ref();
       const inputRef = vue.ref([]);
       const current = vue.computed(() => inputRef.value[focusIndex.value]);
-      const intersectScope = vue.effectScope();
-      intersectScope.run(() => {
-        const {
-          intersectionRef,
-          isIntersecting
-        } = useIntersectionObserver();
-        vue.watch(isIntersecting, v => {
-          if (!v) return;
-          intersectionRef.value?.focus();
-          intersectScope.stop();
-        });
-        vue.watchEffect(() => {
-          intersectionRef.value = inputRef.value[0];
+      useToggleScope(() => props.autofocus, () => {
+        const intersectScope = vue.effectScope();
+        intersectScope.run(() => {
+          const {
+            intersectionRef,
+            isIntersecting
+          } = useIntersectionObserver();
+          vue.watchEffect(() => {
+            intersectionRef.value = inputRef.value[0];
+          });
+          vue.watch(isIntersecting, v => {
+            if (!v) return;
+            intersectionRef.value?.focus();
+            intersectScope.stop();
+          });
         });
       });
       function onInput() {
@@ -28809,7 +28806,7 @@
         }
       };
       useRender(() => {
-        return vue.createElementVNode("div", null, [slots.intervalEvent?.({
+        return vue.createElementVNode("div", null, [slots['interval-event']?.({
           height: calcHeight().height,
           margin: calcHeight().margin,
           eventClass: 'v-calendar-internal-event',
@@ -28906,13 +28903,13 @@
           "style": vue.normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
         }, [vue.createElementVNode("div", vue.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')]), vue.createElementVNode("div", {
           "class": "v-calendar-day__row-hairline"
         }, null), vue.createElementVNode("div", vue.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
         }) ?? vue.createElementVNode("div", null, [interval.value.events?.map(event => vue.createVNode(VCalendarIntervalEvent, vue.mergeProps({
           "event": event,
@@ -28921,8 +28918,8 @@
           "intervalDuration": props.intervalDuration,
           "intervalHeight": props.intervalHeight
         }, attrs), {
-          ...(slots.intervalEvent ? {
-            intervalEvent: _ref2 => {
+          ...(slots['interval-event'] ? {
+            'interval-event': _ref2 => {
               let {
                 height,
                 margin,
@@ -28930,7 +28927,7 @@
                 event,
                 interval
               } = _ref2;
-              return slots.intervalEvent?.({
+              return slots['interval-event']?.({
                 height,
                 margin,
                 eventClass,
@@ -28944,7 +28941,7 @@
           "style": vue.normalizeStyle(`height: ${convertToUnit(props.intervalHeight)}`)
         }, [vue.createElementVNode("div", vue.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 => vue.createVNode(VCalendarIntervalEvent, vue.mergeProps({
           "event": event,
@@ -28953,8 +28950,8 @@
           "intervalDuration": props.intervalDuration,
           "intervalHeight": props.intervalHeight
         }, attrs), {
-          ...(slots.intervalEvent ? {
-            intervalEvent: _ref3 => {
+          ...(slots['interval-event'] ? {
+            'interval-event': _ref3 => {
               let {
                 height,
                 margin,
@@ -28962,7 +28959,7 @@
                 event,
                 interval
               } = _ref3;
-              return slots.intervalEvent?.({
+              return slots['interval-event']?.({
                 height,
                 margin,
                 eventClass,
@@ -29017,7 +29014,7 @@
         }), null)])]), intervals.value.map((_, index) => slots.interval?.(calendarIntervalProps) ?? vue.createVNode(VCalendarInterval, vue.mergeProps({
           "index": index
         }, calendarIntervalProps, attrs, getPrefixedEventHandlers(attrs, ':interval', () => calendarIntervalProps)), {
-          ...pick(slots, ['intervalBody', 'intervalEvent', 'intervalTitle'])
+          ...pick(slots, ['interval-body', 'interval-event', 'interval-title'])
         }))]);
       });
       return {
@@ -29161,7 +29158,7 @@
         }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? vue.createElementVNode("div", {
           "key": "title",
           "class": "v-calendar-weekly__day-label"
-        }, [slots.dayTitle?.({
+        }, [slots['day-title']?.({
           title: props.title
         }) ?? vue.createVNode(VBtn, vue.mergeProps({
           "class": props.day?.isToday ? 'v-calendar-weekly__day-label__today' : undefined,
@@ -29174,12 +29171,12 @@
         }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? vue.createElementVNode("div", {
           "key": "content",
           "class": "v-calendar-weekly__day-content"
-        }, [slots.dayBody?.({
+        }, [slots['day-body']?.({
           day: props.day,
           events: props.events
         }) ?? vue.createElementVNode("div", null, [vue.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
@@ -29189,7 +29186,7 @@
           "allDay": true
         }, attrs), null))]), vue.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
@@ -29234,9 +29231,8 @@
         model,
         displayValue,
         weekNumbers,
-        weekDays
+        weekdayLabels
       } = useCalendar(props);
-      const dayNames = adapter.getWeekdays();
       function onClickNext() {
         if (props.viewMode === 'month') {
           model.value = [adapter.addMonths(displayValue.value, 1)];
@@ -29274,6 +29270,7 @@
       useRender(() => {
         const calendarDayProps = VCalendarDay.filterProps(props);
         const calendarHeaderProps = VCalendarHeader.filterProps(props);
+        const weekdaysCount = daysInWeek.value.length;
         return vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-calendar', {
             'v-calendar-monthly': props.viewMode === 'month',
@@ -29295,19 +29292,19 @@
         }), {
           title: slots.title
         }))]), vue.createElementVNode("div", {
-          "class": vue.normalizeClass(['v-calendar__container', `days__${weekDays.value.length}`])
+          "class": vue.normalizeClass(['v-calendar__container', `days__${weekdaysCount}`])
         }, [props.viewMode === 'month' && !props.hideDayHeader && vue.createElementVNode("div", {
-          "class": vue.normalizeClass(['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])]),
+          "class": vue.normalizeClass(['v-calendar-weekly__head', `days__${weekdaysCount}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])]),
           "key": "calendarWeeklyHead"
         }, [!props.hideWeekNumber ? vue.createElementVNode("div", {
           "key": "weekNumber0",
           "class": "v-calendar-weekly__head-weeknumber"
-        }, null) : '', weekDays.value.map(weekday => vue.createElementVNode("div", {
+        }, null) : '', weekdayLabels.value.map(weekday => vue.createElementVNode("div", {
           "class": vue.normalizeClass(`v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`)
-        }, [dayNames[weekday]]))]), props.viewMode === 'month' && vue.createElementVNode("div", {
+        }, [weekday]))]), props.viewMode === 'month' && vue.createElementVNode("div", {
           "key": "VCalendarMonth",
-          "class": vue.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 ? vue.createElementVNode("div", vue.mergeProps({
+          "class": vue.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 ? vue.createElementVNode("div", vue.mergeProps({
           "class": "v-calendar-month__weeknumber"
         }, getPrefixedEventHandlers(attrs, ':weekNumber', () => ({
           weekNumber: weekNumbers.value[wi],
@@ -29330,7 +29327,7 @@
           "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,
@@ -30250,6 +30247,7 @@
           opacity: props.opacity
         };
         return vue.createVNode(props.tag, {
+          "type": props.tag === 'button' ? 'button' : undefined,
           "class": vue.normalizeClass([{
             'v-icon-btn': true,
             'v-icon-btn--active': isActive.value,
@@ -32202,7 +32200,7 @@
       };
     });
   }
-  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
@@ -32500,7 +32498,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.10";
+  const version = "3.8.12";
 
   /* eslint-disable local-rules/sort-imports */