feat(CDropdown, CPopover, CTooltip): allow to "teleport" a component into a DOM node that exists outside the DOM hierarchy of that component

Author: mrholek

packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h, PropType, ref, Teleport, watch } from 'vue'
+
+const getContainer = (
+  container?: HTMLElement | (() => HTMLElement) | string,
+): HTMLElement | string => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return 'body'
+}
+
+const CConditionalTeleport = defineComponent({
+  name: 'CConditionalTeleport',
+  props: {
+    /**
+     * An HTML element or function that returns a single element, with `document.body` as the default.
+     *
+     * @since v5.0.0-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
+    /**
+     * Render some children into a different part of the DOM
+     */
+    teleport: {
+      type: [Boolean],
+      default: true,
+    },
+  },
+  setup(props, { slots }) {
+    const container = ref<HTMLElement | string>(getContainer(props.container))
+
+    watch(
+      () => [props.container, props.teleport],
+      () => {
+        if (props.teleport) {
+          container.value = getContainer(props.container)
+        }
+      },
+    )
+
+    return () =>
+      h(
+        Teleport,
+        {
+          disabled: props.teleport === false,
+          to: container.value,
+        },
+        {
+          default: () => slots.default && slots.default(),
+        },
+      )
+  },
+})
+export { CConditionalTeleport }

packages/coreui-vue/src/components/conditional-teleport/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CConditionalTeleport } from './CConditionalTeleport'
+
+const CConditionalTeleportPlugin = {
+  install: (app: App): void => {
+    app.component(CConditionalTeleport.name, CConditionalTeleport)
+  },
+}
+
+export { CConditionalTeleport, CConditionalTeleportPlugin }

packages/coreui-vue/src/components/dropdown/CDropdown.ts

@@ -59,6 +59,17 @@ const CDropdown = defineComponent({
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
       },
     },
+    /**
+     * Appends the vue dropdown menu 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
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -103,6 +114,15 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Generates dropdown menu using Teleport.
+     *
+     * @since v5.0.0-beta.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      */
@@ -191,8 +211,10 @@ const CDropdown = defineComponent({
 
     provide('config', {
       alignment: props.alignment,
+      container: props.container,
       dark: props.dark,
       popper: props.popper,
+      teleport: props.teleport,
     })
 
     provide('variant', props.variant)

packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts

@@ -1,5 +1,6 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { getAlignmentClassNames } from './utils'
 
 const CDropdownMenu = defineComponent({
@@ -20,22 +21,36 @@ const CDropdownMenu = defineComponent({
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
     const visible = inject('visible') as Ref<boolean>
 
-    const { alignment, dark, popper } = config
+    const { alignment, container, dark, popper, teleport } = config
 
     return () =>
       h(
-        props.component,
+        CConditionalTeleport,
         {
-          class: ['dropdown-menu', { show: visible.value }, getAlignmentClassNames(alignment)],
-          ...((typeof alignment === 'object' || !popper) && {
-            'data-coreui-popper': 'static',
-          }),
-          ...(dark && { 'data-coreui-theme': 'dark' }),
-          ref: dropdownMenuRef,
+          container: container,
+          teleport: teleport,
+        },
+        {
+          default: () =>
+            h(
+              props.component,
+              {
+                class: [
+                  'dropdown-menu',
+                  { show: visible.value },
+                  getAlignmentClassNames(alignment),
+                ],
+                ...((typeof alignment === 'object' || !popper) && {
+                  'data-coreui-popper': 'static',
+                }),
+                ...(dark && { 'data-coreui-theme': 'dark' }),
+                ref: dropdownMenuRef,
+              },
+              props.component === 'ul'
+                ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
+                : slots.default && slots.default(),
+            ),
         },
-        props.component === 'ul'
-          ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
-          : slots.default && slots.default(),
       )
   },
 })

packages/coreui-vue/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-teleport'
 export * from './dropdown'
 export * from './footer'
 export * from './form'

packages/coreui-vue/src/components/popover/CPopover.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, 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'
@@ -18,6 +19,17 @@ const CPopover = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue popover 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
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -168,53 +180,57 @@ const CPopover = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'popover',
-                  'bs-popover-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    class: [
+                      'popover',
+                      'bs-popover-auto',
+                      {
+                        fade: props.animation,
+                      },
+                    ],
+                    ref: popoverRef,
+                    role: 'tooltip',
+                    ...attrs,
                   },
-                ],
-                ref: popoverRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'popover-arrow' }),
-                (props.title || slots.title) &&
-                  h(
-                    'div',
-                    { class: 'popover-header' },
-                    {
-                      default: () => (slots.title && slots.title()) || props.title,
-                    },
-                  ),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'popover-body' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'popover-arrow' }),
+                    (props.title || slots.title) &&
+                      h(
+                        'div',
+                        { class: 'popover-header' },
+                        {
+                          default: () => (slots.title && slots.title()) || props.title,
+                        },
+                      ),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'popover-body' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({