@coreui/vue-pro 5.17.1 → 5.19.0

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

@@ -187,6 +187,19 @@ const CDateRangePicker = defineComponent({
         return false
       },
     },
+    /**
+     * Sets the format for month names.
+     *
+     * @default 'short'
+     * @since 5.18.0
+     */
+    monthFormat: {
+      type: String as PropType<'long' | 'narrow' | 'short' | 'numeric' | '2-digit'>,
+      default: 'short',
+      validator: (value: string) => {
+        return ['long', 'narrow', 'short', 'numeric', '2-digit'].includes(value)
+      },
+    },
     /**
      * Toggle the disabled state for the component.
      */
@@ -383,14 +396,14 @@ const CDateRangePicker = defineComponent({
      */
     selectAdjacementDays: Boolean,
     /**
-     * Specify the type of date selection as day, week, month, or year.
+     * Specify the type of date selection as day, week, month, quarter, or year.
      *
      * @since 5.0.0
      */
     selectionType: {
-      type: String as PropType<'day' | 'week' | 'month' | 'year'>,
+      type: String as PropType<'day' | 'week' | 'month' | 'quarter' | 'year'>,
       default: 'day',
-      validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),
+      validator: (value: string) => ['day', 'week', 'month', 'quarter', 'year'].includes(value),
     },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
@@ -534,6 +547,19 @@ const CDateRangePicker = defineComponent({
      * @since 5.0.0
      */
     weekNumbersLabel: String,
+    /**
+     * Sets the format for years.
+     *
+     * @default 'numeric'
+     * @since 5.18.0
+     */
+    yearFormat: {
+      type: String as PropType<'numeric' | '2-digit'>,
+      default: 'numeric',
+      validator: (value: string) => {
+        return ['numeric', '2-digit'].includes(value)
+      },
+    },
   },
   emits: [
     /**
@@ -1074,6 +1100,7 @@ const CDateRangePicker = defineComponent({
                             locale: props.locale,
                             maxDate: maxDate.value,
                             minDate: minDate.value,
+                            monthFormat: props.monthFormat,
                             navigation: props.navigation,
                             navYearFirst: props.navYearFirst,
                             range: props.range,
@@ -1085,6 +1112,7 @@ const CDateRangePicker = defineComponent({
                             startDate: startDate.value,
                             weekdayFormat: props.weekdayFormat,
                             weekNumbersLabel: props.weekNumbersLabel,
+                            yearFormat: props.yearFormat,
                             onDateHover: (date: Date | null) => handleDateHover(date),
                             onCalendarDateChange: (date: Date) => {
                               calendarDate.value = date
@@ -1100,27 +1128,45 @@ const CDateRangePicker = defineComponent({
                              * @slot Location for next icon.
                              */
                             ...(slots.navNextIcon && {
-                              navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
+                              navNextIcon: () =>
+                                slots.navNextIcon?.(),
                             }),
                             /**
                              * @slot Location for next double icon.
                              */
                             ...(slots.navNextDoubleIcon && {
                               navNextDoubleIcon: () =>
-                                slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
+                                slots.navNextDoubleIcon?.(),
                             }),
                             /**
                              * @slot Location for previous icon.
                              */
                             ...(slots.navPrevIcon && {
-                              navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
+                              navPrevIcon: () =>
+                                slots.navPrevIcon?.(),
                             }),
                             /**
                              * @slot Location for double previous icon.
                              */
                             ...(slots.navPrevDoubleIcon && {
                               navPrevDoubleIcon: () =>
-                                slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
+                                slots.navPrevDoubleIcon?.(),
+                            }),
+                            ...(slots.dayCell && {
+                              dayCell: (slotProps: Record<string, unknown>) =>
+                                slots.dayCell?.(slotProps),
+                            }),
+                            ...(slots.monthCell && {
+                              monthCell: (slotProps: Record<string, unknown>) =>
+                                slots.monthCell?.(slotProps),
+                            }),
+                            ...(slots.quarterCell && {
+                              quarterCell: (slotProps: Record<string, unknown>) =>
+                                slots.quarterCell?.(slotProps),
+                            }),
+                            ...(slots.yearCell && {
+                              yearCell: (slotProps: Record<string, unknown>) =>
+                                slots.yearCell?.(slotProps),
                             }),
                           }
                         )

package/src/components/dropdown/CDropdown.ts

@@ -10,7 +10,7 @@ import {
   Ref,
   watch,
 } from 'vue'
-import type { Placement } from '@popperjs/core'
+import type { Options, Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
 import type { Triggers } from '../../types'
@@ -124,6 +124,19 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * A Popper.js configuration object, or a function that receives the default
+     * configuration and returns a modified one, used to customize the
+     * positioning of the dropdown menu.
+     *
+     * @since 5.10.0
+     */
+    popperConfig: {
+      type: [Object, Function] as PropType<
+        Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+      >,
+      default: undefined,
+    },
     /**
      * Sets the reference element for positioning the Vue Dropdown Menu.
      * - `toggle` - The Vue Dropdown Toggle button (default).
@@ -162,7 +175,7 @@ const CDropdown = defineComponent({
      */
     variant: {
       type: String,
-      default: 'btn-group',
+      default: 'dropdown',
       validator: (value: string) => {
         return ['btn-group', 'dropdown', 'input-group', 'nav-item'].includes(value)
       },
@@ -192,22 +205,31 @@ const CDropdown = defineComponent({
 
     const { initPopper, destroyPopper } = usePopper()
 
-    const popperConfig = computed(() => ({
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: props.offset,
+    const popperConfig = computed(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: props.offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(
-        props.placement,
-        props.direction,
-        props.alignment,
-        isRTL(dropdownMenuRef.value)
-      ) as Placement,
-    }))
+        ],
+        placement: getPlacement(
+          props.placement,
+          props.direction,
+          props.alignment,
+          isRTL(dropdownMenuRef.value)
+        ) as Placement,
+      }
+
+      return {
+        ...defaultPopperConfig,
+        ...(typeof props.popperConfig === 'function'
+          ? props.popperConfig(defaultPopperConfig)
+          : props.popperConfig),
+      }
+    })
 
     watch(
       () => props.visible,
@@ -249,16 +271,14 @@ const CDropdown = defineComponent({
 
       window.removeEventListener('click', handleClick)
       window.removeEventListener('keyup', handleKeyup)
-      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
-      dropdownToggleRef.value &&
-        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownMenuRef.value?.removeEventListener('keydown', handleKeydown)
+      dropdownToggleRef.value?.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
     onUnmounted(() => {
-      dropdownToggleRef.value &&
-        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
-      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownToggleRef.value?.removeEventListener('keydown', handleKeydown)
+      dropdownMenuRef.value?.removeEventListener('keydown', handleKeydown)
     })
 
     provide('config', {
@@ -315,7 +335,7 @@ const CDropdown = defineComponent({
       }
 
       const target = event.target as HTMLElement | null
-      const FORM_TAG_RE = /^(input|select|option|textarea|form|button|label)$/i
+      const FORM_TAG_RE = /^(input|select|option|textarea|form)$/i
 
       if (isOnMenu && target && FORM_TAG_RE.test(target.tagName)) {
         return

package/src/components/dropdown/CDropdownHeader.ts

@@ -18,7 +18,7 @@ const CDropdownHeader = defineComponent({
         {
           class: 'dropdown-header',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/dropdown/CDropdownItem.ts

@@ -38,7 +38,7 @@ const CDropdownItem = defineComponent({
         },
         {
           default: () => slots.default && slots.default(),
-        },
+        }
       )
   },
 })

package/src/components/dropdown/CDropdownMenu.ts

@@ -51,9 +51,9 @@ const CDropdownMenu = defineComponent({
               },
               props.as === 'ul'
                 ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
-                : slots.default && slots.default(),
+                : slots.default && slots.default()
             ),
-        },
+        }
       )
   },
 })

package/src/components/dropdown/CDropdownToggle.ts

@@ -142,7 +142,7 @@ const CDropdownToggle = defineComponent({
           event.preventDefault()
           setVisible(true, event)
         }
-      }
+      },
     }
 
     const togglerProps = computed(() => {
@@ -174,7 +174,7 @@ const CDropdownToggle = defineComponent({
                 togglerRef.value = el
               },
               ...triggers,
-            }),
+            })
           )
         : dropdownVariant === 'nav-item' && props.navLink
           ? h(
@@ -185,7 +185,7 @@ const CDropdownToggle = defineComponent({
                 role: 'button',
                 ref: dropdownToggleRef,
               },
-              { default: () => slots.default && slots.default() },
+              { default: () => slots.default && slots.default() }
             )
           : h(
               CButton,
@@ -204,7 +204,7 @@ const CDropdownToggle = defineComponent({
               () =>
                 props.split
                   ? h('span', { class: 'visually-hidden' }, props.splitLabel)
-                  : slots.default && slots.default(),
+                  : slots.default && slots.default()
             )
   },
 })

