@coreui/vue-pro 4.9.0-beta.1 → 4.9.0-rc.0

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

@@ -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-rc.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-rc.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-rc.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/sidebar/CSidebar.ts

@@ -3,8 +3,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 
-const isOnMobile = (element: HTMLDivElement) =>
-  Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
+const isOnMobile = (element: HTMLDivElement) => {
+  if (!element) {
+    return
+  }
+
+  return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
+}
 
 const CSidebar = defineComponent({
   name: 'CSidebar',

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

@@ -1,6 +1,7 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CButton } from '../button'
+import { CInputGroup } from '../form'
 import { CFormControlWrapper } from '../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
@@ -391,10 +392,10 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h('div', { class: 'time-picker-input-group' }, [
+      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
         h('input', {
           autocomplete: 'off',
-          class: 'time-picker-input',
+          class: 'form-control',
           disabled: props.disabled,
           onInput: (event: Event) => {
             if (isValidTime((event.target as HTMLInputElement).value)) {
@@ -412,13 +413,31 @@ const CTimePicker = defineComponent({
               })
             : '',
         }),
-        props.indicator && h('div', { class: 'time-picker-indicator' }),
-        props.cleaner &&
-          date.value &&
-          h('div', {
-            class: 'time-picker-cleaner',
-            onClick: (event: Event) => handleClear(event),
-          }),
+        (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 = () => [
@@ -568,7 +587,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 +632,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,