vuetify 3.9.3 → 3.9.4

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3
+* Vuetify v3.9.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1613,7 +1613,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;
@@ -2725,6 +2727,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'
+      }
     }
   };
 
@@ -3323,9 +3342,7 @@
 
   const makeVAppProps = propsFactory({
     ...makeComponentProps(),
-    ...makeLayoutProps({
-      fullHeight: true
-    }),
+    ...omit(makeLayoutProps(), ['fullHeight']),
     ...makeThemeProps()
   }, 'VApp');
   const VApp = genericComponent()({
@@ -3341,7 +3358,10 @@
         getLayoutItem,
         items,
         layoutRef
-      } = createLayout(props);
+      } = createLayout({
+        ...props,
+        fullHeight: true
+      });
       const {
         rtlClasses
       } = useRtl();
@@ -6486,7 +6506,7 @@
       });
       const {
         iconSize
-      } = useIconSizes(props, () => props.prominent ? 44 : 28);
+      } = useIconSizes(props, () => props.prominent ? 44 : undefined);
       const {
         themeClasses
       } = provideTheme(props);
@@ -6537,7 +6557,7 @@
         const iconProps = {
           density: props.density,
           icon: icon.value,
-          size: iconSize.value
+          size: props.iconSize || props.prominent ? iconSize.value : undefined
         };
         return isActive.value && vue.createVNode(props.tag, {
           "class": vue.normalizeClass(['v-alert', props.border && {
@@ -7320,9 +7340,14 @@
   // Utilities
   const RulesSymbol = Symbol.for('vuetify:rules');
   function useRules(fn) {
-    const resolveRules = vue.inject(RulesSymbol, null);
-    if (!resolveRules) return vue.toRef(fn);
-    return resolveRules(fn);
+    const rules = vue.inject(RulesSymbol, null);
+    if (!fn) {
+      if (!rules) {
+        throw new Error('Could not find Vuetify rules injection');
+      }
+      return rules.aliases;
+    }
+    return rules?.resolve(fn) ?? vue.toRef(fn);
   }
 
   // Composables
@@ -11148,11 +11173,11 @@
     function onScroll(e) {
       data.isActive.value = false;
     }
-    bindScroll(data.target.value ?? data.contentEl.value, onScroll);
+    bindScroll(getTargetEl(data.target.value, data.contentEl.value), onScroll);
   }
   function blockScrollStrategy(data, props) {
     const offsetParent = data.root.value?.offsetParent;
-    const target = Array.isArray(data.target.value) ? document.elementFromPoint(...data.target.value) : data.target.value;
+    const target = getTargetEl(data.target.value, data.contentEl.value);
     const scrollElements = [...new Set([...getScrollParents(target, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
     const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
     const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
@@ -11200,7 +11225,7 @@
     }
     ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
       scope.run(() => {
-        bindScroll(data.target.value ?? data.contentEl.value, e => {
+        bindScroll(getTargetEl(data.target.value, data.contentEl.value), e => {
           if (slow) {
             // If the position calculation is slow,
             // defer updates until scrolling is finished.
@@ -11223,10 +11248,10 @@
       cancelAnimationFrame(raf);
     });
   }
-
-  /** @private */
-  function bindScroll(target, onScroll) {
-    const el = Array.isArray(target) ? document.elementFromPoint(...target) : target;
+  function getTargetEl(target, contentEl) {
+    return Array.isArray(target) ? document.elementsFromPoint(...target).find(el => !contentEl?.contains(el)) : target ?? contentEl;
+  }
+  function bindScroll(el, onScroll) {
     const scrollElements = [document, ...getScrollParents(el)];
     scrollElements.forEach(el => {
       el.addEventListener('scroll', onScroll, {
@@ -16222,7 +16247,8 @@
       getColor: (c, v) => ({
         ...c,
         r: Number(v)
-      })
+      }),
+      localeKey: 'redInput'
     }, {
       label: 'G',
       max: 255,
@@ -16231,7 +16257,8 @@
       getColor: (c, v) => ({
         ...c,
         g: Number(v)
-      })
+      }),
+      localeKey: 'greenInput'
     }, {
       label: 'B',
       max: 255,
@@ -16240,7 +16267,8 @@
       getColor: (c, v) => ({
         ...c,
         b: Number(v)
-      })
+      }),
+      localeKey: 'blueInput'
     }, {
       label: 'A',
       max: 1,
@@ -16254,7 +16282,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoRGB,
     from: RGBtoHSV
@@ -16276,7 +16305,8 @@
       getColor: (c, v) => ({
         ...c,
         h: Number(v)
-      })
+      }),
+      localeKey: 'hueInput'
     }, {
       label: 'S',
       max: 1,
@@ -16285,7 +16315,8 @@
       getColor: (c, v) => ({
         ...c,
         s: Number(v)
-      })
+      }),
+      localeKey: 'saturationInput'
     }, {
       label: 'L',
       max: 1,
@@ -16294,7 +16325,8 @@
       getColor: (c, v) => ({
         ...c,
         l: Number(v)
-      })
+      }),
+      localeKey: 'lightnessInput'
     }, {
       label: 'A',
       max: 1,
@@ -16308,7 +16340,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoHSL,
     from: HSLtoHSV
@@ -16324,7 +16357,8 @@
     inputs: [{
       label: 'HEXA',
       getValue: c => c,
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexaInput'
     }],
     to: HSVtoHex,
     from: HexToHSV
@@ -16334,7 +16368,8 @@
     inputs: [{
       label: 'HEX',
       getValue: c => c.slice(0, 7),
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexInput'
     }]
   };
   const modes = {
@@ -16383,6 +16418,9 @@
       let {
         emit
       } = _ref2;
+      const {
+        t
+      } = useLocale();
       const enabledModes = vue.computed(() => {
         return props.modes.map(key => ({
           ...modes[key],
@@ -16397,11 +16435,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 => {
@@ -16419,6 +16459,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);
@@ -17184,6 +17225,9 @@
       let {
         emit
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const abortController = new AbortController();
       vue.onUnmounted(() => abortController.abort());
       async function openEyeDropper() {
@@ -17209,6 +17253,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",
@@ -17224,6 +17269,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),
@@ -17239,6 +17285,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),
@@ -21103,11 +21150,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') {
@@ -21122,57 +21174,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 = [];
@@ -21874,8 +21932,6 @@
     }
   });
 
-  // Types
-
   const makeVTableProps = propsFactory({
     fixedHeader: Boolean,
     fixedFooter: Boolean,
@@ -21905,26 +21961,37 @@
       const {
         densityClasses
       } = useDensity(props);
-      useRender(() => vue.createVNode(props.tag, {
-        "class": vue.normalizeClass(['v-table', {
-          'v-table--fixed-height': !!props.height,
-          'v-table--fixed-header': props.fixedHeader,
-          'v-table--fixed-footer': props.fixedFooter,
-          'v-table--has-top': !!slots.top,
-          'v-table--has-bottom': !!slots.bottom,
-          'v-table--hover': props.hover,
-          'v-table--striped-even': props.striped === 'even',
-          'v-table--striped-odd': props.striped === 'odd'
-        }, themeClasses.value, densityClasses.value, props.class]),
-        "style": vue.normalizeStyle(props.style)
-      }, {
-        default: () => [slots.top?.(), slots.default ? vue.createElementVNode("div", {
-          "class": "v-table__wrapper",
-          "style": {
-            height: convertToUnit(props.height)
+      useRender(() => {
+        const tableContentDefaults = {
+          VCheckboxBtn: {
+            density: props.density
           }
-        }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
-      }));
+        };
+        return vue.createVNode(props.tag, {
+          "class": vue.normalizeClass(['v-table', {
+            'v-table--fixed-height': !!props.height,
+            'v-table--fixed-header': props.fixedHeader,
+            'v-table--fixed-footer': props.fixedFooter,
+            'v-table--has-top': !!slots.top,
+            'v-table--has-bottom': !!slots.bottom,
+            'v-table--hover': props.hover,
+            'v-table--striped-even': props.striped === 'even',
+            'v-table--striped-odd': props.striped === 'odd'
+          }, themeClasses.value, densityClasses.value, props.class]),
+          "style": vue.normalizeStyle(props.style)
+        }, {
+          default: () => [slots.top?.(), vue.createVNode(VDefaultsProvider, {
+            "defaults": tableContentDefaults
+          }, {
+            default: () => [slots.default ? vue.createElementVNode("div", {
+              "class": "v-table__wrapper",
+              "style": {
+                height: convertToUnit(props.height)
+              }
+            }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.()]
+          }), slots.bottom?.()]
+        });
+      });
       return {};
     }
   });
@@ -26257,6 +26324,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();
@@ -31475,7 +31543,7 @@
       };
     });
   }
-  const version$1 = "3.9.3";
+  const version$1 = "3.9.4";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31500,7 +31568,7 @@
       ...options
     });
   };
-  const version = "3.9.3";
+  const version = "3.9.4";
   createVuetify.version = version;
 
   exports.blueprints = index;