@coreui/vue-pro 5.17.1 → 5.19.0

package/src/directives/__tests__/v-c-popover.spec.ts

@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils'
+import { h, withDirectives } from 'vue'
+import { createPopper } from '@popperjs/core'
+import vCPopover from '../v-c-popover'
+
+jest.mock('@popperjs/core', () => ({ createPopper: jest.fn() }))
+
+const mockedCreatePopper = createPopper as jest.Mock
+
+const renderWithDirective = (value: unknown) =>
+  mount(
+    {
+      render: () => withDirectives(h('button', 'Trigger'), [[vCPopover, value]]),
+    },
+    { attachTo: document.body }
+  )
+
+describe('v-c-popover directive', () => {
+  afterEach(() => {
+    document.body.querySelectorAll('.popover').forEach((el) => el.remove())
+    mockedCreatePopper.mockClear()
+  })
+
+  it('creates a popover on click with header and content', async () => {
+    const wrapper = renderWithDirective({ header: 'Title', content: 'Body', trigger: 'click' })
+    await wrapper.find('button').trigger('click')
+
+    const popover = document.body.querySelector('.popover')
+    expect(popover).not.toBeNull()
+    expect(popover?.querySelector('.popover-header')?.textContent).toBe('Title')
+    expect(popover?.querySelector('.popover-body')?.textContent).toBe('Body')
+    expect(mockedCreatePopper).toHaveBeenCalled()
+  })
+
+  it('accepts a plain string value as content', async () => {
+    const wrapper = renderWithDirective('Just content')
+    await wrapper.find('button').trigger('click')
+    expect(document.body.querySelector('.popover-body')?.textContent).toBe('Just content')
+  })
+
+  it('toggles the popover off on a second click', async () => {
+    const wrapper = renderWithDirective({ content: 'Body', trigger: 'click' })
+    const button = wrapper.find('button')
+
+    await button.trigger('click')
+    const popover = document.body.querySelector('.popover')
+    popover?.classList.add('show')
+
+    await button.trigger('click')
+    expect(document.body.querySelector('.popover')?.classList.contains('show')).toBe(false)
+  })
+
+  it('shows the popover on focus for the focus trigger', async () => {
+    const wrapper = renderWithDirective({ content: 'Body', trigger: 'focus' })
+    await wrapper.find('button').trigger('focus')
+    expect(document.body.querySelector('.popover')).not.toBeNull()
+  })
+
+  it('removes the popover element on unmount', async () => {
+    const wrapper = renderWithDirective({ content: 'Body', trigger: 'click' })
+    await wrapper.find('button').trigger('click')
+    expect(document.body.querySelector('.popover')).not.toBeNull()
+
+    wrapper.unmount()
+    expect(document.body.querySelector('.popover')).toBeNull()
+  })
+})

