feat(CPopover, CTooltip): add the animation property to enable the control of the component's fade effect

mrholek · mrholek · commit ecbd65ea2652 · 2023-07-01T20:53:21.000+02:00
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -8,6 +8,15 @@ import { getRTLPlacement } from '../../utils'
 const CPopover = defineComponent({
   name: 'CPopover',
   props: {
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @since 4.9.0-beta.2
+     */
+    animation: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -163,7 +172,13 @@ const CPopover = defineComponent({
             h(
               'div',
               {
-                class: 'popover fade bs-popover-auto',
+                class: [
+                  'popover',
+                  'bs-popover-auto',
+                  {
+                    fade: props.animation,
+                  },
+                ],
                 ref: popoverRef,
                 role: 'tooltip',
                 ...attrs,
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -8,6 +8,15 @@ import { getRTLPlacement } from '../../utils'
 const CTooltip = defineComponent({
   name: 'CTooltip',
   props: {
+    /**
+     * Apply a CSS fade transition to the tooltip.
+     *
+     * @since 4.9.0-beta.2
+     */
+    animation: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -159,7 +168,13 @@ const CTooltip = defineComponent({
             h(
               'div',
               {
-                class: 'tooltip fade bs-tooltip-auto',
+                class: [
+                  'tooltip',
+                  'bs-tooltip-auto',
+                  {
+                    fade: props.animation,
+                  },
+                ],
                 ref: tooltipRef,
                 role: 'tooltip',
                 ...attrs,
