@vuetify/nightly 3.9.3-master.2025-07-30 → 3.9.3-master.2025-07-31

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3-master.2025-07-30
+* Vuetify v3.9.3-master.2025-07-31
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1649,7 +1649,9 @@ function getScrollParents(el, stopAt) {
 function hasScrollbar(el) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
   const style = window.getComputedStyle(el);
-  return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
+  const hasVerticalScrollbar = style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
+  const hasHorizontalScrollbar = style.overflowX === 'scroll' || style.overflowX === 'auto' && el.scrollWidth > el.clientWidth;
+  return hasVerticalScrollbar || hasHorizontalScrollbar;
 }
 function isPotentiallyScrollable(el) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
@@ -2253,6 +2255,23 @@ var en = {
     unmute: 'Unmute',
     enterFullscreen: 'Full screen',
     exitFullscreen: 'Exit full screen'
+  },
+  colorPicker: {
+    ariaLabel: {
+      eyedropper: 'Select color with eyedropper',
+      hueSlider: 'Hue',
+      alphaSlider: 'Alpha',
+      redInput: 'Red value',
+      greenInput: 'Green value',
+      blueInput: 'Blue value',
+      alphaInput: 'Alpha value',
+      hueInput: 'Hue value',
+      saturationInput: 'Saturation value',
+      lightnessInput: 'Lightness value',
+      hexInput: 'HEX value',
+      hexaInput: 'HEX with alpha value',
+      changeFormat: 'Change color format'
+    }
   }
 };
 
