vuetify 3.0.6 → 3.1.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.6
+* Vuetify v3.1.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -260,15 +260,6 @@
     }
     return out;
   }
-  function flattenFragments(nodes) {
-    return nodes.map(node => {
-      if (node.type === vue.Fragment) {
-        return flattenFragments(node.children);
-      } else {
-        return node;
-      }
-    }).flat();
-  }
   function toKebabCase() {
     let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase();
@@ -3699,7 +3690,8 @@
     checkboxIndeterminate: 'mdi-minus-box',
     delimiter: 'mdi-circle',
     // for carousel
-    sort: 'mdi-arrow-up',
+    sortAsc: 'mdi-arrow-up',
+    sortDesc: 'mdi-arrow-down',
     expand: 'mdi-chevron-down',
     menu: 'mdi-menu',
     subgroup: 'mdi-menu-down',
@@ -3732,8 +3724,7 @@
   const IconSymbol = Symbol.for('vuetify:icons');
   const makeIconProps = propsFactory({
     icon: {
-      type: IconValue,
-      required: true
+      type: IconValue
     },
     // Could not remove this and use makeTagProps, types complained because it is not required
     tag: {
@@ -3744,10 +3735,14 @@
   const VComponentIcon = defineComponent({
     name: 'VComponentIcon',
     props: makeIconProps(),
-    setup(props) {
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
       return () => {
+        var _slots$default;
         return vue.createVNode(props.tag, null, {
-          default: () => [vue.createVNode(props.icon, null, null)]
+          default: () => [props.icon ? vue.createVNode(props.icon, null, null) : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
         });
       };
     }
@@ -3756,10 +3751,10 @@
     name: 'VSvgIcon',
     inheritAttrs: false,
     props: makeIconProps(),
-    setup(props, _ref) {
+    setup(props, _ref2) {
       let {
         attrs
-      } = _ref;
+      } = _ref2;
       return () => {
         return vue.createVNode(props.tag, vue.mergeProps(attrs, {
           "style": null
@@ -3824,7 +3819,9 @@
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
     const iconData = vue.computed(() => {
       const iconAlias = vue.isRef(props) ? props.value : props.icon;
-      if (!iconAlias) throw new Error('Icon value is undefined or null');
+      if (!iconAlias) return {
+        component: VComponentIcon
+      };
       let icon = iconAlias;
       if (typeof icon === 'string') {
         icon = icon.trim();
@@ -3908,10 +3905,10 @@
       let slotIcon;
       if (slots.default) {
         slotIcon = vue.computed(() => {
-          var _slots$default, _flattenFragments$fil;
+          var _slots$default, _slot$filter$;
           const slot = (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
           if (!slot) return;
-          return (_flattenFragments$fil = flattenFragments(slot).filter(node => node.children && typeof node.children === 'string')[0]) == null ? void 0 : _flattenFragments$fil.children;
+          return (_slot$filter$ = slot.filter(node => node.type === vue.Text && node.children && typeof node.children === 'string')[0]) == null ? void 0 : _slot$filter$.children;
         });
       }
       const {
@@ -3927,22 +3924,27 @@
         textColorClasses,
         textColorStyles
       } = useTextColor(vue.toRef(props, 'color'));
-      useRender(() => vue.createVNode(iconData.value.component, {
-        "tag": props.tag,
-        "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
-          'v-icon--clickable': !!attrs.onClick,
-          'v-icon--start': props.start,
-          'v-icon--end': props.end
-        }],
-        "style": [!sizeClasses.value ? {
-          fontSize: convertToUnit(props.size),
-          height: convertToUnit(props.size),
-          width: convertToUnit(props.size)
-        } : undefined, textColorStyles.value],
-        "role": attrs.onClick ? 'button' : undefined,
-        "aria-hidden": !attrs.onClick
-      }, null));
+      useRender(() => {
+        var _slots$default2;
+        return vue.createVNode(iconData.value.component, {
+          "tag": props.tag,
+          "icon": iconData.value.icon,
+          "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+            'v-icon--clickable': !!attrs.onClick,
+            'v-icon--start': props.start,
+            'v-icon--end': props.end
+          }],
+          "style": [!sizeClasses.value ? {
+            fontSize: convertToUnit(props.size),
+            height: convertToUnit(props.size),
+            width: convertToUnit(props.size)
+          } : undefined, textColorStyles.value],
+          "role": attrs.onClick ? 'button' : undefined,
+          "aria-hidden": !attrs.onClick
+        }, {
+          default: () => [(_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]
+        });
+      });
       return {};
     }
   });
@@ -6270,8 +6272,18 @@
       const uid = getUid();
       const id = vue.computed(() => props.id || `v-selection-control-group-${uid}`);
       const name = vue.computed(() => props.name || id.value);
+      const updateHandlers = new Set();
       vue.provide(VSelectionControlGroupSymbol, {
-        modelValue
+        modelValue,
+        forceUpdate: () => {
+          updateHandlers.forEach(fn => fn());
+        },
+        onForceUpdate: cb => {
+          updateHandlers.add(cb);
+          vue.onScopeDispose(() => {
+            updateHandlers.delete(cb);
+          });
+        }
       });
       provideDefaults({
         [props.defaultsTarget]: {
@@ -6297,7 +6309,6 @@
           "class": ['v-selection-control-group', {
             'v-selection-control-group--inline': props.inline
           }],
-          "aria-labelled-by": props.type === 'radio' ? id.value : undefined,
           "role": props.type === 'radio' ? 'radiogroup' : undefined
         }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
       });
@@ -6376,6 +6387,7 @@
         slots
       } = _ref;
       const {
+        group,
         densityClasses,
         icon,
         model,
@@ -6388,6 +6400,11 @@
       const isFocused = vue.ref(false);
       const isFocusVisible = vue.ref(false);
       const input = vue.ref();
+      group == null ? void 0 : group.onForceUpdate(() => {
+        if (input.value) {
+          input.value.checked = model.value;
+        }
+      });
       function onFocus(e) {
         isFocused.value = true;
         if (!SUPPORTS_FOCUS_VISIBLE || SUPPORTS_FOCUS_VISIBLE && e.target.matches(':focus-visible')) {
@@ -6399,6 +6416,9 @@
         isFocusVisible.value = false;
       }
       function onInput(e) {
+        if (props.readonly && group) {
+          vue.nextTick(() => group.forceUpdate());
+        }
         model.value = e.target.checked;
       }
       useRender(() => {
@@ -6435,7 +6455,7 @@
           "onBlur": onBlur,
           "onFocus": onFocus,
           "onInput": onInput,
-          "aria-readonly": props.readonly,
+          "aria-disabled": props.readonly,
           "type": props.type,
           "value": trueValue.value,
           "name": props.name,
@@ -6625,7 +6645,8 @@
           default: () => [props.image ? vue.createVNode(VImg, {
             "key": "image",
             "src": props.image,
-            "alt": ""
+            "alt": "",
+            "cover": true
           }, null) : props.icon ? vue.createVNode(VIcon, {
             "key": "icon",
             "icon": props.icon
@@ -9906,14 +9927,17 @@
                 default: () => [!items.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
                 }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), items.value.map((item, index) => {
-                  var _slots$item;
-                  return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
-                    item,
-                    index,
-                    props: vue.mergeProps(item.props, {
-                      onClick: () => select(item)
-                    })
-                  })) ?? vue.createVNode(VListItem, vue.mergeProps({
+                  if (slots.item) {
+                    var _slots$item;
+                    return (_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
+                      item,
+                      index,
+                      props: vue.mergeProps(item.props, {
+                        onClick: () => select(item)
+                      })
+                    });
+                  }
+                  return vue.createVNode(VListItem, vue.mergeProps({
                     "key": index
                   }, item.props, {
                     "onClick": () => select(item)
@@ -10004,7 +10028,7 @@
     const customFiltersLength = Object.keys((options == null ? void 0 : options.customKeyFilter) ?? {}).length;
     if (!(items != null && items.length)) return array;
     loop: for (let i = 0; i < items.length; i++) {
-      const item = items[i];
+      const item = items[i].raw;
       const customMatches = {};
       const defaultMatches = {};
       let match = -1;
@@ -10046,34 +10070,43 @@
   }
   function useFilter(props, items, query) {
     const strQuery = vue.computed(() => typeof (query == null ? void 0 : query.value) !== 'string' && typeof (query == null ? void 0 : query.value) !== 'number' ? '' : String(query.value));
-    const filteredItems = vue.computed(() => {
+    const filteredItems = vue.ref([]);
+    const filteredMatches = vue.ref(new Map());
+    vue.watchEffect(() => {
+      filteredItems.value = [];
+      filteredMatches.value = new Map();
       const transformedItems = vue.unref(items);
-      const matches = filterItems(transformedItems, strQuery.value, {
+      const results = filterItems(transformedItems, strQuery.value, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
         filterKeys: props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter
       });
-      return matches.map(_ref => {
+      results.forEach(_ref => {
         let {
           index,
           matches
         } = _ref;
-        return {
-          item: transformedItems[index],
-          matches
-        };
+        const item = transformedItems[index];
+        filteredItems.value.push(item);
+        filteredMatches.value.set(item.value, matches);
       });
     });
+    function getMatches(item) {
+      return filteredMatches.value.get(item.value);
+    }
     return {
-      filteredItems
+      filteredItems,
+      filteredMatches,
+      getMatches
     };
   }
 
   // Types
 
   function highlightResult$1(text, matches, length) {
+    if (matches == null) return text;
     if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
     return typeof matches === 'number' && ~matches ? vue.createVNode(vue.Fragment, null, [vue.createVNode("span", {
       "class": "v-autocomplete__unmask"
@@ -10127,7 +10160,8 @@
         return props.multiple ? transformed : transformed[0] ?? null;
       });
       const {
-        filteredItems
+        filteredItems,
+        getMatches
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
@@ -10275,12 +10309,8 @@
               }, {
                 default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
-                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((_ref2, index) => {
+                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
                   var _slots$item;
-                  let {
-                    item,
-                    matches
-                  } = _ref2;
                   return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                     item,
                     index,
@@ -10292,18 +10322,18 @@
                   }, item.props, {
                     "onClick": () => select(item)
                   }), {
-                    prepend: _ref3 => {
+                    prepend: _ref2 => {
                       let {
                         isSelected
-                      } = _ref3;
+                      } = _ref2;
                       return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "modelValue": isSelected,
                         "ripple": false
                       }, null) : undefined;
                     },
                     title: () => {
-                      var _search$value;
-                      return isPristine.value ? item.title : highlightResult$1(item.title, matches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
+                      var _getMatches, _search$value;
+                      return isPristine.value ? item.title : highlightResult$1(item.title, (_getMatches = getMatches(item)) == null ? void 0 : _getMatches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
                     }
                   });
                 }), (_slots$appendItem = slots['append-item']) == null ? void 0 : _slots$appendItem.call(slots)]
@@ -10687,7 +10717,24 @@
     }
   });
 
-  const VBreadcrumbsDivider = createSimpleFunctional('v-breadcrumbs-divider', 'li');
+  const VBreadcrumbsDivider = defineComponent({
+    name: 'VBreadcrumbsDivider',
+    props: {
+      divider: [Number, String]
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      useRender(() => {
+        var _slots$default;
+        return vue.createVNode("li", {
+          "class": "v-breadcrumbs-divider"
+        }, [(slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? props.divider]);
+      });
+      return {};
+    }
+  });
 
   const VBreadcrumbsItem = defineComponent({
     name: 'VBreadcrumbsItem',
@@ -10780,6 +10827,9 @@
         roundedClasses
       } = useRounded(props);
       provideDefaults({
+        VBreadcrumbsDivider: {
+          divider: vue.toRef(props, 'divider')
+        },
         VBreadcrumbsItem: {
           activeClass: vue.toRef(props, 'activeClass'),
           activeColor: vue.toRef(props, 'activeColor'),
@@ -10806,28 +10856,28 @@
             default: () => [vue.createVNode("div", {
               "class": "v-breadcrumbs__prepend"
             }, [slots.prepend ? slots.prepend() : props.icon && vue.createVNode(VIcon, null, null)])]
-          }), props.items.map((item, index, array) => {
-            var _slots$divider;
-            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-              "key": index,
-              "disabled": index >= array.length - 1
-            }, typeof item === 'string' ? {
-              title: item
-            } : item), {
-              default: slots.title ? () => {
-                var _slots$title;
-                return (_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots, {
-                  item,
-                  index
-                });
-              } : undefined
-            }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
-              default: () => [((_slots$divider = slots.divider) == null ? void 0 : _slots$divider.call(slots, {
+          }), props.items.map((item, index, array) => vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
+            "key": index,
+            "disabled": index >= array.length - 1
+          }, typeof item === 'string' ? {
+            title: item
+          } : item), {
+            default: slots.title ? () => {
+              var _slots$title;
+              return (_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots, {
                 item,
                 index
-              })) ?? props.divider]
-            })]);
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+              });
+            } : undefined
+          }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
+            default: slots.divider ? () => {
+              var _slots$divider;
+              return (_slots$divider = slots.divider) == null ? void 0 : _slots$divider.call(slots, {
+                item,
+                index
+              });
+            } : undefined
+          })])), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
         });
       });
       return {};
@@ -13208,7 +13258,6 @@
 
   const VColorPicker = defineComponent({
     name: 'VColorPicker',
-    inheritAttrs: false,
     props: {
       canvasHeight: {
         type: [String, Number],
@@ -13332,6 +13381,7 @@
   // Types
 
   function highlightResult(text, matches, length) {
+    if (matches == null) return text;
     if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
     return typeof matches === 'number' && ~matches ? vue.createVNode(vue.Fragment, null, [vue.createVNode("span", {
       "class": "v-combobox__unmask"
@@ -13433,7 +13483,8 @@
         }
       });
       const {
-        filteredItems
+        filteredItems,
+        getMatches
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
@@ -13610,12 +13661,8 @@
               }, {
                 default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
                   "title": t(props.noDataText)
-                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((_ref2, index) => {
+                }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
                   var _slots$item;
-                  let {
-                    item,
-                    matches
-                  } = _ref2;
                   return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                     item,
                     index,
@@ -13627,18 +13674,18 @@
                   }, item.props, {
                     "onClick": () => select(item)
                   }), {
-                    prepend: _ref3 => {
+                    prepend: _ref2 => {
                       let {
                         isSelected
-                      } = _ref3;
+                      } = _ref2;
                       return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "modelValue": isSelected,
                         "ripple": false
                       }, null) : undefined;
                     },
                     title: () => {
-                      var _search$value;
-                      return isPristine.value ? item.title : highlightResult(item.title, matches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
+                      var _getMatches, _search$value;
+                      return isPristine.value ? item.title : highlightResult(item.title, (_getMatches = getMatches(item)) == null ? void 0 : _getMatches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
                     }
                   });
                 }), (_slots$appendItem = slots['append-item']) == null ? void 0 : _slots$appendItem.call(slots)]
@@ -15244,7 +15291,10 @@
         default: null
       },
       permanent: Boolean,
-      rail: Boolean,
+      rail: {
+        type: Boolean,
+        default: null
+      },
       railWidth: {
         type: [Number, String],
         default: 56
@@ -15276,11 +15326,13 @@
       ...makeThemeProps()
     },
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': val => true,
+      'update:rail': val => true
     },
     setup(props, _ref) {
       let {
         attrs,
+        emit,
         slots
       } = _ref;
       const {
@@ -15320,6 +15372,9 @@
       });
       const isTemporary = vue.computed(() => !props.permanent && (mobile.value || props.temporary));
       const isSticky = vue.computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
+      if (props.expandOnHover && props.rail != null) {
+        vue.watch(isHovering, val => emit('update:rail', !val));
+      }
       if (!props.disableResizeWatcher) {
         vue.watch(isTemporary, val => !props.permanent && vue.nextTick(() => isActive.value = !val));
       }
@@ -15470,8 +15525,6 @@
     };
   }
 
-  // Types
-
   const VPagination = defineComponent({
     name: 'VPagination',
     props: {
@@ -15576,6 +15629,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        width
+      } = useDisplay();
       const maxButtons = vue.ref(-1);
       provideDefaults(undefined, {
         scoped: true
@@ -15592,17 +15648,20 @@
         if (!firstItem) return;
         const totalWidth = contentRect.width;
         const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
-        const minButtons = props.showFirstLastPage ? 5 : 3;
-        maxButtons.value = Math.max(0, Math.floor(
-        // Round to two decimal places to avoid floating point errors
-        +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
+        maxButtons.value = getMax(totalWidth, itemWidth);
       });
       const length = vue.computed(() => parseInt(props.length, 10));
       const start = vue.computed(() => parseInt(props.start, 10));
       const totalVisible = vue.computed(() => {
         if (props.totalVisible) return parseInt(props.totalVisible, 10);else if (maxButtons.value >= 0) return maxButtons.value;
-        return length.value;
+        return getMax(width.value, 58);
       });
+      function getMax(totalWidth, itemWidth) {
+        const minButtons = props.showFirstLastPage ? 5 : 3;
+        return Math.max(0, Math.floor(
+        // Round to two decimal places to avoid floating point errors
+        +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
+      }
       const range = vue.computed(() => {
         if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
         if (totalVisible.value <= 1) return [page.value];
@@ -15949,7 +16008,7 @@
               isReadonly
             } = _ref2;
             return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
-              "for": id.value
+              "id": id.value
             }, {
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
@@ -15959,7 +16018,8 @@
               "falseIcon": props.falseIcon,
               "type": props.type,
               "disabled": isDisabled.value,
-              "readonly": isReadonly.value
+              "readonly": isReadonly.value,
+              "aria-labelledby": label ? id.value : undefined
             }, controlAttrs, {
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event
@@ -17295,7 +17355,7 @@
         densityClasses
       } = useDensity(props);
       useRender(() => {
-        var _slots$top, _slots$bottom;
+        var _slots$top, _slots$wrapper, _slots$bottom;
         return vue.createVNode(props.tag, {
           "class": ['v-table', {
             'v-table--fixed-height': !!props.height,
@@ -17306,12 +17366,12 @@
             'v-table--hover': props.hover
           }, themeClasses.value, densityClasses.value]
         }, {
-          default: () => [(_slots$top = slots.top) == null ? void 0 : _slots$top.call(slots), slots.default && vue.createVNode("div", {
+          default: () => [(_slots$top = slots.top) == null ? void 0 : _slots$top.call(slots), slots.default ? vue.createVNode("div", {
             "class": "v-table__wrapper",
             "style": {
               height: convertToUnit(props.height)
             }
-          }, [vue.createVNode("table", null, [slots.default()])]), (_slots$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
+          }, [vue.createVNode("table", null, [slots.default()])]) : (_slots$wrapper = slots.wrapper) == null ? void 0 : _slots$wrapper.call(slots), (_slots$bottom = slots.bottom) == null ? void 0 : _slots$bottom.call(slots)]
         });
       });
       return {};
@@ -18225,19 +18285,21 @@
         }
       }
       getUid.reset();
-      app.mixin({
-        computed: {
-          $vuetify() {
-            return vue.reactive({
-              defaults: inject.call(this, DefaultsSymbol),
-              display: inject.call(this, DisplaySymbol),
-              theme: inject.call(this, ThemeSymbol),
-              icons: inject.call(this, IconSymbol),
-              locale: inject.call(this, LocaleSymbol)
-            });
+      if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
+        app.mixin({
+          computed: {
+            $vuetify() {
+              return vue.reactive({
+                defaults: inject.call(this, DefaultsSymbol),
+                display: inject.call(this, DisplaySymbol),
+                theme: inject.call(this, ThemeSymbol),
+                icons: inject.call(this, IconSymbol),
+                locale: inject.call(this, LocaleSymbol)
+              });
+            }
           }
-        }
-      });
+        });
+      }
     };
     return {
       install,
@@ -18248,7 +18310,7 @@
       locale
     };
   }
-  const version$1 = "3.0.6";
+  const version$1 = "3.1.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18269,7 +18331,7 @@
       ...options
     });
   };
-  const version = "3.0.6";
+  const version = "3.1.0";
   createVuetify.version = version;
 
   exports.components = components;