@coreui/vue-pro 5.17.1 → 5.19.0

package/src/components/callout/CCallout.ts

@@ -24,7 +24,7 @@ const CCallout = defineComponent({
             },
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/card/CCard.ts

@@ -39,7 +39,7 @@ const CCard = defineComponent({
             },
           ],
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/card/CCardImage.ts

@@ -29,7 +29,7 @@ const CCardImage = defineComponent({
         {
           class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/card/CCardLink.ts

@@ -17,7 +17,7 @@ const CCardLink = defineComponent({
       h(
         CLink,
         { class: 'card-link', href: props.href },
-        { default: () => slots.default && slots.default() },
+        { default: () => slots.default && slots.default() }
       )
   },
 })

package/src/components/carousel/CCarousel.ts

@@ -4,13 +4,13 @@ import {
   ref,
   VNode,
   onBeforeMount,
+  onBeforeUnmount,
   onMounted,
-  onUpdated,
   provide,
   watch,
 } from 'vue'
 
-import { isInViewport } from '../../utils'
+import { isInViewport, isRTL, Swipe } from '../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',
@@ -63,6 +63,15 @@ const CCarousel = defineComponent({
         return ['crossfade', 'slide'].includes(value)
       },
     },
+    /**
+     * Set whether the carousel should support left/right swipe interactions on touchscreen devices.
+     *
+     * @since 5.10.0
+     */
+    touch: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Set whether the carousel should cycle continuously or have hard stops.
      */
@@ -71,7 +80,21 @@ const CCarousel = defineComponent({
       default: true,
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    /**
+     * Event called when the slide transition starts.
+     *
+     * @since 5.10.0
+     */
+    'slide',
+    /**
+     * Event called when the slide transition ends.
+     *
+     * @since 5.10.0
+     */
+    'slid',
+  ],
+  setup(props, { emit, slots }) {
     const carouselRef = ref()
 
     const active = ref(props.index)
@@ -82,6 +105,8 @@ const CCarousel = defineComponent({
     const timeout = ref()
     const visible = ref()
 
+    let swipe: Swipe | undefined
+
     const setAnimating = (value: boolean) => {
       animating.value = value
     }
@@ -99,7 +124,7 @@ const CCarousel = defineComponent({
       if (typeof props.interval === 'number') {
         timeout.value = setTimeout(
           () => nextItemWhenVisible(),
-          typeof customInterval.value === 'number' ? customInterval.value : props.interval,
+          typeof customInterval.value === 'number' ? customInterval.value : props.interval
         )
       }
     }
@@ -110,9 +135,9 @@ const CCarousel = defineComponent({
       }
       direction.value = _direction
       if (_direction === 'next') {
-        active.value === items.value.length - 1 ? (active.value = 0) : active.value++
+        active.value = active.value === items.value.length - 1 ? 0 : active.value + 1
       } else {
-        active.value === 0 ? (active.value = items.value.length - 1) : active.value--
+        active.value = active.value === 0 ? items.value.length - 1 : active.value - 1
       }
     }
 
@@ -162,23 +187,37 @@ const CCarousel = defineComponent({
 
     onMounted(() => {
       window.addEventListener('scroll', handleScroll)
+
+      if (props.touch && carouselRef.value) {
+        swipe = new Swipe(carouselRef.value, {
+          onLeft: () => handleControlClick(isRTL(carouselRef.value) ? 'prev' : 'next'),
+          onRight: () => handleControlClick(isRTL(carouselRef.value) ? 'next' : 'prev'),
+        })
+      }
     })
 
-    onUpdated(() => {
-      watch(animating, () => {
-        if (props.wrap) {
-          !animating.value && cycle()
-          return
-        }
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', handleScroll)
+      swipe?.dispose()
+    })
 
-        if (!props.wrap && active.value < items.value.length - 1) {
-          !animating.value && cycle()
-        }
-      })
+    watch(animating, () => {
+      if (animating.value) {
+        emit('slide', active.value, direction.value)
+        return
+      }
+
+      emit('slid', active.value, direction.value)
+
+      if (props.wrap || active.value < items.value.length - 1) {
+        cycle()
+      }
     })
 
     watch(visible, () => {
-      visible.value && cycle()
+      if (visible.value) {
+        cycle()
+      }
     })
 
     return () =>
@@ -206,7 +245,7 @@ const CCarousel = defineComponent({
                   ...(active.value === index && { class: 'active' }),
                   onClick: () => handleIndicatorClick(index),
                 })
-              }),
+              })
             ),
           h(
             'div',
@@ -216,7 +255,7 @@ const CCarousel = defineComponent({
                 active: active.value === index ? true : false,
                 direction: direction.value,
               })
-            }),
+            })
           ),
           props.controls && [
             h(
@@ -230,7 +269,7 @@ const CCarousel = defineComponent({
               [
                 h('span', { class: 'carousel-control-prev-icon', ariaHidden: 'true' }),
                 h('span', { class: 'visually-hidden' }, 'Previous'),
-              ],
+              ]
             ),
             h(
               'button',
@@ -243,10 +282,10 @@ const CCarousel = defineComponent({
               [
                 h('span', { class: 'carousel-control-next-icon', ariaHidden: 'true' }),
                 h('span', { class: 'visually-hidden' }, 'Next'),
-              ],
+              ]
             ),
           ],
-        ],
+        ]
       )
   },
 })

