@coreui/vue-pro 5.0.0-rc.0 → 5.0.0-rc.1

package/src/components/toast/CToastClose.ts

@@ -7,7 +7,7 @@ const CToastClose = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: String,
+    as: String,
     ...CCloseButton.props,
   },
   emits: [
@@ -24,9 +24,9 @@ const CToastClose = defineComponent({
       updateVisible(false)
     }
     return () =>
-      props.component
+      props.as
         ? h(
-            props.component,
+            props.as,
             {
               onClick: () => {
                 handleClose()

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

@@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: CButton,
+    as: CButton,
   },
   slots: {
     default: 'Default slot',

package/src/components/tooltip/CTooltip.ts

@@ -1,11 +1,11 @@
-import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getUID } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-rc.0
+     * @since v5.0.0-rc.1
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -113,6 +113,7 @@ const CTooltip = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const tooltipRef = ref()
+    const uID = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
 
@@ -143,6 +144,10 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    onMounted(() => {
+      uID.value = getUID('tooltip')
+    })
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -202,6 +207,7 @@ const CTooltip = defineComponent({
                       },
                       attrs.class,
                     ],
+                    id: uID.value,
                     ref: tooltipRef,
                     role: 'tooltip',
                   },
@@ -222,6 +228,7 @@ const CTooltip = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
+          id: visible.value ? uID.value : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -94,7 +94,7 @@ const CVirtualScroller = defineComponent({
                   }),
                 },
                 ref: (node) => {
-                  if (node && (node as HTMLElement).offsetHeight) {
+                  if (itemHeight.value === 0 && node && (node as HTMLElement).offsetHeight) {
                     itemHeight.value =
                       (node as HTMLElement).offsetHeight +
                       Number.parseFloat(getComputedStyle(node as HTMLElement).marginTop) +

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

@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
@@ -14,8 +16,13 @@ const createPopoverElement = (id: string, header: string, content: string): HTML
   return popover
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addPopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(popover)
   createPopper(el, popover, popperOptions)
   setTimeout(() => {
@@ -23,21 +30,26 @@ const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removePopoverElement = (popover: HTMLDivElement) => {
+const removePopoverElement = (el: HTMLElement, popover: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   popover.classList.remove('show')
   setTimeout(() => {
     popover.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const togglePopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const togglePopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(popover.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removePopoverElement(popover)
+    removePopoverElement(el, popover)
     return
   }
-  addPopoverElement(popover, el, popperOptions)
+  addPopoverElement(el, popover, popperOptions, uID)
 }
 
 export default {
@@ -65,30 +77,30 @@ export default {
       ],
     }
 
-    const popoverUID = getUID('popover')
-    binding.arg = popoverUID
-    const popover = createPopoverElement(popoverUID, header, content)
+    const uID = getUID('popover')
+    binding.arg = uID
+    const popover = createPopoverElement(uID, header, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        togglePopoverElement(popover, el, popperOptions)
+        togglePopoverElement(el, popover, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
   },

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

@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
@@ -13,8 +15,13 @@ const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   return tooltip
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(tooltip)
   createPopper(el, tooltip, popperOptions)
   setTimeout(() => {
@@ -22,21 +29,26 @@ const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removeTooltipElement = (tooltip: HTMLDivElement) => {
+const removeTooltipElement = (el: HTMLElement, tooltip: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   tooltip.classList.remove('show')
   setTimeout(() => {
     tooltip.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const toggleTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(tooltip.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removeTooltipElement(tooltip)
+    removeTooltipElement(el, tooltip)
     return
   }
-  addTooltipElement(tooltip, el, popperOptions)
+  addTooltipElement(el, tooltip, popperOptions, uID)
 }
 
 export default {
@@ -62,30 +74,30 @@ export default {
       ],
     }
 
-    const tooltipUID = getUID('tooltip')
-    binding.arg = tooltipUID
-    const tooltip = createTooltipElement(tooltipUID, content)
+    const uID = getUID('tooltip')
+    binding.arg = uID
+    const tooltip = createTooltipElement(uID, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        toggleTooltipElement(tooltip, el, popperOptions)
+        toggleTooltipElement(el, tooltip, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
   },

package/dist/cjs/components/form/CFormControl.d.ts

@@ -1,190 +0,0 @@
-declare const CFormControlProps: {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-};
-declare const CFormControl: import("vue").DefineComponent<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}>>, {
-    disabled: boolean;
-    component: string;
-    readonly: boolean;
-    plainText: boolean;
-}, {}>;
-export { CFormControl, CFormControlProps };

package/dist/esm/components/form/CFormControl.d.ts

@@ -1,190 +0,0 @@
-declare const CFormControlProps: {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-};
-declare const CFormControl: import("vue").DefineComponent<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}>>, {
-    disabled: boolean;
-    component: string;
-    readonly: boolean;
-    plainText: boolean;
-}, {}>;
-export { CFormControl, CFormControlProps };