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

package/dist/vuetify-labs.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.
 */
@@ -28256,11 +28256,13 @@
   // Types
 
   const makeVDateInputProps = propsFactory({
+    displayFormat: [Function, String],
     hideActions: Boolean,
     location: {
       type: String,
       default: 'bottom start'
     },
+    ...makeDisplayProps(),
     ...makeFocusProps(),
     ...makeVConfirmEditProps(),
     ...makeVTextFieldProps({
@@ -28276,16 +28278,22 @@
     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,
@@ -28293,7 +28301,14 @@
       } = 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 = vue.shallowRef(false);
+      const isEditingInput = vue.shallowRef(false);
       const vDateInputRef = vue.ref();
+      function format(date) {
+        if (typeof props.displayFormat === 'function') {
+          return props.displayFormat(date);
+        }
+        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+      }
       const display = vue.computed(() => {
         const value = wrapInArray(model.value);
         if (!value.length) return null;
@@ -28303,11 +28318,22 @@
         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 = vue.computed(() => {
+        if (!mobile.value) return undefined;
+        if (isEditingInput.value) return 'text';
+        return 'none';
       });
       const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const isReadonly = vue.computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+      vue.watch(menu, val => {
+        if (val) return;
+        isEditingInput.value = false;
+      });
       function onKeydown(e) {
         if (e.key !== 'Enter') return;
         if (!menu.value || !isFocused.value) {
@@ -28320,15 +28346,38 @@
       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']));
@@ -28339,18 +28388,20 @@
           "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: () => vue.createVNode(vue.Fragment, null, [vue.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,
@@ -28362,7 +28413,7 @@
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event,
               "onSave": onSave,
-              "onCancel": () => menu.value = false
+              "onCancel": onCancel
             }), {
               default: _ref2 => {
                 let {
@@ -28372,16 +28423,21 @@
                   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 vue.createVNode(VDatePicker, vue.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?.({
@@ -31099,7 +31155,7 @@
       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
@@ -31352,7 +31408,7 @@
 
   /* 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 */