@coreui/vue-pro 4.3.0-beta.1 → 4.3.0

package/src/components/offcanvas/COffcanvas.ts

@@ -1,6 +1,9 @@
 import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
+
 import { CBackdrop } from '../backdrop'
+
 import { vVisible } from '../../directives/v-c-visible'
+import { executeAfterTransition } from './../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -88,9 +91,7 @@ const COffcanvas = defineComponent({
 
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.visibility = 'visible'
         el.classList.add('show')
@@ -98,13 +99,10 @@ const COffcanvas = defineComponent({
     }
     const handleAfterEnter = () => {
       window.addEventListener('mousedown', handleMouseDown)
-      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')

package/src/components/picker/CPicker.ts

@@ -143,6 +143,7 @@ const CPicker = defineComponent({
 
     const Footer = () =>
       h('div', { class: 'picker-footer' }, [
+        slots.footer && slots.footer(),
         props.cancelButton &&
           h(
             CButton,

package/src/components/popover/CPopover.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CPopover = defineComponent({
   name: 'CPopover',
   props: {
@@ -83,18 +85,16 @@ const CPopover = defineComponent({
       emit('show')
       initPopper()
       el.classList.add('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
+      executeAfterTransition(() => {
         done()
         destroyPopper()
-      })
+      }, el as HTMLElement)
     }
 
     const handleToggle = (event: Event) => {

package/src/components/tabs/CTabPane.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
@@ -30,20 +32,16 @@ const CTabPane = defineComponent({
       firstRender.value = false
       emit('show')
       setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
         el.classList.add('show')
       }, 1)
-      el.addEventListener('transitionend', () => {
-        done()
-      })
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       firstRender.value = false
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     return () =>

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

@@ -9,7 +9,8 @@ import {
   convertTimeToDate,
   getAmPm,
   getListOfHours,
-  getMinutesOrSeconds,
+  getListOfMinutes,
+  getListOfSeconds,
   getSelectedHour,
   getSelectedMinutes,
   getSelectedSeconds,
@@ -288,27 +289,21 @@ const CTimePicker = defineComponent({
         ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
       }),
       ':',
+      // @ts-expect-error the getListOfMinutes function returns corect type
       h(CFormSelect, {
         disabled: props.disabled,
-        options: Array.from({ length: 60 }, (_, i) => {
-          return {
-            value: i.toString(),
-            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
-          }
-        }),
-        onChange: (event) => handleTimeChange('minutes', event.target.value),
+        options: getListOfMinutes(props.locale, true),
+        onChange: (event: Event) =>
+          handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
         ...(date.value && { value: getSelectedMinutes(date.value) }),
       }),
       ':',
+      // @ts-expect-error the getListOfMinutes function returns corect type
       h(CFormSelect, {
         disabled: props.disabled,
-        options: Array.from({ length: 60 }, (_, i) => {
-          return {
-            value: i.toString(),
-            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
-          }
-        }),
-        onChange: (event) => handleTimeChange('seconds', event.target.value),
+        options: getListOfSeconds(props.locale, true),
+        onChange: (event: Event) =>
+          handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
         ...(date.value && { value: getSelectedSeconds(date.value) }),
       }),
       isAmPm(props.locale) &&
@@ -330,12 +325,12 @@ const CTimePicker = defineComponent({
         selected: getSelectedHour(date.value, props.locale),
       }),
       h(CTimePickerRollCol, {
-        elements: getMinutesOrSeconds(props.locale),
+        elements: getListOfMinutes(props.locale),
         onClick: (index: number) => handleTimeChange('minutes', index.toString()),
         selected: getSelectedMinutes(date.value),
       }),
       h(CTimePickerRollCol, {
-        elements: getMinutesOrSeconds(props.locale),
+        elements: getListOfSeconds(props.locale),
         onClick: (index: number) => handleTimeChange('seconds', index.toString()),
         selected: getSelectedSeconds(date.value),
       }),

package/src/components/toast/CToast.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 import { Color } from '../props'
 
 const CToast = defineComponent({
@@ -79,29 +81,31 @@ const CToast = defineComponent({
     }
     provide('updateVisible', updateVisible)
 
+    const handleBeforeEnter = (el: RendererElement) => {
+      el.classList.add('showing')
+    }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
+      el.classList.add('show')
       setTimeout(() => {
-        el.classList.add('show')
+        el.classList.remove('showing')
       }, 1)
+
       if (props.index) {
         emit('show', props.index)
       } else {
         emit('show')
       }
     }
-    const handleBeforeLeave = (el: RendererElement) => {
-      el.classList.remove('show')
-    }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
-      el.classList.remove('show')
+      executeAfterTransition(() => done(), el as HTMLElement)
+      el.classList.add('showing')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
+      el.classList.remove('show')
       el.classList.add('hide')
       if (props.index) {
         emit('close', props.index)
@@ -115,6 +119,7 @@ const CToast = defineComponent({
         clearTimeout(timeout)
         timeout = window.setTimeout(() => {
           visible.value = false
+          emit('close')
         }, props.delay)
       }
     })
@@ -124,8 +129,8 @@ const CToast = defineComponent({
         Transition,
         {
           appear: true,
+          onBeforeEnter: (el) => handleBeforeEnter(el),
           onEnter: (el, done) => handleEnter(el, done),
-          onBeforeLeave: (el) => handleBeforeLeave(el),
           onLeave: (el, done) => handleLeave(el, done),
           onAfterLeave: (el) => handleAfterLeave(el),
         },

package/src/components/tooltip/CTooltip.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CTooltip = defineComponent({
   name: 'CTooltip',
   props: {
@@ -75,18 +77,16 @@ const CTooltip = defineComponent({
       emit('show')
       initPopper()
       el.classList.add('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
+      executeAfterTransition(() => {
         done()
         destroyPopper()
-      })
+      }, el as HTMLElement)
     }
 
     const handleToggle = (event: Event) => {

package/src/utils/calendar.ts

@@ -15,6 +15,52 @@ export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+    .replace('2013', '(?<year>[0-9]{2,4})')
+    .replace('12', '(?<month>[0-9]{1,2})')
+    .replace('31', '(?<day>[0-9]{1,2})')
+
+  if (time) {
+    regex = regex
+      .replace('5', '(?<hour>[0-9]{1,2})')
+      .replace('17', '(?<hour>[0-9]{1,2})')
+      .replace('19', '(?<minute>[0-9]{1,2})')
+      .replace('22', '(?<second>[0-9]{1,2})')
+      .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = RegExp(`${regex}`)
+  const partials = string.match(rgx)
+
+  if (partials === null) return
+
+  const newDate =
+    partials.groups &&
+    (time
+      ? new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+          partials.groups['ampm']
+            ? partials.groups['ampm'] === 'PM'
+              ? Number(partials.groups['hour']) + 12
+              : Number(partials.groups['hour'])
+            : Number(partials.groups['hour']),
+          Number(partials.groups['minute']),
+          Number(partials.groups['second']),
+        )
+      : new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+        ))
+
+  return newDate
+}
+
 export const getMonthName = (month: number, locale: string) => {
   const d = new Date()
   d.setDate(1)
@@ -115,6 +161,29 @@ export const getMonthDetails = (year: number, month: number, firstDayOfWeek: num
   return weeks
 }
 
+export const isDisableDateInRange = (
+  startDate?: Date | null,
+  endDate?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
+  if (startDate && endDate) {
+    const date = new Date(startDate)
+    let disabled = false
+
+    while (date < endDate) {
+      date.setDate(date.getDate() + 1)
+      if (isDateDisabled(date, null, null, dates)) {
+        disabled = true
+        break
+      }
+    }
+
+    return disabled
+  }
+
+  return false
+}
+
 export const isDateDisabled = (
   date: Date,
   min?: Date | null,
@@ -166,12 +235,20 @@ export const isLastDayOfMonth = (date: Date) => {
   return test.getMonth() !== month
 }
 
-export const isSameDateAs = (date: Date, date2: Date) => {
-  return (
-    date.getDate() == date2.getDate() &&
-    date.getMonth() == date2.getMonth() &&
-    date.getFullYear() == date2.getFullYear()
-  )
+export const isSameDateAs = (date: Date | null, date2: Date | null) => {
+  if (date instanceof Date && date2 instanceof Date) {
+    return (
+      date.getDate() === date2.getDate() &&
+      date.getMonth() === date2.getMonth() &&
+      date.getFullYear() === date2.getFullYear()
+    )
+  }
+
+  if (date === null && date2 === null) {
+    return true
+  }
+
+  return false
 }
 
 export const isStartDate = (date: Date, start: Date | null, end: Date | null) => {
@@ -181,9 +258,9 @@ export const isStartDate = (date: Date, start: Date | null, end: Date | null) =>
 export const isToday = (date: Date) => {
   const today = new Date()
   return (
-    date.getDate() == today.getDate() &&
-    date.getMonth() == today.getMonth() &&
-    date.getFullYear() == today.getFullYear()
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
   )
 }
 

package/src/utils/time.ts

@@ -34,11 +34,37 @@ export const getListOfHours = (locale: string) =>
     }
   })
 
-export const getMinutesOrSeconds = (locale: string) =>
+export const getListOfMinutes = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
+    const d = new Date()
+    d.setMinutes(i)
     return {
-      value: i,
-      label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+      value: valueAsString ? i.toString() : i,
+      label: d
+        .toLocaleTimeString(locale, {
+          hour: '2-digit',
+          hour12: false,
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(':')[1],
+    }
+  })
+
+export const getListOfSeconds = (locale: string, valueAsString = false) =>
+  Array.from({ length: 60 }, (_, i) => {
+    const d = new Date()
+    d.setSeconds(i)
+    return {
+      value: valueAsString ? i.toString() : i,
+      label: d
+        .toLocaleTimeString(locale, {
+          hour: '2-digit',
+          hour12: false,
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(':')[2],
     }
   })
 

package/src/utils/transition.ts

@@ -0,0 +1,65 @@
+const execute = (callback: () => void) => {
+  if (typeof callback === 'function') {
+    callback()
+  }
+}
+
+export const executeAfterTransition = (
+  callback: () => void,
+  transitionElement: HTMLElement,
+  waitForTransition = true,
+) => {
+  if (!waitForTransition) {
+    execute(callback)
+    return
+  }
+
+  const durationPadding = 5
+  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+  let called = false
+
+  const handler = ({ target }: { target: any }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener('transitionend', handler)
+    execute(callback)
+  }
+
+  transitionElement.addEventListener('transitionend', handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
+export const getTransitionDurationFromElement = (element: HTMLElement) => {
+  if (!element) {
+    return 0
+  }
+
+  // Get transition-duration of the element
+  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+
+  const floatTransitionDuration = Number.parseFloat(transitionDuration)
+  const floatTransitionDelay = Number.parseFloat(transitionDelay)
+
+  // Return 0 if element or transition duration is not found
+  if (!floatTransitionDuration && !floatTransitionDelay) {
+    return 0
+  }
+
+  // If multiple durations are defined, take the first
+  transitionDuration = transitionDuration.split(',')[0]
+  transitionDelay = transitionDelay.split(',')[0]
+
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
+}
+
+export const triggerTransitionEnd = (element: HTMLElement) => {
+  element.dispatchEvent(new Event('transitionend'))
+}