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

package/dist/vuetify-labs.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.
 */
@@ -1653,7 +1653,9 @@
   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;
@@ -2257,6 +2259,23 @@
       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'
+      }
     }
   };
 
@@ -15982,7 +16001,8 @@
       getColor: (c, v) => ({
         ...c,
         r: Number(v)
-      })
+      }),
+      localeKey: 'redInput'
     }, {
       label: 'G',
       max: 255,
@@ -15991,7 +16011,8 @@
       getColor: (c, v) => ({
         ...c,
         g: Number(v)
-      })
+      }),
+      localeKey: 'greenInput'
     }, {
       label: 'B',
       max: 255,
@@ -16000,7 +16021,8 @@
       getColor: (c, v) => ({
         ...c,
         b: Number(v)
-      })
+      }),
+      localeKey: 'blueInput'
     }, {
       label: 'A',
       max: 1,
@@ -16014,7 +16036,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoRGB,
     from: RGBtoHSV
@@ -16036,7 +16059,8 @@
       getColor: (c, v) => ({
         ...c,
         h: Number(v)
-      })
+      }),
+      localeKey: 'hueInput'
     }, {
       label: 'S',
       max: 1,
@@ -16045,7 +16069,8 @@
       getColor: (c, v) => ({
         ...c,
         s: Number(v)
-      })
+      }),
+      localeKey: 'saturationInput'
     }, {
       label: 'L',
       max: 1,
@@ -16054,7 +16079,8 @@
       getColor: (c, v) => ({
         ...c,
         l: Number(v)
-      })
+      }),
+      localeKey: 'lightnessInput'
     }, {
       label: 'A',
       max: 1,
@@ -16068,7 +16094,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoHSL,
     from: HSLtoHSV
@@ -16084,7 +16111,8 @@
     inputs: [{
       label: 'HEXA',
       getValue: c => c,
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexaInput'
     }],
     to: HSVtoHex,
     from: HexToHSV
@@ -16094,7 +16122,8 @@
     inputs: [{
       label: 'HEX',
       getValue: c => c.slice(0, 7),
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexInput'
     }]
   };
   const modes = {
@@ -16143,6 +16172,9 @@
       let {
         emit
       } = _ref2;
+      const {
+        t
+      } = useLocale();
       const enabledModes = vue.computed(() => {
         return props.modes.map(key => ({
           ...modes[key],
@@ -16157,11 +16189,13 @@
           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 => {
@@ -16179,6 +16213,7 @@
         "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);
@@ -16944,6 +16979,9 @@
       let {
         emit
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const abortController = new AbortController();
       vue.onUnmounted(() => abortController.abort());
       async function openEyeDropper() {
@@ -16969,6 +17007,7 @@
         "class": "v-color-picker-preview__eye-dropper",
         "key": "eyeDropper"
       }, [vue.createVNode(VBtn, {
+        "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
         "density": "comfortable",
         "disabled": props.disabled,
         "icon": "$eyeDropper",
@@ -16984,6 +17023,7 @@
         "class": "v-color-picker-preview__sliders"
       }, [vue.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),
@@ -16999,6 +17039,7 @@
         "hideDetails": true
       }, null), !props.hideAlpha && vue.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),
@@ -19519,7 +19560,7 @@
     });
     return groups;
   }
-  function flattenItems(items, opened) {
+  function flattenItems(items, opened, hasSummary) {
     const flatItems = [];
     for (const item of items) {
       // TODO: make this better
@@ -19528,7 +19569,13 @@
           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);
@@ -19536,11 +19583,11 @@
     }
     return flatItems;
   }
-  function useGroupedItems(items, groupBy, opened) {
+  function useGroupedItems(items, groupBy, opened, hasSummary) {
     const flatItems = vue.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, vue.toValue(hasSummary));
     });
     return {
       flatItems
@@ -20158,7 +20205,7 @@
       });
       const {
         flatItems
-      } = useGroupedItems(sortedItems, groupBy, opened);
+      } = useGroupedItems(sortedItems, groupBy, opened, false);
       const itemsLength = vue.toRef(() => flatItems.value.length);
       const {
         startIndex,
@@ -20863,11 +20910,16 @@
       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') {
@@ -20882,57 +20934,63 @@
           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 = [];
@@ -21598,6 +21656,15 @@
               "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,
@@ -21847,7 +21914,7 @@
       });
       const {
         flatItems
-      } = useGroupedItems(sortedItems, groupBy, opened);
+      } = useGroupedItems(sortedItems, groupBy, opened, () => !!slots['group-summary']);
       const itemsLength = vue.computed(() => flatItems.value.length);
       const {
         startIndex,
@@ -22035,7 +22102,7 @@
       });
       const {
         flatItems
-      } = useGroupedItems(sortedItems, groupBy, opened);
+      } = useGroupedItems(sortedItems, groupBy, opened, () => !!slots['group-summary']);
       const allItems = vue.computed(() => extractRows(flatItems.value));
       const {
         isSelected,
@@ -22264,7 +22331,7 @@
       });
       const {
         flatItems
-      } = useGroupedItems(items, groupBy, opened);
+      } = useGroupedItems(items, groupBy, opened, () => !!slots['group-summary']);
       const {
         isSelected,
         select,
@@ -26017,6 +26084,7 @@
         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 vue.nextTick();
@@ -30537,14 +30605,19 @@
               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({
+            return renderSlot(slots.header, {
+              props: listItemProps,
+              item: item.raw,
+              internalItem: item,
+              loading
+            }, () => 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);
+            }), slotsWithItem));
           },
           default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "items": children,
@@ -31346,12 +31419,23 @@
 
   // 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(),
@@ -31395,8 +31479,15 @@
       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 => vue.createElementVNode(vue.Fragment, null, [vue.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 vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
           "class": ['v-color-input', props.class],
           "style": props.style,
@@ -31412,10 +31503,7 @@
           }
         }), {
           ...slots,
-          prepend: props.pipIcon ? arg => vue.createElementVNode(vue.Fragment, null, [hasPrepend && vue.createVNode(VIcon, {
-            "color": props.pip ? model.value : undefined,
-            "icon": props.pipIcon
-          }, null), slots.prepend?.(arg)]) : undefined,
+          ...slotWithPip,
           default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -35160,7 +35248,7 @@
       };
     });
   }
-  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
@@ -35458,7 +35546,7 @@
 
   /* 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 */