@vuetify/nightly 3.7.18-master.2025-03-24 → 3.7.18-master.2025-03-25

package/dist/vuetify-labs.d.ts

@@ -68762,6 +68762,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string;
@@ -68824,6 +68825,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;
@@ -68847,6 +68849,7 @@ declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        displayFormat?: string | Function | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
@@ -68905,8 +68908,12 @@ declare const VDateInput: {
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
+        onCancel?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
     }, any, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        save: (value: string) => true;
+        cancel: () => true;
         'update:modelValue': (val: string) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
@@ -68922,6 +68929,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string;
@@ -68984,6 +68992,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;
@@ -69007,6 +69016,7 @@ declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        displayFormat?: string | Function | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
@@ -69065,7 +69075,9 @@ declare const VDateInput: {
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
+        onCancel?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
     }, {
         flat: boolean;
         reverse: boolean;
@@ -69080,6 +69092,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string;
@@ -69157,6 +69170,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string;
@@ -69219,6 +69233,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;
@@ -69242,6 +69257,7 @@ declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        displayFormat?: string | Function | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
@@ -69300,7 +69316,9 @@ declare const VDateInput: {
         "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
+        onCancel?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
     }, any, {}, {}, {}, {
         flat: boolean;
         reverse: boolean;
@@ -69315,6 +69333,7 @@ declare const VDateInput: {
         style: vue.StyleValue;
         title: string;
         autofocus: boolean;
+        mobile: boolean | null;
         disabled: boolean;
         readonly: boolean | null;
         tag: string;
@@ -69371,6 +69390,7 @@ declare const VDateInput: {
     style: vue.StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string;
@@ -69433,6 +69453,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;
@@ -69456,6 +69477,7 @@ declare const VDateInput: {
     modelModifiers?: Record<string, boolean> | undefined;
     firstDayOfWeek?: string | number | undefined;
     allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+    displayFormat?: string | Function | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         message?: ((arg: VMessageSlot) => vue.VNodeChild) | undefined;
@@ -69514,8 +69536,12 @@ declare const VDateInput: {
     "v-slot:actions"?: false | ((arg: VDateInputActionsSlot) => vue.VNodeChild) | undefined;
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 } & {
+    onCancel?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+    onSave?: ((value: string) => any) | undefined;
 }, any, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    save: (value: string) => true;
+    cancel: () => true;
     'update:modelValue': (val: string) => true;
 }, string, {
     flat: boolean;
@@ -69531,6 +69557,7 @@ declare const VDateInput: {
     style: vue.StyleValue;
     title: string;
     autofocus: boolean;
+    mobile: boolean | null;
     disabled: boolean;
     readonly: boolean | null;
     tag: string;
@@ -69803,6 +69830,12 @@ declare const VDateInput: {
         type: StringConstructor;
         default: string;
     };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
+    displayFormat: (FunctionConstructor | StringConstructor)[];
     hideActions: BooleanConstructor;
     location: {
         type: PropType<StrategyProps["location"]>;
@@ -70024,6 +70057,12 @@ declare const VDateInput: {
         type: StringConstructor;
         default: string;
     };
+    mobile: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mobileBreakpoint: PropType<number | DisplayBreakpoint>;
+    displayFormat: (FunctionConstructor | StringConstructor)[];
     hideActions: BooleanConstructor;
     location: {
         type: PropType<StrategyProps["location"]>;

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.18-master.2025-03-24
+* Vuetify v3.7.18-master.2025-03-25
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -28252,11 +28252,13 @@ const VCalendar = genericComponent()({
 // Types
 
 const makeVDateInputProps = propsFactory({
+  displayFormat: [Function, String],
   hideActions: Boolean,
   location: {
     type: String,
     default: 'bottom start'
   },
+  ...makeDisplayProps(),
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps({
@@ -28272,16 +28274,22 @@ 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,
@@ -28289,7 +28297,14 @@ 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;
@@ -28299,11 +28314,22 @@ 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) {
@@ -28316,15 +28342,38 @@ 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() {
+    function onSave(value) {
+      emit('save', value);
       menu.value = false;
     }
-    function onUpdateModel(value) {
+    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']));
@@ -28335,18 +28384,20 @@ 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,
@@ -28358,7 +28409,7 @@ const VDateInput = genericComponent()({
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "onSave": onSave,
-            "onCancel": () => menu.value = false
+            "onCancel": onCancel
           }), {
             default: _ref2 => {
               let {
@@ -28368,16 +28419,21 @@ 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?.({
@@ -31095,7 +31151,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.18-master.2025-03-24";
+const version$1 = "3.7.18-master.2025-03-25";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31348,7 +31404,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.18-master.2025-03-24";
+const version = "3.7.18-master.2025-03-25";
 
 /* eslint-disable local-rules/sort-imports */