@vuetify/nightly 3.8.4-master.2025-05-13 → 3.8.5-master.2025-05-14

package/lib/labs/VColorInput/VColorInput.js

@@ -0,0 +1,129 @@
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+// Styles
+import "./VColorInput.css";
+
+// Components
+import { makeVColorPickerProps, VColorPicker } from "../../components/VColorPicker/VColorPicker.js";
+import { makeVConfirmEditProps, VConfirmEdit } from "../../components/VConfirmEdit/VConfirmEdit.js";
+import { VIcon } from "../../components/VIcon/VIcon.js";
+import { VMenu } from "../../components/VMenu/VMenu.js";
+import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTextField.js"; // Composables
+import { makeFocusProps, useFocus } from "../../composables/focus.js";
+import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
+import { computed, shallowRef } from 'vue';
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
+export const makeVColorInputProps = propsFactory({
+  pip: Boolean,
+  pipIcon: {
+    type: String,
+    default: '$color'
+  },
+  ...makeFocusProps(),
+  ...makeVConfirmEditProps(),
+  ...makeVTextFieldProps(),
+  ...omit(makeVColorPickerProps(), ['width'])
+}, 'VColorInput');
+export const VColorInput = genericComponent()({
+  name: 'VColorInput',
+  props: makeVColorInputProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue');
+    const menu = shallowRef(false);
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const display = computed(() => model.value || null);
+    function onKeydown(e) {
+      if (e.key !== 'Enter') return;
+      if (!menu.value || !isFocused.value) {
+        menu.value = true;
+        return;
+      }
+      const target = e.target;
+      model.value = target.value;
+    }
+    function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.value = true;
+    }
+    function onSave() {
+      menu.value = false;
+    }
+    useRender(() => {
+      const confirmEditProps = VConfirmEdit.filterProps(props);
+      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
+      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      return _createVNode(VTextField, _mergeProps(textFieldProps, {
+        "class": ['v-color-input', props.class],
+        "style": props.style,
+        "modelValue": display.value,
+        "onKeydown": isInteractive.value ? onKeydown : undefined,
+        "focused": menu.value || isFocused.value,
+        "onFocus": focus,
+        "onBlur": blur,
+        "onClick:control": isInteractive.value ? onClick : undefined,
+        "onClick:prependInner": isInteractive.value ? onClick : undefined,
+        "onClick:appendInner": isInteractive.value ? onClick : undefined,
+        "onUpdate:modelValue": val => {
+          model.value = val;
+        }
+      }), {
+        ...slots,
+        prepend: props.pipIcon ? arg => _createVNode(_Fragment, null, [hasPrepend && _createVNode(VIcon, {
+          "color": props.pip ? model.value : undefined,
+          "icon": props.pipIcon
+        }, null), slots.prepend?.(arg)]) : undefined,
+        default: () => _createVNode(_Fragment, null, [_createVNode(VMenu, {
+          "modelValue": menu.value,
+          "onUpdate:modelValue": $event => menu.value = $event,
+          "activator": "parent",
+          "min-width": "0",
+          "closeOnContentClick": false,
+          "openOnClick": false
+        }, {
+          default: () => [_createVNode(VConfirmEdit, _mergeProps(confirmEditProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onSave": onSave
+          }), {
+            default: _ref2 => {
+              let {
+                actions,
+                model: proxyModel,
+                save,
+                cancel,
+                isPristine
+              } = _ref2;
+              return _createVNode(VColorPicker, _mergeProps(colorPickerProps, {
+                "modelValue": proxyModel.value,
+                "onUpdate:modelValue": val => {
+                  proxyModel.value = val;
+                  model.value = val;
+                },
+                "onMousedown": e => e.preventDefault()
+              }), {
+                actions: !props.hideActions ? () => slots.actions?.({
+                  save,
+                  cancel,
+                  isPristine
+                }) ?? actions() : undefined
+              });
+            }
+          })]
+        }), slots.default?.()])
+      });
+    });
+  }
+});
+//# sourceMappingURL=VColorInput.js.map

package/lib/labs/VColorInput/VColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorInput.js","names":["makeVColorPickerProps","VColorPicker","makeVConfirmEditProps","VConfirmEdit","VIcon","VMenu","makeVTextFieldProps","VTextField","makeFocusProps","useFocus","useProxiedModel","computed","shallowRef","genericComponent","omit","propsFactory","useRender","makeVColorInputProps","pip","Boolean","pipIcon","type","String","default","VColorInput","name","props","emits","val","setup","_ref","slots","isFocused","focus","blur","model","menu","isInteractive","disabled","readonly","display","value","onKeydown","e","key","target","onClick","preventDefault","stopPropagation","onSave","confirmEditProps","filterProps","colorPickerProps","textFieldProps","hasPrepend","prepend","_createVNode","_mergeProps","class","style","undefined","arg","_Fragment","$event","_ref2","actions","proxyModel","save","cancel","isPristine","hideActions"],"sources":["../../../src/labs/VColorInput/VColorInput.tsx"],"sourcesContent":["// Styles\nimport './VColorInput.sass'\n\n// Components\nimport { makeVColorPickerProps, VColorPicker } from '@/components/VColorPicker/VColorPicker'\nimport { makeVConfirmEditProps, VConfirmEdit } from '@/components/VConfirmEdit/VConfirmEdit'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { VMenu } from '@/components/VMenu/VMenu'\nimport { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, shallowRef } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VTextFieldSlots } from '@/components/VTextField/VTextField'\n\nexport type VColorInputActionsSlot = {\n  save: () => void\n  cancel: () => void\n  isPristine: boolean\n}\n\nexport type VColorInputSlots = Omit<VTextFieldSlots, 'default'> & {\n  actions: VColorInputActionsSlot\n  default: never\n}\n\nexport const makeVColorInputProps = propsFactory({\n  pip: Boolean,\n  pipIcon: {\n    type: String,\n    default: '$color',\n  },\n\n  ...makeFocusProps(),\n  ...makeVConfirmEditProps(),\n  ...makeVTextFieldProps(),\n  ...omit(makeVColorPickerProps(), ['width']),\n}, 'VColorInput')\n\nexport const VColorInput = genericComponent<VColorInputSlots>()({\n  name: 'VColorInput',\n\n  props: makeVColorInputProps(),\n\n  emits: {\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isFocused, focus, blur } = useFocus(props)\n    const model = useProxiedModel(props, 'modelValue')\n    const menu = shallowRef(false)\n\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    const display = computed(() => model.value || null)\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key !== 'Enter') return\n\n      if (!menu.value || !isFocused.value) {\n        menu.value = true\n\n        return\n      }\n\n      const target = e.target as HTMLInputElement\n\n      model.value = target.value\n    }\n\n    function onClick (e: MouseEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      menu.value = true\n    }\n\n    function onSave () {\n      menu.value = false\n    }\n\n    useRender(() => {\n      const confirmEditProps = VConfirmEdit.filterProps(props)\n      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']))\n      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']))\n\n      const hasPrepend = !!(slots.prepend || props.pipIcon)\n\n      return (\n        <VTextField\n          { ...textFieldProps }\n          class={[\n            'v-color-input',\n            props.class,\n          ]}\n          style={ props.style }\n          modelValue={ display.value }\n          onKeydown={ isInteractive.value ? onKeydown : undefined }\n          focused={ menu.value || isFocused.value }\n          onFocus={ focus }\n          onBlur={ blur }\n          onClick:control={ isInteractive.value ? onClick : undefined }\n          onClick:prependInner={ isInteractive.value ? onClick : undefined }\n          onClick:appendInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:modelValue={ val => {\n            model.value = val\n          }}\n        >\n          {{\n            ...slots,\n            prepend: props.pipIcon ? arg => (\n              <>\n               { hasPrepend && (\n                  <VIcon\n                    color={ props.pip ? model.value as string : undefined }\n                    icon={ props.pipIcon }\n                  />\n               )}\n\n                { slots.prepend?.(arg) }\n              </>\n            ) : undefined,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  min-width=\"0\"\n                  closeOnContentClick={ false }\n                  openOnClick={ false }\n                >\n                  <VConfirmEdit\n                    { ...confirmEditProps }\n                    v-model={ model.value }\n                    onSave={ onSave }\n                  >\n                    {{\n                      default: ({ actions, model: proxyModel, save, cancel, isPristine }) => {\n                        return (\n                          <VColorPicker\n                            { ...colorPickerProps }\n                            modelValue={ proxyModel.value }\n                            onUpdate:modelValue={ val => {\n                              proxyModel.value = val\n                              model.value = val\n                            }}\n                            onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          >\n                            {{\n                              actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,\n                            }}\n                          </VColorPicker>\n                        )\n                      },\n                    }}\n                  </VConfirmEdit>\n                </VMenu>\n\n                { slots.default?.() }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n  },\n})\n\nexport type VColorInput = InstanceType<typeof VColorInput>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VColorInput/VColorInput.sass

