@coreui/vue-pro 5.12.0 → 5.13.0

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

@@ -0,0 +1,368 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { h } from 'vue'
+import { CAutocompleteOptions } from '../CAutocompleteOptions'
+
+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('CAutocompleteOptions', () => {
+  test('loads and displays CAutocompleteOptions component', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('CAutocompleteOptions renders all options', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).toContain('Banana')
+    expect(wrapper.text()).toContain('Cherry')
+    expect(wrapper.text()).toContain('Date')
+  })
+
+  test('CAutocompleteOptions renders option groups', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptionsWithGroups,
+        selected: null,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Fruits')
+    expect(wrapper.text()).toContain('Vegetables')
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).toContain('Carrot')
+  })
+
+  test('CAutocompleteOptions marks selected option', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: mockOptions[0],
+      },
+    })
+
+    const selectedOption = wrapper.find('.autocomplete-option.selected')
+    expect(selectedOption.exists()).toBe(true)
+    expect(selectedOption.text()).toContain('Apple')
+  })
+
+  test('CAutocompleteOptions calls onOptionClick when option clicked', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('optionClick')).toBeTruthy()
+    expect(wrapper.emitted('optionClick')![0]).toEqual([mockOptions[0]])
+  })
+
+  test('CAutocompleteOptions handles Enter key press', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+
+    expect(wrapper.emitted('optionClick')).toBeTruthy()
+    expect(wrapper.emitted('optionClick')![0]).toEqual([mockOptions[0]])
+  })
+
+  test('CAutocompleteOptions handles Space key press', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('keydown', { code: 'Space' })
+    await flushPromises()
+
+    expect(wrapper.emitted('optionClick')).toBeTruthy()
+    expect(wrapper.emitted('optionClick')![0]).toEqual([mockOptions[0]])
+  })
+
+  test('CAutocompleteOptions navigates with arrow keys', async () => {
+    // Mock the DOM navigation functions
+    const mockGetNextSibling = vi.fn().mockReturnValue({
+      focus: vi.fn(),
+    })
+
+    // Mock the utils import
+    vi.mock('../../utils', () => ({
+      getNextSibling: mockGetNextSibling,
+      getPreviousSibling: vi.fn(),
+    }))
+
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+      attachTo: document.body,
+    })
+
+    const firstOption = wrapper.find('.autocomplete-option')
+    await firstOption.trigger('keydown', { key: 'ArrowDown' })
+
+    expect(mockGetNextSibling).toHaveBeenCalled()
+  })
+
+  test('CAutocompleteOptions shows no results message', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: [],
+        selected: null,
+        searchNoResultsLabel: 'No options found',
+      },
+    })
+
+    expect(wrapper.text()).toContain('No options found')
+    expect(wrapper.find('.autocomplete-options-empty').exists()).toBe(true)
+  })
+
+  test('CAutocompleteOptions highlights search matches', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+        highlightOptionsOnSearch: true,
+        searchValue: 'app',
+      },
+    })
+
+    const option = wrapper.find('.autocomplete-option')
+    expect(option.exists()).toBe(true)
+    // Check if the option contains highlighted content
+    expect(option.html()).toContain('Apple')
+  })
+
+  test('CAutocompleteOptions uses custom option template', async () => {
+    const customTemplate = (option: any) => 
+      h('div', { class: 'custom-option' }, `${option.label} - ${option.value}`)
+
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+        optionsTemplate: customTemplate,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Apple - 1')
+    expect(wrapper.text()).toContain('Banana - 2')
+  })
+
+  test('CAutocompleteOptions uses custom group template', async () => {
+    const customGroupTemplate = (group: any) =>
+      h('div', { class: 'custom-group' }, group.label.toUpperCase())
+
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptionsWithGroups,
+        selected: null,
+        optionsGroupsTemplate: customGroupTemplate,
+      },
+    })
+
+    expect(wrapper.text()).toContain('FRUITS')
+    expect(wrapper.text()).toContain('VEGETABLES')
+  })
+
+  test('CAutocompleteOptions shows loading state', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+        loading: true,
+      },
+      global: {
+        stubs: {
+          CElementCover: true,
+        },
+      },
+    })
+
+    expect(wrapper.findComponent({ name: 'CElementCover' }).exists()).toBe(true)
+  })
+
+  test('CAutocompleteOptions renders with virtual scroller', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+        virtualScroller: true,
+        visibleItems: 2,
+      },
+      global: {
+        stubs: {
+          CVirtualScroller: true,
+        },
+      },
+    })
+
+    expect(wrapper.findComponent({ name: 'CVirtualScroller' }).exists()).toBe(true)
+  })
+
+  test('CAutocompleteOptions sets max height', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+        optionsMaxHeight: 200,
+      },
+    })
+
+    const optionsContainer = wrapper.find('.autocomplete-options')
+    expect(optionsContainer.attributes('style')).toContain('max-height: 200px')
+  })
+
+  test('CAutocompleteOptions marks disabled options', async () => {
+    const optionsWithDisabled = [
+      { label: 'Apple', value: 1 },
+      { label: 'Banana', value: 2, disabled: true },
+    ]
+
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: optionsWithDisabled,
+        selected: null,
+      },
+    })
+
+    const disabledOption = wrapper.find('.autocomplete-option.disabled')
+    expect(disabledOption.exists()).toBe(true)
+    expect(disabledOption.text()).toContain('Banana')
+  })
+
+  test('CAutocompleteOptions has correct accessibility attributes', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mockOptions,
+        selected: null,
+      },
+    })
+
+    const listbox = wrapper.find('[role="listbox"]')
+    expect(listbox.exists()).toBe(true)
+
+    const options = wrapper.findAll('.autocomplete-option')
+    expect(options).toHaveLength(4)
+
+    options.forEach((option) => {
+      expect(option.attributes('tabindex')).toBe('0')
+    })
+  })
+
+  test('CAutocompleteOptions handles string options', async () => {
+    const stringOptions = ['Apple', 'Banana', 'Cherry']
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: stringOptions,
+        selected: null,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Apple')
+    expect(wrapper.text()).toContain('Banana')
+    expect(wrapper.text()).toContain('Cherry')
+  })
+
+  test('CAutocompleteOptions handles mixed option types', async () => {
+    const mixedOptions = [
+      'Simple String',
+      { label: 'Object Option', value: 1 },
+      {
+        label: 'Group',
+        options: [
+          { label: 'Grouped Option', value: 2 },
+        ],
+      },
+    ]
+
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: mixedOptions,
+        selected: null,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Simple String')
+    expect(wrapper.text()).toContain('Object Option')
+    expect(wrapper.text()).toContain('Group')
+    expect(wrapper.text()).toContain('Grouped Option')
+  })
+
+  test('CAutocompleteOptions emits optionClick for all option types', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: ['String Option'],
+        selected: null,
+      },
+    })
+
+    const option = wrapper.find('.autocomplete-option')
+    await option.trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('optionClick')).toBeTruthy()
+    expect(wrapper.emitted('optionClick')![0]).toEqual(['String Option'])
+  })
+
+  test('CAutocompleteOptions handles empty searchNoResultsLabel correctly', async () => {
+    const wrapper = mount(CAutocompleteOptions, {
+      props: {
+        options: [],
+        selected: null,
+        searchNoResultsLabel: false,
+      },
+    })
+
+    expect(wrapper.find('.autocomplete-options-empty').exists()).toBe(true)
+    expect(wrapper.find('.autocomplete-options-empty').text()).toBe('false')
+  })
+})

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CAutocomplete CAutocomplete customize 1`] = `
+"<div class="autocomplete autocomplete-lg disabled">
+  <div class="autocomplete-input-group">
+    <!----><input type="text" class="autocomplete-input" disabled="" id="v-0" name="v-0" placeholder="Select option" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" role="combobox">
+    <div class="autocomplete-buttons">
+      <!----><button type="button" class="autocomplete-indicator"></button>
+    </div>
+  </div>
+  <div class="autocomplete-dropdown" role="listbox" aria-labelledby="v-0">
+    <div class="autocomplete-options" role="listbox">
+      <div class="autocomplete-option" tabindex="0">Apple</div>
+      <div class="autocomplete-option" tabindex="0">Banana</div>
+      <div class="autocomplete-option" tabindex="0">Cherry</div>
+      <div class="autocomplete-option" tabindex="0">Date</div>
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`CAutocomplete loads and displays CAutocomplete component 1`] = `
+"<div class="autocomplete">
+  <div class="autocomplete-input-group">
+    <!----><input type="text" class="autocomplete-input" id="v-0" name="v-0" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" role="combobox">
+    <!---->
+  </div>
+  <div class="autocomplete-dropdown" role="listbox" aria-labelledby="v-0">
+    <div class="autocomplete-options" role="listbox">
+      <div class="autocomplete-option" tabindex="0">Apple</div>
+      <div class="autocomplete-option" tabindex="0">Banana</div>
+      <div class="autocomplete-option" tabindex="0">Cherry</div>
+      <div class="autocomplete-option" tabindex="0">Date</div>
+    </div>
+    <!---->
+  </div>
+</div>"
+`;