package/src/components/carousel/CCarouselCaption.ts

@@ -9,7 +9,7 @@ const CCarouselCaption = defineComponent({
         {
           class: 'carousel-caption',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/carousel/CCarouselItem.ts

@@ -32,13 +32,14 @@ const CCarouselItem = defineComponent({
     const orderClassName = ref()
     const activeClassName = ref(active.value && 'active')
 
-    // eslint-disable-next-line no-unused-vars
     const setAnimating = inject('setAnimating') as (value: boolean) => void
-    // eslint-disable-next-line no-unused-vars
+
     const setCustomInterval = inject('setCustomInterval') as (value: boolean | number) => void
 
     watch(active, (active, prevActive) => {
-      active && setCustomInterval(props.interval)
+      if (active) {
+        setCustomInterval(props.interval)
+      }
       if (!prevActive && active) {
         orderClassName.value = `carousel-item-${props.direction}`
         setCustomInterval(props.interval)
@@ -82,7 +83,7 @@ const CCarouselItem = defineComponent({
           ],
           ref: carouselItemRef,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/carousel/__tests__/CCarousel.spec.ts

@@ -45,6 +45,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('carousel')).toBe(true)
     expect(customWrapper.classes('slide')).toBe(true)
     expect(customWrapper.classes('carousel-fade')).toBe(true)
-    expect(customWrapper.classes('carousel-dark')).toBe(true)
+    expect(customWrapper.attributes('data-coreui-theme')).toBe('dark')
   })
 })

package/src/components/chip/CChip.ts

@@ -0,0 +1,361 @@
+import { computed, defineComponent, h, inject, ref, type VNode } from 'vue'
+
+import { Color } from '../../props'
+import { chipSetContextKey, type ChipSetConfig } from '../chip-set/useChipSet'
+
+const CChip = defineComponent({
+  name: 'CChip',
+  props: {
+    /**
+     * Toggle the active state for the component.
+     */
+    active: Boolean,
+    /**
+     * Provides an accessible label for the remove button.
+     */
+    ariaRemoveLabel: {
+      type: String,
+      default: 'Remove',
+    },
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'span',
+    },
+    /**
+     * Enables interactive hover styling and pointer cursor.
+     */
+    clickable: Boolean,
+    /**
+     * Sets the color context of the component to one of CoreUI's themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    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: {
+      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: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * Replaces the default remove icon with a custom icon node.
+     */
+    removeIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
+    /**
+     * Enables selectable behavior and keyboard toggle support.
+     *
+     * Defaults to `undefined` so a chip can override the value inherited from a `CChipSet`.
+     */
+    selectable: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * Controls the selected state of a selectable component.
+     */
+    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.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      validator: (value: string) => {
+        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.
+     *
+     * @values 'outline'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return value === 'outline'
+      },
+    },
+  },
+  emits: [
+    /**
+     * Event called when the user clicks on the component.
+     */
+    'click',
+    /**
+     * Event called when the component becomes deselected.
+     */
+    'deselect',
+    /**
+     * Event called when the user presses a key.
+     */
+    'keydown',
+    /**
+     * Event called when the component requests removal.
+     */
+    'remove',
+    /**
+     * Event called when the component becomes selected.
+     */
+    'select',
+    /**
+     * Event called when the selected state changes.
+     */
+    'selected-change',
+  ],
+  setup(props, { attrs, emit, slots, expose }) {
+    const chipRef = ref<HTMLElement>()
+    const internalSelected = ref(false)
+
+    // 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 coordinated = computed(() => chipSet !== null && props.value !== undefined)
+
+    const selectedState = computed(() => {
+      if (coordinated.value) {
+        return chipSet!.isSelected(props.value as string)
+      }
+      return props.selected === undefined ? internalSelected.value : Boolean(props.selected)
+    })
+
+    const isFocusable = computed(() =>
+      Boolean(!isDisabled.value && (isSelectable.value || isRemovable.value))
+    )
+
+    const setSelectableState = (nextSelected: boolean, event: MouseEvent | KeyboardEvent): void => {
+      if (!isSelectable.value || isDisabled.value || nextSelected === selectedState.value) {
+        return
+      }
+
+      if (coordinated.value) {
+        chipSet!.toggleSelected(props.value as string, nextSelected, event)
+      } else if (props.selected === undefined) {
+        internalSelected.value = nextSelected
+      }
+
+      if (nextSelected) {
+        emit('select', event)
+      } else {
+        emit('deselect', event)
+      }
+
+      emit('selected-change', nextSelected, event)
+    }
+
+    const toggleSelectedState = (event: MouseEvent | KeyboardEvent): void => {
+      setSelectableState(!selectedState.value, event)
+    }
+
+    const handleRemove = (event: MouseEvent | KeyboardEvent): void => {
+      if (coordinated.value) {
+        chipSet!.removeChip(props.value as string, event)
+      }
+
+      emit('remove', event)
+    }
+
+    const handleRemoveClick = (event: MouseEvent): void => {
+      event.stopPropagation()
+      handleRemove(event)
+    }
+
+    const handleClick = (event: MouseEvent): void => {
+      if (isDisabled.value) {
+        return
+      }
+
+      if ((event.target as HTMLElement).closest('.chip-remove')) {
+        return
+      }
+
+      if (isSelectable.value) {
+        toggleSelectedState(event)
+      }
+
+      emit('click', event)
+    }
+
+    const handleKeydown = (event: KeyboardEvent): void => {
+      if (isDisabled.value) {
+        emit('keydown', event)
+        return
+      }
+
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+        case 'Spacebar': {
+          if (isSelectable.value) {
+            event.preventDefault()
+            toggleSelectedState(event)
+          }
+          break
+        }
+
+        case 'Backspace':
+        case 'Delete': {
+          if (isRemovable.value) {
+            event.preventDefault()
+            handleRemove(event)
+          }
+          break
+        }
+
+        // No default
+      }
+
+      emit('keydown', event)
+    }
+
+    expose({ chipRef })
+
+    return () => {
+      const removeIconVNode =
+        slots.removeIcon?.() ||
+        removeIcon.value ||
+        h(
+          'svg',
+          {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: 16,
+            height: 16,
+            viewBox: '0 0 16 16',
+            fill: 'none',
+            stroke: 'currentColor',
+            '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 })]
+        )
+
+      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(),
+        isRemovable.value &&
+          !isDisabled.value &&
+          h(
+            'button',
+            {
+              type: 'button',
+              class: 'chip-remove',
+              'aria-label': ariaRemoveLabel.value,
+              onClick: handleRemoveClick,
+              tabindex: -1,
+            },
+            removeIconVNode as VNode
+          ),
+      ].filter(Boolean)
+
+      return h(
+        props.as,
+        {
+          ref: chipRef,
+          class: [
+            'chip',
+            {
+              active: isSelectable.value ? selectedState.value : props.active,
+              disabled: isDisabled.value,
+              [`chip-${props.color}`]: props.color,
+              [`chip-${props.size}`]: props.size,
+              'chip-clickable': props.clickable || isSelectable.value || attrs.onClick,
+              'chip-outline': props.variant === 'outline',
+            },
+            attrs.class,
+          ],
+          '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: isDisabled.value }),
+        },
+        children
+      )
+    }
+  },
+})
+
+export { CChip }