@vuetify/nightly 3.8.7-dev.2025-05-27 → 3.8.7-dev.2025-06-03

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.7-dev.2025-05-27
+* Vuetify v3.8.7-dev.2025-06-03
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4286,7 +4286,10 @@ const makeVToolbarProps = propsFactory({
     default: 'default',
     validator: v => allowedDensities$1.includes(v)
   },
-  extended: Boolean,
+  extended: {
+    type: Boolean,
+    default: null
+  },
   extensionHeight: {
     type: [Number, String],
     default: 48
@@ -4334,7 +4337,7 @@ const VToolbar = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const isExtended = shallowRef(!!(props.extended || slots.extension?.()));
+    const isExtended = shallowRef(props.extended === null ? !!slots.extension?.() : props.extended);
     const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
     const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
     provideDefaults({
@@ -4346,7 +4349,7 @@ const VToolbar = genericComponent()({
       const hasTitle = !!(props.title || slots.title);
       const hasImage = !!(slots.image || props.image);
       const extension = slots.extension?.();
-      isExtended.value = !!(props.extended || extension);
+      isExtended.value = props.extended === null ? !!extension : props.extended;
       return createVNode(props.tag, {
         "class": normalizeClass(['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -5904,8 +5907,8 @@ function rippleCancelShow(e) {
   window.clearTimeout(element._ripple.showTimer);
 }
 let keyboardRipple = false;
-function keyboardRippleShow(e) {
-  if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
+function keyboardRippleShow(e, keys) {
+  if (!keyboardRipple && keys.includes(e.keyCode)) {
     keyboardRipple = true;
     rippleShow(e);
   }
@@ -5933,9 +5936,12 @@ function updateRipple(el, binding, wasEnabled) {
   el._ripple.enabled = enabled;
   el._ripple.centered = modifiers.center;
   el._ripple.circle = modifiers.circle;
-  if (isObject(value) && value.class) {
-    el._ripple.class = value.class;
+  const bindingValue = isObject(value) ? value : {};
+  if (bindingValue.class) {
+    el._ripple.class = bindingValue.class;
   }
+  const allowedKeys = bindingValue.keys ?? [keyCodes.enter, keyCodes.space];
+  el._ripple.keyDownHandler = e => keyboardRippleShow(e, allowedKeys);
   if (enabled && !wasEnabled) {
     if (modifiers.stop) {
       el.addEventListener('touchstart', rippleStop, {
@@ -5957,7 +5963,7 @@ function updateRipple(el, binding, wasEnabled) {
     el.addEventListener('mousedown', rippleShow);
     el.addEventListener('mouseup', rippleHide);
     el.addEventListener('mouseleave', rippleHide);
-    el.addEventListener('keydown', keyboardRippleShow);
+    el.addEventListener('keydown', e => keyboardRippleShow(e, allowedKeys));
     el.addEventListener('keyup', keyboardRippleHide);
     el.addEventListener('blur', focusRippleHide);
 
@@ -5977,7 +5983,9 @@ function removeListeners(el) {
   el.removeEventListener('touchcancel', rippleHide);
   el.removeEventListener('mouseup', rippleHide);
   el.removeEventListener('mouseleave', rippleHide);
-  el.removeEventListener('keydown', keyboardRippleShow);
+  if (el._ripple?.keyDownHandler) {
+    el.removeEventListener('keydown', el._ripple.keyDownHandler);
+  }
   el.removeEventListener('keyup', keyboardRippleHide);
   el.removeEventListener('dragstart', rippleHide);
   el.removeEventListener('blur', focusRippleHide);
@@ -5986,8 +5994,8 @@ function mounted$4(el, binding) {
   updateRipple(el, binding, false);
 }
 function unmounted$4(el) {
-  delete el._ripple;
   removeListeners(el);
+  delete el._ripple;
 }
 function updated$1(el, binding) {
   if (binding.value === binding.oldValue) {
@@ -8698,11 +8706,18 @@ const VDivider = genericComponent()({
 // List
 const ListKey = Symbol.for('vuetify:list');
 function createList() {
+  let {
+    filterable
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    filterable: false
+  };
   const parent = inject$1(ListKey, {
+    filterable: false,
     hasPrepend: shallowRef(false),
     updateHasPrepend: () => null
   });
   const data = {
+    filterable: parent.filterable || filterable,
     hasPrepend: shallowRef(false),
     updateHasPrepend: value => {
       if (value) data.hasPrepend.value = value;
@@ -9654,6 +9669,9 @@ const VListItem = genericComponent()({
       roundedClasses
     } = useRounded(roundedProps);
     const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+    const rippleOptions = toRef(() => props.ripple !== undefined && !!props.ripple && list?.filterable ? {
+      keys: [keyCodes.enter]
+    } : props.ripple);
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
@@ -9678,8 +9696,9 @@ const VListItem = genericComponent()({
     function onKeyDown(e) {
       const target = e.target;
       if (['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
-      if (e.key === 'Enter' || e.key === ' ') {
+      if (e.key === 'Enter' || e.key === ' ' && !list?.filterable) {
         e.preventDefault();
+        e.stopPropagation();
         e.target.dispatchEvent(new MouseEvent('click', e));
       }
     }
@@ -9789,7 +9808,7 @@ const VListItem = genericComponent()({
         }), createElementVNode("div", {
           "class": "v-list-item__spacer"
         }, null)])]
-      }), [[Ripple, isClickable.value && props.ripple]]);
+      }), [[Ripple, isClickable.value && rippleOptions.value]]);
     });
     return {
       activate,
@@ -10112,6 +10131,7 @@ const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
+  filterable: Boolean,
   expandIcon: IconValue,
   collapseIcon: IconValue,
   lines: {
@@ -10195,7 +10215,9 @@ const VList = genericComponent()({
     const activeColor = toRef(() => props.activeColor);
     const baseColor = toRef(() => props.baseColor);
     const color = toRef(() => props.color);
-    createList();
+    createList({
+      filterable: props.filterable
+    });
     provideDefaults({
       VListGroup: {
         activeColor,
@@ -13818,7 +13840,7 @@ const VAutocomplete = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus();
       }
     }
@@ -14023,6 +14045,7 @@ const VAutocomplete = genericComponent()({
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
             "ref": listRef,
+            "filterable": true,
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
@@ -18561,7 +18584,7 @@ const VCombobox = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus();
       }
     }
@@ -18766,6 +18789,7 @@ const VCombobox = genericComponent()({
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
             "ref": listRef,
+            "filterable": true,
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
@@ -21252,11 +21276,18 @@ const VDataTableRows = genericComponent()({
   }
 });
 
+// Types
+
 const makeVTableProps = propsFactory({
   fixedHeader: Boolean,
   fixedFooter: Boolean,
   height: [Number, String],
   hover: Boolean,
+  striped: {
+    type: String,
+    default: null,
+    validator: v => ['even', 'odd'].includes(v)
+  },
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeTagProps(),
@@ -21283,7 +21314,9 @@ const VTable = genericComponent()({
         'v-table--fixed-footer': props.fixedFooter,
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
-        'v-table--hover': props.hover
+        'v-table--hover': props.hover,
+        'v-table--striped-even': props.striped === 'even',
+        'v-table--striped-odd': props.striped === 'odd'
       }, themeClasses.value, densityClasses.value, props.class]),
       "style": normalizeStyle(props.style)
     }, {
@@ -29498,7 +29531,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.7-dev.2025-05-27";
+const version$1 = "3.8.7-dev.2025-06-03";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29523,7 +29556,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.7-dev.2025-05-27";
+const version = "3.8.7-dev.2025-06-03";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };