@coreui/vue-pro 4.9.0-beta.2 → 4.9.0

package/src/components/multi-select/CMultiSelect.ts

@@ -19,7 +19,7 @@ const CMultiSelect = defineComponent({
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     allowCreateOptions: Boolean,
     /**
@@ -34,7 +34,7 @@ const CMultiSelect = defineComponent({
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     clearSearchOnSelect: Boolean,
     /**
@@ -78,7 +78,7 @@ const CMultiSelect = defineComponent({
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     loading: Boolean,
     /**
@@ -535,13 +535,18 @@ const CMultiSelect = defineComponent({
               'div',
               {
                 class: [
+                  'dropdown',
+                  'picker',
                   'form-multi-select',
                   {
+                    'form-multi-select-with-cleaner': props.cleaner,
                     disabled: props.disabled,
                     [`form-multi-select-${props.size}`]: props.size,
+                    'form-multi-select-selection-tags':
+                      props.multiple && props.selectionType === 'tags',
+                    show: visible.value,
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
-                    show: visible.value,
                   },
                 ],
                 'aria-expanded': visible.value,
@@ -561,78 +566,64 @@ const CMultiSelect = defineComponent({
                     },
                     {
                       default: () => [
-                        h(
-                          CMultiSelectSelection,
-                          {
-                            multiple: props.multiple,
-                            placeholder: props.placeholder,
-                            onRemove: (option: Option) =>
-                              !props.disabled && handleOptionClick(option),
-                            search: props.search,
-                            selected: selected.value,
-                            selectionType: props.selectionType,
-                            selectionTypeCounterText: props.selectionTypeCounterText,
-                          },
-                          {
-                            default: () =>
-                              props.search &&
-                              h('input', {
-                                type: 'text',
-                                class: 'form-multi-select-search',
-                                disabled: props.disabled,
-                                autocomplete: 'off',
-                                onInput: (event: InputEvent) => handleSearchChange(event),
-                                onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
-                                ...(selected.value.length === 0 && {
-                                  placeholder: props.placeholder,
-                                }),
-                                ...(selected.value.length > 0 &&
-                                  props.selectionType === 'counter' && {
-                                    placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
-                                  }),
-                                ...(selected.value.length > 0 &&
-                                  !props.multiple && {
-                                    placeholder: selected.value.map((option) => option.text)[0],
-                                  }),
-
-                                ...(props.multiple &&
-                                  selected.value.length > 0 &&
-                                  props.selectionType !== 'counter' && {
-                                    size: searchValue.value.length + 2,
-                                  }),
-                                ref: searchRef,
+                        h(CMultiSelectSelection, {
+                          multiple: props.multiple,
+                          placeholder: props.placeholder,
+                          onRemove: (option: Option) =>
+                            !props.disabled && handleOptionClick(option),
+                          search: props.search,
+                          selected: selected.value,
+                          selectionType: props.selectionType,
+                          selectionTypeCounterText: props.selectionTypeCounterText,
+                        }),
+                        props.multiple &&
+                          props.cleaner &&
+                          selected.value.length > 0 &&
+                          !props.disabled &&
+                          h('button', {
+                            type: 'button',
+                            class: 'form-multi-select-selection-cleaner',
+                            onClick: () => handleDeselectAll(),
+                          }),
+                        props.search &&
+                          h('input', {
+                            type: 'text',
+                            class: 'form-multi-select-search',
+                            disabled: props.disabled,
+                            autocomplete: 'off',
+                            onInput: (event: InputEvent) => handleSearchChange(event),
+                            onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                            ...(selected.value.length === 0 && {
+                              placeholder: props.placeholder,
+                            }),
+                            ...(selected.value.length > 0 &&
+                              props.selectionType === 'counter' && {
+                                placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
                               }),
-                          },
-                        ),
-                        h(
-                          'div',
-                          { class: 'form-multi-select-buttons' },
-                          {
-                            default: () => [
-                              h('button', {
-                                class: 'form-multi-select-cleaner',
-                                onClick: () => handleDeselectAll(),
-                                type: 'button',
+                            ...(selected.value.length > 0 &&
+                              !props.multiple && {
+                                placeholder: selected.value.map((option) => option.text)[0],
                               }),
-                              h('button', {
-                                class: 'form-multi-select-indicator',
-                                onClick: (event: Event) => {
-                                  event.preventDefault()
-                                  event.stopPropagation()
-                                  visible.value = !visible.value
-                                },
-                                type: 'button',
+
+                            ...(props.multiple &&
+                              selected.value.length > 0 &&
+                              props.selectionType !== 'counter' && {
+                                size: searchValue.value.length + 2,
                               }),
-                            ],
-                          },
-                        ),
+                            ref: searchRef,
+                          }),
                       ],
                     },
                   ),
                   h(
                     'div',
                     {
-                      class: 'form-multi-select-dropdown',
+                      class: [
+                        'dropdown-menu',
+                        {
+                          show: visible.value,
+                        },
+                      ],
                       role: 'menu',
                       ref: dropdownRef,
                     },

package/src/components/multi-select/CMultiSelectSelection.ts

@@ -36,12 +36,7 @@ const CMultiSelectSelection = defineComponent({
       h(
         'div',
         {
-          class: [
-            'form-multi-select-selection',
-            {
-              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-            },
-          ],
+          class: 'form-multi-select-selection',
         },
         [
           props.multiple &&
@@ -61,11 +56,15 @@ const CMultiSelectSelection = defineComponent({
                 return h('span', { class: 'form-multi-select-tag' }, [
                   option.text,
                   !option.disabled &&
-                    h('button', {
-                      class: 'form-multi-select-tag-delete',
-                      ariaLabel: 'Close',
-                      onClick: () => handleRemove(option),
-                    }),
+                    h(
+                      'button',
+                      {
+                        class: 'form-multi-select-tag-delete close',
+                        ariaLabel: 'Close',
+                        onClick: () => handleRemove(option),
+                      },
+                      h('span', { ariaHidden: 'true' }, 'x'),
+                    ),
                 ])
               }
               return

package/src/components/picker/CPicker.ts

@@ -130,6 +130,8 @@ const CPicker = defineComponent({
             'div',
             {
               class: [
+                'dropdown',
+                'picker',
                 attrs.class,
                 {
                   show: visible.value,
@@ -154,13 +156,26 @@ const CPicker = defineComponent({
                     },
                   }),
                 ),
-              h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
-                slots.default && slots.default(),
-                /**
-                 * @slot Location for the footer element.
-                 */
-                slots.footer && slots.footer(),
-              ]),
+              h(
+                'div',
+                {
+                  class: [
+                    'dropdown-menu',
+                    {
+                      show: visible.value,
+                    },
+                    props.dropdownClassNames,
+                  ],
+                  ref: dropdownRef,
+                },
+                [
+                  slots.default && slots.default(),
+                  /**
+                   * @slot Location for the footer element.
+                   */
+                  slots.footer && slots.footer(),
+                ],
+              ),
             ],
           )
       }

