vuetify 3.8.8 → 3.8.10

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.8
+* Vuetify v3.8.10
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -530,13 +530,19 @@
     return cleanText;
   }
   function camelizeProps(props) {
-    if (!props) return;
     const out = {};
     for (const prop in props) {
       out[vue.camelize(prop)] = props[prop];
     }
     return out;
   }
+  function onlyDefinedProps(props) {
+    const booleanAttributes = ['checked', 'disabled'];
+    return Object.fromEntries(Object.entries(props).filter(_ref => {
+      let [key, v] = _ref;
+      return booleanAttributes.includes(key) ? !!v : v !== undefined;
+    }));
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -861,7 +867,7 @@
       // WoB should always return negative value.
 
       const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
-      outputContrast = SAPC > -1e-3 ? 0.0 : SAPC > -0.078 ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+      outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
     }
     return outputContrast * 100;
   }
@@ -3813,10 +3819,10 @@
     } = isObject(transition) ? transition : {};
     let transitionProps;
     if (isObject(transition)) {
-      transitionProps = vue.mergeProps(customProps, JSON.parse(JSON.stringify({
+      transitionProps = vue.mergeProps(customProps, onlyDefinedProps({
         disabled,
         group
-      })), rest);
+      }), rest);
     } else {
       transitionProps = vue.mergeProps({
         name: disabled || !transition ? '' : transition
@@ -4885,6 +4891,7 @@
       } else {
         const isSelected = selected.value.includes(id);
         if (props.mandatory && isSelected) return;
+        if (!isSelected && !value) return;
         selected.value = value ?? !isSelected ? [id] : [];
       }
     }
@@ -5110,7 +5117,7 @@
       const observer = new IntersectionObserver(entries => {
         isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
       }, options);
-      vue.onBeforeUnmount(() => {
+      vue.onScopeDispose(() => {
         observer.disconnect();
       });
       vue.watch(intersectionRef, (newValue, oldValue) => {
@@ -5641,9 +5648,9 @@
 
   function useSelectLink(link, select) {
     vue.watch(() => link.isActive?.value, isActive => {
-      if (link.isLink.value && isActive && select) {
+      if (link.isLink.value && isActive != null && select) {
         vue.nextTick(() => {
-          select(true);
+          select(isActive);
         });
       }
     }, {
@@ -9257,6 +9264,7 @@
       type: IconValue,
       default: '$expand'
     },
+    rawId: [String, Number],
     prependIcon: IconValue,
     appendIcon: IconValue,
     fluid: Boolean,
@@ -9278,13 +9286,12 @@
         open,
         id: _id
       } = useNestedItem(() => props.value, true);
-      const id = vue.computed(() => `v-list-group--id-${String(_id.value)}`);
+      const id = vue.computed(() => `v-list-group--id-${String(props.rawId ?? _id.value)}`);
       const list = useList();
       const {
         isBooted
       } = useSsrBoot();
       function onClick(e) {
-        e.stopPropagation();
         if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
         open(!isOpen.value, e);
       }
@@ -9802,9 +9809,10 @@
           }) : undefined
         };
         const listGroupProps = VListGroup.filterProps(itemProps);
-        return children ? vue.createVNode(VListGroup, vue.mergeProps({
-          "value": itemProps?.value
-        }, listGroupProps), {
+        return children ? vue.createVNode(VListGroup, vue.mergeProps(listGroupProps, {
+          "value": props.returnObject ? item : itemProps?.value,
+          "rawId": itemProps?.value
+        }), {
           activator: _ref3 => {
             let {
               props: activatorProps
@@ -9868,7 +9876,7 @@
     const _props = {
       title,
       value,
-      ...camelizeProps(itemProps)
+      ...itemProps
     };
     return {
       title: String(_props.title ?? ''),
@@ -12228,7 +12236,11 @@
           default: slots.loader
         }), hasPrepend && vue.createElementVNode("div", {
           "key": "prepend",
-          "class": "v-field__prepend-inner"
+          "class": "v-field__prepend-inner",
+          "onMousedown": e => {
+            e.preventDefault();
+            e.stopPropagation();
+          }
         }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prependInner",
@@ -12297,7 +12309,11 @@
           })]), [[vue.vShow, props.dirty]])]
         }), hasAppend && vue.createElementVNode("div", {
           "key": "append",
-          "class": "v-field__append-inner"
+          "class": "v-field__append-inner",
+          "onMousedown": e => {
+            e.preventDefault();
+            e.stopPropagation();
+          }
         }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "appendInner",
@@ -12332,6 +12348,16 @@
     }
   });
 
+  function useAutofocus(props) {
+    function onIntersect(isIntersecting, entries) {
+      if (!props.autofocus || !isIntersecting) return;
+      entries[0].target?.focus?.();
+    }
+    return {
+      onIntersect
+    };
+  }
+
   // Types
 
   const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
