@coreui/vue-pro 5.17.1 → 5.19.0

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

@@ -0,0 +1,443 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { CChip, CChipInput } from '../../../index'
+
+describe('CChipInput', () => {
+  it('has correct name', () => {
+    expect(CChipInput.name).toBe('CChipInput')
+  })
+
+  it('renders correctly', () => {
+    const wrapper = mount(CChipInput)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('chip-input')
+  })
+
+  it('renders with initial defaultValue', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        defaultValue: ['test1', 'test2'],
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const chips = wrapper.findAll('.chip')
+    expect(chips.length).toBe(2)
+    expect(chips[0].text()).toBe('test1')
+    expect(chips[1].text()).toBe('test2')
+  })
+
+  it('renders with controlled modelValue', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        modelValue: ['chip1', 'chip2', 'chip3'],
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const chips = wrapper.findAll('.chip')
+    expect(chips.length).toBe(3)
+  })
+
+  it('creates chip on Enter key', async () => {
+    const wrapper = mount(CChipInput)
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('newchip')
+    await input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('add')?.[0]).toEqual(['newchip'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['newchip']])
+    expect(wrapper.emitted('change')?.[0]).toEqual([['newchip']])
+    expect((input.element as HTMLInputElement).value).toBe('')
+  })
+
+  it('creates chips on separator', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        separator: ',',
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('one,two,three')
+
+    expect(wrapper.emitted('add')?.length).toBe(2)
+    expect(wrapper.emitted('add')?.[0]).toEqual(['one'])
+    expect(wrapper.emitted('add')?.[1]).toEqual(['two'])
+    expect((input.element as HTMLInputElement).value).toBe('three')
+  })
+
+  it('respects maxChips limit', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        maxChips: 2,
+        modelValue: ['one', 'two'],
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('three')
+    await input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('add')).toBeFalsy()
+    expect((input.element as HTMLInputElement).value).toBe('three')
+  })
+
+  it('removes chip on remove button click', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        modelValue: ['test'],
+        removable: true,
+      },
+    })
+
+    const removeBtn = wrapper.find('.chip-remove')
+    await removeBtn.trigger('click')
+
+    expect(wrapper.emitted('remove')?.[0]).toEqual(['test'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+  })
+
+  it('does not allow duplicate values', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        modelValue: ['existing'],
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('existing')
+    await input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('add')).toBeFalsy()
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('trims and filters empty values', async () => {
+    const wrapper = mount(CChipInput)
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('  ')
+    await input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('add')).toBeFalsy()
+  })
+
+  it('creates chip on blur when createOnBlur is true', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        createOnBlur: true,
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('onblur')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('add')?.[0]).toEqual(['onblur'])
+  })
+
+  it('does not create chip on blur when createOnBlur is false', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        createOnBlur: false,
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('noblur')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('add')).toBeFalsy()
+  })
+
+  it('renders with label', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        label: 'Tags',
+        id: 'tags-input',
+      },
+    })
+    const label = wrapper.find('label')
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toBe('Tags')
+    expect(label.attributes('for')).toBe('tags-input')
+  })
+
+  it('renders with placeholder', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        placeholder: 'Enter tags',
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+    expect(input.attributes('placeholder')).toBe('Enter tags')
+  })
+
+  it('renders hidden input for form submission', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        name: 'tags',
+        modelValue: ['tag1', 'tag2'],
+      },
+    })
+    const hiddenInput = wrapper.find('input[type="hidden"]')
+    expect(hiddenInput.exists()).toBe(true)
+    expect(hiddenInput.attributes('name')).toBe('tags')
+    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: {
+        size: 'sm',
+      },
+    })
+    expect(wrapperSm.classes()).toContain('chip-input-sm')
+
+    const wrapperLg = mount(CChipInput, {
+      props: {
+        size: 'lg',
+      },
+    })
+    expect(wrapperLg.classes()).toContain('chip-input-lg')
+  })
+
+  it('handles disabled state', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        disabled: true,
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+    expect(wrapper.classes()).toContain('disabled')
+    expect(input.attributes('disabled')).toBeDefined()
+    expect(wrapper.attributes('aria-disabled')).toBe('true')
+  })
+
+  it('handles readonly state', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        readOnly: true,
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+    expect(input.attributes('readonly')).toBeDefined()
+    expect(wrapper.attributes('aria-readonly')).toBe('true')
+  })
+
+  it('does not add chips when disabled', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        disabled: true,
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('test')
+    await input.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('add')).toBeFalsy()
+  })
+
+  it('does not remove chips when disabled', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        disabled: true,
+        modelValue: ['test'],
+      },
+    })
+
+    const removeBtn = wrapper.find('.chip-remove')
+    expect(removeBtn.exists()).toBe(false)
+  })
+
+  it('emits input event on text input change', async () => {
+    const wrapper = mount(CChipInput)
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('typing')
+
+    expect(wrapper.emitted('input')?.[0]).toEqual(['typing'])
+  })
+
+  it('handles selectable chips', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        selectable: true,
+        modelValue: ['chip1', 'chip2'],
+      },
+    })
+
+    const chips = wrapper.findAllComponents({ name: 'CChip' })
+    // 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 () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        separator: ',',
+      },
+    })
+    const input = wrapper.find('input[type="text"]')
+
+    // Create a mock clipboard data
+    const clipboardData = {
+      getData: jest.fn().mockReturnValue('one,two,three'),
+    }
+
+    await input.trigger('paste', {
+      clipboardData,
+    })
+
+    expect(wrapper.emitted('add')?.length).toBe(3)
+    expect(wrapper.emitted('add')?.[0]).toEqual(['one'])
+    expect(wrapper.emitted('add')?.[1]).toEqual(['two'])
+    expect(wrapper.emitted('add')?.[2]).toEqual(['three'])
+  })
+
+  it('applies chipClassName as string', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        chipClassName: 'custom-chip',
+        modelValue: ['test'],
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const chip = wrapper.find('.chip')
+    expect(chip.classes()).toContain('custom-chip')
+  })
+
+  it('applies chipClassName as function', async () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        chipClassName: (value: string) => `chip-${value}`,
+        modelValue: ['primary', 'secondary'],
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const chips = wrapper.findAll('.chip')
+    expect(chips[0].classes()).toContain('chip-primary')
+    expect(chips[1].classes()).toContain('chip-secondary')
+  })
+
+  it('focuses input on container click', async () => {
+    const wrapper = mount(CChipInput, {
+      attachTo: document.body,
+    })
+
+    await wrapper.trigger('click')
+    const input = wrapper.find('input[type="text"]').element as HTMLInputElement
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('clears input on Escape key', async () => {
+    const wrapper = mount(CChipInput)
+    const input = wrapper.find('input[type="text"]')
+
+    await input.setValue('test')
+    await input.trigger('keydown', { key: 'Escape' })
+
+    expect((input.element as HTMLInputElement).value).toBe('')
+  })
+
+  it('focuses input when typing in container', async () => {
+    const wrapper = mount(CChipInput, {
+      attachTo: document.body,
+    })
+
+    await wrapper.trigger('keydown', { key: 'a' })
+    const input = wrapper.find('input[type="text"]').element as HTMLInputElement
+    expect(document.activeElement).toBe(input)
+
+    wrapper.unmount()
+  })
+
+  it('does not show remove buttons when removable is false', () => {
+    const wrapper = mount(CChipInput, {
+      props: {
+        removable: false,
+        modelValue: ['test'],
+      },
+    })
+    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

@@ -0,0 +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=""><input type="hidden" name="v-0" value=""></div>"`;

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

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CChipInput } from './CChipInput'
+
+const CChipInputPlugin = {
+  install: (app: App): void => {
+    app.component(CChipInput.name as string, CChipInput)
+  },
+}
+
+export { CChipInputPlugin, CChipInput }

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 }