@coreui/vue-pro 5.11.0 → 5.13.0

package/src/components/autocomplete/CAutocompleteOptions.ts

@@ -0,0 +1,144 @@
+import { defineComponent, h, PropType } from 'vue'
+
+import { CElementCover } from '../element-cover'
+import { CVirtualScroller } from '../virtual-scroller'
+
+import { getNextSibling, getPreviousSibling } from '../../utils'
+
+import type { Option, OptionsGroup } from './types'
+import { getOptionLabel, highlightSubstring, isOptionDisabled, isOptionSelected } from './utils'
+
+const CAutocompleteOptions = defineComponent({
+  name: 'CAutocompleteOptions',
+  props: {
+    highlightOptionsOnSearch: Boolean,
+    loading: Boolean,
+    options: {
+      type: Array as PropType<(Option | OptionsGroup)[]>,
+      required: true,
+    },
+    optionsMaxHeight: [Number, String] as PropType<number | string>,
+    scopedSlots: Object,
+    searchNoResultsLabel: [Boolean, String] as PropType<boolean | string>,
+    searchValue: String,
+    selected: [Object, String, null] as PropType<Option | null>,
+    virtualScroller: Boolean,
+    visible: Boolean,
+    visibleItems: {
+      type: Number,
+      default: 10,
+    },
+  },
+  emits: ['optionClick'],
+  setup(props, { emit }) {
+    const handleKeyDown = (event: KeyboardEvent, option: Option) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        emit('optionClick', option)
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const next = getNextSibling(
+          target,
+          '.autocomplete-option:not(.disabled):not(:disabled)'
+        ) as HTMLElement | null
+
+        if (next) {
+          next.focus()
+        }
+      }
+
+      if (event.key === 'Up' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const prev = getPreviousSibling(
+          target,
+          '.autocomplete-option:not(.disabled):not(:disabled)'
+        ) as HTMLElement | null
+
+        if (prev) {
+          prev.focus()
+        }
+      }
+    }
+
+    const createOption = (option: Option, index: number) =>
+      h(
+        'div',
+        {
+          class: [
+            'autocomplete-option',
+            {
+              disabled: isOptionDisabled(option),
+              selected: isOptionSelected(option, props.selected || null),
+            },
+          ],
+          key: index,
+          onClick: () => emit('optionClick', option),
+          onKeydown: (event: KeyboardEvent) => handleKeyDown(event, option),
+          tabindex: 0,
+          ...(props.highlightOptionsOnSearch &&
+            !props.scopedSlots?.['options'] && {
+              innerHTML: highlightSubstring(getOptionLabel(option), props.searchValue),
+            }),
+        },
+        !props.highlightOptionsOnSearch
+          ? props.scopedSlots && props.scopedSlots['options']
+            ? h(props.scopedSlots['options'], { option: option })
+            : getOptionLabel(option)
+          : undefined
+      )
+
+    const createOptions = (options: (Option | OptionsGroup)[]) => {
+      if (options.length === 0 && props.searchNoResultsLabel) {
+        return h('div', { class: 'autocomplete-options-empty' }, props.searchNoResultsLabel)
+      }
+
+      return options.map((option: Option | OptionsGroup, index: number) => {
+        if (typeof option !== 'string' && 'options' in option) {
+          return h('div', { key: index }, [
+            h('div', { class: 'autocomplete-optgroup-label' }, [
+              props.scopedSlots && props.scopedSlots['options-groups']
+                ? h(props.scopedSlots['options-groups'], { option: option })
+                : option.label,
+            ]),
+            ...(option.options?.map((opt: Option, idx: number) => createOption(opt, idx)) || []),
+          ])
+        }
+
+        return createOption(option as Option, index)
+      })
+    }
+
+    return () => [
+      props.visible && props.virtualScroller && props.options.length > 0
+        ? h(
+            CVirtualScroller,
+            {
+              class: 'autocomplete-options',
+              visibleItems: props.visibleItems,
+              role: 'listbox',
+            },
+            {
+              default: () => createOptions(props.options),
+            }
+          )
+        : h(
+            'div',
+            {
+              class: 'autocomplete-options',
+              ...(props.optionsMaxHeight !== 'auto' && {
+                style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
+              }),
+              role: 'listbox',
+            },
+            createOptions(props.options)
+          ),
+      props.loading && h(CElementCover),
+    ]
+  },
+})
+
+export { CAutocompleteOptions }

package/src/components/autocomplete/__tests__/CAutocomplete.spec.ts

@@ -0,0 +1,429 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { CAutocomplete } from '../CAutocomplete'
+
+const mockOptions = [
+  { label: 'Apple', value: 1 },
+  { label: 'Banana', value: 2 },
+  { label: 'Cherry', value: 3 },
+  { label: 'Date', value: 4 },
+]
+
+const mockOptionsWithGroups = [
+  {
+    label: 'Fruits',
+    options: [
+      { label: 'Apple', value: 1 },
+      { label: 'Banana', value: 2 },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { label: 'Carrot', value: 3 },
+      { label: 'Spinach', value: 4 },
+    ],
+  },
+]
+
+describe('CAutocomplete', () => {
+  test('loads and displays CAutocomplete component', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('CAutocomplete customize', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        className: 'bazinga',
+        disabled: true,
+        size: 'lg',
+        placeholder: 'Select option',
+        options: mockOptions,
+        cleaner: true,
+        indicator: true,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.autocomplete').classes()).toContain('bazinga')
+    expect(wrapper.find('.autocomplete').classes()).toContain('autocomplete-lg')
+    expect(wrapper.find('.autocomplete').classes()).toContain('disabled')
+  })
+
+  test('CAutocomplete renders input with placeholder', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        placeholder: 'Type to search...',
+      },
+    })
+    const input = wrapper.find('input[role="combobox"]')
+    expect(input.attributes('placeholder')).toBe('Type to search...')
+  })
+
+  test('CAutocomplete opens dropdown on input click', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+    const input = wrapper.find('input[role="combobox"]')
+
+    await input.trigger('click')
+    await flushPromises()
+
+    const listbox = wrapper.find('[role="listbox"]')
+    expect(listbox.exists()).toBe(true)
+    expect(wrapper.find('.autocomplete').classes()).toContain('show')
+  })
+
+  test('CAutocomplete filters options on input change', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+    const input = wrapper.find('input[role="combobox"]')
+
+    await input.setValue('app')
+    await input.trigger('input')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).not.toContain('Banana')
+  })
+
+  test('CAutocomplete selects option on click', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.trigger('click')
+    await flushPromises()
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual([mockOptions[0]])
+  })
+
+  test('CAutocomplete selects option on Enter key', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('Apple')
+    await input.trigger('input')
+    await input.trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual([mockOptions[0]])
+  })
+
+  test('CAutocomplete closes dropdown on Escape key', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+    const input = wrapper.find('input[role="combobox"]')
+
+    await input.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('.autocomplete').classes()).toContain('show')
+
+    await input.trigger('keydown', { key: 'Escape' })
+    await flushPromises()
+
+    expect(input.attributes('aria-expanded')).toBe('false')
+    expect(wrapper.find('.autocomplete').classes()).not.toContain('show')
+  })
+
+  test('CAutocomplete navigates options with arrow keys', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+      attachTo: document.body,
+    })
+    const input = wrapper.find('input[role="combobox"]')
+
+    await input.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+
+    await input.trigger('keydown', { key: 'ArrowDown' })
+    await nextTick()
+
+    const firstOption = wrapper.find('.autocomplete-option')
+    expect(firstOption.exists()).toBe(true)
+  })
+
+  test('CAutocomplete shows cleaner button when option selected', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        cleaner: true,
+        value: 1,
+      },
+    })
+
+    await flushPromises()
+
+    const cleanerButton = wrapper.find('.autocomplete-cleaner')
+    expect(cleanerButton.exists()).toBe(true)
+  })
+
+  test('CAutocomplete clears selection when cleaner clicked', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        cleaner: true,
+        value: 1,
+      },
+    })
+
+    await flushPromises()
+
+    const cleanerButton = wrapper.find('.autocomplete-cleaner')
+    await cleanerButton.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual([null])
+  })
+
+  test('CAutocomplete shows no results message', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        searchNoResultsLabel: 'No options found',
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('xyz')
+    await input.trigger('input')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('No options found')
+  })
+
+  test('CAutocomplete renders option groups', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptionsWithGroups,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Fruits')
+    expect(wrapper.text()).toContain('Vegetables')
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).toContain('Carrot')
+  })
+
+  test('CAutocomplete shows hint when enabled', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        showHints: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('ap')
+    await input.trigger('input')
+    await flushPromises()
+
+    const hintInput = wrapper.find('.autocomplete-input-hint')
+    expect(hintInput.exists()).toBe(true)
+  })
+
+  test('CAutocomplete allows custom values when allowOnlyDefinedOptions is false', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        allowOnlyDefinedOptions: false,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('Custom Value')
+    await input.trigger('input')
+    await input.trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual(['Custom Value'])
+  })
+
+  test('CAutocomplete prevents custom values when allowOnlyDefinedOptions is true', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        allowOnlyDefinedOptions: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('Custom Value')
+    await input.trigger('input')
+    await input.trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('change')).toBeFalsy()
+  })
+
+  test('CAutocomplete highlights search matches', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        highlightOptionsOnSearch: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('app')
+    await input.trigger('input')
+    await flushPromises()
+
+    const option = wrapper.find('.autocomplete-option')
+    expect(option.exists()).toBe(true)
+  })
+
+  test('CAutocomplete is disabled when disabled prop is true', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        disabled: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    expect(input.attributes('disabled')).toBeDefined()
+  })
+
+  test('CAutocomplete is readonly when readOnly prop is true', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        readOnly: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    expect(input.attributes('readonly')).toBeDefined()
+  })
+
+  test('CAutocomplete emits input event on search', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('test')
+    await input.trigger('input')
+    await flushPromises()
+
+    expect(wrapper.emitted('input')).toBeTruthy()
+    expect(wrapper.emitted('input')![0]).toEqual(['test'])
+  })
+
+  test('CAutocomplete emits show and hide events', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    
+    // Test show event
+    await input.trigger('click')
+    await flushPromises()
+    expect(wrapper.emitted('show')).toBeTruthy()
+
+    // Test hide event
+    await input.trigger('keydown', { key: 'Escape' })
+    await flushPromises()
+    expect(wrapper.emitted('hide')).toBeTruthy()
+  })
+
+  test('CAutocomplete handles string options correctly', async () => {
+    const stringOptions = ['Apple', 'Banana', 'Cherry']
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: stringOptions,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).toContain('Banana')
+    expect(wrapper.text()).toContain('Cherry')
+  })
+
+  test('CAutocomplete handles virtual scroller', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        virtualScroller: true,
+        visibleItems: 2,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+  })
+
+  test('CAutocomplete clears search on select when clearSearchOnSelect is true', async () => {
+    const wrapper = mount(CAutocomplete, {
+      props: {
+        options: mockOptions,
+        clearSearchOnSelect: true,
+      },
+    })
+
+    const input = wrapper.find('input[role="combobox"]')
+    await input.setValue('app')
+    await input.trigger('input')
+    await input.trigger('click')
+    await flushPromises()
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('input')).toBeTruthy()
+    // Should emit empty string when clearing search
+    const inputEvents = wrapper.emitted('input') as string[][]
+    expect(inputEvents[inputEvents.length - 1]).toEqual([''])
+  })
+})