@@ -0,0 +1,7 @@
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  /* region INPUT */
+  .v-color-input
+    padding: 0

package/lib/labs/VColorInput/_variables.scss

@@ -0,0 +1,2 @@
+// Defaults
+$color-input-pip-default-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;

package/lib/labs/VColorInput/index.d.ts

@@ -0,0 +1 @@
+export { VColorInput } from './VColorInput.js';

package/lib/labs/VColorInput/index.js

@@ -0,0 +1,2 @@
+export { VColorInput } from "./VColorInput.js";
+//# sourceMappingURL=index.js.map

package/lib/labs/VColorInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VColorInput"],"sources":["../../../src/labs/VColorInput/index.ts"],"sourcesContent":["export { VColorInput } from './VColorInput'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}

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

@@ -114,8 +114,8 @@ export declare const makeVDateInputProps: <Defaults extends {
     hideActions?: unknown;
     mobile?: unknown;
     mobileBreakpoint?: unknown;
-    displayFormat?: unknown;
     inputFormat?: unknown;
+    displayFormat?: unknown;
     location?: unknown;
     menu?: unknown;
     updateOn?: unknown;
@@ -676,13 +676,7 @@ export declare const makeVDateInputProps: <Defaults extends {
         type: PropType<unknown extends Defaults["prefix"] ? string : string | Defaults["prefix"]>;
         default: unknown extends Defaults["prefix"] ? string : string | Defaults["prefix"];
     };
-    placeholder: unknown extends Defaults["placeholder"] ? {
-        type: PropType<string>;
-        default: string;
-    } : Omit<{
-        type: PropType<string>;
-        default: string;
-    }, "type" | "default"> & {
+    placeholder: unknown extends Defaults["placeholder"] ? StringConstructor : {
         type: PropType<unknown extends Defaults["placeholder"] ? string : string | Defaults["placeholder"]>;
         default: unknown extends Defaults["placeholder"] ? string : string | Defaults["placeholder"];
     };
@@ -766,14 +760,20 @@ export declare const makeVDateInputProps: <Defaults extends {
         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"];
     };
+    inputFormat: unknown extends Defaults["inputFormat"] ? {
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+    } : Omit<{
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["inputFormat"] ? string : string | Defaults["inputFormat"]>;
+        default: unknown extends Defaults["inputFormat"] ? string : string | Defaults["inputFormat"];
+    };
     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"];
     };
-    inputFormat: unknown extends Defaults["inputFormat"] ? (FunctionConstructor | StringConstructor)[] : {
-        type: PropType<unknown extends Defaults["inputFormat"] ? string | Function : string | Function | Defaults["inputFormat"]>;
-        default: unknown extends Defaults["inputFormat"] ? string | Function : NonNullable<string | Function> | Defaults["inputFormat"];
-    };
     location: unknown extends Defaults["location"] ? {
         type: PropType<StrategyProps["location"]>;
         default: string;
@@ -820,7 +820,6 @@ export declare const VDateInput: {
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
         landscape: boolean;
-        placeholder: string;
         messages: string | readonly string[];
         rules: readonly import("../../types.js").ValidationRule[];
         focused: boolean;
@@ -879,6 +878,7 @@ export declare const VDateInput: {
         year?: number | undefined;
         class?: any;
         theme?: string | undefined;
+        placeholder?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
         mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
@@ -908,8 +908,8 @@ export declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        inputFormat?: string | undefined;
         displayFormat?: string | Function | undefined;
-        inputFormat?: string | Function | undefined;
     } & {
         $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
             message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -2935,7 +2935,6 @@ export declare const VDateInput: {
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
         landscape: boolean;
-        placeholder: string;
         messages: string | readonly string[];
         rules: readonly import("../../types.js").ValidationRule[];
         focused: boolean;
@@ -3018,7 +3017,6 @@ export declare const VDateInput: {
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
         landscape: boolean;
-        placeholder: string;
         messages: string | readonly string[];
         rules: readonly import("../../types.js").ValidationRule[];
         focused: boolean;
@@ -3077,6 +3075,7 @@ export declare const VDateInput: {
         year?: number | undefined;
         class?: any;
         theme?: string | undefined;
+        placeholder?: string | undefined;
         elevation?: string | number | undefined;
         counter?: string | number | boolean | undefined;
         mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
@@ -3106,8 +3105,8 @@ export declare const VDateInput: {
         modelModifiers?: Record<string, boolean> | undefined;
         firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+        inputFormat?: string | undefined;
         displayFormat?: string | Function | undefined;
-        inputFormat?: string | Function | undefined;
     } & {
         $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
             message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -5128,7 +5127,6 @@ export declare const VDateInput: {
         readonly: boolean | null;
         tag: string | import("../../util/index.js").JSXComponent;
         landscape: boolean;
-        placeholder: string;
         messages: string | readonly string[];
         rules: readonly import("../../types.js").ValidationRule[];
         focused: boolean;
@@ -5190,7 +5188,6 @@ export declare const VDateInput: {
     readonly: boolean | null;
     tag: string | import("../../util/index.js").JSXComponent;
     landscape: boolean;
-    placeholder: string;
     messages: string | readonly string[];
     rules: readonly import("../../types.js").ValidationRule[];
     focused: boolean;
@@ -5249,6 +5246,7 @@ export declare const VDateInput: {
     year?: number | undefined;
     class?: any;
     theme?: string | undefined;
+    placeholder?: string | undefined;
     elevation?: string | number | undefined;
     counter?: string | number | boolean | undefined;
     mobileBreakpoint?: number | import("../../composables/display.js").DisplayBreakpoint | undefined;
@@ -5278,8 +5276,8 @@ export declare const VDateInput: {
     modelModifiers?: Record<string, boolean> | undefined;
     firstDayOfWeek?: string | number | undefined;
     allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
+    inputFormat?: string | undefined;
     displayFormat?: string | Function | undefined;
-    inputFormat?: string | Function | undefined;
 } & {
     $children?: import("vue").VNodeChild | (() => import("vue").VNodeChild) | {
         message?: ((arg: import("../../components/VMessages/VMessages.js").VMessageSlot) => import("vue").VNodeChild) | undefined;
@@ -7305,7 +7303,6 @@ export declare const VDateInput: {
     readonly: boolean | null;
     tag: string | import("../../util/index.js").JSXComponent;
     landscape: boolean;
-    placeholder: string;
     messages: string | readonly string[];
     rules: readonly import("../../types.js").ValidationRule[];
     focused: boolean;
@@ -7549,10 +7546,7 @@ export declare const VDateInput: {
     counter: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     counterValue: PropType<number | ((value: any) => number)>;
     prefix: StringConstructor;
-    placeholder: {
-        type: PropType<string>;
-        default: string;
-    };
+    placeholder: StringConstructor;
     persistentPlaceholder: BooleanConstructor;
     persistentCounter: BooleanConstructor;
     suffix: StringConstructor;
@@ -7582,8 +7576,11 @@ export declare const VDateInput: {
         default: NonNullable<boolean | null> | null;
     };
     mobileBreakpoint: PropType<number | import("../../composables/display.js").DisplayBreakpoint>;
+    inputFormat: {
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+    };
     displayFormat: (FunctionConstructor | StringConstructor)[];
-    inputFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps["location"]>;
         default: string;
@@ -7781,10 +7778,7 @@ export declare const VDateInput: {
     counter: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     counterValue: PropType<number | ((value: any) => number)>;
     prefix: StringConstructor;
-    placeholder: {
-        type: PropType<string>;
-        default: string;
-    };
+    placeholder: StringConstructor;
     persistentPlaceholder: BooleanConstructor;
     persistentCounter: BooleanConstructor;
     suffix: StringConstructor;
@@ -7814,8 +7808,11 @@ export declare const VDateInput: {
         default: NonNullable<boolean | null> | null;
     };
     mobileBreakpoint: PropType<number | import("../../composables/display.js").DisplayBreakpoint>;
+    inputFormat: {
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+    };
     displayFormat: (FunctionConstructor | StringConstructor)[];
-    inputFormat: (FunctionConstructor | StringConstructor)[];
     location: {
         type: PropType<StrategyProps["location"]>;
         default: string;

package/lib/labs/VDateInput/VDateInput.js

@@ -5,17 +5,17 @@ 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 { makeDateFormatProps, useDateFormat } from "../../composables/dateFormat.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, watch } from 'vue';
-import { genericComponent, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
+import { createRange, genericComponent, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
 // Types
 export const makeVDateInputProps = propsFactory({
   displayFormat: [Function, String],
-  inputFormat: [Function, String],
   location: {
     type: String,
     default: 'bottom start'
@@ -25,6 +25,7 @@ export const makeVDateInputProps = propsFactory({
     type: Array,
     default: () => ['blur', 'enter']
   },
+  ...makeDateFormatProps(),
   ...makeDisplayProps({
     mobile: null
   }),
@@ -33,7 +34,6 @@ export const makeVDateInputProps = propsFactory({
     hideActions: true
   }),
   ...makeVTextFieldProps({
-    placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar'
   }),
   ...omit(makeVDatePickerProps({
@@ -56,9 +56,16 @@ export const VDateInput = genericComponent()({
       slots
     } = _ref;
     const {
-      t
+      t,
+      current: currentLocale
     } = useLocale();
     const adapter = useDate();
+    const {
+      isValid,
+      parseDate,
+      formatDate,
+      parserFormat
+    } = useDateFormat(props, currentLocale);
     const {
       mobile
     } = useDisplay(props);
@@ -77,80 +84,10 @@ export const VDateInput = genericComponent()({
       if (typeof props.displayFormat === 'function') {
         return props.displayFormat(date);
       }
-      return adapter.format(date, props.displayFormat ?? 'keyboardDate');
-    }
-    function parseDateString(dateString, format) {
-      function countConsecutiveChars(str, startIndex) {
-        const char = str[startIndex];
-        let count = 0;
-        while (str[startIndex + count] === char) count++;
-        return count;
-      }
-      function parseDateParts(dateString, format) {
-        const dateParts = {};
-        let stringIndex = 0;
-        const upperFormat = format.toUpperCase();
-        for (let formatIndex = 0; formatIndex < upperFormat.length;) {
-          const formatChar = upperFormat[formatIndex];
-          const charCount = countConsecutiveChars(upperFormat, formatIndex);
-          const dateValue = dateString.slice(stringIndex, stringIndex + charCount);
-          if (['Y', 'M', 'D'].includes(formatChar)) {
-            const numValue = parseInt(dateValue);
-            if (isNaN(numValue)) return null;
-            dateParts[formatChar] = numValue;
-          }
-          formatIndex += charCount;
-          stringIndex += charCount;
-        }
-        return dateParts;
-      }
-      function validateDateParts(dateParts) {
-        const {
-          Y: year,
-          M: month,
-          D: day
-        } = dateParts;
-        if (!year || !month || !day) return null;
-        if (month < 1 || month > 12) return null;
-        if (day < 1 || day > 31) return null;
-        return {
-          year,
-          month,
-          day
-        };
-      }
-      const dateParts = parseDateParts(dateString, format);
-      if (!dateParts) return null;
-      const validatedParts = validateDateParts(dateParts);
-      if (!validatedParts) return null;
-      const {
-        year,
-        month,
-        day
-      } = validatedParts;
-      return {
-        year,
-        month,
-        day
-      };
-    }
-    function parseUserInput(value) {
-      if (typeof props.inputFormat === 'function') {
-        return props.inputFormat(value);
-      }
-      if (typeof props.inputFormat === 'string') {
-        const formattedDate = parseDateString(value, props.inputFormat);
-        if (!formattedDate) {
-          return model.value;
-        }
-        const {
-          year,
-          month,
-          day
-        } = formattedDate;
-        return adapter.parseISO(`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
+      if (props.displayFormat) {
+        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
       }
-      return adapter.isValid(value) ? adapter.date(value) : model.value;
+      return formatDate(date);
     }
     const display = computed(() => {
       const value = wrapInArray(model.value);
@@ -228,12 +165,32 @@ export const VDateInput = genericComponent()({
       let {
         value
       } = _ref2;
-      model.value = !value ? emptyModelValue() : parseUserInput(value);
+      if (!value.trim()) {
+        model.value = emptyModelValue();
+      } else if (!props.multiple) {
+        if (isValid(value)) {
+          model.value = parseDate(value);
+        }
+      } else {
+        const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
+        if (parts.every(isValid)) {
+          if (props.multiple === 'range') {
+            model.value = getRange(parts);
+          } else {
+            model.value = parts.map(parseDate);
+          }
+        }
+      }
+    }
+    function getRange(inputDates) {
+      const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+      const diff = adapter.getDiff(stop ?? start, start, 'days');
+      return [start, ...createRange(diff, 1).map(i => adapter.addDays(start, i))];
     }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
-      const textFieldProps = VTextField.filterProps(props);
+      const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
       return _createVNode(VTextField, _mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -241,11 +198,13 @@ export const VDateInput = genericComponent()({
         "style": props.style,
         "modelValue": display.value,
         "inputmode": inputmode.value,
+        "placeholder": props.placeholder ?? parserFormat.value,
         "readonly": isReadonly.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
         "onFocus": focus,
         "onBlur": onBlur,
+        "validationValue": model.value,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prepend": isInteractive.value ? onClick : undefined,
         "onUpdate:modelValue": onUpdateDisplayModel