@coreui/vue-pro 5.18.0 → 5.19.0

package/src/components/chip-input/CChipInput.ts

@@ -1,16 +1,53 @@
-import { computed, defineComponent, h, ref, watch, PropType } from 'vue'
+import { computed, defineComponent, h, ref, useId, PropType, type VNode } from 'vue'
 
-import { CChip } from '../chip/CChip'
+import { chipsFromData } from '../chip-set/buildChips'
+import { useChipSet, type ChipSetConfig } from '../chip-set/useChipSet'
+import { isRTL } from '../../utils'
 
 type ChipClassName = string | ((value: string) => string)
 
+// Initial chip values can be supplied declaratively as CChip slot content
+// (parity with the vanilla ChipInput, which reads existing .chip elements).
+const slotText = (slot: unknown): string | undefined => {
+  if (typeof slot !== 'function') {
+    return undefined
+  }
+
+  const rendered = slot()
+  const first = Array.isArray(rendered) ? rendered[0] : rendered
+  if (typeof first === 'string') {
+    return first
+  }
+
+  return typeof first?.children === 'string' ? first.children : undefined
+}
+
+const valuesFromSlot = (nodes: VNode[] = []): string[] => {
+  const values: string[] = []
+  for (const node of nodes) {
+    if (Array.isArray(node.children)) {
+      values.push(...valuesFromSlot(node.children as VNode[]))
+      continue
+    }
+
+    const value =
+      (node.props?.value as string | undefined) ??
+      slotText((node.children as { default?: unknown } | null)?.default)
+    if (value) {
+      values.push(value)
+    }
+  }
+
+  return values
+}
+
 const uniqueValues = (values: string[]): string[] => [
   ...new Set(values.map((value) => value.trim()).filter(Boolean)),
 ]
 
 const resolveChipClassName = (
   chipClassName: ChipClassName | undefined,
-  value: string,
+  value: string
 ): string | undefined => {
   if (!chipClassName) {
     return undefined
@@ -52,6 +89,10 @@ const CChipInput = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * Renders the chips as filter chips, each showing a leading check icon while selected. Implies `selectable`.
+     */
+    filter: Boolean,
     /**
      * Sets the `id` of the internal text input rendered by the component.
      */
@@ -100,6 +141,15 @@ const CChipInput = defineComponent({
      * Enables chip selection behavior in the component.
      */
     selectable: Boolean,
+    /**
+     * Sets how many chips can be selected at once.
+     *
+     * @values 'single', 'multiple'
+     */
+    selectionMode: {
+      type: String as PropType<'single' | 'multiple'>,
+      default: 'multiple',
+    },
     /**
      * Sets the separator character used to create chips while typing or pasting in the component.
      */
@@ -145,21 +195,39 @@ const CChipInput = defineComponent({
      */
     'update:modelValue',
   ],
-  setup(props, { attrs, emit, expose }) {
-    const internalValues = ref<string[]>(uniqueValues(props.defaultValue))
+  setup(props, { attrs, emit, expose, slots }) {
+    const internalValues = ref<string[]>(
+      uniqueValues(
+        props.defaultValue.length > 0 ? props.defaultValue : valuesFromSlot(slots.default?.())
+      )
+    )
     const inputValue = ref('')
-    const selectedValues = ref<string[]>([])
-    const rootRef = ref<HTMLDivElement>()
     const inputRef = ref<HTMLInputElement>()
+    const generatedName = useId()
 
     const values = computed(() =>
-      props.modelValue !== undefined
-        ? uniqueValues(props.modelValue as string[])
-        : uniqueValues(internalValues.value)
+      props.modelValue === undefined
+        ? uniqueValues(internalValues.value)
+        : uniqueValues(props.modelValue as string[])
     )
 
-    watch(values, (newValues) => {
-      selectedValues.value = selectedValues.value.filter((item) => newValues.includes(item))
+    // CChipInput builds on the same engine as CChipSet: useChipSet owns selection
+    // coordination, roving focus, and chip prop forwarding (provided to the chips
+    // below). CChipInput owns the chip list and adds the text-input layer.
+    const config = computed<ChipSetConfig>(() => ({
+      disabled: props.disabled,
+      filter: props.filter,
+      removable: Boolean(props.removable && !props.disabled && !props.readOnly),
+      selectable: props.selectable,
+    }))
+
+    const { rootRef, clearSelection, getFocusableChips, handleKeydown } = useChipSet({
+      config,
+      selectionMode: () => props.selectionMode,
+      selected: () => undefined,
+      restoreFocusOnRemove: false,
+      onSelectionChange: (selected) => emit('select', selected),
+      onRemove: (value) => remove(value),
     })
 
     const emitValuesChange = (nextValues: string[]): void => {
@@ -172,7 +240,7 @@ const CChipInput = defineComponent({
     }
 
     const canAddMore = computed(
-      () => props.maxChips === null || values.value.length < props.maxChips,
+      () => props.maxChips === null || values.value.length < props.maxChips
     )
 
     const add = (rawValue: string): boolean => {
@@ -200,16 +268,10 @@ const CChipInput = defineComponent({
         return false
       }
 
-      const nextValues = values.value.filter((item) => item !== valueToRemove)
-      emitValuesChange(nextValues)
-      selectedValues.value = selectedValues.value.filter((item) => {
-        const wasSelected = item === valueToRemove
-        if (wasSelected && selectedValues.value.length !== nextValues.length) {
-          emit('select', selectedValues.value.filter((v) => v !== valueToRemove))
-        }
-        return item !== valueToRemove
-      })
+      // Selection is cleaned up by useChipSet; here we just drop the value.
+      emitValuesChange(values.value.filter((item) => item !== valueToRemove))
       emit('remove', valueToRemove)
+      inputRef.value?.focus()
       return true
     }
 
@@ -220,19 +282,8 @@ const CChipInput = defineComponent({
     }
 
     const focusLastChip = (): void => {
-      if (!rootRef.value) {
-        return
-      }
-
-      const focusableChips = [
-        ...rootRef.value.querySelectorAll<HTMLElement>(
-          '[data-coreui-chip-focusable="true"]:not(.disabled)',
-        ),
-      ]
-      if (focusableChips.length === 0) {
-        return
-      }
-      focusableChips[focusableChips.length - 1].focus()
+      const chips = getFocusableChips()
+      chips[chips.length - 1]?.focus()
     }
 
     const handleInputKeydown = (event: KeyboardEvent): void => {
@@ -252,9 +303,17 @@ const CChipInput = defineComponent({
           break
         }
 
-        case 'ArrowLeft': {
+        case 'ArrowLeft':
+        case 'ArrowRight': {
+          // The arrow pointing toward the chips (left in LTR, right in RTL) jumps
+          // to the last chip when the caret is at the start of the input.
+          const towardChipsKey = isRTL(rootRef.value) ? 'ArrowRight' : 'ArrowLeft'
           const target = event.currentTarget as HTMLInputElement
-          if (target.selectionStart === 0 && target.selectionEnd === 0) {
+          if (
+            event.key === towardChipsKey &&
+            target.selectionStart === 0 &&
+            target.selectionEnd === 0
+          ) {
             event.preventDefault()
             focusLastChip()
           }
@@ -280,13 +339,14 @@ const CChipInput = defineComponent({
         const parts = value.split(props.separator)
         const chipsToAdd = uniqueValues(parts.slice(0, -1))
 
-        const newChips = chipsToAdd.filter(chip => !values.value.includes(chip))
-        const availableSlots = props.maxChips !== null ? props.maxChips - values.value.length : Infinity
+        const newChips = chipsToAdd.filter((chip) => !values.value.includes(chip))
+        const availableSlots =
+          props.maxChips === null ? Infinity : props.maxChips - values.value.length
         const chipsToEmit = newChips.slice(0, availableSlots)
 
         if (chipsToEmit.length > 0) {
           const nextValues = [...values.value, ...chipsToEmit]
-          chipsToEmit.forEach(chip => emit('add', chip))
+          chipsToEmit.forEach((chip) => emit('add', chip))
           emitValuesChange(nextValues)
         }
 
@@ -313,13 +373,14 @@ const CChipInput = defineComponent({
       event.preventDefault()
       const chipsToAdd = uniqueValues(pastedData.split(props.separator))
 
-      const newChips = chipsToAdd.filter(chip => !values.value.includes(chip))
-      const availableSlots = props.maxChips !== null ? props.maxChips - values.value.length : Infinity
+      const newChips = chipsToAdd.filter((chip) => !values.value.includes(chip))
+      const availableSlots =
+        props.maxChips === null ? Infinity : props.maxChips - values.value.length
       const chipsToEmit = newChips.slice(0, availableSlots)
 
       if (chipsToEmit.length > 0) {
         const nextValues = [...values.value, ...chipsToEmit]
-        chipsToEmit.forEach(chip => emit('add', chip))
+        chipsToEmit.forEach((chip) => emit('add', chip))
         emitValuesChange(nextValues)
       }
 
@@ -344,6 +405,21 @@ const CChipInput = defineComponent({
         return
       }
 
+      // The arrow past the last chip moves focus into the text field (mirrored in RTL).
+      if (event.key === (isRTL(rootRef.value) ? 'ArrowLeft' : 'ArrowRight')) {
+        const chips = getFocusableChips()
+        const lastChip = chips[chips.length - 1]
+        if (lastChip?.contains(event.target as Node)) {
+          event.preventDefault()
+          inputRef.value?.focus()
+          return
+        }
+      }
+
+      if (handleKeydown(event)) {
+        return
+      }
+
       if (event.key.length === 1) {
         inputRef.value?.focus()
       }
@@ -355,13 +431,6 @@ const CChipInput = defineComponent({
       }
     }
 
-    const handleSelectedChange = (chipValue: string, selected: boolean): void => {
-      selectedValues.value = selected
-        ? uniqueValues([...selectedValues.value, chipValue])
-        : selectedValues.value.filter((value) => value !== chipValue)
-      emit('select', selectedValues.value)
-    }
-
     expose({ rootRef, inputRef })
 
     return () => {
@@ -375,26 +444,15 @@ const CChipInput = defineComponent({
               class: 'chip-input-label',
               for: props.id,
             },
-            props.label,
-          ),
-        ...values.value.map((chipValue) =>
-          h(
-            CChip,
-            {
-              ariaRemoveLabel: `Remove ${chipValue}`,
-              class: resolveChipClassName(props.chipClassName, chipValue),
-              disabled: props.disabled,
-              key: chipValue,
-              onRemove: () => remove(chipValue),
-              onSelectedChange: (selected: boolean) => handleSelectedChange(chipValue, selected),
-              removable: Boolean(props.removable && !props.disabled && !props.readOnly),
-              selectable: props.selectable,
-              selected: selectedValues.value.includes(chipValue),
-            },
-            {
-              default: () => chipValue,
-            },
+            props.label
           ),
+        ...chipsFromData(
+          values.value.map((chipValue) => ({
+            value: chipValue,
+            label: chipValue,
+            ariaRemoveLabel: `Remove ${chipValue}`,
+            class: resolveChipClassName(props.chipClassName, chipValue),
+          }))
         ),
         h('input', {
           ref: inputRef,
@@ -410,19 +468,13 @@ const CChipInput = defineComponent({
           onInput: (event: Event) => handleInputChange((event.target as HTMLInputElement).value),
           onKeydown: handleInputKeydown,
           onPaste: handlePaste,
-          onFocus: () => {
-            if (selectedValues.value.length > 0) {
-              selectedValues.value = []
-              emit('select', [])
-            }
-          },
+          onFocus: clearSelection,
+        }),
+        h('input', {
+          type: 'hidden',
+          name: props.name ?? generatedName,
+          value: values.value.join(','),
         }),
-        props.name &&
-          h('input', {
-            type: 'hidden',
-            name: props.name,
-            value: values.value.join(','),
-          }),
       ].filter(Boolean)
 
       return h(
@@ -442,7 +494,7 @@ const CChipInput = defineComponent({
           onClick: handleContainerClick,
           onKeydown: handleContainerKeydown,
         },
-        children,
+        children
       )
     }
   },

package/src/components/chip-input/__tests__/CChipInput.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
-import { CChipInput } from '../../../index'
+import { h } from 'vue'
+import { CChip, CChipInput } from '../../../index'
 
 describe('CChipInput', () => {
   it('has correct name', () => {
@@ -185,6 +186,18 @@ describe('CChipInput', () => {
     expect(hiddenInput.attributes('value')).toBe('tag1,tag2')
   })
 
+  it('always renders a hidden input even without a name', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        modelValue: ['tag1'],
+      },
+    })
+    const hiddenInput = wrapper.find('input[type="hidden"]')
+    expect(hiddenInput.exists()).toBe(true)
+    expect(hiddenInput.attributes('name')).toBeTruthy()
+    expect(hiddenInput.attributes('value')).toBe('tag1')
+  })
+
   it('applies size classes', () => {
     const wrapperSm = mount(CChipInput, {
       props: {
@@ -268,7 +281,26 @@ describe('CChipInput', () => {
     })
 
     const chips = wrapper.findAllComponents({ name: 'CChip' })
-    expect(chips[0].props('selectable')).toBe(true)
+    // CChipInput forwards `selectable` to chips through the shared set config, not as a prop, so
+    // the chips are selectable in effect—`aria-selected` is only rendered for a selectable chip.
+    expect(chips[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('single selection deselects siblings', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        selectable: true,
+        selectionMode: 'single',
+        modelValue: ['a', 'b'],
+      },
+    })
+
+    const chips = wrapper.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')
   })
 
   it('handles paste with separator', async () => {
@@ -307,10 +339,9 @@ describe('CChipInput', () => {
   })
 
   it('applies chipClassName as function', async () => {
-    const classNameFn = (value: string) => `chip-${value}`
     const wrapper = mount(CChipInput, {
       props: {
-        chipClassName: classNameFn,
+        chipClassName: (value: string) => `chip-${value}`,
         modelValue: ['primary', 'secondary'],
       },
     })
@@ -364,4 +395,49 @@ describe('CChipInput', () => {
     const removeBtn = wrapper.find('.chip-remove')
     expect(removeBtn.exists()).toBe(false)
   })
+
+  it('moves focus to the input on ArrowRight from the last chip', async () => {
+    const wrapper = mount(CChipInput, {
+      attachTo: document.body,
+      props: { defaultValue: ['React', 'Vue'] },
+    })
+    const chips = wrapper.findAll('.chip')
+    const lastChip = chips[chips.length - 1]
+    const input = wrapper.find('input.chip-input-field').element as HTMLInputElement
+    ;(lastChip.element as HTMLElement).focus()
+    await lastChip.trigger('keydown', { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(input)
+    wrapper.unmount()
+  })
+
+  it('moves focus to the input on ArrowLeft from the last chip in RTL', async () => {
+    document.documentElement.dir = 'rtl'
+    const wrapper = mount(CChipInput, {
+      attachTo: document.body,
+      props: { defaultValue: ['React', 'Vue'] },
+    })
+    const chips = wrapper.findAll('.chip')
+    const lastChip = chips[chips.length - 1]
+    const input = wrapper.find('input.chip-input-field').element as HTMLInputElement
+    ;(lastChip.element as HTMLElement).focus()
+    await lastChip.trigger('keydown', { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(input)
+    wrapper.unmount()
+    document.documentElement.dir = ''
+  })
+
+  it('seeds initial chips from CChip slot content', () => {
+    const wrapper = mount(CChipInput, {
+      slots: {
+        default: () => [
+          h(CChip, { value: 'React' }, { default: () => 'React' }),
+          h(CChip, { value: 'Vue' }, { default: () => 'Vue' }),
+        ],
+      },
+    })
+    const chips = wrapper.findAll('.chip')
+    expect(chips).toHaveLength(2)
+    expect(wrapper.text()).toContain('React')
+    expect(wrapper.text()).toContain('Vue')
+  })
 })

package/src/components/chip-input/__tests__/__snapshots__/CChipInput.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CChipInput renders correctly 1`] = `"<div class="chip-input"><input type="text" class="chip-input-field" placeholder="" size="1" value=""></div>"`;
+exports[`CChipInput renders correctly 1`] = `"<div class="chip-input"><input type="text" class="chip-input-field" placeholder="" size="1" value=""><input type="hidden" name="v-0" value=""></div>"`;

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

@@ -0,0 +1,140 @@
+import { computed, defineComponent, h, PropType } from 'vue'
+
+import { chipsFromData, type CChipSetItem } from './buildChips'
+import { useChipSet, type ChipSetConfig } from './useChipSet'
+
+export type { CChipSetItem }
+
+const itemValue = (item: string | CChipSetItem): string =>
+  typeof item === 'string' ? item : item.value
+
+const CChipSet = defineComponent({
+  name: 'CChipSet',
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
+    /**
+     * Renders chips from data instead of the default slot. Each item is a string or an object with a `value`, an optional `label`, and any `CChip` props. The slot is used when this is omitted.
+     */
+    chips: {
+      type: Array as PropType<(string | CChipSetItem)[]>,
+      default: undefined,
+    },
+    /**
+     * Disables every chip rendered by the component.
+     */
+    disabled: Boolean,
+    /**
+     * Turns the chips into filter chips, each showing a leading check icon while selected.
+     */
+    filter: Boolean,
+    /**
+     * Displays a remove button on every chip rendered by the component.
+     */
+    removable: Boolean,
+    /**
+     * Replaces the default remove icon on every chip with a custom icon node.
+     */
+    removeIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
+    /**
+     * Enables selection behavior for the chips rendered by the component.
+     */
+    selectable: Boolean,
+    /**
+     * The selected chip values passed using `v-model:selected`.
+     */
+    selected: {
+      type: Array as PropType<string[]>,
+      default: undefined,
+    },
+    /**
+     * Replaces the default selected icon shown by filter chips with a custom icon node.
+     */
+    selectedIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
+    /**
+     * Sets how many chips can be selected at once.
+     *
+     * @values 'single', 'multiple'
+     */
+    selectionMode: {
+      type: String as PropType<'single' | 'multiple'>,
+      default: 'multiple',
+    },
+  },
+  emits: [
+    /**
+     * Event occurs when a chip requests removal, with its value.
+     */
+    'remove',
+    /**
+     * Event occurs when the selected chip values change.
+     */
+    'select',
+    /**
+     * Emit the chips without the removed one (for `v-model:chips`).
+     */
+    'update:chips',
+    /**
+     * Emit the new selected values whenever the selection changes (for `v-model:selected`).
+     */
+    'update:selected',
+  ],
+  setup(props, { attrs, emit, slots, expose }) {
+    const config = computed<ChipSetConfig>(() => ({
+      disabled: props.disabled,
+      filter: props.filter,
+      removable: props.removable,
+      removeIcon: props.removeIcon,
+      selectable: props.selectable,
+      selectedIcon: props.selectedIcon,
+    }))
+
+    const { rootRef, handleKeydown } = useChipSet({
+      config,
+      selectionMode: () => props.selectionMode,
+      selected: () => props.selected,
+      onSelectionChange: (selected) => {
+        emit('update:selected', selected)
+        emit('select', selected)
+      },
+      onRemove: (value) => {
+        // With `v-model:chips` the parent stays in sync automatically; a one-way
+        // `:chips` binding ignores the update and handles removal via `@remove`.
+        if (props.chips) {
+          emit(
+            'update:chips',
+            props.chips.filter((item) => itemValue(item) !== value)
+          )
+        }
+        emit('remove', value)
+      },
+    })
+
+    expose({ rootRef })
+
+    return () =>
+      h(
+        props.as,
+        {
+          ref: rootRef,
+          class: ['chip-set', { disabled: props.disabled }, attrs.class],
+          ...(props.disabled && { 'aria-disabled': true }),
+          onKeydown: handleKeydown,
+        },
+        props.chips ? chipsFromData(props.chips) : slots.default && slots.default()
+      )
+  },
+})
+
+export { CChipSet }