@coreui/vue-pro 4.10.4 → 4.11.0

package/dist/index.js

@@ -1041,9 +1041,7 @@ const CCalendar = vue.defineComponent({
         /**
          * Default date of the component
          */
-        calendarDate: {
-            type: [Date, String],
-        },
+        calendarDate: [Date, String],
         /**
          * The number of calendars that render on desktop devices.
          */
@@ -1083,9 +1081,7 @@ const CCalendar = vue.defineComponent({
         /**
          * Initial selected to date (range).
          */
-        endDate: {
-            type: [Date, String],
-        },
+        endDate: [Date, String],
         /**
          * Sets the day of start week.
          * - 0 - Sunday,
@@ -1110,15 +1106,11 @@ const CCalendar = vue.defineComponent({
         /**
          * Max selectable date.
          */
-        maxDate: {
-            type: [Date, String],
-        },
+        maxDate: [Date, String],
         /**
          * Min selectable date.
          */
-        minDate: {
-            type: [Date, String],
-        },
+        minDate: [Date, String],
         /**
          * Show arrows navigation.
          */
@@ -1158,9 +1150,7 @@ const CCalendar = vue.defineComponent({
         /**
          * Initial selected date.
          */
-        startDate: {
-            type: [Date, String],
-        },
+        startDate: [Date, String],
         /**
          * Set length or format of day name.
          *
@@ -1240,13 +1230,15 @@ const CCalendar = vue.defineComponent({
             }
         });
         vue.watch(() => props.maxDate, () => {
-            if (props.maxDate) {
-                maxDate.value = new Date(props.maxDate);
+            const date = props.maxDate ? new Date(props.maxDate) : null;
+            if (!isSameDateAs(date, maxDate.value)) {
+                maxDate.value = date;
             }
         });
         vue.watch(() => props.minDate, () => {
-            if (props.minDate) {
-                minDate.value = new Date(props.minDate);
+            const date = props.minDate ? new Date(props.minDate) : null;
+            if (!isSameDateAs(date, minDate.value)) {
+                minDate.value = date;
             }
         });
         vue.watch(() => props.selectEndDate, () => {
@@ -6554,6 +6546,52 @@ const CPickerPlugin = {
     },
 };
 
+const useDebouncedCallback = (callback, delay) => {
+    const timeout = vue.ref();
+    const debouncedFn = (...args) => {
+        const handler = () => {
+            clearTimeout(timeout.value);
+            callback(...args);
+        };
+        clearTimeout(timeout.value);
+        timeout.value = setTimeout(handler, delay);
+    };
+    return debouncedFn();
+};
+
+const useIsVisible = (el) => {
+    const isIntersecting = vue.ref(false);
+    const observer = vue.ref();
+    vue.onMounted(() => {
+        observer.value = new IntersectionObserver(([entry]) => {
+            isIntersecting.value = entry.isIntersecting;
+        });
+        el.value && observer.value.observe(el.value);
+    });
+    vue.onUnmounted(() => {
+        observer.value.disconnect();
+    });
+    return isIntersecting;
+};
+
+const usePopper = () => {
+    const _popper = vue.ref();
+    const initPopper = (reference, popper, options) => {
+        _popper.value = createPopper(reference, popper, options);
+    };
+    const destroyPopper = () => {
+        if (_popper.value) {
+            _popper.value.destroy();
+        }
+        _popper.value = undefined;
+    };
+    return {
+        popper: _popper.value,
+        initPopper,
+        destroyPopper,
+    };
+};
+
 const CTimePickerRollCol = vue.defineComponent({
     name: 'CTimePickerRollCol',
     props: {
@@ -6569,15 +6607,24 @@ const CTimePickerRollCol = vue.defineComponent({
     setup(props, { emit }) {
         const init = vue.ref(true);
         const colRef = vue.ref();
-        vue.onUpdated(() => {
+        const isVisible = useIsVisible(colRef);
+        const scrollToSelectedElement = () => {
             const nodeEl = colRef.value?.querySelector('.selected');
-            if (nodeEl && nodeEl instanceof HTMLElement) {
+            if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
                 colRef.value?.scrollTo({
                     top: nodeEl.offsetTop,
                     behavior: init.value ? 'auto' : 'smooth',
                 });
             }
-            init.value = false;
+        };
+        vue.watch(isVisible, () => {
+            scrollToSelectedElement();
+            if (isVisible.value) {
+                init.value = false;
+            }
+        });
+        vue.onUpdated(() => {
+            scrollToSelectedElement();
         });
         const handleKeyDown = (event, value) => {
             if (event.code === 'Space' || event.key === 'Enter') {
@@ -7478,6 +7525,27 @@ const CDateRangePicker = vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Custom function to format the selected date into a string according to a custom format.
+         *
+         * @since v4.11.0
+         */
+        inputDateFormat: Function,
+        /**
+         * Custom function to parse the input value into a valid Date object.
+         *
+         * @since v4.11.0
+         */
+        inputDateParse: Function,
+        /**
+         * Defines the delay (in milliseconds) for the input field's onChange event.
+         *
+         * @since v4.11.0
+         */
+        inputOnChangeDelay: {
+            type: Number,
+            default: 750,
+        },
         /**
          * Toggle the readonly state for the component.
          */
@@ -7737,8 +7805,8 @@ const CDateRangePicker = vue.defineComponent({
         const endDate = vue.ref(props.endDate ? new Date(props.endDate) : null);
         const initialStartDate = vue.ref(startDate.value ? new Date(startDate.value) : null);
         const initialEndDate = vue.ref(endDate.value ? new Date(endDate.value) : null);
-        const maxDate = vue.ref(props.maxDate && new Date(props.maxDate));
-        const minDate = vue.ref(props.minDate && new Date(props.minDate));
+        const maxDate = vue.ref(props.maxDate ? new Date(props.maxDate) : null);
+        const minDate = vue.ref(props.minDate ? new Date(props.minDate) : null);
         const selectEndDate = vue.ref(false);
         const isValid = vue.ref(props.valid ?? (props.invalid === true ? false : undefined));
         const isMobile = vue.ref(false);
@@ -7749,28 +7817,18 @@ const CDateRangePicker = vue.defineComponent({
             isValid.value = props.valid ?? (props.invalid === true ? false : undefined);
         });
         vue.watch(() => props.startDate, () => {
-            if (props.startDate) {
-                const date = new Date(props.startDate);
-                calendarDate.value = date;
-                startDate.value = date;
-            }
+            calendarDate.value = props.startDate ? new Date(props.startDate) : new Date();
+            startDate.value = props.startDate ? new Date(props.startDate) : null;
         });
         vue.watch(() => props.endDate, () => {
-            if (props.endDate) {
-                const date = new Date(props.endDate);
-                calendarDate.value = date;
-                endDate.value = date;
-            }
+            calendarDate.value = props.endDate ? new Date(props.endDate) : new Date();
+            endDate.value = props.endDate ? new Date(props.endDate) : null;
         });
         vue.watch(() => props.maxDate, () => {
-            if (props.maxDate) {
-                maxDate.value = new Date(props.maxDate);
-            }
+            maxDate.value = props.maxDate ? new Date(props.maxDate) : null;
         });
         vue.watch(() => props.minDate, () => {
-            if (props.minDate) {
-                minDate.value = new Date(props.minDate);
-            }
+            minDate.value = props.minDate ? new Date(props.minDate) : null;
         });
         vue.watch(inputStartRef, () => {
             if (inputStartRef.value && inputStartRef.value.form) {
@@ -7786,11 +7844,13 @@ const CDateRangePicker = vue.defineComponent({
             }
         });
         const formatDate = (date) => {
-            return props.format
-                ? format(date, props.format)
-                : props.timepicker
-                    ? date.toLocaleString(props.locale)
-                    : date.toLocaleDateString(props.locale);
+            return props.inputDateFormat
+                ? props.inputDateFormat(date)
+                : props.format
+                    ? format(date, props.format)
+                    : props.timepicker
+                        ? date.toLocaleString(props.locale)
+                        : date.toLocaleDateString(props.locale);
         };
         const setInputValue = (date) => {
             if (date) {
@@ -7863,6 +7923,20 @@ const CDateRangePicker = vue.defineComponent({
             emit('update:start-date', null);
             emit('update:end-date', null);
         };
+        const handleOnChange = (value, input) => {
+            const date = props.inputDateParse
+                ? props.inputDateParse(value)
+                : getLocalDateFromString(value, props.locale, props.timepicker);
+            if (date instanceof Date && date.getTime()) {
+                calendarDate.value = date;
+                if (input === 'start') {
+                    startDate.value = date;
+                }
+                else {
+                    endDate.value = date;
+                }
+            }
+        };
         const InputGroup = () => vue.h('div', {
             class: [
                 'input-group',
@@ -7885,13 +7959,8 @@ const CDateRangePicker = vue.defineComponent({
                 onClick: () => {
                     selectEndDate.value = false;
                 },
-                onInput: (event) => {
-                    const date = getLocalDateFromString(event.target.value, props.locale, props.timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        calendarDate.value = date;
-                        startDate.value = date;
-                    }
-                },
+                onChange: (event) => handleOnChange(event.target.value, 'start'),
+                onInput: (event) => useDebouncedCallback(() => handleOnChange(event.target.value, 'start'), props.inputOnChangeDelay),
                 placeholder: Array.isArray(props.placeholder)
                     ? props.placeholder[0]
                     : props.placeholder,
@@ -7921,13 +7990,8 @@ const CDateRangePicker = vue.defineComponent({
                     onClick: () => {
                         selectEndDate.value = true;
                     },
-                    onInput: (event) => {
-                        const date = getLocalDateFromString(event.target.value, props.locale, props.timepicker);
-                        if (date instanceof Date && date.getTime()) {
-                            calendarDate.value = date;
-                            endDate.value = date;
-                        }
-                    },
+                    onChange: (event) => handleOnChange(event.target.value, 'end'),
+                    onInput: (event) => useDebouncedCallback(() => handleOnChange(event.target.value, 'end'), props.inputOnChangeDelay),
                     placeholder: props.placeholder[1],
                     readonly: props.inputReadOnly || typeof props.format === 'string',
                     required: props.required,
@@ -8053,8 +8117,8 @@ const CDateRangePicker = vue.defineComponent({
                         ...(endDate.value && { endDate: endDate.value }),
                         firstDayOfWeek: props.firstDayOfWeek,
                         locale: props.locale,
-                        maxDate: maxDate.value,
-                        minDate: minDate.value,
+                        ...(maxDate.value && { maxDate: maxDate.value }),
+                        ...(minDate.value && { minDate: minDate.value }),
                         navYearFirst: props.navYearFirst,
                         navigation: props.navigation,
                         range: props.range,
@@ -8444,24 +8508,6 @@ const CDatePickerPlugin = {
     },
 };
 
-const usePopper = () => {
-    const _popper = vue.ref();
-    const initPopper = (reference, popper, options) => {
-        _popper.value = createPopper(reference, popper, options);
-    };
-    const destroyPopper = () => {
-        if (_popper.value) {
-            _popper.value.destroy();
-        }
-        _popper.value = undefined;
-    };
-    return {
-        popper: _popper.value,
-        initPopper,
-        destroyPopper,
-    };
-};
-
 const getPlacement = (placement, direction, alignment, isRTL) => {
     let _placement = placement;
     if (direction === 'dropup') {
@@ -16798,6 +16844,8 @@ exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
 exports.CWidgetsStatsPlugin = CWidgetsStatsPlugin;
 exports.default = CoreuiVue;
+exports.useDebouncedCallback = useDebouncedCallback;
+exports.useIsVisible = useIsVisible;
 exports.usePopper = usePopper;
 exports.vcplaceholder = vCPlaceholder;
 exports.vcpopover = vCPopover;