@coreui/vue-pro 4.10.4 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.10.4",
+  "version": "4.11.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/calendar/CCalendar.ts

@@ -24,9 +24,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.
      */
@@ -66,9 +64,7 @@ const CCalendar = defineComponent({
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-      type: [Date, String],
-    },
+    endDate: [Date, String],
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -93,15 +89,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.
      */
@@ -141,9 +133,7 @@ const CCalendar = defineComponent({
     /**
      * Initial selected date.
      */
-    startDate: {
-      type: [Date, String],
-    },
+    startDate: [Date, String],
     /**
      * Set length or format of day name.
      *
@@ -240,8 +230,9 @@ 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
         }
       },
     )
@@ -249,8 +240,9 @@ const CCalendar = defineComponent({
     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
         }
       },
     )

package/src/components/calendar/utils.ts

@@ -198,6 +198,7 @@ export const isDateDisabled = (
           disabled = true
         }
       }
+      
       if (_date instanceof Date) {
         if (isSameDateAs(date, _date)) {
           disabled = true
@@ -205,6 +206,7 @@ export const isDateDisabled = (
       }
     })
   }
+
   if (min && date < min) {
     disabled = true
   }
@@ -212,6 +214,7 @@ export const isDateDisabled = (
   if (max && date > max) {
     disabled = true
   }
+
   return disabled
 }
 

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -8,8 +8,8 @@ import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
+import { useDebouncedCallback } from '../../composables'
 import { getLocalDateFromString } from './utils'
-
 import { Color } from '../props'
 
 const CDateRangePicker = defineComponent({
@@ -212,6 +212,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.
      */
@@ -474,8 +495,8 @@ const CDateRangePicker = defineComponent({
     const endDate = ref<Date | null>(props.endDate ? new Date(props.endDate) : null)
     const initialStartDate = ref<Date | null>(startDate.value ? new Date(startDate.value) : null)
     const initialEndDate = ref<Date | null>(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<Date | null>(props.maxDate ? new Date(props.maxDate) : null)
+    const minDate = ref<Date | null>(props.minDate ? new Date(props.minDate) : null)
     const selectEndDate = ref(false)
     const isValid = ref<boolean | undefined>(
       props.valid ?? (props.invalid === true ? false : undefined),
@@ -496,40 +517,30 @@ const CDateRangePicker = defineComponent({
     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
       },
     )
 
@@ -550,7 +561,9 @@ const CDateRangePicker = defineComponent({
     })
 
     const formatDate = (date: Date) => {
-      return props.format
+      return props.inputDateFormat
+        ? props.inputDateFormat(date)
+        : props.format
         ? dateFormat(date, props.format)
         : props.timepicker
         ? date.toLocaleString(props.locale)
@@ -645,6 +658,20 @@ const CDateRangePicker = defineComponent({
       emit('update:end-date', null)
     }
 
+    const handleOnChange = (value: string, input: string) => {
+      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(
         'div',
@@ -671,17 +698,13 @@ const CDateRangePicker = defineComponent({
             onClick: () => {
               selectEndDate.value = false
             },
-            onInput: (event: Event) => {
-              const date = getLocalDateFromString(
-                (event.target as HTMLInputElement).value,
-                props.locale,
-                props.timepicker,
-              )
-              if (date instanceof Date && date.getTime()) {
-                calendarDate.value = date
-                startDate.value = date
-              }
-            },
+            onChange: (event: Event) =>
+              handleOnChange((event.target as HTMLInputElement).value, 'start'),
+            onInput: (event: Event) =>
+              useDebouncedCallback(
+                () => handleOnChange((event.target as HTMLInputElement).value, 'start'),
+                props.inputOnChangeDelay,
+              ),
             placeholder: Array.isArray(props.placeholder)
               ? props.placeholder[0]
               : props.placeholder,
@@ -715,17 +738,13 @@ const CDateRangePicker = defineComponent({
               onClick: () => {
                 selectEndDate.value = true
               },
-              onInput: (event: Event) => {
-                const date = getLocalDateFromString(
-                  (event.target as HTMLInputElement).value,
-                  props.locale,
-                  props.timepicker,
-                )
-                if (date instanceof Date && date.getTime()) {
-                  calendarDate.value = date
-                  endDate.value = date
-                }
-              },
+              onChange: (event: Event) =>
+                handleOnChange((event.target as HTMLInputElement).value, 'end'),
+              onInput: (event: Event) =>
+                useDebouncedCallback(
+                  () => handleOnChange((event.target as HTMLInputElement).value, 'end'),
+                  props.inputOnChangeDelay,
+                ),
               placeholder: props.placeholder[1],
               readonly: props.inputReadOnly || typeof props.format === 'string',
               required: props.required,
@@ -907,8 +926,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,

package/src/components/time-picker/CTimePickerRollCol.ts

@@ -1,4 +1,6 @@
-import { defineComponent, h, onUpdated, PropType, ref } from 'vue'
+import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'
+
+import { useIsVisible } from '../../composables'
 
 export interface Element {
   value: number | string
@@ -19,17 +21,29 @@ const CTimePickerRollCol = defineComponent({
   emits: ['click'],
   setup(props, { emit }) {
     const init = ref(true)
-    const colRef = ref<HTMLDivElement>()
+    const colRef = ref<HTMLElement>()
+    const isVisible = useIsVisible(colRef)
 
-    onUpdated(() => {
+    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: KeyboardEvent, value: number | string) => {

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -94,7 +94,7 @@ const CVirtualScroller = defineComponent({
                   }),
                 },
                 ref: (node) => {
-                  if (node && (node as HTMLElement).offsetHeight) {
+                  if (itemHeight.value === 0 && node && (node as HTMLElement).offsetHeight) {
                     itemHeight.value =
                       (node as HTMLElement).offsetHeight +
                       Number.parseFloat(getComputedStyle(node as HTMLElement).marginTop) +

package/src/composables/index.ts

@@ -1,3 +1,5 @@
+import { useDebouncedCallback } from './useDebouncedCallback'
+import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 
-export { usePopper }
+export { useDebouncedCallback, useIsVisible, usePopper }

package/src/composables/useDebouncedCallback.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = ref<ReturnType<typeof setTimeout>>()
+  const debouncedFn = (...args: any[]) => {
+    const handler = () => {
+      clearTimeout(timeout.value)
+      callback(...args)
+    }
+
+    clearTimeout(timeout.value)
+    timeout.value = setTimeout(handler, delay)
+  }
+
+  return debouncedFn()
+}

package/src/composables/useIsVisible.ts

@@ -0,0 +1,19 @@
+import { onMounted, onUnmounted, ref, Ref } from 'vue'
+
+export const useIsVisible = (el: Ref<HTMLElement | undefined>) => {
+  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
+}