@coreui/vue-pro 4.3.0-beta.0 → 4.3.1

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/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap

@@ -2,4 +2,4 @@
 
 exports[`Customize CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\" type=\\"button\\">Default slot</button>"`;
 
-exports[`Loads and display CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;
+exports[`Loads and display CToastClose component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;

package/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToastHeader component renders correctly 1`] = `"<div class=\\"toast-header\\">Default slot<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></div>"`;
+exports[`Customize CToastHeader component renders correctly 1`] = `"<div class=\\"toast-header\\">Default slot<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></div>"`;
 
 exports[`Loads and display CToastHeader component renders correctly 1`] = `
 "<div class=\\"toast-header\\">Default slot

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/directives/v-c-popover.ts

@@ -96,7 +96,7 @@ export default {
       })
     }
   },
-  unmounted(binding: DirectiveBinding): void {
+  unmounted(_el: HTMLElement, binding: DirectiveBinding): void {
     const popover = binding.arg && document.getElementById(binding.arg)
     popover && popover.remove()
   },

package/src/directives/v-c-tooltip.ts

@@ -92,7 +92,7 @@ export default {
       })
     }
   },
-  beforeUnmount(binding: DirectiveBinding): void {
+  beforeUnmount(_el: HTMLElement, binding: DirectiveBinding): void {
     const tooltip = binding.arg && document.getElementById(binding.arg)
     tooltip && tooltip.remove()
   },

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'))
+}