@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

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

@@ -4,12 +4,11 @@ import { format as dateFormat } from 'date-fns'
 
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
-import { CFormInput, CInputGroup, CInputGroupText } from '../form'
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { getLocalDateFromString } from '../calendar/utils'
+import { getLocalDateFromString } from './utils'
 
 import { Color } from '../props'
 
@@ -26,9 +25,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Default date of the component
      */
-    calendarDate: {
-      type: [Date, String],
-    },
+    calendarDate: [Date, String],
     /**
      * Toggle visibility or set the content of cancel button.
      */
@@ -154,40 +151,29 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the list of dates that cannot be selected.
      */
-    disabledDates: {
-      type: Array as PropType<Date[] | Date[][]>,
-    },
+    disabledDates: Array as PropType<Date[] | Date[][]>,
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-      type: [Date, String],
-      required: false,
-    },
+    endDate: [Date, String],
     /**
      * Provide valuable, actionable feedback.
      *
      * @since 4.6.0
      */
-    feedback: {
-      type: String,
-    },
+    feedback: String,
     /**
      * Provide valuable, actionable feedback.
      *
      * @since 4.6.0
      */
-    feedbackInvalid: {
-      type: String,
-    },
+    feedbackInvalid: String,
     /**
      * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
      *
      * @since 4.6.0
      */
