@coreui/vue-pro 5.0.0-beta.1 → 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/CToaster.ts

@@ -31,7 +31,7 @@ const CToaster = defineComponent({
         'div',
         {
           class: [
-            'toaster toast-container p-3',
+            'toaster toast-container',
             {
               'position-fixed': props.placement,
               'top-0': props.placement && props.placement.includes('top'),

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/toast/__tests__/__snapshots__/CToaster.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3 position-fixed top-0 end-0">Default slot</div>"`;
+exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container position-fixed top-0 end-0">Default slot</div>"`;
 
-exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3">Default slot</div>"`;
+exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container">Default slot</div>"`;

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,12 +23,10 @@ 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-beta.1
+     * @since v5.0.0-rc.1
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**
@@ -115,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()
 
@@ -145,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)
@@ -204,6 +207,7 @@ const CTooltip = defineComponent({
                       },
                       attrs.class,
                     ],
+                    id: uID.value,
                     ref: tooltipRef,
                     role: 'tooltip',
                   },
@@ -224,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/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsA component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body pb-0 d-flex justify-content-between align-items-start">
     <div>
       <div class="fs-4 fw-semibold">75</div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap

@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsB component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body">
     <div class="fs-4 fw-semibold">75</div>
     <div>title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-    </div><small class="text-medium-emphasis-inverse">text</small>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
+    </div><small class="text-white text-opacity-75">text</small>
   </div>
 </div>"
 `;

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap

@@ -3,11 +3,13 @@
 exports[`Loads and display CWidgetStatsC component renders correctly 1`] = `
 "<div class="card bg-warning text-white">
   <div class="card-body">
-    <div class="text-end mb-4 text-medium-emphasis-inverse">icon</div>
+    <div class="text-end mb-4 text-white text-opacity-75">icon</div>
     <div class="fs-4 fw-semibold">75</div>
-    <div class="text-uppercase fw-semibold small text-medium-emphasis-inverse">title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="text-uppercase fw-semibold small text-white text-opacity-75">title</div>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap

@@ -7,12 +7,12 @@ exports[`Loads and display CWidgetStatsD component renders correctly 1`] = `
     <!---->
     <div class="col">
       <div class="col fs-5 fw-semibold">bb</div>
-      <div class="col text-uppercase text-medium-emphasis small">aa</div>
+      <div class="col text-uppercase text-body-secondary small">aa</div>
     </div>
     <div class="vr"></div>
     <div class="col">
       <div class="col fs-5 fw-semibold">dd</div>
-      <div class="col text-uppercase text-medium-emphasis small">cc</div>
+      <div class="col text-uppercase text-body-secondary small">cc</div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`Loads and display CWidgetStatsF component renders correctly 1`] = `
     <div class="me-3 text-white bg-warning p-3">default</div>
     <div>
       <div class="fs-6 fw-semibold text-warning">75</div>
-      <div class="text-medium-emphasis text-uppercase fw-semibold small">title</div>
+      <div class="text-body-secondary text-uppercase fw-semibold small">title</div>
     </div>
   </div>
   <div class="card-footer">footer</div>

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/src/props.ts

@@ -65,14 +65,21 @@ export const TextColor = {
       'info',
       'dark',
       'light',
+      'primary-emphasis',
+      'secondary-emphasis',
+      'success-emphasis',
+      'danger-emphasis',
+      'warning-emphasis',
+      'info-emphasis',
+      'light-emphasis',
+      'body',
+      'body-emphasis',
+      'body-secondary',
+      'body-tertiary',
+      'black',
+      'black-50',
       'white',
-      'muted',
-      'high-emphasis',
-      'medium-emphasis',
-      'disabled',
-      'high-emphasis-inverse',
-      'medium-emphasis-inverse',
-      'disabled-inverse',
+      'white-50',
     ].includes(value)
   },
 }

package/src/shims-vue.d.ts

@@ -1,12 +1,5 @@
-/*
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-*/
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

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 };