package/src/directives/__tests__/v-c-tooltip.spec.ts

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { h, withDirectives } from 'vue'
+import { createPopper } from '@popperjs/core'
+import vCTooltip from '../v-c-tooltip'
+
+jest.mock('@popperjs/core', () => ({ createPopper: jest.fn() }))
+
+const mockedCreatePopper = createPopper as jest.Mock
+
+const renderWithDirective = (value: unknown) =>
+  mount(
+    {
+      render: () => withDirectives(h('button', 'Trigger'), [[vCTooltip, value]]),
+    },
+    { attachTo: document.body }
+  )
+
+describe('v-c-tooltip directive', () => {
+  afterEach(() => {
+    document.body.querySelectorAll('.tooltip').forEach((el) => el.remove())
+    mockedCreatePopper.mockClear()
+  })
+
+  it('creates a tooltip on hover with content', async () => {
+    const wrapper = renderWithDirective({ content: 'Hello', trigger: 'hover' })
+    await wrapper.find('button').trigger('mouseenter')
+
+    const tooltip = document.body.querySelector('.tooltip')
+    expect(tooltip).not.toBeNull()
+    expect(tooltip?.querySelector('.tooltip-inner')?.textContent).toBe('Hello')
+    expect(tooltip?.getAttribute('role')).toBe('tooltip')
+    expect(mockedCreatePopper).toHaveBeenCalled()
+  })
+
+  it('accepts a plain string value as content', async () => {
+    const wrapper = renderWithDirective('Just content')
+    await wrapper.find('button').trigger('mouseenter')
+    expect(document.body.querySelector('.tooltip-inner')?.textContent).toBe('Just content')
+  })
+
+  it('hides the tooltip on mouseleave', async () => {
+    const wrapper = renderWithDirective({ content: 'Hello', trigger: 'hover' })
+    const button = wrapper.find('button')
+
+    await button.trigger('mouseenter')
+    document.body.querySelector('.tooltip')?.classList.add('show')
+
+    await button.trigger('mouseleave')
+    expect(document.body.querySelector('.tooltip')?.classList.contains('show')).toBe(false)
+  })
+
+  it('shows the tooltip on click for the click trigger', async () => {
+    const wrapper = renderWithDirective({ content: 'Hello', trigger: 'click' })
+    await wrapper.find('button').trigger('click')
+    expect(document.body.querySelector('.tooltip')).not.toBeNull()
+  })
+
+  it('removes the tooltip element on unmount', async () => {
+    const wrapper = renderWithDirective({ content: 'Hello', trigger: 'click' })
+    await wrapper.find('button').trigger('click')
+    expect(document.body.querySelector('.tooltip')).not.toBeNull()
+
+    wrapper.unmount()
+    expect(document.body.querySelector('.tooltip')).toBeNull()
+  })
+})

package/src/directives/v-c-popover.ts

