vuetify 3.4.9 → 3.4.10

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.9
+* Vuetify v3.4.10
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -541,6 +541,14 @@
       return child.type !== vue.Fragment || ensureValidVNode(child.children);
     }) ? vnodes : null;
   }
+  function defer(timeout, cb) {
+    if (!IN_BROWSER || timeout === 0) {
+      cb();
+      return () => {};
+    }
+    const timeoutId = window.setTimeout(cb, timeout);
+    return () => window.clearTimeout(timeoutId);
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -3838,7 +3846,6 @@
           // shrink: behavior.has('shrink'),
         };
       });
-
       const canScroll = vue.computed(() => {
         const behavior = scrollBehavior.value;
         return behavior.hide ||
@@ -3921,6 +3928,7 @@
 
   // typeof allowedDensities[number] evalutes to any
   // when generating api types for whatever reason.
+
   // Composables
   const makeDensityProps = propsFactory({
     density: {
@@ -5816,6 +5824,68 @@
     }
   });
 
+  const makeVAvatarProps = propsFactory({
+    start: Boolean,
+    end: Boolean,
+    icon: IconValue,
+    image: String,
+    text: String,
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'flat'
+    })
+  }, 'VAvatar');
+  const VAvatar = genericComponent()({
+    name: 'VAvatar',
+    props: makeVAvatarProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        colorClasses,
+        colorStyles,
+        variantClasses
+      } = useVariant(props);
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
+      const {
+        sizeClasses,
+        sizeStyles
+      } = useSize(props);
+      useRender(() => vue.createVNode(props.tag, {
+        "class": ['v-avatar', {
+          'v-avatar--start': props.start,
+          'v-avatar--end': props.end
+        }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+        "style": [colorStyles.value, sizeStyles.value, props.style]
+      }, {
+        default: () => [props.image ? vue.createVNode(VImg, {
+          "key": "image",
+          "src": props.image,
+          "alt": "",
+          "cover": true
+        }, null) : props.icon ? vue.createVNode(VIcon, {
+          "key": "icon",
+          "icon": props.icon
+        }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
+      }));
+      return {};
+    }
+  });
+
   const makeVLabelProps = propsFactory({
     text: String,
     clickable: Boolean,
@@ -6783,68 +6853,6 @@
     }
   });
 
