vuetify 3.1.0 → 3.1.1

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.0
+* Vuetify v3.1.1
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -990,7 +990,7 @@ function propsFactory(props, source) {
 // Utils
 function propIsDefined(vnode, prop) {
   var _vnode$props, _vnode$props2;
-  return ((_vnode$props = vnode.props) == null ? void 0 : _vnode$props.hasOwnProperty(prop)) || ((_vnode$props2 = vnode.props) == null ? void 0 : _vnode$props2.hasOwnProperty(toKebabCase(prop)));
+  return typeof ((_vnode$props = vnode.props) == null ? void 0 : _vnode$props[prop]) !== 'undefined' || typeof ((_vnode$props2 = vnode.props) == null ? void 0 : _vnode$props2[toKebabCase(prop)]) !== 'undefined';
 }
 const defineComponent = function defineComponent(options) {
   options._setup = options._setup ?? options.setup;
@@ -2366,9 +2366,7 @@ const VDialogTransition = defineComponent({
         const animation = animate(el, [{
           transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
           opacity: 0
-        }, {
-          transform: ''
-        }], {
+        }, {}], {
           duration: 225 * speed,
           easing: deceleratedEasing
         });
@@ -2378,9 +2376,7 @@ const VDialogTransition = defineComponent({
           }, {
             opacity: 0,
             offset: 0.33
-          }, {
-            opacity: 1
-          }], {
+          }, {}], {
             duration: 225 * 2 * speed,
             easing: standardEasing
           });
@@ -2403,9 +2399,7 @@ const VDialogTransition = defineComponent({
           sy,
           speed
         } = getDimensions(props.target, el);
-        const animation = animate(el, [{
-          transform: ''
-        }, {
+        const animation = animate(el, [{}, {
           transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
           opacity: 0
         }], {
@@ -4974,13 +4968,13 @@ const VAppBarTitle = defineComponent({
   props: {
     ...VToolbarTitle.props
   },
-  setup(_, _ref) {
+  setup(props, _ref) {
     let {
       slots
     } = _ref;
-    useRender(() => createVNode(VToolbarTitle, {
+    useRender(() => createVNode(VToolbarTitle, mergeProps(props, {
       "class": "v-app-bar-title"
-    }, slots));
+    }), slots));
     return {};
   }
 });
@@ -5326,6 +5320,7 @@ const VField = genericComponent()({
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
+    const messagesId = computed(() => `${id.value}-messages`);
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
@@ -5450,7 +5445,8 @@ const VField = genericComponent()({
         ...slotProps.value,
         props: {
           id: id.value,
-          class: 'v-field__input'
+          class: 'v-field__input',
+          'aria-describedby': messagesId.value
         },
         focus,
         blur
@@ -5533,7 +5529,9 @@ const VMessages = defineComponent({
       "transition": props.transition,
       "tag": "div",
       "class": ['v-messages', textColorClasses.value],
-      "style": textColorStyles.value
+      "style": textColorStyles.value,
+      "role": "alert",
+      "aria-live": "polite"
     }, {
       default: () => [props.active && messages.value.map((message, i) => createVNode("div", {
         "class": "v-messages__message",
@@ -5851,6 +5849,7 @@ const VInput = genericComponent()({
     } = useInputIcon(props);
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
+    const messagesId = computed(() => `${id.value}-messages`);
     const {
       errorMessages,
       isDirty,
@@ -5866,6 +5865,7 @@ const VInput = genericComponent()({
     } = useValidation(props, 'v-input', id);
     const slotProps = computed(() => ({
       id,
+      messagesId,
       isDirty,
       isDisabled,
       isReadonly,
@@ -5901,6 +5901,7 @@ const VInput = genericComponent()({
       }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && createVNode("div", {
         "class": "v-input__details"
       }, [createVNode(VMessages, {
+        "id": messagesId.value,
         "active": hasMessages,
         "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
       }, {
@@ -6572,11 +6573,13 @@ const VCheckbox = defineComponent({
         default: _ref2 => {
           let {
             id,
+            messagesId,
             isDisabled,
             isReadonly
           } = _ref2;
           return createVNode(VCheckboxBtn, mergeProps(checkboxProps, {
             "id": id.value,
+            "aria-describedby": messagesId.value,
             "disabled": isDisabled.value,
             "readonly": isReadonly.value
           }, controlAttrs, {
@@ -9805,12 +9808,19 @@ const VSelect = genericComponent()({
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
+    const form = useForm();
     const selections = computed(() => {
       return model.value.map(v => {
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const displayItems = computed(() => {
+      if (props.hideSelected) {
+        return items.value.filter(item => !selections.value.some(s => s === item));
+      }
+      return items.value;
+    });
     const listRef = ref();
     function onClear(e) {
       model.value = [];
@@ -9819,11 +9829,11 @@ const VSelect = genericComponent()({
       }
     }
     function onClickControl() {
-      if (props.hideNoData && !items.value.length || props.readonly) return;
+      if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
       menu.value = !menu.value;
     }
     function onKeydown(e) {
-      if (props.readonly) return;
+      if (props.readonly || form != null && form.isReadonly.value) return;
       if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
         e.preventDefault();
         menu.value = true;
@@ -9850,7 +9860,7 @@ const VSelect = genericComponent()({
     }
     function select(item) {
       if (props.multiple) {
-        const index = selected.value.findIndex(selection => selection === item.value);
+        const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
         if (index === -1) {
           model.value = [...model.value, item];
         } else {
@@ -9877,6 +9887,7 @@ const VSelect = genericComponent()({
     }
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
+      const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
       const [textFieldProps] = filterVTextFieldProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -9913,16 +9924,16 @@ const VSelect = genericComponent()({
             "closeOnContentClick": false,
             "transition": props.transition
           }, props.menuProps), {
-            default: () => [createVNode(VList, {
+            default: () => [hasList && createVNode(VList, {
               "ref": listRef,
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
               "onFocusout": onFocusout
             }, {
-              default: () => [!items.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
+              default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), items.value.map((item, index) => {
+              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                 if (slots.item) {
                   var _slots$item;
                   return (_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
@@ -10155,6 +10166,7 @@ const VAutocomplete = genericComponent()({
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
+    const form = useForm();
     const {
       filteredItems,
       getMatches
@@ -10164,6 +10176,12 @@ const VAutocomplete = genericComponent()({
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
       });
     });
+    const displayItems = computed(() => {
+      if (props.hideSelected) {
+        return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+      }
+      return filteredItems.value;
+    });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
     const listRef = ref();
     function onClear(e) {
@@ -10174,11 +10192,11 @@ const VAutocomplete = genericComponent()({
       search.value = '';
     }
     function onClickControl() {
-      if (props.hideNoData && !items.value.length || props.readonly) return;
+      if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
       menu.value = true;
     }
     function onKeydown(e) {
-      if (props.readonly) return;
+      if (props.readonly || form != null && form.isReadonly.value) return;
       if (['Enter', 'ArrowDown'].includes(e.key)) {
         menu.value = true;
       }
@@ -10216,7 +10234,7 @@ const VAutocomplete = genericComponent()({
     const isSelecting = ref(false);
     function select(item) {
       if (props.multiple) {
-        const index = selected.value.findIndex(selection => selection === item.value);
+        const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
         if (index === -1) {
           model.value = [...model.value, item];
           search.value = '';
@@ -10255,6 +10273,7 @@ const VAutocomplete = genericComponent()({
     });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
+      const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
       const [textFieldProps] = filterVTextFieldProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -10295,7 +10314,7 @@ const VAutocomplete = genericComponent()({
             "transition": props.transition,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
-            default: () => [createVNode(VList, {
+            default: () => [hasList && createVNode(VList, {
               "ref": listRef,
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -10303,9 +10322,9 @@ const VAutocomplete = genericComponent()({
               "onFocusin": onFocusin,
               "onFocusout": onFocusout
             }, {
-              default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
+              default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
+              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                 var _slots$item;
                 return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                   item,
@@ -12715,13 +12734,15 @@ const VSlider = defineComponent({
         prepend: hasPrepend ? slotProps => {
           var _slots$label, _slots$prepend;
           return createVNode(Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? createVNode(VLabel, {
+            "id": slotProps.id,
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps)]);
         } : undefined,
         default: _ref2 => {
           let {
-            id
+            id,
+            messagesId
           } = _ref2;
           return createVNode("div", {
             "class": "v-slider__container",
@@ -12742,6 +12763,7 @@ const VSlider = defineComponent({
             'tick-label': slots['tick-label']
           }), createVNode(VSliderThumb, {
             "ref": thumbContainerRef,
+            "aria-describedby": messagesId.value,
             "focused": isFocused.value,
             "min": min.value,
             "max": max.value,
@@ -13443,6 +13465,7 @@ const VCombobox = genericComponent()({
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
+    const form = useForm();
     const _search = ref(!props.multiple ? ((_model$value$ = model.value[0]) == null ? void 0 : _model$value$.title) ?? '' : '');
     const search = computed({
       get: () => {
@@ -13487,6 +13510,12 @@ const VCombobox = genericComponent()({
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
       });
     });
+    const displayItems = computed(() => {
+      if (props.hideSelected) {
+        return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+      }
+      return filteredItems.value;
+    });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
     const selection = computed(() => selections.value[selectionIndex.value]);
     const listRef = ref();
@@ -13497,11 +13526,11 @@ const VCombobox = genericComponent()({
       }
     }
     function onClickControl() {
-      if (props.hideNoData && !items.value.length || props.readonly) return;
+      if (props.hideNoData && !items.value.length || props.readonly || form != null && form.isReadonly.value) return;
       menu.value = true;
     }
     function onKeydown(e) {
-      if (props.readonly) return;
+      if (props.readonly || form != null && form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = selected.value.length;
       if (selectionIndex.value > -1) e.preventDefault();
@@ -13564,7 +13593,7 @@ const VCombobox = genericComponent()({
     }
     function select(item) {
       if (props.multiple) {
-        const index = selected.value.findIndex(selection => selection === item.value);
+        const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
         if (index === -1) {
           model.value = [...model.value, item];
         } else {
@@ -13608,6 +13637,7 @@ const VCombobox = genericComponent()({
     });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
+      const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
       const [textFieldProps] = filterVTextFieldProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -13647,7 +13677,7 @@ const VCombobox = genericComponent()({
             "transition": props.transition,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
-            default: () => [createVNode(VList, {
+            default: () => [hasList && createVNode(VList, {
               "ref": listRef,
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -13655,9 +13685,9 @@ const VCombobox = genericComponent()({
               "onFocusin": onFocusin,
               "onFocusout": onFocusout
             }, {
-              default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
+              default: () => [!displayItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), filteredItems.value.map((item, index) => {
+              }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), displayItems.value.map((item, index) => {
                 var _slots$item;
                 return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                   item,
@@ -14207,6 +14237,7 @@ const VFileInput = defineComponent({
         ...slots,
         default: _ref3 => {
           let {
+            id,
             isDisabled,
             isDirty,
             isReadonly,
@@ -14220,6 +14251,7 @@ const VFileInput = defineComponent({
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
+            "id": id.value,
             "active": isDirty.value || isFocused.value,
             "dirty": isDirty.value,
             "focused": isFocused.value,
@@ -16000,6 +16032,7 @@ const VRadioGroup = defineComponent({
         default: _ref2 => {
           let {
             id,
+            messagesId,
             isDisabled,
             isReadonly
           } = _ref2;
@@ -16009,6 +16042,7 @@ const VRadioGroup = defineComponent({
             default: () => [label]
           }), createVNode(VSelectionControlGroup, mergeProps(controlProps, {
             "id": id.value,
+            "aria-describedby": messagesId.value,
             "defaultsTarget": "VRadio",
             "trueIcon": props.trueIcon,
             "falseIcon": props.falseIcon,
@@ -16132,7 +16166,8 @@ const VRangeSlider = defineComponent({
         default: _ref2 => {
           var _startThumbRef$value4, _stopThumbRef$value4;
           let {
-            id
+            id,
+            messagesId
           } = _ref2;
           return createVNode("div", {
             "class": "v-slider__container",
@@ -16160,6 +16195,7 @@ const VRangeSlider = defineComponent({
             'tick-label': slots['tick-label']
           }), createVNode(VSliderThumb, {
             "ref": startThumbRef,
+            "aria-describedby": messagesId.value,
             "focused": isFocused && activeThumbRef.value === ((_startThumbRef$value4 = startThumbRef.value) == null ? void 0 : _startThumbRef$value4.$el),
             "modelValue": model.value[0],
             "onUpdate:modelValue": v => model.value = [v, model.value[1]],
@@ -16189,6 +16225,7 @@ const VRangeSlider = defineComponent({
             'thumb-label': slots['thumb-label']
           }), createVNode(VSliderThumb, {
             "ref": stopThumbRef,
+            "aria-describedby": messagesId.value,
             "focused": isFocused && activeThumbRef.value === ((_stopThumbRef$value4 = stopThumbRef.value) == null ? void 0 : _stopThumbRef$value4.$el),
             "modelValue": model.value[1],
             "onUpdate:modelValue": v => model.value = [model.value[0], v],
@@ -17026,6 +17063,7 @@ const VSwitch = defineComponent({
         default: _ref2 => {
           let {
             id,
+            messagesId,
             isDisabled,
             isReadonly,
             isValid
@@ -17036,6 +17074,7 @@ const VSwitch = defineComponent({
             "modelValue": model.value,
             "onUpdate:modelValue": [$event => model.value = $event, onChange],
             "id": id.value,
+            "aria-describedby": messagesId.value,
             "type": "checkbox",
             "aria-checked": indeterminate.value ? 'mixed' : undefined,
             "disabled": isDisabled.value,
@@ -18306,7 +18345,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.0";
+const version$1 = "3.1.1";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18327,7 +18366,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.1.0";
+const version = "3.1.1";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };