refactor(COffcanvas): update backdrop class, update transition.

Author: mrholek

packages/coreui-vue/src/components/offcanvas/COffcanvas.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, ref, RendererElement, Transition, watch } from 'vue'
+import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
 import { CBackdrop } from '../backdrop'
+import { vVisible } from '../../directives/v-c-visible'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -139,25 +140,27 @@ const COffcanvas = defineComponent({
           onAfterLeave: (el) => handleAfterLeave(el),
         },
         () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'offcanvas',
-                {
-                  [`offcanvas-${props.placement}`]: props.placement,
-                },
-              ],
-              ref: offcanvasRef,
-              role: 'dialog',
-            },
-            slots.default && slots.default(),
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'offcanvas',
+                  {
+                    [`offcanvas-${props.placement}`]: props.placement,
+                  },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+              },
+              slots.default && slots.default(),
+            ),
+            [[vVisible, props.visible]],
           ),
       ),
       props.backdrop &&
         h(CBackdrop, {
-          class: 'modal-backdrop',
+          class: 'offcanvas-backdrop',
           visible: visible.value,
         }),
     ]

packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvas.spec.ts

@@ -47,6 +47,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.find('div').classes('offcanvas')).toBe(true)
     expect(customWrapper.find('div').classes('offcanvas-bottom')).toBe(true)
-    expect(customWrapper.find('.modal-backdrop').classes('modal-backdrop')).toBe(true)
+    expect(customWrapper.find('.offcanvas-backdrop').classes('offcanvas-backdrop')).toBe(true)
   })
 })

packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-bottom\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;
@@ -13,7 +13,7 @@ exports[`Loads and display COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-end\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;