vuetify 3.7.7 → 3.7.8

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.7
+* Vuetify v3.7.8
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -464,6 +464,9 @@ function includes(arr, val) {
 function eventName(propName) {
   return propName[2].toLowerCase() + propName.slice(3);
 }
+
+// TODO: this should be an array but vue's types don't accept arrays: vuejs/core#8025
+
 const EventProp = () => [Function, Array];
 function hasEvent(props, name) {
   name = 'on' + capitalize(name);
@@ -3445,10 +3448,10 @@ const VImg = genericComponent()({
         "style": {
           objectPosition: props.position
         },
+        "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.src,
         "srcset": normalisedSrc.value.srcset,
         "alt": props.alt,
-        "crossorigin": props.crossorigin,
         "referrerpolicy": props.referrerpolicy,
         "draggable": props.draggable,
         "sizes": props.sizes,
@@ -3474,9 +3477,9 @@ const VImg = genericComponent()({
         "style": {
           objectPosition: props.position
         },
+        "crossorigin": props.crossorigin,
         "src": normalisedSrc.value.lazySrc,
         "alt": props.alt,
-        "crossorigin": props.crossorigin,
         "referrerpolicy": props.referrerpolicy,
         "draggable": props.draggable
       }, null)]
@@ -5212,10 +5215,10 @@ function useBackButton(router, cb) {
   let popped = false;
   let removeBefore;
   let removeAfter;
-  if (IN_BROWSER) {
+  if (IN_BROWSER && router?.beforeEach) {
     nextTick(() => {
       window.addEventListener('popstate', onPopstate);
-      removeBefore = router?.beforeEach((to, from, next) => {
+      removeBefore = router.beforeEach((to, from, next) => {
         if (!inTransition) {
           setTimeout(() => popped ? cb(next) : next());
         } else {
@@ -6457,11 +6460,18 @@ function useInputIcon(props) {
       clear: 'clear'
     }[name];
     const listener = props[`onClick:${name}`];
+    function onKeydown(e) {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      e.preventDefault();
+      e.stopPropagation();
+      callEvent(listener, new PointerEvent('click', e));
+    }
     const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
     return createVNode(VIcon, {
       "icon": props[`${name}Icon`],
       "aria-label": label,
-      "onClick": listener
+      "onClick": listener,
+      "onKeydown": onKeydown
     }, null);
   }
   return {
@@ -6503,9 +6513,7 @@ const VMessages = genericComponent()({
       "transition": props.transition,
       "tag": "div",
       "class": ['v-messages', textColorClasses.value, props.class],
-      "style": [textColorStyles.value, props.style],
-      "role": "alert",
-      "aria-live": "polite"
+      "style": [textColorStyles.value, props.style]
     }, {
       default: () => [props.active && messages.value.map((message, i) => createVNode("div", {
         "class": "v-messages__message",
@@ -6974,9 +6982,11 @@ const VInput = genericComponent()({
         "key": "append-icon",
         "name": "append"
       }, null), slots.append?.(slotProps.value)]), hasDetails && createVNode("div", {
-        "class": "v-input__details"
-      }, [createVNode(VMessages, {
         "id": messagesId.value,
+        "class": "v-input__details",
+        "role": "alert",
+        "aria-live": "polite"
+      }, [createVNode(VMessages, {
         "active": hasMessages,
         "messages": messages.value
       }, {
@@ -7196,10 +7206,17 @@ function useDisplay() {
   const display = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
   const mobile = computed(() => {
-    if (props.mobile != null) return props.mobile;
-    if (!props.mobileBreakpoint) return display.mobile.value;
-    const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
-    return display.width.value < breakpointValue;
+    if (props.mobile) {
+      return true;
+    } else if (typeof props.mobileBreakpoint === 'number') {
+      return display.width.value < props.mobileBreakpoint;
+    } else if (props.mobileBreakpoint) {
+      return display.width.value < display.thresholds.value[props.mobileBreakpoint];
+    } else if (props.mobile === null) {
+      return display.mobile.value;
+    } else {
+      return false;
+    }
   });
   const displayClasses = computed(() => {
     if (!name) return {};
@@ -11322,7 +11339,7 @@ const VMenu = genericComponent()({
     const activatorProps = computed(() => mergeProps({
       'aria-haspopup': 'menu',
       'aria-expanded': String(isActive.value),
-      'aria-owns': id.value,
+      'aria-controls': id.value,
       onKeydown: onActivatorKeydown
     }, props.activatorProps));
     useRender(() => {
@@ -11512,7 +11529,8 @@ const VField = genericComponent()({
       rtlClasses
     } = useRtl();
     const isActive = computed(() => props.dirty || props.active);
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
+    const hasLabel = computed(() => !!(props.label || slots.label));
+    const hasFloatingLabel = computed(() => !props.singleLine && hasLabel.value);
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
@@ -11531,7 +11549,7 @@ const VField = genericComponent()({
       return props.error || props.disabled ? undefined : isActive.value && isFocused.value ? props.color : props.baseColor;
     }));
     watch(isActive, val => {
-      if (hasLabel.value) {
+      if (hasFloatingLabel.value) {
         const el = labelRef.value.$el;
         const targetEl = floatingLabelRef.value.$el;
         requestAnimationFrame(() => {
@@ -11579,12 +11597,6 @@ const VField = genericComponent()({
         e.preventDefault();
       }
     }
-    function onKeydownClear(e) {
-      if (e.key !== 'Enter' && e.key !== ' ') return;
-      e.preventDefault();
-      e.stopPropagation();
-      props['onClick:clear']?.(new MouseEvent('click'));
-    }
     useRender(() => {
       const isOutlined = props.variant === 'outlined';
       const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon);
@@ -11633,7 +11645,7 @@ const VField = genericComponent()({
       }, null), slots['prepend-inner']?.(slotProps.value)]), createVNode("div", {
         "class": "v-field__field",
         "data-no-activator": ""
-      }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && createVNode(VFieldLabel, {
+      }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "key": "floating-label",
         "ref": floatingLabelRef,
         "class": [textColorClasses.value],
@@ -11676,14 +11688,12 @@ const VField = genericComponent()({
           default: () => [slots.clear ? slots.clear({
             ...slotProps.value,
             props: {
-              onKeydown: onKeydownClear,
               onFocus: focus,
               onBlur: blur,
               onClick: props['onClick:clear']
             }
           }) : createVNode(InputIcon, {
             "name": "clear",
-            "onKeydown": onKeydownClear,
             "onFocus": focus,
             "onBlur": blur
           }, null)]
@@ -11699,7 +11709,7 @@ const VField = genericComponent()({
         "style": textColorStyles.value
       }, [isOutlined && createVNode(Fragment, null, [createVNode("div", {
         "class": "v-field__outline__start"
-      }, null), hasLabel.value && createVNode("div", {
+      }, null), hasFloatingLabel.value && createVNode("div", {
         "class": "v-field__outline__notch"
       }, [createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
@@ -11709,7 +11719,7 @@ const VField = genericComponent()({
         default: () => [label()]
       })]), createVNode("div", {
         "class": "v-field__outline__end"
-      }, null)]), isPlainOrUnderlined.value && hasLabel.value && createVNode(VFieldLabel, {
+      }, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
         "floating": true,
         "for": id.value
@@ -12532,7 +12542,7 @@ const VSelect = genericComponent()({
       // html select hotkeys
       const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
 
-      if (props.multiple || !checkPrintable(e)) return;
+      if (!checkPrintable(e)) return;
       const now = performance.now();
       if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
         keyboardLookupPrefix = '';
@@ -13922,6 +13932,7 @@ const VBreadcrumbsDivider = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode("li", {
+      "aria-hidden": "true",
       "class": ['v-breadcrumbs-divider', props.class],
       "style": props.style
     }, [slots?.default?.() ?? props.divider]));
@@ -15546,7 +15557,6 @@ const useSlider = _ref => {
   const handleStart = e => {
     activeThumbRef.value = getActiveThumb(e);
     if (!activeThumbRef.value) return;
-    activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
       startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
@@ -15559,6 +15569,7 @@ const useSlider = _ref => {
     onSliderStart({
       value: parseMouseMove(e)
     });
+    nextTick(() => activeThumbRef.value?.focus());
   };
   const moveListenerOptions = {
     passive: true,
@@ -18280,7 +18291,7 @@ function provideGroupBy(options) {
           arr.push(item);
         }
       }
-      return arr;
+      return [...new Set(arr)];
     }
     return dive({
       type: 'group',
@@ -18506,6 +18517,8 @@ function usePaginatedItems(options) {
   });
   watch(paginatedItems, val => {
     vm.emit('update:currentItems', val);
+  }, {
+    immediate: true
   });
   return {
     paginatedItems
@@ -19230,7 +19243,7 @@ const VPagination = genericComponent()({
         const rangeStart = length.value - rangeLength + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
       } else {
-        const rangeLength = Math.max(1, totalVisible.value - 3);
+        const rangeLength = Math.max(1, totalVisible.value - 2);
         const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
       }
@@ -19830,8 +19843,8 @@ function useHeaders() {
 
 const makeVDataTableHeadersProps = propsFactory({
   color: String,
-  sticky: Boolean,
   disableSort: Boolean,
+  fixedHeader: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -19844,6 +19857,8 @@ const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object
   },
+  /** @deprecated */
+  sticky: Boolean,
   ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
@@ -19876,11 +19891,11 @@ const VDataTableHeaders = genericComponent()({
       loaderClasses
     } = useLoader(props);
     function getFixedStyles(column, y) {
-      if (!props.sticky && !column.fixed) return undefined;
+      if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined;
       return {
         position: 'sticky',
         left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,
-        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined
+        top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
       };
     }
     function getSortIcon(column) {
@@ -19908,7 +19923,7 @@ const VDataTableHeaders = genericComponent()({
       getSortIcon
     }));
     const headerCellClasses = computed(() => ['v-data-table__th', {
-      'v-data-table__th--sticky': props.sticky
+      'v-data-table__th--sticky': props.sticky || props.fixedHeader
     }, displayClasses.value, loaderClasses.value]);
     const VDataTableHeaderCell = _ref2 => {
       let {
@@ -20663,7 +20678,9 @@ const VDataTable = genericComponent()({
           'v-data-table--loading': props.loading
         }, props.class],
         "style": props.style
-      }, tableProps), {
+      }, tableProps, {
+        "fixedHeader": props.fixedHeader || props.sticky
+      }), {
         top: () => slots.top?.(slotProps.value),
         default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
           "key": "thead"
@@ -20835,7 +20852,9 @@ const VDataTableVirtual = genericComponent()({
           'v-data-table--loading': props.loading
         }, props.class],
         "style": props.style
-      }, tableProps), {
+      }, tableProps, {
+        "fixedHeader": props.fixedHeader || props.sticky
+      }), {
         top: () => slots.top?.(slotProps.value),
         wrapper: () => createVNode("div", {
           "ref": containerRef,
@@ -20847,9 +20866,7 @@ const VDataTableVirtual = genericComponent()({
           }
         }, [createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
           "key": "thead"
-        }, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
-          "sticky": props.fixedHeader
-        }), slots)]), !props.hideDefaultBody && createVNode("tbody", null, [createVNode("tr", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), !props.hideDefaultBody && createVNode("tbody", null, [createVNode("tr", {
           "ref": markerRef,
           "style": {
             height: convertToUnit(paddingTop.value),
@@ -21054,15 +21071,15 @@ const VDataTableServer = genericComponent()({
           'v-data-table--loading': props.loading
         }, props.class],
         "style": props.style
-      }, tableProps), {
+      }, tableProps, {
+        "fixedHeader": props.fixedHeader || props.sticky
+      }), {
         top: () => slots.top?.(slotProps.value),
         default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
           "key": "thead",
           "class": "v-data-table__thead",
           "role": "rowgroup"
-        }, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
-          "sticky": props.fixedHeader
-        }), slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && createVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
@@ -21579,12 +21596,15 @@ 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 defaultFirstDayOfWeek = computed(() => {
+    return props.firstDayOfWeek ?? props.weekdays[0];
+  });
   const weekDays = computed(() => {
     const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
     return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
   });
   const weeksInMonth = computed(() => {
-    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
+    const weeks = adapter.getWeekArray(month.value, defaultFirstDayOfWeek.value);
     const days = weeks.flat();
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -22821,8 +22841,7 @@ const VFab = genericComponent()({
         "style": [props.app ? {
           ...layoutItemStyles.value
         } : {
-          height: 'inherit',
-          width: undefined
+          height: props.absolute ? '100%' : 'inherit'
         }, props.style]
       }, [createVNode("div", {
         "class": "v-fab__container"
@@ -28883,8 +28902,7 @@ const VStepperVerticalItem = genericComponent()({
       hasCompleted: hasCompleted.value,
       title: props.title,
       subtitle: props.subtitle,
-      step: step.value,
-      value: props.value
+      step: step.value
     }));
     const actionProps = computed(() => ({
       ...slotProps.value,
@@ -29842,7 +29860,7 @@ const VTimePicker = genericComponent()({
           emit('update:second', value);
           break;
       }
-      const emitChange = selecting.value === (props.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute);
+      const emitChange = inputHour.value !== null && inputMinute.value !== null && (props.useSeconds ? inputSecond.value !== null : true);
       if (selecting.value === SelectingTimes.Hour) {
         selecting.value = SelectingTimes.Minute;
       } else if (props.useSeconds && selecting.value === SelectingTimes.Minute) {
@@ -29992,10 +30010,10 @@ const VTreeviewItem = genericComponent()({
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
-          return createVNode(Fragment, null, [props.toggleIcon && createVNode(VListItemAction, {
+          return createVNode(Fragment, null, [createVNode(VListItemAction, {
             "start": false
           }, {
-            default: () => [createVNode(VBtn, {
+            default: () => [props.toggleIcon && createVNode(VBtn, {
               "density": "compact",
               "icon": props.toggleIcon,
               "loading": props.loading,
@@ -30021,6 +30039,7 @@ const VTreeviewItem = genericComponent()({
 // Types
 
 const makeVTreeviewChildrenProps = propsFactory({
+  disabled: Boolean,
   loadChildren: Function,
   loadingIcon: {
     type: String,
@@ -30050,7 +30069,7 @@ const VTreeviewChildren = genericComponent()({
       slots
     } = _ref;
     const isLoading = reactive(new Set());
-    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable);
+    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable));
     async function checkChildren(item) {
       try {
         if (!props.items?.length || !props.loadChildren) return;
@@ -30077,6 +30096,7 @@ const VTreeviewChildren = genericComponent()({
         prepend: slotProps => createVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createVNode("div", null, [createVNode(VCheckboxBtn, {
           "key": item.value,
           "modelValue": slotProps.isSelected,
+          "disabled": props.disabled,
           "loading": loading,
           "color": props.selectedColor,
           "indeterminate": slotProps.isIndeterminate,
@@ -30780,7 +30800,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.7";
+const version$1 = "3.7.8";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31033,7 +31053,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.7";
+const version = "3.7.8";
 
 /* eslint-disable local-rules/sort-imports */