@empathyco/x-components 6.0.0-alpha.84 → 6.0.0-alpha.86
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 +17 -0
- package/design-system/deprecated-full-theme.css +26 -26
- package/js/components/base-teleport.vue.js.map +1 -1
- package/js/components/base-teleport.vue2.js +11 -5
- package/js/components/base-teleport.vue2.js.map +1 -1
- package/package.json +3 -3
- package/types/components/base-teleport.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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.86](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.85...@empathyco/x-components@6.0.0-alpha.86) (2025-05-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **base-teleport:** support SSR ensuring DOM existence ([5ad6f28](https://github.com/empathyco/x/commit/5ad6f28c46fea6e6e665796cf7ddb722285746ce))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [6.0.0-alpha.85](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.84...@empathyco/x-components@6.0.0-alpha.85) (2025-05-19)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @empathyco/x-components
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [6.0.0-alpha.84](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.83...@empathyco/x-components@6.0.0-alpha.84) (2025-05-15)
|
|
7
24
|
|
|
8
25
|
|
|
@@ -5449,6 +5449,10 @@
|
|
|
5449
5449
|
--x-number-font-weight-base-regular
|
|
5450
5450
|
);
|
|
5451
5451
|
}
|
|
5452
|
+
:root {
|
|
5453
|
+
--x-modal-overlay-color: rgb(0, 0, 0);
|
|
5454
|
+
--x-modal-overlay-opacity: 0.7;
|
|
5455
|
+
}
|
|
5452
5456
|
:root {
|
|
5453
5457
|
--x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
|
|
5454
5458
|
--x-color-text-option-list-button-bottom-selected-hover: var(
|
|
@@ -5584,10 +5588,6 @@
|
|
|
5584
5588
|
--x-modal-overlay-color: rgb(0, 0, 0);
|
|
5585
5589
|
--x-modal-overlay-opacity: 0.7;
|
|
5586
5590
|
}
|
|
5587
|
-
:root {
|
|
5588
|
-
--x-modal-overlay-color: rgb(0, 0, 0);
|
|
5589
|
-
--x-modal-overlay-opacity: 0.7;
|
|
5590
|
-
}
|
|
5591
5591
|
|
|
5592
5592
|
.x-modal__overlay {
|
|
5593
5593
|
background-color: var(--x-modal-overlay-color) !important;
|
|
@@ -6785,15 +6785,6 @@
|
|
|
6785
6785
|
--x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
|
|
6786
6786
|
--x-size-border-width-left-input-group-line: 0;
|
|
6787
6787
|
}
|
|
6788
|
-
:root {
|
|
6789
|
-
--x-size-padding-left-input-group-line: 0;
|
|
6790
|
-
--x-size-padding-right-input-group-line: 0;
|
|
6791
|
-
--x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
|
|
6792
|
-
--x-size-border-width-top-input-group-line: 0;
|
|
6793
|
-
--x-size-border-width-right-input-group-line: 0;
|
|
6794
|
-
--x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
|
|
6795
|
-
--x-size-border-width-left-input-group-line: 0;
|
|
6796
|
-
}
|
|
6797
6788
|
|
|
6798
6789
|
.x-input-group--line .x-input-group,
|
|
6799
6790
|
.x-input-group--line.x-input-group {
|
|
@@ -6832,6 +6823,15 @@
|
|
|
6832
6823
|
margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
|
|
6833
6824
|
margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
|
|
6834
6825
|
}
|
|
6826
|
+
:root {
|
|
6827
|
+
--x-size-padding-left-input-group-line: 0;
|
|
6828
|
+
--x-size-padding-right-input-group-line: 0;
|
|
6829
|
+
--x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
|
|
6830
|
+
--x-size-border-width-top-input-group-line: 0;
|
|
6831
|
+
--x-size-border-width-right-input-group-line: 0;
|
|
6832
|
+
--x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
|
|
6833
|
+
--x-size-border-width-left-input-group-line: 0;
|
|
6834
|
+
}
|
|
6835
6835
|
:root {
|
|
6836
6836
|
--x-color-background-input-group-default: var(--x-color-background-input-default);
|
|
6837
6837
|
--x-color-border-input-group-default: var(--x-color-border-input-default);
|
|
@@ -8088,13 +8088,13 @@
|
|
|
8088
8088
|
:root {
|
|
8089
8089
|
--x-size-width-dropdown-l: 202px;
|
|
8090
8090
|
}
|
|
8091
|
-
:root {
|
|
8092
|
-
--x-size-width-dropdown-l: 202px;
|
|
8093
|
-
}
|
|
8094
8091
|
|
|
8095
8092
|
.x-dropdown.x-dropdown--l {
|
|
8096
8093
|
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
8097
8094
|
}
|
|
8095
|
+
:root {
|
|
8096
|
+
--x-size-width-dropdown-l: 202px;
|
|
8097
|
+
}
|
|
8098
8098
|
:root {
|
|
8099
8099
|
--x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
|
|
8100
8100
|
--x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
|
|
@@ -8794,16 +8794,6 @@
|
|
|
8794
8794
|
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8795
8795
|
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8796
8796
|
}
|
|
8797
|
-
:root {
|
|
8798
|
-
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
8799
|
-
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
8800
|
-
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
8801
|
-
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
8802
|
-
--x-size-border-width-badge-default: 0;
|
|
8803
|
-
--x-size-width-badge-default: 1.5em;
|
|
8804
|
-
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8805
|
-
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8806
|
-
}
|
|
8807
8797
|
|
|
8808
8798
|
[dir="ltr"] .x-badge {
|
|
8809
8799
|
right: calc(var(--x-size-width-badge-default) / 4);
|
|
@@ -8843,6 +8833,16 @@
|
|
|
8843
8833
|
.x-badge-container {
|
|
8844
8834
|
position: relative;
|
|
8845
8835
|
}
|
|
8836
|
+
:root {
|
|
8837
|
+
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
8838
|
+
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
8839
|
+
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
8840
|
+
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
8841
|
+
--x-size-border-width-badge-default: 0;
|
|
8842
|
+
--x-size-width-badge-default: 1.5em;
|
|
8843
|
+
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
8844
|
+
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
8845
|
+
}
|
|
8846
8846
|
:root {
|
|
8847
8847
|
--x-size-base-01: 2px;
|
|
8848
8848
|
--x-size-base-02: 4px;
|
|
@@ -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 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 */\
|
|
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<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"],"names":["_openBlock","_Teleport","teleportHost","_renderSlot","_createCommentVNode"],"mappings":";;;;qBACE,IAEW,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAHb,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,gBACkDC,QAAcC,EAAAA;AAAAA,IAAe,GAAA,EAAA,CAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC3E,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AAFjB,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent,
|
|
1
|
+
import { defineComponent, ref, getCurrentInstance, onUnmounted, onBeforeUnmount, watch, watchEffect, onMounted } from 'vue';
|
|
2
2
|
|
|
3
3
|
var _sfc_main = defineComponent({
|
|
4
4
|
name: 'BaseTeleport',
|
|
@@ -27,6 +27,9 @@ var _sfc_main = defineComponent({
|
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
29
|
setup(props) {
|
|
30
|
+
if (typeof document === 'undefined') {
|
|
31
|
+
return { teleportHost: ref() };
|
|
32
|
+
}
|
|
30
33
|
const instance = getCurrentInstance();
|
|
31
34
|
/** Hook where the slot content will be teleported to. */
|
|
32
35
|
const teleportHost = ref();
|
|
@@ -117,10 +120,13 @@ var _sfc_main = defineComponent({
|
|
|
117
120
|
},
|
|
118
121
|
});
|
|
119
122
|
/** Teleport host styles should be injected outside our shadowRoots */
|
|
120
|
-
|
|
121
|
-
css
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
if (typeof document !== 'undefined') {
|
|
124
|
+
const css = document.createElement('style');
|
|
125
|
+
css.textContent =
|
|
126
|
+
':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }';
|
|
127
|
+
document.head?.appendChild(css) ||
|
|
128
|
+
document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css));
|
|
129
|
+
}
|
|
124
130
|
|
|
125
131
|
export { _sfc_main as default };
|
|
126
132
|
//# sourceMappingURL=base-teleport.vue2.js.map
|
|
@@ -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 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 */\
|
|
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"],"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.86",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
},
|
|
79
79
|
"dependencies": {
|
|
80
80
|
"@empathyco/x-adapter": "^8.1.0-alpha.3",
|
|
81
|
-
"@empathyco/x-adapter-platform": "^1.1.0-alpha.
|
|
81
|
+
"@empathyco/x-adapter-platform": "^1.1.0-alpha.16",
|
|
82
82
|
"@empathyco/x-bus": "^1.0.3-alpha.3",
|
|
83
83
|
"@empathyco/x-deep-merge": "^2.0.3-alpha.4",
|
|
84
84
|
"@empathyco/x-logger": "^1.2.0-alpha.11",
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
"access": "public",
|
|
143
143
|
"directory": "dist"
|
|
144
144
|
},
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "cc603b69a9d06f7a890d86c1b03a855d986b4d80"
|
|
146
146
|
}
|
|
@@ -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;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,
|
|
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;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAwIE"}
|