@vuetify/nightly 3.9.1-master.2025-07-17 → 3.9.2-dev.2025-07-18

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.1-master.2025-07-17
+* Vuetify v3.9.2-dev.2025-07-18
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5169,6 +5169,69 @@
     };
   }
 
+  // Utilities
+
+  // Types
+
+  // Composables
+  const makeChunksProps = propsFactory({
+    chunkCount: {
+      type: [Number, String],
+      default: null
+    },
+    chunkWidth: {
+      type: [Number, String],
+      default: null
+    },
+    chunkGap: {
+      type: [Number, String],
+      default: 4
+    }
+  }, 'chunks');
+  function useChunks(props, containerWidth) {
+    const hasChunks = vue.toRef(() => !!props.chunkCount || !!props.chunkWidth);
+    const chunkWidth = vue.computed(() => {
+      const containerSize = vue.toValue(containerWidth);
+      if (!containerSize) {
+        return 0;
+      }
+      if (!props.chunkCount) {
+        return Number(props.chunkWidth);
+      }
+      const count = Number(props.chunkCount);
+      const availableWidth = containerSize - Number(props.chunkGap) * (count - 1);
+      return availableWidth / count;
+    });
+    const chunkGap = vue.toRef(() => Number(props.chunkGap));
+    const chunksMaskStyles = vue.computed(() => {
+      if (!hasChunks.value) {
+        return {};
+      }
+      const chunkGapPx = convertToUnit(chunkGap.value);
+      const chunkWidthPx = convertToUnit(chunkWidth.value);
+      return {
+        maskRepeat: 'repeat-x',
+        maskImage: `linear-gradient(90deg, #000, #000 ${chunkWidthPx}, transparent ${chunkWidthPx}, transparent)`,
+        maskSize: `calc(${chunkWidthPx} + ${chunkGapPx}) 100%`
+      };
+    });
+    function snapValueToChunk(val) {
+      const containerSize = vue.toValue(containerWidth);
+      if (!containerSize) {
+        return val;
+      }
+      const gapRelativeSize = 100 * chunkGap.value / containerSize;
+      const chunkRelativeSize = 100 * (chunkWidth.value + chunkGap.value) / containerSize;
+      const filledChunks = Math.floor((val + gapRelativeSize) / chunkRelativeSize);
+      return clamp(0, filledChunks * chunkRelativeSize - gapRelativeSize / 2, 100);
+    }
+    return {
+      hasChunks,
+      chunksMaskStyles,
+      snapValueToChunk
+    };
+  }
+
   const makeVProgressLinearProps = propsFactory({
     absolute: Boolean,
     active: {
@@ -5203,6 +5266,7 @@
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeChunksProps(),
     ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
@@ -5221,6 +5285,7 @@
       let {
         slots
       } = _ref;
+      const root = vue.ref();
       const progress = useProxiedModel(props, 'modelValue');
       const {
         isRtl,
@@ -5262,6 +5327,24 @@
       const isReversed = vue.computed(() => isRtl.value !== props.reverse);
       const transition = vue.computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
       const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
+      const containerWidth = vue.shallowRef(0);
+      const {
+        hasChunks,
+        chunksMaskStyles,
+        snapValueToChunk
+      } = useChunks(props, containerWidth);
+      useToggleScope(hasChunks, () => {
+        const {
+          resizeRef
+        } = useResizeObserver(entries => containerWidth.value = entries[0].contentRect.width);
+        vue.watchEffect(() => resizeRef.value = root.value);
+      });
+      const bufferWidth = vue.computed(() => {
+        return hasChunks.value ? snapValueToChunk(normalizedBuffer.value) : normalizedBuffer.value;
+      });
+      const barWidth = vue.computed(() => {
+        return hasChunks.value ? snapValueToChunk(normalizedValue.value) : normalizedValue.value;
+      });
       function handleClick(e) {
         if (!intersectionRef.value) return;
         const {
@@ -5272,8 +5355,11 @@
         const value = isReversed.value ? width - e.clientX + (right - width) : e.clientX - left;
         progress.value = Math.round(value / width * max.value);
       }
+      vue.watchEffect(() => {
+        intersectionRef.value = root.value;
+      });
       useRender(() => vue.createVNode(props.tag, {
-        "ref": intersectionRef,
+        "ref": root,
         "class": vue.normalizeClass(['v-progress-linear', {
           'v-progress-linear--absolute': props.absolute,
           'v-progress-linear--active': props.active && isIntersecting.value,
@@ -5288,7 +5374,7 @@
           height: props.active ? convertToUnit(height.value) : 0,
           '--v-progress-linear-height': convertToUnit(height.value),
           ...(props.absolute ? locationStyles.value : {})
-        }, props.style]),
+        }, chunksMaskStyles.value, props.style]),
         "role": "progressbar",
         "aria-hidden": props.active ? 'false' : 'true',
         "aria-valuemin": "0",
@@ -5318,7 +5404,7 @@
           "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
           "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
-            width: convertToUnit(normalizedBuffer.value, '%')
+            width: convertToUnit(bufferWidth.value, '%')
           }])
         }, null), vue.createVNode(vue.Transition, {
           "name": transition.value
@@ -5326,7 +5412,7 @@
           default: () => [!props.indeterminate ? vue.createElementVNode("div", {
             "class": vue.normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
             "style": vue.normalizeStyle([barColorStyles.value, {
-              width: convertToUnit(normalizedValue.value, '%')
+              width: convertToUnit(barWidth.value, '%')
             }])
           }, null) : vue.createElementVNode("div", {
             "class": "v-progress-linear__indeterminate"
@@ -9544,6 +9630,11 @@
       const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
+      const role = vue.computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
+      const ariaSelected = vue.computed(() => {
+        if (!isSelectable.value) return undefined;
+        return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
+      });
       const roundedProps = vue.toRef(() => props.rounded || props.nav);
       const color = vue.toRef(() => props.color ?? props.activeColor);
       const variantProps = vue.toRef(() => ({
@@ -9647,7 +9738,8 @@
           }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
           "style": [colorStyles.value, dimensionStyles.value, props.style],
           "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-          "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
+          "aria-selected": ariaSelected.value,
+          "role": role.value,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, link.linkProps), {
@@ -10149,6 +10241,7 @@
       const activeColor = vue.toRef(() => props.activeColor);
       const baseColor = vue.toRef(() => props.baseColor);
       const color = vue.toRef(() => props.color);
+      const isSelectable = vue.toRef(() => props.selectable || props.activatable);
       createList({
         filterable: props.filterable
       });
@@ -10220,7 +10313,7 @@
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
           "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
           "tabindex": props.disabled ? -1 : 0,
-          "role": "listbox",
+          "role": isSelectable.value ? 'listbox' : 'list',
           "aria-activedescendant": undefined,
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
@@ -13290,6 +13383,7 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -13909,6 +14003,7 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -18996,6 +19091,7 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -24094,6 +24190,42 @@
     return item.isDirectory ? `${path}/${item.name}` : path;
   }
 
+  // Utilities
+  // Composables
+  const makeFileFilterProps = propsFactory({
+    filterByType: String
+  }, 'file-accept');
+  function useFileFilter(props) {
+    const fileFilter = vue.computed(() => props.filterByType ? createFilter(props.filterByType) : null);
+    function filterAccepted(files) {
+      if (fileFilter.value) {
+        const accepted = files.filter(fileFilter.value);
+        return {
+          accepted,
+          rejected: files.filter(f => !accepted.includes(f))
+        };
+      }
+      return {
+        accepted: files,
+        rejected: []
+      };
+    }
+    return {
+      filterAccepted
+    };
+  }
+  function createFilter(v) {
+    const types = v.split(',').map(x => x.trim().toLowerCase());
+    const extensionsToMatch = types.filter(x => x.startsWith('.'));
+    const wildcards = types.filter(x => x.endsWith('/*'));
+    const typesToMatch = types.filter(x => !extensionsToMatch.includes(x) && !wildcards.includes(x));
+    return file => {
+      const extension = file.name.split('.').at(-1)?.toLowerCase() ?? '';
+      const typeGroup = file.type.split('/').at(0)?.toLowerCase() ?? '';
+      return typesToMatch.includes(file.type) || extensionsToMatch.includes(`.${extension}`) || wildcards.includes(`${typeGroup}/*`);
+    };
+  }
+
   // Types
 
   const makeVFileInputProps = propsFactory({
@@ -24126,6 +24258,7 @@
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
     },
+    ...makeFileFilterProps(),
     ...makeVFieldProps({
       clearable: true
     })
@@ -24138,7 +24271,8 @@
       'click:control': e => true,
       'mousedown:control': e => true,
       'update:focused': focused => true,
-      'update:modelValue': files => true
+      'update:modelValue': files => true,
+      rejected: files => true
     },
     setup(props, _ref) {
       let {
@@ -24149,6 +24283,9 @@
       const {
         t
       } = useLocale();
+      const {
+        filterAccepted
+      } = useFileFilter(props);
       const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => !props.multiple && Array.isArray(val) ? val[0] : val);
       const {
         isFocused,
@@ -24222,14 +24359,38 @@
         e.stopImmediatePropagation();
         isDragging.value = false;
         if (!inputRef.value || !hasFilesOrFolders(e)) return;
+        const allDroppedFiles = await handleDrop(e);
+        selectAccepted(allDroppedFiles);
+      }
+      function onFileSelection(e) {
+        if (!e.target || e.repack) return; // prevent loop
+
+        if (!props.filterByType) {
+          const target = e.target;
+          model.value = [...(target.files ?? [])];
+        } else {
+          selectAccepted([...e.target.files]);
+        }
+      }
+      function selectAccepted(files) {
         const dataTransfer = new DataTransfer();
-        for (const file of await handleDrop(e)) {
+        const {
+          accepted,
+          rejected
+        } = filterAccepted(files);
+        if (rejected.length) {
+          emit('rejected', rejected);
+        }
+        for (const file of accepted) {
           dataTransfer.items.add(file);
         }
         inputRef.value.files = dataTransfer.files;
-        inputRef.value.dispatchEvent(new Event('change', {
+        model.value = [...dataTransfer.files];
+        const event = new Event('change', {
           bubbles: true
-        }));
+        });
+        event.repack = true;
+        inputRef.value.dispatchEvent(event);
       }
       vue.watch(model, newValue => {
         const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -24246,6 +24407,8 @@
           ...inputProps
         } = VInput.filterProps(props);
         const fieldProps = VField.filterProps(props);
+        const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
+        const inputAccept = expectsDirectory ? undefined : props.filterByType ?? String(attrs.accept);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": props.multiple ? model.value : model.value[0],
@@ -24301,6 +24464,7 @@
                 return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "type": "file",
+                  "accept": inputAccept,
                   "readonly": isReadonly.value,
                   "disabled": isDisabled.value,
                   "multiple": props.multiple,
@@ -24310,11 +24474,7 @@
                     if (isReadonly.value) e.preventDefault();
                     onFocus();
                   },
-                  "onChange": e => {
-                    if (!e.target) return;
-                    const target = e.target;
-                    model.value = [...(target.files ?? [])];
-                  },
+                  "onChange": onFileSelection,
                   "onDragleave": onDragleave,
                   "onFocus": onFocus,
                   "onBlur": blur
@@ -30349,51 +30509,48 @@
           parentIndentLines: props.parentIndentLines,
           variant: props.indentLinesVariant
         });
-        function renderItem(itemProps) {
-          return vue.createVNode(VTreeviewItem, itemProps, {
-            prepend: slotProps => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.createVNode(VCheckboxBtn, {
-              "key": item.value,
-              "modelValue": slotProps.isSelected,
-              "disabled": props.disabled,
-              "loading": loading,
-              "color": props.selectedColor,
-              "density": props.density,
-              "indeterminate": slotProps.isIndeterminate,
-              "indeterminateIcon": props.indeterminateIcon,
-              "falseIcon": props.falseIcon,
-              "trueIcon": props.trueIcon,
-              "onUpdate:modelValue": v => selectItem(slotProps.select, v),
-              "onClick": e => e.stopPropagation(),
-              "onKeydown": e => {
-                if (!['Enter', 'Space'].includes(e.key)) return;
-                e.stopPropagation();
-                selectItem(slotProps.select, slotProps.isSelected);
-              }
-            }, null)]), slots.prepend?.({
-              ...slotProps,
-              ...treeItemProps,
-              item: item.raw,
-              internalItem: item
-            })]),
-            append: slots.append ? slotProps => slots.append?.({
-              ...slotProps,
-              ...treeItemProps,
-              item: item.raw,
-              internalItem: item
-            }) : undefined,
-            title: slots.title ? slotProps => slots.title?.({
-              ...slotProps,
-              item: item.raw,
-              internalItem: item
-            }) : undefined,
-            subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
-              ...slotProps,
-              item: item.raw,
-              internalItem: item
-            }) : undefined,
-            $stable: true
-          });
-        }
+        const slotsWithItem = {
+          prepend: slotProps => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.createVNode(VCheckboxBtn, {
+            "key": item.value,
+            "modelValue": slotProps.isSelected,
+            "disabled": props.disabled,
+            "loading": loading,
+            "color": props.selectedColor,
+            "density": props.density,
+            "indeterminate": slotProps.isIndeterminate,
+            "indeterminateIcon": props.indeterminateIcon,
+            "falseIcon": props.falseIcon,
+            "trueIcon": props.trueIcon,
+            "onUpdate:modelValue": v => selectItem(slotProps.select, v),
+            "onClick": e => e.stopPropagation(),
+            "onKeydown": e => {
+              if (!['Enter', 'Space'].includes(e.key)) return;
+              e.stopPropagation();
+              selectItem(slotProps.select, slotProps.isSelected);
+            }
+          }, null)]), slots.prepend?.({
+            ...slotProps,
+            ...treeItemProps,
+            item: item.raw,
+            internalItem: item
+          })]),
+          append: slots.append ? slotProps => slots.append?.({
+            ...slotProps,
+            ...treeItemProps,
+            item: item.raw,
+            internalItem: item
+          }) : undefined,
+          title: slots.title ? slotProps => slots.title?.({
+            ...slotProps,
+            item: item.raw,
+            internalItem: item
+          }) : undefined,
+          subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
+            ...slotProps,
+            item: item.raw,
+            internalItem: item
+          }) : undefined
+        };
         const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
         const treeviewChildrenProps = VTreeviewChildren.filterProps({
           ...props,
@@ -30407,16 +30564,21 @@
             let {
               props: activatorProps
             } = _ref2;
-            return renderItem({
+            const listItemProps = {
               ...itemProps,
               ...activatorProps,
-              loading,
-              hideActions: props.hideActions,
-              indentLines: indentLines.node,
-              value: props.returnObject ? item.raw : itemProps.value,
+              value: itemProps?.value,
               onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
               onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
-            });
+            };
+            return vue.createVNode(VTreeviewItem, vue.mergeProps({
+              "ref": el => activatorItems.value[index] = el
+            }, listItemProps, {
+              "hideActions": props.hideActions,
+              "indentLines": indentLines.node,
+              "value": props.returnObject ? item.raw : itemProps.value,
+              "loading": loading
+            }), slotsWithItem);
           },
           default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "items": children,
@@ -30424,8 +30586,7 @@
             "parentIndentLines": indentLines.children,
             "isLastGroup": nextItemHasChildren,
             "returnObject": props.returnObject
-          }), slots),
-          $stable: true
+          }), slots)
         }) : renderSlot(slots.item, {
           props: itemProps,
           item: item.raw,
@@ -30441,12 +30602,11 @@
               props: item.raw
             }, () => vue.createVNode(VListSubheader, item.props, null));
           }