package/src/components/popover/CPopover.ts

@@ -1,30 +1,54 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
-import { createPopper, Placement } from '@popperjs/core'
+import type { Placement } from '@popperjs/core'
 
+import { usePopper } from '../../composables'
+import type { Placements, Triggers } from '../../types'
 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
-    }
-  }
-}
+import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
   props: {
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @since 4.9.0
+     */
+    animation: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
     content: String,
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay: {
+      type: [Number, Object] as PropType<number | { show: number; hide: number }>,
+      default: 0,
+    },
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements: {
+      type: [String, Array] as PropType<Placements | Placements[]>,
+      default: () => ['top', 'right', 'bottom', 'left'],
+      validator: (value: Placements | Placements[]) => {
+        if (typeof value === 'string') {
+          return ['top', 'right', 'bottom', 'left'].includes(value)
+        }
+        if (Array.isArray(value)) {
+          return value.every((e) => ['top', 'right', 'bottom', 'left'].includes(e))
+        }
+        return false
+      },
+    },
     /**
      * Offset of the popover relative to its target.
      */
@@ -52,9 +76,9 @@ const CPopover = defineComponent({
      * @values 'click', 'focus', 'hover'
      */
     trigger: {
-      type: [String, Array] as PropType<string | string[]>,
+      type: [String, Array] as PropType<Triggers | Triggers[]>,
       default: 'click',
-      validator: (value: string | string[]) => {
+      validator: (value: Triggers | Triggers[]) => {
         if (typeof value === 'string') {
           return ['click', 'focus', 'hover'].includes(value)
         }
@@ -82,12 +106,39 @@ const CPopover = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
-    const popper = ref()
     const visible = ref(props.visible)
+    const { initPopper, destroyPopper } = usePopper()
+
+    const delay =
+      typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.popover-arrow',
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: props.fallbackPlacements,
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: props.offset,
+          },
+        },
+      ],
+      placement: getRTLPlacement(props.placement, togglerRef.value),
+    }
 
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
-      initPopper()
+      initPopper(togglerRef.value, popoverRef.value, popperConfig)
       el.classList.add('show')
       executeAfterTransition(() => done(), el as HTMLElement)
     }
@@ -101,32 +152,18 @@ const CPopover = defineComponent({
       }, el as HTMLElement)
     }
 
