@coreui/vue-pro 4.10.4 → 4.11.0

package/dist/components/calendar/CCalendar.d.ts

@@ -3,9 +3,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Default date of the component
      */
-    calendarDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    calendarDate: (StringConstructor | DateConstructor)[];
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -34,9 +32,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    endDate: (StringConstructor | DateConstructor)[];
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -61,15 +57,11 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Max selectable date.
      */
-    maxDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    maxDate: (StringConstructor | DateConstructor)[];
     /**
      * Min selectable date.
      */
-    minDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    minDate: (StringConstructor | DateConstructor)[];
     /**
      * Show arrows navigation.
      */
@@ -109,9 +101,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected date.
      */
-    startDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    startDate: (StringConstructor | DateConstructor)[];
     /**
      * Set length or format of day name.
      *
@@ -128,9 +118,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Default date of the component
      */
-    calendarDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    calendarDate: (StringConstructor | DateConstructor)[];
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -159,9 +147,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    endDate: (StringConstructor | DateConstructor)[];
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -186,15 +172,11 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Max selectable date.
      */
-    maxDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    maxDate: (StringConstructor | DateConstructor)[];
     /**
      * Min selectable date.
      */
-    minDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    minDate: (StringConstructor | DateConstructor)[];
     /**
      * Show arrows navigation.
      */
@@ -234,9 +216,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected date.
      */
-    startDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    startDate: (StringConstructor | DateConstructor)[];
     /**
      * Set length or format of day name.
      *

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -180,6 +180,27 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v4.11.0
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v4.11.0
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v4.11.0
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Toggle the readonly state for the component.
      */
@@ -549,6 +570,27 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v4.11.0
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v4.11.0
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v4.11.0
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Toggle the readonly state for the component.
      */
@@ -773,6 +815,7 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
     inputReadOnly: boolean;
     placeholder: string | string[];
     closeOnSelect: boolean;
+    inputOnChangeDelay: number;
     separator: boolean;
     timepicker: boolean;
     todayButton: string | boolean;

package/dist/composables/index.d.ts

@@ -1,2 +1,4 @@
+import { useDebouncedCallback } from './useDebouncedCallback';
+import { useIsVisible } from './useIsVisible';
 import { usePopper } from './usePopper';
-export { usePopper };
+export { useDebouncedCallback, useIsVisible, usePopper };

package/dist/composables/useDebouncedCallback.d.ts

@@ -0,0 +1 @@
+export declare const useDebouncedCallback: <F extends Function>(callback: F, delay: number) => void;

