@coreui/vue-pro 4.2.0 → 4.3.0

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

@@ -0,0 +1,58 @@
+import { defineComponent, h, onUpdated, PropType, ref } from 'vue'
+
+export interface Element {
+  value: number | string
+  label: number | string
+}
+
+const CTimePickerRollCol = defineComponent({
+  name: 'CTimePickerRollCol',
+  props: {
+    elements: {
+      type: Array as PropType<Element[]>,
+      required: true,
+    },
+    selected: {
+      type: [Number, String],
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const init = ref(true)
+    const colRef = ref<HTMLDivElement>()
+
+    onUpdated(() => {
+      const nodeEl = colRef.value?.querySelector('.selected')
+      if (nodeEl && nodeEl instanceof HTMLElement) {
+        colRef.value?.scrollTo({
+          top: nodeEl.offsetTop,
+          behavior: init.value ? 'auto' : 'smooth',
+        })
+      }
+      init.value = false
+    })
+
+    return () =>
+      h(
+        'div',
+        { class: 'time-picker-roll-col', ref: colRef },
+        props.elements.map((element) => {
+          return h(
+            'div',
+            {
+              class: [
+                'time-picker-roll-cell',
+                {
+                  selected: element.value === props.selected,
+                },
+              ],
+              onClick: () => emit('click', element.value),
+              role: 'button',
+            },
+            element.label,
+          )
+        }),
+      )
+  },
+})
+export { CTimePickerRollCol }

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

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CTimePicker } from './CTimePicker'
+
+const CTimePickerPlugin = {
+  install: (app: App): void => {
+    app.component(CTimePicker.name, CTimePicker)
+  },
+}
+
+export { CTimePicker, CTimePickerPlugin }

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

