@vuetify/nightly 3.8.0-beta.0-dev.2025-03-24 → 3.8.0-beta.0-dev.2025-03-26

package/lib/framework.d.ts

@@ -2568,42 +2568,39 @@ declare module 'vue' {
   }
   export interface GlobalComponents {
     VApp: typeof import('vuetify/components')['VApp']
+    VAlert: typeof import('vuetify/components')['VAlert']
+    VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
+    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
     VAvatar: typeof import('vuetify/components')['VAvatar']
+    VBadge: typeof import('vuetify/components')['VBadge']
+    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
     VAppBar: typeof import('vuetify/components')['VAppBar']
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
-    VAlert: typeof import('vuetify/components')['VAlert']
-    VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
-    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
-    VBadge: typeof import('vuetify/components')['VBadge']
-    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
-    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
+    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VBtn: typeof import('vuetify/components')['VBtn']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
-    VBtn: typeof import('vuetify/components')['VBtn']
-    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
     VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
+    VChip: typeof import('vuetify/components')['VChip']
+    VChipGroup: typeof import('vuetify/components')['VChipGroup']
+    VCheckbox: typeof import('vuetify/components')['VCheckbox']
+    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
+    VCode: typeof import('vuetify/components')['VCode']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
     VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
-    VChip: typeof import('vuetify/components')['VChip']
-    VCheckbox: typeof import('vuetify/components')['VCheckbox']
-    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
-    VCode: typeof import('vuetify/components')['VCode']
-    VChipGroup: typeof import('vuetify/components')['VChipGroup']
-    VColorPicker: typeof import('vuetify/components')['VColorPicker']
-    VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VDialog: typeof import('vuetify/components')['VDialog']
     VDatePicker: typeof import('vuetify/components')['VDatePicker']
     VDatePickerControls: typeof import('vuetify/components')['VDatePickerControls']
     VDatePickerHeader: typeof import('vuetify/components')['VDatePickerHeader']
@@ -2617,28 +2614,31 @@ declare module 'vue' {
     VDataTableRow: typeof import('vuetify/components')['VDataTableRow']
     VDataTableVirtual: typeof import('vuetify/components')['VDataTableVirtual']
     VDataTableServer: typeof import('vuetify/components')['VDataTableServer']
+    VColorPicker: typeof import('vuetify/components')['VColorPicker']
+    VCombobox: typeof import('vuetify/components')['VCombobox']
     VEmptyState: typeof import('vuetify/components')['VEmptyState']
+    VDialog: typeof import('vuetify/components')['VDialog']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
     VDivider: typeof import('vuetify/components')['VDivider']
-    VFooter: typeof import('vuetify/components')['VFooter']
     VFab: typeof import('vuetify/components')['VFab']
     VFileInput: typeof import('vuetify/components')['VFileInput']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
+    VFooter: typeof import('vuetify/components')['VFooter']
+    VImg: typeof import('vuetify/components')['VImg']
     VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
+    VKbd: typeof import('vuetify/components')['VKbd']
+    VInput: typeof import('vuetify/components')['VInput']
     VIcon: typeof import('vuetify/components')['VIcon']
     VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VKbd: typeof import('vuetify/components')['VKbd']
-    VImg: typeof import('vuetify/components')['VImg']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
-    VInput: typeof import('vuetify/components')['VInput']
     VLabel: typeof import('vuetify/components')['VLabel']
     VMenu: typeof import('vuetify/components')['VMenu']
     VList: typeof import('vuetify/components')['VList']
@@ -2650,43 +2650,43 @@ declare module 'vue' {
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
-    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VMain: typeof import('vuetify/components')['VMain']
-    VOverlay: typeof import('vuetify/components')['VOverlay']
+    VOtpInput: typeof import('vuetify/components')['VOtpInput']
     VMessages: typeof import('vuetify/components')['VMessages']
-    VNumberInput: typeof import('vuetify/components')['VNumberInput']
+    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VPagination: typeof import('vuetify/components')['VPagination']
+    VOverlay: typeof import('vuetify/components')['VOverlay']
+    VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
+    VNumberInput: typeof import('vuetify/components')['VNumberInput']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
-    VOtpInput: typeof import('vuetify/components')['VOtpInput']
+    VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
-    VSelect: typeof import('vuetify/components')['VSelect']
-    VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VRating: typeof import('vuetify/components')['VRating']
-    VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
-    VSheet: typeof import('vuetify/components')['VSheet']
-    VSlider: typeof import('vuetify/components')['VSlider']
+    VSelect: typeof import('vuetify/components')['VSelect']
     VSkeletonLoader: typeof import('vuetify/components')['VSkeletonLoader']
+    VSheet: typeof import('vuetify/components')['VSheet']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
+    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
+    VSlider: typeof import('vuetify/components')['VSlider']
     VStepper: typeof import('vuetify/components')['VStepper']
     VStepperActions: typeof import('vuetify/components')['VStepperActions']
     VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
     VStepperItem: typeof import('vuetify/components')['VStepperItem']
     VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
     VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
-    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
-    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VTab: typeof import('vuetify/components')['VTab']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTabsWindow: typeof import('vuetify/components')['VTabsWindow']
     VTabsWindowItem: typeof import('vuetify/components')['VTabsWindowItem']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
-    VTimeline: typeof import('vuetify/components')['VTimeline']
-    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VSwitch: typeof import('vuetify/components')['VSwitch']
     VTable: typeof import('vuetify/components')['VTable']
     VTextField: typeof import('vuetify/components')['VTextField']
+    VTextarea: typeof import('vuetify/components')['VTextarea']
+    VTimeline: typeof import('vuetify/components')['VTimeline']
+    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VTooltip: typeof import('vuetify/components')['VTooltip']
     VToolbar: typeof import('vuetify/components')['VToolbar']
     VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
@@ -2701,10 +2701,10 @@ declare module 'vue' {
     VCol: typeof import('vuetify/components')['VCol']
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VLayout: typeof import('vuetify/components')['VLayout']
-    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
     VHover: typeof import('vuetify/components')['VHover']
     VLazy: typeof import('vuetify/components')['VLazy']
+    VLayout: typeof import('vuetify/components')['VLayout']
+    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
     VParallax: typeof import('vuetify/components')['VParallax']
@@ -2712,8 +2712,8 @@ declare module 'vue' {
     VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VSnackbarQueue: typeof import('vuetify/components')['VSnackbarQueue']
-    VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VSparkline: typeof import('vuetify/components')['VSparkline']
+    VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VValidation: typeof import('vuetify/components')['VValidation']
     VVirtualScroll: typeof import('vuetify/components')['VVirtualScroll']
@@ -2733,25 +2733,25 @@ declare module 'vue' {
     VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
     VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
     VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
+    VTimePicker: typeof import('vuetify/labs/components')['VTimePicker']
+    VTimePickerClock: typeof import('vuetify/labs/components')['VTimePickerClock']
+    VTimePickerControls: typeof import('vuetify/labs/components')['VTimePickerControls']
+    VPicker: typeof import('vuetify/labs/components')['VPicker']
+    VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
     VCalendar: typeof import('vuetify/labs/components')['VCalendar']
     VCalendarDay: typeof import('vuetify/labs/components')['VCalendarDay']
     VCalendarHeader: typeof import('vuetify/labs/components')['VCalendarHeader']
     VCalendarInterval: typeof import('vuetify/labs/components')['VCalendarInterval']
     VCalendarIntervalEvent: typeof import('vuetify/labs/components')['VCalendarIntervalEvent']
     VCalendarMonthDay: typeof import('vuetify/labs/components')['VCalendarMonthDay']
-    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
-    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
-    VPicker: typeof import('vuetify/labs/components')['VPicker']
-    VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
-    VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
-    VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
-    VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
-    VTimePicker: typeof import('vuetify/labs/components')['VTimePicker']
-    VTimePickerClock: typeof import('vuetify/labs/components')['VTimePickerClock']
-    VTimePickerControls: typeof import('vuetify/labs/components')['VTimePickerControls']
     VTreeview: typeof import('vuetify/labs/components')['VTreeview']
     VTreeviewItem: typeof import('vuetify/labs/components')['VTreeviewItem']
     VTreeviewGroup: typeof import('vuetify/labs/components')['VTreeviewGroup']
+    VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
+    VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
+    VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
+    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
+    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
     VDateInput: typeof import('vuetify/labs/components')['VDateInput']
     VPullToRefresh: typeof import('vuetify/labs/components')['VPullToRefresh']
   }

package/lib/framework.js

@@ -109,7 +109,7 @@ export function createVuetify() {
     };
   });
 }
-export const version = "3.8.0-beta.0-dev.2025-03-24";
+export const version = "3.8.0-beta.0-dev.2025-03-26";
 createVuetify.version = version;
 
 // Vue's inject() can only be used in setup

package/lib/labs/VDateInput/VDateInput.d.ts

@@ -112,6 +112,9 @@ export declare const makeVDateInputProps: <Defaults extends {
     cancelText?: unknown;
     okText?: unknown;
     hideActions?: unknown;
+    mobile?: unknown;
+    mobileBreakpoint?: unknown;
+    displayFormat?: unknown;
     location?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     max: unknown extends Defaults["max"] ? PropType<unknown> : {
@@ -754,10 +757,34 @@ export declare const makeVDateInputProps: <Defaults extends {
         type: PropType<unknown extends Defaults["okText"] ? string : string | Defaults["okText"]>;
         default: unknown extends Defaults["okText"] ? string : string | Defaults["okText"];
     };
-    hideActions: unknown extends Defaults["hideActions"] ? BooleanConstructor : {
+    hideActions: unknown extends Defaults["hideActions"] ? {
+        type: PropType<boolean>;
+        default: boolean;
+    } : Omit<{
+        type: PropType<boolean>;
+        default: boolean;
+    }, "type" | "default"> & {
         type: PropType<unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"]>;
         default: unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"];
     };
+    mobile: unknown extends Defaults["mobile"] ? {
+        type: PropType<boolean | null>;
+        default: boolean;
+    } : Omit<{
+        type: PropType<boolean | null>;
+        default: boolean;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
+        default: unknown extends Defaults["mobile"] ? boolean | null : NonNullable<boolean | null> | Defaults["mobile"];
+    };
+    mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../composables/display.js").DisplayBreakpoint> : {
+        type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../composables/display.js").DisplayBreakpoint : number | import("../../composables/display.js").DisplayBreakpoint | Defaults["mobileBreakpoint"]>;
+        default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../composables/display.js").DisplayBreakpoint : NonNullable<number | import("../../composables/display.js").DisplayBreakpoint> | Defaults["mobileBreakpoint"];
+    };
+    displayFormat: unknown extends Defaults["displayFormat"] ? (FunctionConstructor | StringConstructor)[] : {
+        type: PropType<unknown extends Defaults["displayFormat"] ? string | Function : string | Function | Defaults["displayFormat"]>;
+        default: unknown extends Defaults["displayFormat"] ? string | Function : NonNullable<string | Function> | Defaults["displayFormat"];
+    };
     location: unknown extends Defaults["location"] ? {
         type: PropType<StrategyProps["location"]>;
         default: string;
@@ -784,6 +811,7 @@ export declare const VDateInput: {
         style: import("vue").StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
@@ -848,6 +876,7 @@ export declare const VDateInput: {
         theme?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
+        mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         modelValue?: any;
         validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
@@ -874,6 +903,7 @@ export declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        displayFormat?: string | Function | undefined;
     } & {
         $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
             message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -932,8 +962,12 @@ export declare const VDateInput: {
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => import("vue").VNodeChild) | undefined;
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     } & {
+        onCancel?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
     }, any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        save: (value: string) => true;
+        cancel: () => true;
         'update:modelValue': (val: string) => true;
     }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
         flat: boolean;
@@ -949,6 +983,7 @@ export declare const VDateInput: {
         style: import("vue").StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
@@ -1028,6 +1063,7 @@ export declare const VDateInput: {
         style: import("vue").StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
@@ -1092,6 +1128,7 @@ export declare const VDateInput: {
         theme?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
+        mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         modelValue?: any;
         validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
@@ -1118,6 +1155,7 @@ export declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        displayFormat?: string | Function | undefined;
     } & {
         $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
             message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -1176,7 +1214,9 @@ export declare const VDateInput: {
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => import("vue").VNodeChild) | undefined;
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
     } & {
+        onCancel?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
     }, any, {}, {}, {}, {
         flat: boolean;
         reverse: boolean;
@@ -1191,6 +1231,7 @@ export declare const VDateInput: {
         style: import("vue").StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
@@ -1249,6 +1290,7 @@ export declare const VDateInput: {
     style: import("vue").StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string | import("../../util/index.js").JSXComponent;
@@ -1313,6 +1355,7 @@ export declare const VDateInput: {
     theme?: string | undefined;
     elevation?: string | number | undefined;
     counter?: string | number | boolean | undefined;
+    mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
     'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     modelValue?: any;
     validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
@@ -1339,6 +1382,7 @@ export declare const VDateInput: {
     modelModifiers?: Record<string, boolean> | undefined;
     firstDayOfWeek?: string | number | undefined;
     allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+    displayFormat?: string | Function | undefined;
 } & {
     $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
         message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -1397,8 +1441,12 @@ export declare const VDateInput: {
     "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => import("vue").VNodeChild) | undefined;
     "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
 } & {
+    onCancel?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+    onSave?: ((value: string) => any) | undefined;
 }, any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: (value: string) => true;
+    cancel: () => true;
     'update:modelValue': (val: string) => true;
 }, string, {
     flat: boolean;
@@ -1414,6 +1462,7 @@ export declare const VDateInput: {
     style: import("vue").StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string | import("../../util/index.js").JSXComponent;
@@ -1693,7 +1742,16 @@ export declare const VDateInput: {
         type: StringConstructor;
         default: string;
     };
-    hideActions: BooleanConstructor;
+    hideActions: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | import("../../composables/display.js").DisplayBreakpoint>;
+    displayFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps["location"]>;
         default: string;
@@ -1919,7 +1977,16 @@ export declare const VDateInput: {
         type: StringConstructor;
         default: string;
     };
-    hideActions: BooleanConstructor;
+    hideActions: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | import("../../composables/display.js").DisplayBreakpoint>;
+    displayFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps["location"]>;
         default: string;

package/lib/labs/VDateInput/VDateInput.js

@@ -5,20 +5,25 @@ import { makeVDatePickerProps, VDatePicker } from "../../components/VDatePicker/
 import { VMenu } from "../../components/VMenu/VMenu.js";
 import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTextField.js"; // Composables
 import { useDate } from "../../composables/date/index.js";
+import { makeDisplayProps, useDisplay } from "../../composables/display.js";
 import { makeFocusProps, useFocus } from "../../composables/focus.js";
 import { forwardRefs } from "../../composables/forwardRefs.js";
 import { useLocale } from "../../composables/locale.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
-import { computed, ref, shallowRef } from 'vue';
+import { computed, ref, shallowRef, watch } from 'vue';
 import { genericComponent, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
 // Types
 export const makeVDateInputProps = propsFactory({
+  displayFormat: [Function, String],
   location: {
     type: String,
     default: 'bottom start'
   },
+  ...makeDisplayProps(),
   ...makeFocusProps(),
-  ...makeVConfirmEditProps(),
+  ...makeVConfirmEditProps({
+    hideActions: true
+  }),
   ...makeVTextFieldProps({
     placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar'
@@ -32,16 +37,22 @@ export const VDateInput = genericComponent()({
   name: 'VDateInput',
   props: makeVDateInputProps(),
   emits: {
+    save: value => true,
+    cancel: () => true,
     'update:modelValue': val => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const {
       t
     } = useLocale();
     const adapter = useDate();
+    const {
+      mobile
+    } = useDisplay();
     const {
       isFocused,
       focus,
@@ -49,7 +60,14 @@ export const VDateInput = genericComponent()({
     } = useFocus(props);
     const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null, val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
     const menu = shallowRef(false);
+    const isEditingInput = shallowRef(false);
     const vDateInputRef = ref();
+    function format(date) {
+      if (typeof props.displayFormat === 'function') {
+        return props.displayFormat(date);
+      }
+      return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+    }
     const display = computed(() => {
       const value = wrapInArray(model.value);
       if (!value.length) return null;
@@ -59,11 +77,22 @@ export const VDateInput = genericComponent()({
       if (props.multiple === 'range') {
         const start = value[0];
         const end = value[value.length - 1];
-        return adapter.isValid(start) && adapter.isValid(end) ? `${adapter.format(adapter.date(start), 'keyboardDate')} - ${adapter.format(adapter.date(end), 'keyboardDate')}` : '';
+        if (!adapter.isValid(start) || !adapter.isValid(end)) return '';
+        return `${format(adapter.date(start))} - ${format(adapter.date(end))}`;
       }
-      return adapter.isValid(model.value) ? adapter.format(adapter.date(model.value), 'keyboardDate') : '';
+      return adapter.isValid(model.value) ? format(adapter.date(model.value)) : '';
+    });
+    const inputmode = computed(() => {
+      if (!mobile.value) return undefined;
+      if (isEditingInput.value) return 'text';
+      return 'none';
     });
     const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const isReadonly = computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+    watch(menu, val => {
+      if (val) return;
+      isEditingInput.value = false;
+    });
     function onKeydown(e) {
       if (e.key !== 'Enter') return;
       if (!menu.value || !isFocused.value) {
@@ -76,15 +105,38 @@ export const VDateInput = genericComponent()({
     function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
-      menu.value = true;
+      if (menu.value && mobile.value) {
+        isEditingInput.value = true;
+      } else {
+        menu.value = true;
+      }
     }
-    function onSave() {
+    function onCancel() {
+      emit('cancel');
       menu.value = false;
+      isEditingInput.value = false;
     }
-    function onUpdateModel(value) {
+    function onSave(value) {
+      emit('save', value);
+      menu.value = false;
+    }
+    function onUpdateDisplayModel(value) {
       if (value != null) return;
       model.value = null;
     }
+    function onUpdateMenuModel(isMenuOpen) {
+      if (isMenuOpen) return;
+      isEditingInput.value = false;
+    }
+    function onBlur() {
+      blur();
+
+      // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
+      if (mobile.value && isEditingInput.value && !isFocused.value) {
+        menu.value = false;
+        isEditingInput.value = false;
+      }
+    }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
@@ -95,18 +147,20 @@ export const VDateInput = genericComponent()({
         "class": props.class,
         "style": props.style,
         "modelValue": display.value,
+        "inputmode": inputmode.value,
+        "readonly": isReadonly.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
         "onFocus": focus,
-        "onBlur": blur,
+        "onBlur": onBlur,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prepend": isInteractive.value ? onClick : undefined,
-        "onUpdate:modelValue": onUpdateModel
+        "onUpdate:modelValue": onUpdateDisplayModel
       }), {
         ...slots,
         default: () => _createVNode(_Fragment, null, [_createVNode(VMenu, {
           "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
+          "onUpdate:modelValue": [$event => menu.value = $event, onUpdateMenuModel],
           "activator": "parent",
           "min-width": "0",
           "eager": isFocused.value,
@@ -118,7 +172,7 @@ export const VDateInput = genericComponent()({
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "onSave": onSave,
-            "onCancel": () => menu.value = false
+            "onCancel": onCancel
           }), {
             default: _ref2 => {
               let {
@@ -128,16 +182,21 @@ export const VDateInput = genericComponent()({
                 cancel,
                 isPristine
               } = _ref2;
+              function onUpdateModel(value) {
+                if (!props.hideActions) {
+                  proxyModel.value = value;
+                } else {
+                  model.value = value;
+                  if (!props.multiple) {
+                    menu.value = false;
+                  }
+                }
+                emit('save', value);
+                vDateInputRef.value?.blur();
+              }
               return _createVNode(VDatePicker, _mergeProps(datePickerProps, {
                 "modelValue": props.hideActions ? model.value : proxyModel.value,
-                "onUpdate:modelValue": val => {
-                  if (!props.hideActions) {
-                    proxyModel.value = val;
-                  } else {
-                    model.value = val;
-                    if (!props.multiple) menu.value = false;
-                  }
-                },
+                "onUpdate:modelValue": value => onUpdateModel(value),
                 "onMousedown": e => e.preventDefault()
               }), {
                 actions: !props.hideActions ? () => slots.actions?.({