package/src/components/dropdown/__tests__/CDropdown.spec.ts

@@ -45,7 +45,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('btn-group')).toBe(true)
+    expect(defaultWrapper.classes('dropdown')).toBe(true)
   })
 })
 

package/src/components/dropdown/__tests__/CDropdownMenu.spec.ts

@@ -8,12 +8,14 @@ const config = {
   alignment: { lg: 'end' },
   dark: false,
   popper: true,
+  teleport: false,
 }
 
 const customConfig = {
   alignment: { lg: 'end' },
   dark: true,
   popper: false,
+  teleport: false,
 }
 
 const defaultWrapper = mount(Component, {
@@ -55,9 +57,10 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('dropdown-menu')).toBe(true)
-    expect(defaultWrapper.classes('dropdown-menu-dark')).toBe(false)
-    expect(defaultWrapper.classes('show')).toBe(false)
+    const menu = defaultWrapper.find('.dropdown-menu')
+    expect(menu.classes('dropdown-menu')).toBe(true)
+    expect(menu.attributes('data-coreui-theme')).toBeUndefined()
+    expect(menu.classes('show')).toBe(false)
   })
 })
 
@@ -68,9 +71,10 @@ describe(`Customize ${ComponentName} component`, () => {
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.find('li').text()).toContain('Default slot')
-    expect(customWrapper.classes('dropdown-menu')).toBe(true)
-    expect(customWrapper.classes('dropdown-menu-dark')).toBe(true)
-    expect(customWrapper.classes('show')).toBe(true)
-    expect(customWrapper.attributes('data-coreui-popper')).toBe('static')
+    const menu = customWrapper.find('.dropdown-menu')
+    expect(menu.classes('dropdown-menu')).toBe(true)
+    expect(menu.attributes('data-coreui-theme')).toBe('dark')
+    expect(menu.classes('show')).toBe(true)
+    expect(menu.attributes('data-coreui-popper')).toBe('static')
   })
 })