-          return renderItem({
-            ...itemProps,
-            hideActions: props.hideActions,
-            indentLines: indentLines.leaf,
-            value: props.returnObject ? vue.toRaw(item.raw) : itemProps.value
-          });
+          return vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.leaf,
+            "value": props.returnObject ? vue.toRaw(item.raw) : itemProps.value
+          }), slotsWithItem);
         });
       });
     }
@@ -30585,14 +30745,13 @@
           "selected": selected.value,
           "onUpdate:selected": $event => selected.value = $event
         }), {
-          default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
+          default: () => [vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "density": props.density,
             "returnObject": props.returnObject,
             "items": items.value,
             "parentIndentLines": props.indentLines ? [] : undefined,
             "indentLinesVariant": indentLinesVariant
-          }), slots),
-          $stable: true
+          }), slots)]
         });
       });
       return {};
@@ -31833,6 +31992,7 @@
     },
     showSize: Boolean,
     name: String,
+    ...makeFileFilterProps(),
     ...makeDelayProps(),
     ...makeDensityProps(),
     ...pick(makeVDividerProps({
@@ -31845,11 +32005,13 @@
     inheritAttrs: false,
     props: makeVFileUploadProps(),
     emits: {
-      'update:modelValue': files => true
+      'update:modelValue': files => true,
+      rejected: files => true
     },
     setup(props, _ref) {
       let {
         attrs,
+        emit,
         slots
       } = _ref;
       const {
@@ -31858,6 +32020,9 @@
       const {
         densityClasses
       } = useDensity(props);
+      const {
+        filterAccepted
+      } = useFileFilter(props);
       const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
       const isDragging = vue.shallowRef(false);
       const vSheetRef = vue.ref(null);
@@ -31879,14 +32044,38 @@
         e.stopImmediatePropagation();
         isDragging.value = false;
         if (!inputRef.value) return;
+        const allDroppedFiles = await handleDrop(e);
+        selectAccepted(allDroppedFiles);
+      }
+      function onFileSelection(e) {
+        if (!e.target || e.repack) return; // prevent loop
+
+        if (!props.filterByType) {
+          const target = e.target;
+          model.value = [...(target.files ?? [])];
+        } else {
+          selectAccepted([...e.target.files]);
+        }
+      }
+      function selectAccepted(files) {
         const dataTransfer = new DataTransfer();
-        for (const file of await handleDrop(e)) {
+        const {
+          accepted,
+          rejected
+        } = filterAccepted(files);
+        if (rejected.length) {
+          emit('rejected', rejected);
+        }
+        for (const file of accepted) {
           dataTransfer.items.add(file);
         }
         inputRef.value.files = dataTransfer.files;
-        inputRef.value.dispatchEvent(new Event('change', {
+        model.value = [...dataTransfer.files];
+        const event = new Event('change', {
           bubbles: true
-        }));
+        });
+        event.repack = true;
+        inputRef.value.dispatchEvent(event);
       }
       function onClick() {
         inputRef.value?.click();
@@ -31904,17 +32093,16 @@
         const cardProps = VSheet.filterProps(props);
         const dividerProps = VDivider.filterProps(props);
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
+        const inputAccept = expectsDirectory ? undefined : props.filterByType ?? String(attrs.accept);
         const inputNode = vue.createElementVNode("input", vue.mergeProps({
           "ref": inputRef,
           "type": "file",
+          "accept": inputAccept,
           "disabled": props.disabled,
           "multiple": props.multiple,
           "name": props.name,
-          "onChange": e => {
-            if (!e.target) return;
-            const target = e.target;
-            model.value = [...(target.files ?? [])];
-          }
+          "onChange": onFileSelection
         }, inputAttrs), null);
         return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSheet, vue.mergeProps({
           "ref": vSheetRef
@@ -33693,7 +33881,7 @@
       };
     });
   }
-  const version$1 = "3.9.1-master.2025-07-17";
+  const version$1 = "3.9.2-dev.2025-07-18";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -33991,7 +34179,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.1-master.2025-07-17";
+  const version = "3.9.2-dev.2025-07-18";
 
   /* eslint-disable local-rules/sort-imports */