@empathyco/x-components 6.0.0-alpha.157 → 6.0.0-alpha.158
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/docs/API-reference/api/x-components.baseteleport.md +3 -1
- package/docs/API-reference/components/common/x-components.base-teleport.md +6 -5
- package/js/components/base-teleport.vue.js.map +1 -1
- package/js/components/base-teleport.vue2.js +18 -2
- package/js/components/base-teleport.vue2.js.map +1 -1
- package/package.json +3 -3
- package/report/x-components.api.json +41 -5
- package/report/x-components.api.md +3 -1
- package/types/components/base-teleport.vue.d.ts +5 -1
- package/types/components/base-teleport.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 6.0.0-alpha.158 (2025-10-01)
|
|
7
|
+
|
|
8
|
+
* feat(base-teleport): support dynamic host styles and improve type safety (#1839) ([0713104](https://github.com/empathyco/x/commit/0713104)), closes [#1839](https://github.com/empathyco/x/issues/1839)
|
|
9
|
+
* chore(deps): update dependency @badeball/cypress-cucumber-preprocessor to v23 (#1885) ([5af25a4](https://github.com/empathyco/x/commit/5af25a4)), closes [#1885](https://github.com/empathyco/x/issues/1885)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## 6.0.0-alpha.157 (2025-10-01)
|
|
7
16
|
|
|
8
17
|
* fix: selected tag being removed (#1894) ([287cb48](https://github.com/empathyco/x/commit/287cb48)), closes [#1894](https://github.com/empathyco/x/issues/1894)
|
|
@@ -20,8 +20,9 @@ _default: import("vue").DefineComponent<{
|
|
|
20
20
|
type: BooleanConstructor;
|
|
21
21
|
default: boolean;
|
|
22
22
|
};
|
|
23
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
23
24
|
}, {
|
|
24
|
-
teleportHost: import("vue").Ref<
|
|
25
|
+
teleportHost: import("vue").Ref<HTMLElement | undefined>;
|
|
25
26
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
26
27
|
target: {
|
|
27
28
|
type: PropType<string | Element>;
|
|
@@ -35,6 +36,7 @@ _default: import("vue").DefineComponent<{
|
|
|
35
36
|
type: BooleanConstructor;
|
|
36
37
|
default: boolean;
|
|
37
38
|
};
|
|
39
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
38
40
|
}>>, {
|
|
39
41
|
position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
|
|
40
42
|
disabled: boolean;
|
|
@@ -8,11 +8,12 @@ title: BaseTeleport
|
|
|
8
8
|
|
|
9
9
|
## Props
|
|
10
10
|
|
|
11
|
-
| Name
|
|
12
|
-
|
|
|
13
|
-
| <code>target</code>
|
|
14
|
-
| <code>position</code>
|
|
15
|
-
| <code>disabled</code>
|
|
11
|
+
| Name | Description | Type | Default |
|
|
12
|
+
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------ |
|
|
13
|
+
| <code>target</code> | The element or css selector to which the component will be teleported. | <code>string \| Element</code> | <code></code> |
|
|
14
|
+
| <code>position</code> | The position relative to the target<br />- `beforebegin`: Before the target element.<br />- `afterbegin`: Inside the target element, before its first child.<br />- `beforeend`: Inside the target element, after its last child.<br />- `afterend`: After the target element.<br />- `onlychild`: Adds it as child and hides all other children of the target element. | <code>string</code> | <code>'onlychild'</code> |
|
|
15
|
+
| <code>disabled</code> | If disabled, the slot content will not be teleported | <code>boolean</code> | <code>false</code> |
|
|
16
|
+
| <code>hostStyle</code> | Styles for the teleport (content container) | <code>string \| CSSStyleDeclaration</code> | <code></code> |
|
|
16
17
|
|
|
17
18
|
## Slots
|
|
18
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n if (typeof document === 'undefined') {\n return { teleportHost: ref<
|
|
1
|
+
{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n /** Styles for the teleport (content container) */\n hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n },\n setup(props) {\n if (typeof document === 'undefined') {\n return { teleportHost: ref<HTMLElement>() }\n }\n\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<HTMLElement>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<HTMLElement>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /* Update the host inline styles when it changes */\n watchEffect(() => {\n if (teleportHost.value && props.hostStyle) {\n if (typeof props.hostStyle === 'string') {\n teleportHost.value.style.cssText = props.hostStyle\n } else {\n Object.assign(teleportHost.value.style, props.hostStyle)\n }\n }\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n let element: string | Element | null = props.target\n if (typeof element === 'string') {\n element = document.querySelector(element)\n }\n if (element instanceof HTMLElement && element.isConnected) {\n targetAddedObserver.disconnect()\n targetElement.value = element\n while (element.parentElement) {\n element = element.parentElement\n targetRemovedObserver.observe(element, { childList: true })\n }\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (targetElement.value && !targetElement.value.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n const css = document.createElement('style')\n css.textContent =\n ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n document.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\">\n <div>This content will be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n <div>Teleported content at the beginning.</div>\n </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n <div>This content will not be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":["_openBlock","_createBlock","_Teleport","_renderSlot","_createCommentVNode"],"mappings":";;;;;AACkB,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,EAAA,EAAhBC,WAEW,CAAAC,QAAA,EAAA;AAAA,IAHb,GAAA,EAAA,CAAA;AAAA,IACiC,EAAA,EAAI,kBAAa,UAAc,IAAA,IAAA,CAAA,YAAA;AAAA,IAAe,QAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;IAC3EC,UAAa,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAFjB,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
|
|
@@ -25,6 +25,8 @@ var _sfc_main = defineComponent({
|
|
|
25
25
|
type: Boolean,
|
|
26
26
|
default: false,
|
|
27
27
|
},
|
|
28
|
+
/** Styles for the teleport (content container) */
|
|
29
|
+
hostStyle: Object,
|
|
28
30
|
},
|
|
29
31
|
setup(props) {
|
|
30
32
|
if (typeof document === 'undefined') {
|
|
@@ -84,10 +86,24 @@ var _sfc_main = defineComponent({
|
|
|
84
86
|
const position = props.position === 'onlychild' ? 'beforeend' : props.position;
|
|
85
87
|
targetElement.value.insertAdjacentElement(position, teleportHost.value);
|
|
86
88
|
});
|
|
89
|
+
/* Update the host inline styles when it changes */
|
|
90
|
+
watchEffect(() => {
|
|
91
|
+
if (teleportHost.value && props.hostStyle) {
|
|
92
|
+
if (typeof props.hostStyle === 'string') {
|
|
93
|
+
teleportHost.value.style.cssText = props.hostStyle;
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
Object.assign(teleportHost.value.style, props.hostStyle);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
87
100
|
/** Checks if the target element exists in the DOM and updates the observers */
|
|
88
101
|
function targetAdded() {
|
|
89
|
-
let element =
|
|
90
|
-
if (element
|
|
102
|
+
let element = props.target;
|
|
103
|
+
if (typeof element === 'string') {
|
|
104
|
+
element = document.querySelector(element);
|
|
105
|
+
}
|
|
106
|
+
if (element instanceof HTMLElement && element.isConnected) {
|
|
91
107
|
targetAddedObserver.disconnect();
|
|
92
108
|
targetElement.value = element;
|
|
93
109
|
while (element.parentElement) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n if (typeof document === 'undefined') {\n return { teleportHost: ref<Element>() }\n }\n\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<Element>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<Element>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n let element =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (element?.isConnected) {\n targetAddedObserver.disconnect()\n targetElement.value = element\n while (element.parentElement) {\n element = element.parentElement\n targetRemovedObserver.observe(element, { childList: true })\n }\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (targetElement.value && !targetElement.value.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n const css = document.createElement('style')\n css.textContent =\n ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n document.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\">\n <div>This content will be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n <div>Teleported content at the beginning.</div>\n </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n <div>This content will not be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n /** Styles for the teleport (content container) */\n hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n },\n setup(props) {\n if (typeof document === 'undefined') {\n return { teleportHost: ref<HTMLElement>() }\n }\n\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<HTMLElement>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<HTMLElement>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /* Update the host inline styles when it changes */\n watchEffect(() => {\n if (teleportHost.value && props.hostStyle) {\n if (typeof props.hostStyle === 'string') {\n teleportHost.value.style.cssText = props.hostStyle\n } else {\n Object.assign(teleportHost.value.style, props.hostStyle)\n }\n }\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n let element: string | Element | null = props.target\n if (typeof element === 'string') {\n element = document.querySelector(element)\n }\n if (element instanceof HTMLElement && element.isConnected) {\n targetAddedObserver.disconnect()\n targetElement.value = element\n while (element.parentElement) {\n element = element.parentElement\n targetRemovedObserver.observe(element, { childList: true })\n }\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (targetElement.value && !targetElement.value.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n const css = document.createElement('style')\n css.textContent =\n ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n document.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\">\n <div>This content will be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n <div>Teleported content at the beginning.</div>\n </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n <div>This content will not be teleported.</div>\n </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.158",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|
|
97
97
|
"@babel/preset-env": "7.28.0",
|
|
98
|
-
"@badeball/cypress-cucumber-preprocessor": "
|
|
98
|
+
"@badeball/cypress-cucumber-preprocessor": "23.2.0",
|
|
99
99
|
"@bahmutov/cypress-esbuild-preprocessor": "2.2.5",
|
|
100
100
|
"@cucumber/messages": "28.0.0",
|
|
101
101
|
"@empathyco/x-tailwindcss": "^2.0.0-alpha.16",
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
"access": "public",
|
|
143
143
|
"directory": "dist"
|
|
144
144
|
},
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "14f470b5f13bfa43f1cb0bb4e3822e7304ed8e41"
|
|
146
146
|
}
|
|
@@ -10795,7 +10795,25 @@
|
|
|
10795
10795
|
},
|
|
10796
10796
|
{
|
|
10797
10797
|
"kind": "Content",
|
|
10798
|
-
"text": ";\n default: boolean;\n };\n
|
|
10798
|
+
"text": ";\n default: boolean;\n };\n hostStyle: "
|
|
10799
|
+
},
|
|
10800
|
+
{
|
|
10801
|
+
"kind": "Reference",
|
|
10802
|
+
"text": "PropType",
|
|
10803
|
+
"canonicalReference": "@vue/runtime-core!PropType:type"
|
|
10804
|
+
},
|
|
10805
|
+
{
|
|
10806
|
+
"kind": "Content",
|
|
10807
|
+
"text": "<string | "
|
|
10808
|
+
},
|
|
10809
|
+
{
|
|
10810
|
+
"kind": "Reference",
|
|
10811
|
+
"text": "CSSStyleDeclaration",
|
|
10812
|
+
"canonicalReference": "!CSSStyleDeclaration:interface"
|
|
10813
|
+
},
|
|
10814
|
+
{
|
|
10815
|
+
"kind": "Content",
|
|
10816
|
+
"text": ">;\n}, {\n teleportHost: import(\"vue\")."
|
|
10799
10817
|
},
|
|
10800
10818
|
{
|
|
10801
10819
|
"kind": "Reference",
|
|
@@ -10808,8 +10826,8 @@
|
|
|
10808
10826
|
},
|
|
10809
10827
|
{
|
|
10810
10828
|
"kind": "Reference",
|
|
10811
|
-
"text": "
|
|
10812
|
-
"canonicalReference": "!
|
|
10829
|
+
"text": "HTMLElement",
|
|
10830
|
+
"canonicalReference": "!HTMLElement:interface"
|
|
10813
10831
|
},
|
|
10814
10832
|
{
|
|
10815
10833
|
"kind": "Content",
|
|
@@ -10894,7 +10912,25 @@
|
|
|
10894
10912
|
},
|
|
10895
10913
|
{
|
|
10896
10914
|
"kind": "Content",
|
|
10897
|
-
"text": ";\n default: boolean;\n };\n
|
|
10915
|
+
"text": ";\n default: boolean;\n };\n hostStyle: "
|
|
10916
|
+
},
|
|
10917
|
+
{
|
|
10918
|
+
"kind": "Reference",
|
|
10919
|
+
"text": "PropType",
|
|
10920
|
+
"canonicalReference": "@vue/runtime-core!PropType:type"
|
|
10921
|
+
},
|
|
10922
|
+
{
|
|
10923
|
+
"kind": "Content",
|
|
10924
|
+
"text": "<string | "
|
|
10925
|
+
},
|
|
10926
|
+
{
|
|
10927
|
+
"kind": "Reference",
|
|
10928
|
+
"text": "CSSStyleDeclaration",
|
|
10929
|
+
"canonicalReference": "!CSSStyleDeclaration:interface"
|
|
10930
|
+
},
|
|
10931
|
+
{
|
|
10932
|
+
"kind": "Content",
|
|
10933
|
+
"text": ">;\n}>>, {\n position: \"beforebegin\" | \"afterbegin\" | \"beforeend\" | \"afterend\" | \"onlychild\";\n disabled: boolean;\n}, {}>"
|
|
10898
10934
|
}
|
|
10899
10935
|
],
|
|
10900
10936
|
"fileUrlPath": "dist/types/components/base-teleport.vue.d.ts",
|
|
@@ -10903,7 +10939,7 @@
|
|
|
10903
10939
|
"name": "BaseTeleport",
|
|
10904
10940
|
"variableTypeTokenRange": {
|
|
10905
10941
|
"startIndex": 1,
|
|
10906
|
-
"endIndex":
|
|
10942
|
+
"endIndex": 42
|
|
10907
10943
|
}
|
|
10908
10944
|
},
|
|
10909
10945
|
{
|
|
@@ -1579,8 +1579,9 @@ disabled: {
|
|
|
1579
1579
|
type: BooleanConstructor;
|
|
1580
1580
|
default: boolean;
|
|
1581
1581
|
};
|
|
1582
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
1582
1583
|
}, {
|
|
1583
|
-
teleportHost: Ref<
|
|
1584
|
+
teleportHost: Ref<HTMLElement | undefined>;
|
|
1584
1585
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
1585
1586
|
target: {
|
|
1586
1587
|
type: PropType<string | Element>;
|
|
@@ -1594,6 +1595,7 @@ disabled: {
|
|
|
1594
1595
|
type: BooleanConstructor;
|
|
1595
1596
|
default: boolean;
|
|
1596
1597
|
};
|
|
1598
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
1597
1599
|
}>>, {
|
|
1598
1600
|
position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
|
|
1599
1601
|
disabled: boolean;
|
|
@@ -22,8 +22,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
22
22
|
type: BooleanConstructor;
|
|
23
23
|
default: boolean;
|
|
24
24
|
};
|
|
25
|
+
/** Styles for the teleport (content container) */
|
|
26
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
25
27
|
}, {
|
|
26
|
-
teleportHost: import("vue").Ref<
|
|
28
|
+
teleportHost: import("vue").Ref<HTMLElement | undefined>;
|
|
27
29
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
28
30
|
/** The element or css selector to which the component will be teleported. */
|
|
29
31
|
target: {
|
|
@@ -47,6 +49,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
47
49
|
type: BooleanConstructor;
|
|
48
50
|
default: boolean;
|
|
49
51
|
};
|
|
52
|
+
/** Styles for the teleport (content container) */
|
|
53
|
+
hostStyle: PropType<string | CSSStyleDeclaration>;
|
|
50
54
|
}>>, {
|
|
51
55
|
position: "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "onlychild";
|
|
52
56
|
disabled: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D
|
|
1
|
+
{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;IAK3D,kDAAkD;eAC7B,QAAQ,CAAC,MAAM,GAAG,mBAAmB,CAAC;;;;IAzB3D,6EAA6E;;cAEjD,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;;;IAGtD;;;;;;;OAOG;;cAEe,QAAQ,CACtB,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CACtE;;;IAGH,2DAA2D;;;;;IAK3D,kDAAkD;eAC7B,QAAQ,CAAC,MAAM,GAAG,mBAAmB,CAAC;;;;;AA5B/D,wBAuJE"}
|