package/src/components/dropdown/__tests__/CDropdownPopperConfig.spec.ts

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import { createPopper } from '@popperjs/core'
+import type { Options } from '@popperjs/core'
+import { CDropdown, CDropdownMenu, CDropdownToggle } from '../../../index'
+
+type PopperConfig = Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
+jest.mock('@popperjs/core', () => ({
+  createPopper: jest.fn(() => ({
+    destroy: jest.fn(),
+    setOptions: jest.fn(),
+    update: jest.fn(),
+  })),
+}))
+
+const mockedCreatePopper = createPopper as jest.Mock
+
+const mountOpenDropdown = async (popperConfig: PopperConfig) => {
+  const wrapper = mount(CDropdown, {
+    props: { popperConfig },
+    slots: {
+      default: () => [h(CDropdownToggle, () => 'Toggle'), h(CDropdownMenu, () => 'Menu')],
+    },
+  })
+
+  await nextTick()
+  await wrapper.setProps({ visible: true })
+  await nextTick()
+
+  return wrapper
+}
+
+describe('CDropdown popperConfig', () => {
+  beforeEach(() => mockedCreatePopper.mockClear())
+
+  it('merges an object popperConfig over the default config', async () => {
+    await mountOpenDropdown({ strategy: 'fixed' })
+
+    expect(mockedCreatePopper).toHaveBeenCalled()
+    const options = mockedCreatePopper.mock.calls[0][2]
+    expect(options.strategy).toBe('fixed')
+    expect(options.placement).toBeDefined()
+    expect(options.modifiers).toBeDefined()
+  })
+
+  it('passes the default config to a function popperConfig and uses its result', async () => {
+    const popperConfig = jest.fn((defaultConfig: Partial<Options>) => ({
+      ...defaultConfig,
+      strategy: 'fixed' as const,
+    }))
+
+    await mountOpenDropdown(popperConfig)
+
+    expect(popperConfig).toHaveBeenCalledTimes(1)
+    const defaultArg = popperConfig.mock.calls[0][0]
+    expect(defaultArg.modifiers).toBeDefined()
+    expect(defaultArg.placement).toBeDefined()
+
+    const options = mockedCreatePopper.mock.calls[0][2]
+    expect(options.strategy).toBe('fixed')
+  })
+})

package/src/components/dropdown/__tests__/CDropdownToggle.spec.ts

@@ -93,9 +93,7 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('nav-link')).toBe(true)
     expect(customWrapper.classes('dropdown-toggle-split')).toBe(true)
     expect(customWrapper.classes('show')).toBe(true)
-    expect(customWrapper.classes('active')).toBe(true)
     expect(customWrapper.classes('disabled')).toBe(true)
-    expect(customWrapper.attributes('disabled')).toBe('true')
     expect(customWrapper.attributes('href')).toBe('#')
   })
 })

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.ts.snap

@@ -4,4 +4,4 @@ exports[`Customize (variant number two) CDropdown component renders correctly 1`
 
 exports[`Customize CDropdown component renders correctly 1`] = `"<div class="nav-item dropdown dropend">Default slot</div>"`;
 
-exports[`Loads and display CDropdown component renders correctly 1`] = `"<div class="btn-group">Default slot</div>"`;
+exports[`Loads and display CDropdown component renders correctly 1`] = `"<div class="dropdown">Default slot</div>"`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap

@@ -2,10 +2,14 @@
 
 exports[`Customize CDropdownMenu component renders correctly 1`] = `
 "<!--teleport start-->
+<ul class="dropdown-menu show dropdown-menu-lg-end" data-coreui-popper="static" data-coreui-theme="dark">
+  <li>Default slot</li>
+</ul>
 <!--teleport end-->"
 `;
 
 exports[`Loads and display CDropdownMenu component renders correctly 1`] = `
 "<!--teleport start-->
+<div class="dropdown-menu dropdown-menu-lg-end" data-coreui-popper="static">Default slot</div>
 <!--teleport end-->"
 `;

package/src/components/dropdown/utils.ts

@@ -8,7 +8,7 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   if (typeof alignment === 'object') {
     for (const key in alignment) {
       classNames.push(
-        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`
       )
     }
   }
@@ -24,7 +24,7 @@ export const getPlacement = (
   placement: Placement,
   direction: string | undefined,
   alignment: Alignments | string | undefined,
-  isRTL: boolean,
+  isRTL: boolean
 ): Placements => {
   let _placement = placement
 

package/src/components/focus-trap/CFocusTrap.ts

@@ -282,17 +282,20 @@ const CFocusTrap = defineComponent({
       const vnodes = slots.default?.()
       const vnode = vnodes?.[0]
       if (!vnode) return null
-    
-      const originalRef = (vnode.props as any)?.ref
-    
+
+      const originalRef = (vnode.props as Record<string, unknown> | null)?.ref
+
       return cloneVNode(vnode, {
         ref: (el) => {
-          containerRef.value = el as HTMLElement | null
-    
+          // `el` may be a component public instance (e.g. when the trapped node is wrapped in a
+          // `<Transition>`); resolve it to the underlying DOM element so focus handling works.
+          const element = ((el as { $el?: HTMLElement } | null)?.$el ?? el) as HTMLElement | null
+          containerRef.value = element
+
           if (typeof originalRef === 'function') {
             originalRef(el)
           } else if (originalRef && typeof originalRef === 'object' && 'value' in originalRef) {
-            ;(originalRef as { value: any }).value = el
+            ;(originalRef as { value: unknown }).value = el
           }
         },
       })

package/src/components/focus-trap/__tests__/CFocusTrap.spec.ts

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { CFocusTrap as Component } from '../../../index'
+
+const ComponentName = 'CFocusTrap'
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+
+  it('renders the child element from the default slot', () => {
+    const wrapper = mount(Component, {
+      slots: { default: () => h('div', { class: 'trapped' }, 'Trapped') },
+    })
+    expect(wrapper.find('.trapped').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Trapped')
+  })
+
+  it('renders nothing when no slot content is provided', () => {
+    const wrapper = mount(Component)
+    expect(wrapper.html()).toBe('')
+  })
+
+  it('emits activate when mounted active', () => {
+    const wrapper = mount(Component, {
+      props: { active: true },
+      slots: { default: () => h('button', 'Focusable') },
+      attachTo: document.body,
+    })
+    expect(wrapper.emitted('activate')).toBeTruthy()
+  })
+
+  it('does not emit activate when inactive', () => {
+    const wrapper = mount(Component, {
+      props: { active: false },
+      slots: { default: () => h('button', 'Focusable') },
+      attachTo: document.body,
+    })
+    expect(wrapper.emitted('activate')).toBeFalsy()
+  })
+})

package/src/components/footer/CFooter.ts

@@ -27,7 +27,7 @@ const CFooter = defineComponent({
       h(
         props.as,
         { class: ['footer', { [`footer-${props.position}`]: props.position }] },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/footer/__tests__/__snapshots__/CFooter.spec.ts.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Customize (number two) CFooter component renders correctly 1`] = `"<footer class="footer">Default slot</footer>"`;
+
 exports[`Customize CFooter component renders correctly 1`] = `"<div class="footer footer-fixed">Default slot</div>"`;
 
 exports[`Loads and display CFooter component renders correctly 1`] = `"<div class="footer">Default slot</div>"`;

package/src/components/form/CForm.ts

@@ -13,7 +13,7 @@ const CForm = defineComponent({
       h(
         'form',
         { class: [{ ['was-validated']: props.validated }] },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/CFormCheck.ts

@@ -135,7 +135,7 @@ const CFormCheck = defineComponent({
         if (props.modelValue.includes(props.value)) {
           emit(
             'update:modelValue',
-            props.modelValue.filter((value) => value !== props.value),
+            props.modelValue.filter((value) => value !== props.value)
           )
         } else {
           emit('update:modelValue', [...props.modelValue, props.value])
@@ -210,14 +210,14 @@ const CFormCheck = defineComponent({
             },
             {
               default: () => (slots.label && slots.label()) || props.label,
-            },
+            }
           )
         : h(
             CFormLabel,
             { class: 'form-check-label', ...(props.id && { for: props.id }) },
             {
               default: () => (slots.label && slots.label()) || props.label,
-            },
+            }
           )
 
     const formValidation = () => {
@@ -244,7 +244,7 @@ const CFormCheck = defineComponent({
                     customClassName: className,
                     ...(props.id && { for: props.id }),
                   },
-                  [formControl(), props.label],
+                  [formControl(), props.label]
                 ),
                 formValidation(),
               ]
@@ -253,7 +253,7 @@ const CFormCheck = defineComponent({
                 {
                   class: className,
                 },
-                [formControl(), props.label && formLabel(), formValidation()],
+                [formControl(), props.label && formLabel(), formValidation()]
               )
           : formControl()
   },

package/src/components/form/CFormControlValidation.ts

@@ -56,7 +56,7 @@ const CFormControlValidation = defineComponent({
           },
           {
             default: () => (slots.feedback && slots.feedback()) || props.feedback,
-          },
+          }
         ),
       (props.feedbackInvalid || slots.feedbackInvalid) &&
         h(
@@ -69,7 +69,7 @@ const CFormControlValidation = defineComponent({
           {
             default: () =>
               (slots.feedbackInvalid && slots.feedbackInvalid()) || props.feedbackInvalid,
-          },
+          }
         ),
       (props.feedbackValid || slots.feedbackValid) &&
         h(
@@ -80,7 +80,7 @@ const CFormControlValidation = defineComponent({
           },
           {
             default: () => (slots.feedbackValid && slots.feedbackValid()) || props.feedbackValid,
-          },
+          }
         ),
     ]
   },

package/src/components/form/CFormFeedback.ts

@@ -35,7 +35,7 @@ const CFormFeedback = defineComponent({
             },
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })