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

package/dist/vuetify-labs.d.ts

@@ -66775,6 +66775,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | JSXComponent;
@@ -66839,6 +66840,7 @@ declare const VDateInput: {
         theme?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
+        mobileBreakpoint?: number | 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;
@@ -66945,6 +66947,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | JSXComponent;
@@ -67024,6 +67027,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | JSXComponent;
@@ -67088,6 +67092,7 @@ declare const VDateInput: {
         theme?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
+        mobileBreakpoint?: number | 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;
@@ -67190,6 +67195,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string | JSXComponent;
@@ -67248,6 +67254,7 @@ declare const VDateInput: {
     style: vue.StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string | JSXComponent;
@@ -67312,6 +67319,7 @@ declare const VDateInput: {
     theme?: string | undefined;
     elevation?: string | number | undefined;
     counter?: string | number | boolean | undefined;
+    mobileBreakpoint?: number | 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;
@@ -67418,6 +67426,7 @@ declare const VDateInput: {
     style: vue.StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string | JSXComponent;
@@ -67701,6 +67710,11 @@ declare const VDateInput: {
         type: PropType<boolean>;
         default: boolean;
     };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     displayFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps$1["location"]>;
@@ -67931,6 +67945,11 @@ declare const VDateInput: {
         type: PropType<boolean>;
         default: boolean;
     };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     displayFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps$1["location"]>;
@@ -73052,28 +73071,30 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
+    VApp: VApp
     VAlert: VAlert
     VAlertTitle: VAlertTitle
-    VAppBar: VAppBar
-    VAppBarNavIcon: VAppBarNavIcon
-    VAppBarTitle: VAppBarTitle
     VAutocomplete: VAutocomplete
-    VApp: VApp
     VAvatar: VAvatar
-    VBottomSheet: VBottomSheet
-    VBottomNavigation: VBottomNavigation
     VBadge: VBadge
-    VBtnGroup: VBtnGroup
+    VBottomNavigation: VBottomNavigation
+    VAppBar: VAppBar
+    VAppBarNavIcon: VAppBarNavIcon
+    VAppBarTitle: VAppBarTitle
     VBanner: VBanner
     VBannerActions: VBannerActions
     VBannerText: VBannerText
-    VBtn: VBtn
-    VCarousel: VCarousel
-    VCarouselItem: VCarouselItem
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
     VBtnToggle: VBtnToggle
+    VBtn: VBtn
+    VCarousel: VCarousel
+    VCarouselItem: VCarouselItem
+    VBottomSheet: VBottomSheet
+    VBtnGroup: VBtnGroup
+    VChip: VChip
+    VChipGroup: VChipGroup
     VCheckbox: VCheckbox
     VCheckboxBtn: VCheckboxBtn
     VCode: VCode
@@ -73083,47 +73104,47 @@ declare module 'vue' {
     VCardSubtitle: VCardSubtitle
     VCardText: VCardText
     VCardTitle: VCardTitle
-    VDialog: VDialog
-    VChipGroup: VChipGroup
-    VCombobox: VCombobox
-    VChip: VChip
-    VColorPicker: VColorPicker
-    VDivider: VDivider
+    VCounter: VCounter
     VDatePicker: VDatePicker
     VDatePickerControls: VDatePickerControls
     VDatePickerHeader: VDatePickerHeader
     VDatePickerMonth: VDatePickerMonth
     VDatePickerMonths: VDatePickerMonths
     VDatePickerYears: VDatePickerYears
+    VDataTable: VDataTable
+    VDataTableHeaders: VDataTableHeaders
+    VDataTableFooter: VDataTableFooter
+    VDataTableRows: VDataTableRows
+    VDataTableRow: VDataTableRow
+    VDataTableVirtual: VDataTableVirtual
+    VDataTableServer: VDataTableServer
+    VColorPicker: VColorPicker
+    VCombobox: VCombobox
     VEmptyState: VEmptyState
-    VCounter: VCounter
-    VFab: VFab
-    VFooter: VFooter
+    VDialog: VDialog
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
+    VDivider: VDivider
+    VFab: VFab
+    VFileInput: VFileInput
+    VField: VField
+    VFieldLabel: VFieldLabel
+    VFooter: VFooter
+    VImg: VImg
+    VInfiniteScroll: VInfiniteScroll
+    VKbd: VKbd
+    VInput: VInput
     VIcon: VIcon
     VComponentIcon: VComponentIcon
     VSvgIcon: VSvgIcon
     VLigatureIcon: VLigatureIcon
     VClassIcon: VClassIcon
-    VField: VField
-    VFieldLabel: VFieldLabel
-    VFileInput: VFileInput
-    VImg: VImg
-    VInput: VInput
-    VInfiniteScroll: VInfiniteScroll
     VItemGroup: VItemGroup
     VItem: VItem
-    VDataTable: VDataTable
-    VDataTableHeaders: VDataTableHeaders
-    VDataTableFooter: VDataTableFooter
-    VDataTableRows: VDataTableRows
-    VDataTableRow: VDataTableRow
-    VDataTableVirtual: VDataTableVirtual
-    VDataTableServer: VDataTableServer
-    VKbd: VKbd
+    VLabel: VLabel
+    VMenu: VMenu
     VList: VList
     VListGroup: VListGroup
     VListImg: VListImg
@@ -73133,25 +73154,25 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
-    VLabel: VLabel
-    VMenu: VMenu
-    VNumberInput: VNumberInput
-    VMessages: VMessages
-    VNavigationDrawer: VNavigationDrawer
     VMain: VMain
     VOtpInput: VOtpInput
+    VMessages: VMessages
+    VNavigationDrawer: VNavigationDrawer
+    VPagination: VPagination
     VOverlay: VOverlay
     VProgressCircular: VProgressCircular
+    VNumberInput: VNumberInput
     VRadioGroup: VRadioGroup
+    VSelectionControl: VSelectionControl
     VProgressLinear: VProgressLinear
-    VPagination: VPagination
     VRating: VRating
+    VSelectionControlGroup: VSelectionControlGroup
     VSelect: VSelect
-    VSelectionControl: VSelectionControl
     VSkeletonLoader: VSkeletonLoader
-    VSelectionControlGroup: VSelectionControlGroup
     VSheet: VSheet
     VSnackbar: VSnackbar
+    VSlideGroup: VSlideGroup
+    VSlideGroupItem: VSlideGroupItem
     VSlider: VSlider
     VStepper: VStepper
     VStepperActions: VStepperActions
@@ -73159,15 +73180,13 @@ declare module 'vue' {
     VStepperItem: VStepperItem
     VStepperWindow: VStepperWindow
     VStepperWindowItem: VStepperWindowItem
-    VSlideGroup: VSlideGroup
-    VSlideGroupItem: VSlideGroupItem
-    VSystemBar: VSystemBar
-    VSwitch: VSwitch
-    VTable: VTable
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
+    VSystemBar: VSystemBar
+    VSwitch: VSwitch
+    VTable: VTable
     VTextField: VTextField
     VTextarea: VTextarea
     VTimeline: VTimeline
@@ -73187,17 +73206,17 @@ declare module 'vue' {
     VRow: VRow
     VSpacer: VSpacer
     VHover: VHover
+    VLazy: VLazy
     VLayout: VLayout
     VLayoutItem: VLayoutItem
-    VLazy: VLazy
     VLocaleProvider: VLocaleProvider
     VNoSsr: VNoSsr
-    VRadio: VRadio
     VParallax: VParallax
+    VRadio: VRadio
+    VRangeSlider: VRangeSlider
     VResponsive: VResponsive
     VSnackbarQueue: VSnackbarQueue
     VSparkline: VSparkline
-    VRangeSlider: VRangeSlider
     VSpeedDial: VSpeedDial
     VThemeProvider: VThemeProvider
     VValidation: VValidation
@@ -73218,25 +73237,25 @@ declare module 'vue' {
     VExpandTransition: VExpandTransition
     VExpandXTransition: VExpandXTransition
     VDialogTransition: VDialogTransition
+    VTimePicker: VTimePicker
+    VTimePickerClock: VTimePickerClock
+    VTimePickerControls: VTimePickerControls
+    VPicker: VPicker
+    VPickerTitle: VPickerTitle
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
     VCalendarInterval: VCalendarInterval
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
-    VPicker: VPicker
-    VPickerTitle: VPickerTitle
+    VTreeview: VTreeview
+    VTreeviewItem: VTreeviewItem
+    VTreeviewGroup: VTreeviewGroup
     VStepperVertical: VStepperVertical
     VStepperVerticalItem: VStepperVerticalItem
     VStepperVerticalActions: VStepperVerticalActions
-    VTimePicker: VTimePicker
-    VTimePickerClock: VTimePickerClock
-    VTimePickerControls: VTimePickerControls
     VFileUpload: VFileUpload
     VFileUploadItem: VFileUploadItem
-    VTreeview: VTreeview
-    VTreeviewItem: VTreeviewItem
-    VTreeviewGroup: VTreeviewGroup
     VDateInput: VDateInput
     VPullToRefresh: VPullToRefresh
   }

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-beta.0-dev.2025-03-25
+* Vuetify v3.8.0-beta.0-dev.2025-03-26
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -28936,6 +28936,7 @@ const makeVDateInputProps = propsFactory({
     type: String,
     default: 'bottom start'
   },
+  ...makeDisplayProps(),
   ...makeFocusProps(),
   ...makeVConfirmEditProps({
     hideActions: true
@@ -28966,6 +28967,9 @@ const VDateInput = genericComponent()({
       t
     } = useLocale();
     const adapter = useDate();
+    const {
+      mobile
+    } = useDisplay();
     const {
       isFocused,
       focus,
@@ -28973,6 +28977,7 @@ 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') {
@@ -28994,7 +28999,17 @@ const VDateInput = genericComponent()({
       }
       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) {
@@ -29007,11 +29022,16 @@ 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 onCancel() {
       emit('cancel');
       menu.value = false;
+      isEditingInput.value = false;
     }
     function onSave(value) {
       emit('save', value);
@@ -29021,6 +29041,19 @@ const VDateInput = genericComponent()({
       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']));
@@ -29031,10 +29064,12 @@ 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": onUpdateDisplayModel
@@ -29042,7 +29077,7 @@ const VDateInput = genericComponent()({
         ...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,
@@ -31310,7 +31345,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.0-beta.0-dev.2025-03-25";
+const version$1 = "3.8.0-beta.0-dev.2025-03-26";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31595,7 +31630,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.0-beta.0-dev.2025-03-25";
+const version = "3.8.0-beta.0-dev.2025-03-26";
 
 /* eslint-disable local-rules/sort-imports */