package/dist/composables/useIsVisible.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useIsVisible: (el: Ref<HTMLElement | undefined>) => Ref<boolean>;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, cloneVNode, nextTick, computed, vShow, onBeforeUnmount, Teleport } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, cloneVNode, onUnmounted, nextTick, computed, vShow, onBeforeUnmount, Teleport } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -1037,9 +1037,7 @@ const CCalendar = defineComponent({
         /**
          * Default date of the component
          */
-        calendarDate: {
-            type: [Date, String],
-        },
+        calendarDate: [Date, String],
         /**
          * The number of calendars that render on desktop devices.
          */
@@ -1079,9 +1077,7 @@ const CCalendar = defineComponent({
         /**
          * Initial selected to date (range).
          */
-        endDate: {
-            type: [Date, String],
-        },
+        endDate: [Date, String],
         /**
          * Sets the day of start week.
          * - 0 - Sunday,
@@ -1106,15 +1102,11 @@ const CCalendar = defineComponent({
         /**
          * Max selectable date.
          */
-        maxDate: {
-            type: [Date, String],
-        },
+        maxDate: [Date, String],
         /**
          * Min selectable date.
          */
-        minDate: {
-            type: [Date, String],
-        },
+        minDate: [Date, String],
         /**
          * Show arrows navigation.
          */
@@ -1154,9 +1146,7 @@ const CCalendar = defineComponent({
         /**
          * Initial selected date.
          */
-        startDate: {
-            type: [Date, String],
-        },
+        startDate: [Date, String],
         /**
          * Set length or format of day name.
          *
@@ -1236,13 +1226,15 @@ const CCalendar = defineComponent({
             }
         });
         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;
             }
         });
         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;
             }
         });
         watch(() => props.selectEndDate, () => {
@@ -6550,6 +6542,52 @@ const CPickerPlugin = {
     },
 };
 
+const useDebouncedCallback = (callback, delay) => {
+    const timeout = 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 = ref(false);
+    const observer = ref();
+    onMounted(() => {
+        observer.value = new IntersectionObserver(([entry]) => {
+            isIntersecting.value = entry.isIntersecting;
+        });
+        el.value && observer.value.observe(el.value);
+    });
+    onUnmounted(() => {
+        observer.value.disconnect();
+    });
+    return isIntersecting;
+};
+
+const usePopper = () => {
+    const _popper = 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 = defineComponent({
     name: 'CTimePickerRollCol',
     props: {
@@ -6565,15 +6603,24 @@ const CTimePickerRollCol = defineComponent({
     setup(props, { emit }) {
         const init = ref(true);
         const colRef = ref();
-        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;
+        };
+        watch(isVisible, () => {
+            scrollToSelectedElement();
+            if (isVisible.value) {
+                init.value = false;
+            }
+        });
+        onUpdated(() => {
+            scrollToSelectedElement();
         });
         const handleKeyDown = (event, value) => {
             if (event.code === 'Space' || event.key === 'Enter') {
@@ -7474,6 +7521,27 @@ const CDateRangePicker = 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.
          */
@@ -7733,8 +7801,8 @@ const CDateRangePicker = defineComponent({
         const endDate = ref(props.endDate ? new Date(props.endDate) : null);
         const initialStartDate = ref(startDate.value ? new Date(startDate.value) : null);
         const initialEndDate = ref(endDate.value ? new Date(endDate.value) : null);
-        const maxDate = ref(props.maxDate && new Date(props.maxDate));
-        const minDate = ref(props.minDate && new Date(props.minDate));
+        const maxDate = ref(props.maxDate ? new Date(props.maxDate) : null);
+        const minDate = ref(props.minDate ? new Date(props.minDate) : null);
         const selectEndDate = ref(false);
         const isValid = ref(props.valid ?? (props.invalid === true ? false : undefined));
         const isMobile = ref(false);
@@ -7745,28 +7813,18 @@ const CDateRangePicker = defineComponent({
             isValid.value = props.valid ?? (props.invalid === true ? false : undefined);
         });
         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;
         });
         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;
         });
         watch(() => props.maxDate, () => {
-            if (props.maxDate) {
-                maxDate.value = new Date(props.maxDate);
-            }
+            maxDate.value = props.maxDate ? new Date(props.maxDate) : null;
         });
         watch(() => props.minDate, () => {
-            if (props.minDate) {
-                minDate.value = new Date(props.minDate);
-            }
+            minDate.value = props.minDate ? new Date(props.minDate) : null;
         });
         watch(inputStartRef, () => {
             if (inputStartRef.value && inputStartRef.value.form) {
@@ -7782,11 +7840,13 @@ const CDateRangePicker = 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) {
@@ -7859,6 +7919,20 @@ const CDateRangePicker = 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 = () => h$1('div', {
             class: [
                 'input-group',
@@ -7881,13 +7955,8 @@ const CDateRangePicker = 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,
@@ -7917,13 +7986,8 @@ const CDateRangePicker = 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,
@@ -8049,8 +8113,8 @@ const CDateRangePicker = 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,
@@ -8440,24 +8504,6 @@ const CDatePickerPlugin = {
     },
 };
 
-const usePopper = () => {
-    const _popper = 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') {
@@ -16614,5 +16660,5 @@ const CoreuiVue = {
     },
 };
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CVirtualScroller, CVirtualScrollerPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, usePopper, vCPlaceholder as vcplaceholder, vCPopover as vcpopover, vCTooltip as vctooltip };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CVirtualScroller, CVirtualScrollerPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, useDebouncedCallback, useIsVisible, usePopper, vCPlaceholder as vcplaceholder, vCPopover as vcpopover, vCTooltip as vctooltip };
 //# sourceMappingURL=index.es.js.map