@@ -12378,6 +12404,9 @@
         focus,
         blur
       } = useFocus(props);
+      const {
+        onIntersect
+      } = useAutofocus(props);
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : (model.value ?? '').toString().length;
       });
@@ -12387,19 +12416,17 @@
         return props.counter;
       });
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
-      function onIntersect(isIntersecting, entries) {
-        if (!props.autofocus || !isIntersecting) return;
-        entries[0].target?.focus?.();
-      }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
       const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
-        if (inputRef.value !== document.activeElement) {
-          inputRef.value?.focus();
-        }
         if (!isFocused.value) focus();
+        vue.nextTick(() => {
+          if (inputRef.value !== document.activeElement) {
+            inputRef.value?.focus();
+          }
+        });
       }
       function onControlMousedown(e) {
         emit('mousedown:control', e);
@@ -12408,7 +12435,6 @@
         e.preventDefault();
       }
       function onControlClick(e) {
-        onFocus();
         emit('click:control', e);
       }
       function onClear(e, reset) {
@@ -13334,6 +13360,7 @@
                     index,
                     itemRef
                   } = _ref2;
+                  const camelizedProps = camelizeProps(item.props);
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
                     key: item.value,
@@ -13355,10 +13382,10 @@
                         "modelValue": isSelected,
                         "ripple": false,
                         "tabindex": "-1"
-                      }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
-                        "image": item.props.prependAvatar
-                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
-                        "icon": item.props.prependIcon
+                      }, null) : undefined, camelizedProps.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": camelizedProps.prependAvatar
+                      }, null), camelizedProps.prependIcon && vue.createVNode(VIcon, {
+                        "icon": camelizedProps.prependIcon
                       }, null)]);
                     }
                   });