package/src/components/autocomplete/index.ts

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

package/src/components/autocomplete/types.ts

@@ -0,0 +1,25 @@
+export type Option =
+  | string
+  | {
+      disabled?: boolean
+      label: string
+      options?: Option[]
+      custom?: boolean
+      selected?: boolean
+      value?: number | string
+      [key: string]: unknown
+    }
+
+export type OptionsGroup = {
+  label: string
+  options?: Option[]
+  [key: string]: unknown
+}
+
+export type Search =
+  | 'external'
+  | 'global'
+  | {
+      external?: boolean
+      global?: boolean
+    }

package/src/components/autocomplete/utils.ts

@@ -0,0 +1,131 @@
+import type { Option, OptionsGroup, Search } from './types'
+
+export const filterOptions = (
+  options: (Option | OptionsGroup)[],
+  search: string
+): (Option | OptionsGroup)[] => {
+  const result: (Option | OptionsGroup)[] = []
+
+  options.forEach((item: Option | OptionsGroup) => {
+    if (typeof item !== 'string' && 'options' in item && Array.isArray(item.options)) {
+      const filteredOptions = filterOptions(item.options, search)
+      if (filteredOptions.length > 0) {
+        result.push({ ...item, options: filteredOptions })
+      }
+    } else if (getOptionLabel(item).toLowerCase().includes(search.toLowerCase())) {
+      result.push(item)
+    }
+  })
+
+  return result
+}
+
+export const flattenOptionsArray = (
+  options: (Option | OptionsGroup)[],
+  keepGroupLabel?: boolean
+): (Option | OptionsGroup)[] => {
+  const optionsList: (Option | OptionsGroup)[] = []
+
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      if (keepGroupLabel) {
+        // Add group header (without options property to indicate it's a header)
+        const { options: _, ...groupHeader } = option
+        optionsList.push(groupHeader)
+      }
+      optionsList.push(...option.options)
+    } else {
+      optionsList.push(option)
+    }
+  }
+
+  return optionsList
+}
+
+export const isExternalSearch = (search: Search | undefined): boolean => {
+  return (
+    (typeof search === 'string' && search === 'external') ||
+    (typeof search === 'object' && search.external === true)
+  )
+}
+
+export const isGlobalSearch = (search: Search | undefined): boolean => {
+  return (
+    (typeof search === 'string' && search === 'global') ||
+    (typeof search === 'object' && search.global === true)
+  )
+}
+
+export const getOptionLabel = (option: Option) =>
+  typeof option === 'string' ? option : option.label
+
+export const highlightSubstring = (string: string, query?: string) => {
+  if (query) {
+    const regex = new RegExp(query, 'gi')
+    return string.replace(regex, (string) => `<strong>${string}</strong>`)
+  }
+
+  return string
+}
+
+export const isOptionDisabled = (option: Option | OptionsGroup | string) =>
+  typeof option === 'string' ? false : option.disabled
+
+export const isOptionSelected = (
+  option: Option | OptionsGroup | string,
+  selected: Option | null
+) => {
+  if (!selected) {
+    return false
+  }
+
+  if (typeof option === 'string' && typeof selected === 'string') {
+    return selected === option
+  }
+
+  if (typeof option !== 'string' && typeof selected !== 'string') {
+    return selected.label === option.label
+  }
+
+  return false
+}
+
+export const getFirstOptionByLabel = (
+  value: string,
+  options: (Option | OptionsGroup)[]
+): Option | null => {
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      const found = getFirstOptionByLabel(value, option.options)
+      if (found) {
+        return found
+      }
+    }
+
+    if (getOptionLabel(option).toLowerCase() === value.toLowerCase()) {
+      return option
+    }
+  }
+
+  return null
+}
+
+export const getFirstOptionByValue = (
+  value: number,
+  options: (Option | OptionsGroup)[]
+): Option | null => {
+  for (const option of options) {
+    if (typeof option !== 'string' && 'options' in option && Array.isArray(option.options)) {
+      const found = getFirstOptionByValue(value, option.options)
+      if (found) {
+        return found
+      }
+    }
+
+    if (typeof option !== 'string' && 'value' in option && option.value === value) {
+      return option
+    }
+  }
+
+  return null
+}

