feat: tabSubmit and openMenuOnFocus (#24)

Author: Jasenkoo

index.d.ts

@@ -107,7 +107,9 @@ interface Vue3DatePicker {
     textInput?: boolean;
     textInputOptions?: {
         enterSubmit?: boolean;
+        tabSubmit?: boolean;
         openMenu?: boolean;
+        openMenuOnFocus?: boolean;
         rangeSeparator?: string;
         format?: null;
     };

src/Vue3DatePicker/components/DatepickerInput.vue

@@ -11,6 +11,8 @@
                 :value="inputValue"
                 @input="handleInput"
                 @keydown.enter="handleEnter"
+                @keydown.tab="handleTab"
+                @focus="handleFocus"
             />
             <span class="dp__input_icon" v-if="$slots['input-icon'] && !hideInputIcon"><slot name="input-icon" /></span>
             <CalendarIcon v-if="!$slots['input-icon'] && !hideInputIcon" class="dp__input_icon dp__input_icons" />
@@ -94,6 +96,19 @@
         }
     };
 
+    const handleTab = (): void => {
+        if (props.textInputOptions?.tabSubmit && isValidDate(parsedDate.value)) {
+            emit('setInputDate', parsedDate.value, true);
+            parsedDate.value = null;
+        }
+    };
+
+    const handleFocus = (): void => {
+        if (props.textInputOptions?.openMenuOnFocus && !props.isMenuOpen) {
+            emit('open');
+        }
+    };
+
     const handleOpen = () => {
         if (props.textInput && props.textInputOptions?.openMenu && !props.isMenuOpen) {
             emit('open');

src/Vue3DatePicker/interfaces.ts

@@ -57,7 +57,9 @@ export interface TimeGridProps {
 
 export interface ITextInputOptions {
     enterSubmit: boolean;
+    tabSubmit: boolean;
     openMenu: boolean;
+    openMenuOnFocus: boolean;
     rangeSeparator: string;
     format?: null;
 }

src/Vue3DatePicker/utils/util.ts

@@ -135,7 +135,9 @@ export const hoursToAmPmHours = (index: number): number => {
  */
 export const getDefaultTextInputOptions = (): ITextInputOptions => ({
     enterSubmit: true,
+    tabSubmit: true,
     openMenu: true,
+    openMenuOnFocus: true,
     rangeSeparator: '-',
 });