vuetify 3.1.6 → 3.1.8

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.6
+* Vuetify v3.1.8
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1671,17 +1671,9 @@ function createTheme(options) {
     if (current.value.dark) {
       createCssClass(lines, ':root', ['color-scheme: dark']);
     }
+    createCssClass(lines, ':root', genCssVariables(current.value));
     for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-      const {
-        variables,
-        dark
-      } = 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('#') ? parseColor$1(value) : undefined;
-        const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-        return `--v-${key}: ${rgb ?? value}`;
-      })]);
+      createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]);
     }
     const bgLines = [];
     const fgLines = [];
@@ -1794,6 +1786,11 @@ function genCssVariables(theme) {
       variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
     }
   }
+  for (const [key, value] of Object.entries(theme.variables)) {
+    const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+    const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
+    variables.push(`--v-${key}: ${rgb ?? value}`);
+  }
   return variables;
 }
 
@@ -2023,7 +2020,7 @@ const defaultRtl = {
   en: false,
   es: false,
   et: false,
-  fa: false,
+  fa: true,
   fi: false,
   fr: false,
   hr: false,
@@ -2184,7 +2181,7 @@ const VDefaultsProvider = genericComponent(false)({
 // Types
 
 function createCssTransition(name) {
-  let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top center 0';
+  let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center center';
   let mode = arguments.length > 2 ? arguments[2] : undefined;
   return genericComponent()({
     name,
@@ -6175,6 +6172,7 @@ const VTextField = genericComponent()({
             "id": id.value,
             "active": isActive.value || isDirty.value,
             "dirty": isDirty.value || props.dirty,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -9123,8 +9121,8 @@ function getClientWidth(isHydrate) {
 function getClientHeight(isHydrate) {
   return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
 }
-function getPlatform() {
-  const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
+function getPlatform(isHydrate) {
+  const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
   function match(regexp) {
     return Boolean(userAgent.match(regexp));
   }
@@ -9139,7 +9137,6 @@ function getPlatform() {
   const win = match(/win/i);
   const mac = match(/mac/i);
   const linux = match(/linux/i);
-  const ssr = match(/ssr/i);
   return {
     android,
     ios,
@@ -9153,7 +9150,7 @@ function getPlatform() {
     mac,
     linux,
     touch: SUPPORTS_TOUCH,
-    ssr
+    ssr: userAgent === 'ssr'
   };
 }
 function createDisplay(options, ssr) {
@@ -9162,13 +9159,17 @@ function createDisplay(options, ssr) {
     mobileBreakpoint
   } = parseDisplayOptions(options);
   const height = ref(getClientHeight(ssr));
-  const platform = getPlatform();
+  const platform = shallowRef(getPlatform(ssr));
   const state = reactive({});
   const width = ref(getClientWidth(ssr));
-  function update() {
+  function updateSize() {
     height.value = getClientHeight();
     width.value = getClientWidth();
   }
+  function update() {
+    updateSize();
+    platform.value = getPlatform();
+  }
 
   // eslint-disable-next-line max-statements
   watchEffect(() => {
@@ -9180,7 +9181,7 @@ function createDisplay(options, ssr) {
     const xxl = width.value >= thresholds.xxl;
     const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : xl ? 'xl' : 'xxl';
     const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];
-    const mobile = !platform.ssr ? width.value < breakpointValue : platform.android || platform.ios || platform.opera;
+    const mobile = width.value < breakpointValue;
     state.xs = xs;
     state.sm = sm;
     state.md = md;
@@ -9200,11 +9201,11 @@ function createDisplay(options, ssr) {
     state.width = width.value;
     state.mobile = mobile;
     state.mobileBreakpoint = mobileBreakpoint;
-    state.platform = platform;
+    state.platform = platform.value;
     state.thresholds = thresholds;
   });
   if (IN_BROWSER) {
-    window.addEventListener('resize', update, {
+    window.addEventListener('resize', updateSize, {
       passive: true
     });
   }
@@ -14217,6 +14218,7 @@ const VFileInput = genericComponent()({
             "id": id.value,
             "active": isDirty.value || isFocused.value,
             "dirty": isDirty.value,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -16853,19 +16855,17 @@ const VSnackbar = genericComponent()({
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "contentProps": mergeProps({
-          style: locationStyles.value
+          class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
+          style: [locationStyles.value, colorStyles.value],
+          onPointerenter,
+          onPointerleave: startTimeout
         }, overlayProps.contentProps),
         "persistent": true,
         "noClickAnimation": true,
         "scrim": false,
         "scrollStrategy": "none"
       }, scopeId), {
-        default: () => [createVNode("div", {
-          "class": ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-          "style": [colorStyles.value],
-          "onPointerenter": onPointerenter,
-          "onPointerleave": startTimeout
-        }, [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
           "class": "v-snackbar__content",
           "role": "status",
           "aria-live": "polite"
@@ -16880,7 +16880,7 @@ const VSnackbar = genericComponent()({
           default: () => [createVNode("div", {
             "class": "v-snackbar__actions"
           }, [slots.actions()])]
-        })])],
+        })],
         activator: slots.activator
       });
     });
@@ -17482,6 +17482,7 @@ const VTextarea = genericComponent()({
           }, fieldProps, {
             "active": isActive.value || isDirty.value,
             "dirty": isDirty.value || props.dirty,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -18760,7 +18761,7 @@ const VDataTableRows = genericComponent()({
           "item": item
         }, slots);
       }
-      return createVNode(Fragment, null, [slots.item ? slots.item({
+      const slotProps = {
         index,
         item,
         columns: columns.value,
@@ -18768,7 +18769,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) {
@@ -18779,10 +18781,7 @@ const VDataTableRows = genericComponent()({
           });
         },
         "item": item
-      }, slots), isExpanded(item) && slots['expanded-row']?.({
-        item,
-        columns: columns.value
-      })]);
+      }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
     })]));
     return {};
   }
@@ -19015,7 +19014,8 @@ function useOptions(_ref) {
     page,
     itemsPerPage,
     sortBy,
-    groupBy
+    groupBy,
+    search
   } = _ref;
   const vm = getCurrentInstance('VDataTable');
   const options = computed(() => ({
@@ -19032,6 +19032,11 @@ function useOptions(_ref) {
     deep: true
   });
 
+  // Reset page when searching
+  watch(() => search?.value, () => {
+    page.value = 1;
+  });
+
   // Reset page when items-per-page changes
   watch(itemsPerPage, () => {
     page.value = 1;
@@ -19101,9 +19106,10 @@ const VDataTable = genericComponent()({
       items
     } = useDataTableItems(props, columns);
     const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
+    const search = toRef(props, 'search');
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'), {
+    } = useFilter(props, items, search, {
       filterKeys
     });
     const {
@@ -19136,7 +19142,8 @@ const VDataTable = genericComponent()({
       page,
       itemsPerPage,
       sortBy,
-      groupBy
+      groupBy,
+      search
     });
     provideDefaults({
       VDataTableRows: {
@@ -19290,9 +19297,10 @@ const VDataTableVirtual = genericComponent()({
       items
     } = useDataTableItems(props, columns);
     const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
+    const search = toRef(props, 'search');
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'), {
+    } = useFilter(props, items, search, {
       filterKeys
     });
     const {
@@ -19328,7 +19336,8 @@ const VDataTableVirtual = genericComponent()({
       sortBy,
       page: ref(1),
       itemsPerPage: ref(-1),
-      groupBy
+      groupBy,
+      search
     });
     provideDefaults({
       VDataTableRows: {
@@ -19568,13 +19577,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);
@@ -19628,6 +19639,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",
@@ -20006,7 +20028,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.6";
+const version$1 = "3.1.8";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20018,7 +20040,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.6";
+const version = "3.1.8";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};