@coreui/vue-pro 5.18.0 → 5.19.0

package/src/components/table/CTableHead.ts

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

package/src/components/table/CTableHeaderCell.ts

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

package/src/components/table/CTableRow.ts

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

package/src/components/table/types.ts

@@ -14,6 +14,7 @@ export type FooterItem = {
 }
 
 export type Item = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: number | string | any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _props?: any

package/src/components/table/utils.ts

@@ -2,16 +2,16 @@ import type { Column, Item } from './types'
 
 export const pretifyName = (name: string) => {
   return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replaceAll(/[-_.]/g, ' ')
+    .replaceAll(/ +/g, ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
     .split(' ')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ')
 }
 
 export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
   columns

package/src/components/tabs/CTab.ts

@@ -44,7 +44,7 @@ const CTab = defineComponent({
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/tabs/CTabList.ts

@@ -23,7 +23,14 @@ const CTabList = defineComponent({
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return [
+          'enclosed',
+          'enclosed-pills',
+          'pills',
+          'tabs',
+          'underline',
+          'underline-border',
+        ].includes(value)
       },
     },
   },
@@ -42,9 +49,9 @@ const CTabList = defineComponent({
       ) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        // eslint-disable-next-line unicorn/prefer-spread
+
         const items: HTMLElement[] = Array.from(
-          tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+          tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
         )
 
         let nextActiveElement
@@ -56,7 +63,7 @@ const CTabList = defineComponent({
             items,
             target,
             event.key === 'ArrowDown' || event.key === 'ArrowRight',
-            true,
+            true
           )
         }
 
@@ -82,7 +89,7 @@ const CTabList = defineComponent({
           onKeydown: (event) => handleKeydown(event),
           ref: tabListRef,
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/tabs/CTabPane.ts

@@ -74,10 +74,10 @@ const CTabPane = defineComponent({
                 ],
                 ref: tabPaneRef,
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
-            [[vShow, props.visible]],
-          ),
+            [[vShow, props.visible]]
+          )
       )
   },
 })

package/src/components/tabs/CTabPanel.ts

@@ -62,7 +62,7 @@ const CTabPanel = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     watch(
@@ -72,7 +72,7 @@ const CTabPanel = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     const handleEnter = (el: RendererElement, done: () => void) => {
@@ -117,10 +117,10 @@ const CTabPanel = defineComponent({
                 tabindex: 0,
                 ref: tabPaneRef,
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
-            [[vShow, visible.value]],
-          ),
+            [[vShow, visible.value]]
+          )
       )
   },
 })

package/src/components/tabs/CTabs.ts

