@coreui/vue-pro 5.17.1 → 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/date-picker/CDatePicker.ts

@@ -159,6 +159,19 @@ const CDatePicker = 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.
      */
@@ -297,14 +310,14 @@ const CDatePicker = 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.
@@ -373,6 +386,19 @@ const CDatePicker = 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: [
     /**
@@ -390,18 +416,52 @@ const CDatePicker = defineComponent({
      */
     'update:date',
   ],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     return () =>
-      h(CDateRangePicker, {
-        calendars: 1,
-        onStartDateChange: (date: Date, formatedDate: string) => {
-          emit('date-change', date, formatedDate)
-          emit('update:date', date)
+      h(
+        CDateRangePicker,
+        {
+          calendars: 1,
+          onStartDateChange: (date: Date, formatedDate: string) => {
+            emit('date-change', date, formatedDate)
+            emit('update:date', date)
+          },
+          range: false,
+          startDate: props.date,
+          ...props,
         },
-        range: false,
-        startDate: props.date,
-        ...props,
-      })
+        {
+          ...(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),
+          }),
+          ...(slots.navNextIcon && {
+            navNextIcon: () => slots.navNextIcon?.(),
+          }),
+          ...(slots.navNextDoubleIcon && {
+            navNextDoubleIcon: () =>
+              slots.navNextDoubleIcon?.(),
+          }),
+          ...(slots.navPrevIcon && {
+            navPrevIcon: () => slots.navPrevIcon?.(),
+          }),
+          ...(slots.navPrevDoubleIcon && {
+            navPrevDoubleIcon: () =>
+              slots.navPrevDoubleIcon?.(),
+          }),
+        }
+      )
   },
 })