@coreui/vue-pro 4.4.2 → 4.6.0

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

@@ -5,6 +5,7 @@ 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'
 
@@ -114,6 +115,29 @@ const CDateRangePicker = defineComponent({
         return ['ghost', 'outline'].includes(value)
       },
     },
+    /**
+     * Set the format of day name.
+     *
+     * @default 'numeric'
+     * @since 4.6.0
+     */
+    dayFormat: {
+      type: [Function, String],
+      default: 'numeric',
+      required: false,
+      validator: (value: string) => {
+        if (typeof value === 'string') {
+          return ['numeric', '2-digit'].includes(value)
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        if (typeof value === 'function') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Toggle the disabled state for the component.
      */
@@ -131,6 +155,30 @@ const CDateRangePicker = defineComponent({
       type: [Date, String],
       required: false,
     },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: 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,
+    },
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -173,6 +221,20 @@ const CDateRangePicker = defineComponent({
      * Toggle the readonly state for the component.
      */
     inputReadOnly: Boolean,
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -199,6 +261,12 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Reorder year-month navigation, and render year first.
+     *
+     * @since 4.6.0
+     */
+    navYearFirst: Boolean,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -246,6 +314,14 @@ const CDateRangePicker = defineComponent({
     startDate: {
       type: [Date, String],
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
     /**
      * Provide an additional time selection by adding select boxes to choose times.
      */
@@ -289,13 +365,25 @@ const CDateRangePicker = defineComponent({
         return ['ghost', 'outline'].includes(value)
       },
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Set length or format of day name.
      *
      * @type  number | 'long' | 'narrow' | 'short'
      */
     weekdayFormat: {
-      type: [Number, String],
+      type: [Function, Number, String],
       default: 2,
       validator: (value: string | number) => {
         if (typeof value === 'string') {
@@ -304,6 +392,9 @@ const CDateRangePicker = defineComponent({
         if (typeof value === 'number') {
           return true
         }
+        if (typeof value === 'function') {
+          return true
+        }
         return false
       },
     },
@@ -332,7 +423,7 @@ const CDateRangePicker = defineComponent({
      */
     'start-date-change',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, attrs, emit }) {
     const calendarDate = ref<Date>(
       props.calendarDate
         ? new Date(props.calendarDate)
@@ -557,192 +648,217 @@ const CDateRangePicker = defineComponent({
 
     return () =>
       h(
-        CPicker,
+        CFormControlWrapper,
         {
-          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,
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
           id: props.id,
-          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')
-          },
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
         },
         {
-          ...(slots.cancelButton && {
-            cancelButton: () => slots.cancelButton && slots.cancelButton(),
-          }),
-          ...(slots.confirmButton && {
-            confirmButton: () => slots.confirmButton && slots.confirmButton(),
-          }),
-          toggler: () => InputGroup(),
-          footer: () =>
+          default: () =>
             h(
-              CButton,
+              CPicker,
               {
-                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
+                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,
+                disabled: props.disabled,
+                footer: props.footer || props.timepicker,
+                id: props.id,
+                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')
                 },
               },
-              () => props.todayButton,
-            ),
-          default: () =>
-            h(
-              'div',
               {
-                class: 'date-picker-body',
-              },
-              [
-                props.ranges &&
+                ...(slots.cancelButton && {
+                  cancelButton: () => slots.cancelButton && slots.cancelButton(),
+                }),
+                ...(slots.confirmButton && {
+                  confirmButton: () => slots.confirmButton && slots.confirmButton(),
+                }),
+                toggler: () => InputGroup(),
+                footer: () =>
                   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,
+                    CButton,
                     {
-                      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: props.range,
-                      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(),
-                      }),
+                      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.timepicker &&
+                default: () =>
                   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,
+                    {
+                      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,
+                            dayFormat: props.dayFormat,
+                            disabledDates: props.disabledDates,
+                            ...(endDate.value && { endDate: endDate.value }),
+                            firstDayOfWeek: props.firstDayOfWeek,
                             locale: props.locale,
-                            onChange: (_: any, __: any, date: Date) =>
-                              index === 0 ? handleStartDateChange(date) : handleEndDateChange(date),
-                            time: index === 0 ? startDate.value : endDate.value,
-                            variant: 'select',
-                          }),
+                            maxDate: maxDate.value,
+                            minDate: minDate.value,
+                            navYearFirst: props.navYearFirst,
+                            navigation: props.navigation,
+                            range: props.range,
+                            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',
+                                }),
+                              ),
+                        ),
+                    ],
                   ),
-              ],
+              },
             ),
         },
       )

package/src/components/form/CFormInput.ts

@@ -188,7 +188,7 @@ const CFormInput = defineComponent({
                 onInput: (event: InputEvent) => handleInput(event),
                 readonly: props.readonly,
                 type: props.type,
-                ...(props.modelValue && { value: props.modelValue }),
+                ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue })
               },
               slots.default && slots.default(),
             ),