@@ -9,7 +9,7 @@ const CTabs = defineComponent({
     activeItemKey: {
       type: [Number, String],
       required: true,
-    }
+    },
   },
   emits: [
     /**
@@ -29,7 +29,7 @@ const CTabs = defineComponent({
       (value) => {
         activeItemKey.value = value
         emit('change', value)
-      },
+      }
     )
 
     provide('activeItemKey', activeItemKey)

package/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Customize CTabPane component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="true">
-  <div class="tab-pane fade active show">Default slot</div>
+  <div class="tab-pane active fade show">Default slot</div>
 </transition-stub>"
 `;
 

package/src/components/toast/CToast.ts

@@ -92,10 +92,18 @@ const CToast = defineComponent({
           leaveToClass: 'show',
           onAfterEnter: (el) => {
             el.classList.add('show')
-            props.index ? emit('show', props.index) : emit('show')
+            if (props.index) {
+              emit('show', props.index)
+            } else {
+              emit('show')
+            }
           },
           onAfterLeave: () => {
-            props.index ? emit('close', props.index) : emit('close')
+            if (props.index) {
+              emit('close', props.index)
+            } else {
+              emit('close')
+            }
           },
         },
         {
@@ -114,9 +122,9 @@ const CToast = defineComponent({
                 'aria-atomic': true,
                 role: 'alert',
               },
-              slots.default && slots.default(),
+              slots.default && slots.default()
             ),
-        },
+        }
       )
   },
 })

package/src/components/toast/CToastClose.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, inject, resolveComponent } from 'vue'
+import { Component, defineComponent, h, inject, PropType, resolveComponent } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CCloseButtonProps extends ComponentProps<typeof CCloseButton> {
-  as?: string
+  as?: string | Component
 }
 
 const CToastClose = defineComponent({
@@ -13,7 +13,7 @@ const CToastClose = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    as: String,
+    as: [String, Object] as PropType<string | Component>,
     ...CCloseButton.props,
   },
   emits: [
@@ -23,7 +23,6 @@ const CToastClose = defineComponent({
     'close',
   ],
   setup(props: CCloseButtonProps, { slots, emit }) {
-    // eslint-disable-next-line no-unused-vars
     const updateVisible = inject('updateVisible') as (visible: boolean) => void
     const handleClose = () => {
       emit('close')
@@ -32,13 +31,13 @@ const CToastClose = defineComponent({
     return () =>
       props.as
         ? h(
-            resolveComponent(props.as),
+            typeof props.as === 'string' ? resolveComponent(props.as) : props.as,
             {
               onClick: () => {
                 handleClose()
               },
             },
-            () => slots.default && slots.default(),
+            () => slots.default && slots.default()
           )
         : h(CCloseButton, {
             ...props,

package/src/components/toast/CToaster.ts

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

package/src/components/toast/__tests__/CToaster.spec.ts

@@ -30,7 +30,6 @@ describe(`Loads and display ${ComponentName} component`, () => {
     expect(defaultWrapper.text()).toContain('Default slot')
     expect(defaultWrapper.classes('toaster')).toBe(true)
     expect(defaultWrapper.classes('toast-container')).toBe(true)
-    expect(defaultWrapper.classes('p-3')).toBe(true)
   })
 })
 
@@ -42,7 +41,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.classes('toaster')).toBe(true)
     expect(customWrapper.classes('toast-container')).toBe(true)
-    expect(customWrapper.classes('p-3')).toBe(true)
     expect(customWrapper.classes('position-fixed')).toBe(true)
     expect(customWrapper.classes('top-0')).toBe(true)
     expect(customWrapper.classes('end-0')).toBe(true)

package/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToastClose component renders correctly 1`] = `"<button class="btn btn-undefined" type="button">Default slot</button>"`;
+exports[`Customize CToastClose component renders correctly 1`] = `"<button class="btn" type="button">Default slot</button>"`;
 
 exports[`Loads and display CToastClose component renders correctly 1`] = `"<button type="button" class="btn btn-close" aria-label="Close"></button>"`;

package/src/components/tooltip/CTooltip.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
-import type { Placement } from '@popperjs/core'
+import type { Options, Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
@@ -77,6 +77,19 @@ const CTooltip = defineComponent({
         return ['top', 'right', 'bottom', 'left'].includes(value)
       },
     },
+    /**
+     * A Popper.js configuration object, or a function that receives the default
+     * configuration and returns a modified one, used to customize the
+     * positioning of the tooltip.
+     *
+     * @since 5.10.0
+     */
+    popperConfig: {
+      type: [Object, Function] as PropType<
+        Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+      >,
+      default: undefined,
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      *
@@ -121,7 +134,7 @@ const CTooltip = defineComponent({
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 
-    const popperConfig = {
+    const defaultPopperConfig = {
       modifiers: [
         {
           name: 'arrow',
@@ -145,6 +158,13 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    const popperConfig = {
+      ...defaultPopperConfig,
+      ...(typeof props.popperConfig === 'function'
+        ? props.popperConfig(defaultPopperConfig)
+        : props.popperConfig),
+    }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -216,12 +236,12 @@ const CTooltip = defineComponent({
                         { class: 'tooltip-inner' },
                         {
                           default: () => (slots.content && slots.content()) || props.content,
-                        },
+                        }
                       ),
-                  ],
-                ),
+                  ]
+                )
             ),
-        },
+        }
       ),
       slots.toggler &&
         slots.toggler({

package/src/components/tooltip/__tests__/CTooltip.spec.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { CTooltip as Component } from '../../../index'
+
+const ComponentName = 'CTooltip'
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+
+  it('renders the toggler slot', () => {
+    const wrapper = mount(Component, {
+      slots: { toggler: () => h('button', 'Toggle') },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Toggle')
+  })
+
+  it('does not render the tooltip when hidden', () => {
+    mount(Component, {
+      props: { content: 'Hello' },
+      slots: { toggler: () => h('button', 'Toggle') },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.tooltip')).toBeNull()
+  })
+
+  it('renders the tooltip with content when visible', () => {
+    const wrapper = mount(Component, {
+      props: { content: 'Hello', visible: true },
+      slots: { toggler: () => h('button', 'Toggle') },
+      attachTo: document.body,
+    })
+
+    const tooltip = document.body.querySelector('.tooltip')
+    expect(tooltip).not.toBeNull()
+    expect(tooltip?.querySelector('.tooltip-inner')?.textContent).toBe('Hello')
+    expect(tooltip?.getAttribute('role')).toBe('tooltip')
+
+    wrapper.unmount()
+  })
+})

package/src/components/widgets/CWidgetStatsA.ts

@@ -49,7 +49,7 @@ const CWidgetStatsA = defineComponent({
                     { class: 'fs-4 fw-semibold' },
                     {
                       default: () => (slots.value && slots.value()) || props.value,
-                    },
+                    }
                   ),
                 (props.title || slots.title) &&
                   h(
@@ -57,21 +57,21 @@ const CWidgetStatsA = defineComponent({
                     {},
                     {
                       default: () => (slots.title && slots.title()) || props.title,
-                    },
+                    }
                   ),
               ]),
               /**
                * @slot Location for action component, ex. `<CDropdown>`.
                */
               slots.action && slots.action(),
-            ],
+            ]
           ),
           /**
            * @slot Location for chart component.
            */
           slots.chart && slots.chart(),
           slots.default && slots.default(),
