@coreui/vue-pro 5.17.1 → 5.19.0

package/src/components/nav/__tests__/CNavGroup.spec.ts

@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils'
-import { CNavGroup as Component } from '../../../index'
+import { h, nextTick } from 'vue'
+import { CNavGroup as Component, CNavGroup, CNavItem } from '../../../index'
+import { CSidebarNav } from '../../sidebar/CSidebarNav'
 
 const ComponentName = 'CNavGroup'
 
@@ -38,14 +40,194 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('a').text()).toContain('togglerContent')
     expect(customWrapper.find('a').classes('nav-link')).toBe(true)
     expect(customWrapper.find('a').classes('nav-group-toggle')).toBe(true)
+    expect(customWrapper.find('a').attributes('aria-expanded')).toBe('true')
     expect(customWrapper.find('ul').classes('nav-group-items')).toBe(true)
     expect(customWrapper.find('ul').classes('compact')).toBe(true)
     expect(customWrapper.classes('nav-group')).toBe(true)
+    expect(customWrapper.classes('show')).toBe(true)
   })
-  it('emit event visible-change on click nav-group-toggle', () => {
-    let incrementEvent = customWrapper.emitted('visible-change')
-    customWrapper.find('.nav-group-toggle').trigger('click')
-    incrementEvent = customWrapper.emitted('visible-change')
-    expect(incrementEvent).toHaveLength(3)
+})
+
+describe(`${ComponentName} uncontrolled mode`, () => {
+  it('toggles its own visibility and emits on actual change', async () => {
+    const wrapper = mount(Component, {
+      slots: { togglerContent: 'togglerContent' },
+    })
+
+    expect(wrapper.classes('show')).toBe(false)
+    expect(wrapper.emitted('visible-change')).toBeUndefined()
+
+    await wrapper.find('.nav-group-toggle').trigger('click')
+
+    expect(wrapper.classes('show')).toBe(true)
+    expect(wrapper.emitted('update:visible')).toEqual([[true]])
+    expect(wrapper.emitted('visible-change')).toEqual([[true]])
+
+    await wrapper.find('.nav-group-toggle').trigger('click')
+
+    expect(wrapper.classes('show')).toBe(false)
+  })
+
+  it('does not emit visible-change on mount', () => {
+    const wrapper = mount(Component, {
+      slots: { togglerContent: 'togglerContent' },
+    })
+
+    expect(wrapper.emitted('visible-change')).toBeUndefined()
+  })
+
+  it('treats `visible` without a listener as default-open and stays toggleable', async () => {
+    const wrapper = mount(Component, {
+      propsData: { visible: true },
+      slots: { togglerContent: 'togglerContent' },
+    })
+
+    expect(wrapper.classes('show')).toBe(true)
+
+    await wrapper.find('.nav-group-toggle').trigger('click')
+
+    expect(wrapper.classes('show')).toBe(false)
+  })
+})
+
+const nested = () =>
+  mount(CSidebarNav, {
+    slots: {
+      default: () => [
+        h(
+          CNavGroup,
+          {},
+          {
+            togglerContent: () => 'A',
+            default: () => [
+              h(
+                CNavGroup,
+                {},
+                {
+                  togglerContent: () => 'B',
+                  default: () => [h(CNavItem, { href: '#' }, () => 'item')],
+                }
+              ),
+            ],
+          }
+        ),
+      ],
+    },
+  })
+
+describe(`${ComponentName} nested groups`, () => {
+  it('renders and toggles per level', async () => {
+    const wrapper = nested()
+    const group = (index: number) => wrapper.findAll('.nav-group')[index]
+
+    expect(group(0).classes('show')).toBe(false)
+
+    await wrapper.findAll('.nav-group-toggle')[0].trigger('click')
+    expect(group(0).classes('show')).toBe(true)
+    expect(group(1).classes('show')).toBe(false)
+
+    await wrapper.findAll('.nav-group-toggle')[1].trigger('click')
+    expect(group(1).classes('show')).toBe(true)
+
+    await wrapper.findAll('.nav-group-toggle')[0].trigger('click')
+    expect(group(0).classes('show')).toBe(false)
+  })
+
+  it('opening one sibling closes the other (per-level accordion)', async () => {
+    const wrapper = mount(CSidebarNav, {
+      slots: {
+        default: () => [
+          h(
+            CNavGroup,
+            {},
+            {
+              togglerContent: () => 'A',
+              default: () => [h(CNavItem, { href: '#' }, () => 'itemA')],
+            }
+          ),
+          h(
+            CNavGroup,
+            {},
+            {
+              togglerContent: () => 'B',
+              default: () => [h(CNavItem, { href: '#' }, () => 'itemB')],
+            }
+          ),
+        ],
+      },
+    })
+    const group = (index: number) => wrapper.findAll('.nav-group')[index]
+
+    await wrapper.findAll('.nav-group-toggle')[0].trigger('click')
+    expect(group(0).classes('show')).toBe(true)
+    expect(group(1).classes('show')).toBe(false)
+
+    await wrapper.findAll('.nav-group-toggle')[1].trigger('click')
+    expect(group(1).classes('show')).toBe(true)
+    expect(group(0).classes('show')).toBe(false)
+  })
+
+  it('an active nav link opens its ancestor groups', async () => {
+    const wrapper = mount(CSidebarNav, {
+      slots: {
+        default: () => [
+          h(
+            CNavGroup,
+            {},
+            {
+              togglerContent: () => 'A',
+              default: () => [
+                h(
+                  CNavGroup,
+                  {},
+                  {
+                    togglerContent: () => 'B',
+                    default: () => [h(CNavItem, { active: true, href: '#' }, () => 'item')],
+                  }
+                ),
+              ],
+            }
+          ),
+        ],
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.findAll('.nav-group')[0].classes('show')).toBe(true)
+    expect(wrapper.findAll('.nav-group')[1].classes('show')).toBe(true)
+  })
+})
+
+describe(`${ComponentName} controlled mode`, () => {
+  it('stays open when the parent rejects the collapse (#313)', async () => {
+    const onUpdate = jest.fn()
+    const wrapper = mount(Component, {
+      props: { visible: true, 'onUpdate:visible': onUpdate },
+      slots: { togglerContent: 'togglerContent' },
+    })
+
+    expect(wrapper.classes('show')).toBe(true)
+
+    await wrapper.find('.nav-group-toggle').trigger('click')
+
+    expect(onUpdate).toHaveBeenCalledWith(false)
+    expect(wrapper.classes('show')).toBe(true)
+  })
+
+  it('follows the prop when the parent accepts (v-model)', async () => {
+    const onUpdate = jest.fn()
+    const wrapper = mount(Component, {
+      props: { visible: true, 'onUpdate:visible': onUpdate },
+      slots: { togglerContent: 'togglerContent' },
+    })
+
+    await wrapper.find('.nav-group-toggle').trigger('click')
+    expect(onUpdate).toHaveBeenCalledWith(false)
+
+    await wrapper.setProps({ visible: false })
+
+    expect(wrapper.emitted('visible-change')).toContainEqual([false])
+    expect(wrapper.classes('show')).toBe(false)
   })
 })

package/src/components/nav/__tests__/CNavItem.spec.ts

@@ -40,12 +40,12 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.html()).toMatchSnapshot()
   })
   it('contain slots and classes', () => {
-    expect(customWrapper.find('div').text()).toContain('Default slot')
+    expect(customWrapper.find('a').text()).toContain('Default slot')
     expect(customWrapper.classes('nav-item')).toBe(true)
-    expect(customWrapper.find('div').classes('nav-link')).toBe(true)
-    expect(customWrapper.find('div').classes('active')).toBe(true)
-    expect(customWrapper.find('div').classes('disabled')).toBe(true)
-    expect(customWrapper.find('div').attributes('href')).toBe('/bazinga')
-    expect(customWrapper.find('div').attributes('aria-current')).toBe('page')
+    expect(customWrapper.find('a').classes('nav-link')).toBe(true)
+    expect(customWrapper.find('a').classes('active')).toBe(true)
+    expect(customWrapper.find('a').classes('disabled')).toBe(true)
+    expect(customWrapper.find('a').attributes('href')).toBe('/bazinga')
+    expect(customWrapper.find('a').attributes('aria-current')).toBe('page')
   })
 })

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap

@@ -1,18 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavGroup component renders correctly 1`] = `
-"<li class="nav-group show"><a class="nav-link nav-group-toggle">togglerContent</a>
-  <transition-stub appear="false" persisted="false" css="false">
-    <ul class="nav-group-items compact"></ul>
-  </transition-stub>
+"<li class="nav-group show"><a aria-expanded="true" class="nav-link nav-group-toggle" href="#">togglerContent</a>
+  <ul class="nav-group-items compact"></ul>
 </li>"
 `;
 
 exports[`Loads and display CNavGroup component renders correctly 1`] = `
 "<li class="nav-group">
   <!---->
-  <transition-stub appear="false" persisted="false" css="false">
-    <!---->
-  </transition-stub>
+  <ul class="nav-group-items"></ul>
 </li>"
 `;

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap

@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CNavItem component renders correctly 1`] = `
-"<li class="nav-item">
-  <div class="active disabled nav-link" aria-current="page" href="/bazinga">Default slot</div>
-</li>"
-`;
+exports[`Customize CNavItem component renders correctly 1`] = `"<div class="nav-item"><a class="active disabled nav-link" aria-current="page" aria-disabled="true" tabindex="-1" href="/bazinga">Default slot</a></div>"`;
 
 exports[`Loads and display CNavItem component renders correctly 1`] = `"<li class="nav-item">Default slot</li>"`;