@@ -19,7 +19,7 @@ const addPopoverElement = (
   el: HTMLElement,
   popover: HTMLDivElement,
   popperOptions: Partial<Options>,
-  uID: string,
+  uID: string
 ) => {
   el.setAttribute('aria-describedby', uID)
   document.body.appendChild(popover)
@@ -41,7 +41,7 @@ const togglePopoverElement = (
   el: HTMLElement,
   popover: HTMLDivElement,
   popperOptions: Partial<Options>,
-  uID: string,
+  uID: string
 ) => {
   const popperElement = document.getElementById(popover.id)
   if (popperElement && popperElement.classList.contains('show')) {
@@ -57,7 +57,7 @@ export default {
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
     const { getUID } = useUniqueId('popover')
     const value = binding.value
-    const content = typeof value === 'string' ? value : value.content ?? ''
+    const content = typeof value === 'string' ? value : (value.content ?? '')
     const header = value.header ?? ''
     const trigger = value.trigger ?? 'click'
 
@@ -81,10 +81,11 @@ export default {
     binding.arg = uID
     const popover = createPopoverElement(uID, header, content)
 
-    trigger.includes('click') &&
+    if (trigger.includes('click')) {
       el.addEventListener('click', () => {
         togglePopoverElement(el, popover, popperOptions, uID)
       })
+    }
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
@@ -106,6 +107,8 @@ export default {
   },
   unmounted(_el: HTMLElement, binding: DirectiveBinding): void {
     const popover = binding.arg && document.getElementById(binding.arg)
-    popover && popover.remove()
+    if (popover) {
+      popover.remove()
+    }
   },
 }

package/src/directives/v-c-tooltip.ts

@@ -18,7 +18,7 @@ const addTooltipElement = (
   el: HTMLElement,
   tooltip: HTMLDivElement,
   popperOptions: Partial<Options>,
-  uID: string,
+  uID: string
 ) => {
   el.setAttribute('aria-describedby', uID)
   document.body.appendChild(tooltip)
@@ -40,7 +40,7 @@ const toggleTooltipElement = (
   el: HTMLElement,
   tooltip: HTMLDivElement,
   popperOptions: Partial<Options>,
-  uID: string,
+  uID: string
 ) => {
   const popperElement = document.getElementById(tooltip.id)
   if (popperElement && popperElement.classList.contains('show')) {
@@ -55,7 +55,7 @@ export default {
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
     const { getUID } = useUniqueId('tooltip')
     const value = binding.value
-    const content = typeof value === 'string' ? value : value.content ?? ''
+    const content = typeof value === 'string' ? value : (value.content ?? '')
     const trigger = value.trigger ?? 'hover'
 
     // Popper Config
@@ -78,10 +78,11 @@ export default {
     binding.arg = uID
     const tooltip = createTooltipElement(uID, content)
 
-    trigger.includes('click') &&
+    if (trigger.includes('click')) {
       el.addEventListener('click', () => {
         toggleTooltipElement(el, tooltip, popperOptions, uID)
       })
+    }
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
@@ -103,6 +104,8 @@ export default {
   },
   beforeUnmount(_el: HTMLElement, binding: DirectiveBinding): void {
     const tooltip = binding.arg && document.getElementById(binding.arg)
-    tooltip && tooltip.remove()
+    if (tooltip) {
+      tooltip.remove()
+    }
   },
 }

package/src/directives/v-c-visible.ts

@@ -18,7 +18,7 @@ export const vVisible: ObjectDirective<VShowElement> = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue) return
+    if (Boolean(value) === Boolean(oldValue)) return
     if (transition) {
       if (value) {
         transition.beforeEnter(el)

package/src/index.ts

@@ -12,7 +12,7 @@ const CoreuiVue = {
     for (const key in Directives) {
       app.directive(
         (Directives as { [key: string]: any })[key]['name'],
-        (Directives as { [key: string]: any })[key],
+        (Directives as { [key: string]: any })[key]
       )
     }
   },

package/src/utils/ComponentProps.ts

@@ -1,6 +1,7 @@
 import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
 
 export type ComponentProps<T> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   T extends DefineComponent<ExtractPropTypes<infer Props>, any, any>
     ? ExtractPublicPropTypes<Props>
     : never

package/src/utils/__tests__/swipe.spec.ts

@@ -0,0 +1,82 @@
+import Swipe from '../swipe'
+
+const touchEvent = (type: string, clientX: number): Event => {
+  const event = new Event(type) as Event & { touches: { clientX: number }[] }
+  event.touches = [{ clientX }]
+  return event
+}
+
+describe('Swipe', () => {
+  let element: HTMLElement
+  const originalPointerEvent = window.PointerEvent
+
+  beforeEach(() => {
+    element = document.createElement('div')
+    document.body.appendChild(element)
+    // Force the touch-event path and make the helper consider touch supported.
+    ;(window as unknown as { PointerEvent?: unknown }).PointerEvent = undefined
+    Object.defineProperty(navigator, 'maxTouchPoints', { value: 1, configurable: true })
+  })
+
+  afterEach(() => {
+    element.remove()
+    ;(window as unknown as { PointerEvent?: unknown }).PointerEvent = originalPointerEvent
+  })
+
+  it('reports support when touch points are available', () => {
+    expect(Swipe.isSupported()).toBe(true)
+  })
+
+  it('calls onLeft when swiping left past the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    const onEnd = jest.fn()
+    new Swipe(element, { onLeft, onRight, onEnd })
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 100))
+    element.dispatchEvent(touchEvent('touchend', 100))
+
+    expect(onLeft).toHaveBeenCalledTimes(1)
+    expect(onRight).not.toHaveBeenCalled()
+    expect(onEnd).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onRight when swiping right past the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    new Swipe(element, { onLeft, onRight })
+
+    element.dispatchEvent(touchEvent('touchstart', 100))
+    element.dispatchEvent(touchEvent('touchmove', 200))
+    element.dispatchEvent(touchEvent('touchend', 200))
+
+    expect(onRight).toHaveBeenCalledTimes(1)
+    expect(onLeft).not.toHaveBeenCalled()
+  })
+
+  it('ignores swipes below the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    new Swipe(element, { onLeft, onRight })
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 180))
+    element.dispatchEvent(touchEvent('touchend', 180))
+
+    expect(onLeft).not.toHaveBeenCalled()
+    expect(onRight).not.toHaveBeenCalled()
+  })
+
+  it('stops detecting swipes after dispose', () => {
+    const onLeft = jest.fn()
+    const swipe = new Swipe(element, { onLeft })
+    swipe.dispose()
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 100))
+    element.dispatchEvent(touchEvent('touchend', 100))
+
+    expect(onLeft).not.toHaveBeenCalled()
+  })
+})

package/src/utils/getNextActiveElement.ts

@@ -2,7 +2,7 @@ const getNextActiveElement = (
   list: HTMLElement[],
   activeElement: HTMLElement,
   shouldGetNext: boolean,
-  isCycleAllowed: boolean,
+  isCycleAllowed: boolean
 ) => {
   const listLength = list.length
   let index = list.indexOf(activeElement)

package/src/utils/index.ts

@@ -7,6 +7,7 @@ import isEqual from './isEqual'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
+import Swipe from './swipe'
 
 export {
   getNextActiveElement,
@@ -18,4 +19,5 @@ export {
   isInViewport,
   isObjectInArray,
   isRTL,
+  Swipe,
 }

package/src/utils/swipe.ts

@@ -0,0 +1,114 @@
+const SWIPE_THRESHOLD = 40
+const POINTER_TYPE_TOUCH = 'touch'
+const POINTER_TYPE_PEN = 'pen'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+
+export interface SwipeCallbacks {
+  onLeft?: () => void
+  onRight?: () => void
+  onEnd?: () => void
+}
+
+/**
+ * Detects horizontal swipe gestures on an element, using Pointer events when
+ * available and falling back to Touch events otherwise. A modified port of the
+ * vanilla `@coreui/coreui` swipe helper.
+ */
+class Swipe {
+  private readonly element: HTMLElement
+  private readonly callbacks: SwipeCallbacks
+  private deltaX = 0
+  private readonly supportPointerEvents = Boolean(window.PointerEvent)
+
+  constructor(element: HTMLElement, callbacks: SwipeCallbacks = {}) {
+    this.element = element
+    this.callbacks = callbacks
+
+    if (!element || !Swipe.isSupported()) {
+      return
+    }
+
+    this.initEvents()
+  }
+
+  static isSupported(): boolean {
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+  }
+
+  dispose(): void {
+    this.element.removeEventListener('pointerdown', this.start)
+    this.element.removeEventListener('pointerup', this.end)
+    this.element.removeEventListener('touchstart', this.start)
+    this.element.removeEventListener('touchmove', this.move)
+    this.element.removeEventListener('touchend', this.end)
+    this.element.classList.remove(CLASS_NAME_POINTER_EVENT)
+  }
+
+  private readonly start = (event: PointerEvent | TouchEvent): void => {
+    if (!this.supportPointerEvents) {
+      this.deltaX = (event as TouchEvent).touches[0].clientX
+      return
+    }
+
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX
+    }
+  }
+
+  private readonly move = (event: TouchEvent): void => {
+    this.deltaX =
+      event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.deltaX
+  }
+
+  private readonly end = (event: PointerEvent | TouchEvent): void => {
+    if (this.eventIsPointerPenTouch(event as PointerEvent)) {
+      this.deltaX = (event as PointerEvent).clientX - this.deltaX
+    }
+
+    this.handleSwipe()
+    this.callbacks.onEnd?.()
+  }
+
+  private handleSwipe(): void {
+    const absDeltaX = Math.abs(this.deltaX)
+
+    if (absDeltaX <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltaX / this.deltaX
+
+    this.deltaX = 0
+
+    if (!direction) {
+      return
+    }
+
+    if (direction > 0) {
+      this.callbacks.onRight?.()
+    } else {
+      this.callbacks.onLeft?.()
+    }
+  }
+
+  private eventIsPointerPenTouch(event: PointerEvent): boolean {
+    return (
+      this.supportPointerEvents &&
+      (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
+    )
+  }
+
+  private initEvents(): void {
+    if (this.supportPointerEvents) {
+      this.element.addEventListener('pointerdown', this.start)
+      this.element.addEventListener('pointerup', this.end)
+      this.element.classList.add(CLASS_NAME_POINTER_EVENT)
+    } else {
+      this.element.addEventListener('touchstart', this.start)
+      this.element.addEventListener('touchmove', this.move)
+      this.element.addEventListener('touchend', this.end)
+    }
+  }
+}
+
+export default Swipe

package/src/utils/transition.ts

@@ -7,7 +7,7 @@ const execute = (callback: () => void) => {
 export const executeAfterTransition = (
   callback: () => void,
   transitionElement: HTMLElement,
-  waitForTransition = true,
+  waitForTransition = true
 ) => {
   if (!waitForTransition) {
     execute(callback)
@@ -19,7 +19,7 @@ export const executeAfterTransition = (
 
   let called = false
 
-  const handler = ({ target }: { target: any }) => {
+  const handler = ({ target }: Event) => {
     if (target !== transitionElement) {
       return
     }

package/dist/cjs/components/collapse/__test__/CCollapse.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/collapse/__test__/CCollapse.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/components/accordion/__tests__/CAccordionCollapse.spec.ts

@@ -1,28 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { CAccordionCollapse as Component } from '../../../index'
-
-const ComponentName = 'CAccordionCollapse'
-
-const defaultWrapper = mount(Component, {
-  propsData: {
-    visible: true,
-  },
-  slots: {
-    default: 'Default slot',
-  },
-})
-
-describe(`Loads and display ${ComponentName} component`, () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('renders correctly', () => {
-    expect(defaultWrapper.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('accordion-collapse')).toBe(true)
-    expect(defaultWrapper.find('div').classes('collapse')).toBe(true)
-    expect(defaultWrapper.find('div').classes('show')).toBe(true)
-  })
-})

package/src/components/accordion/__tests__/__snapshots__/CAccordionCollapse.spec.ts.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loads and display CAccordionCollapse component renders correctly 1`] = `
-"<transition-stub class=\\"accordion-collapse\\">
-  <div class=\\"collapse show\\">Default slot</div>
-</transition-stub>"
-`;

package/src/components/collapse/__test__/CCollapse.spec.ts

@@ -1,44 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { CCollapse as Component } from '../../../index'
-
-const ComponentName = 'CCollapse'
-
-const defaultWrapper = mount(Component, {
-  propsData: {},
-  slots: {
-    default: 'Default slot',
-  },
-})
-
-const customWrapper = mount(Component, {
-  propsData: {
-    visible: true,
-  },
-  slots: {
-    default: 'Default slot',
-  },
-})
-
-describe(`Loads and display ${ComponentName} component`, () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('renders correctly', () => {
-    expect(defaultWrapper.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.find('div').classes('collapse')).toBe(true)
-  })
-})
-
-describe(`Loads and display ${ComponentName} component`, () => {
-  it('renders correctly', () => {
-    expect(customWrapper.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.find('div').classes('collapse')).toBe(true)
-    expect(customWrapper.find('div').classes('show')).toBe(true)
-  })
-})

package/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loads and display CCollapse component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
-  <div class="collapse">Default slot</div>
-</transition-stub>"
-`;
-
-exports[`Loads and display CCollapse component renders correctly 2`] = `
-"<transition-stub appear="false" persisted="false" css="false">
-  <div class="collapse show">Default slot</div>
-</transition-stub>"
-`;