vuetify 3.3.2 → 3.3.3

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.2
+* Vuetify v3.3.3
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -298,6 +298,15 @@
     }
     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] : '';
     if (toKebabCase.cache.has(str)) return toKebabCase.cache.get(str);
@@ -377,6 +386,9 @@
   }
   const onRE = /^on[^a-z]/;
   const isOn = key => onRE.test(key);
+  function eventName(propName) {
+    return propName[2].toLowerCase() + propName.slice(3);
+  }
   const EventProp = () => [Function, Array];
   function hasEvent(props, name) {
     name = 'on' + vue.capitalize(name);
@@ -575,6 +587,54 @@
     return animation;
   }
 
+  // Utilities
+  const handlers = new WeakMap();
+  function bindProps(el, props) {
+    Object.keys(props).forEach(k => {
+      if (isOn(k)) {
+        const name = eventName(k);
+        const handler = handlers.get(el);
+        if (props[k] == null) {
+          handler?.forEach(v => {
+            const [n, fn] = v;
+            if (n === name) {
+              el.removeEventListener(name, fn);
+              handler.delete(v);
+            }
+          });
+        } else if (!handler || ![...handler]?.some(v => v[0] === name && v[1] === props[k])) {
+          el.addEventListener(name, props[k]);
+          const _handler = handler || new Set();
+          _handler.add([name, props[k]]);
+          if (!handlers.has(el)) handlers.set(el, _handler);
+        }
+      } else {
+        if (props[k] == null) {
+          el.removeAttribute(k);
+        } else {
+          el.setAttribute(k, props[k]);
+        }
+      }
+    });
+  }
+  function unbindProps(el, props) {
+    Object.keys(props).forEach(k => {
+      if (isOn(k)) {
+        const name = eventName(k);
+        const handler = handlers.get(el);
+        handler?.forEach(v => {
+          const [n, fn] = v;
+          if (n === name) {
+            el.removeEventListener(name, fn);
+            handler.delete(v);
+          }
+        });
+      } else {
+        el.removeAttribute(k);
+      }
+    });
+  }
+
   /* eslint-disable no-console */
 
   function consoleWarn(message) {
@@ -2158,6 +2218,7 @@
       };
     }
     function install(app) {
+      if (parsedOptions.isDisabled) return;
       const head = app._context.provides.usehead;
       if (head) {
         if (head.push) {
@@ -2179,7 +2240,6 @@
           immediate: true
         });
         function updateStyles() {
-          if (parsedOptions.isDisabled) return;
           if (typeof document !== 'undefined' && !styleEl) {
             const el = document.createElement('style');
             el.type = 'text/css';
@@ -4266,7 +4326,7 @@
       useRender(() => {
         const slotValue = slots.default?.();
         if (slotValue) {
-          slotIcon.value = slotValue.filter(node => node.type === vue.Text && node.children && typeof node.children === 'string')[0]?.children;
+          slotIcon.value = flattenFragments(slotValue).filter(node => node.type === vue.Text && node.children && typeof node.children === 'string')[0]?.children;
         }
         return vue.createVNode(iconData.value.component, {
           "tag": props.tag,
@@ -5103,7 +5163,7 @@
     block: Boolean,
     stacked: Boolean,
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     text: String,
@@ -6386,6 +6446,7 @@
     inheritAttrs: false,
     props: makeVCheckboxProps(),
     emits: {
+      'update:modelValue': value => true,
       'update:focused': focused => true
     },
     setup(props, _ref) {
@@ -6393,6 +6454,7 @@
         attrs,
         slots
       } = _ref;
+      const model = useProxiedModel(props, 'modelValue');
       const {
         isFocused,
         focus,
@@ -6407,6 +6469,8 @@
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-checkbox', props.class]
         }, inputAttrs, inputProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
           "id": id.value,
           "focused": isFocused.value,
           "style": props.style
@@ -6425,6 +6489,8 @@
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
             }, controlAttrs, {
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
               "onFocus": focus,
               "onBlur": blur
             }), slots);
@@ -6562,6 +6628,8 @@
     }
   });
 
+  // Types
+
   const makeVChipProps = propsFactory({
     activeClass: String,
     appendAvatar: String,
@@ -6590,7 +6658,7 @@
     prependAvatar: String,
     prependIcon: IconValue,
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     text: String,
@@ -7406,7 +7474,7 @@
     prependAvatar: String,
     prependIcon: IconValue,
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     subtitle: [String, Number, Boolean],
@@ -8779,29 +8847,29 @@
       }
     });
     const availableEvents = {
-      click: e => {
+      onClick: e => {
         e.stopPropagation();
         activatorEl.value = e.currentTarget || e.target;
         isActive.value = !isActive.value;
       },
-      mouseenter: e => {
+      onMouseenter: e => {
         if (e.sourceCapabilities?.firesTouchEvents) return;
         isHovered = true;
         activatorEl.value = e.currentTarget || e.target;
         runOpenDelay();
       },
-      mouseleave: e => {
+      onMouseleave: e => {
         isHovered = false;
         runCloseDelay();
       },
-      focus: e => {
+      onFocus: e => {
         if (SUPPORTS_FOCUS_VISIBLE && !e.target.matches(':focus-visible')) return;
         isFocused = true;
         e.stopPropagation();
         activatorEl.value = e.currentTarget || e.target;
         runOpenDelay();
       },
-      blur: e => {
+      onBlur: e => {
         isFocused = false;
         e.stopPropagation();
         runCloseDelay();
@@ -8810,33 +8878,43 @@
     const activatorEvents = vue.computed(() => {
       const events = {};
       if (openOnClick.value) {
-        events.click = availableEvents.click;
+        events.onClick = availableEvents.onClick;
       }
       if (props.openOnHover) {
-        events.mouseenter = availableEvents.mouseenter;
-        events.mouseleave = availableEvents.mouseleave;
+        events.onMouseenter = availableEvents.onMouseenter;
+        events.onMouseleave = availableEvents.onMouseleave;
       }
       if (openOnFocus.value) {
-        events.focus = availableEvents.focus;
-        events.blur = availableEvents.blur;
+        events.onFocus = availableEvents.onFocus;
+        events.onBlur = availableEvents.onBlur;
       }
       return events;
     });
     const contentEvents = vue.computed(() => {
       const events = {};
       if (props.openOnHover) {
-        events.mouseenter = () => {
+        events.onMouseenter = () => {
           isHovered = true;
           runOpenDelay();
         };
-        events.mouseleave = () => {
+        events.onMouseleave = () => {
           isHovered = false;
           runCloseDelay();
         };
       }
+      if (openOnFocus.value) {
+        events.onFocusin = () => {
+          isFocused = true;
+          runOpenDelay();
+        };
+        events.onFocusout = () => {
+          isFocused = false;
+          runCloseDelay();
+        };
+      }
       if (props.closeOnContentClick) {
         const menu = vue.inject(VMenuSymbol, null);
-        events.click = () => {
+        events.onClick = () => {
           isActive.value = false;
           menu?.closeParents();
         };
@@ -8846,14 +8924,14 @@
     const scrimEvents = vue.computed(() => {
       const events = {};
       if (props.openOnHover) {
-        events.mouseenter = () => {
+        events.onMouseenter = () => {
           if (firstEnter) {
             isHovered = true;
             firstEnter = false;
             runOpenDelay();
           }
         };
-        events.mouseleave = () => {
+        events.onMouseleave = () => {
           isHovered = false;
           runCloseDelay();
         };
@@ -8927,29 +9005,13 @@
       let el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getActivator();
       let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
       if (!el) return;
-      Object.entries(activatorEvents.value).forEach(_ref3 => {
-        let [name, cb] = _ref3;
-        el.addEventListener(name, cb);
-      });
-      Object.keys(_props).forEach(k => {
-        if (_props[k] == null) {
-          el.removeAttribute(k);
-        } else {
-          el.setAttribute(k, _props[k]);
-        }
-      });
+      bindProps(el, vue.mergeProps(activatorEvents.value, _props));
     }
     function unbindActivatorProps() {
       let el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getActivator();
       let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
       if (!el) return;
-      Object.entries(activatorEvents.value).forEach(_ref4 => {
-        let [name, cb] = _ref4;
-        el.removeEventListener(name, cb);
-      });
-      Object.keys(_props).forEach(k => {
-        el.removeAttribute(k);
-      });
+      unbindProps(el, vue.mergeProps(activatorEvents.value, _props));
     }
     function getActivator() {
       let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
@@ -9476,6 +9538,9 @@
         if (e.key === 'Escape' && globalTop.value) {
           if (!props.persistent) {
             isActive.value = false;
+            if (contentEl.value?.contains(document.activeElement)) {
+              activatorEl.value?.focus();
+            }
           } else animateClick();
         }
       }
@@ -9518,7 +9583,7 @@
         isActive: isActive.value,
         props: vue.mergeProps({
           ref: activatorRef
-        }, vue.toHandlers(activatorEvents.value), props.activatorProps)
+        }, activatorEvents.value, props.activatorProps)
       }), isMounted.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
         "to": teleportTarget.value
@@ -9536,7 +9601,7 @@
         }, scopeId, attrs), [vue.createVNode(Scrim, vue.mergeProps({
           "color": scrimColor,
           "modelValue": isActive.value && !!props.scrim
-        }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
+        }, scrimEvents.value), null), vue.createVNode(MaybeTransition, {
           "appear": true,
           "persisted": true,
           "transition": props.transition,
@@ -9550,7 +9615,7 @@
             "ref": contentEl,
             "class": ['v-overlay__content', props.contentClass],
             "style": [dimensionStyles.value, contentStyles.value]
-          }, vue.toHandlers(contentEvents.value), props.contentProps), [slots.default?.({
+          }, contentEvents.value, props.contentProps), [slots.default?.({
             isActive
           })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
             handler: onClickOutside,
@@ -9710,10 +9775,35 @@
       function onClickOutside() {
         parent?.closeParents();
       }
+      function onKeydown(e) {
+        if (props.disabled) return;
+        if (e.key === 'Tab') {
+          isActive.value = false;
+          overlay.value?.activatorEl?.focus();
+        }
+      }
+      function onActivatorKeydown(e) {
+        if (props.disabled) return;
+        const el = overlay.value?.contentEl;
+        if (el && isActive.value) {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            focusChild(el, 'next');
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            focusChild(el, 'prev');
+          }
+        } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+          isActive.value = true;
+          e.preventDefault();
+          setTimeout(() => setTimeout(() => onActivatorKeydown(e)));
+        }
+      }
       const activatorProps = vue.computed(() => vue.mergeProps({
         'aria-haspopup': 'menu',
         'aria-expanded': String(isActive.value),
-        'aria-owns': id.value
+        'aria-owns': id.value,
+        onKeydown: onActivatorKeydown
       }, props.activatorProps));
       useRender(() => {
         const [overlayProps] = VOverlay.filterProps(props);
@@ -9726,7 +9816,8 @@
           "onUpdate:modelValue": $event => isActive.value = $event,
           "absolute": true,
           "activatorProps": activatorProps.value,
-          "onClick:outside": onClickOutside
+          "onClick:outside": onClickOutside,
+          "onKeydown": onKeydown
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -10370,6 +10461,7 @@
         }
         return items.value;
       });
+      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10377,7 +10469,7 @@
         }
       }
       function onMousedownControl() {
-        if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
+        if (menuDisabled.value) return;
         menu.value = !menu.value;
       }
       function onKeydown(e) {
@@ -10391,11 +10483,7 @@
         if (['Escape', 'Tab'].includes(e.key)) {
           menu.value = false;
         }
-        if (e.key === 'ArrowDown') {
-          listRef.value?.focus('next');
-        } else if (e.key === 'ArrowUp') {
-          listRef.value?.focus('prev');
-        } else if (e.key === 'Home') {
+        if (e.key === 'Home') {
           listRef.value?.focus('first');
         } else if (e.key === 'End') {
           listRef.value?.focus('last');
@@ -10421,6 +10509,11 @@
           model.value = [item];
         }
       }
+      function onListKeydown(e) {
+        if (e.key === 'Tab') {
+          vTextFieldRef.value?.focus();
+        }
+      }
       function select(item) {
         if (props.multiple) {
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -10451,7 +10544,7 @@
       }
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
         const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
         const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? undefined : props.placeholder;
@@ -10488,6 +10581,7 @@
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
             "contentClass": "v-select__content",
+            "disabled": menuDisabled.value,
             "eager": props.eager,
             "maxHeight": 310,
             "openOnClick": false,
@@ -10500,11 +10594,13 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin
+              "onKeydown": onListKeydown,
+              "onFocusin": onFocusin,
+              "tabindex": "-1"
             }, {
-              default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+              default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+              }, null)), displayItems.value.map((item, index) => {
                 const itemProps = vue.mergeProps(item.props, {
                   key: index,
                   onClick: () => select(item)
@@ -10796,6 +10892,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
+      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10804,10 +10901,11 @@
         search.value = '';
       }
       function onMousedownControl() {
-        if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
+        if (menuDisabled.value) return;
         menu.value = true;
       }
       function onMousedownMenuIcon(e) {
+        if (menuDisabled.value) return;
         if (isFocused.value) {
           e.preventDefault();
           e.stopPropagation();
@@ -10833,13 +10931,8 @@
           }
           isPristine.value = true;
         }
-        if (e.key === 'ArrowDown') {
+        if (e.key === 'ArrowDown' && highlightFirst.value) {
           listRef.value?.focus('next');
-          if (highlightFirst.value) {
-            listRef.value?.focus('next');
-          }
-        } else if (e.key === 'ArrowUp') {
-          listRef.value?.focus('prev');
         }
         if (!props.multiple) return;
         if (['Backspace', 'Delete'].includes(e.key)) {
@@ -10874,6 +10967,11 @@
           }
         }
       }
+      function onListKeydown(e) {
+        if (e.key === 'Tab') {
+          vTextFieldRef.value?.focus();
+        }
+      }
       function onInput(e) {
         search.value = e.target.value;
       }
@@ -10943,7 +11041,7 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
         const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
@@ -10976,6 +11074,7 @@
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
             "contentClass": "v-autocomplete__content",
+            "disabled": menuDisabled.value,
             "eager": props.eager,
             "maxHeight": 310,
             "openOnClick": false,
@@ -10988,12 +11087,14 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
-              "onFocusout": onFocusout
+              "onFocusout": onFocusout,
+              "tabindex": "-1"
             }, {
-              default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+              default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+              }, null)), displayItems.value.map((item, index) => {
                 const itemProps = vue.mergeProps(item.props, {
                   key: index,
                   active: highlightFirst.value && index === 0 ? true : undefined,
@@ -11743,7 +11844,7 @@
     prependAvatar: String,
     prependIcon: IconValue,
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     subtitle: String,
@@ -13148,6 +13249,8 @@
     return data;
   };
 
+  // Types
+
   const makeVSliderThumbProps = propsFactory({
     focused: Boolean,
     max: {
@@ -13167,7 +13270,7 @@
       required: true
     },
     ripple: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: true
     },
     ...makeComponentProps()
@@ -14326,6 +14429,7 @@
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
         return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
       });
+      const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
       function onClear(e) {
         cleared = true;
@@ -14334,10 +14438,11 @@
         }
       }
       function onMousedownControl() {
-        if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
+        if (menuDisabled.value) return;
         menu.value = true;
       }
       function onMousedownMenuIcon(e) {
+        if (menuDisabled.value) return;
         if (isFocused.value) {
           e.preventDefault();
           e.stopPropagation();
@@ -14363,10 +14468,8 @@
           }
           isPristine.value = true;
         }
-        if (e.key === 'ArrowDown') {
+        if (e.key === 'ArrowDown' && highlightFirst.value) {
           listRef.value?.focus('next');
-        } else if (e.key === 'ArrowUp') {
-          listRef.value?.focus('prev');
         }
         if (!props.multiple) return;
         if (['Backspace', 'Delete'].includes(e.key)) {
@@ -14405,6 +14508,11 @@
           search.value = '';
         }
       }
+      function onListKeydown(e) {
+        if (e.key === 'Tab') {
+          vTextFieldRef.value?.focus();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -14466,7 +14574,7 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
         const isDirty = model.value.length > 0;
         const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
@@ -14499,6 +14607,7 @@
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
             "contentClass": "v-combobox__content",
+            "disabled": menuDisabled.value,
             "eager": props.eager,
             "maxHeight": 310,
             "openOnClick": false,
@@ -14511,12 +14620,14 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
-              "onFocusout": onFocusout
+              "onFocusout": onFocusout,
+              "tabindex": "-1"
             }, {
-              default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+              default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+              }, null)), displayItems.value.map((item, index) => {
                 const itemProps = vue.mergeProps(item.props, {
                   key: index,
                   active: highlightFirst.value && index === 0 ? true : undefined,
@@ -14808,6 +14919,8 @@
     }
   });
 
+  // Types
+
   const makeVExpansionPanelTitleProps = propsFactory({
     color: String,
     expandIcon: {
@@ -19857,7 +19970,7 @@
       date
     };
   }
-  const version$1 = "3.3.2";
+  const version$1 = "3.3.3";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19882,7 +19995,7 @@
       ...options
     });
   };
-  const version = "3.3.2";
+  const version = "3.3.3";
   createVuetify.version = version;
 
   exports.components = components;