package/src/components/navbar/CNavbar.ts

@@ -86,9 +86,9 @@ const CNavbar = 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/navbar/CNavbarBrand.ts

@@ -24,7 +24,7 @@ const CNavbarBrand = defineComponent({
           class: 'navbar-brand',
           href: props.href,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/navbar/CNavbarNav.ts

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

package/src/components/navbar/CNavbarToggler.ts

@@ -9,7 +9,7 @@ const CNavbarToggler = defineComponent({
         {
           class: 'navbar-toggler',
         },
-        slots.default ? slots.default() : h('span', { class: ['navbar-toggler-icon'] }),
+        slots.default ? slots.default() : h('span', { class: ['navbar-toggler-icon'] })
       )
   },
 })

package/src/components/navbar/__tests__/CNavbar.spec.ts

@@ -44,7 +44,7 @@ describe(`Customize ${ComponentName} component`, () => {
   it('contain slots and classes', () => {
     expect(customWrapper.classes('navbar')).toBe(true)
     expect(customWrapper.classes('bg-warning')).toBe(true)
-    expect(customWrapper.classes('navbar-light')).toBe(true)
+    expect(customWrapper.attributes('data-coreui-theme')).toBe('light')
     expect(customWrapper.classes('navbar-expand-xl')).toBe(true)
     expect(customWrapper.classes('fixed-bottom')).toBe(true)
     expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true)

package/src/components/pagination/CPagination.ts

@@ -42,8 +42,8 @@ const CPagination = defineComponent({
               },
             ],
           },
-          slots.default && slots.default(),
-        ),
+          slots.default && slots.default()
+        )
       )
   },
 })

package/src/components/pagination/CPaginationItem.ts

@@ -47,9 +47,9 @@ const CPaginationItem = defineComponent({
               },
               {
                 default: () => slots.default && slots.default(),
-              },
+              }
             )
-          : h(component, { class: ['page-link'] }, slots.default && slots.default()),
+          : h(component, { class: ['page-link'] }, slots.default && slots.default())
       )
     }
   },

package/src/components/placeholder/CPlaceholder.ts

