@coreui/vue-pro 4.2.0 → 4.3.0

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -0,0 +1,733 @@
+import { defineComponent, h, onMounted, PropType, ref, watch } from 'vue'
+
+import { format as dateFormat } from 'date-fns'
+
+import { CButton } from '../button'
+import { CCalendar } from '../calendar'
+import { CFormInput, CInputGroup, CInputGroupText } from '../form'
+import { CPicker } from '../picker'
+import { CTimePicker } from '../time-picker'
+
+import { getLocalDateFromString } from '../../utils/calendar'
+
+import { Color } from '../props'
+
+const CDateRangePicker = defineComponent({
+  name: 'CDateRangePicker',
+  props: {
+    /**
+     * The number of calendars that render on desktop devices.
+     */
+    calendars: {
+      type: Number,
+      default: 2,
+    },
+    /**
+     * Default date of the component
+     */
+    calendarDate: {
+      type: [Date, String],
+    },
+    /**
+     * 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 the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Specify the list of dates that cannot be selected.
+     */
+    disabledDates: {
+      type: Array as PropType<Date[] | Date[][]>,
+    },
+    /**
+     * Initial selected to date (range).
+     */
+    endDate: {
+      type: [Date, String],
+      required: false,
+    },
+    /**
+     * Sets the day of start week.
+     * - 0 - Sunday,
+     * - 1 - Monday,
+     * - 2 - Tuesday,
+     * - 3 - Wednesday,
+     * - 4 - Thursday,
+     * - 5 - Friday,
+     * - 6 - Saturday,
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Set date format.
+     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
+     */
+    format: String,
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: Boolean,
+    /**
+     * 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,
+      default: 'default',
+    },
+    /**
+     * Max selectable date.
+     */
+    maxDate: {
+      type: [Date, String],
+    },
+    /**
+     * Min selectable date.
+     */
+    minDate: {
+      type: [Date, String],
+    },
+    /**
+     * Show arrows navigation.
+     */
+    navigation: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Specifies a short hint that is visible in the input.
+     */
+    placeholder: {
+      type: [String, Array] as PropType<String | String[]>,
+      default: () => ['Start date', 'End date'],
+    },
+    /**
+     * @ignore
+     */
+    range: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Predefined date ranges the user can select from.
+     */
+    ranges: Object,
+    /**
+     * Toggle select mode between start and end date.
+     */
+    selectEndDate: Boolean,
+    /**
+     * Default icon or character character that separates two dates.
+     */
+    separator: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Size the component small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      required: false,
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Initial selected date.
+     */
+    startDate: {
+      type: [Date, String],
+    },
+    /**
+     * Provide an additional time selection by adding select boxes to choose times.
+     */
+    timepicker: Boolean,
+    /**
+     * Toggle visibility or set the content of today button.
+     */
+    todayButton: {
+      type: [Boolean, String],
+      default: 'Today',
+    },
+    /**
+     * Sets the color context of the today button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    todayButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the today button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    todayButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the today button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    todayButtonVariant: {
+      type: String,
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Set length or format of day name.
+     *
+     * @type  number | 'long' | 'narrow' | 'short'
+     */
+    weekdayFormat: {
+      type: [Number, String],
+      default: 2,
+      validator: (value: string | number) => {
+        if (typeof value === 'string') {
+          return ['long', 'narrow', 'short'].includes(value)
+        }
+        if (typeof value === 'number') {
+          return true
+        }
+        return false
+      },
+    },
+  },
+  emit: [
+    /**
+     * Callback fired when the end date changed.
+     */
+    'end-date-change',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+    /**
+     * Callback fired when the start date changed.
+     */
+    'start-date-change',
+  ],
+  setup(props, { slots, emit }) {
+    const calendarDate = ref<Date>(
+      props.calendarDate
+        ? new Date(props.calendarDate)
+        : props.startDate
+        ? new Date(props.startDate)
+        : props.endDate
+        ? new Date(props.endDate)
+        : new Date(),
+    )
+    const inputStartHoverValue = ref<Date | null>(null)
+    const inputEndHoverValue = ref<Date | null>(null)
+    const startDate = ref<Date | null>(props.startDate ? new Date(props.startDate) : null)
+    const endDate = ref<Date | null>(props.endDate ? new Date(props.endDate) : null)
+    const initialStartDate = ref<Date | null>(startDate.value ? new Date(startDate.value) : null)
+    const initialEndDate = ref<Date | null>(endDate.value ? new Date(endDate.value) : null)
+    const maxDate = ref(props.maxDate && new Date(props.maxDate))
+    const minDate = ref(props.minDate && new Date(props.minDate))
+    const selectEndDate = ref(false)
+
+    const isMobile = ref(false)
+
+    onMounted(() => {
+      isMobile.value = window.innerWidth < 768
+    })
+
+    watch(
+      () => props.startDate,
+      () => {
+        if (props.startDate) {
+          calendarDate.value = new Date(props.startDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.endDate,
+      () => {
+        if (props.endDate) {
+          calendarDate.value = new Date(props.endDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.maxDate,
+      () => {
+        if (props.maxDate) {
+          maxDate.value = new Date(props.maxDate)
+        }
+      },
+    )
+
+    watch(
+      () => props.minDate,
+      () => {
+        if (props.minDate) {
+          minDate.value = new Date(props.minDate)
+        }
+      },
+    )
+
+    const formatDate = (date: Date) => {
+      return props.format
+        ? dateFormat(date, props.format)
+        : props.timepicker
+        ? date.toLocaleString(props.format)
+        : date.toLocaleDateString(props.format)
+    }
+
+    const setInputValue = (date: Date | null) => {
+      if (date) {
+        return formatDate(date)
+      }
+
+      return ''
+    }
+
+    const handleCalendarCellHover = (date: Date | null) => {
+      if (selectEndDate.value) {
+        inputEndHoverValue.value = date
+        return
+      }
+      inputStartHoverValue.value = date
+    }
+
+    const handleCalendarDateChange = (date: Date, difference?: number) => {
+      if (difference) {
+        calendarDate.value = new Date(date.getFullYear(), date.getMonth() - difference, 1)
+        return
+      }
+
+      calendarDate.value = date
+    }
+
+    const handleStartDateChange = (date: Date) => {
+      startDate.value = date
+      inputStartHoverValue.value = null
+      if (props.range) {
+        selectEndDate.value = true
+      }
+
+      emit('start-date-change', date, date ? formatDate(date) : undefined)
+    }
+
+    const handleEndDateChange = (date: Date) => {
+      endDate.value = date
+      inputEndHoverValue.value = null
+      if (props.range) {
+        selectEndDate.value = false
+      }
+
+      emit('end-date-change', date, date ? formatDate(date) : undefined)
+    }
+
+    const handleClear = (event: Event) => {
+      event.stopPropagation()
+      startDate.value = null
+      endDate.value = null
+      inputStartHoverValue.value = null
+      inputEndHoverValue.value = null
+    }
+
+    const InputGroup = () =>
+      h(
+        CInputGroup,
+        {
+          class: 'picker-input-group',
+          size: props.size,
+        },
+        () => [
+          h(CFormInput, {
+            class: {
+              hover: inputStartHoverValue.value,
+            },
+            disabled: props.disabled,
+            onClick: () => {
+              selectEndDate.value = false
+            },
+            onInput: (event) => {
+              const date = getLocalDateFromString(
+                event.target.value,
+                props.locale,
+                props.timepicker,
+              )
+              if (date instanceof Date && date.getTime()) {
+                calendarDate.value = date
+                startDate.value = date
+              }
+            },
+            placeholder: Array.isArray(props.placeholder)
+              ? props.placeholder[0]
+              : props.placeholder,
+            readonly: props.inputReadOnly || typeof props.format === 'string',
+            value: inputStartHoverValue.value
+              ? setInputValue(inputStartHoverValue.value)
+              : setInputValue(startDate.value),
+          }),
+          props.range &&
+            props.separator !== false &&
+            h(CInputGroupText, {}, () =>
+              slots.separator
+                ? slots.separator()
+                : h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' }),
+            ),
+          props.range &&
+            h(CFormInput, {
+              class: {
+                hover: inputEndHoverValue.value,
+              },
+              disabled: props.disabled,
+              onClick: () => {
+                selectEndDate.value = true
+              },
+              onInput: (event) => {
+                const date = getLocalDateFromString(
+                  event.target.value,
+                  props.locale,
+                  props.timepicker,
+                )
+                if (date instanceof Date && date.getTime()) {
+                  calendarDate.value = date
+                  endDate.value = date
+                }
+              },
+              placeholder: props.placeholder[1],
+              readonly: props.inputReadOnly || typeof props.format === 'string',
+              value: inputEndHoverValue.value
+                ? setInputValue(inputEndHoverValue.value)
+                : setInputValue(endDate.value),
+            }),
+          (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 date-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 date-picker-cleaner-icon' }),
+                ),
+            ]),
+        ],
+      )
+
+    return () =>
+      h(
+        CPicker,
+        {
+          cancelButton: props.cancelButton,
+          cancelButtonColor: props.cancelButtonColor,
+          cancelButtonSize: props.cancelButtonSize,
+          cancelButtonVariant: props.cancelButtonVariant,
+          class: 'date-picker',
+          confirmButton: props.confirmButton,
+          confirmButtonColor: props.confirmButtonColor,
+          confirmButtonSize: props.confirmButtonSize,
+          confirmButtonVariant: props.confirmButtonVariant,
+          disabled: props.disabled,
+          footer: props.footer || props.timepicker,
+          onCancel: () => {
+            startDate.value = initialStartDate.value
+            endDate.value = initialEndDate.value
+          },
+          onHide: () => {
+            emit('hide')
+          },
+          onShow: () => {
+            if (startDate.value) {
+              initialStartDate.value = new Date(startDate.value)
+            }
+
+            if (endDate.value) {
+              initialEndDate.value = new Date(endDate.value)
+            }
+
+            emit('show')
+          },
+        },
+        {
+          ...(slots.cancelButton && {
+            cancelButton: () => slots.cancelButton && slots.cancelButton(),
+          }),
+          ...(slots.confirmButton && {
+            confirmButton: () => slots.confirmButton && slots.confirmButton(),
+          }),
+          toggler: () => InputGroup(),
+          footer: () =>
+            h(
+              CButton,
+              {
+                class: 'me-auto',
+                color: props.todayButtonColor,
+                size: props.todayButtonSize,
+                variant: props.todayButtonVariant,
+                onClick: () => {
+                  const date = new Date()
+                  startDate.value = date
+                  endDate.value = date
+                  calendarDate.value = date
+                },
+              },
+              () => props.todayButton,
+            ),
+          default: () =>
+            h(
+              'div',
+              {
+                class: 'date-picker-body',
+              },
+              [
+                props.ranges &&
+                  h(
+                    'div',
+                    { class: 'date-picker-ranges' },
+                    Object.keys(props.ranges).map((key: string) =>
+                      h(
+                        CButton,
+                        {
+                          color: 'secondary',
+                          onClick: () => {
+                            if (props.ranges) {
+                              startDate.value = props.ranges[key][0]
+                              endDate.value = props.ranges[key][1]
+                            }
+                          },
+                          variant: 'ghost',
+                        },
+                        () => key,
+                      ),
+                    ),
+                  ),
+                h(
+                  'div',
+                  { class: 'date-picker-calendars' },
+                  h(
+                    CCalendar,
+                    {
+                      calendarDate: new Date(
+                        calendarDate.value.getFullYear(),
+                        calendarDate.value.getMonth(),
+                        1,
+                      ),
+                      calendars: props.calendars,
+                      disabledDates: props.disabledDates,
+                      ...(endDate.value && { endDate: endDate.value }),
+                      firstDayOfWeek: props.firstDayOfWeek,
+                      locale: props.locale,
+                      maxDate: maxDate.value,
+                      minDate: minDate.value,
+                      navigation: props.navigation,
+                      range: true,
+                      selectEndDate: selectEndDate.value,
+                      ...(startDate.value && { startDate: startDate.value }),
+                      onCalendarCellHover: (date: Date | null) => handleCalendarCellHover(date),
+                      onCalendarDateChange: (date: Date) => handleCalendarDateChange(date),
+                      onStartDateChange: (date: Date) => handleStartDateChange(date),
+                      onEndDateChange: (date: Date) => handleEndDateChange(date),
+                    },
+                    {
+                      /**
+                       * @slot Location for next icon.
+                       */
+                      ...(slots.navNextIcon && {
+                        navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
+                      }),
+                      /**
+                       * @slot Location for next double icon.
+                       */
+                      ...(slots.navNextDoubleIcon && {
+                        navNextDoubleIcon: () =>
+                          slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
+                      }),
+                      /**
+                       * @slot Location for previous icon.
+                       */
+                      ...(slots.navPrevIcon && {
+                        navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
+                      }),
+                      /**
+                       * @slot Location for double previous icon.
+                       */
+                      ...(slots.navPrevDoubleIcon && {
+                        navPrevDoubleIcon: () =>
+                          slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
+                      }),
+                    },
+                  ),
+                ),
+                props.timepicker &&
+                  h(
+                    'div',
+                    { class: 'date-picker-timepickers' },
+                    isMobile.value || (props.range && props.calendars === 1)
+                      ? [
+                          h(CTimePicker, {
+                            container: 'inline',
+                            disabled: startDate.value === null ? true : false,
+                            locale: props.locale,
+                            onChange: (_: any, __: any, date: Date) => handleStartDateChange(date),
+                            time: startDate.value,
+                            variant: 'select',
+                          }),
+                          h(CTimePicker, {
+                            container: 'inline',
+                            disabled: endDate.value === null ? true : false,
+                            locale: props.locale,
+                            onChange: (_: any, __: any, date: Date) => handleEndDateChange(date),
+                            time: endDate.value,
+                            variant: 'select',
+                          }),
+                        ]
+                      : [...Array(props.calendars)].map((_, index) =>
+                          h(CTimePicker, {
+                            container: 'inline',
+                            disabled:
+                              index === 0
+                                ? startDate.value === null
+                                  ? true
+                                  : false
+                                : endDate.value === null
+                                ? true
+                                : false,
+                            locale: props.locale,
+                            onChange: (_: any, __: any, date: Date) =>
+                              index === 0 ? handleStartDateChange(date) : handleEndDateChange(date),
+                            time: index === 0 ? startDate.value : endDate.value,
+                            variant: 'select',
+                          }),
+                        ),
+                  ),
+              ],
+            ),
+        },
+      )
+  },
+})
+
+export { CDateRangePicker }