vuetify 3.4.6 → 3.4.8

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.6
+* Vuetify v3.4.8
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -7128,7 +7128,7 @@
                 icon: props.appendIcon
               }
             }
-          }, slots.append)]), hasClose && vue.createVNode("div", vue.mergeProps({
+          }, slots.append)]), hasClose && vue.createVNode("button", vue.mergeProps({
             "key": "close",
             "class": "v-chip__close"
           }, closeProps.value), [!slots.close ? vue.createVNode(VIcon, {
@@ -9829,7 +9829,7 @@
       } = useRtl();
       const {
         hasContent,
-        onAfterLeave
+        onAfterLeave: _onAfterLeave
       } = useLazy(props, isActive);
       const scrimColor = useBackgroundColor(vue.computed(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
@@ -9896,6 +9896,10 @@
       }, {
         immediate: true
       });
+      vue.onBeforeUnmount(() => {
+        if (!IN_BROWSER) return;
+        window.removeEventListener('keydown', onKeydown);
+      });
       function onKeydown(e) {
         if (e.key === 'Escape' && globalTop.value) {
           if (!props.persistent) {
@@ -9941,6 +9945,10 @@
           easing: standardEasing
         });
       }
+      function onAfterLeave() {
+        _onAfterLeave();
+        emit('afterLeave');
+      }
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         props: vue.mergeProps({
@@ -9969,10 +9977,7 @@
           "persisted": true,
           "transition": props.transition,
           "target": target.value,
-          "onAfterLeave": () => {
-            onAfterLeave();
-            emit('afterLeave');
-          }
+          "onAfterLeave": onAfterLeave
         }, {
           default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
             "ref": contentEl,
@@ -11261,7 +11266,7 @@
     ...makeSelectProps(),
     ...omit(makeVTextFieldProps({
       modelValue: null,
-      role: 'button'
+      role: 'combobox'
     }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: {
@@ -11320,6 +11325,16 @@
         return items.value;
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
+      const computedMenuProps = vue.computed(() => {
+        return {
+          ...props.menuProps,
+          activatorProps: {
+            ...(props.menuProps?.activatorProps || {}),
+            'aria-haspopup': 'listbox' // Set aria-haspopup to 'listbox'
+          }
+        };
+      });
+
       const listRef = vue.ref();
       const {
         onListScroll,
@@ -11464,7 +11479,7 @@
             "closeOnContentClick": false,
             "transition": props.transition,
             "onAfterLeave": onAfterLeave
-          }, props.menuProps), {
+          }, computedMenuProps.value), {
             default: () => [hasList && vue.createVNode(VList, {
               "ref": listRef,
               "selected": selectedValues.value,
@@ -11878,9 +11893,6 @@
           }
         }
       }
-      function onInput(e) {
-        search.value = e.target.value;
-      }
       function onChange(e) {
         if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
           const item = items.value.find(item => item.title === e.target.value);
@@ -11909,6 +11921,8 @@
       }
       const isSelecting = vue.shallowRef(false);
       function select(item) {
+        let add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        if (item.props.disabled) return;
         if (props.multiple) {
           const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
           if (index === -1) {
@@ -11919,9 +11933,9 @@
             model.value = value;
           }
         } else {
-          model.value = [item];
+          model.value = add ? [item] : [];
           isSelecting.value = true;
-          search.value = item.title;
+          search.value = add ? item.title : '';
           menu.value = false;
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
@@ -11970,13 +11984,12 @@
           "ref": vTextFieldRef
         }, textFieldProps, {
           "modelValue": search.value,
-          "onUpdate:modelValue": onUpdateModelValue,
+          "onUpdate:modelValue": [$event => search.value = $event, onUpdateModelValue],
           "focused": isFocused.value,
           "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
           "counterValue": counterValue.value,
           "dirty": isDirty,
-          "onInput": onInput,
           "onChange": onChange,
           "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
             'v-autocomplete--active-menu': menu.value,
@@ -12066,7 +12079,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item);
+              select(item, false);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -15615,7 +15628,7 @@
           }
           const originalSelectionIndex = selectionIndex.value;
           const selectedItem = model.value[selectionIndex.value];
-          if (selectedItem && !selectedItem.props.disabled) select(selectedItem);
+          if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false);
           selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         }
         if (e.key === 'ArrowLeft') {
@@ -17742,7 +17755,7 @@
         "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,
@@ -19609,21 +19622,125 @@
     }
   });
 
+  // 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 = vue.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 = vue.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 = vue.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);
+        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 weekNumbers = vue.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,
+      model,
+      weeksInMonth,
+      weekNumbers
+    };
+  }
+
+  const makeVDatePickerMonthProps = propsFactory({
+    color: String,
+    hideWeekdays: Boolean,
+    multiple: Boolean,
+    showWeek: Boolean,
+    ...makeCalendarProps()
   }, 'VDatePickerMonth');
   const VDatePickerMonth = genericComponent()({
     name: 'VDatePickerMonth',
@@ -19639,87 +19756,12 @@
         slots
       } = _ref;
       const daysRef = vue.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 = vue.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 = vue.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 = vue.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 = vue.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));
@@ -19734,10 +19776,6 @@
           model.value = [value];
         }
       }
-      vue.watch(displayValue, val => {
-        month.value = val;
-        year.value = val;
-      });
       return () => vue.createVNode("div", {
         "class": "v-date-picker-month"
       }, [props.showWeek && vue.createVNode("div", {
@@ -19746,7 +19784,7 @@
       }, [!props.hideWeekdays && vue.createVNode("div", {
         "key": "hide-week-days",
         "class": "v-date-picker-month__day"
-      }, [vue.createTextVNode("\xA0")]), weeks.value.map(week => vue.createVNode("div", {
+      }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
       }, [week]))]), vue.createVNode("div", {
         "ref": daysRef,
@@ -19765,7 +19803,6 @@
           "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
@@ -22046,6 +22083,7 @@
           "key": i
         }, {
           ...slots,
+          loader: undefined,
           default: () => {
             return vue.createVNode("input", {
               "ref": val => inputRef.value[i] = val,
@@ -25271,7 +25309,7 @@
       date
     };
   }
-  const version$1 = "3.4.6";
+  const version$1 = "3.4.8";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25285,7 +25323,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.4.6";
+  const version = "3.4.8";
 
   /* eslint-disable local-rules/sort-imports */