vuetify 3.0.4 → 3.0.5

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.4
+* Vuetify v3.0.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -513,7 +513,7 @@
 
     if (parent) {
       vm = {
-        _isVue: true,
+        __isVue: true,
         $parent: parent,
         $options: vm
       };
@@ -545,7 +545,7 @@
     if (vm.$root === vm) {
       return '<Root>';
     }
-    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm._isVue ? vm.$options || vm.constructor.options : vm || {};
+    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm.__isVue ? vm.$options || vm.constructor.options : vm || {};
     let name = options.name || options._componentTag;
     const file = options.__file;
     if (!name && file) {
@@ -555,7 +555,7 @@
     return (name ? `<${classify(name)}>` : `<Anonymous>`) + (file && includeFile !== false ? ` at ${file}` : '');
   }
   function generateComponentTrace(vm) {
-    if (vm._isVue && vm.$parent) {
+    if (vm.__isVue && vm.$parent) {
       const tree = [];
       let currentRecursiveSequence = 0;
       while (vm) {
@@ -3147,6 +3147,11 @@
       const isExtended = vue.ref(!!(props.extended || (_slots$extension = slots.extension) != null && _slots$extension.call(slots)));
       const contentHeight = vue.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 = vue.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);
@@ -4531,7 +4536,7 @@
 
   // Composables
   const makeLoaderProps = propsFactory({
-    loading: Boolean
+    loading: [Boolean, String]
   }, 'loader');
   function useLoader(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
@@ -5409,7 +5414,7 @@
           "class": "v-field__overlay"
         }, null), vue.createVNode(LoaderSlot, {
           "name": "v-field",
-          "active": props.loading,
+          "active": !!props.loading,
           "color": props.error ? 'error' : props.color
         }, {
           default: slots.loader
@@ -5702,7 +5707,7 @@
     const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
     const errorMessages = vue.computed(() => {
-      return props.errorMessages.length ? wrapInArray(props.errorMessages.slice(0, Math.max(0, +props.maxErrors))) : internalErrorMessages.value;
+      return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
     const isValid = vue.computed(() => {
       if (props.error || errorMessages.value.length) return false;
@@ -5766,7 +5771,7 @@
       const results = [];
       isValidating.value = true;
       for (const rule of props.rules) {
-        if (results.length >= (props.maxErrors || 1)) {
+        if (results.length >= (props.maxErrors ?? 1)) {
           break;
         }
         const handler = typeof rule === 'function' ? rule : () => rule;
@@ -6799,7 +6804,7 @@
           "class": ['v-chip', {
             'v-chip--disabled': props.disabled,
             'v-chip--label': props.label,
-            'v-chip--link': isClickable,
+            'v-chip--link': isClickable.value,
             'v-chip--filter': hasFilter,
             'v-chip--pill': props.pill
           }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group == null ? void 0 : group.selectedClass.value],
@@ -9042,25 +9047,163 @@
     });
   }
 
+  // Utilities
+
+  // Types
+
+  const DisplaySymbol = Symbol.for('vuetify:display');
+  const defaultDisplayOptions = {
+    mobileBreakpoint: 'lg',
+    thresholds: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+      xxl: 2560
+    }
+  };
+  const parseDisplayOptions = function () {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
+    return mergeDeep(defaultDisplayOptions, options);
+  };
+  function getClientWidth(isHydrate) {
+    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  }
+  function getClientHeight(isHydrate) {
+    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  }
+  function getPlatform() {
+    const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
+    function match(regexp) {
+      return Boolean(userAgent.match(regexp));
+    }
+    const android = match(/android/i);
+    const ios = match(/iphone|ipad|ipod/i);
+    const cordova = match(/cordova/i);
+    const electron = match(/electron/i);
+    const chrome = match(/chrome/i);
+    const edge = match(/edge/i);
+    const firefox = match(/firefox/i);
+    const opera = match(/opera/i);
+    const win = match(/win/i);
+    const mac = match(/mac/i);
+    const linux = match(/linux/i);
+    const ssr = match(/ssr/i);
+    return {
+      android,
+      ios,
+      cordova,
+      electron,
+      chrome,
+      edge,
+      firefox,
+      opera,
+      win,
+      mac,
+      linux,
+      touch: SUPPORTS_TOUCH,
+      ssr
+    };
+  }
+  function createDisplay(options, ssr) {
+    const {
+      thresholds,
+      mobileBreakpoint
+    } = parseDisplayOptions(options);
+    const height = vue.ref(getClientHeight(ssr));
+    const platform = getPlatform();
+    const state = vue.reactive({});
+    const width = vue.ref(getClientWidth(ssr));
+    function update() {
+      height.value = getClientHeight();
+      width.value = getClientWidth();
+    }
+
+    // eslint-disable-next-line max-statements
+    vue.watchEffect(() => {
+      const xs = width.value < thresholds.sm;
+      const sm = width.value < thresholds.md && !xs;
+      const md = width.value < thresholds.lg && !(sm || xs);
+      const lg = width.value < thresholds.xl && !(md || sm || xs);
+      const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
+      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;
+      state.xs = xs;
+      state.sm = sm;
+      state.md = md;
+      state.lg = lg;
+      state.xl = xl;
+      state.xxl = xxl;
+      state.smAndUp = !xs;
+      state.mdAndUp = !(xs || sm);
+      state.lgAndUp = !(xs || sm || md);
+      state.xlAndUp = !(xs || sm || md || lg);
+      state.smAndDown = !(md || lg || xl || xxl);
+      state.mdAndDown = !(lg || xl || xxl);
+      state.lgAndDown = !(xl || xxl);
+      state.xlAndDown = !xxl;
+      state.name = name;
+      state.height = height.value;
+      state.width = width.value;
+      state.mobile = mobile;
+      state.mobileBreakpoint = mobileBreakpoint;
+      state.platform = platform;
+      state.thresholds = thresholds;
+    });
+    if (IN_BROWSER) {
+      window.addEventListener('resize', update, {
+        passive: true
+      });
+    }
+    return {
+      ...vue.toRefs(state),
+      update,
+      ssr: !!ssr
+    };
+  }
+  function useDisplay() {
+    const display = vue.inject(DisplaySymbol);
+    if (!display) throw new Error('Could not find Vuetify display injection');
+    return display;
+  }
+
   // Utilities
   function useHydration() {
-    var _vm$root, _vm$root$appContext, _vm$root$appContext$a;
     if (!IN_BROWSER) return vue.ref(false);
-    const vm = getCurrentInstance('useHydration');
-    const rootEl = vm == null ? void 0 : (_vm$root = vm.root) == null ? void 0 : (_vm$root$appContext = _vm$root.appContext) == null ? void 0 : (_vm$root$appContext$a = _vm$root$appContext.app) == null ? void 0 : _vm$root$appContext$a._container;
-    const isMounted = vue.ref(!!(rootEl != null && rootEl.__vue_app__));
-    if (!isMounted.value) {
-      vue.onMounted(() => isMounted.value = true);
+    const {
+      ssr
+    } = useDisplay();
+    if (ssr) {
+      const isMounted = vue.ref(false);
+      vue.onMounted(() => {
+        isMounted.value = true;
+      });
+      return isMounted;
+    } else {
+      return vue.ref(true);
     }
-    return isMounted;
+  }
+
+  function useScopeId() {
+    const vm = getCurrentInstance('useScopeId');
+    const scopeId = vm.vnode.scopeId;
+    return {
+      scopeId: scopeId ? {
+        [scopeId]: ''
+      } : undefined
+    };
   }
 
   // Types
 
   const StackSymbol = Symbol.for('vuetify:stack');
   const globalStack = vue.reactive([]);
-  function useStack(isActive, zIndex) {
+  function useStack(isActive, zIndex, disableGlobalStack) {
     const vm = getCurrentInstance('useStack');
+    const createStackEntry = !disableGlobalStack;
     const parent = vue.inject(StackSymbol, undefined);
     const stack = vue.reactive({
       activeChildren: new Set()
@@ -9071,20 +9214,26 @@
       var _globalStack$at;
       const lastZIndex = (_globalStack$at = globalStack.at(-1)) == null ? void 0 : _globalStack$at[1];
       _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
-      globalStack.push([vm.uid, _zIndex.value]);
+      if (createStackEntry) {
+        globalStack.push([vm.uid, _zIndex.value]);
+      }
       parent == null ? void 0 : parent.activeChildren.add(vm.uid);
       vue.onScopeDispose(() => {
-        const idx = globalStack.findIndex(v => v[0] === vm.uid);
-        globalStack.splice(idx, 1);
+        if (createStackEntry) {
+          const idx = globalStack.findIndex(v => v[0] === vm.uid);
+          globalStack.splice(idx, 1);
+        }
         parent == null ? void 0 : parent.activeChildren.delete(vm.uid);
       });
     });
     const globalTop = vue.ref(true);
-    vue.watchEffect(() => {
-      var _globalStack$at2;
-      const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
-      setTimeout(() => globalTop.value = _isTop);
-    });
+    if (createStackEntry) {
+      vue.watchEffect(() => {
+        var _globalStack$at2;
+        const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
+        setTimeout(() => globalTop.value = _isTop);
+      });
+    }
     const localTop = vue.computed(() => !stack.activeChildren.size);
     return {
       globalTop: vue.readonly(globalTop),
@@ -9263,7 +9412,10 @@
       ClickOutside
     },
     inheritAttrs: false,
-    props: makeVOverlayProps(),
+    props: {
+      _disableGlobalStack: Boolean,
+      ...makeVOverlayProps()
+    },
     emits: {
       'click:outside': e => true,
       'update:modelValue': value => true,
@@ -9303,7 +9455,7 @@
         globalTop,
         localTop,
         stackStyles
-      } = useStack(isActive, vue.toRef(props, 'zIndex'));
+      } = useStack(isActive, vue.toRef(props, 'zIndex'), props._disableGlobalStack);
       const {
         activatorEl,
         activatorRef,
@@ -9318,6 +9470,9 @@
         dimensionStyles
       } = useDimension(props);
       const isMounted = useHydration();
+      const {
+        scopeId
+      } = useScopeId();
       vue.watch(() => props.disabled, v => {
         if (v) isActive.value = false;
       });
@@ -9418,7 +9573,7 @@
               top: convertToUnit(top.value)
             }],
             "ref": root
-          }, attrs), [vue.createVNode(Scrim, vue.mergeProps({
+          }, scopeId, attrs), [vue.createVNode(Scrim, vue.mergeProps({
             "color": scrimColor,
             "modelValue": isActive.value && !!props.scrim
           }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
@@ -9459,16 +9614,6 @@
     return pick(props, Object.keys(VOverlay.props));
   }
 
-  function useScopeId() {
-    const vm = getCurrentInstance('useScopeId');
-    const scopeId = vm.vnode.scopeId;
-    return {
-      scopeId: scopeId ? {
-        [scopeId]: ''
-      } : undefined
-    };
-  }
-
   // Types
 
   const VMenu = genericComponent()({
@@ -9585,6 +9730,10 @@
       default: '$vuetify.noDataText'
     },
     openOnClear: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
     ...makeItemsProps({
       itemChildren: false
     })
@@ -9626,7 +9775,7 @@
       });
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -9967,7 +10116,7 @@
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -10316,128 +10465,6 @@
 
   const VBannerText = createSimpleFunctional('v-banner-text');
 
-  // Utilities
-
-  // Types
-
-  const DisplaySymbol = Symbol.for('vuetify:display');
-  const defaultDisplayOptions = {
-    mobileBreakpoint: 'lg',
-    thresholds: {
-      xs: 0,
-      sm: 600,
-      md: 960,
-      lg: 1280,
-      xl: 1920,
-      xxl: 2560
-    }
-  };
-  const parseDisplayOptions = function () {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
-    return mergeDeep(defaultDisplayOptions, options);
-  };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
-  }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
-  }
-  function getPlatform() {
-    const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
-    function match(regexp) {
-      return Boolean(userAgent.match(regexp));
-    }
-    const android = match(/android/i);
-    const ios = match(/iphone|ipad|ipod/i);
-    const cordova = match(/cordova/i);
-    const electron = match(/electron/i);
-    const chrome = match(/chrome/i);
-    const edge = match(/edge/i);
-    const firefox = match(/firefox/i);
-    const opera = match(/opera/i);
-    const win = match(/win/i);
-    const mac = match(/mac/i);
-    const linux = match(/linux/i);
-    const ssr = match(/ssr/i);
-    return {
-      android,
-      ios,
-      cordova,
-      electron,
-      chrome,
-      edge,
-      firefox,
-      opera,
-      win,
-      mac,
-      linux,
-      touch: SUPPORTS_TOUCH,
-      ssr
-    };
-  }
-  function createDisplay(options, isHydrate) {
-    const {
-      thresholds,
-      mobileBreakpoint
-    } = parseDisplayOptions(options);
-    const height = vue.ref(getClientHeight(isHydrate));
-    const platform = getPlatform();
-    const state = vue.reactive({});
-    const width = vue.ref(getClientWidth(isHydrate));
-    function update() {
-      height.value = getClientHeight();
-      width.value = getClientWidth();
-    }
-
-    // eslint-disable-next-line max-statements
-    vue.watchEffect(() => {
-      const xs = width.value < thresholds.sm;
-      const sm = width.value < thresholds.md && !xs;
-      const md = width.value < thresholds.lg && !(sm || xs);
-      const lg = width.value < thresholds.xl && !(md || sm || xs);
-      const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
-      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;
-      state.xs = xs;
-      state.sm = sm;
-      state.md = md;
-      state.lg = lg;
-      state.xl = xl;
-      state.xxl = xxl;
-      state.smAndUp = !xs;
-      state.mdAndUp = !(xs || sm);
-      state.lgAndUp = !(xs || sm || md);
-      state.xlAndUp = !(xs || sm || md || lg);
-      state.smAndDown = !(md || lg || xl || xxl);
-      state.mdAndDown = !(lg || xl || xxl);
-      state.lgAndDown = !(xl || xxl);
-      state.xlAndDown = !xxl;
-      state.name = name;
-      state.height = height.value;
-      state.width = width.value;
-      state.mobile = mobile;
-      state.mobileBreakpoint = mobileBreakpoint;
-      state.platform = platform;
-      state.thresholds = thresholds;
-    });
-    if (IN_BROWSER) {
-      window.addEventListener('resize', update, {
-        passive: true
-      });
-    }
-    return {
-      ...vue.toRefs(state),
-      update
-    };
-  }
-  function useDisplay() {
-    const display = vue.inject(DisplaySymbol);
-    if (!display) throw new Error('Could not find Vuetify display injection');
-    return display;
-  }
-
   // Types
 
   const VBanner = defineComponent({
@@ -10554,6 +10581,10 @@
         type: [Number, String],
         default: 56
       },
+      active: {
+        type: Boolean,
+        default: true
+      },
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -10597,7 +10628,7 @@
         roundedClasses
       } = useRounded(props);
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
-      const isActive = useProxiedModel(props, 'modelValue');
+      const isActive = vue.toRef(props, 'active');
       const {
         layoutItemStyles
       } = useLayoutItem({
@@ -13393,7 +13424,7 @@
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -17815,7 +17846,8 @@
           "eager": true,
           "activatorProps": vue.mergeProps({
             'aria-describedby': id.value
-          }, props.activatorProps)
+          }, props.activatorProps),
+          "_disableGlobalStack": true
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -18198,7 +18230,7 @@
       locale
     };
   }
-  const version$1 = "3.0.4";
+  const version$1 = "3.0.5";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18219,7 +18251,7 @@
       ...options
     });
   };
-  const version = "3.0.4";
+  const version = "3.0.5";
   createVuetify.version = version;
 
   exports.components = components;