-  const makeVAvatarProps = propsFactory({
-    start: Boolean,
-    end: Boolean,
-    icon: IconValue,
-    image: String,
-    text: String,
-    ...makeComponentProps(),
-    ...makeDensityProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeTagProps(),
-    ...makeThemeProps(),
-    ...makeVariantProps({
-      variant: 'flat'
-    })
-  }, 'VAvatar');
-  const VAvatar = genericComponent()({
-    name: 'VAvatar',
-    props: makeVAvatarProps(),
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const {
-        themeClasses
-      } = provideTheme(props);
-      const {
-        colorClasses,
-        colorStyles,
-        variantClasses
-      } = useVariant(props);
-      const {
-        densityClasses
-      } = useDensity(props);
-      const {
-        roundedClasses
-      } = useRounded(props);
-      const {
-        sizeClasses,
-        sizeStyles
-      } = useSize(props);
-      useRender(() => vue.createVNode(props.tag, {
-        "class": ['v-avatar', {
-          'v-avatar--start': props.start,
-          'v-avatar--end': props.end
-        }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
-        "style": [colorStyles.value, sizeStyles.value, props.style]
-      }, {
-        default: () => [props.image ? vue.createVNode(VImg, {
-          "key": "image",
-          "src": props.image,
-          "alt": "",
-          "cover": true
-        }, null) : props.icon ? vue.createVNode(VIcon, {
-          "key": "icon",
-          "icon": props.icon
-        }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
-      }));
-      return {};
-    }
-  });
-
   // Types
 
   const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
@@ -7137,7 +7145,8 @@
             }
           }, slots.append)]), hasClose && vue.createVNode("button", vue.mergeProps({
             "key": "close",
-            "class": "v-chip__close"
+            "class": "v-chip__close",
+            "type": "button"
           }, closeProps.value), [!slots.close ? vue.createVNode(VIcon, {
             "key": "close-icon",
             "icon": props.closeIcon,
@@ -8403,6 +8412,9 @@
         }
         e.preventDefault();
       }
+      function onMousedown(e) {
+        isFocused.value = true;
+      }
       function focus(location) {
         if (contentRef.value) {
           return focusChild(contentRef.value, location);
@@ -8413,7 +8425,8 @@
           "ref": contentRef,
           "class": ['v-list', {
             'v-list--disabled': props.disabled,
-            'v-list--nav': props.nav
+            'v-list--nav': props.nav,
+            'v-list--slim': props.slim
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
           "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
           "tabindex": props.disabled || isFocused.value ? -1 : 0,
@@ -8422,7 +8435,8 @@
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
           "onFocus": onFocus,
-          "onKeydown": onKeydown
+          "onKeydown": onKeydown,
+          "onMousedown": onMousedown
         }, {
           default: () => [vue.createVNode(VListChildren, {
             "items": items.value,
@@ -8549,7 +8563,6 @@
     // specific viewport position, usually centered
     connected: connectedLocationStrategy // connected to a certain element
   };
-
   const makeLocationStrategyProps = propsFactory({
     locationStrategy: {
       type: [String, Function],
@@ -9096,26 +9109,27 @@
     openDelay: [Number, String]
   }, 'delay');
   function useDelay(props, cb) {
-    const delays = {};
-    const runDelayFactory = prop => () => {
-      // istanbul ignore next
-      if (!IN_BROWSER) return Promise.resolve(true);
-      const active = prop === 'openDelay';
-      delays.closeDelay && window.clearTimeout(delays.closeDelay);
-      delete delays.closeDelay;
-      delays.openDelay && window.clearTimeout(delays.openDelay);
-      delete delays.openDelay;
+    let clearDelay = () => {};
+    function runDelay(isOpening) {
+      clearDelay?.();
+      const delay = Number(isOpening ? props.openDelay : props.closeDelay);
       return new Promise(resolve => {
-        const delay = parseInt(props[prop] ?? 0, 10);
-        delays[prop] = window.setTimeout(() => {
-          cb?.(active);
-          resolve(active);
-        }, delay);
+        clearDelay = defer(delay, () => {
+          cb?.(isOpening);
+          resolve(isOpening);
+        });
       });
-    };
+    }
+    function runOpenDelay() {
+      return runDelay(true);
+    }
+    function runCloseDelay() {
+      return runDelay(false);
+    }
     return {
-      runCloseDelay: runDelayFactory('closeDelay'),
-      runOpenDelay: runDelayFactory('openDelay')
+      clearDelay,
+      runOpenDelay,
+      runCloseDelay
     };
   }
 
@@ -9962,7 +9976,7 @@
           ref: activatorRef,
           targetRef
         }, activatorEvents.value, props.activatorProps)
-      }), isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
+      }), !props.disabled && isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
         "to": teleportTarget.value
       }, {
@@ -9978,7 +9992,7 @@
           "ref": root
         }, scopeId, attrs), [vue.createVNode(Scrim, vue.mergeProps({
           "color": scrimColor,
-          "modelValue": isActive.value && !!props.scrim
+          "modelValue": !!props.scrim && isActive.value
         }, scrimEvents.value), null), vue.createVNode(MaybeTransition, {
           "appear": true,
           "persisted": true,
@@ -11331,7 +11345,7 @@
         }
         return items.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const computedMenuProps = vue.computed(() => {
         return {
           ...props.menuProps,
@@ -11341,7 +11355,6 @@
           }
         };
       });
-
       const listRef = vue.ref();
       const {
         onListScroll,
@@ -11439,6 +11452,15 @@
           });
         }
       });
+      vue.watch(displayItems, (val, oldVal) => {
+        if (!isFocused.value) return;
+        if (!val.length && props.hideNoData) {
+          menu.value = false;
+        }
+        if (!oldVal.length && val.length) {
+          menu.value = true;
+        }
+      });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -11496,6 +11518,7 @@
               "onFocusin": onFocusin,
               "onScrollPassive": onListScroll,
               "tabindex": "-1",
+              "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -11532,7 +11555,9 @@
                         "modelValue": isSelected,
                         "ripple": false,
                         "tabindex": "-1"
-                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": item.props.prependAvatar
+                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
                         "icon": item.props.prependIcon
                       }, null)]);
                     }
@@ -11823,7 +11848,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
       const {
         onListScroll,
@@ -11982,6 +12007,15 @@
           });
         }
       });