@@ -104,7 +104,7 @@ export const CPlaceholder = defineComponent({
             repsonsiveClassNames,
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/popover/CPopover.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
-import type { Placement } from '@popperjs/core'
+import type { Options, Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
@@ -77,6 +77,19 @@ const CPopover = defineComponent({
         return ['top', 'right', 'bottom', 'left'].includes(value)
       },
     },
+    /**
+     * 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 popover.
+     *
+     * @since 5.10.0
+     */
+    popperConfig: {
+      type: [Object, Function] as PropType<
+        Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+      >,
+      default: undefined,
+    },
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
@@ -125,7 +138,7 @@ const CPopover = defineComponent({
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 
-    const popperConfig = {
+    const defaultPopperConfig = {
       modifiers: [
         {
           name: 'arrow',
@@ -149,6 +162,13 @@ const CPopover = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    const popperConfig = {
+      ...defaultPopperConfig,
+      ...(typeof props.popperConfig === 'function'
+        ? props.popperConfig(defaultPopperConfig)
+        : props.popperConfig),
+    }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -220,7 +240,7 @@ const CPopover = defineComponent({
                         { class: 'popover-header' },
                         {
                           default: () => (slots.title && slots.title()) || props.title,
-                        },
+                        }
                       ),
                     (props.content || slots.content) &&
                       h(
@@ -228,12 +248,12 @@ const CPopover = defineComponent({
                         { class: 'popover-body' },
                         {
                           default: () => (slots.content && slots.content()) || props.content,
-                        },
+                        }
                       ),
-                  ],
-                ),
+                  ]
+                )
             ),
-        },
+        }
       ),
       slots.toggler &&
         slots.toggler({

package/src/components/popover/__tests__/CPopover.spec.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { CPopover as Component } from '../../../index'
+
+const ComponentName = 'CPopover'
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+
+  it('renders the toggler slot', () => {
+    const wrapper = mount(Component, {
+      slots: { toggler: () => h('button', 'Toggle') },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Toggle')
+  })
+
+  it('does not render the popover when hidden', () => {
+    mount(Component, {
+      props: { content: 'Body', title: 'Title' },
+      slots: { toggler: () => h('button', 'Toggle') },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.popover')).toBeNull()
+  })
+
+  it('renders the popover with title and content when visible', () => {
+    const wrapper = mount(Component, {
+      props: { content: 'Body', title: 'Title', visible: true },
+      slots: { toggler: () => h('button', 'Toggle') },
+      attachTo: document.body,
+    })
+
+    const popover = document.body.querySelector('.popover')
+    expect(popover).not.toBeNull()
+    expect(popover?.querySelector('.popover-header')?.textContent).toBe('Title')
+    expect(popover?.querySelector('.popover-body')?.textContent).toBe('Body')
+
+    wrapper.unmount()
+  })
+})

package/src/components/progress/CProgress.ts

@@ -101,8 +101,8 @@ const CProgress = defineComponent({
                 value: props.value,
                 variant: props.variant,
               },
-              () => slots.default && slots.default(),
-            ),
+              () => slots.default && slots.default()
+            )
       )
   },
 })

package/src/components/progress/CProgressBar.ts

@@ -51,7 +51,7 @@ const CProgressBar = defineComponent({
           ],
           ...(!stacked && { style: { width: `${props.value}%` } }),
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/progress/CProgressStacked.ts

@@ -11,7 +11,7 @@ const CProgressStacked = defineComponent({
         {
           class: 'progress-stacked',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/progress/__tests__/CProgressBar.spec.ts

@@ -45,10 +45,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('progress-bar-striped')).toBe(true)
     expect(customWrapper.classes('progress-bar-animated')).toBe(true)
     expect(customWrapper.classes('bg-warning')).toBe(true)
-    expect(customWrapper.attributes('role')).toBe('progressbar')
     expect(customWrapper.attributes('style')).toBe('width: 75%;')
-    expect(customWrapper.attributes('aria-valuenow')).toBe('75')
-    expect(customWrapper.attributes('aria-valuemin')).toBe('0')
-    expect(customWrapper.attributes('aria-valuemax')).toBe('100')
   })
 })

package/src/components/search-button/CSearchButton.ts