-        ],
+        ]
       )
   },
 })

package/src/components/widgets/CWidgetStatsB.ts

@@ -77,7 +77,7 @@ const CWidgetStatsB = defineComponent({
                   },
                   {
                     default: () => (slots.value && slots.value()) || props.value,
-                  },
+                  }
                 ),
               (props.title || slots.title) &&
                 h(
@@ -85,7 +85,7 @@ const CWidgetStatsB = defineComponent({
                   {},
                   {
                     default: () => (slots.title && slots.title()) || props.title,
-                  },
+                  }
                 ),
               h(CProgress, {
                 class: 'my-2',
@@ -102,10 +102,10 @@ const CWidgetStatsB = defineComponent({
                   },
                   {
                     default: () => (slots.text && slots.text()) || props.text,
-                  },
+                  }
                 ),
-            ],
-          ),
+            ]
+          )
       )
   },
 })

package/src/components/widgets/CWidgetStatsC.ts

@@ -78,7 +78,7 @@ const CWidgetStatsC = defineComponent({
                       props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
-                  slots.icon && slots.icon(),
+                  slots.icon && slots.icon()
                 ),
               (props.value || slots.value) &&
                 h(
@@ -88,7 +88,7 @@ const CWidgetStatsC = defineComponent({
                   },
                   {
                     default: () => (slots.value && slots.value()) || props.value,
-                  },
+                  }
                 ),
               (props.title || slots.title) &&
                 h(
@@ -101,7 +101,7 @@ const CWidgetStatsC = defineComponent({
                   },
                   {
                     default: () => (slots.title && slots.title()) || props.title,
-                  },
+                  }
                 ),
               h(CProgress, {
                 class: 'my-2',
@@ -110,8 +110,8 @@ const CWidgetStatsC = defineComponent({
                 ...(props.progress && props.progress.value && { value: props.progress.value }),
                 white: props.inverse,
               }),
-            ],
-          ),
+            ]
+          )
       )
   },
 })