+      vue.watch(displayItems, (val, oldVal) => {
+        if (!isFocused.value) return;
+        if (!val.length && props.hideNoData) {
+          menu.value = false;
+        }
+        if (!oldVal.length && val.length) {
+          menu.value = true;
+        }
+      });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -12036,6 +12070,7 @@
               "onFocusout": onFocusout,
               "onScrollPassive": onListScroll,
               "tabindex": "-1",
+              "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -12071,7 +12106,9 @@
                         "modelValue": isSelected,
                         "ripple": false,
                         "tabindex": "-1"
-                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": item.props.prependAvatar
+                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
                         "icon": item.props.prependIcon
                       }, null)]);
                     },
@@ -13580,7 +13617,6 @@
       function onTransitionCancelled() {
         onAfterTransition(); // This should have the same path as normal transition end.
       }
-
       function onEnterTransition(el) {
         if (!isTransitioning.value) {
           return;
@@ -15579,7 +15615,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
-      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
+      const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
       const {
         onListScroll,
@@ -15707,9 +15743,6 @@
       function onUpdateModelValue(v) {
         if (v == null || v === '' && !props.multiple) model.value = [];
       }
-      vue.watch(filteredItems, val => {
-        if (!val.length && props.hideNoData) menu.value = false;
-      });
       vue.watch(isFocused, (val, oldVal) => {
         if (val || val === oldVal) return;
         selectionIndex.value = -1;
@@ -15733,6 +15766,15 @@
           });
         }
       });
+      vue.watch(displayItems, (val, oldVal) => {
+        if (!isFocused.value) return;
+        if (!val.length && props.hideNoData) {
+          menu.value = false;
+        }
+        if (!oldVal.length && val.length) {
+          menu.value = true;
+        }
+      });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -15787,6 +15829,7 @@
               "onFocusout": onFocusout,
               "onScrollPassive": onListScroll,
               "tabindex": "-1",
+              "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -15822,7 +15865,9 @@
                         "modelValue": isSelected,
                         "ripple": false,
                         "tabindex": "-1"
-                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": item.props.prependAvatar
+                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
                         "icon": item.props.prependIcon
                       }, null)]);
                     },
@@ -17078,10 +17123,6 @@
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
     return Math.floor(diffDays / 7) + 1;
   }
-  function getDay(adapter, value) {
-    const date = adapter.toJsDate(value);
-    return date.getDay();
-  }
 
   // Composables
 
@@ -17830,35 +17871,38 @@
           title: t(option.title)
         };
       }));
-      useRender(() => vue.createVNode("div", {
-        "class": "v-data-table-footer"
-      }, [slots.prepend?.(), vue.createVNode("div", {
-        "class": "v-data-table-footer__items-per-page"
-      }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
-        "items": itemsPerPageOptions.value,
-        "modelValue": itemsPerPage.value,
-        "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
-        "density": "compact",
-        "variant": "outlined",
-        "hide-details": true
-      }, null)]), vue.createVNode("div", {
-        "class": "v-data-table-footer__info"
-      }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
-        "class": "v-data-table-footer__pagination"
-      }, [vue.createVNode(VPagination, {
-        "modelValue": page.value,
-        "onUpdate:modelValue": $event => page.value = $event,
-        "density": "comfortable",
-        "first-aria-label": props.firstPageLabel,
-        "last-aria-label": props.lastPageLabel,
-        "length": pageCount.value,
-        "next-aria-label": props.nextPageLabel,
-        "previous-aria-label": props.prevPageLabel,
-        "rounded": true,
-        "show-first-last-page": true,
-        "total-visible": props.showCurrentPage ? 1 : 0,
-        "variant": "plain"
-      }, null)])]));
+      useRender(() => {
+        const paginationProps = VPagination.filterProps(props);
+        return vue.createVNode("div", {
+          "class": "v-data-table-footer"
+        }, [slots.prepend?.(), vue.createVNode("div", {
+          "class": "v-data-table-footer__items-per-page"
+        }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+          "items": itemsPerPageOptions.value,
+          "modelValue": itemsPerPage.value,
+          "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
+          "density": "compact",
+          "variant": "outlined",
+          "hide-details": true
+        }, null)]), vue.createVNode("div", {
+          "class": "v-data-table-footer__info"
+        }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
+          "class": "v-data-table-footer__pagination"
+        }, [vue.createVNode(VPagination, vue.mergeProps({
+          "modelValue": page.value,
+          "onUpdate:modelValue": $event => page.value = $event,
+          "density": "comfortable",
+          "first-aria-label": props.firstPageLabel,
+          "last-aria-label": props.lastPageLabel,
+          "length": pageCount.value,
+          "next-aria-label": props.nextPageLabel,
+          "previous-aria-label": props.prevPageLabel,
+          "rounded": true,
+          "show-first-last-page": true,
+          "total-visible": props.showCurrentPage ? 1 : 0,
+          "variant": "plain"
+        }, paginationProps), null)])]);
+      });
       return {};
     }
   });
