@zeedhi/vuetify 3.0.8 → 3.0.10

package/dist/components/zd-date-input/ZdDateInput.js

@@ -1,9 +1,11 @@
 import { DateInput } from '@zeedhi/common';
 import { DateHelper, Mask } from '@zeedhi/core';
-import { computed, defineComponent, mergeProps, onMounted, ref } from 'vue';
+import { computed, defineComponent, mergeProps, ref } from 'vue';
 import { getRootElement, useCreateInputInstance, useTextInput } from '..';
 import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
 import { useIsMobile } from '../../composables/useIsMobile';
+import { usePickerValue } from '../../composables/usePickerValue';
+import { useDateKeydown } from '../../composables/useDateKeydown';
 export const ZdDateInputProps = {
     ...ZdTextInputProps,
     allowedDates: {
@@ -100,75 +102,20 @@ const dateInputComponent = defineComponent({
         const textInputScope = useTextInput(instance, ctx, root);
         const picker = ref(null);
         const { isMobile } = useIsMobile();
-        onMounted(() => {
-            const afterKeydown = instance.events.afterKeydown;
-            const afterKeydownEvents = Array.isArray(afterKeydown) ? afterKeydown : [afterKeydown];
-            afterKeydownEvents.push(({ event }) => keydown(event));
-        });
-        const keyAllowed = (key) => {
-            if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Delete' || key === 'Backspace' || key === 'Tab') {
-                return true;
-            }
-            return false;
-        };
-        const keydown = (event) => {
-            if (!(event instanceof KeyboardEvent))
-                return;
-            const inputEl = event.target;
-            let start = inputEl.selectionStart;
-            const end = inputEl.selectionEnd;
-            const { value } = inputEl;
-            const numbers = /[0-9]/;
-            if (start === null || end === null)
-                return;
-            if (!numbers.test(event.key) && !keyAllowed(event.key)) {
-                event.preventDefault();
-                return;
-            }
-            if (event.key === 'Backspace' && start === end && start > 0) {
-                while (Mask.isMaskDelimiter(inputEl.value[start - 1]) && inputEl.value[start - 1] !== ' ') {
-                    start -= 1;
+        const { pickerValue } = usePickerValue(instance);
+        useDateKeydown(instance, {
+            isMaskDelimiterFn: (_value, position) => {
+                const mask = instance.mask;
+                if (typeof mask === 'string' && mask[position]) {
+                    return mask[position] !== '#' && Mask.isMaskDelimiter(mask[position]);
                 }
-                inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`;
-                inputEl.selectionStart = start - 1;
-                inputEl.selectionEnd = start - 1;
-                if (Mask.getValueWithoutMask(inputEl.value) === '') {
-                    instance.value = '';
-                }
-                event.preventDefault();
-            }
-            else {
-                if ((event.key === 'Backspace' || event.key === 'Delete') && (start !== 0 || end !== value.length)) {
-                    const selectionText = value.substring(start, end).replace(/[0-9]/g, ' ');
-                    inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
-                    event.preventDefault();
-                }
-                else if ((event.key === 'Backspace' || event.key === 'Delete') && start === 0 && end === value.length) {
-                    instance.value = '';
-                    event.preventDefault();
-                }
-                else {
-                    if (!isPrintableKey(event.key) || Mask.isMaskDelimiter(event.key)) {
-                        return;
-                    }
-                    while (Mask.isMaskDelimiter(value[start]) && value[start] !== ' ') {
-                        start += 1;
-                    }
-                    const firstSlice = value.substring(0, start);
-                    const secondSlice = value.substring(start + 1);
-                    inputEl.value = firstSlice + secondSlice;
-                }
-                inputEl.selectionStart = start;
-                inputEl.selectionEnd = start;
-            }
-        };
+                return false;
+            },
+        });
         const onSelectDate = (date, event) => {
             const rootElement = getRootElement(root);
             instance.selectDate(date, event, rootElement.value);
         };
-        const isPrintableKey = (key) => {
-            return !!key && key.length === 1;
-        };
         const onChangeDatePicker = () => {
             if (!isMobile.value) {
                 instance.showDatePicker = false;
@@ -186,24 +133,7 @@ const dateInputComponent = defineComponent({
             instance.helperValue = helper;
             instance.updateHelperHint();
         };
-        const getLabel = (name) => {
-            return DateHelper.getLabel(name);
-        };
-        const pickerValue = computed({
-            set: (value) => {
-                instance.setNativeDate(value);
-                instance.change();
-            },
-            get: () => {
-                return instance.getNativeDate();
-            },
-        });
-        const onPickerMousedown = (event) => {
-            event.preventDefault();
-        };
-        const getAllowedDates = (date) => {
-            return instance.getAllowedDates(date);
-        };
+        const getAllowedDates = (date) => instance.getAllowedDates(date);
         const onMonthOrYearChange = (newValue, type) => {
             let currentDate = instance.getNativeDate();
             if (!currentDate) {
@@ -219,6 +149,15 @@ const dateInputComponent = defineComponent({
             instance.setNativeDate(currentDate);
             instance.change();
         };
+        const getDateMask = computed(() => {
+            return instance.mask;
+        });
+        const getLabel = (name) => {
+            return DateHelper.getLabel(name);
+        };
+        const onPickerMousedown = (event) => {
+            event.preventDefault();
+        };
         const clearDateValues = () => {
             instance.value = '';
         };
@@ -229,15 +168,13 @@ const dateInputComponent = defineComponent({
             root,
             picker,
             isMobile,
-            keydown,
             onSelectDate,
-            isPrintableKey,
             onChangeDatePicker,
-            keyAllowed,
             helperValuesOptionClick,
             getLabel,
             mergeProps,
             pickerValue,
+            getDateMask,
             getAllowedDates,
             onMonthOrYearChange,
             clearDateValues,

package/dist/components/zd-date-range/ZdDateRange.js

@@ -1,11 +1,17 @@
 import { DateRange } from '@zeedhi/common';
-import { DateHelper, I18n, Mask } from '@zeedhi/core';
-import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
+import { DateHelper, I18n } from '@zeedhi/core';
 import { getRootElement, useCreateInputInstance } from '..';
+import { computed, defineComponent, nextTick, ref } from 'vue';
 import { ZdTextInputProps } from '../zd-text-input/ZdTextInput';
 import { useIsMobile } from '../../composables/useIsMobile';
+import { usePickerValue } from '../../composables/usePickerValue';
+import { useDateKeydown } from '../../composables/useDateKeydown';
 export const ZdDateRangeProps = {
     ...ZdTextInputProps,
+    allowedDates: {
+        type: [Function, Array, String],
+        default: undefined,
+    },
     appendIcon: {
         type: String,
         default: 'calendar',
@@ -113,26 +119,25 @@ export default defineComponent({
         const { instance, root } = useCreateInputInstance(props, ctx, DateRange);
         const picker = ref(null);
         const { isMobile } = useIsMobile();
+        const { pickerValue } = usePickerValue(instance);
+        useDateKeydown(instance, {
+            isMaskDelimiterFn: (_value, position) => {
+                const maskValue = instance.getMaskValue();
+                return maskValue[position] && maskValue[position] !== '#';
+            },
+        });
         const onPickerMousedown = (event) => {
             event.preventDefault();
         };
-        const onChangeDatePicker = () => {
-            if (instance.value.length < 2)
+        const onChangeDatePicker = (value) => {
+            if (!Array.isArray(value) || value.length < 2)
                 return;
             if (!isMobile.value) {
                 instance.showDatePicker = false;
             }
             instance.validate();
         };
-        const datePickerValue = computed({
-            set: (value) => {
-                instance.setNativeDate(value);
-                instance.change();
-            },
-            get: () => {
-                return instance.getNativeDate();
-            },
-        });
+        const isDateAllowed = (date) => instance.getAllowedDates(date);
         const setFocus = (selectAll = false) => {
             nextTick(() => {
                 const el = root.value instanceof HTMLElement ? root.value : root.value?.$el;
@@ -147,16 +152,10 @@ export default defineComponent({
                 }
             });
         };
-        const toMask = (format) => {
-            return format
-                .replace(/[A-Za-z]/gi, '#')
-                .split('')
-                .map((char) => (char === '#' ? /\d/ : char));
-        };
         const getDateMask = computed(() => {
             if (instance.isFocused) {
-                const inputFormat = toMask(instance.inputFormat || instance.displayFormat || '');
-                return inputFormat.concat(instance.splitter.split('')).concat(inputFormat);
+                const finalMask = instance.getMaskValue();
+                return finalMask;
             }
             return '';
         });
@@ -172,68 +171,6 @@ export default defineComponent({
         const getLabel = (name) => {
             return DateHelper.getLabel(name);
         };
-        const isPrintableKey = (key) => {
-            return !!key && key.length === 1;
-        };
-        const keyAllowed = (key) => {
-            return ['ArrowRight', 'ArrowLeft', 'Delete', 'Backspace', 'Tab'].includes(key);
-        };
-        const handleKeydown = (event) => {
-            if (!(event instanceof KeyboardEvent))
-                return;
-            const inputEl = event.target;
-            let start = inputEl.selectionStart;
-            const end = inputEl.selectionEnd;
-            const { value } = inputEl;
-            const numbers = /[0-9]/;
-            if (start === null || end === null)
-                return;
-            if (!numbers.test(event.key) && !keyAllowed(event.key)) {
-                event.preventDefault();
-                return;
-            }
-            if (event.key === 'Backspace' && start === end && start > 0) {
-                while (Mask.isMaskDelimiter(inputEl.value[start - 1]) && inputEl.value[start - 1] !== ' ') {
-                    start -= 1;
-                }
-                inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`;
-                inputEl.selectionStart = start - 1;
-                inputEl.selectionEnd = start - 1;
-                if (Mask.getValueWithoutMask(inputEl.value) === '') {
-                    instance.value = [];
-                }
-                event.preventDefault();
-            }
-            else {
-                if ((event.key === 'Backspace' || event.key === 'Delete') && (start !== 0 || end !== value.length)) {
-                    const selectionText = value.substring(start, end).replace(/[0-9-]/g, ' ');
-                    inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
-                    event.preventDefault();
-                }
-                else if ((event.key === 'Backspace' || event.key === 'Delete') && start === 0 && end === value.length) {
-                    instance.value = [];
-                    event.preventDefault();
-                }
-                else {
-                    if (!isPrintableKey(event.key) || Mask.isMaskDelimiter(event.key))
-                        return;
-                    const maskValue = instance.getMaskValue();
-                    while (maskValue[start].toString() !== /\d/.toString()) {
-                        start += 1;
-                    }
-                    const firstSlice = value.substring(0, start);
-                    const secondSlice = value.substring(start + 1);
-                    inputEl.value = firstSlice + secondSlice;
-                }
-                inputEl.selectionStart = start;
-                inputEl.selectionEnd = start;
-            }
-        };
-        onMounted(() => {
-            const afterKeydown = instance.events.afterKeydown;
-            const afterKeydownEvents = Array.isArray(afterKeydown) ? afterKeydown : [afterKeydown];
-            afterKeydownEvents.push(({ event }) => handleKeydown(event));
-        });
         return {
             instance,
             root,
@@ -243,7 +180,8 @@ export default defineComponent({
             setFocus,
             helperValuesOptionClick,
             getLabel,
-            datePickerValue,
+            isDateAllowed,
+            pickerValue,
             isMobile,
             onPickerMousedown,
         };

package/dist/components/zd-tabs/ZdTab.js

@@ -10,9 +10,6 @@ export const ZdTabProps = buildProps({
         type: [Boolean, String],
         default: false,
     },
-    index: {
-        type: [Number, String],
-    },
     tabTitle: {
         type: [String],
     },

package/dist/components/zd-text/ZdText.js

@@ -1,9 +1,10 @@
 import { Text } from '@zeedhi/common';
 import { defineComponent } from 'vue';
 import { buildProps } from '../../utils';
-import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
 export const ZdTextProps = buildProps({
-    ...ZdComponentProps,
+    ...ZdComponentRenderProps,
     compile: {
         type: [Boolean, String],
         default: false,

package/dist/composables/index.js

@@ -13,4 +13,6 @@ export * from './maska';
 export * from './tableNavigation';
 export * from './virtualScroll';
 export * from './watchUrl';
+export * from './usePickerValue';
 export * from './useIsMobile';
+export * from './useDateKeydown';

package/dist/composables/useDateKeydown.js

@@ -0,0 +1,87 @@
+import { DateRange } from '@zeedhi/common';
+import { Mask } from '@zeedhi/core';
+import { onMounted } from 'vue';
+const isPrintableKey = (key) => {
+    return key.length === 1;
+};
+const keyAllowed = (key) => {
+    return ['Tab', 'ArrowLeft', 'ArrowRight', 'Enter', 'Delete', 'Backspace'].includes(key);
+};
+export function useDateKeydown(instance, options) {
+    const { isMaskDelimiterFn } = options;
+    const findNextEditablePosition = (value, start) => {
+        let editablePosition = start;
+        while (isMaskDelimiterFn(value, editablePosition)) {
+            editablePosition += 1;
+        }
+        return editablePosition;
+    };
+    const keydown = (event) => {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        const inputEl = event.target;
+        let start = inputEl.selectionStart;
+        const end = inputEl.selectionEnd;
+        const { value } = inputEl;
+        const numbers = /[0-9]/;
+        if (start === null || end === null)
+            return;
+        if (!numbers.test(event.key) && !keyAllowed(event.key)) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Backspace' && start === end && start > 0) {
+            while (isMaskDelimiterFn(inputEl.value, start - 1) &&
+                inputEl.value[start - 1] !== ' ') {
+                start -= 1;
+            }
+            inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`; // Keep this for mask behavior
+            inputEl.selectionStart = start - 1;
+            inputEl.selectionEnd = start - 1;
+            if (Mask.getValueWithoutMask(inputEl.value) === '') {
+                if (instance instanceof DateRange) {
+                    instance.value = [];
+                }
+                else {
+                    instance.value = '';
+                }
+            }
+            event.preventDefault();
+        }
+        else if ((event.key === 'Backspace' || event.key === 'Delete') &&
+            (start !== 0 || end !== value.length)) {
+            const selectionText = value.substring(start, end).replace(/[0-9]/g, ' ');
+            inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
+            event.preventDefault();
+        }
+        else if ((event.key === 'Backspace' || event.key === 'Delete') &&
+            start === 0 && end === value.length) { // Clear all
+            if (instance instanceof DateRange) {
+                instance.value = [];
+            }
+            else {
+                instance.value = '';
+            }
+            event.preventDefault();
+        }
+        else {
+            if (!isPrintableKey(event.key) || isMaskDelimiterFn(event.key, 0)) {
+                return;
+            }
+            // Adjust cursor position to the next editable character for both DateInput and DateRange
+            start = findNextEditablePosition(value, start);
+            const firstSlice = value.slice(0, start);
+            const secondSlice = value.slice(start + 1);
+            inputEl.value = firstSlice + event.key + secondSlice;
+            const nextPos = findNextEditablePosition(value, start + 1);
+            inputEl.selectionStart = nextPos;
+            inputEl.selectionEnd = nextPos;
+        }
+    };
+    onMounted(() => {
+        const afterKeydown = instance.events.afterKeydown;
+        const afterKeydownEvents = Array.isArray(afterKeydown) ? afterKeydown : [afterKeydown];
+        afterKeydownEvents.push(({ event }) => keydown(event));
+        instance.events.afterKeydown = afterKeydownEvents.filter((f) => f);
+    });
+}

package/dist/composables/usePickerValue.js

@@ -0,0 +1,19 @@
+import { computed } from 'vue';
+/**
+ * Composable to create a computed property to be used as a v-model for a date picker.
+ * It acts as a bridge between the date picker and the component's `getNativeDate` and `setNativeDate` methods.
+ * @param instance The instance of the date component (e.g., DateInput, DateRange).
+ */
+export function usePickerValue(instance) {
+    const pickerValue = computed({
+        get: () => {
+            return instance.getNativeDate();
+        },
+        set: (value) => {
+            instance.setNativeDate(value);
+        },
+    });
+    return {
+        pickerValue,
+    };
+}