vuetify 3.1.5 → 3.1.7

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.5
+* Vuetify v3.1.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -780,11 +780,12 @@ function RGBtoHex(_ref2) {
     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,
@@ -807,9 +808,7 @@ function parseHex(hex) {
   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;
@@ -1699,22 +1698,30 @@ function createTheme(options) {
     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(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) {
-        watchEffect(() => head.updateDOM());
+      if (head.push) {
+        const entry = head.push(getHead);
+        watch(styles, () => {
+          entry.patch(getHead);
+        });
+      } else {
+        if (IN_BROWSER) {
+          head.addHeadObjs(computed(getHead));
+          watchEffect(() => head.updateDOM());
+        } else {
+          head.addHeadObjs(getHead());
+        }
       }
     } else {
       let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
@@ -1816,7 +1823,7 @@ function useProxiedModel(props, prop, defaultValue) {
   });
   const model = computed({
     get() {
-      return transformIn(toRaw(isControlled.value ? props[prop] : internal.value));
+      return transformIn(isControlled.value ? props[prop] : internal.value);
     },
     set(internalValue) {
       const newValue = transformOut(internalValue);
@@ -7072,7 +7079,6 @@ const listOpenStrategy = {
 };
 
 /* eslint-disable sonarjs/no-identical-functions */
-
 const independentSelectStrategy = mandatory => {
   const strategy = {
     select: _ref => {
@@ -7081,6 +7087,8 @@ const independentSelectStrategy = mandatory => {
         value,
         selected
       } = _ref;
+      id = toRaw(id);
+
       // When mandatory and we're trying to deselect when id
       // is the only currently selected item then do nothing
       if (mandatory && !value) {
@@ -7125,6 +7133,7 @@ const independentSingleSelectStrategy = mandatory => {
         id,
         ...rest
       } = _ref3;
+      id = toRaw(id);
       const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
       return parentStrategy.select({
         ...rest,
@@ -7155,6 +7164,7 @@ const leafSelectStrategy = mandatory => {
         children,
         ...rest
       } = _ref4;
+      id = toRaw(id);
       if (children.has(id)) return selected;
       return parentStrategy.select({
         id,
@@ -7178,6 +7188,7 @@ const leafSingleSelectStrategy = mandatory => {
         children,
         ...rest
       } = _ref5;
+      id = toRaw(id);
       if (children.has(id)) return selected;
       return parentStrategy.select({
         id,
@@ -7201,6 +7212,7 @@ const classicSelectStrategy = mandatory => {
         children,
         parents
       } = _ref6;
+      id = toRaw(id);
       const original = new Map(selected);
       const items = [id];
       while (items.length) {
@@ -7422,7 +7434,7 @@ const useNestedItem = (id, isGroup) => {
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
-    isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+    isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
     isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator
@@ -9065,7 +9077,7 @@ function repositionScrollStrategy(data, props, scope) {
     });
   });
   onScopeDispose(() => {
-    cancelIdleCallback(ric);
+    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
     cancelAnimationFrame(raf);
   });
 }
@@ -11701,6 +11713,19 @@ const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
+    const canvasWidth = ref(parseFloat(props.width));
+    const canvasHeight = 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,
@@ -11745,18 +11770,14 @@ const VColorPickerCanvas = defineComponent({
         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
       });
     });
@@ -11779,16 +11800,27 @@ const VColorPickerCanvas = defineComponent({
     watch(() => props.color?.h, updateCanvas, {
       immediate: true
     });
+    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'
+    });
     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,
@@ -11796,19 +11828,16 @@ const VColorPickerCanvas = defineComponent({
     });
     onMounted(() => updateCanvas());
     useRender(() => createVNode("div", {
+      "ref": resizeRef,
       "class": "v-color-picker-canvas",
-      "style": {
-        width: convertToUnit(props.width),
-        height: convertToUnit(props.height)
-      },
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown
     }, [createVNode("canvas", {
       "ref": canvasRef,
-      "width": props.width,
-      "height": props.height
-    }, null), createVNode("div", {
+      "width": canvasWidth.value,
+      "height": canvasHeight.value
+    }, null), props.color && createVNode("div", {
       "class": ['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
       }],
@@ -11841,10 +11870,7 @@ function parseColor(color) {
       hsva = color;
     }
   }
-  return hsva != null ? {
-    ...hsva,
-    a: hsva.a ?? 1
-  } : null;
+  return hsva;
 }
 function stripAlpha(color, stripAlpha) {
   if (stripAlpha) {
@@ -11864,7 +11890,7 @@ function extractColor(color, input) {
   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;
 }
@@ -12055,7 +12081,7 @@ const VColorPickerEdit = defineComponent({
     const inputs = 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,
@@ -12066,11 +12092,11 @@ const VColorPickerEdit = defineComponent({
           ...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)));
           }
         };
       });
@@ -12769,12 +12795,12 @@ const VColorPickerPreview = defineComponent({
       "hideDetails": true
     }, null), !props.hideAlpha && 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,
@@ -13159,18 +13185,23 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
+// 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 {
@@ -13201,10 +13232,11 @@ const VSheet = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    return () => createVNode(props.tag, {
+    useRender(() => 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 {};
   }
 });
 
@@ -13281,6 +13313,13 @@ const VColorPicker = defineComponent({
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
+    provideDefaults({
+      VSlider: {
+        color: undefined,
+        trackColor: undefined,
+        trackFillColor: undefined
+      }
+    });
     useRender(() => createVNode(VSheet, {
       "rounded": props.rounded,
       "elevation": props.elevation,
@@ -18721,7 +18760,7 @@ const VDataTableRows = genericComponent()({
           "item": item
         }, slots);
       }
-      return createVNode(Fragment, null, [slots.item ? slots.item({
+      const slotProps = {
         index,
         item,
         columns: columns.value,
@@ -18729,7 +18768,8 @@ const VDataTableRows = genericComponent()({
         toggleExpand,
         isSelected,
         toggleSelect
-      }) : createVNode(VDataTableRow, {
+      };
+      return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : createVNode(VDataTableRow, {
         "key": `item_${item.value}`,
         "onClick": event => {
           if (expandOnClick.value) {
@@ -18740,10 +18780,7 @@ const VDataTableRows = genericComponent()({
           });
         },
         "item": item
-      }, slots), isExpanded(item) && slots['expanded-row']?.({
-        item,
-        columns: columns.value
-      })]);
+      }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
     })]));
     return {};
   }
@@ -19444,7 +19481,7 @@ const VDataTableServer = genericComponent()({
         "sticky": props.fixedHeader,
         "loading": props.loading,
         "color": props.color
-      }, null)]), slots.thead?.(), createVNode("tbody", {
+      }, slots)]), slots.thead?.(), createVNode("tbody", {
         "class": "v-data-table__tbody",
         "role": "rowgroup"
       }, [slots.body ? slots.body() : createVNode(VDataTableRows, {
@@ -19529,13 +19566,15 @@ const VVirtualScroll = genericComponent()({
       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 = 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);
@@ -19565,9 +19604,9 @@ const VVirtualScroll = genericComponent()({
       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;
     }
@@ -19589,6 +19628,17 @@ const VVirtualScroll = genericComponent()({
         itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
       }
     });
+    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(() => createVNode("div", {
       "ref": rootEl,
       "class": "v-virtual-scroll",
@@ -19967,7 +20017,7 @@ function createVuetify$1() {
     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
@@ -19979,7 +20029,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.5";
+const version = "3.1.7";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};