-    const handleToggle = (event: Event) => {
+    const toggleVisible = (event: Event, _visible: boolean) => {
       togglerRef.value = event.target
-      visible.value = !visible.value
-    }
-
-    const initPopper = () => {
-      if (togglerRef.value) {
-        popper.value = createPopper(togglerRef.value, popoverRef.value, {
-          placement: getPlacement(props.placement, togglerRef.value),
-          modifiers: [
-            {
-              name: 'offset',
-              options: {
-                offset: props.offset,
-              },
-            },
-          ],
-        })
+      if (_visible) {
+        setTimeout(() => {
+          visible.value = true
+        }, delay.show)
+        return
       }
-    }
 
-    const destroyPopper = () => {
-      if (popper.value) {
-        popper.value.destroy()
-      }
-      popper.value = undefined
+      setTimeout(() => {
+        visible.value = false
+      }, delay.hide)
     }
 
     return () => [
@@ -146,13 +183,19 @@ const CPopover = defineComponent({
             h(
               'div',
               {
-                class: 'popover fade bs-popover-auto',
+                class: [
+                  'popover',
+                  'bs-popover-auto',
+                  {
+                    fade: props.animation,
+                  },
+                ],
                 ref: popoverRef,
                 role: 'tooltip',
                 ...attrs,
               },
               [
-                h('div', { class: 'popover-arrow', 'data-popper-arrow': '' }),
+                h('div', { class: 'popover-arrow' }),
                 (props.title || slots.title) &&
                   h(
                     'div',
@@ -176,11 +219,14 @@ const CPopover = defineComponent({
       slots.toggler &&
         slots.toggler({
           on: {
-            click: (event: Event) => props.trigger.includes('click') && handleToggle(event),
-            blur: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
-            focus: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
-            mouseenter: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
-            mouseleave: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
+            click: (event: Event) =>
+              props.trigger.includes('click') && toggleVisible(event, !visible.value),
+            blur: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, false),
+            focus: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, true),
+            mouseenter: (event: Event) =>
+              props.trigger.includes('hover') && toggleVisible(event, true),
+            mouseleave: (event: Event) =>
+              props.trigger.includes('hover') && toggleVisible(event, false),
           },
         }),
     ]

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

@@ -391,42 +391,72 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h('div', { class: 'time-picker-input-group' }, [
-        h('input', {
-          autocomplete: 'off',
-          class: 'time-picker-input',
-          disabled: props.disabled,
-          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,
-                ...(!props.seconds && { timeStyle: 'short' }),
-              })
-            : '',
-        }),
-        props.indicator && h('div', { class: 'time-picker-indicator' }),
-        props.cleaner &&
-          date.value &&
-          h('div', {
-            class: 'time-picker-cleaner',
-            onClick: (event: Event) => handleClear(event),
+      h(
+        'div',
+        {
+          class: [
+            'input-group',
+            'picker-input-group',
+            {
+              [`input-group-${props.size}`]: props.size,
+            },
+          ],
+        },
+        [
+          h('input', {
+            autocomplete: 'off',
+            class: 'form-control',
+            disabled: props.disabled,
+            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,
+                  ...(!props.seconds && { timeStyle: 'short' }),
+                })
+              : '',
           }),
-      ])
+          (props.indicator || props.cleaner) &&
+            h('div', { class: 'input-group-text' }, [
+              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' }),
+                ),
+            ]),
+        ],
+      )
 
     const TimePickerSelect = () => [
       h('span', { class: 'time-picker-inline-icon' }),
       h(
         'select',
         {
-          class: 'time-picker-inline-select',
+          class: 'form-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('hours', (event.target as HTMLSelectElement).value),
@@ -447,7 +477,7 @@ const CTimePicker = defineComponent({
       h(
         'select',
         {
-          class: 'time-picker-inline-select',
+          class: 'form-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
@@ -469,7 +499,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'time-picker-inline-select',
+            class: 'form-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
@@ -491,7 +521,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'time-picker-inline-select',
+            class: 'form-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('toggle', (event.target as HTMLSelectElement).value),
@@ -568,7 +598,6 @@ const CTimePicker = defineComponent({
                 class: [
                   'time-picker',
                   {
-                    [`time-picker-${props.size}`]: props.size,
                     disabled: props.disabled,
                     'is-invalid': isValid.value === false ? true : false,
                     'is-valid': isValid.value,
@@ -614,7 +643,7 @@ const CTimePicker = defineComponent({
                     props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
                   ),
                 footer: () =>
-                  h('div', { class: 'time-picker-footer' }, [
+                  h('div', { class: 'picker-footer' }, [
                     props.cancelButton &&
                       h(
                         CButton,