@@ -0,0 +1,270 @@
+export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
+  d.toLocaleDateString(locale, options)
+
+export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
+  d.toLocaleTimeString(locale, options)
+
+export const createGroupsInArray = (arr: any[], numberOfGroups: number) => {
+  const perGroup = Math.ceil(arr.length / numberOfGroups)
+  return new Array(numberOfGroups)
+    .fill('')
+    .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
+}
+
+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)
+  d.setMonth(month)
+  return d.toLocaleString(locale, { month: 'long' })
+}
+
+export const getMonthsNames = (locale: string) => {
+  const months = []
+  const d = new Date()
+  d.setDate(1)
+
+  for (let i = 0; i < 12; i++) {
+    d.setMonth(i)
+    months.push(d.toLocaleString(locale, { month: 'short' }))
+  }
+
+  return months
+}
+
+export const getYears = (year: number) => {
+  const years = []
+  for (let _year = year - 6; _year < year + 6; _year++) {
+    years.push(_year)
+  }
+
+  return years
+}
+
+const getLeadingDays = (year: number, month: number, firstDayOfWeek: number) => {
+  // 0: sunday
+  // 1: monday
+  const dates = []
+  const d = new Date(year, month)
+  const y = d.getFullYear()
+  const m = d.getMonth()
+  const firstWeekday = new Date(y, m, 1).getDay()
+  let leadingDays = 6 - (6 - firstWeekday) - firstDayOfWeek
+
+  if (firstDayOfWeek) {
+    leadingDays = leadingDays < 0 ? 7 + leadingDays : leadingDays
+  }
+
+  for (let i = leadingDays * -1; i < 0; i++) {
+    dates.push({
+      date: new Date(y, m, i + 1),
+      month: 'previous',
+    })
+  }
+
+  return dates
+}
+
+const getMonthDays = (year: number, month: number) => {
+  const dates = []
+  const lastDay = new Date(year, month + 1, 0).getDate()
+  for (let i = 1; i <= lastDay; i++) {
+    dates.push({
+      date: new Date(year, month, i),
+      month: 'current',
+    })
+  }
+  return dates
+}
+
+const getTrailingDays = (
+  year: number,
+  month: number,
+  leadingDays: { date: Date; month: string }[],
+  monthDays: { date: Date; month: string }[],
+) => {
+  const dates = []
+  const days = 42 - (leadingDays.length + monthDays.length)
+  for (let i = 1; i <= days; i++) {
+    dates.push({
+      date: new Date(year, month + 1, i),
+      month: 'next',
+    })
+  }
+  return dates
+}
+
+export const getMonthDetails = (year: number, month: number, firstDayOfWeek: number) => {
+  const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
+  const daysThisMonth = getMonthDays(year, month)
+  const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
+  const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
+
+  const weeks: { date: Date; month: string }[][] = []
+
+  days.forEach((day, index) => {
+    if (index % 7 === 0 || weeks.length === 0) {
+      weeks.push([])
+    }
+    weeks[weeks.length - 1].push(day)
+  })
+
+  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,
+  max?: Date | null,
+  dates?: Date[] | Date[][],
+) => {
+  let disabled
+  if (dates) {
+    dates.forEach((_date: Date | Date[]) => {
+      if (Array.isArray(_date)) {
+        if (isDateInRange(date, _date[0], _date[1])) {
+          disabled = true
+        }
+      }
+      if (_date instanceof Date) {
+        if (isSameDateAs(date, _date)) {
+          disabled = true
+        }
+      }
+    })
+  }
+  if (min && date < min) {
+    disabled = true
+  }
+
+  if (max && date > max) {
+    disabled = true
+  }
+  return disabled
+}
+
+export const isDateInRange = (date: Date, start: Date | null, end: Date | null) => {
+  return start && end && start <= date && date <= end
+}
+
+export const isDateSelected = (date: Date, start: Date | null, end: Date | null) => {
+  return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date))
+}
+
+export const isEndDate = (date: Date, start: Date | null, end: Date | null) => {
+  return start && end && isSameDateAs(end, date) && start < end
+}
+
+export const isLastDayOfMonth = (date: Date) => {
+  const test = new Date(date.getTime())
+  const month = test.getMonth()
+
+  test.setDate(test.getDate() + 1)
+  return test.getMonth() !== month
+}
+
+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) => {
+  return start && end && isSameDateAs(start, date) && start < end
+}
+
+export const isToday = (date: Date) => {
+  const today = new Date()
+  return (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  )
+}
+
+export const isValidDate = (date: string) => {
+  const d = new Date(date)
+  return d instanceof Date && d.getTime()
+}

package/src/utils/time.ts

@@ -0,0 +1,84 @@
+export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
+  if (abbr === 'am' && hour === 12) {
+    return 0
+  }
+  if (abbr === 'am') {
+    return hour
+  }
+  if (abbr === 'pm' && hour === 12) {
+    return 12
+  }
+  return hour + 12
+}
+
+export const convert24hTo12h = (hour: number) => hour % 12 || 12
+
+export const convertTimeToDate = (time: Date | string | null | undefined) =>
+  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+
+export const getAmPm = (date: Date, locale: string) => {
+  if (date.toLocaleTimeString(locale).includes('AM')) {
+    return 'am'
+  }
+  if (date.toLocaleTimeString(locale).includes('PM')) {
+    return 'pm'
+  }
+  return date.getHours() >= 12 ? 'pm' : 'am'
+}
+
+export const getListOfHours = (locale: string) =>
+  Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+    return {
+      value: isAmPm(locale) ? i + 1 : i,
+      label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+    }
+  })
+
+export const getListOfMinutes = (locale: string, valueAsString = false) =>
+  Array.from({ length: 60 }, (_, i) => {
+    const d = new Date()
+    d.setMinutes(i)
+    return {
+      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],
+    }
+  })
+
+export const getSelectedHour = (date: Date | null, locale: string) =>
+  date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : ''
+
+export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')
+
+export const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')
+
+export const isAmPm = (locale: string) =>
+  ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))
+
+export const isValidTime = (time: string) => {
+  const d = new Date(`1970-01-01 ${time}`)
+  return d instanceof Date && d.getTime()
+}

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