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

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-beta.0-dev.2025-03-24
+* Vuetify v3.8.0-beta.0-dev.2025-03-26
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -233,7 +233,7 @@
   function pick(obj, paths) {
     const found = {};
     for (const key of paths) {
-      if (Object.hasOwn(obj, key)) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
         found[key] = obj[key];
       }
     }
@@ -4686,7 +4686,7 @@
       const slotIcon = vue.ref();
       const {
         themeClasses
-      } = provideTheme(props);
+      } = useTheme();
       const {
         iconData
       } = useIcon(vue.computed(() => slotIcon.value || props.icon));
@@ -20571,22 +20571,37 @@
           "width": !mobile.value ? column.width : undefined
         }, cellProps, columnCellProps), {
           default: () => {
-            if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
             if (column.key === 'data-table-select') {
-              return slots['item.data-table-select']?.(slotProps) ?? vue.createVNode(VCheckboxBtn, {
+              return slots['item.data-table-select']?.({
+                ...slotProps,
+                props: {
+                  disabled: !item.selectable,
+                  modelValue: isSelected([item]),
+                  onClick: vue.withModifiers(() => toggleSelect(item), ['stop'])
+                }
+              }) ?? vue.createVNode(VCheckboxBtn, {
                 "disabled": !item.selectable,
                 "modelValue": isSelected([item]),
                 "onClick": vue.withModifiers(event => toggleSelect(item, props.index, event), ['stop'])
               }, null);
             }
             if (column.key === 'data-table-expand') {
-              return slots['item.data-table-expand']?.(slotProps) ?? vue.createVNode(VBtn, {
+              return slots['item.data-table-expand']?.({
+                ...slotProps,
+                props: {
+                  icon: isExpanded(item) ? '$collapse' : '$expand',
+                  size: 'small',
+                  variant: 'text',
+                  onClick: vue.withModifiers(() => toggleExpand(item), ['stop'])
+                }
+              }) ?? vue.createVNode(VBtn, {
                 "icon": isExpanded(item) ? '$collapse' : '$expand',
                 "size": "small",
                 "variant": "text",
                 "onClick": vue.withModifiers(() => toggleExpand(item), ['stop'])
               }, null);
             }
+            if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
             const displayValue = vue.toDisplayString(slotProps.value);
             return !mobile.value ? displayValue : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
               "class": "v-data-table__td-title"
@@ -21929,7 +21944,7 @@
   }, 'calendar');
   function useCalendar(props) {
     const adapter = useDate();
-    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v));
+    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v).map(i => adapter.date(i)));
     const displayValue = vue.computed(() => {
       if (props.displayValue) return adapter.date(props.displayValue);
       if (model.value.length > 0) return adapter.date(model.value[0]);
@@ -22442,7 +22457,7 @@
       const {
         rtlClasses
       } = useRtl();
-      const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v), v => props.multiple ? v : v[0]);
+      const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v).map(i => adapter.date(i)), v => props.multiple ? v : v[0]);
       const viewMode = useProxiedModel(props, 'viewMode');
       // const inputMode = useProxiedModel(props, 'inputMode')
 
@@ -28920,12 +28935,16 @@
   // Types
 
   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'
@@ -28939,16 +28958,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,
@@ -28956,7 +28981,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;
@@ -28966,11 +28998,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) {
@@ -28983,15 +29026,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']));
@@ -29002,18 +29068,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,
@@ -29025,7 +29093,7 @@
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event,
               "onSave": onSave,
-              "onCancel": () => menu.value = false
+              "onCancel": onCancel
             }), {
               default: _ref2 => {
                 let {
@@ -29035,16 +29103,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?.({
@@ -31276,7 +31349,7 @@
       };
     });
   }
-  const version$1 = "3.8.0-beta.0-dev.2025-03-24";
+  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
@@ -31561,7 +31634,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.0-beta.0-dev.2025-03-24";
+  const version = "3.8.0-beta.0-dev.2025-03-26";
 
   /* eslint-disable local-rules/sort-imports */