@@ -15978,7 +15997,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       r: Number(v)
-    })
+    }),
+    localeKey: 'redInput'
   }, {
     label: 'G',
     max: 255,
@@ -15987,7 +16007,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       g: Number(v)
-    })
+    }),
+    localeKey: 'greenInput'
   }, {
     label: 'B',
     max: 255,
@@ -15996,7 +16017,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       b: Number(v)
-    })
+    }),
+    localeKey: 'blueInput'
   }, {
     label: 'A',
     max: 1,
@@ -16010,7 +16032,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoRGB,
   from: RGBtoHSV
@@ -16032,7 +16055,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       h: Number(v)
-    })
+    }),
+    localeKey: 'hueInput'
   }, {
     label: 'S',
     max: 1,
@@ -16041,7 +16065,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       s: Number(v)
-    })
+    }),
+    localeKey: 'saturationInput'
   }, {
     label: 'L',
     max: 1,
@@ -16050,7 +16075,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       l: Number(v)
-    })
+    }),
+    localeKey: 'lightnessInput'
   }, {
     label: 'A',
     max: 1,
@@ -16064,7 +16090,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoHSL,
   from: HSLtoHSV
@@ -16080,7 +16107,8 @@ const hexa = {
   inputs: [{
     label: 'HEXA',
     getValue: c => c,
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexaInput'
   }],
   to: HSVtoHex,
   from: HexToHSV
@@ -16090,7 +16118,8 @@ const hex = {
   inputs: [{
     label: 'HEX',
     getValue: c => c.slice(0, 7),
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexInput'
   }]
 };
 const modes = {
@@ -16139,6 +16168,9 @@ const VColorPickerEdit = defineComponent({
     let {
       emit
     } = _ref2;
+    const {
+      t
+    } = useLocale();
     const enabledModes = computed(() => {
       return props.modes.map(key => ({
         ...modes[key],
@@ -16153,11 +16185,13 @@ const VColorPickerEdit = defineComponent({
         let {
           getValue,
           getColor,
+          localeKey,
           ...inputProps
         } = _ref3;
         return {
           ...mode.inputProps,
           ...inputProps,
+          ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
           disabled: props.disabled,
           value: color && getValue(color),
           onChange: e => {
@@ -16175,6 +16209,7 @@ const VColorPickerEdit = defineComponent({
       "icon": "$unfold",
       "size": "x-small",
       "variant": "plain",
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.changeFormat'),
       "onClick": () => {
         const mi = enabledModes.value.findIndex(m => m.name === props.mode);
         emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);
@@ -16940,6 +16975,9 @@ const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const abortController = new AbortController();
     onUnmounted(() => abortController.abort());
     async function openEyeDropper() {
@@ -16965,6 +17003,7 @@ const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [createVNode(VBtn, {
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
       "density": "comfortable",
       "disabled": props.disabled,
       "icon": "$eyeDropper",
@@ -16980,6 +17019,7 @@ const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__sliders"
     }, [createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",
+      "name": t('$vuetify.colorPicker.ariaLabel.hueSlider'),
       "modelValue": props.color?.h,
       "onUpdate:modelValue": h => emit('update:color', {
         ...(props.color ?? nullColor),
@@ -16995,6 +17035,7 @@ const VColorPickerPreview = defineComponent({
       "hideDetails": true
     }, null), !props.hideAlpha && createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
+      "name": t('$vuetify.colorPicker.ariaLabel.alphaSlider'),
       "modelValue": props.color?.a ?? 1,
       "onUpdate:modelValue": a => emit('update:color', {
         ...(props.color ?? nullColor),
@@ -19515,7 +19556,7 @@ function groupItems(items, groupBy) {
   });
   return groups;
 }
-function flattenItems(items, opened) {
+function flattenItems(items, opened, hasSummary) {
   const flatItems = [];
   for (const item of items) {
     // TODO: make this better
@@ -19524,7 +19565,13 @@ function flattenItems(items, opened) {
         flatItems.push(item);
       }
       if (opened.has(item.id) || item.value == null) {
-        flatItems.push(...flattenItems(item.items, opened));
+        flatItems.push(...flattenItems(item.items, opened, hasSummary));
+        if (hasSummary) {
+          flatItems.push({
+            ...item,
+            type: 'group-summary'
+          });
+        }
       }
     } else {
       flatItems.push(item);
@@ -19532,11 +19579,11 @@ function flattenItems(items, opened) {
   }
   return flatItems;
 }
-function useGroupedItems(items, groupBy, opened) {
+function useGroupedItems(items, groupBy, opened, hasSummary) {
   const flatItems = computed(() => {
     if (!groupBy.value.length) return items.value;
     const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key));
-    return flattenItems(groupedItems, opened.value);
+    return flattenItems(groupedItems, opened.value, toValue(hasSummary));
   });
   return {
     flatItems
@@ -20154,7 +20201,7 @@ const VDataIterator = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(sortedItems, groupBy, opened);
+    } = useGroupedItems(sortedItems, groupBy, opened, false);
     const itemsLength = toRef(() => flatItems.value.length);
     const {
       startIndex,
@@ -20859,11 +20906,16 @@ function parseFixedColumns(items) {
     if (item.fixed === true) {
       item.fixed = 'start';
     }
-    const orderedChildren = side === 'start' ? item.children?.toReversed() : item.children;
     if (item.fixed === side) {
-      if (orderedChildren) {
-        for (const child of orderedChildren) {
-          setFixed(child, side, side);
+      if (item.children) {
+        if (side === 'start') {
+          for (let i = item.children.length - 1; i >= 0; i--) {
+            setFixed(item.children[i], side, side);
+          }
+        } else {
+          for (let i = 0; i < item.children.length; i++) {
+            setFixed(item.children[i], side, side);
+          }
         }
       } else {
         if (!seenFixed && side === 'start') {
@@ -20878,57 +20930,63 @@ function parseFixedColumns(items) {
         seenFixed = true;
       }
     } else {
-      if (orderedChildren) {
-        for (const child of orderedChildren) {
-          setFixed(child, side);
+      if (item.children) {
+        if (side === 'start') {
+          for (let i = item.children.length - 1; i >= 0; i--) {
+            setFixed(item.children[i], side);
+          }
+        } else {
+          for (let i = 0; i < item.children.length; i++) {
+            setFixed(item.children[i], side);
+          }
         }
       } else {
         seenFixed = false;
       }
     }
   }
-  for (const item of items.toReversed()) {
-    setFixed(item, 'start');
+  for (let i = items.length - 1; i >= 0; i--) {
+    setFixed(items[i], 'start');
   }
-  for (const item of items) {
-    setFixed(item, 'end');
-  }
-  function setFixedOffset(item) {
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (!item) return offset;
-    if (item.children) {
-      item.fixedOffset = offset;
-      for (const child of item.children) {
-        offset = setFixedOffset(child, offset);
-      }
-    } else if (item.fixed && item.fixed !== 'end') {
-      item.fixedOffset = offset;
-      offset += parseFloat(item.width || '0') || 0;
-    }
-    return offset;
+  for (let i = 0; i < items.length; i++) {
+    setFixed(items[i], 'end');
   }
   let fixedOffset = 0;
-  for (const item of items) {
-    fixedOffset = setFixedOffset(item, fixedOffset);
+  for (let i = 0; i < items.length; i++) {
+    fixedOffset = setFixedOffset(items[i], fixedOffset);
   }
-  function setFixedEndOffset(item) {
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (!item) return offset;
-    if (item.children) {
-      item.fixedEndOffset = offset;
-      for (const child of item.children) {
-        offset = setFixedEndOffset(child, offset);
-      }
-    } else if (item.fixed === 'end') {
-      item.fixedEndOffset = offset;
-      offset += parseFloat(item.width || '0') || 0;
+  let fixedEndOffset = 0;
+  for (let i = items.length - 1; i >= 0; i--) {
+    fixedEndOffset = setFixedEndOffset(items[i], fixedEndOffset);
+  }
+}
+function setFixedOffset(item) {
+  let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!item) return offset;
+  if (item.children) {
+    item.fixedOffset = offset;
+    for (const child of item.children) {
+      offset = setFixedOffset(child, offset);
     }
-    return offset;
+  } else if (item.fixed && item.fixed !== 'end') {
+    item.fixedOffset = offset;
+    offset += parseFloat(item.width || '0') || 0;
   }
-  let fixedEndOffset = 0;
-  for (const item of items.toReversed()) {
-    fixedEndOffset = setFixedEndOffset(item, fixedEndOffset);
+  return offset;
+}
+function setFixedEndOffset(item) {
+  let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!item) return offset;
+  if (item.children) {
+    item.fixedEndOffset = offset;
+    for (const child of item.children) {
+      offset = setFixedEndOffset(child, offset);
+    }
+  } else if (item.fixed === 'end') {
+    item.fixedEndOffset = offset;
+    offset += parseFloat(item.width || '0') || 0;
   }
+  return offset;
 }
 function parse(items, maxDepth) {
   const headers = [];
@@ -21594,6 +21652,15 @@ const VDataTableRows = genericComponent()({
             "item": item
           }, getPrefixedEventHandlers(attrs, ':group-header', () => slotProps)), slots);
         }
+        if (item.type === 'group-summary') {
+          const slotProps = {
+            index,
+            item,
+            columns: columns.value,
+            toggleGroup
+          };
+          return slots['group-summary']?.(slotProps) ?? '';
+        }
         const slotProps = {
           index,
           item: item.raw,
@@ -21843,7 +21910,7 @@ const VDataTable = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(sortedItems, groupBy, opened);
+    } = useGroupedItems(sortedItems, groupBy, opened, () => !!slots['group-summary']);
     const itemsLength = computed(() => flatItems.value.length);
     const {
       startIndex,
@@ -22031,7 +22098,7 @@ const VDataTableVirtual = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(sortedItems, groupBy, opened);
+    } = useGroupedItems(sortedItems, groupBy, opened, () => !!slots['group-summary']);
     const allItems = computed(() => extractRows(flatItems.value));
     const {
       isSelected,
@@ -22260,7 +22327,7 @@ const VDataTableServer = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(items, groupBy, opened);
+    } = useGroupedItems(items, groupBy, opened, () => !!slots['group-summary']);
     const {
       isSelected,
       select,
@@ -26013,6 +26080,7 @@ const VNumberInput = genericComponent()({
       if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
       if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
+        e.stopPropagation();
         clampModel();
         // _model is controlled, so need to wait until props['modelValue'] is updated
         await nextTick();
@@ -30533,14 +30601,19 @@ const VTreeviewChildren = genericComponent()({
             onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
             onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
           };
-          return createVNode(VTreeviewItem, mergeProps({
+          return renderSlot(slots.header, {
+            props: listItemProps,
+            item: item.raw,
+            internalItem: item,
+            loading
+          }, () => createVNode(VTreeviewItem, mergeProps({
             "ref": el => activatorItems.value[index] = el
           }, listItemProps, {
             "hideActions": props.hideActions,
             "indentLines": indentLines.node,
             "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
-          }), slotsWithItem);
+          }), slotsWithItem));
         },
         default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "items": children,
@@ -31342,12 +31415,23 @@ const VCalendar = genericComponent()({
 
 // Types
 
+const availablePipLocations = ['prepend', 'prepend-inner', 'append', 'append-inner'];
 const makeVColorInputProps = propsFactory({
-  pip: Boolean,
+  hidePip: Boolean,
+  colorPip: Boolean,
   pipIcon: {
     type: String,
     default: '$color'
   },
+  pipLocation: {
+    type: String,
+    default: 'prepend',
+    validator: v => availablePipLocations.includes(v)
+  },
+  pipVariant: {
+    type: String,
+    default: 'text'
+  },
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps(),
@@ -31391,8 +31475,15 @@ const VColorInput = genericComponent()({
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
-      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
-      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      const textFieldProps = VTextField.filterProps(props);
+      const slotWithPip = props.hidePip ? undefined : {
+        [props.pipLocation]: arg => createElementVNode(Fragment, null, [createVNode(VAvatar, {
+          "class": "v-color-input__pip",
+          "color": props.colorPip ? model.value : undefined,
+          "variant": props.pipVariant,
+          "icon": props.pipIcon
+        }, null), slots[props.pipLocation]?.(arg)])
+      };
       return createVNode(VTextField, mergeProps(textFieldProps, {
         "class": ['v-color-input', props.class],
         "style": props.style,
@@ -31408,10 +31499,7 @@ const VColorInput = genericComponent()({
         }
       }), {
         ...slots,
-        prepend: props.pipIcon ? arg => createElementVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
-          "color": props.pip ? model.value : undefined,
-          "icon": props.pipIcon
-        }, null), slots.prepend?.(arg)]) : undefined,
+        ...slotWithPip,
         default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -35156,7 +35244,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.3-master.2025-07-30";
+const version$1 = "3.9.3-master.2025-07-31";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35454,7 +35542,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.3-master.2025-07-30";
+const version = "3.9.3-master.2025-07-31";
 
 /* eslint-disable local-rules/sort-imports */