vuetify 3.1.0 → 3.1.1

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.0
+* Vuetify v3.1.1
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -994,7 +994,7 @@
   // 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;
@@ -2370,9 +2370,7 @@
           const animation = animate(el, [{
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
-          }, {
-            transform: ''
-          }], {
+          }, {}], {
             duration: 225 * speed,
             easing: deceleratedEasing
           });
@@ -2382,9 +2380,7 @@
             }, {
               opacity: 0,
               offset: 0.33
-            }, {
-              opacity: 1
-            }], {
+            }, {}], {
               duration: 225 * 2 * speed,
               easing: standardEasing
             });
@@ -2407,9 +2403,7 @@
             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
           }], {
@@ -4978,13 +4972,13 @@
     props: {
       ...VToolbarTitle.props
     },
-    setup(_, _ref) {
+    setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VToolbarTitle, {
+      useRender(() => vue.createVNode(VToolbarTitle, vue.mergeProps(props, {
         "class": "v-app-bar-title"
-      }, slots));
+      }), slots));
       return {};
     }
   });
@@ -5330,6 +5324,7 @@
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
+      const messagesId = vue.computed(() => `${id.value}-messages`);
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
@@ -5454,7 +5449,8 @@
           ...slotProps.value,
           props: {
             id: id.value,
-            class: 'v-field__input'
+            class: 'v-field__input',
+            'aria-describedby': messagesId.value
           },
           focus,
           blur
@@ -5537,7 +5533,9 @@
         "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) => vue.createVNode("div", {
           "class": "v-messages__message",
@@ -5855,6 +5853,7 @@
       } = useInputIcon(props);
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
+      const messagesId = vue.computed(() => `${id.value}-messages`);
       const {
         errorMessages,
         isDirty,
@@ -5870,6 +5869,7 @@
       } = useValidation(props, 'v-input', id);
       const slotProps = vue.computed(() => ({
         id,
+        messagesId,
         isDirty,
         isDisabled,
         isReadonly,
@@ -5905,6 +5905,7 @@
         }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && vue.createVNode("div", {
           "class": "v-input__details"
         }, [vue.createVNode(VMessages, {
+          "id": messagesId.value,
           "active": hasMessages,
           "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
         }, {
@@ -6576,11 +6577,13 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly
             } = _ref2;
             return vue.createVNode(VCheckboxBtn, vue.mergeProps(checkboxProps, {
               "id": id.value,
+              "aria-describedby": messagesId.value,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
             }, controlAttrs, {
@@ -9809,12 +9812,19 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const selections = vue.computed(() => {
         return model.value.map(v => {
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return items.value.filter(item => !selections.value.some(s => s === item));
+        }
+        return items.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         model.value = [];
@@ -9823,11 +9833,11 @@
         }
       }
       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;
@@ -9854,7 +9864,7 @@
       }
       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 {
@@ -9881,6 +9891,7 @@
       }
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -9917,16 +9928,16 @@
               "closeOnContentClick": false,
               "transition": props.transition
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.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)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.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) => {
+                }, 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, {
@@ -10159,6 +10170,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const {
         filteredItems,
         getMatches
@@ -10168,6 +10180,12 @@
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+        }
+        return filteredItems.value;
+      });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const listRef = vue.ref();
       function onClear(e) {
@@ -10178,11 +10196,11 @@
         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;
         }
@@ -10220,7 +10238,7 @@
       const isSelecting = vue.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 = '';
@@ -10259,6 +10277,7 @@
       });
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -10299,7 +10318,7 @@
               "transition": props.transition,
               "onAfterLeave": onAfterLeave
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.createVNode(VList, {
                 "ref": listRef,
                 "selected": selected.value,
                 "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -10307,9 +10326,9 @@
                 "onFocusin": onFocusin,
                 "onFocusout": onFocusout
               }, {
-                default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.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((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,
@@ -12719,13 +12738,15 @@
           prepend: hasPrepend ? slotProps => {
             var _slots$label, _slots$prepend;
             return vue.createVNode(vue.Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? vue.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 vue.createVNode("div", {
               "class": "v-slider__container",
@@ -12746,6 +12767,7 @@
               'tick-label': slots['tick-label']
             }), vue.createVNode(VSliderThumb, {
               "ref": thumbContainerRef,
+              "aria-describedby": messagesId.value,
               "focused": isFocused.value,
               "min": min.value,
               "max": max.value,
@@ -13447,6 +13469,7 @@
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
       });
+      const form = useForm();
       const _search = vue.ref(!props.multiple ? ((_model$value$ = model.value[0]) == null ? void 0 : _model$value$.title) ?? '' : '');
       const search = vue.computed({
         get: () => {
@@ -13491,6 +13514,12 @@
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+        }
+        return filteredItems.value;
+      });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
       const listRef = vue.ref();
@@ -13501,11 +13530,11 @@
         }
       }
       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();
@@ -13568,7 +13597,7 @@
       }
       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 {
@@ -13612,6 +13641,7 @@
       });
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -13651,7 +13681,7 @@
               "transition": props.transition,
               "onAfterLeave": onAfterLeave
             }, props.menuProps), {
-              default: () => [vue.createVNode(VList, {
+              default: () => [hasList && vue.createVNode(VList, {
                 "ref": listRef,
                 "selected": selected.value,
                 "selectStrategy": props.multiple ? 'independent' : 'single-independent',
@@ -13659,9 +13689,9 @@
                 "onFocusin": onFocusin,
                 "onFocusout": onFocusout
               }, {
-                default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? vue.createVNode(VListItem, {
+                default: () => [!displayItems.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((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,
@@ -14211,6 +14241,7 @@
           ...slots,
           default: _ref3 => {
             let {
+              id,
               isDisabled,
               isDirty,
               isReadonly,
@@ -14224,6 +14255,7 @@
               "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,
@@ -16004,6 +16036,7 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly
             } = _ref2;
@@ -16013,6 +16046,7 @@
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
               "id": id.value,
+              "aria-describedby": messagesId.value,
               "defaultsTarget": "VRadio",
               "trueIcon": props.trueIcon,
               "falseIcon": props.falseIcon,
@@ -16136,7 +16170,8 @@
           default: _ref2 => {
             var _startThumbRef$value4, _stopThumbRef$value4;
             let {
-              id
+              id,
+              messagesId
             } = _ref2;
             return vue.createVNode("div", {
               "class": "v-slider__container",
@@ -16164,6 +16199,7 @@
               'tick-label': slots['tick-label']
             }), vue.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]],
@@ -16193,6 +16229,7 @@
               'thumb-label': slots['thumb-label']
             }), vue.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],
@@ -17030,6 +17067,7 @@
           default: _ref2 => {
             let {
               id,
+              messagesId,
               isDisabled,
               isReadonly,
               isValid
@@ -17040,6 +17078,7 @@
               "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,
@@ -18310,7 +18349,7 @@
       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
@@ -18331,7 +18370,7 @@
       ...options
     });
   };
-  const version = "3.1.0";
+  const version = "3.1.1";
   createVuetify.version = version;
 
   exports.components = components;