@@ -0,0 +1,163 @@
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+  formatShortcutTokens,
+  getPreferredShortcut,
+  getPressedKeys,
+  matchesShortcut,
+  parseShortcut,
+  shouldIgnoreShortcut,
+} from './utils'
+
+export const CSearchButton = defineComponent({
+  name: 'CSearchButton',
+  props: {
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Placeholder content rendered inside `.search-button-placeholder`.
+     */
+    placeholder: {
+      type: String,
+      default: 'Search',
+    },
+    /**
+     * Prevent the browser's default behavior when the configured shortcut matches.
+     */
+    preventDefault: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Comma-separated shortcut list. The component matches all configured shortcuts and renders the platform-preferred one.
+     */
+    shortcut: {
+      type: String,
+      default: 'meta+/,ctrl+/',
+    },
+  },
+  emits: [
+    /**
+     * Event called when the user clicks on the component.
+     */
+    'click',
+    /**
+     * Event called when the component is activated by click or keyboard shortcut.
+     */
+    'trigger',
+  ],
+  setup(props, { emit, slots }) {
+    const activeKeys = ref<string[]>([])
+    const shortcuts = computed(() => parseShortcut(props.shortcut))
+    const preferredShortcut = computed(() => getPreferredShortcut(shortcuts.value))
+    const shortcutTokens = computed(() =>
+      formatShortcutTokens(preferredShortcut.value?.shortcut || '')
+    )
+
+    const handleShortcut = (event: KeyboardEvent) => {
+      if (props.disabled || event.defaultPrevented || event.repeat || shouldIgnoreShortcut(event)) {
+        return
+      }
+
+      const matchedShortcut = shortcuts.value.find((shortcut) => matchesShortcut(shortcut, event))
+
+      if (!matchedShortcut) {
+        return
+      }
+
+      if (props.preventDefault) {
+        event.preventDefault()
+      }
+
+      emit('trigger')
+    }
+
+    const handleDocumentKeydown = (event: KeyboardEvent) => {
+      activeKeys.value = Array.from(getPressedKeys(event))
+      handleShortcut(event)
+    }
+
+    const handleDocumentKeyup = (event: KeyboardEvent) => {
+      activeKeys.value = Array.from(getPressedKeys(event))
+    }
+
+    const handleWindowBlur = () => {
+      activeKeys.value = []
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      emit('click', event)
+      emit('trigger')
+    }
+
+    onMounted(() => {
+      if (typeof document === 'undefined' || typeof window === 'undefined') {
+        return
+      }
+
+      document.addEventListener('keydown', handleDocumentKeydown)
+      document.addEventListener('keyup', handleDocumentKeyup)
+      window.addEventListener('blur', handleWindowBlur)
+    })
+
+    onBeforeUnmount(() => {
+      if (typeof document === 'undefined' || typeof window === 'undefined') {
+        return
+      }
+
+      document.removeEventListener('keydown', handleDocumentKeydown)
+      document.removeEventListener('keyup', handleDocumentKeyup)
+      window.removeEventListener('blur', handleWindowBlur)
+    })
+
+    return () =>
+      h(
+        'button',
+        {
+          type: 'button',
+          class: 'search-button',
+          disabled: props.disabled,
+          onClick: handleClick,
+        },
+        [
+          slots.default
+            ? slots.default()
+            : [
+                slots.icon
+                  ? slots.icon()
+                  : h(
+                      'svg',
+                      {
+                        class: 'search-button-icon',
+                        xmlns: 'http://www.w3.org/2000/svg',
+                        viewBox: '0 0 512 512',
+                        'aria-hidden': 'true',
+                      },
+                      h('path', {
+                        fill: 'currentColor',
+                        d: 'm479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941',
+                      })
+                    ),
+                h('span', { class: 'search-button-placeholder' }, props.placeholder),
+              ],
+          h(
+            'span',
+            { class: 'search-button-keys', 'aria-hidden': 'true' },
+            shortcutTokens.value.map((key) =>
+              h(
+                'span',
+                {
+                  class: ['search-button-key', { active: activeKeys.value.includes(key) }],
+                  'data-coreui-search-button-key': key,
+                  key,
+                },
+                key
+              )
+            )
+          ),
+        ]
+      )
+  },
+})