@coreui/vue-pro 5.18.0 → 5.19.0

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/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()
       )
   },
 })

package/src/components/form/CFormFloating.ts

@@ -9,7 +9,7 @@ const CFormFloating = defineComponent({
         {
           class: 'form-floating',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/CFormInput.ts

@@ -168,7 +168,7 @@ const CFormInput = defineComponent({
                 type: props.type,
                 ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue }),
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -179,7 +179,7 @@ const CFormInput = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CFormLabel.ts

@@ -15,7 +15,7 @@ const CFormLabel = defineComponent({
         {
           class: props.customClassName ?? 'form-label',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/form/CFormRange.ts

@@ -33,7 +33,7 @@ const CFormRange = defineComponent({
     /**
      * Specifies the interval between legal numbers in the component.
      */
-    steps: Number,
+    step: Number,
     /**
      * The `value` attribute of component.
      *
@@ -67,7 +67,7 @@ const CFormRange = defineComponent({
           },
           {
             default: () => (slots.label && slots.label()) || props.label,
-          },
+          }
         ),
       h(
         'input',
@@ -79,11 +79,11 @@ const CFormRange = defineComponent({
           min: props.min,
           onChange: (event: InputEvent) => handleChange(event),
           readonly: props.readonly,
-          steps: props.steps,
+          step: props.step,
           type: 'range',
           value: props.modelValue,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       ),
     ]
   },

package/src/components/form/CFormSelect.ts

@@ -170,10 +170,10 @@ const CFormSelect = defineComponent({
                           }),
                         }),
                       },
-                      typeof option === 'string' ? option : option.label,
+                      typeof option === 'string' ? option : option.label
                     )
                   })
-                : slots.default && slots.default(),
+                : slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -184,7 +184,7 @@ const CFormSelect = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CFormSwitch.ts

@@ -109,9 +109,9 @@ const CFormSwitch = defineComponent({
               },
               {
                 default: () => props.label,
-              },
+              }
             ),
-        ],
+        ]
       )
   },
 })

package/src/components/form/CFormTextarea.ts

@@ -141,7 +141,7 @@ const CFormTextarea = defineComponent({
                 onInput: (event: InputEvent) => handleInput(event),
                 ...(props.modelValue && { value: props.modelValue }),
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
           ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
           ...(slots.feedbackInvalid && {
@@ -152,7 +152,7 @@ const CFormTextarea = defineComponent({
           }),
           ...(slots.label && { label: () => slots.label && slots.label() }),
           ...(slots.text && { text: () => slots.text && slots.text() }),
-        },
+        }
       )
   },
 })

package/src/components/form/CInputGroup.ts

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

package/src/components/form/__tests__/CFormRange.spec.ts

@@ -16,7 +16,7 @@ const customWrapper = mount(Component, {
     max: 400,
     min: 50,
     readonly: true,
-    steps: 10,
+    step: 10,
     value: 250,
   },
   slots: {
@@ -50,6 +50,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('input').attributes('max')).toBe('400')
     expect(customWrapper.find('input').attributes('min')).toBe('50')
     expect(customWrapper.find('input').attributes('readonly')).toBe('')
-    expect(customWrapper.find('input').attributes('steps')).toBe('10')
+    expect(customWrapper.find('input').attributes('step')).toBe('10')
   })
 })

package/src/components/form/__tests__/CFormText.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    as 'p',
+    as: 'p',
   },
   slots: {
     default: 'Default slot',

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormRange component renders correctly 1`] = `"<input class="form-range" disabled="" max="400" min="50" readonly="" steps="10" type="range">"`;
+exports[`Customize CFormRange component renders correctly 1`] = `"<input class="form-range" disabled="" max="400" min="50" readonly="" step="10" type="range">"`;
 
 exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class="form-range" type="range">"`;

package/src/components/grid/CCol.ts

@@ -114,7 +114,7 @@ const CCol = defineComponent({
         {
           class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col'],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/grid/CContainer.ts

@@ -43,7 +43,9 @@ const CContainer = defineComponent({
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
 
-      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
+      if (breakpoint) {
+        repsonsiveClassNames.push(`container-${bp}`)
+      }
     })
     return () =>
       h(
@@ -51,7 +53,7 @@ const CContainer = defineComponent({
         {
           class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container'],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/grid/CRow.ts

@@ -85,7 +85,7 @@ const CRow = defineComponent({
         {
           class: ['row', repsonsiveClassNames],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeader.ts

@@ -44,9 +44,9 @@ const CHeader = defineComponent({
           ? h(
               'div',
               { class: `container${props.container === true ? '' : '-' + props.container}` },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             )
-          : slots.default && slots.default(),
+          : slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeaderNav.ts

@@ -19,7 +19,7 @@ const CHeaderNav = defineComponent({
           class: 'header-nav',
           role: 'navigation',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/header/CHeaderToggler.ts

@@ -11,7 +11,7 @@ const CHeaderToggler = defineComponent({
           type: 'button',
           'aria-label': 'Toggle navigation',
         },
-        slots.default ? slots.default() : h('span', { class: ['header-toggler-icon'] }),
+        slots.default ? slots.default() : h('span', { class: ['header-toggler-icon'] })
       )
   },
 })

package/src/components/header/__tests__/CHeader.spec.ts

@@ -54,7 +54,6 @@ describe(`Customize ${ComponentName} component`, () => {
   })
 })
 
-
 describe(`Customize (number two) ${ComponentName} component`, () => {
   it('renders correctly', () => {
     expect(customWrapperTwo.html()).toMatchSnapshot()
@@ -62,4 +61,4 @@ describe(`Customize (number two) ${ComponentName} component`, () => {
   it('tag name is custom', () => {
     expect(customWrapperTwo.element.tagName).toBe('HEADER')
   })
-})
+})

package/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './card'
 export * from './carousel'
 export * from './chip'
 export * from './chip-input'
+export * from './chip-set'
 export * from './close-button'
 export * from './collapse'
 export * from './conditional-teleport'
@@ -43,6 +44,7 @@ export * from './progress'
 export * from './popover'
 export * from './range-slider'
 export * from './rating'
+export * from './search-button'
 export * from './sidebar'
 export * from './smart-pagination'
 export * from './smart-table'