package/src/components/widgets/CWidgetStatsD.ts

@@ -54,7 +54,7 @@ const CWidgetStatsD = defineComponent({
                   },
                 ],
               },
-              () => [slots.icon && slots.icon(), slots.chart && slots.chart()],
+              () => [slots.icon && slots.icon(), slots.chart && slots.chart()]
             ),
             h(
               CCardBody,
@@ -75,16 +75,16 @@ const CWidgetStatsD = defineComponent({
                           h(
                             CCol,
                             { class: 'text-uppercase text-body-secondary small' },
-                            () => value.title,
+                            () => value.title
                           ),
                         ],
-                      },
+                      }
                     ),
                   ]),
-              },
+              }
             ),
           ],
-        },
+        }
       )
   },
 })

package/src/components/widgets/CWidgetStatsE.ts

@@ -39,7 +39,7 @@ const CWidgetStatsE = defineComponent({
                 },
                 {
                   default: () => (slots.title && slots.title()) || props.title,
-                },
+                }
               ),
             (props.value || slots.value) &&
               h(
@@ -49,12 +49,12 @@ const CWidgetStatsE = defineComponent({
                 },
                 {
                   default: () => (slots.value && slots.value()) || props.value,
-                },
+                }
               ),
             slots.chart && slots.chart(),
             slots.default && slots.default(),
-          ],
-        ),
+          ]
+        )
       )
   },
 })

package/src/components/widgets/CWidgetStatsF.ts

@@ -64,7 +64,7 @@ const CWidgetStatsF = defineComponent({
                       props.padding ? 'p-3' : 'p-4',
                     ],
                   },
-                  (slots.default && slots.default()) || (slots.icon && slots.icon()),
+                  (slots.default && slots.default()) || (slots.icon && slots.icon())
                 ),
                 h('div', {}, [
                   (props.value || slots.value) &&
@@ -75,7 +75,7 @@ const CWidgetStatsF = defineComponent({
                       },
                       {
                         default: () => (slots.value && slots.value()) || props.value,
-                      },
+                      }
                     ),
                   (props.title || slots.title) &&
                     h(
@@ -85,14 +85,14 @@ const CWidgetStatsF = defineComponent({
                       },
                       {
                         default: () => (slots.title && slots.title()) || props.title,
-                      },
+                      }
                     ),
                 ]),
-              ],
+              ]
             ),
             slots.footer && h(CCardFooter, {}, () => slots.footer && slots.footer()),
           ],
-        },
+        }
       )
   },
 })

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

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import { h, withDirectives } from 'vue'
+import vCPlaceholder from '../v-c-placeholder'
+
+const renderWithDirective = (value: Record<string, unknown>) =>
+  mount({
+    render: () => withDirectives(h('span'), [[vCPlaceholder, value]]),
+  })
+
+describe('v-c-placeholder directive', () => {
+  it('adds the base placeholder class', () => {
+    const wrapper = renderWithDirective({})
+    expect(wrapper.find('span').classes('placeholder')).toBe(true)
+  })
+
+  it('uses the animation variant when provided', () => {
+    const wrapper = renderWithDirective({ animation: 'glow' })
+    expect(wrapper.find('span').classes('placeholder-glow')).toBe(true)
+    expect(wrapper.find('span').classes('placeholder')).toBe(false)
+  })
+
+  it('adds responsive column classes from numeric breakpoints', () => {
+    const wrapper = renderWithDirective({ xs: 6, md: 4 })
+    const classes = wrapper.find('span').classes()
+    expect(classes).toContain('col-6')
+    expect(classes).toContain('col-md-4')
+  })
+
+  it('adds auto column classes from boolean breakpoints', () => {
+    const wrapper = renderWithDirective({ lg: true })
+    expect(wrapper.find('span').classes()).toContain('col-lg')
+  })
+})