-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
that is performant and simple to use.
- The teleport root element is inserted to an application's
document body during KDS initialization
- Removes the need for manual insert
- Ensures we never attach teleported elements, such as tooltips,
to document.body itself, which is said to cause severe performance
problems (https://css-tricks.com/dont-attach-tooltips-to-document-body/)
- Adds new `KTeleport` component
- Wrapper around vue2-teleport with restricted API that only allows
teleporting to the KDS teleport root element.
- Removes Teleport in favour of KTeleport in KModal
- Adds appendToRoot prop to KTooltip
- In support of Studio migration to KDS where in a few instances,
teleport is needed for tooltips to display correctly
- Contains smaller refactor of Popper.vue to allow the tooltip
be attached to an element different from document.body- Loading branch information
Showing
12 changed files
with
180 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <template> | ||
|
|
||
| <DocsPageTemplate apiDocs> | ||
| <DocsPageSection title="Overview" anchor="#overview"> | ||
| <p>Wrapping a component in <code>KTeleport</code> will teleport it to the teleport root element that is inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />.</p> | ||
| </DocsPageSection> | ||
|
|
||
| <DocsPageSection title="Usage" anchor="#usage"> | ||
| <p>First, check whether you need <code>KTeleport</code>. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the <code>appendToRoot</code> prop.</p> | ||
|
|
||
| <p>If you need to use <code>KTeleport</code>, simply wrap your component in it:</p> | ||
|
|
||
| <DocsShowCode language="html"> | ||
| <KTeleport> | ||
| <YourComponent /> | ||
| </KTeleport> | ||
| </DocsShowCode> | ||
| </DocsPageSection> | ||
|
|
||
| <DocsPageSection title="Related" anchor="#related"> | ||
| <ul> | ||
| <li> | ||
| <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches the teleport root element to an application's document body | ||
| </li> | ||
| </ul> | ||
| </DocsPageSection> | ||
| </DocsPageTemplate> | ||
|
|
||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
|
|
||
| <Teleport :to="teleportRootElSelector"> | ||
| <!-- @slot Content to be teleported --> | ||
| <slot></slot> | ||
| </Teleport> | ||
|
|
||
| </template> | ||
|
|
||
|
|
||
| <script> | ||
| import Teleport from 'vue2-teleport'; | ||
| import _useTeleportRootEl from '../composables/_useTeleportRootEl'; | ||
| /** | ||
| * Wrapping a component in KTeleport will teleport it to | ||
| * the teleport root element #k-teleport that is inserted | ||
| * to an application's document body automatically during | ||
| * the KDS installation process (see KThemePlugin.js). | ||
| */ | ||
| export default { | ||
| name: 'KTeleport', | ||
| components: { | ||
| Teleport, | ||
| }, | ||
| setup() { | ||
| const { teleportRootElSelector } = _useTeleportRootEl(); | ||
| return { teleportRootElSelector }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
lib/composables/_useTeleportRootEl/__tests__/index.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| describe('_useTeleportRootEl', () => { | ||
| // this is taken care of by KThemePlugin.js that is already registered | ||
| // in the global jest setup | ||
| it(`document body contains k-teleport root element upon the KDS plugin initialization`, () => { | ||
| expect(` | ||
| <div id="k-teleport"> | ||
| </div> | ||
| `).toBeInDom(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| const TELEPORT_ROOT_EL_ID = 'k-teleport'; | ||
|
|
||
| /** | ||
| * A private composable that takes care of everything | ||
| * related to the teleport root element that is inserted | ||
| * to an application's document body during the KDS | ||
| * initialization (see KThemePlugin.js) | ||
| */ | ||
| export default function _useTeleportRootEl() { | ||
| const teleportRootElSelector = `#${TELEPORT_ROOT_EL_ID}`; | ||
|
|
||
| /** | ||
| * Inserts the teleport root element to an application's | ||
| * document body and saves the element to window for later use. | ||
| * Should be called only once, typically during app | ||
| * initialization. | ||
| */ | ||
| function mountTeleportRootEl() { | ||
| const teleportRootEl = document.getElementById(TELEPORT_ROOT_EL_ID); | ||
|
|
||
| // Already mounted, so don't mount again, | ||
| // just make sure elements are available in window | ||
| if (teleportRootEl) { | ||
| window.teleportRootEl = teleportRootEl; | ||
| return; | ||
| } | ||
|
|
||
| const newTeleportRootEl = document.createElement('div'); | ||
| newTeleportRootEl.id = TELEPORT_ROOT_EL_ID; | ||
|
|
||
| document.body.insertBefore(newTeleportRootEl, document.body.firstChild); | ||
|
|
||
| // Save for later use so that we don't need to query | ||
| // every time we call the 'getTeleportRootEl' | ||
| // (frequent operation due to the usage from | ||
| // KTooltip and other components). | ||
| window.teleportRootEl = newTeleportRootEl; | ||
| } | ||
|
|
||
| /** | ||
| * @returns {HTMLElement} The teleport root element | ||
| */ | ||
| function getTeleportRootEl() { | ||
| // do not query DOM for performance reasons | ||
| const teleportRootEl = window.teleportRootEl; | ||
| // unlikely to happen, but just in case | ||
| if (!teleportRootEl) { | ||
| console.error('[KDS] The teleport root element is missing. KDS initialization failed?'); | ||
| return; | ||
| } | ||
| return teleportRootEl; | ||
| } | ||
|
|
||
| return { | ||
| mountTeleportRootEl, | ||
| getTeleportRootEl, | ||
| teleportRootElSelector, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters