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

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

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
-import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
+import { CButton } from '../button'
 import { CFormControlWrapper } from '../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
@@ -133,25 +133,19 @@ const CTimePicker = defineComponent({
      *
      * @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,
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
@@ -172,15 +166,16 @@ const CTimePicker = 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.
      */
@@ -195,6 +190,12 @@ const CTimePicker = defineComponent({
       type: String,
       default: 'Select time',
     },
+    /**
+     * When present, it specifies that must be filled out before submitting the form.
+     *
+     * @since 4.9.0
+     */
+    required: Boolean,
     /**
      * Show seconds.
      *
@@ -221,15 +222,11 @@ const CTimePicker = defineComponent({
      *
      * @since 4.6.0
      */
-    text: {
-      type: String,
-    },
+    text: String,
     /**
      * Initial selected time.
      */
-    time: {
-      type: [Date, String],
-    },
+    time: [Date, String],
     /**
      * Display validation feedback in a styled tooltip.
      *
@@ -241,7 +238,10 @@ const CTimePicker = defineComponent({
      *
      * @since 4.6.0
      */
-    valid: Boolean,
+    valid: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Set the time picker variant to a roll or select.
      *
@@ -280,6 +280,9 @@ const CTimePicker = defineComponent({
     'update:time',
   ],
   setup(props, { emit, attrs, slots }) {
+    const formRef = ref()
+    const inputRef = ref()
+
     const date = ref<Date | null>(convertTimeToDate(props.time))
     const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
     const initialDate = ref<Date | null>(null)
@@ -290,6 +293,7 @@ const CTimePicker = defineComponent({
       listOfSeconds: [],
       hour12: false,
     })
+    const isValid = ref(props.valid || (props.invalid && false))
 
     watch(
       () => props.time,
@@ -298,11 +302,38 @@ const CTimePicker = defineComponent({
       },
     )
 
-    watch(date, () => {
-      localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm)
+    watch(
+      () => [props.valid, props.invalid],
+      () => {
+        isValid.value = props.valid || (props.invalid && false)
+      },
+    )
 
-      if (date.value) {
-        ampm.value = getAmPm(new Date(date.value), props.locale)
+    watch(
+      date,
+      () => {
+        localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm)
+
+        if (date.value) {
+          ampm.value = getAmPm(new Date(date.value), props.locale)
+        }
+      },
+      { immediate: true },
+    )
+
+    watch(inputRef, () => {
+      if (inputRef.value && inputRef.value.form) {
+        formRef.value = inputRef.value.form
+      }
+    })
+
+    watch([formRef, date], () => {
+      if (formRef.value) {
+        formRef.value.addEventListener('submit', (event: Event) => {
+          setTimeout(() => handleFormValidation(event.target as HTMLFormElement))
+        })
+
+        handleFormValidation(formRef.value)
       }
     })
 
@@ -313,6 +344,18 @@ const CTimePicker = defineComponent({
       emit('update:time', null)
     }
 
+    const handleFormValidation = (form: HTMLFormElement) => {
+      if (!form.classList.contains('was-validated')) {
+        return
+      }
+
+      if (date.value) {
+        isValid.value = true
+        return
+      }
+      isValid.value = false
+    }
+
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
       const _date = date.value || new Date('1970-01-01')
 
@@ -328,18 +371,18 @@ const CTimePicker = defineComponent({
 
       if (set === 'hours') {
         if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
-          _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
+          _date.setHours(convert12hTo24h(ampm.value, Number.parseInt(value)))
         } else {
-          _date.setHours(parseInt(value))
+          _date.setHours(Number.parseInt(value))
         }
       }
 
       if (set === 'minutes') {
-        _date.setMinutes(parseInt(value))
+        _date.setMinutes(Number.parseInt(value))
       }
 
       if (set === 'seconds') {
-        _date.setSeconds(parseInt(value))
+        _date.setSeconds(Number.parseInt(value))
       }
 
       date.value = new Date(_date)
@@ -348,17 +391,20 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
-        h(CFormInput, {
+      h('div', { class: 'time-picker-input-group' }, [
+        h('input', {
           autocomplete: 'off',
+          class: 'time-picker-input',
           disabled: props.disabled,
-          onInput: (event) => {
-            if (isValidTime(event.target.value)) {
-              date.value = convertTimeToDate(event.target.value)
+          onInput: (event: Event) => {
+            if (isValidTime((event.target as HTMLInputElement).value)) {
+              date.value = convertTimeToDate((event.target as HTMLInputElement).value)
             }
           },
           placeholder: props.placeholder,
           readonly: props.inputReadOnly,
+          ref: inputRef,
+          required: props.required,
           value: date.value
             ? date.value.toLocaleTimeString(props.locale, {
                 hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
@@ -366,90 +412,108 @@ const CTimePicker = defineComponent({
               })
             : '',
         }),
-        (props.indicator || props.cleaner) &&
-          h(CInputGroupText, {}, () => [
-            props.indicator &&
-              h(
-                'span',
-                {
-                  class: 'picker-input-group-indicator',
-                },
-                slots.indicator
-                  ? slots.indicator()
-                  : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
-              ),
-            props.cleaner &&
-              h(
-                'span',
-                {
-                  class: 'picker-input-group-cleaner',
-                  onClick: (event: Event) => handleClear(event),
-                  role: 'button',
-                },
-                slots.cleaner
-                  ? slots.cleaner()
-                  : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
-              ),
-          ]),
+        props.indicator && h('div', { class: 'time-picker-indicator' }),
+        props.cleaner &&
+          date.value &&
+          h('div', {
+            class: 'time-picker-cleaner',
+            onClick: (event: Event) => handleClear(event),
+          }),
       ])
 
     const TimePickerSelect = () => [
       h('span', { class: 'time-picker-inline-icon' }),
-      h(CFormSelect, {
-        disabled: props.disabled,
-        options:
-          localizedTimePartials.value &&
-          localizedTimePartials.value.listOfHours?.map((option) => {
-            return {
-              value: option.value.toString(),
-              label: option.label,
-            }
-          }),
-        onChange: (event) => handleTimeChange('hours', event.target.value),
-        ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
-      }),
-      ':',
-      h(CFormSelect, {
-        disabled: props.disabled,
-        options:
-          localizedTimePartials.value &&
-          localizedTimePartials.value.listOfMinutes.map((option) => {
-            return {
-              value: option.value.toString(),
-              label: option.label,
-            }
-          }),
-        onChange: (event: Event) =>
-          handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
-        ...(date.value && { value: getSelectedMinutes(date.value) }),
-      }),
-      props.seconds && ':',
-      props.seconds &&
-        h(CFormSelect, {
+      h(
+        'select',
+        {
+          class: 'time-picker-inline-select',
           disabled: props.disabled,
-          options:
-            localizedTimePartials.value &&
-            localizedTimePartials.value.listOfSeconds.map((option) => {
-              return {
+          onChange: (event: Event) =>
+            handleTimeChange('hours', (event.target as HTMLSelectElement).value),
+          ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+        },
+        localizedTimePartials.value &&
+          localizedTimePartials.value.listOfHours.map((option) =>
+            h(
+              'option',
+              {
                 value: option.value.toString(),
-                label: option.label,
-              }
-            }),
+              },
+              option.label,
+            ),
+          ),
+      ),
+      ':',
+      h(
+        'select',
+        {
+          class: 'time-picker-inline-select',
+          disabled: props.disabled,
           onChange: (event: Event) =>
-            handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
-          ...(date.value && { value: getSelectedSeconds(date.value) }),
-        }),
+            handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
+          ...(date.value && { value: getSelectedMinutes(date.value) }),
+        },
+        localizedTimePartials.value &&
+          localizedTimePartials.value.listOfMinutes?.map((option) =>
+            h(
+              'option',
+              {
+                value: option.value.toString(),
+              },
+              option.label,
+            ),
+          ),
+      ),
+      props.seconds && ':',
+      props.seconds &&
+        h(
+          'select',
+          {
+            class: 'time-picker-inline-select',
+            disabled: props.disabled,
+            onChange: (event: Event) =>
+              handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
+            ...(date.value && { value: getSelectedSeconds(date.value) }),
+          },
+          localizedTimePartials.value &&
+            localizedTimePartials.value.listOfSeconds?.map((option) =>
+              h(
+                'option',
+                {
+                  value: option.value.toString(),
+                },
+                option.label,
+              ),
+            ),
+        ),
       localizedTimePartials.value &&
         localizedTimePartials.value.hour12 &&
-        h(CFormSelect, {
-          disabled: props.disabled,
-          options: [
-            { value: 'am', label: 'AM' },
-            { value: 'pm', label: 'PM' },
+        h(
+          'select',
+          {
+            class: 'time-picker-inline-select',
+            disabled: props.disabled,
+            onChange: (event: Event) =>
+              handleTimeChange('toggle', (event.target as HTMLSelectElement).value),
+            value: ampm.value,
+          },
+          [
+            h(
+              'option',
+              {
+                value: 'am',
+              },
+              'AM',
+            ),
+            h(
+              'option',
+              {
+                value: 'pm',
+              },
+              'PM',
+            ),
           ],
-          onChange: (event) => handleTimeChange('toggle', event.target.value),
-          value: ampm.value,
-        }),
+        ),
     ]
 
     const TimePickerRoll = () => [
@@ -490,35 +554,30 @@ const CTimePicker = 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: ['time-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
-                confirmButton: props.confirmButton,
-                confirmButtonColor: props.confirmButtonColor,
-                confirmButtonSize: props.confirmButtonSize,
-                confirmButtonVariant: props.confirmButtonVariant,
+                class: [
+                  'time-picker',
+                  {
+                    [`time-picker-${props.size}`]: props.size,
+                    disabled: props.disabled,
+                    'is-invalid': isValid.value === false ? true : false,
+                    'is-valid': isValid.value,
+                  },
+                ],
                 container: props.container,
                 disabled: props.disabled,
+                dropdownClassNames: 'time-picker-dropdown',
                 footer: true,
-                onCancel: () => {
-                  if (initialDate.value) {
-                    date.value = new Date(initialDate.value)
-                  }
-                  visible.value = false
-                },
                 onHide: () => {
                   visible.value = false
                   emit('hide')
@@ -554,6 +613,38 @@ const CTimePicker = defineComponent({
                     },
                     props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
                   ),
+                footer: () =>
+                  h('div', { class: 'time-picker-footer' }, [
+                    props.cancelButton &&
+                      h(
+                        CButton,
+                        {
+                          color: props.cancelButtonColor,
+                          onClick: () => {
+                            if (initialDate.value) {
+                              date.value = new Date(initialDate.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,
+                      ),
+                  ]),
               },
             ),
         },

package/src/components/toast/CToast.ts

@@ -69,7 +69,7 @@ const CToast = defineComponent({
       if (props.visible) {
         visible.value = props.visible
       }
-      
+
       if (props.autohide) {
         clearTimeout(timeout.value)
         timeout.value = window.setTimeout(() => {

package/src/components/tooltip/CTooltip.ts

@@ -2,6 +2,21 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transitio
 import { createPopper, Placement } from '@popperjs/core'
 
 import { executeAfterTransition } from '../../utils/transition'
+import { isRTL } from '../../utils'
+
+const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
+  switch (placement) {
+    case 'right': {
+      return isRTL(element) ? 'left' : 'right'
+    }
+    case 'left': {
+      return isRTL(element) ? 'right' : 'left'
+    }
+    default: {
+      return placement as Placement
+    }
+  }
+}
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -15,7 +30,7 @@ const CTooltip = defineComponent({
      */
     offset: {
       type: Array,
-      default: () => [0, 0],
+      default: () => [0, 6],
     },
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
@@ -60,7 +75,7 @@ const CTooltip = defineComponent({
      */
     'show',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const tooltipRef = ref()
     const popper = ref()
@@ -90,7 +105,7 @@ const CTooltip = defineComponent({
     const initPopper = () => {
       if (togglerRef.value) {
         popper.value = createPopper(togglerRef.value, tooltipRef.value, {
-          placement: props.placement,
+          placement: getPlacement(props.placement, togglerRef.value),
           modifiers: [
             {
               name: 'offset',
@@ -130,6 +145,7 @@ const CTooltip = defineComponent({
                 class: 'tooltip fade bs-tooltip-auto',
                 ref: tooltipRef,
                 role: 'tooltip',
+                ...attrs,
               },
               [
                 h('div', { class: 'tooltip-arrow', 'data-popper-arrow': '' }),

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -27,12 +27,16 @@ const CVirtualScroller = defineComponent({
     )
 
     const viewportHeight = computed(
-      () => props.visibleItems * itemHeight.value + 2 * viewportPadding.value,
+      () =>
+        Math.min(props.visibleItems, itemsNumber.value) * itemHeight.value +
+        2 * viewportPadding.value,
     )
 
     onMounted(() => {
       if (virtualScrollRef.value) {
-        viewportPadding.value = parseFloat(getComputedStyle(virtualScrollRef.value).paddingTop)
+        viewportPadding.value = Number.parseFloat(
+          getComputedStyle(virtualScrollRef.value).paddingTop,
+        )
         // It's necessary to calculate heights of items
         virtualScrollRef.value.dispatchEvent(new CustomEvent('scroll'))
       }
@@ -49,16 +53,14 @@ const CVirtualScroller = defineComponent({
           ? slots.default()[0].children
           : slots.default()
         : []
-      itemsNumber.value = children && children.length ? children.length : 0
+      itemsNumber.value = children && children.length > 0 ? children.length : 0
       return h(
         'div',
         {
           class: ['virtual-scroller'],
           onScroll: (event: any) => handleScroll((event.target as HTMLDivElement).scrollTop),
           style: {
-            height: `${
-              maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value
-            }px`,
+            height: `${viewportHeight.value}px`,
             overflowY: 'auto',
           },
           ref: virtualScrollRef,
@@ -95,8 +97,8 @@ const CVirtualScroller = defineComponent({
                   if (node && (node as HTMLElement).offsetHeight) {
                     itemHeight.value =
                       (node as HTMLElement).offsetHeight +
-                      parseFloat(getComputedStyle(node as HTMLElement).marginTop) +
-                      parseFloat(getComputedStyle(node as HTMLElement).marginBottom)
+                      Number.parseFloat(getComputedStyle(node as HTMLElement).marginTop) +
+                      Number.parseFloat(getComputedStyle(node as HTMLElement).marginBottom)
                   }
                 },
               }),

package/src/components/widgets/CWidgetStatsA.ts

@@ -15,7 +15,7 @@ const CWidgetStatsA = defineComponent({
      */
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
   },
   /**

package/src/components/widgets/CWidgetStatsB.ts

@@ -47,7 +47,7 @@ const CWidgetStatsB = defineComponent({
      */
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
   },
   setup(props, { slots }) {

package/src/components/widgets/CWidgetStatsC.ts

@@ -42,7 +42,7 @@ const CWidgetStatsC = defineComponent({
      */
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
   },
   /**

package/src/components/widgets/CWidgetStatsE.ts

@@ -14,7 +14,7 @@ const CWidgetStatsE = defineComponent({
      */
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
   },
   /**

package/src/components/widgets/CWidgetStatsF.ts

@@ -33,7 +33,7 @@ const CWidgetStatsF = defineComponent({
      */
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
   },
   /**

package/src/composables/index.ts

@@ -0,0 +1,3 @@
+import { useColorModes } from './useColorModes'
+
+export { useColorModes }