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

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgress component renders correctly 1`] = `"<div class="progress progress-thin progress-white" style="height: 100px;">Default slot</div>"`;
+exports[`Customize CProgress component renders correctly 1`] = `
+"<div class="progress progress-thin progress-white" style="height: 100px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;
 
-exports[`Loads and display CProgress component renders correctly 1`] = `"<div class="progress" style="">Default slot</div>"`;
+exports[`Loads and display CProgress component renders correctly 1`] = `
+"<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 75%;">Default slot</div>"`;
 
-exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>"`;

package/src/components/sidebar/CSidebar.ts

@@ -70,7 +70,10 @@ const CSidebar = defineComponent({
     /**
      * Toggle the visibility of sidebar component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: [
     /**
@@ -87,10 +90,14 @@ const CSidebar = defineComponent({
     'visible-change',
   ],
   setup(props, { attrs, slots, emit }) {
-    const mobile = ref()
-    const inViewport = ref()
     const sidebarRef = ref()
-    const visible = ref(props.visible)
+
+    const inViewport = ref()
+    const mobile = ref()
+    const visibleMobile = ref(false)
+    const visibleDesktop = ref(
+      props.visible === undefined ? (props.overlaid ? false : true) : props.visible,
+    )
 
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
@@ -99,11 +106,14 @@ const CSidebar = defineComponent({
 
     watch(
       () => props.visible,
-      () => (visible.value = props.visible),
+      () => props.visible !== undefined && handleVisibleChange(props.visible),
     )
 
     watch(mobile, () => {
-      if (mobile.value && visible.value) visible.value = false
+      if (mobile.value) {
+        console.log('mobile')
+        visibleMobile.value = false
+      }
     })
 
     onMounted(() => {
@@ -132,8 +142,17 @@ const CSidebar = defineComponent({
       })
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile.value) {
+        visibleMobile.value = visible
+        return
+      }
+
+      visibleDesktop.value = visible
+    }
+
     const handleHide = () => {
-      visible.value = false
+      handleVisibleChange(false)
       emit('visible-change', false)
     }
 
@@ -176,8 +195,9 @@ const CSidebar = defineComponent({
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: visible.value === true && mobile.value,
-              hide: visible.value === false && !mobile.value,
+              show:
+                (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,
           ],
@@ -188,7 +208,7 @@ const CSidebar = defineComponent({
       mobile.value &&
         h(CBackdrop, {
           class: 'sidebar-backdrop',
-          visible: props.visible,
+          visible: visibleMobile.value,
           onClick: () => handleHide(),
         }),
     ]

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable">Default slot</div>"`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable show">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar hide">Default slot</div>"`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar">Default slot</div>"`;

package/src/components/smart-table/CSmartTable.ts

@@ -13,6 +13,7 @@ import { CSmartTableHead } from './CSmartTableHead'
 
 import { isObjectInArray } from '../../utils'
 
+import { ITEM_INTERNAL_KEYS } from './consts'
 import {
   filterColumns,
   filterTable,
@@ -21,7 +22,6 @@ import {
   isSortable,
   sortItems,
 } from './utils'
-
 import type {
   Column,
   ColumnFilter,
@@ -35,8 +35,6 @@ import type {
   TableFilter,
 } from './types'
 
-export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']
-
 const CSmartTable = defineComponent({
   name: 'CSmartTable',
   props: {

package/src/components/smart-table/CSmartTableBody.ts

@@ -5,7 +5,7 @@ import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
 import { isObjectInArray } from '../../utils'
 
-import { ITEM_INTERNAL_KEYS } from './CSmartTable'
+import { ITEM_INTERNAL_KEYS } from './consts'
 import {
   getClickedColumnName,
   getColumnName,

package/src/components/smart-table/consts.ts

@@ -0,0 +1 @@
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow text-warning spinner-grow-sm" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
+exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow spinner-grow-sm text-warning" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
 
-exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border text-undefined" role="status"><span class="visually-hidden">Loading...</span></div>"`;
+exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>"`;

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__/__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

@@ -9,6 +9,7 @@ import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the tooltip.
@@ -22,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.0
+     * @since v5.0.0-rc.0
      */
     container: {
-      type: [HTMLElement, () => HTMLElement, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**
@@ -194,16 +193,17 @@ const CTooltip = defineComponent({
                 h(
                   'div',
                   {
+                    ...attrs,
                     class: [
                       'tooltip',
                       'bs-tooltip-auto',
                       {
                         fade: props.animation,
                       },
+                      attrs.class,
                     ],
                     ref: tooltipRef,
                     role: 'tooltip',
-                    ...attrs,
                   },
                   [
                     h('div', { class: 'tooltip-arrow' }),

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

@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core'
-import { isRTL } from '../utils'
+import isRTL from './isRTL'
 
 const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
   switch (placement) {