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

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

@@ -0,0 +1,410 @@
+import { defineComponent, h, ref, watch } from 'vue'
+
+import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
+import { CPicker } from '../picker'
+import { CTimePickerRollCol } from './CTimePickerRollCol'
+
+import {
+  convert12hTo24h,
+  convertTimeToDate,
+  getAmPm,
+  getListOfHours,
+  getMinutesOrSeconds,
+  getSelectedHour,
+  getSelectedMinutes,
+  getSelectedSeconds,
+  isAmPm,
+  isValidTime,
+} from '../../utils/time'
+
+import { Color } from '../props'
+
+const CTimePicker = defineComponent({
+  name: 'CTimePicker',
+  props: {
+    ...CPicker.props,
+    /**
+     * Toggle visibility or set the content of cancel button.
+     */
+    cancelButton: {
+      type: [Boolean, String],
+      default: 'Cancel',
+    },
+    /**
+     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    cancelButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the cancel button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    cancelButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the cancel button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    cancelButtonVariant: {
+      type: String,
+      default: 'ghost',
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Toggle visibility of the cleaner button.
+     */
+    cleaner: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle visibility or set the content of confirm button.
+     */
+    confirmButton: {
+      type: [Boolean, String],
+      default: 'OK',
+    },
+    /**
+     * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    confirmButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the confirm button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    confirmButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the confirm button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    confirmButtonVariant: {
+      type: String,
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Toggle visibility or set the content of the input indicator.
+     */
+    indicator: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle the readonly state for the component.
+     */
+    inputReadOnly: Boolean,
+    /**
+     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     */
+    locale: {
+      type: String,
+      defalut: 'default',
+    },
+    /**
+     * Specifies a short hint that is visible in the input.
+     */
+    placeholder: {
+      type: String,
+      default: 'Select time',
+    },
+    /**
+     * Size the component small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Initial selected time.
+     */
+    time: {
+      type: [Date, String],
+    },
+    /**
+     * Set the time picker variant to a roll or select.
+     *
+     * @values 'roll', 'select'
+     */
+    variant: {
+      type: String,
+      default: 'roll',
+      validator: (value: string) => {
+        return ['roll', 'select'].includes(value)
+      },
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the time changed.
+     */
+    'change',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { emit, slots }) {
+    const date = ref<Date | null>(convertTimeToDate(props.time))
+    const initialDate = ref<Date | null>(null)
+    const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
+
+    watch(
+      () => props.time,
+      () => {
+        date.value = convertTimeToDate(props.time)
+      },
+    )
+
+    watch(date, () => {
+      if (date.value) {
+        ampm.value = getAmPm(new Date(date.value), props.locale)
+      }
+    })
+
+    const handleClear = (event: Event) => {
+      event.stopPropagation()
+      date.value = null
+    }
+
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+      const _date = date.value || new Date('1970-01-01')
+
+      if (set === 'toggle') {
+        if (value === 'am') {
+          _date.setHours(_date.getHours() - 12)
+        }
+        if (value === 'pm') {
+          _date.setHours(_date.getHours() + 12)
+        }
+      }
+
+      if (set === 'hours') {
+        if (isAmPm(props.locale)) {
+          _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
+        } else {
+          _date.setHours(parseInt(value))
+        }
+      }
+
+      if (set === 'minutes') {
+        _date.setMinutes(parseInt(value))
+      }
+
+      if (set === 'seconds') {
+        _date.setSeconds(parseInt(value))
+      }
+
+      date.value = new Date(_date)
+      emit('change', _date.toTimeString(), _date.toLocaleTimeString(), _date)
+    }
+
+    const InputGroup = () =>
+      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
+        h(CFormInput, {
+          disabled: props.disabled,
+          onInput: (event) => {
+            if (isValidTime(event.target.value)) {
+              date.value = convertTimeToDate(event.target.value)
+            }
+          },
+          placeholder: props.placeholder,
+          readonly: props.inputReadOnly,
+          value: date.value ? date.value.toLocaleTimeString(props.locale) : '',
+        }),
+        (props.indicator || props.cleaner) &&
+          h(CInputGroupText, {}, () => [
+            props.indicator &&
+              h(
+                'span',
+                {
+                  class: 'picker-input-group-indicator',
+                },
+                slots.indicator
+                  ? slots.indicator()
+                  : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
+              ),
+            props.cleaner &&
+              h(
+                'span',
+                {
+                  class: 'picker-input-group-cleaner',
+                  onClick: (event: Event) => handleClear(event),
+                  role: 'button',
+                },
+                slots.cleaner
+                  ? slots.cleaner()
+                  : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
+              ),
+          ]),
+      ])
+
+    const TimePickerSelect = () => [
+      h('span', { class: 'time-picker-inline-icon' }),
+      h(CFormSelect, {
+        disabled: props.disabled,
+        options: getListOfHours(props.locale).map((option) => {
+          return {
+            value: option.value.toString(),
+            label: option.label,
+          }
+        }),
+        onChange: (event) => handleTimeChange('hours', event.target.value),
+        ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+      }),
+      ':',
+      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),
+        ...(date.value && { value: getSelectedMinutes(date.value) }),
+      }),
+      ':',
+      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),
+        ...(date.value && { value: getSelectedSeconds(date.value) }),
+      }),
+      isAmPm(props.locale) &&
+        h(CFormSelect, {
+          disabled: props.disabled,
+          options: [
+            { value: 'am', label: 'AM' },
+            { value: 'pm', label: 'PM' },
+          ],
+          onChange: (event) => handleTimeChange('toggle', event.target.value),
+          value: ampm.value,
+        }),
+    ]
+
+    const TimePickerRoll = () => [
+      h(CTimePickerRollCol, {
+        elements: getListOfHours(props.locale),
+        onClick: (index: number) => handleTimeChange('hours', index.toString()),
+        selected: getSelectedHour(date.value, props.locale),
+      }),
+      h(CTimePickerRollCol, {
+        elements: getMinutesOrSeconds(props.locale),
+        onClick: (index: number) => handleTimeChange('minutes', index.toString()),
+        selected: getSelectedMinutes(date.value),
+      }),
+      h(CTimePickerRollCol, {
+        elements: getMinutesOrSeconds(props.locale),
+        onClick: (index: number) => handleTimeChange('seconds', index.toString()),
+        selected: getSelectedSeconds(date.value),
+      }),
+      isAmPm(props.locale) &&
+        h(CTimePickerRollCol, {
+          elements: [
+            { value: 'am', label: 'AM' },
+            { value: 'pm', label: 'PM' },
+          ],
+          onClick: (value: string) => handleTimeChange('toggle', value),
+          selected: ampm.value,
+        }),
+    ]
+
+    return () =>
+      h(
+        CPicker,
+        {
+          cancelButton: props.cancelButton,
+          cancelButtonColor: props.cancelButtonColor,
+          cancelButtonSize: props.cancelButtonSize,
+          cancelButtonVariant: props.cancelButtonVariant,
+          class: 'time-picker',
+          confirmButton: props.confirmButton,
+          confirmButtonColor: props.confirmButtonColor,
+          confirmButtonSize: props.confirmButtonSize,
+          confirmButtonVariant: props.confirmButtonVariant,
+          container: props.container,
+          disabled: props.disabled,
+          footer: true,
+          onCancel: () => {
+            if (initialDate.value) {
+              date.value = new Date(initialDate.value)
+            }
+          },
+          onHide: () => {
+            emit('hide')
+          },
+          onShow: () => {
+            if (date.value) {
+              initialDate.value = new Date(date.value)
+            }
+
+            emit('show')
+          },
+        },
+        {
+          ...(slots.cancelButton && {
+            cancelButton: () => slots.cancelButton && slots.cancelButton(),
+          }),
+          ...(slots.confirmButton && {
+            confirmButton: () => slots.confirmButton && slots.confirmButton(),
+          }),
+          toggler: () => InputGroup(),
+          default: () =>
+            h(
+              'div',
+              {
+                class: [
+                  'time-picker-body',
+                  {
+                    ['time-picker-roll']: props.variant === 'roll',
+                  },
+                ],
+              },
+              props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
+            ),
+        },
+      )
+  },
+})
+export { CTimePicker }

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