@coreui/vue-pro 4.5.0 → 4.7.0-alpha.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'
 
@@ -75,6 +76,15 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * If true the dropdown will be immediately closed after submitting the full date.
+     *
+     * @since 4.7.0
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle visibility or set the content of confirm button.
      */
@@ -114,6 +124,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 +164,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 +230,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 +270,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 +323,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 +374,29 @@ 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,
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: 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 +405,9 @@ const CDateRangePicker = defineComponent({
         if (typeof value === 'number') {
           return true
         }
+        if (typeof value === 'function') {
+          return true
+        }
         return false
       },
     },
@@ -331,8 +435,23 @@ const CDateRangePicker = defineComponent({
      * @property {string} formatedDate - formated date
      */
     'start-date-change',
+    /**
+     * Callback fired when the start date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:start-date',
+    /**
+     * Callback fired when the end date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:end-date',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, attrs, emit }) {
+    const visible = ref(props.visible)
     const calendarDate = ref<Date>(
       props.calendarDate
         ? new Date(props.calendarDate)
@@ -435,6 +554,15 @@ const CDateRangePicker = defineComponent({
       }
 
       emit('start-date-change', date, date ? formatDate(date) : undefined)
+      emit('update:start-date', date)
+
+      if (props.timepicker || props.footer) {
+        return
+      }
+
+      if (props.closeOnSelect && !props.range) {
+        visible.value = false
+      }
     }
 
     const handleEndDateChange = (date: Date) => {
@@ -445,6 +573,15 @@ const CDateRangePicker = defineComponent({
       }
 
       emit('end-date-change', date, date ? formatDate(date) : undefined)
+      emit('update:end-date', date)
+
+      if (props.timepicker || props.footer) {
+        return
+      }
+
+      if (props.closeOnSelect && startDate.value !== null) {
+        visible.value = false
+      }
     }
 
     const handleClear = (event: Event) => {
@@ -453,6 +590,10 @@ const CDateRangePicker = defineComponent({
       endDate.value = null
       inputStartHoverValue.value = null
       inputEndHoverValue.value = null
+      emit('start-date-change', null)
+      emit('end-date-change', null)
+      emit('update:start-date', null)
+      emit('update:end-date', null)
     }
 
     const InputGroup = () =>
@@ -557,192 +698,221 @@ 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
+                  visible.value = false
+                },
+                onHide: () => {
+                  visible.value = false
+                  emit('hide')
                 },
+                onShow: () => {
+                  if (startDate.value) {
+                    initialStartDate.value = new Date(startDate.value)
+                  }
+
+                  if (endDate.value) {
+                    initialEndDate.value = new Date(endDate.value)
+                  }
+
+                  visible.value = true
+                  emit('show')
+                },
+                visible: visible.value,
               },
-              () => 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

@@ -1,6 +1,8 @@
 import { defineComponent, h } from 'vue'
 import { CFormControlWrapper } from './CFormControlWrapper'
 
+export const File = typeof window !== 'undefined' ? window.File : class File extends Object {}
+
 const CFormInput = defineComponent({
   name: 'CFormInput',
   props: {

package/src/components/index.ts

@@ -35,6 +35,7 @@ export * from './placeholder'
 export * from './progress'
 export * from './popover'
 export * from './sidebar'
+export * from './smart-pagination'
 export * from './smart-table'
 export * from './spinner'
 export * from './table'

package/src/components/loading-button/CLoadingButton.ts

@@ -71,11 +71,10 @@ const CLoadingButton = defineComponent({
       h(
         CButton,
         {
+          ...props,
           class: ['btn-loading', { ['is-loading']: loading.value }],
           ...(props.disabledOnLoading && loading.value && { disabled: true }),
           onClick: () => handleOnClick(),
-          // TODO: remove non button props
-          ...props,
         },
         {
           default: () => [