vuetify 3.1.5 → 3.1.7

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.5
+* Vuetify v3.1.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -784,11 +784,12 @@
       b,
       a
     } = _ref2;
-    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
+    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : ''].join('')}`;
   }
   function HexToRGB(hex) {
+    hex = parseHex(hex);
     let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
-    a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
+    a = a === undefined ? a : a / 255;
     return {
       r,
       g,
@@ -811,9 +812,7 @@
     if (hex.length === 3 || hex.length === 4) {
       hex = hex.split('').map(x => x + x).join('');
     }
-    if (hex.length === 6) {
-      hex = padEnd(hex, 8, 'F');
-    } else {
+    if (hex.length !== 6) {
       hex = padEnd(padEnd(hex, 6), 8, 'F');
     }
     return hex;
@@ -1703,22 +1702,30 @@
       lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
+    function getHead() {
+      return {
+        style: [{
+          children: styles.value,
+          id: 'vuetify-theme-stylesheet',
+          nonce: parsedOptions.cspNonce || false
+        }]
+      };
+    }
     function install(app) {
       const head = app._context.provides.usehead;
       if (head) {
-        head.addHeadObjs(vue.computed(() => {
-          const style = {
-            children: styles.value,
-            type: 'text/css',
-            id: 'vuetify-theme-stylesheet'
-          };
-          if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
-          return {
-            style: [style]
-          };
-        }));
-        if (IN_BROWSER) {
-          vue.watchEffect(() => head.updateDOM());
+        if (head.push) {
+          const entry = head.push(getHead);
+          vue.watch(styles, () => {
+            entry.patch(getHead);
+          });
+        } else {
+          if (IN_BROWSER) {
+            head.addHeadObjs(vue.computed(getHead));
+            vue.watchEffect(() => head.updateDOM());
+          } else {
+            head.addHeadObjs(getHead());
+          }
         }
       } else {
         let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
@@ -1820,7 +1827,7 @@
     });
     const model = vue.computed({
       get() {
-        return transformIn(vue.toRaw(isControlled.value ? props[prop] : internal.value));
+        return transformIn(isControlled.value ? props[prop] : internal.value);
       },
       set(internalValue) {
         const newValue = transformOut(internalValue);
@@ -7076,7 +7083,6 @@
   };
 
   /* eslint-disable sonarjs/no-identical-functions */
-
   const independentSelectStrategy = mandatory => {
     const strategy = {
       select: _ref => {
@@ -7085,6 +7091,8 @@
           value,
           selected
         } = _ref;
+        id = vue.toRaw(id);
+
         // When mandatory and we're trying to deselect when id
         // is the only currently selected item then do nothing
         if (mandatory && !value) {
@@ -7129,6 +7137,7 @@
           id,
           ...rest
         } = _ref3;
+        id = vue.toRaw(id);
         const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
         return parentStrategy.select({
           ...rest,
@@ -7159,6 +7168,7 @@
           children,
           ...rest
         } = _ref4;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7182,6 +7192,7 @@
           children,
           ...rest
         } = _ref5;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7205,6 +7216,7 @@
           children,
           parents
         } = _ref6;
+        id = vue.toRaw(id);
         const original = new Map(selected);
         const items = [id];
         while (items.length) {
@@ -7426,7 +7438,7 @@
       isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
-      isSelected: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+      isSelected: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'on'),
       isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
       isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value)),
       isGroupActivator: parent.isGroupActivator
@@ -9069,7 +9081,7 @@
       });
     });
     vue.onScopeDispose(() => {
-      cancelIdleCallback(ric);
+      typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
       cancelAnimationFrame(raf);
     });
   }
@@ -11705,6 +11717,19 @@
         };
       });
       const canvasRef = vue.ref();
+      const canvasWidth = vue.ref(parseFloat(props.width));
+      const canvasHeight = vue.ref(parseFloat(props.height));
+      const {
+        resizeRef
+      } = useResizeObserver(entries => {
+        if (!resizeRef.value?.offsetParent) return;
+        const {
+          width,
+          height
+        } = entries[0].contentRect;
+        canvasWidth.value = width;
+        canvasHeight.value = height;
+      });
       function updateDotPosition(x, y, rect) {
         const {
           left,
@@ -11749,18 +11774,14 @@
           return;
         }
         if (!canvasRef.value) return;
-        const {
-          width,
-          height
-        } = canvasRef.value.getBoundingClientRect();
         const {
           x,
           y
         } = dotPosition.value;
         emit('update:color', {
           h: props.color?.h ?? 0,
-          s: clamp(x, 0, width) / width,
-          v: 1 - clamp(y, 0, height) / height,
+          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
+          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
           a: props.color?.a ?? 1
         });
       });
@@ -11783,16 +11804,27 @@
       vue.watch(() => props.color?.h, updateCanvas, {
         immediate: true
       });
+      vue.watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {
+        updateCanvas();
+        dotPosition.value = {
+          x: dotPosition.value.x * newVal[0] / oldVal[0],
+          y: dotPosition.value.y * newVal[1] / oldVal[1]
+        };
+      }, {
+        flush: 'post'
+      });
       vue.watch(() => props.color, () => {
         if (isInteracting.value) {
           isInteracting.value = false;
           return;
         }
-        if (!props.color) return;
         isOutsideUpdate.value = true;
-        dotPosition.value = {
-          x: props.color.s * parseInt(props.width, 10),
-          y: (1 - props.color.v) * parseInt(props.height, 10)
+        dotPosition.value = props.color ? {
+          x: props.color.s * canvasWidth.value,
+          y: (1 - props.color.v) * canvasHeight.value
+        } : {
+          x: 0,
+          y: 0
         };
       }, {
         deep: true,
@@ -11800,19 +11832,16 @@
       });
       vue.onMounted(() => updateCanvas());
       useRender(() => vue.createVNode("div", {
+        "ref": resizeRef,
         "class": "v-color-picker-canvas",
-        "style": {
-          width: convertToUnit(props.width),
-          height: convertToUnit(props.height)
-        },
         "onClick": handleClick,
         "onMousedown": handleMouseDown,
         "onTouchstart": handleMouseDown
       }, [vue.createVNode("canvas", {
         "ref": canvasRef,
-        "width": props.width,
-        "height": props.height
-      }, null), vue.createVNode("div", {
+        "width": canvasWidth.value,
+        "height": canvasHeight.value
+      }, null), props.color && vue.createVNode("div", {
         "class": ['v-color-picker-canvas__dot', {
           'v-color-picker-canvas__dot--disabled': props.disabled
         }],
@@ -11845,10 +11874,7 @@
         hsva = color;
       }
     }
-    return hsva != null ? {
-      ...hsva,
-      a: hsva.a ?? 1
-    } : null;
+    return hsva;
   }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
@@ -11868,7 +11894,7 @@
     if (typeof input === 'object') {
       let converted;
       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 stripAlpha(converted, !has(input, ['a']) && color.a === 1);
     }
     return color;
   }
@@ -12059,7 +12085,7 @@
       const inputs = vue.computed(() => {
         const mode = enabledModes.value.find(m => m.name === props.mode);
         if (!mode) return [];
-        const color = props.color ? mode.to(props.color) : {};
+        const color = props.color ? mode.to(props.color) : null;
         return mode.inputs?.map(_ref3 => {
           let {
             getValue,
@@ -12070,11 +12096,11 @@
             ...mode.inputProps,
             ...inputProps,
             disabled: props.disabled,
-            value: getValue(color),
+            value: color && getValue(color),
             onChange: e => {
               const target = e.target;
               if (!target) return;
-              emit('update:color', mode.from(getColor(color, target.value)));
+              emit('update:color', mode.from(getColor(color ?? nullColor, target.value)));
             }
           };
         });
@@ -12773,12 +12799,12 @@
         "hideDetails": true
       }, null), !props.hideAlpha && vue.createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
-        "modelValue": props.color?.a,
+        "modelValue": props.color?.a ?? 1,
         "onUpdate:modelValue": a => emit('update:color', {
           ...(props.color ?? nullColor),
           a
         }),
-        "step": 0,
+        "step": 1 / 256,
         "min": 0,
         "max": 1,
         "disabled": props.disabled,
@@ -13163,18 +13189,23 @@
     }
   });
 
+  // Types
+
+  const makeVSheetProps = propsFactory({
+    color: String,
+    ...makeBorderProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-sheet');
   const VSheet = genericComponent()({
     name: 'VSheet',
     props: {
-      color: String,
-      ...makeBorderProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
+      ...makeVSheetProps()
     },
     setup(props, _ref) {
       let {
@@ -13205,10 +13236,11 @@
       const {
         roundedClasses
       } = useRounded(props);
-      return () => vue.createVNode(props.tag, {
+      useRender(() => vue.createVNode(props.tag, {
         "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
         "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
-      }, slots);
+      }, slots));
+      return {};
     }
   });
 
@@ -13285,6 +13317,13 @@
       vue.onMounted(() => {
         if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
       });
+      provideDefaults({
+        VSlider: {
+          color: undefined,
+          trackColor: undefined,
+          trackFillColor: undefined
+        }
+      });
       useRender(() => vue.createVNode(VSheet, {
         "rounded": props.rounded,
         "elevation": props.elevation,
@@ -18725,7 +18764,7 @@
             "item": item
           }, slots);
         }
-        return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item({
+        const slotProps = {
           index,
           item,
           columns: columns.value,
@@ -18733,7 +18772,8 @@
           toggleExpand,
           isSelected,
           toggleSelect
-        }) : vue.createVNode(VDataTableRow, {
+        };
+        return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.createVNode(VDataTableRow, {
           "key": `item_${item.value}`,
           "onClick": event => {
             if (expandOnClick.value) {
@@ -18744,10 +18784,7 @@
             });
           },
           "item": item
-        }, slots), isExpanded(item) && slots['expanded-row']?.({
-          item,
-          columns: columns.value
-        })]);
+        }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
       })]));
       return {};
     }
@@ -19448,7 +19485,7 @@
           "sticky": props.fixedHeader,
           "loading": props.loading,
           "color": props.color
-        }, null)]), slots.thead?.(), vue.createVNode("tbody", {
+        }, slots)]), slots.thead?.(), vue.createVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
@@ -19533,13 +19570,15 @@
         resizeRef.value = rootEl.value;
       });
       const display = useDisplay();
-      const sizes = createRange(props.items.length).map(() => itemHeight.value);
+      const sizeMap = new Map();
+      let sizes = createRange(props.items.length).map(() => itemHeight.value);
       const visibleItems = vue.computed(() => {
         return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
       });
       function handleItemResize(index, height) {
         itemHeight.value = Math.max(itemHeight.value, height);
         sizes[index] = height;
+        sizeMap.set(props.items[index], height);
       }
       function calculateOffset(index) {
         return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
@@ -19569,9 +19608,9 @@
         const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
         const buffer = Math.round(visibleItems.value / 3);
         if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-          first.value = Math.max(midPointIndex - buffer, 0);
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length);
         } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-          first.value = Math.min(Math.max(0, midPointIndex - buffer), props.items.length - visibleItems.value);
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
         }
         lastScrollTop = rootEl.value.scrollTop;
       }
@@ -19593,6 +19632,17 @@
           itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
         }
       });
+      vue.watch(() => props.items.length, () => {
+        sizes = createRange(props.items.length).map(() => itemHeight.value);
+        sizeMap.forEach((height, item) => {
+          const index = props.items.indexOf(item);
+          if (index === -1) {
+            sizeMap.delete(item);
+          } else {
+            sizes[index] = height;
+          }
+        });
+      });
       useRender(() => vue.createVNode("div", {
         "ref": rootEl,
         "class": "v-virtual-scroll",
@@ -19971,7 +20021,7 @@
       locale
     };
   }
-  const version$1 = "3.1.5";
+  const version$1 = "3.1.7";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19983,7 +20033,7 @@
     }
   }
 
-  const version = "3.1.5";
+  const version = "3.1.7";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};