fix: text-input formats prop type, proper format and pattern value, format value on focus (fixes #1181)

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -12,7 +12,7 @@
             @close="closeMenu"
             @focus="handleInputFocus"
             @blur="handleBlur"
-            @real-blur="isInputFocused = false"
+            @real-blur="setState('isInputFocused', false)"
         >
             <template v-for="(slot, i) in inputSlots" #[slot]="args" :key="i">
                 <slot :name="slot" v-bind="args" />
@@ -127,7 +127,6 @@
     const pickerWrapperRef = useTemplateRef('picker-wrapper');
     const menuArrowRef = useTemplateRef('menu-arrow');
 
-    const isInputFocused = ref(false);
     const shouldFocusNext = ref(false);
     const shiftKeyActive = ref(false);
     const collapse = ref(false);
@@ -397,7 +396,7 @@
 
     const handleInputFocus = () => {
         if (textInput.value.enabled) {
-            isInputFocused.value = true;
+            setState('isInputFocused', true);
             formatInputValue();
         }
 
@@ -406,7 +405,7 @@
 
     const handleBlur = () => {
         if (textInput.value.enabled) {
-            isInputFocused.value = false;
+            setState('isInputFocused', false);
             parseExternalModelValue(rootProps.modelValue);
             if (shouldFocusNext.value) {
                 const el = findNextFocusableElement(pickerWrapperRef.value!, shiftKeyActive.value);

src/VueDatePicker/composables/useDefaults.ts

@@ -135,9 +135,9 @@ export const useDefaults = (props: RootPropsWithDefaults) => {
         if (typeof props.textInput === 'object') {
             return {
                 ...defaultTextInputOptions,
-                format: formats.value.input,
-                pattern: formats.value.input,
                 ...props.textInput,
+                format: typeof props.textInput.format === 'string' ? props.textInput.format : formats.value.input,
+                pattern: props.textInput.format ?? formats.value.input,
                 enabled: true,
             };
         }

src/VueDatePicker/types/configs.ts

@@ -120,7 +120,7 @@ export interface TextInputConfig {
     rangeSeparator: string;
     selectOnFocus: boolean;
     escClose: boolean;
-    format: string;
+    format: string | string[] | ((value: string) => Date | null);
     maskFormat: string;
 }