package/src/components/button/CButton.ts

@@ -93,8 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
-            props.variant && props.color ? `btn-${props.variant}-${props.color}` : `btn-${props.variant}`,
             {
+              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
+              [`btn-${props.variant}`]: !props.color && props.variant,
               [`btn-${props.color}`]: props.color && !props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,

package/src/components/calendar/CCalendar.ts

@@ -675,13 +675,8 @@ const CCalendar = defineComponent({
           ),
         h('tbody', {}, [
           view.value === 'days' &&
-            monthDetails.map((week) => {
-              const date = convertToDateObject(
-                week.weekNumber === 0
-                  ? `${_calendarDate.getFullYear()}W53`
-                  : `${_calendarDate.getFullYear()}W${week.weekNumber}`,
-                props.selectionType
-              )
+            monthDetails.map(({ week, days }) => {
+              const { date } = days[0]
               const isDisabled = isDateDisabled(
                 date,
                 minDate.value,
@@ -689,7 +684,7 @@ const CCalendar = defineComponent({
                 props.disabledDates
               )
               const isSelected = isDateSelected(date, startDate.value, endDate.value)
-              const current = week.days.some((day) => day.month === 'current')
+              const current = days.some((day) => day.month === 'current')
               return h(
                 'tr',
                 {
@@ -724,9 +719,9 @@ const CCalendar = defineComponent({
                     h(
                       'th',
                       { class: 'calendar-cell-week-number' },
-                      week.weekNumber === 0 ? 53 : week.weekNumber
+                      week.number
                     ),
-                  week.days.map(({ date, month }: { date: Date; month: string }) => {
+                  days.map(({ date, month }: { date: Date; month: string }) => {
                     const isDisabled = isDateDisabled(
                       date,
                       minDate.value,

package/src/components/calendar/utils.ts

@@ -87,7 +87,8 @@ export const getDateBySelectionType = (
   }
 
   if (selectionType === 'week') {
-    return `${date.getFullYear()}W${getWeekNumber(date)}`
+    const { year, weekNumber } = getISOWeekNumberAndYear(date)
+    return `${year}W${weekNumber.toString().padStart(2, '0')}`
   }
 
   if (selectionType === 'month') {
@@ -254,12 +255,20 @@ const getTrailingDays = (
 }
 
 /**
- * Calculates the ISO week number for a given date.
- * @param date - The date to calculate the week number for.
- * @returns The ISO week number.
+ * Calculates the ISO 8601 week number and year for a given date.
+ *
+ * In the ISO 8601 standard:
+ * - Weeks start on Monday.
+ * - The first week of the year is the one that contains January 4th.
+ * - The year of the week may differ from the calendar year (e.g., Dec 29, 2025 is in ISO year 2026).
+ *
+ * @param {Date} date - The date for which to calculate the ISO week number and year.
+ * @returns {{ weekNumber: number, year: number }} An object containing:
+ *   - `weekNumber`: the ISO week number (1–53),
+ *   - `year`: the ISO year (may differ from the calendar year of the date).
  */
-export const getWeekNumber = (date: Date): number => {
-  const tempDate = new Date(date.getTime())
+export const getISOWeekNumberAndYear = (date: Date): { weekNumber: number; year: number } => {
+  const tempDate = new Date(date)
   tempDate.setHours(0, 0, 0, 0)
 
   // Thursday in current week decides the year
@@ -270,7 +279,7 @@ export const getWeekNumber = (date: Date): number => {
   // Calculate full weeks to the date
   const weekNumber = 1 + Math.round((tempDate.getTime() - week1.getTime()) / 86_400_000 / 7)
 
-  return weekNumber
+  return { weekNumber, year: tempDate.getFullYear() }
 }
 
 /**
@@ -284,22 +293,27 @@ export const getMonthDetails = (
   year: number,
   month: number,
   firstDayOfWeek: number
-): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
+): { week: { number: number; year: number }; days: { date: Date; month: string }[] }[] => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
   const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
   const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
-  const weeks: { weekNumber?: number; days: { date: Date; month: string }[] }[] = []
+  const weeks: {
+    week: { number: number; year: number }
+    days: { date: Date; month: string }[]
+  }[] = []
 
   days.forEach((day, index) => {
     if (index % 7 === 0 || weeks.length === 0) {
       weeks.push({
+        week: { number: 0, year: 0 },
         days: [],
       })
     }
 
     if ((index + 1) % 7 === 0) {
-      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
+      const { weekNumber, year } = getISOWeekNumberAndYear(day.date)
+      weeks[weeks.length - 1].week = { number: weekNumber, year }
     }
 
     weeks[weeks.length - 1].days.push(day)