vuetify 3.0.3 → 3.0.4

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.3
+* Vuetify v3.0.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -595,21 +595,29 @@ function fromXYZ$1(xyz) {
 
   // Matrix transform, then gamma adjustment
   for (let i = 0; i < 3; ++i) {
+    // Rescale back to [0, 255]
     rgb[i] = Math.round(clamp(transform(matrix[i][0] * xyz[0] + matrix[i][1] * xyz[1] + matrix[i][2] * xyz[2])) * 255);
   }
-
-  // Rescale back to [0, 255]
-  return (rgb[0] << 16) + (rgb[1] << 8) + (rgb[2] << 0);
+  return {
+    r: rgb[0],
+    g: rgb[1],
+    b: rgb[2]
+  };
 }
-function toXYZ$1(rgb) {
+function toXYZ$1(_ref) {
+  let {
+    r,
+    g,
+    b
+  } = _ref;
   const xyz = [0, 0, 0];
   const transform = srgbReverseTransform;
   const matrix = srgbReverseMatrix;
 
   // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB
-  const r = transform((rgb >> 16 & 0xff) / 255);
-  const g = transform((rgb >> 8 & 0xff) / 255);
-  const b = transform((rgb >> 0 & 0xff) / 255);
+  r = transform(r / 255);
+  g = transform(g / 255);
+  b = transform(b / 255);
 
   // Matrix color space transform
   for (let i = 0; i < 3; ++i) {
@@ -640,43 +648,36 @@ function toXYZ(lab) {
 function isCssColor(color) {
   return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
 }
-function colorToInt(color) {
-  let rgb;
+function parseColor$1(color) {
   if (typeof color === 'number') {
-    rgb = color;
+    if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
+      // int can't have opacity
+      consoleWarn(`'${color}' is not a valid hex color`);
+    }
+    return {
+      r: (color & 0xFF0000) >> 16,
+      g: (color & 0xFF00) >> 8,
+      b: color & 0xFF
+    };
   } else if (typeof color === 'string') {
-    let c = color.startsWith('#') ? color.substring(1) : color;
-    if (c.length === 3) {
-      c = c.split('').map(char => char + char).join('');
+    let hex = color.startsWith('#') ? color.slice(1) : color;
+    if ([3, 4].includes(hex.length)) {
+      hex = hex.split('').map(char => char + char).join('');
+    } else if (![6, 8].includes(hex.length)) {
+      consoleWarn(`'${color}' is not a valid hex(a) color`);
     }
-    if (c.length !== 6 && c.length !== 8) {
-      consoleWarn(`'${color}' is not a valid rgb color`);
+    const int = parseInt(hex, 16);
+    if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) {
+      consoleWarn(`'${color}' is not a valid hex(a) color`);
     }
-    rgb = parseInt(c, 16);
+    return HexToRGB(hex);
   } else {
     throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
   }
-  if (rgb < 0) {
-    consoleWarn(`Colors cannot be negative: '${color}'`);
-    rgb = 0;
-  } else if (rgb > 0xffffffff || isNaN(rgb)) {
-    consoleWarn(`'${color}' is not a valid rgb color`);
-    rgb = 0xffffff;
-  }
-  return rgb;
-}
-function intToHex(color) {
-  let hexColor = color.toString(16);
-  if (hexColor.length < 6) hexColor = '0'.repeat(6 - hexColor.length) + hexColor;
-  return '#' + hexColor;
 }
 
-/**
- * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
- *
- * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
- */
-function HSVAtoRGBA(hsva) {
+/** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+function HSVtoRGB(hsva) {
   const {
     h,
     s,
@@ -696,12 +697,8 @@ function HSVAtoRGBA(hsva) {
   };
 }
 
-/**
- * Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
- *
- * @param color RGBA color as an array [0-255, 0-255, 0-255, 0-1]
- */
-function RGBAtoHSVA(rgba) {
+/** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+function RGBtoHSV(rgba) {
   if (!rgba) return {
     h: 0,
     s: 1,
@@ -733,7 +730,7 @@ function RGBAtoHSVA(rgba) {
     a: rgba.a
   };
 }
-function HSVAtoHSLA(hsva) {
+function HSVtoHSL(hsva) {
   const {
     h,
     s,
@@ -749,7 +746,7 @@ function HSVAtoHSLA(hsva) {
     a
   };
 }
-function HSLAtoHSVA(hsl) {
+function HSLtoHSV(hsl) {
   const {
     h,
     s,
@@ -765,34 +762,47 @@ function HSLAtoHSVA(hsl) {
     a
   };
 }
-function RGBAtoCSS(rgba) {
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+function RGBtoCSS(_ref) {
+  let {
+    r,
+    g,
+    b,
+    a
+  } = _ref;
+  return a === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+function HSVtoCSS(hsva) {
+  return RGBtoCSS(HSVtoRGB(hsva));
 }
-function HSVAtoCSS(hsva) {
-  return RGBAtoCSS(HSVAtoRGBA(hsva));
+function toHex(v) {
+  const h = Math.round(v).toString(16);
+  return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
 }
-function RGBAtoHex(rgba) {
-  const toHex = v => {
-    const h = Math.round(v).toString(16);
-    return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
-  };
-  return `#${[toHex(rgba.r), toHex(rgba.g), toHex(rgba.b), toHex(Math.round(rgba.a * 255))].join('')}`;
+function RGBtoHex(_ref2) {
+  let {
+    r,
+    g,
+    b,
+    a
+  } = _ref2;
+  return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
 }
-function HexToRGBA(hex) {
-  const rgba = chunk(hex.slice(1), 2).map(c => parseInt(c, 16));
+function HexToRGB(hex) {
+  let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
+  a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
   return {
-    r: rgba[0],
-    g: rgba[1],
-    b: rgba[2],
-    a: Math.round(rgba[3] / 255 * 100) / 100
+    r,
+    g,
+    b,
+    a
   };
 }
-function HexToHSVA(hex) {
-  const rgb = HexToRGBA(hex);
-  return RGBAtoHSVA(rgb);
+function HexToHSV(hex) {
+  const rgb = HexToRGB(hex);
+  return RGBtoHSV(rgb);
 }
-function HSVAtoHex(hsva) {
-  return RGBAtoHex(HSVAtoRGBA(hsva));
+function HSVtoHex(hsva) {
+  return RGBtoHex(HSVtoRGB(hsva));
 }
 function parseHex(hex) {
   if (hex.startsWith('#')) {
@@ -807,20 +817,10 @@ function parseHex(hex) {
   } else {
     hex = padEnd(padEnd(hex, 6), 8, 'F');
   }
-  return `#${hex}`.toUpperCase().substr(0, 9);
-}
-function colorToRGB(color) {
-  const int = colorToInt(color);
-  return {
-    r: (int & 0xFF0000) >> 16,
-    g: (int & 0xFF00) >> 8,
-    b: int & 0xFF
-  };
+  return hex;
 }
 function lighten(value, amount) {
   const lab = fromXYZ(toXYZ$1(value));
-  // TODO: why this false positive?
-  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
   lab[0] = lab[0] + amount * 10;
   return fromXYZ$1(toXYZ(lab));
 }
@@ -835,7 +835,7 @@ function darken(value, amount) {
  * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
  */
 function getLuma(color) {
-  const rgb = colorToInt(color);
+  const rgb = parseColor$1(color);
   return toXYZ$1(rgb)[1];
 }
 
@@ -1466,12 +1466,12 @@ const loClip = 0.001; // Output clip (lint trap #2)
 
 function APCAcontrast(text, background) {
   // Linearize sRGB
-  const Rtxt = ((text >> 16 & 0xff) / 255) ** mainTRC;
-  const Gtxt = ((text >> 8 & 0xff) / 255) ** mainTRC;
-  const Btxt = ((text >> 0 & 0xff) / 255) ** mainTRC;
-  const Rbg = ((background >> 16 & 0xff) / 255) ** mainTRC;
-  const Gbg = ((background >> 8 & 0xff) / 255) ** mainTRC;
-  const Bbg = ((background >> 0 & 0xff) / 255) ** mainTRC;
+  const Rtxt = (text.r / 255) ** mainTRC;
+  const Gtxt = (text.g / 255) ** mainTRC;
+  const Btxt = (text.b / 255) ** mainTRC;
+  const Rbg = (background.r / 255) ** mainTRC;
+  const Gbg = (background.g / 255) ** mainTRC;
+  const Bbg = (background.b / 255) ** mainTRC;
 
   // Apply the standard coefficients and sum to Y
   let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
@@ -1637,7 +1637,7 @@ function createTheme(options) {
           for (const variation of ['lighten', 'darken']) {
             const fn = variation === 'lighten' ? lighten : darken;
             for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-              theme.colors[`${name}-${variation}-${amount}`] = intToHex(fn(colorToInt(color), amount));
+              theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
             }
           }
         }
@@ -1645,9 +1645,9 @@ function createTheme(options) {
       for (const color of Object.keys(theme.colors)) {
         if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
         const onColor = `on-${color}`;
-        const colorVal = colorToInt(theme.colors[color]);
-        const blackContrast = Math.abs(APCAcontrast(0, colorVal));
-        const whiteContrast = Math.abs(APCAcontrast(0xffffff, colorVal));
+        const colorVal = parseColor$1(theme.colors[color]);
+        const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
+        const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
 
         // TODO: warn about poor color selections
         // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1677,7 +1677,7 @@ function createTheme(options) {
       } = theme;
       createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${dark ? 'dark' : 'normal'}`, ...genCssVariables(theme), ...Object.keys(variables).map(key => {
         const value = variables[key];
-        const color = typeof value === 'string' && value.startsWith('#') ? colorToRGB(value) : undefined;
+        const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
         const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
         return `--v-${key}: ${rgb ?? value}`;
       })]);
@@ -1779,7 +1779,7 @@ function genCssVariables(theme) {
   const darkOverlay = theme.dark ? 1 : 2;
   const variables = [];
   for (const [key, value] of Object.entries(theme.colors)) {
-    const rgb = colorToRGB(value);
+    const rgb = parseColor$1(value);
     variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
     if (!key.startsWith('on-')) {
       variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
@@ -3143,11 +3143,6 @@ const VToolbar = genericComponent()({
     const isExtended = ref(!!(props.extended || (_slots$extension = slots.extension) != null && _slots$extension.call(slots)));
     const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
     const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
-    provideDefaults({
-      VBtn: {
-        variant: 'text'
-      }
-    });
     useRender(() => {
       var _slots$extension2, _slots$image, _slots$prepend, _slots$default, _slots$append;
       const hasTitle = !!(props.title || slots.title);
@@ -3176,27 +3171,43 @@ const VToolbar = genericComponent()({
           }
         }, {
           default: () => [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots) : createVNode(VImg, null, null)]
-        })]), createVNode("div", {
-          "class": "v-toolbar__content",
-          "style": {
-            height: convertToUnit(contentHeight.value)
+        })]), createVNode(VDefaultsProvider, {
+          "defaults": {
+            VTabs: {
+              height: convertToUnit(contentHeight.value)
+            }
           }
-        }, [slots.prepend && createVNode("div", {
-          "class": "v-toolbar__prepend"
-        }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && createVNode(VToolbarTitle, {
-          "key": "title",
-          "text": props.title
         }, {
-          text: slots.title
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && createVNode("div", {
-          "class": "v-toolbar__append"
-        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), createVNode(VExpandTransition, null, {
-          default: () => [isExtended.value && createVNode("div", {
-            "class": "v-toolbar__extension",
+          default: () => [createVNode("div", {
+            "class": "v-toolbar__content",
             "style": {
+              height: convertToUnit(contentHeight.value)
+            }
+          }, [slots.prepend && createVNode("div", {
+            "class": "v-toolbar__prepend"
+          }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && createVNode(VToolbarTitle, {
+            "key": "title",
+            "text": props.title
+          }, {
+            text: slots.title
+          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && createVNode("div", {
+            "class": "v-toolbar__append"
+          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])])]
+        }), createVNode(VDefaultsProvider, {
+          "defaults": {
+            VTabs: {
               height: convertToUnit(extensionHeight.value)
             }
-          }, [extension])]
+          }
+        }, {
+          default: () => [createVNode(VExpandTransition, null, {
+            default: () => [isExtended.value && createVNode("div", {
+              "class": "v-toolbar__extension",
+              "style": {
+                height: convertToUnit(extensionHeight.value)
+              }
+            }, [extension])]
+          })]
         })]
       });
     });
@@ -5687,7 +5698,7 @@ function useValidation(props) {
   const isDisabled = computed(() => !!(props.disabled || form != null && form.isDisabled.value));
   const isReadonly = computed(() => !!(props.readonly || form != null && form.isReadonly.value));
   const errorMessages = computed(() => {
-    return props.errorMessages.length ? wrapInArray(props.errorMessages) : internalErrorMessages.value;
+    return props.errorMessages.length ? wrapInArray(props.errorMessages.slice(0, Math.max(0, +props.maxErrors))) : internalErrorMessages.value;
   });
   const isValid = computed(() => {
     if (props.error || errorMessages.value.length) return false;
@@ -6725,7 +6736,8 @@ const VChip = defineComponent({
   emits: {
     'click:close': e => true,
     'update:modelValue': value => true,
-    'group:selected': val => true
+    'group:selected': val => true,
+    click: e => true
   },
   setup(props, _ref) {
     let {
@@ -6759,10 +6771,18 @@ const VChip = defineComponent({
     const isActive = useProxiedModel(props, 'modelValue');
     const group = useGroupItem(props, VChipGroupSymbol, false);
     const link = useLink(props, attrs);
+    const isClickable = computed(() => !props.disabled && (!!group || link.isClickable.value || props.link));
     function onCloseClick(e) {
       isActive.value = false;
       emit('click:close', e);
     }
+    function onClick(e) {
+      var _link$navigate;
+      emit('click', e);
+      if (!isClickable.value) return;
+      (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+      group == null ? void 0 : group.toggle();
+    }
     return () => {
       var _slots$default;
       const Tag = link.isLink.value ? 'a' : props.tag;
@@ -6771,8 +6791,6 @@ const VChip = defineComponent({
       const hasFilter = !!(slots.filter || props.filter) && group;
       const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
       const hasColor = !group || group.isSelected.value;
-      const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link);
-      const onClickFunc = props.link ? props.link : group == null ? void 0 : group.toggle;
       return isActive.value && withDirectives(createVNode(Tag, {
         "class": ['v-chip', {
           'v-chip--disabled': props.disabled,
@@ -6785,9 +6803,9 @@ const VChip = defineComponent({
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
         "href": link.href.value,
-        "onClick": isClickable && onClickFunc
+        "onClick": onClick
       }, {
-        default: () => [genOverlays(isClickable, 'v-chip'), hasFilter && createVNode(VDefaultsProvider, {
+        default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VDefaultsProvider, {
           "key": "filter",
           "defaults": {
             VIcon: {
@@ -6857,7 +6875,7 @@ const VChip = defineComponent({
             "onClick": onCloseClick
           }, [slots.close ? slots.close() : createVNode(VIcon, null, null)])]
         })]
-      }), [[resolveDirective("ripple"), isClickable && props.ripple, null]]);
+      }), [[resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
     };
   }
 });
@@ -7653,7 +7671,8 @@ const VListItem = genericComponent()({
             "key": "prepend-icon"
           }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
         }), createVNode("div", {
-          "class": "v-list-item__content"
+          "class": "v-list-item__content",
+          "data-no-activator": ""
         }, [hasTitle && createVNode(VListItemTitle, {
           "key": "title"
         }, {
@@ -11748,13 +11767,13 @@ function parseColor(color) {
   let hsva = null;
   if (typeof color === 'string') {
     const hex = parseHex(color);
-    hsva = HexToHSVA(hex);
+    hsva = HexToHSV(hex);
   }
   if (typeof color === 'object') {
     if (has(color, ['r', 'g', 'b'])) {
-      hsva = RGBAtoHSVA(color);
+      hsva = RGBtoHSV(color);
     } else if (has(color, ['h', 's', 'l'])) {
-      hsva = HSLAtoHSVA(color);
+      hsva = HSLtoHSV(color);
     } else if (has(color, ['h', 's', 'v'])) {
       hsva = color;
     }
@@ -11776,12 +11795,12 @@ function stripAlpha(color, stripAlpha) {
 }
 function extractColor(color, input) {
   if (input == null || typeof input === 'string') {
-    const hex = HSVAtoHex(color);
+    const hex = HSVtoHex(color);
     if (color.a === 1) return hex.slice(0, 7);else return hex;
   }
   if (typeof input === 'object') {
     let converted;
-    if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color);else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color);else if (has(input, ['h', 's', 'v'])) converted = color;
+    if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color);else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color);else if (has(input, ['h', 's', 'v'])) converted = color;
     return stripAlpha(converted, !has(input, ['a']));
   }
   return color;
@@ -11828,14 +11847,19 @@ const rgba = {
     label: 'A',
     max: 1,
     step: 0.01,
-    getValue: c => Math.round(c.a * 100) / 100,
+    getValue: _ref => {
+      let {
+        a
+      } = _ref;
+      return a ? Math.round(a * 100) / 100 : 1;
+    },
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
     })
   }],
-  to: HSVAtoRGBA,
-  from: RGBAtoHSVA
+  to: HSVtoRGB,
+  from: RGBtoHSV
 };
 const rgb = {
   ...rgba,
@@ -11877,14 +11901,19 @@ const hsla = {
     label: 'A',
     max: 1,
     step: 0.01,
-    getValue: c => Math.round(c.a * 100) / 100,
+    getValue: _ref2 => {
+      let {
+        a
+      } = _ref2;
+      return a ? Math.round(a * 100) / 100 : 1;
+    },
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
     })
   }],
-  to: HSVAtoHSLA,
-  from: HSLAtoHSVA
+  to: HSVtoHSL,
+  from: HSLtoHSV
 };
 const hsl = {
   ...hsla,
@@ -11899,8 +11928,8 @@ const hexa = {
     getValue: c => c,
     getColor: (c, v) => v
   }],
-  to: HSVAtoHex,
-  from: HexToHSVA
+  to: HSVtoHex,
+  from: HexToHSV
 };
 const hex = {
   ...hexa,
@@ -12666,7 +12695,7 @@ const VColorPickerPreview = defineComponent({
         "class": "v-color-picker-preview__dot"
       }, [createVNode("div", {
         "style": {
-          background: HSVAtoCSS(props.color ?? nullColor)
+          background: HSVtoCSS(props.color ?? nullColor)
         }
       }, null)]), createVNode("div", {
         "class": "v-color-picker-preview__sliders"
@@ -13207,7 +13236,7 @@ const VColorPicker = defineComponent({
       "theme": props.theme,
       "class": ['v-color-picker'],
       "style": {
-        '--v-color-picker-color-hsv': HSVAtoCSS({
+        '--v-color-picker-color-hsv': HSVtoCSS({
           ...(currentColor.value ?? nullColor),
           a: 1
         })
@@ -15871,8 +15900,7 @@ const VRadioGroup = defineComponent({
             isReadonly
           } = _ref2;
           return createVNode(Fragment, null, [label && createVNode(VLabel, {
-            "for": id.value,
-            "clickable": true
+            "for": id.value
           }, {
             default: () => [label]
           }), createVNode(VSelectionControlGroup, mergeProps(controlProps, {
@@ -18166,7 +18194,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.0.3";
+const version$1 = "3.0.4";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18187,7 +18215,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.0.3";
+const version = "3.0.4";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };