@coreui/vue-pro 5.18.0 → 5.19.0

package/src/components/chip/CChip.ts

@@ -1,8 +1,7 @@
-import { computed, defineComponent, h, ref } from 'vue'
+import { computed, defineComponent, h, inject, ref, type VNode } from 'vue'
 
 import { Color } from '../../props'
-
-const SELECTOR_FOCUSABLE_ITEMS = '.chip[tabindex="0"]:not(.disabled)'
+import { chipSetContextKey, type ChipSetConfig } from '../chip-set/useChipSet'
 
 const CChip = defineComponent({
   name: 'CChip',
@@ -37,12 +36,31 @@ const CChip = defineComponent({
     color: Color,
     /**
      * Toggle the disabled state for the component.
+     *
+     * Defaults to `undefined` so a chip can override the value inherited from a `CChipSet` (including turning it off).
      */
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * Turns the component into a filter chip. A filter chip is selectable and shows a leading check icon while selected.
+     *
+     * Defaults to `undefined` so a chip can override the value inherited from a `CChipSet`.
+     */
+    filter: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Displays a remove button inside the component.
+     *
+     * Defaults to `undefined` so a chip can override the value inherited from a `CChipSet` (including turning it off).
      */
-    removable: Boolean,
+    removable: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Replaces the default remove icon with a custom icon node.
      */
@@ -52,12 +70,27 @@ const CChip = defineComponent({
     },
     /**
      * Enables selectable behavior and keyboard toggle support.
+     *
+     * Defaults to `undefined` so a chip can override the value inherited from a `CChipSet`.
      */
-    selectable: Boolean,
+    selectable: {
+      type: Boolean,
+      default: undefined,
+    },
     /**
      * Controls the selected state of a selectable component.
      */
-    selected: Boolean,
+    selected: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * Replaces the default selected icon shown by a filter chip with a custom icon node.
+     */
+    selectedIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
     /**
      * Size the component small or large.
      *
@@ -69,6 +102,13 @@ const CChip = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Sets the value associated with the component, used by `CChipSet` to track selection.
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
     /**
      * Set the button variant to an outlined style.
      *
@@ -109,56 +149,50 @@ const CChip = defineComponent({
   ],
   setup(props, { attrs, emit, slots, expose }) {
     const chipRef = ref<HTMLElement>()
-
     const internalSelected = ref(false)
 
-    const selectedState = computed(() =>
-      props.selected !== undefined ? Boolean(props.selected) : internalSelected.value
+    // A chip placed inside a CChipSet / CChipInput reads its coordinated state
+    // from the set context; standalone it manages its own.
+    const chipSet = inject(chipSetContextKey, null)
+
+    const config = <K extends keyof ChipSetConfig>(key: K): ChipSetConfig[K] | undefined =>
+      chipSet?.config.value[key]
+
+    // A chip's own prop (when set) overrides the set-level config; otherwise it
+    // inherits it. `??` makes this work because the overridable props default to
+    // `undefined`, so an explicit `false` still wins over the set.
+    const isDisabled = computed(() => Boolean(props.disabled ?? config('disabled')))
+    const isFilter = computed(() => Boolean(props.filter ?? config('filter')))
+    const isRemovable = computed(() => Boolean(props.removable ?? config('removable')))
+    // A filter chip is selectable by definition.
+    const isSelectable = computed(() =>
+      Boolean((props.selectable ?? config('selectable')) || isFilter.value)
     )
+    const removeIcon = computed(() => props.removeIcon ?? config('removeIcon'))
+    const selectedIcon = computed(() => props.selectedIcon ?? config('selectedIcon'))
+    const ariaRemoveLabel = computed(() => props.ariaRemoveLabel)
 
-    const isFocusable = computed(() => Boolean(!props.disabled && (props.selectable || props.removable)))
-
-    const getFocusableSibling = (shouldGetNext: boolean): HTMLElement | null => {
-      const currentElement = chipRef.value
-      if (!currentElement?.parentElement) {
-        return null
-      }
-
-      const chips = Array.from(
-        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS),
-      )
-
-      const index = chips.indexOf(currentElement as HTMLElement)
-      if (index === -1 || chips.length <= 1) {
-        return null
-      }
-
-      const targetIndex = shouldGetNext ? index + 1 : index - 1
-      return chips[targetIndex] ?? null
-    }
+    const coordinated = computed(() => chipSet !== null && props.value !== undefined)
 
-    const navigateToEdge = (targetIndex: 0 | -1): void => {
-      const currentElement = chipRef.value
-      if (!currentElement?.parentElement) {
-        return
+    const selectedState = computed(() => {
+      if (coordinated.value) {
+        return chipSet!.isSelected(props.value as string)
       }
+      return props.selected === undefined ? internalSelected.value : Boolean(props.selected)
+    })
 
-      const chips = Array.from(
-        currentElement.parentElement.querySelectorAll<HTMLElement>(SELECTOR_FOCUSABLE_ITEMS),
-      )
-      const edgeChip = targetIndex === -1 ? chips[chips.length - 1] : chips[0]
-      edgeChip?.focus()
-    }
+    const isFocusable = computed(() =>
+      Boolean(!isDisabled.value && (isSelectable.value || isRemovable.value))
+    )
 
-    const setSelectableState = (
-      nextSelected: boolean,
-      event: MouseEvent | KeyboardEvent,
-    ): void => {
-      if (!props.selectable || props.disabled || nextSelected === selectedState.value) {
+    const setSelectableState = (nextSelected: boolean, event: MouseEvent | KeyboardEvent): void => {
+      if (!isSelectable.value || isDisabled.value || nextSelected === selectedState.value) {
         return
       }
 
-      if (props.selected === undefined) {
+      if (coordinated.value) {
+        chipSet!.toggleSelected(props.value as string, nextSelected, event)
+      } else if (props.selected === undefined) {
         internalSelected.value = nextSelected
       }
 
@@ -176,6 +210,10 @@ const CChip = defineComponent({
     }
 
     const handleRemove = (event: MouseEvent | KeyboardEvent): void => {
+      if (coordinated.value) {
+        chipSet!.removeChip(props.value as string, event)
+      }
+
       emit('remove', event)
     }
 
@@ -185,7 +223,7 @@ const CChip = defineComponent({
     }
 
     const handleClick = (event: MouseEvent): void => {
-      if (props.disabled) {
+      if (isDisabled.value) {
         return
       }
 
@@ -193,7 +231,7 @@ const CChip = defineComponent({
         return
       }
 
-      if (props.selectable) {
+      if (isSelectable.value) {
         toggleSelectedState(event)
       }
 
@@ -201,7 +239,7 @@ const CChip = defineComponent({
     }
 
     const handleKeydown = (event: KeyboardEvent): void => {
-      if (props.disabled) {
+      if (isDisabled.value) {
         emit('keydown', event)
         return
       }
@@ -210,7 +248,7 @@ const CChip = defineComponent({
         case 'Enter':
         case ' ':
         case 'Spacebar': {
-          if (props.selectable) {
+          if (isSelectable.value) {
             event.preventDefault()
             toggleSelectedState(event)
           }
@@ -219,47 +257,13 @@ const CChip = defineComponent({
 
         case 'Backspace':
         case 'Delete': {
-          if (props.removable) {
+          if (isRemovable.value) {
             event.preventDefault()
-            const sibling = getFocusableSibling(false) || getFocusableSibling(true)
-            sibling?.focus()
             handleRemove(event)
           }
           break
         }
 
-        case 'ArrowLeft': {
-          event.preventDefault()
-          const sibling = getFocusableSibling(false)
-          sibling?.focus()
-          if (selectedState.value && event.shiftKey) {
-            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
-          }
-          break
-        }
-
-        case 'ArrowRight': {
-          event.preventDefault()
-          const sibling = getFocusableSibling(true)
-          sibling?.focus()
-          if (selectedState.value && event.shiftKey) {
-            sibling?.dispatchEvent(new CustomEvent('coreui-chip-select'))
-          }
-          break
-        }
-
-        case 'Home': {
-          event.preventDefault()
-          navigateToEdge(0)
-          break
-        }
-
-        case 'End': {
-          event.preventDefault()
-          navigateToEdge(-1)
-          break
-        }
-
         // No default
       }
 
@@ -271,7 +275,7 @@ const CChip = defineComponent({
     return () => {
       const removeIconVNode =
         slots.removeIcon?.() ||
-        props.removeIcon ||
+        removeIcon.value ||
         h(
           'svg',
           {
@@ -284,26 +288,43 @@ const CChip = defineComponent({
             'stroke-width': 2,
             'stroke-linecap': 'round',
           },
-          [
-            h('line', { x1: 4, y1: 4, x2: 12, y2: 12 }),
-            h('line', { x1: 12, y1: 4, x2: 4, y2: 12 }),
-          ],
+          [h('line', { x1: 4, y1: 4, x2: 12, y2: 12 }), h('line', { x1: 12, y1: 4, x2: 4, y2: 12 })]
+        )
+
+      const selectedIconVNode =
+        slots.selectedIcon?.() ||
+        selectedIcon.value ||
+        h(
+          'svg',
+          {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: 16,
+            height: 16,
+            viewBox: '0 0 512 512',
+            fill: 'currentColor',
+          },
+          h('path', {
+            d: 'M425.373 89.373 196 318.745 86.627 209.373l-45.254 45.254L196 409.255l274.627-274.628z',
+          })
         )
 
       const children = [
+        isFilter.value &&
+          selectedState.value &&
+          h('span', { class: 'chip-check', 'aria-hidden': 'true' }, selectedIconVNode as VNode),
         slots.default && slots.default(),
-        props.removable &&
+        isRemovable.value &&
+          !isDisabled.value &&
           h(
             'button',
             {
               type: 'button',
               class: 'chip-remove',
-              'aria-label': props.ariaRemoveLabel,
+              'aria-label': ariaRemoveLabel.value,
               onClick: handleRemoveClick,
               tabindex: -1,
-              disabled: props.disabled,
             },
-            removeIconVNode,
+            removeIconVNode as VNode
           ),
       ].filter(Boolean)
 
@@ -314,23 +335,24 @@ const CChip = defineComponent({
           class: [
             'chip',
             {
-              active: props.selectable ? selectedState.value : props.active,
-              disabled: props.disabled,
+              active: isSelectable.value ? selectedState.value : props.active,
+              disabled: isDisabled.value,
               [`chip-${props.color}`]: props.color,
               [`chip-${props.size}`]: props.size,
-              'chip-clickable': props.clickable || props.selectable || attrs.onClick,
+              'chip-clickable': props.clickable || isSelectable.value || attrs.onClick,
               'chip-outline': props.variant === 'outline',
             },
             attrs.class,
           ],
-          ...(props.disabled && { 'aria-disabled': true }),
-          ...(props.selectable && { 'aria-selected': selectedState.value }),
+          'data-coreui-chip-value': props.value,
+          ...(isDisabled.value && { 'aria-disabled': true }),
+          ...(isSelectable.value && { 'aria-selected': selectedState.value }),
           ...(isFocusable.value && !attrs.tabindex && { tabindex: 0 }),
           onClick: handleClick,
           onKeydown: handleKeydown,
-          ...(props.as === 'button' && { disabled: props.disabled }),
+          ...(props.as === 'button' && { disabled: isDisabled.value }),
         },
-        children,
+        children
       )
     }
   },

package/src/components/chip/__tests__/CChip.spec.ts

@@ -362,4 +362,30 @@ describe('CChip', () => {
     })
     expect(wrapper.classes()).toContain('chip-success')
   })
+
+  it('filter implies selectable and shows a check icon while selected', async () => {
+    const wrapper = mount(CChip, {
+      props: { filter: true },
+      slots: { default: 'Filter' },
+    })
+
+    expect(wrapper.attributes('aria-selected')).toBe('false')
+    expect(wrapper.find('.chip-check').exists()).toBe(false)
+
+    await wrapper.trigger('click')
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.emitted('select')).toHaveLength(1)
+    expect(wrapper.find('.chip-check').exists()).toBe(true)
+
+    await wrapper.trigger('click')
+    expect(wrapper.find('.chip-check').exists()).toBe(false)
+  })
+
+  it('renders a custom selectedIcon for a filter chip', () => {
+    const wrapper = mount(CChip, {
+      props: { filter: true, selected: true, selectedIcon: '<i class="custom-check"></i>' },
+      slots: { default: 'Filter' },
+    })
+    expect(wrapper.find('.chip-check').exists()).toBe(true)
+  })
 })

package/src/components/chip/const.ts

@@ -0,0 +1,3 @@
+// Chips become focusable (tabindex="0") when selectable/removable, so containers
+// (CChipSet, CChipInput) read that instead of re-deriving focusability.
+export const SELECTOR_CHIP_FOCUSABLE = '.chip[tabindex="0"]:not(.disabled)'