@coreui/vue-pro 5.18.0 → 5.19.0

package/src/components/chip-set/__tests__/CChipSet.spec.ts

@@ -0,0 +1,174 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { CChipSet, type CChipSetItem } from '../CChipSet'
+import { CChip } from '../../chip/CChip'
+
+const set = (props: Record<string, unknown>, values: string[]) =>
+  mount(CChipSet, {
+    props,
+    slots: {
+      default: () => values.map((v) => h(CChip, { value: v, key: v }, { default: () => v })),
+    },
+  })
+
+describe('CChipSet', () => {
+  it('has correct name', () => {
+    expect(CChipSet.name).toBe('CChipSet')
+  })
+
+  it('renders .chip-set', () => {
+    const w = set({}, ['a', 'b'])
+    expect(w.classes()).toContain('chip-set')
+    expect(w.findAll('.chip')).toHaveLength(2)
+  })
+
+  it('moves focus between chips with the keyboard', async () => {
+    const w = mount(CChipSet, {
+      attachTo: document.body,
+      props: { selectable: true },
+      slots: {
+        default: () =>
+          ['a', 'b', 'c'].map((v) => h(CChip, { value: v, key: v }, { default: () => v })),
+      },
+    })
+    const chips = w.findAll('.chip')
+    ;(chips[0].element as HTMLElement).focus()
+    await chips[0].trigger('keydown', { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(chips[1].element)
+    await chips[1].trigger('keydown', { key: 'End' })
+    expect(document.activeElement).toBe(chips[2].element)
+    await chips[2].trigger('keydown', { key: 'Home' })
+    expect(document.activeElement).toBe(chips[0].element)
+    // No cycling past the first chip.
+    await chips[0].trigger('keydown', { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(chips[0].element)
+    w.unmount()
+  })
+
+  it('mirrors arrow keys in RTL', async () => {
+    document.documentElement.dir = 'rtl'
+    const w = mount(CChipSet, {
+      attachTo: document.body,
+      props: { selectable: true },
+      slots: {
+        default: () => ['a', 'b'].map((v) => h(CChip, { value: v, key: v }, { default: () => v })),
+      },
+    })
+    const chips = w.findAll('.chip')
+    ;(chips[0].element as HTMLElement).focus()
+    // In RTL, ArrowLeft moves to the next chip.
+    await chips[0].trigger('keydown', { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(chips[1].element)
+    await chips[1].trigger('keydown', { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(chips[0].element)
+    w.unmount()
+    document.documentElement.dir = ''
+  })
+
+  it('selectable: click selects (multiple)', async () => {
+    const w = set({ selectable: true }, ['a', 'b'])
+    const chips = w.findAll('.chip')
+    await chips[0].trigger('click')
+    await chips[1].trigger('click')
+    expect(chips[0].classes()).toContain('active')
+    expect(chips[1].classes()).toContain('active')
+    expect(w.emitted('update:selected')?.slice(-1)[0]).toEqual([['a', 'b']])
+  })
+
+  it('single selection deselects siblings', async () => {
+    const w = set({ selectable: true, selectionMode: 'single' }, ['a', 'b'])
+    const chips = w.findAll('.chip')
+    await chips[0].trigger('click')
+    await chips[1].trigger('click')
+    expect(chips[0].classes()).not.toContain('active')
+    expect(chips[1].classes()).toContain('active')
+    expect(w.emitted('update:selected')?.slice(-1)[0]).toEqual([['b']])
+  })
+
+  it('controlled v-model', () => {
+    const w = set({ selectable: true, selected: ['b'] }, ['a', 'b'])
+    const chips = w.findAll('.chip')
+    expect(chips[0].classes()).not.toContain('active')
+    expect(chips[1].classes()).toContain('active')
+  })
+
+  it('filter shows check icon when selected', () => {
+    const w = set({ filter: true, selected: ['a'] }, ['a'])
+    expect(w.find('.chip-check').exists()).toBe(true)
+  })
+
+  it('removable fires remove', async () => {
+    const w = set({ removable: true }, ['a', 'b'])
+    await w.find('.chip-remove').trigger('click')
+    expect(w.emitted('remove')?.[0]).toEqual(['a'])
+  })
+
+  it('v-model:chips — emits update:chips without the removed chip', async () => {
+    const w = mount(CChipSet, {
+      props: { removable: true, chips: ['a', { value: 'b', label: 'B' }] },
+    })
+    await w.find('.chip-remove').trigger('click')
+    expect(w.emitted('remove')?.[0]).toEqual(['a'])
+    expect(w.emitted('update:chips')?.[0]).toEqual([[{ value: 'b', label: 'B' }]])
+  })
+
+  it('v-model:chips — the set removes the chip once the parent syncs', async () => {
+    const w = mount(CChipSet, {
+      props: {
+        removable: true,
+        chips: ['a', 'b'],
+        'onUpdate:chips': (next: (string | CChipSetItem)[]) => w.setProps({ chips: next }),
+      },
+    })
+    expect(w.findAll('.chip')).toHaveLength(2)
+    await w.find('.chip-remove').trigger('click')
+    await w.vm.$nextTick()
+    expect(w.findAll('.chip')).toHaveLength(1)
+  })
+
+  it('renders chips from the chips prop (strings and objects)', async () => {
+    const w = mount(CChipSet, {
+      attachTo: document.body,
+      props: {
+        selectable: true,
+        chips: [
+          'react',
+          { value: 'vue', label: 'Vue' },
+          { value: 'ng', label: 'Angular', selectable: false },
+        ],
+      },
+    })
+    expect(w.findAll('.chip')).toHaveLength(3)
+    expect(w.text()).toContain('Vue')
+
+    const chips = w.findAll('.chip')
+    // Per-item override still works with the data-driven API.
+    await chips[2].trigger('click')
+    expect(chips[2].classes()).not.toContain('active')
+    w.unmount()
+  })
+
+  it('disabled forwards to chips', () => {
+    const w = set({ disabled: true, removable: true }, ['a'])
+    expect(w.find('.chip').classes()).toContain('disabled')
+    // A disabled chip never gets a remove button (parity with vanilla).
+    expect(w.find('.chip-remove').exists()).toBe(false)
+  })
+
+  it('lets a chip override set config (opt out of selectable / removable)', async () => {
+    const w = mount(CChipSet, {
+      props: { selectable: true, removable: true },
+      slots: {
+        default: () => [
+          h(CChip, { value: 'a' }, { default: () => 'A' }),
+          h(CChip, { value: 'b', selectable: false, removable: false }, { default: () => 'B' }),
+        ],
+      },
+    })
+    const chips = w.findAll('.chip')
+    await chips[1].trigger('click')
+    expect(chips[1].classes()).not.toContain('active')
+    expect(chips[0].find('.chip-remove').exists()).toBe(true)
+    expect(chips[1].find('.chip-remove').exists()).toBe(false)
+  })
+})

package/src/components/chip-set/buildChips.ts

@@ -0,0 +1,29 @@
+import { h, type VNode } from 'vue'
+
+import { CChip } from '../chip/CChip'
+
+export interface CChipSetItem {
+  /**
+   * The value that identifies the chip and tracks its selection.
+   */
+  value: string
+  /**
+   * The chip content. Falls back to `value` when omitted.
+   */
+  label?: string | object
+  [key: string]: unknown
+}
+
+// Build CChip vnodes from data items (string or descriptor). Coordination is
+// handled by the chip-set context the chips inject, so this only creates them —
+// shared by CChipSet's `chips` prop and CChipInput's value list. It lives apart
+// from useChipSet to avoid a CChip ↔ useChipSet import cycle.
+export const chipsFromData = (items: (string | CChipSetItem)[] = []): VNode[] =>
+  items.map((item) => {
+    if (typeof item === 'string') {
+      return h(CChip, { value: item, key: item }, { default: () => item })
+    }
+
+    const { value, label, ...rest } = item
+    return h(CChip, { value, key: value, ...rest }, { default: () => label ?? value })
+  })

package/src/components/chip-set/index.ts

@@ -0,0 +1,3 @@
+import { CChipSet } from './CChipSet'
+
+export { CChipSet }

package/src/components/chip-set/useChipSet.ts

@@ -0,0 +1,168 @@
+import { computed, nextTick, provide, ref, type ComputedRef, type InjectionKey } from 'vue'
+
+import { SELECTOR_CHIP_FOCUSABLE } from '../chip/const'
+import { isRTL } from '../../utils'
+
+export interface ChipSetConfig {
+  disabled?: boolean
+  filter?: boolean
+  removable?: boolean
+  removeIcon?: string | object
+  selectable?: boolean
+  selectedIcon?: string | object
+}
+
+export interface ChipSetContext {
+  /** Config forwarded to every chip in the set; the chip's own props win. */
+  config: ComputedRef<ChipSetConfig>
+  isSelected: (value: string) => boolean
+  toggleSelected: (value: string, next: boolean, event: MouseEvent | KeyboardEvent) => void
+  removeChip: (value: string, event: MouseEvent | KeyboardEvent) => void
+}
+
+export const chipSetContextKey: InjectionKey<ChipSetContext> = Symbol('CChipSet')
+
+export interface UseChipSetOptions {
+  config: ComputedRef<ChipSetConfig>
+  selectionMode?: () => 'single' | 'multiple'
+  /** Controlled selected values (e.g. v-model:selected). Undefined keeps it uncontrolled. */
+  selected?: () => string[] | undefined
+  defaultSelected?: string[]
+  /** Move focus to a neighbor after removal. Containers with their own target (CChipInput → input) pass false. */
+  restoreFocusOnRemove?: boolean
+  onSelectionChange?: (selected: string[]) => void
+  onRemove?: (value: string) => void
+}
+
+/**
+ * Shared chip-set engine for CChipSet and CChipInput — the Vue equivalent of the
+ * vanilla `ChipInput extends ChipSet`. It owns selection coordination
+ * (single/multiple, controlled-or-uncontrolled), roving focus, and the
+ * focus-a-neighbor-after-removal behavior, and `provide`s a context that CChip
+ * injects. Existence of the chips stays with the caller.
+ */
+export const useChipSet = (options: UseChipSetOptions) => {
+  const {
+    config,
+    selectionMode = () => 'multiple',
+    selected = () => undefined,
+    defaultSelected = [],
+    restoreFocusOnRemove = true,
+    onSelectionChange,
+    onRemove,
+  } = options
+
+  const rootRef = ref<HTMLElement>()
+  const internalSelected = ref<string[]>(defaultSelected)
+
+  const selectedValues = computed(() => {
+    const controlled = selected()
+    return controlled === undefined ? internalSelected.value : controlled
+  })
+
+  const getFocusableChips = (): HTMLElement[] => [
+    ...(rootRef.value?.querySelectorAll<HTMLElement>(SELECTOR_CHIP_FOCUSABLE) ?? []),
+  ]
+
+  const emitSelection = (next: string[]): void => {
+    if (selected() === undefined) {
+      internalSelected.value = next
+    }
+    onSelectionChange?.(next)
+  }
+
+  const toggleSelected = (value: string, next: boolean): void => {
+    const isSelected = selectedValues.value.includes(value)
+    if (next === isSelected) {
+      return
+    }
+
+    if (next) {
+      // Single selection mode keeps only the freshly selected chip.
+      emitSelection(selectionMode() === 'single' ? [value] : [...selectedValues.value, value])
+      return
+    }
+
+    emitSelection(selectedValues.value.filter((item) => item !== value))
+  }
+
+  const clearSelection = (): void => {
+    if (selectedValues.value.length > 0) {
+      emitSelection([])
+    }
+  }
+
+  const removeChip = (value: string): void => {
+    if (restoreFocusOnRemove) {
+      const chips = getFocusableChips()
+      const index = chips.findIndex((chip) => chip.dataset.coreuiChipValue === value)
+      // Prefer the next chip, fall back to the previous one at the end.
+      const neighbor = chips[index + 1] ?? chips[index - 1] ?? null
+      const neighborValue = neighbor?.dataset.coreuiChipValue ?? null
+
+      if (neighborValue !== null) {
+        nextTick(() => {
+          rootRef.value
+            ?.querySelector<HTMLElement>(`[data-coreui-chip-value="${neighborValue}"]`)
+            ?.focus()
+        })
+      }
+    }
+
+    emitSelection(selectedValues.value.filter((item) => item !== value))
+    onRemove?.(value)
+  }
+
+  // Roving focus: arrow keys move between chips and Home/End jump to the edges,
+  // with no cycling. Returns true when the key was handled.
+  const handleKeydown = (event: KeyboardEvent): boolean => {
+    const chip = (event.target as HTMLElement).closest<HTMLElement>(SELECTOR_CHIP_FOCUSABLE)
+    if (!chip) {
+      return false
+    }
+
+    const chips = getFocusableChips()
+    const index = chips.indexOf(chip)
+    // In RTL the visual direction is mirrored, so left/right swap.
+    const rtl = isRTL(rootRef.value)
+
+    switch (event.key) {
+      case 'ArrowLeft': {
+        event.preventDefault()
+        chips[rtl ? index + 1 : index - 1]?.focus()
+        return true
+      }
+
+      case 'ArrowRight': {
+        event.preventDefault()
+        chips[rtl ? index - 1 : index + 1]?.focus()
+        return true
+      }
+
+      case 'Home': {
+        event.preventDefault()
+        chips[0]?.focus()
+        return true
+      }
+
+      case 'End': {
+        event.preventDefault()
+        chips[chips.length - 1]?.focus()
+        return true
+      }
+
+      default: {
+        return false
+      }
+    }
+  }
+
+  provide(chipSetContextKey, {
+    config,
+    isSelected: (value: string) => selectedValues.value.includes(value),
+    toggleSelected: (value, next) => toggleSelected(value, next),
+    removeChip: (value) => removeChip(value),
+  })
+
+  return { rootRef, selectedValues, clearSelection, getFocusableChips, handleKeydown }
+}

package/src/components/collapse/CCollapse.ts

@@ -49,7 +49,7 @@ const CCollapse = defineComponent({
     const handleAfterEnter = (el: RendererElement) => {
       show.value = true
       collapsing.value = false
-      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
+      el.style.removeProperty(props.horizontal ? 'width' : 'height')
     }
 
     const handleBeforeLeave = (el: RendererElement) => {
@@ -76,7 +76,7 @@ const CCollapse = defineComponent({
 
     const handleAfterLeave = (el: RendererElement) => {
       collapsing.value = false
-      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
+      el.style.removeProperty(props.horizontal ? 'width' : 'height')
     }
 
     return () =>
@@ -101,10 +101,10 @@ const CCollapse = defineComponent({
                   { 'collapse-horizontal': props.horizontal, show: show.value },
                 ],
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
-            [[vVisible, props.visible]],
-          ),
+            [[vVisible, props.visible]]
+          )
       )
   },
 })

package/src/components/collapse/__tests__/CCollapse.spec.ts

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { CCollapse as Component } from '../../../index'
+
+const ComponentName = 'CCollapse'
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+
+  it('renders correctly', () => {
+    const wrapper = mount(Component, {
+      slots: { default: 'Collapsed content' },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('renders the default slot', () => {
+    const wrapper = mount(Component, {
+      slots: { default: 'Collapsed content' },
+    })
+    expect(wrapper.text()).toContain('Collapsed content')
+  })
+
+  it('is hidden by default', () => {
+    const wrapper = mount(Component, {
+      slots: { default: 'content' },
+    })
+    expect(wrapper.find('div').classes('collapse')).toBe(true)
+    expect(wrapper.find('div').classes('show')).toBe(false)
+  })
+
+  it('is shown when visible is true', () => {
+    const wrapper = mount(Component, {
+      props: { visible: true },
+      slots: { default: 'content' },
+    })
+    expect(wrapper.find('div').classes('show')).toBe(true)
+  })
+
+  it('applies the horizontal class', () => {
+    const wrapper = mount(Component, {
+      props: { horizontal: true },
+      slots: { default: 'content' },
+    })
+    expect(wrapper.find('div').classes('collapse-horizontal')).toBe(true)
+  })
+})

package/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CCollapse component renders correctly 1`] = `
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="collapse">Collapsed content</div>
+</transition-stub>"
+`;

package/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, PropType, ref, Teleport, watch } from 'vue'
 
 const getContainer = (
-  container?: HTMLElement | (() => HTMLElement) | string,
+  container?: HTMLElement | (() => HTMLElement) | string
 ): HTMLElement | string => {
   if (container) {
     return typeof container === 'function' ? container() : container
@@ -39,7 +39,7 @@ const CConditionalTeleport = defineComponent({
         if (props.teleport) {
           container.value = getContainer(props.container)
         }
-      },
+      }
     )
 
     return () =>
@@ -51,7 +51,7 @@ const CConditionalTeleport = defineComponent({
         },
         {
           default: () => slots.default && slots.default(),
-        },
+        }
       )
   },
 })

package/src/components/conditional-teleport/__tests__/CConditionalTeleport.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { CConditionalTeleport as Component } from '../../../index'
+
+const ComponentName = 'CConditionalTeleport'
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+
+  it('renders the slot inline when teleport is disabled', () => {
+    const wrapper = mount(Component, {
+      props: { teleport: false },
+      slots: { default: '<span class="child">Inline</span>' },
+    })
+    expect(wrapper.find('.child').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Inline')
+  })
+
+  it('teleports the slot to the body by default', () => {
+    mount(Component, {
+      props: { container: document.body },
+      slots: { default: '<span class="teleported">Teleported</span>' },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.teleported')).not.toBeNull()
+  })
+})

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', {

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