@coreui/vue-pro 4.8.0-next.1 → 4.8.1

package/src/components/toast/CToast.ts

@@ -1,8 +1,6 @@
-import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, onMounted, provide, ref, Transition } from 'vue'
 
-import { executeAfterTransition } from './../../utils/transition'
-
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CToast = defineComponent({
   name: 'CToast',
@@ -13,7 +11,6 @@ const CToast = defineComponent({
     autohide: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -27,7 +24,6 @@ const CToast = defineComponent({
     delay: {
       type: Number,
       default: 5000,
-      required: false,
     },
     /**
      * Optionally add a close button to component and allow it to self dismiss.
@@ -35,32 +31,19 @@ const CToast = defineComponent({
     dismissible: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * index of the component.
      */
-    index: {
-      type: Number,
-      default: undefined,
-      required: false,
-    },
+    index: Number,
     /**
      * Title node for your component.
      */
-    title: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    title: String,
     /**
      * Toggle the visibility of component.
      */
-    visible: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
+    visible: Boolean,
   },
   emits: [
     /**
@@ -73,51 +56,23 @@ const CToast = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const visible = ref(props.visible)
-    let timeout = 0
-
-    const updateVisible = (v: boolean) => {
-      visible.value = v
-    }
-    provide('updateVisible', updateVisible)
-
-    const handleBeforeEnter = (el: RendererElement) => {
-      el.classList.add('showing')
-    }
-
-    const handleEnter = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      el.classList.add('show')
-      setTimeout(() => {
-        el.classList.remove('showing')
-      }, 1)
-
-      if (props.index) {
-        emit('show', props.index)
-      } else {
-        emit('show')
-      }
-    }
+    const timeout = ref(0)
+    const visible = ref()
 
-    const handleLeave = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      el.classList.add('showing')
+    const updateVisible = (_visible: boolean) => {
+      visible.value = _visible
     }
 
-    const handleAfterLeave = (el: RendererElement) => {
-      el.classList.remove('show')
-      el.classList.add('hide')
-      if (props.index) {
-        emit('close', props.index)
-      } else {
-        emit('close')
-      }
-    }
+    provide('updateVisible', updateVisible)
 
     onMounted(() => {
+      if (props.visible) {
+        visible.value = props.visible
+      }
+      
       if (props.autohide) {
-        clearTimeout(timeout)
-        timeout = window.setTimeout(() => {
+        clearTimeout(timeout.value)
+        timeout.value = window.setTimeout(() => {
           visible.value = false
           emit('close')
         }, props.delay)
@@ -129,29 +84,39 @@ const CToast = defineComponent({
         Transition,
         {
           appear: true,
-          onBeforeEnter: (el) => handleBeforeEnter(el),
-          onEnter: (el, done) => handleEnter(el, done),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          enterFromClass: '',
+          enterActiveClass: 'show showing',
+          enterToClass: 'show',
+          leaveFromClass: 'show',
+          leaveActiveClass: 'show showing',
+          leaveToClass: 'show',
+          onAfterEnter: (el) => {
+            el.classList.add('show')
+            props.index ? emit('show', props.index) : emit('show')
+          },
+          onAfterLeave: () => {
+            props.index ? emit('close', props.index) : emit('close')
+          },
+        },
+        {
+          default: () =>
+            visible.value &&
+            h(
+              'div',
+              {
+                class: [
+                  'toast fade',
+                  {
+                    [`bg-${props.color}`]: props.color,
+                  },
+                ],
+                'aria-live': 'assertive',
+                'aria-atomic': true,
+                role: 'alert',
+              },
+              slots.default && slots.default(),
+            ),
         },
-        () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'toast fade',
-                {
-                  [`bg-${props.color}`]: props.color,
-                },
-              ],
-              'aria-live': 'assertive',
-              'aria-atomic': true,
-              role: 'alert',
-              ref: 'toastRef',
-            },
-            slots.default && slots.default(),
-          ),
       )
   },
 })

package/src/components/toast/CToastClose.ts

@@ -7,11 +7,7 @@ const CToastClose = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    component: String,
     ...CCloseButton.props,
   },
   emits: [

package/src/components/toast/CToastHeader.ts

@@ -7,10 +7,7 @@ const CToastHeader = defineComponent({
     /**
      * Automatically add a close button to the header.
      */
-    closeButton: {
-      type: Boolean,
-      require: false,
-    },
+    closeButton: Boolean,
   },
   emits: [
     /**

package/src/components/toast/CToaster.ts

@@ -10,8 +10,6 @@ const CToaster = defineComponent({
      */
     placement: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return [
           'top-start',

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

@@ -4,7 +4,9 @@ import { CToast as Component } from '../../../index'
 const ComponentName = 'CToast'
 
 const defaultWrapper = mount(Component, {
-  propsData: {},
+  propsData: {
+    visible: true,
+  },
   slots: {
     default: 'Default slot',
   },

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

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CToast component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"toast fade bg-warning\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" role=\\"alert\\">Default slot</div>
+"<transition-stub enterfromclass="" enteractiveclass="show showing" entertoclass="show" leavefromclass="show" leaveactiveclass="show showing" leavetoclass="show" appear="true" persisted="false" css="true">
+  <div class="toast fade bg-warning" aria-live="assertive" aria-atomic="true" role="alert">Default slot</div>
 </transition-stub>"
 `;
 
 exports[`Loads and display CToast component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"toast fade\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" role=\\"alert\\">Default slot</div>
+"<transition-stub enterfromclass="" enteractiveclass="show showing" entertoclass="show" leavefromclass="show" leaveactiveclass="show showing" leavetoclass="show" appear="true" persisted="false" css="true">
+  <div class="toast fade" aria-live="assertive" aria-atomic="true" role="alert">Default slot</div>
 </transition-stub>"
 `;

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CToastBody component renders correctly 1`] = `"<div class=\\"toast-body\\">Default slot</div>"`;
+exports[`Loads and display CToastBody component renders correctly 1`] = `"<div class="toast-body">Default slot</div>"`;

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 btn-undefined" 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>"`;
+exports[`Loads and display CToastClose component renders correctly 1`] = `"<button type="button" class="btn btn-close" aria-label="Close"></button>"`;

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

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

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 p-3 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 p-3">Default slot</div>"`;

package/src/components/tooltip/CTooltip.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -9,18 +9,13 @@ const CTooltip = defineComponent({
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
-    content: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    content: String,
     /**
      * Offset of the tooltip relative to its target.
      */
     offset: {
       type: Array,
       default: () => [0, 0],
-      required: false,
     },
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
@@ -28,7 +23,6 @@ const CTooltip = defineComponent({
     placement: {
       type: String as PropType<Placement>,
       default: 'top',
-      required: false,
       validator: (value: string) => {
         return ['top', 'right', 'bottom', 'left'].includes(value)
       },
@@ -41,7 +35,6 @@ const CTooltip = defineComponent({
     trigger: {
       type: [String, Array] as PropType<string | string[]>,
       default: 'hover',
-      required: false,
       validator: (value: string | string[]) => {
         if (typeof value === 'string') {
           return ['click', 'focus', 'hover'].includes(value)

package/src/components/widgets/CWidgetStatsA.ts

@@ -5,26 +5,17 @@ import { CCard, CCardBody } from '../card'
 const CWidgetStatsA = defineComponent({
   name: 'CWidgetStatsA',
   props: {
-    color: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    color: String,
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsB.ts

@@ -1,9 +1,10 @@
 import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
-import { Color } from '../props'
-import { CCard, CCardBody } from './../card'
-import { CProgress } from '../progress/CProgress'
+import { CCard, CCardBody } from '../card'
+import { CProgress } from '../progress'
+
+import { Color } from '../../props'
 
 const CWidgetStatsB = defineComponent({
   name: 'CWidgetStatsB',
@@ -17,11 +18,7 @@ const CWidgetStatsB = defineComponent({
     /**
      * Colors have been inverted from their default dark shade.
      */
-    inverse: {
-      type: Boolean,
-      default: undefined,
-      require: false,
-    },
+    inverse: Boolean,
     progress: shape({
       /**
        * Sets the color context of the progress bar to one of CoreUI’s themed colors
@@ -40,26 +37,17 @@ const CWidgetStatsB = defineComponent({
     /**
      * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    text: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    text: String,
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   setup(props, { slots }) {

package/src/components/widgets/CWidgetStatsC.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
-import { Color } from '../props'
-import { CCard, CCardBody } from './../card'
+import { Color } from '../../props'
+import { CCard, CCardBody } from '../card'
 import { CProgress } from '../progress/CProgress'
 
 const CWidgetStatsC = defineComponent({
@@ -17,11 +17,7 @@ const CWidgetStatsC = defineComponent({
     /**
      * Colors have been inverted from their default dark shade.
      */
-    inverse: {
-      type: Boolean,
-      default: undefined,
-      require: false,
-    },
+    inverse: Boolean,
     progress: shape({
       /**
        * Sets the color context of the progress bar to one of CoreUI’s themed colors
@@ -40,18 +36,13 @@ const CWidgetStatsC = defineComponent({
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsD.ts

@@ -1,8 +1,9 @@
 import { defineComponent, h, PropType } from 'vue'
 
-import { Color } from '../props'
-import { CCard, CCardBody, CCardHeader } from './../card/'
-import { CCol } from './../grid/'
+import { CCard, CCardBody, CCardHeader } from '../card/'
+import { CCol } from '../grid/'
+
+import { Color } from '../../props'
 
 type Value = {
   title?: string
@@ -24,7 +25,6 @@ const CWidgetStatsD = defineComponent({
     values: {
       type: Array as PropType<Value[]>,
       default: () => [],
-      require: false,
     },
   },
   /**

package/src/components/widgets/CWidgetStatsE.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { CCard, CCardBody } from './../card/'
+import { CCard, CCardBody } from '../card/'
 
 const CWidgetStatsE = defineComponent({
   name: 'CWidgetStatsE',
@@ -8,18 +8,13 @@ const CWidgetStatsE = defineComponent({
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsF.ts

@@ -1,7 +1,8 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
-import { CCard, CCardBody, CCardFooter } from './../card/'
+import { CCard, CCardBody, CCardFooter } from '../card/'
+
+import { Color } from '../../props'
 
 const CWidgetStatsF = defineComponent({
   name: 'CWidgetStatsF',
@@ -22,26 +23,17 @@ const CWidgetStatsF = defineComponent({
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    text: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    text: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

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

@@ -1,10 +1,10 @@
 // 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-body pb-0 d-flex justify-content-between align-items-start\\">
+"<div class="card bg-warning text-high-emphasis-inverse">
+  <div class="card-body pb-0 d-flex justify-content-between align-items-start">
     <div>
-      <div class=\\"fs-4 fw-semibold\\">75</div>
+      <div class="fs-4 fw-semibold">75</div>
       <div>title</div>
     </div>action
   </div>chartDefault slot

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

@@ -1,13 +1,13 @@
 // 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-body\\">
-    <div class=\\"fs-4 fw-semibold\\">75</div>
+"<div class="card bg-warning text-high-emphasis-inverse">
+  <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;">
+      <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>
 </div>"
 `;

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

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 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=\\"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="card bg-warning text-white">
+  <div class="card-body">
+    <div class="text-end mb-4 text-medium-emphasis-inverse">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>
   </div>
 </div>"

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

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsD component renders correctly 1`] = `
-"<div class=\\"card\\">
-  <div class=\\"card-header position-relative d-flex justify-content-center align-items-center bg-warning\\">iconchart</div>
-  <div class=\\"card-body row text-center\\">
+"<div class="card">
+  <div class="card-header position-relative d-flex justify-content-center align-items-center bg-warning">iconchart</div>
+  <div class="card-body row text-center">
     <!---->
-    <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">
+      <div class="col fs-5 fw-semibold">bb</div>
+      <div class="col text-uppercase text-medium-emphasis 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="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>
   </div>
 </div>"