@vuetify/nightly 3.6.13-3.7.0-beta.0.0-dev.2024-07-12 → 3.6.13-3.7.0-beta.0.0-dev.2024-07-25

package/lib/components/VColorPicker/index.d.mts

@@ -60,35 +60,35 @@ declare const modes: {
 
 declare const VColorPicker: {
     new (...args: any[]): vue.CreateComponentPublicInstance<Readonly<vue.ExtractPropTypes<{
-        class: PropType<any>;
-        style: {
-            type: PropType<vue.StyleValue>;
-            default: null;
-        };
         width: {
             type: PropType<NonNullable<string | number>>;
             default: NonNullable<string | number>;
         };
-        theme: StringConstructor;
+        border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         color: StringConstructor;
+        position: {
+            type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+            validator: (v: any) => boolean;
+        };
+        style: {
+            type: PropType<vue.StyleValue>;
+            default: null;
+        };
+        class: PropType<any>;
         tag: {
             type: StringConstructor;
             default: string;
         };
-        border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        position: {
-            type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-            validator: (v: any) => boolean;
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            validator(v: any): boolean;
         };
+        theme: StringConstructor;
         rounded: {
-            type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
             default: undefined;
         };
         tile: BooleanConstructor;
-        elevation: {
-            type: (StringConstructor | NumberConstructor)[];
-            validator(v: any): boolean;
-        };
         canvasHeight: {
             type: (StringConstructor | NumberConstructor)[];
             default: number;
@@ -142,35 +142,35 @@ declare const VColorPicker: {
         'update:modelValue': (color: any) => true;
         'update:mode': (mode: keyof typeof modes) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & Readonly<vue.ExtractPropTypes<{
-        class: PropType<any>;
-        style: {
-            type: PropType<vue.StyleValue>;
-            default: null;
-        };
         width: {
             type: PropType<NonNullable<string | number>>;
             default: NonNullable<string | number>;
         };
-        theme: StringConstructor;
+        border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         color: StringConstructor;
+        position: {
+            type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+            validator: (v: any) => boolean;
+        };
+        style: {
+            type: PropType<vue.StyleValue>;
+            default: null;
+        };
+        class: PropType<any>;
         tag: {
             type: StringConstructor;
             default: string;
         };
-        border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        position: {
-            type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-            validator: (v: any) => boolean;
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            validator(v: any): boolean;
         };
+        theme: StringConstructor;
         rounded: {
-            type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
             default: undefined;
         };
         tile: BooleanConstructor;
-        elevation: {
-            type: (StringConstructor | NumberConstructor)[];
-            validator(v: any): boolean;
-        };
         canvasHeight: {
             type: (StringConstructor | NumberConstructor)[];
             default: number;
@@ -221,11 +221,11 @@ declare const VColorPicker: {
         "onUpdate:modelValue"?: ((color: any) => any) | undefined;
         "onUpdate:mode"?: ((mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
     }, {
-        style: vue.StyleValue;
-        mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
         width: NonNullable<string | number>;
+        style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
         rounded: string | number | boolean;
         tile: boolean;
         dotSize: string | number;
@@ -244,35 +244,35 @@ declare const VColorPicker: {
         M: {};
         Defaults: {};
     }, Readonly<vue.ExtractPropTypes<{
-        class: PropType<any>;
-        style: {
-            type: PropType<vue.StyleValue>;
-            default: null;
-        };
         width: {
             type: PropType<NonNullable<string | number>>;
             default: NonNullable<string | number>;
         };
-        theme: StringConstructor;
+        border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         color: StringConstructor;
+        position: {
+            type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+            validator: (v: any) => boolean;
+        };
+        style: {
+            type: PropType<vue.StyleValue>;
+            default: null;
+        };
+        class: PropType<any>;
         tag: {
             type: StringConstructor;
             default: string;
         };
-        border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        position: {
-            type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-            validator: (v: any) => boolean;
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            validator(v: any): boolean;
         };
+        theme: StringConstructor;
         rounded: {
-            type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
             default: undefined;
         };
         tile: BooleanConstructor;
-        elevation: {
-            type: (StringConstructor | NumberConstructor)[];
-            validator(v: any): boolean;
-        };
         canvasHeight: {
             type: (StringConstructor | NumberConstructor)[];
             default: number;
@@ -323,11 +323,11 @@ declare const VColorPicker: {
         "onUpdate:modelValue"?: ((color: any) => any) | undefined;
         "onUpdate:mode"?: ((mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa") => any) | undefined;
     }, {}, {}, {}, {}, {
-        style: vue.StyleValue;
-        mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
         width: NonNullable<string | number>;
+        style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
         rounded: string | number | boolean;
         tile: boolean;
         dotSize: string | number;
@@ -343,35 +343,35 @@ declare const VColorPicker: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
-    class: PropType<any>;
-    style: {
-        type: PropType<vue.StyleValue>;
-        default: null;
-    };
     width: {
         type: PropType<NonNullable<string | number>>;
         default: NonNullable<string | number>;
     };
-    theme: StringConstructor;
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     color: StringConstructor;
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+        validator: (v: any) => boolean;
+    };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;
     };
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-    position: {
-        type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-        validator: (v: any) => boolean;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
     };
+    theme: StringConstructor;
     rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     tile: BooleanConstructor;
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
     canvasHeight: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -425,11 +425,11 @@ declare const VColorPicker: {
     'update:modelValue': (color: any) => true;
     'update:mode': (mode: keyof typeof modes) => true;
 }, string, {
-    style: vue.StyleValue;
-    mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
     width: NonNullable<string | number>;
+    style: vue.StyleValue;
     disabled: boolean;
     tag: string;
+    mode: "rgb" | "rgba" | "hsl" | "hsla" | "hex" | "hexa";
     rounded: string | number | boolean;
     tile: boolean;
     dotSize: string | number;
@@ -441,35 +441,35 @@ declare const VColorPicker: {
     showSwatches: boolean;
     swatchesMaxHeight: string | number;
 }, {}, string, {}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    class: PropType<any>;
-    style: {
-        type: PropType<vue.StyleValue>;
-        default: null;
-    };
     width: {
         type: PropType<NonNullable<string | number>>;
         default: NonNullable<string | number>;
     };
-    theme: StringConstructor;
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     color: StringConstructor;
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+        validator: (v: any) => boolean;
+    };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;
     };
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-    position: {
-        type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-        validator: (v: any) => boolean;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
     };
+    theme: StringConstructor;
     rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     tile: BooleanConstructor;
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
     canvasHeight: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -517,35 +517,35 @@ declare const VColorPicker: {
         type: PropType<string | Record<string, unknown> | null | undefined>;
     };
 }, vue.ExtractPropTypes<{
-    class: PropType<any>;
-    style: {
-        type: PropType<vue.StyleValue>;
-        default: null;
-    };
     width: {
         type: PropType<NonNullable<string | number>>;
         default: NonNullable<string | number>;
     };
-    theme: StringConstructor;
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     color: StringConstructor;
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
+        validator: (v: any) => boolean;
+    };
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
+    class: PropType<any>;
     tag: {
         type: StringConstructor;
         default: string;
     };
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-    position: {
-        type: PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
-        validator: (v: any) => boolean;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
     };
+    theme: StringConstructor;
     rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     tile: BooleanConstructor;
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
     canvasHeight: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;

package/lib/components/VCombobox/VCombobox.mjs

@@ -24,7 +24,7 @@ import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs"; // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue';
-import { ensureValidVNode, genericComponent, IN_BROWSER, isComposingIgnoreKey, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+import { checkPrintable, ensureValidVNode, genericComponent, IN_BROWSER, isComposingIgnoreKey, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 function highlightResult(text, matches, length) {
   if (matches == null) return text;
   if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
@@ -87,7 +87,7 @@ export const VCombobox = genericComponent()({
     const menu = computed({
       get: () => _menu.value,
       set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
         _menu.value = v;
       }
     });
@@ -170,10 +170,7 @@ export const VCombobox = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       cleared = true;
       if (props.openOnClear) {
@@ -192,6 +189,11 @@ export const VCombobox = genericComponent()({
       }
       menu.value = !menu.value;
     }
+    function onListKeydown(e) {
+      if (checkPrintable(e)) {
+        vTextFieldRef.value?.focus();
+      }
+    }
     // eslint-disable-next-line complexity
     function onKeydown(e) {
       if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
@@ -256,6 +258,11 @@ export const VCombobox = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -380,6 +387,7 @@ export const VCombobox = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && _createVNode(VList, _mergeProps({
@@ -390,11 +398,10 @@ export const VCombobox = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
-            "onScrollPassive": onListScroll,
             "tabindex": "-1",
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
-          }, props.listProps), {
+          }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), _createVNode(VVirtualScroll, {