-    feedbackValid: {
-      type: String,
-    },
+    feedbackValid: String,
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -235,15 +221,16 @@ const CDateRangePicker = defineComponent({
      *
      * @since 4.6.0
      */
-    invalid: Boolean,
+    invalid: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Add a caption for a component.
      *
      * @since 4.6.0
      */
-    label: {
-      type: String,
-    },
+    label: String,
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -254,15 +241,11 @@ const CDateRangePicker = defineComponent({
     /**
      * Max selectable date.
      */
-    maxDate: {
-      type: [Date, String],
-    },
+    maxDate: [Date, String],
     /**
      * Min selectable date.
      */
-    minDate: {
-      type: [Date, String],
-    },
+    minDate: [Date, String],
     /**
      * Show arrows navigation.
      */
@@ -280,7 +263,7 @@ const CDateRangePicker = defineComponent({
      * Specifies a short hint that is visible in the input.
      */
     placeholder: {
-      type: [String, Array] as PropType<String | String[]>,
+      type: [String, Array] as PropType<string | string[]>,
       default: () => ['Start date', 'End date'],
     },
     /**
@@ -294,10 +277,31 @@ const CDateRangePicker = defineComponent({
      * Predefined date ranges the user can select from.
      */
     ranges: Object,
+    /**
+     * When present, it specifies that must be filled out before submitting the form.
+     *
+     * @since 4.9.0
+     */
+    required: Boolean,
     /**
      * Toggle select mode between start and end date.
      */
     selectEndDate: Boolean,
+    /**
+     * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+     *
+     * @since 4.9.0
+     */
+    selectAdjacementDays: Boolean,
+    /**
+     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+     *
+     * @since 4.9.0
+     */
+    showAdjacementDays: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Default icon or character character that separates two dates.
      */
@@ -320,17 +324,13 @@ const CDateRangePicker = defineComponent({
     /**
      * Initial selected date.
      */
-    startDate: {
-      type: [Date, String],
-    },
+    startDate: [Date, String],
     /**
      * Add helper text to the component.
      *
      * @since 4.6.0
      */
-    text: {
-      type: String,
-    },
+    text: String,
     /**
      * Provide an additional time selection by adding select boxes to choose times.
      */
@@ -385,7 +385,10 @@ const CDateRangePicker = defineComponent({
      *
      * @since 4.6.0
      */
-    valid: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Toggle the visibility of the component.
      */
@@ -451,6 +454,10 @@ const CDateRangePicker = defineComponent({
     'update:end-date',
   ],
   setup(props, { slots, attrs, emit }) {
+    const inputEndRef = ref()
+    const inputStartRef = ref()
+    const formRef = ref()
+
     const visible = ref(props.visible)
     const calendarDate = ref<Date>(
       props.calendarDate
@@ -470,13 +477,20 @@ const CDateRangePicker = defineComponent({
     const maxDate = ref(props.maxDate && new Date(props.maxDate))
     const minDate = ref(props.minDate && new Date(props.minDate))
     const selectEndDate = ref(false)
-
+    const isValid = ref(props.valid || (props.invalid && false))
     const isMobile = ref(false)
 
     onMounted(() => {
       isMobile.value = window.innerWidth < 768
     })
 
+    watch(
+      () => [props.valid, props.invalid],
+      () => {
+        isValid.value = props.valid || (props.invalid && false)
+      },
+    )
+
     watch(
       () => props.startDate,
       () => {
@@ -515,12 +529,28 @@ const CDateRangePicker = defineComponent({
       },
     )
 
+    watch(inputStartRef, () => {
+      if (inputStartRef.value && inputStartRef.value.form) {
+        formRef.value = inputStartRef.value.form
+      }
+    })
+
+    watch([formRef, startDate, endDate], () => {
+      if (formRef.value) {
+        formRef.value.addEventListener('submit', (event: Event) => {
+          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+        })
+
+        handleFormValidation(formRef.value)
+      }
+    })
+
     const formatDate = (date: Date) => {
       return props.format
         ? dateFormat(date, props.format)
         : props.timepicker
-        ? date.toLocaleString(props.format)
-        : date.toLocaleDateString(props.format)
+        ? date.toLocaleString(props.locale)
+        : date.toLocaleDateString(props.locale)
     }
 
     const setInputValue = (date: Date | null) => {
@@ -548,6 +578,19 @@ const CDateRangePicker = defineComponent({
       calendarDate.value = date
     }
 
+    const handleFormValidation = (form: HTMLFormElement) => {
+      if (!form.classList.contains('was-validated')) {
+        return
+      }
+
+      if ((props.range && startDate.value && endDate.value) || (!props.range && startDate.value)) {
+        isValid.value = true
+        return
+      }
+
+      isValid.value = false
+    }
+
     const handleStartDateChange = (date: Date) => {
       startDate.value = date
       inputStartHoverValue.value = null
@@ -600,25 +643,27 @@ const CDateRangePicker = defineComponent({
 
     const InputGroup = () =>
       h(
-        CInputGroup,
+        'div',
         {
-          class: 'picker-input-group',
-          size: props.size,
+          class: 'date-picker-input-group',
         },
-        () => [
-          h(CFormInput, {
+        [
+          h('input', {
             autocomplete: 'off',
-            class: {
-              hover: inputStartHoverValue.value,
-            },
+            class: [
+              'date-picker-input',
+              {
+                hover: inputStartHoverValue.value,
+              },
+            ],
             disabled: props.disabled,
             ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
             onClick: () => {
               selectEndDate.value = false
             },
-            onInput: (event) => {
+            onInput: (event: Event) => {
               const date = getLocalDateFromString(
-                event.target.value,
+                (event.target as HTMLInputElement).value,
                 props.locale,
                 props.timepicker,
               )
@@ -631,31 +676,30 @@ const CDateRangePicker = defineComponent({
               ? props.placeholder[0]
               : props.placeholder,
             readonly: props.inputReadOnly || typeof props.format === 'string',
+            required: props.required,
+            ref: inputStartRef,
             value: inputStartHoverValue.value
               ? setInputValue(inputStartHoverValue.value)
               : setInputValue(startDate.value),
           }),
+          props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
           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, {
+            h('input', {
               autocomplete: 'off',
-              class: {
-                hover: inputEndHoverValue.value,
-              },
+              class: [
+                'date-picker-input',
+                {
+                  hover: inputEndHoverValue.value,
+                },
+              ],
               disabled: props.disabled,
               ...(props.id && { name: `${props.id}-end-date` }),
               onClick: () => {
                 selectEndDate.value = true
               },
-              onInput: (event) => {
+              onInput: (event: Event) => {
                 const date = getLocalDateFromString(
-                  event.target.value,
+                  (event.target as HTMLInputElement).value,
                   props.locale,
                   props.timepicker,
                 )
@@ -666,35 +710,19 @@ const CDateRangePicker = defineComponent({
               },
               placeholder: props.placeholder[1],
               readonly: props.inputReadOnly || typeof props.format === 'string',
+              required: props.required,
+              ref: inputEndRef,
               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' }),
-                ),
-            ]),
+          props.indicator && h('div', { class: 'date-picker-indicator' }),
+          props.cleaner &&
+            (startDate.value || endDate.value) &&
+            h('div', {
+              class: 'date-picker-cleaner',
+              onClick: (event: Event) => handleClear(event),
+            }),
         ],
       )
 
@@ -707,34 +735,30 @@ const CDateRangePicker = defineComponent({
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
           id: props.id,
-          invalid: props.invalid,
+          invalid: isValid.value === false ? true : false,
           label: props.label,
           text: props.text,
           tooltipFeedback: props.tooltipFeedback,
-          valid: props.valid,
+          valid: isValid.value,
         },
         {
           default: () =>
             h(
               CPicker,
               {
-                cancelButton: props.cancelButton,
-                cancelButtonColor: props.cancelButtonColor,
-                cancelButtonSize: props.cancelButtonSize,
-                cancelButtonVariant: props.cancelButtonVariant,
-                class: ['date-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
-                confirmButton: props.confirmButton,
-                confirmButtonColor: props.confirmButtonColor,
-                confirmButtonSize: props.confirmButtonSize,
-                confirmButtonVariant: props.confirmButtonVariant,
+                class: [
+                  'date-picker',
+                  {
+                    [`date-picker-${props.size}`]: props.size,
+                    disabled: props.disabled,
+                    'is-invalid': isValid.value === false ? true : false,
+                    'is-valid': isValid.value,
+                  },
+                ],
                 disabled: props.disabled,
+                dropdownClassNames: 'date-picker-dropdown',
                 footer: props.footer || props.timepicker,
                 id: props.id,
-                onCancel: () => {
-                  startDate.value = initialStartDate.value
-                  endDate.value = initialEndDate.value
-                  visible.value = false
-                },
                 onHide: () => {
                   visible.value = false
                   emit('hide')
@@ -754,30 +778,55 @@ const CDateRangePicker = defineComponent({
                 visible: visible.value,
               },
               {
-                ...(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,
-                  ),
+                  h('div', { class: 'date-picker-footer' }, [
+                    props.todayButton &&
+                      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,
+                      ),
+                    props.cancelButton &&
+                      h(
+                        CButton,
+                        {
+                          color: props.cancelButtonColor,
+                          onClick: () => {
+                            startDate.value = initialStartDate.value
+                            endDate.value = initialEndDate.value
+                            visible.value = false
+                          },
+                          size: props.cancelButtonSize,
+                          variant: props.cancelButtonVariant,
+                        },
+                        () => props.cancelButton,
+                      ),
+                    props.confirmButton &&
+                      h(
+                        CButton,
+                        {
+                          color: props.confirmButtonColor,
+                          onClick: () => {
+                            visible.value = false
+                          },
+                          size: props.confirmButtonSize,
+                          variant: props.confirmButtonVariant,
+                        },
+                        () => props.confirmButton,
+                      ),
+                  ]),
                 default: () =>
                   h(
                     'div',
@@ -829,6 +878,8 @@ const CDateRangePicker = defineComponent({
                             navigation: props.navigation,
                             range: props.range,
                             selectEndDate: selectEndDate.value,
+                            selectAdjacementDays: props.selectAdjacementDays,
+                            showAdjacementDays: props.showAdjacementDays,
                             ...(startDate.value && { startDate: startDate.value }),
                             onCalendarCellHover: (date: Date | null) =>
                               handleCalendarCellHover(date),

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

@@ -0,0 +1,49 @@
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  if (!Number.isNaN(Date.parse(string))) {
+    return new Date(Date.parse(string))
+  }
+
+  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 = new 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
+}

package/src/components/dropdown/CDropdown.ts

@@ -1,7 +1,8 @@
-import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
+import { defineComponent, h, ref, provide, watch, PropType, onMounted } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
 import { Triggers } from '../../types'
+import { isRTL } from '../../utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
@@ -18,22 +19,22 @@ const CDropdown = defineComponent({
         if (value === 'start' || value === 'end') {
           return true
         } else {
-          if (typeof value.xs !== 'undefined' && (value.xs === 'start' || value.xs === 'end')) {
+          if (value.xs !== undefined && (value.xs === 'start' || value.xs === 'end')) {
             return true
           }
-          if (typeof value.sm !== 'undefined' && (value.sm === 'start' || value.sm === 'end')) {
+          if (value.sm !== undefined && (value.sm === 'start' || value.sm === 'end')) {
             return true
           }
-          if (typeof value.md !== 'undefined' && (value.md === 'start' || value.md === 'end')) {
+          if (value.md !== undefined && (value.md === 'start' || value.md === 'end')) {
             return true
           }
-          if (typeof value.lg !== 'undefined' && (value.lg === 'start' || value.lg === 'end')) {
+          if (value.lg !== undefined && (value.lg === 'start' || value.lg === 'end')) {
             return true
           }
-          if (typeof value.xl !== 'undefined' && (value.xl === 'start' || value.xl === 'end')) {
+          if (value.xl !== undefined && (value.xl === 'start' || value.xl === 'end')) {
             return true
           }
-          if (typeof value.xxl !== 'undefined' && (value.xxl === 'start' || value.xxl === 'end')) {
+          if (value.xxl !== undefined && (value.xxl === 'start' || value.xxl === 'end')) {
             return true
           }
           return false
@@ -149,30 +150,6 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
-    if (props.direction === 'center') {
-      placement.value = 'bottom'
-    }
-
-    if (props.direction === 'dropup') {
-      placement.value = 'top-start'
-    }
-
-    if (props.direction === 'dropup-center') {
-      placement.value = 'top'
-    }
-
-    if (props.direction === 'dropend') {
-      placement.value = 'right-start'
-    }
-
-    if (props.direction === 'dropstart') {
-      placement.value = 'left-start'
-    }
-
-    if (props.alignment === 'end') {
-      placement.value = 'bottom-end'
-    }
-
     const initPopper = () => {
       // Disable popper if responsive aligment is set.
       if (typeof props.alignment === 'object') {
@@ -228,6 +205,32 @@ const CDropdown = defineComponent({
       visible.value ? emit('show') : emit('hide')
     })
 
+    onMounted(() => {
+      if (props.direction === 'center') {
+        placement.value = 'bottom'
+      }
+
+      if (props.direction === 'dropup') {
+        placement.value = isRTL(dropdownMenuRef.value) ? 'top-end' : 'top-start'
+      }
+
+      if (props.direction === 'dropup-center') {
+        placement.value = 'top'
+      }
+
+      if (props.direction === 'dropend') {
+        placement.value = isRTL(dropdownMenuRef.value) ? 'left-start' : 'right-start'
+      }
+
+      if (props.direction === 'dropstart') {
+        placement.value = isRTL(dropdownMenuRef.value) ? 'right-start' : 'left-start'
+      }
+
+      if (props.alignment === 'end') {
+        placement.value = isRTL(dropdownMenuRef.value) ? 'bottom-start' : 'bottom-end'
+      }
+    })
+
     return () =>
       props.variant === 'input-group'
         ? [slots.default && slots.default()]

package/src/components/dropdown/CDropdownMenu.ts

@@ -22,7 +22,7 @@ const CDropdownMenu = defineComponent({
 
     const { autoClose, alignment, dark, popper } = config
 
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
     const alignmentClassNames = (alignment: object | string) => {
       const classNames: string[] = []
       if (typeof alignment === 'object') {