@coreui/vue-pro 4.1.3 → 4.3.0-beta.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/__tests__/__snapshots__/CToastClose.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\">Default slot</button>"`;
+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>"`;

package/src/utils/calendar.ts

@@ -0,0 +1,193 @@
+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 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 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, date2: Date) => {
+  return (
+    date.getDate() == date2.getDate() &&
+    date.getMonth() == date2.getMonth() &&
+    date.getFullYear() == date2.getFullYear()
+  )
+}
+
+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,58 @@
+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 getMinutesOrSeconds = (locale: string) =>
+  Array.from({ length: 60 }, (_, i) => {
+    return {
+      value: i,
+      label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+    }
+  })
+
+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()
+}