@@ -18242,7 +18286,8 @@
           "class": ['v-data-table__th', {
             'v-data-table__th--sortable': column.sortable,
             'v-data-table__th--sorted': isSorted(column),
-            'v-data-table__th--fixed': column.fixed
+            'v-data-table__th--fixed': column.fixed,
+            'v-data-table__th--sticky': props.sticky
           }, loaderClasses.value],
           "style": {
             width: convertToUnit(column.width),
@@ -19736,7 +19781,11 @@
     max: null,
     min: null,
     showAdjacentMonths: Boolean,
-    year: [Number, String]
+    year: [Number, String],
+    weekdays: {
+      type: Array,
+      default: () => [0, 1, 2, 3, 4, 5, 6]
+    }
   }, 'calendar');
   function useCalendar(props) {
     const adapter = useDate();
@@ -19777,8 +19826,10 @@
       }
       return weeks;
     });
-    const genDays = (days, today) => {
-      return days.map((date, index) => {
+    function genDays(days, today) {
+      return days.filter(date => {
+        return props.weekdays.includes(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));
@@ -19803,7 +19854,7 @@
           localized: adapter.format(date, 'dayOfMonth')
         };
       });
-    };
+    }
     const daysInWeek = vue.computed(() => {
       const lastDay = adapter.startOfWeek(model.value);
       const week = [];
@@ -25407,10 +25458,6 @@
   const makeVCalendarProps = propsFactory({
     hideHeader: Boolean,
     hideWeekNumber: Boolean,
-    weekdays: {
-      type: Array,
-      default: () => [0, 1, 2, 3, 4, 5, 6]
-    },
     ...makeCalendarProps(),
     ...makeVCalendarDayProps(),
     ...makeVCalendarHeaderProps()
@@ -25484,7 +25531,7 @@
         }), null) : slots.header({
           title: title.value
         }))]), vue.createVNode("div", {
-          "class": "v-calendar__container"
+          "class": ['v-calendar__container', `days__${props.weekdays.length}`]
         }, [props.viewMode === 'month' && !props.hideDayHeader && vue.createVNode("div", {
           "class": ['v-calendar-weekly__head', `days__${props.weekdays.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
           "key": "calenderWeeklyHead"
@@ -25496,9 +25543,9 @@
         }, [dayNames[weekday]]))]), props.viewMode === 'month' && vue.createVNode("div", {
           "key": "VCalendarMonth",
           "class": ['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${props.weekdays.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])]
-        }, [chunkArray(daysInMonth.value.filter(day => props.weekdays.includes(getDay(adapter, day.date))), props.weekdays.length).map((week, wi) => [!props.hideWeekNumber ? vue.createVNode("div", {
+        }, [chunkArray(daysInMonth.value, props.weekdays.length).map((week, wi) => [!props.hideWeekNumber ? vue.createVNode("div", {
           "class": "v-calendar-month__weeknumber"
-        }, [weekNumbers.value[wi]]) : '', week.filter(day => props.weekdays.includes(getDay(adapter, day.date))).map(day => vue.createVNode(VCalendarMonthDay, {
+        }, [weekNumbers.value[wi]]) : '', week.map(day => vue.createVNode(VCalendarMonthDay, {
           "color": adapter.isSameDay(new Date(), day.date) ? 'primary' : undefined,
           "day": day,
           "title": day ? adapter.format(day.date, 'dayOfMonth') : 'NaN',
@@ -25906,7 +25953,7 @@
       date
     };
   }
-  const version$1 = "3.4.9";
+  const version$1 = "3.4.10";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25920,7 +25967,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.4.9";
+  const version = "3.4.10";
 
   /* eslint-disable local-rules/sort-imports */