@@ -16537,7 +16564,7 @@
           default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-slider-thumb__label-container"
           }, [vue.createElementVNode("div", {
-            "class": vue.normalizeClass(['v-slider-thumb__label'])
+            "class": vue.normalizeClass(['v-slider-thumb__label', textColorClasses.value])
           }, [vue.createElementVNode("div", null, [slots['thumb-label']?.({
             modelValue: props.modelValue
           }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
@@ -17806,7 +17833,7 @@
     const yearStart = new Date(year, 0, 1);
     const size = firstWeekSize(year);
     const d1w1 = size >= minWeekSize ? addDays(yearStart, size - 7) : addDays(yearStart, size);
-    return 1 + getDiff(date, d1w1, 'weeks');
+    return 1 + getDiff(endOfDay(date), startOfDay(d1w1), 'weeks');
   }
   function getDate(date) {
     return date.getDate();
@@ -18109,6 +18136,18 @@
       instance: createInstance(_options, locale)
     };
   }
+  function createDateRange(adapter, start, stop) {
+    const diff = adapter.getDiff(adapter.endOfDay(stop ?? start), adapter.startOfDay(start), 'days');
+    const datesInRange = [start];
+    for (let i = 1; i < diff; i++) {
+      const nextDate = adapter.addDays(start, i);
+      datesInRange.push(nextDate);
+    }
+    if (stop) {
+      datesInRange.push(adapter.endOfDay(stop));
+    }
+    return datesInRange;
+  }
   function createInstance(options, locale) {
     const instance = vue.reactive(typeof options.adapter === 'function'
     // eslint-disable-next-line new-cap
@@ -18119,20 +18158,7 @@
     vue.watch(locale.current, value => {
       instance.locale = options.locale[value] ?? value ?? instance.locale;
     });
-    return Object.assign(instance, {
-      createDateRange(start, stop) {
-        const diff = instance.getDiff(stop ?? start, start, 'days');
-        const datesInRange = [start];
-        for (let i = 1; i < diff; i++) {
-          const nextDate = instance.addDays(start, i);
-          datesInRange.push(nextDate);
-        }
-        if (stop) {
-          datesInRange.push(instance.endOfDay(stop));
-        }
-        return datesInRange;
-      }
-    });
+    return instance;
   }
   function useDate() {
     const options = vue.inject(DateOptionsSymbol);
@@ -20221,7 +20247,9 @@
           "class": "v-data-table-footer"
         }, [slots.prepend?.(), vue.createElementVNode("div", {
           "class": "v-data-table-footer__items-per-page"
-        }, [vue.createElementVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+        }, [vue.createElementVNode("span", {
+          "aria-label": t(props.itemsPerPageText)
+        }, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
           "items": itemsPerPageOptions.value,
           "modelValue": itemsPerPage.value,
           "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
@@ -20273,6 +20301,7 @@
     } = _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,
@@ -20617,6 +20646,11 @@
           top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
         };
       }
+      function handleEnterKeyPress(event, column) {
+        if (event.key === 'Enter' && !props.disableSort) {
+          toggleSort(column);
+        }
+      }
       function getSortIcon(column) {
         const item = sortBy.value.find(item => item.key === column.key);
         if (!item) return props.sortAscIcon;
@@ -20673,7 +20707,9 @@
           "nowrap": column.nowrap,
           "lastFixed": column.lastFixed,
           "noPadding": noPadding
-        }, headerProps), {
+        }, headerProps, {
+          "onKeydown": event => column.sortable && handleEnterKeyPress(event, column)
+        }), {
           default: () => {
             const columnSlotName = `header.${column.key}`;
             const columnSlotProps = {
@@ -22526,7 +22562,7 @@
           } else {
             rangeStop.value = adapter.endOfDay(_value);
           }
-          model.value = adapter.createDateRange(rangeStart.value, rangeStop.value);
+          model.value = createDateRange(adapter, rangeStart.value, rangeStop.value);
         } else {
           rangeStart.value = value;
           rangeStop.value = undefined;
@@ -22745,9 +22781,7 @@
       const yearRef = templateRef();
       vue.onMounted(async () => {
         await vue.nextTick();
-        yearRef.el?.scrollIntoView({
-          block: 'center'
-        });
+        yearRef.el?.focus();
       });
       function isYearAllowed(year) {
         if (Array.isArray(props.allowedYears) && props.allowedYears.length) {
@@ -22883,8 +22917,16 @@
         return value && adapter.isValid(value) ? value : today;
       });
       const headerColor = vue.toRef(() => props.headerColor ?? props.color);
-      const month = vue.ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
-      const year = vue.ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
+      const _month = useProxiedModel(props, 'month');
+      const month = vue.computed({
+        get: () => Number(_month.value ?? adapter.getMonth(adapter.startOfMonth(internal.value))),
+        set: v => _month.value = v
+      });
+      const _year = useProxiedModel(props, 'year');
+      const year = vue.computed({
+        get: () => Number(_year.value ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))),
+        set: v => _year.value = v
+      });
       const isReversing = vue.shallowRef(false);
       const header = vue.computed(() => {
         if (props.multiple && model.value.length > 1) {
@@ -22968,9 +23010,9 @@
         } else {
           year.value++;
           month.value = 0;
-          onUpdateYear(year.value);
+          onUpdateYear();
         }
-        onUpdateMonth(month.value);
+        onUpdateMonth();
       }
       function onClickPrev() {
         if (month.value > 0) {
@@ -22978,9 +23020,9 @@
         } else {
           year.value--;
           month.value = 11;
-          onUpdateYear(year.value);
+          onUpdateYear();
         }
-        onUpdateMonth(month.value);
+        onUpdateMonth();
       }
       function onClickDate() {
         viewMode.value = 'month';
@@ -22991,13 +23033,11 @@
       function onClickYear() {
         viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
       }
-      function onUpdateMonth(value) {
+      function onUpdateMonth() {
         if (viewMode.value === 'months') onClickMonth();
-        emit('update:month', value);
       }
-      function onUpdateYear(value) {
+      function onUpdateYear() {
         if (viewMode.value === 'year') onClickYear();
-        emit('update:year', value);
       }
       vue.watch(model, (val, oldVal) => {
         const arrBefore = wrapInArray(oldVal);
@@ -23009,11 +23049,11 @@
         const newYear = adapter.getYear(after);
         if (newMonth !== month.value) {
           month.value = newMonth;
-          onUpdateMonth(month.value);
+          onUpdateMonth();
         }
         if (newYear !== year.value) {
           year.value = newYear;
-          onUpdateYear(year.value);
+          onUpdateYear();
         }
         isReversing.value = adapter.isBefore(before, after);
       });
@@ -23613,6 +23653,56 @@
 
   // Types
 
+  function useFileDrop() {
+    function hasFilesOrFolders(e) {
+      const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+      return entries.length > 0 || [...(e.dataTransfer?.files ?? [])].length > 0;
+    }
+    async function handleDrop(e) {
+      const result = [];
+      const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+      if (entries.length) {
+        for (const entry of entries) {
+          const files = await traverseFileTree(entry, appendIfDirectory('.', entry));
+          result.push(...files.map(x => x.file));
+        }
+      } else {
+        result.push(...[...(e.dataTransfer?.files ?? [])]);
+      }
+      return result;
+    }
+    return {
+      handleDrop,
+      hasFilesOrFolders
+    };
+  }
+  function traverseFileTree(item) {
+    let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    return new Promise((resolve, reject) => {
+      if (item.isFile) {
+        const fileEntry = item;
+        fileEntry.file(file => resolve([{
+          file,
+          path
+        }]), reject);
+      } else if (item.isDirectory) {
+        const directoryReader = item.createReader();
+        directoryReader.readEntries(async entries => {
+          const files = [];
+          for (const entry of entries) {
+            files.push(...(await traverseFileTree(entry, appendIfDirectory(path, entry))));
+          }
+          resolve(files);
+        });
+      }
+    });
+  }
+  function appendIfDirectory(path, item) {
+    return item.isDirectory ? `${path}/${item.name}` : path;
+  }
+
+  // Types
+
   const makeVFileInputProps = propsFactory({
     chips: Boolean,
     counter: Boolean,
@@ -23697,6 +23787,10 @@
       const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       const isDragging = vue.shallowRef(false);
+      const {
+        handleDrop,
+        hasFilesOrFolders
+      } = useFileDrop();
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -23730,13 +23824,13 @@
         e.preventDefault();
         isDragging.value = false;
       }
-      function onDrop(e) {
+      async function onDrop(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         isDragging.value = false;
-        if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+        if (!inputRef.value || !hasFilesOrFolders(e)) return;
         const dataTransfer = new DataTransfer();
-        for (const file of e.dataTransfer.files) {
+        for (const file of await handleDrop(e)) {
           dataTransfer.items.add(file);
         }
         inputRef.value.files = dataTransfer.files;
@@ -25167,6 +25261,7 @@
       ...makeVNumberInputProps()
     },
     emits: {
+      'update:focused': val => true,
       'update:modelValue': val => true
     },
     setup(props, _ref) {
@@ -25182,11 +25277,7 @@
       });
       const form = useForm(props);
       const controlsDisabled = vue.computed(() => form.isDisabled.value || form.isReadonly.value);
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
+      const isFocused = vue.shallowRef(props.focused);
       function correctPrecision(val) {
         let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
         const fixed = precision == null ? String(val) : val.toFixed(precision);
@@ -25371,11 +25462,9 @@
         inputText.value = model.value.toString();
       }
       function onFocus() {
-        focus();
         trimDecimalZeros();
       }
       function onBlur() {
-        blur();
         clampModel();
       }
       useRender(() => {
@@ -25468,9 +25557,12 @@
         }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createElementVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
         return vue.createVNode(VTextField, vue.mergeProps({
-          "ref": vTextFieldRef,
+          "ref": vTextFieldRef
+        }, textFieldProps, {
           "modelValue": inputText.value,
           "onUpdate:modelValue": $event => inputText.value = $event,
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.value,
           "onBeforeinput": onBeforeinput,
           "onFocus": onFocus,
@@ -25483,8 +25575,7 @@
             'v-number-input--reverse': props.reverse,
             'v-number-input--split': controlVariant.value === 'split',
             'v-number-input--stacked': controlVariant.value === 'stacked'
-          }, props.class]
-        }, textFieldProps, {
+          }, props.class],
           "style": props.style,
           "inputmode": "decimal"
         }), {
@@ -25570,6 +25661,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];
+        });
+      });
       function onInput() {
         // The maxlength attribute doesn't work for the number type input, so the text type is used.
         // The following logic simulates the behavior of a number input.
@@ -25619,7 +25725,7 @@
       function onPaste(index, e) {
         e.preventDefault();
         e.stopPropagation();
-        const clipboardText = e?.clipboardData?.getData('Text').slice(0, length.value) ?? '';
+        const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
         if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
         inputRef.value?.[index].blur();
@@ -25651,7 +25757,10 @@
         scoped: true
       });
       vue.watch(model, val => {
-        if (val.length === length.value) emit('finish', val.join(''));
+        if (val.length === length.value) {
+          focusIndex.value = length.value - 1;
+          emit('finish', val.join(''));
+        }
       }, {
         deep: true
       });
@@ -28313,6 +28422,9 @@
         focus,
         blur
       } = useFocus(props);
+      const {
+        onIntersect
+      } = useAutofocus(props);
       const counterValue = vue.computed(() => {
         return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value || '').toString().length;
       });
@@ -28321,10 +28433,6 @@
         if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
         return props.counter;
       });
-      function onIntersect(isIntersecting, entries) {
-        if (!props.autofocus || !isIntersecting) return;
-        entries[0].target?.focus?.();
-      }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const controlHeight = vue.shallowRef('');
@@ -29404,7 +29512,7 @@
       };
     });
   }
-  const version$1 = "3.8.8";
+  const version$1 = "3.8.10";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -29429,7 +29537,7 @@
       ...options
     });
   };
-  const version = "3.8.8";
+  const version = "3.8.10";
   createVuetify.version = version;
 
   exports.blueprints = index;