@empathyco/x-components 6.0.0-alpha.79 → 6.0.0-alpha.80

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/design-system/deprecated-full-theme.css +282 -281
  3. package/js/components/base-teleport.vue.js.map +1 -1
  4. package/js/components/base-teleport.vue2.js +40 -5
  5. package/js/components/base-teleport.vue2.js.map +1 -1
  6. package/package.json +2 -2
  7. package/types/components/base-teleport.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.80](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.79...@empathyco/x-components@6.0.0-alpha.80) (2025-05-12)
7
+
8
+
9
+ ### Features
10
+
11
+ * **base-teleport:** make target prop reactive ([603aaaf](https://github.com/empathyco/x/commit/603aaafe2e3b462f4ecfe3e7ee9ef886ac0d42f4))
12
+ * **base-teleport:** use isConnected ([0a7cef4](https://github.com/empathyco/x/commit/0a7cef4b428c93f6d231d141eae86a022db366d8))
13
+ * implement target presence observable in BaseTeleport ([fa82b66](https://github.com/empathyco/x/commit/fa82b6645434d0e1cedc9f611d8f1856bc3cd1bc))
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * **base-teleport:** fix isolation check ([55b3e07](https://github.com/empathyco/x/commit/55b3e073bd642fbbe161f5235350fc4bf42defae))
19
+
20
+
21
+
6
22
  ## [6.0.0-alpha.79](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.78...@empathyco/x-components@6.0.0-alpha.79) (2025-05-08)
7
23
 
8
24
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,19 +1,4 @@
1
1
 
2
- .x-uppercase {
3
- text-transform: uppercase;
4
- }
5
-
6
- .x-lowercase {
7
- text-transform: lowercase;
8
- }
9
-
10
- .x-capitalize {
11
- text-transform: capitalize;
12
- }
13
-
14
- .x-normal-case {
15
- text-transform: none;
16
- }
17
2
  .x-underline {
18
3
  -webkit-text-decoration-line: underline;
19
4
  text-decoration-line: underline;
@@ -33,6 +18,21 @@
33
18
  -webkit-text-decoration-line: none;
34
19
  text-decoration-line: none;
35
20
  }
21
+ .x-uppercase {
22
+ text-transform: uppercase;
23
+ }
24
+
25
+ .x-lowercase {
26
+ text-transform: lowercase;
27
+ }
28
+
29
+ .x-capitalize {
30
+ text-transform: capitalize;
31
+ }
32
+
33
+ .x-normal-case {
34
+ text-transform: none;
35
+ }
36
36
  .x-static {
37
37
  position: static !important;
38
38
  }
@@ -955,6 +955,7 @@
955
955
  [dir="rtl"] .x-margin--left-20 {
956
956
  margin-right: var(--x-size-base-20) !important;
957
957
  }
958
+
958
959
  .x-line-height--none {
959
960
  line-height: 1 !important;
960
961
  }
@@ -1805,49 +1806,6 @@
1805
1806
  .x-border-width--left-10 {
1806
1807
  border-style: solid !important;
1807
1808
  }
1808
- .x-border-color--lead {
1809
- border-color: var(--x-color-base-lead) !important;
1810
- }
1811
-
1812
- .x-border-color--auxiliary {
1813
- border-color: var(--x-color-base-auxiliary) !important;
1814
- }
1815
-
1816
- .x-border-color--neutral-10 {
1817
- border-color: var(--x-color-base-neutral-10) !important;
1818
- }
1819
-
1820
- .x-border-color--neutral-35 {
1821
- border-color: var(--x-color-base-neutral-35) !important;
1822
- }
1823
-
1824
- .x-border-color--neutral-70 {
1825
- border-color: var(--x-color-base-neutral-70) !important;
1826
- }
1827
-
1828
- .x-border-color--neutral-95 {
1829
- border-color: var(--x-color-base-neutral-95) !important;
1830
- }
1831
-
1832
- .x-border-color--neutral-100 {
1833
- border-color: var(--x-color-base-neutral-100) !important;
1834
- }
1835
-
1836
- .x-border-color--accent {
1837
- border-color: var(--x-color-base-accent) !important;
1838
- }
1839
-
1840
- .x-border-color--enable {
1841
- border-color: var(--x-color-base-enable) !important;
1842
- }
1843
-
1844
- .x-border-color--disable {
1845
- border-color: var(--x-color-base-disable) !important;
1846
- }
1847
-
1848
- .x-border-color--transparent {
1849
- border-color: var(--x-color-base-transparent) !important;
1850
- }
1851
1809
  .x-border-radius--00 {
1852
1810
  border-radius: 0 !important;
1853
1811
  }
@@ -3356,6 +3314,49 @@
3356
3314
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3357
3315
  border-bottom-left-radius: var(--x-size-base-20) !important;
3358
3316
  }
3317
+ .x-border-color--lead {
3318
+ border-color: var(--x-color-base-lead) !important;
3319
+ }
3320
+
3321
+ .x-border-color--auxiliary {
3322
+ border-color: var(--x-color-base-auxiliary) !important;
3323
+ }
3324
+
3325
+ .x-border-color--neutral-10 {
3326
+ border-color: var(--x-color-base-neutral-10) !important;
3327
+ }
3328
+
3329
+ .x-border-color--neutral-35 {
3330
+ border-color: var(--x-color-base-neutral-35) !important;
3331
+ }
3332
+
3333
+ .x-border-color--neutral-70 {
3334
+ border-color: var(--x-color-base-neutral-70) !important;
3335
+ }
3336
+
3337
+ .x-border-color--neutral-95 {
3338
+ border-color: var(--x-color-base-neutral-95) !important;
3339
+ }
3340
+
3341
+ .x-border-color--neutral-100 {
3342
+ border-color: var(--x-color-base-neutral-100) !important;
3343
+ }
3344
+
3345
+ .x-border-color--accent {
3346
+ border-color: var(--x-color-base-accent) !important;
3347
+ }
3348
+
3349
+ .x-border-color--enable {
3350
+ border-color: var(--x-color-base-enable) !important;
3351
+ }
3352
+
3353
+ .x-border-color--disable {
3354
+ border-color: var(--x-color-base-disable) !important;
3355
+ }
3356
+
3357
+ .x-border-color--transparent {
3358
+ border-color: var(--x-color-base-transparent) !important;
3359
+ }
3359
3360
  .x-background--lead {
3360
3361
  background-color: var(--x-color-base-lead) !important;
3361
3362
  }
@@ -4204,66 +4205,6 @@
4204
4205
  --x-number-font-weight-suggestion-default-matching
4205
4206
  );
4206
4207
  }
4207
- :root {
4208
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4209
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4210
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4211
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4212
- }
4213
- .x-sliding-panel {
4214
- z-index: 0;
4215
- background-color: var(--x-color-background-sliding-panel);
4216
- }
4217
- .x-sliding-panel__button.x-button {
4218
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4219
- pointer-events: none;
4220
- }
4221
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4222
- pointer-events: all;
4223
- }
4224
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4225
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4226
- }
4227
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4228
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4229
- }
4230
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4231
- opacity: 0;
4232
- }
4233
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4234
- opacity: 1;
4235
- pointer-events: all;
4236
- }
4237
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4238
- opacity: 1;
4239
- pointer-events: all;
4240
- }
4241
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4242
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4243
- }
4244
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4245
- mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4246
- }
4247
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4248
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4249
- }
4250
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4251
- mask: none;
4252
- }
4253
- .x-sliding-panel__scroll > * {
4254
- flex: 0 0 auto;
4255
- }
4256
- .x-sliding-panel__scroll > .x-list {
4257
- --x-string-flow-list: row nowrap;
4258
- }
4259
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4260
- opacity: 1;
4261
- pointer-events: all;
4262
- }
4263
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4264
- opacity: 1;
4265
- pointer-events: all;
4266
- }
4267
4208
  :root {
4268
4209
  --x-string-align-items-suggestion-default: center;
4269
4210
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4486,6 +4427,66 @@
4486
4427
  --x-color-text-suggestion-default-matching-curated
4487
4428
  );
4488
4429
  }
4430
+ :root {
4431
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4432
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4433
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4434
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4435
+ }
4436
+ .x-sliding-panel {
4437
+ z-index: 0;
4438
+ background-color: var(--x-color-background-sliding-panel);
4439
+ }
4440
+ .x-sliding-panel__button.x-button {
4441
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4442
+ pointer-events: none;
4443
+ }
4444
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4445
+ pointer-events: all;
4446
+ }
4447
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4448
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4449
+ }
4450
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4451
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4452
+ }
4453
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4454
+ opacity: 0;
4455
+ }
4456
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4457
+ opacity: 1;
4458
+ pointer-events: all;
4459
+ }
4460
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4461
+ opacity: 1;
4462
+ pointer-events: all;
4463
+ }
4464
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4465
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4466
+ }
4467
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4468
+ mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4469
+ }
4470
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4471
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4472
+ }
4473
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4474
+ mask: none;
4475
+ }
4476
+ .x-sliding-panel__scroll > * {
4477
+ flex: 0 0 auto;
4478
+ }
4479
+ .x-sliding-panel__scroll > .x-list {
4480
+ --x-string-flow-list: row nowrap;
4481
+ }
4482
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4483
+ opacity: 1;
4484
+ pointer-events: all;
4485
+ }
4486
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4487
+ opacity: 1;
4488
+ pointer-events: all;
4489
+ }
4489
4490
  :root {
4490
4491
  --x-string-overflow-scroll: auto;
4491
4492
  --x-color-background-scroll-bar: transparent;
@@ -4493,14 +4494,6 @@
4493
4494
  --x-color-background-scroll-bar-hover: transparent;
4494
4495
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4495
4496
  }
4496
- /* @deprecated */
4497
- :root {
4498
- --x-size-padding-row-02: var(--x-size-base-02);
4499
- --x-size-padding-row-03: var(--x-size-base-03);
4500
- --x-size-padding-row-04: var(--x-size-base-04);
4501
- --x-size-padding-row-05: var(--x-size-base-05);
4502
- --x-size-padding-row-06: var(--x-size-base-06);
4503
- }
4504
4497
  :root {
4505
4498
  --x-string-overflow-scroll: auto;
4506
4499
  --x-color-background-scroll-bar: transparent;
@@ -4547,6 +4540,14 @@
4547
4540
  --x-size-padding-row-05: var(--x-size-base-05);
4548
4541
  --x-size-padding-row-06: var(--x-size-base-06);
4549
4542
  }
4543
+ /* @deprecated */
4544
+ :root {
4545
+ --x-size-padding-row-02: var(--x-size-base-02);
4546
+ --x-size-padding-row-03: var(--x-size-base-03);
4547
+ --x-size-padding-row-04: var(--x-size-base-04);
4548
+ --x-size-padding-row-05: var(--x-size-base-05);
4549
+ --x-size-padding-row-06: var(--x-size-base-06);
4550
+ }
4550
4551
 
4551
4552
  /* @deprecated */
4552
4553
  .x-row--padding-02 {
@@ -4964,9 +4965,6 @@
4964
4965
  --x-number-zoom-scale-picture: 1.1;
4965
4966
  --x-number-zoom-duration-picture: 0.3s;
4966
4967
  }
4967
- :root {
4968
- --x-number-aspect-ratio-picture: 1;
4969
- }
4970
4968
  :root {
4971
4969
  --x-number-zoom-scale-picture: 1.1;
4972
4970
  --x-number-zoom-duration-picture: 0.3s;
@@ -4981,6 +4979,9 @@
4981
4979
  :root {
4982
4980
  --x-number-aspect-ratio-picture: 1;
4983
4981
  }
4982
+ :root {
4983
+ --x-number-aspect-ratio-picture: 1;
4984
+ }
4984
4985
 
4985
4986
  .x-picture--fixed-ratio.x-picture {
4986
4987
  aspect-ratio: var(--x-number-aspect-ratio-picture);
@@ -5004,6 +5005,24 @@
5004
5005
  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
5005
5006
  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
5006
5007
  }
5008
+ :root {
5009
+ --x-size-border-radius-picture-default: 0;
5010
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
5011
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
5012
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
5013
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
5014
+ --x-color-background-picture-default: transparent;
5015
+ --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
5016
+ --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
5017
+ --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
5018
+ --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
5019
+ --x-object-fit-picture-default: contain;
5020
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
5021
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
5022
+ --x-mix-blend-mode-picture-default: normal;
5023
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
5024
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
5025
+ }
5007
5026
 
5008
5027
  .x-picture {
5009
5028
  display: block;
@@ -5046,24 +5065,6 @@
5046
5065
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5047
5066
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5048
5067
  }
5049
- :root {
5050
- --x-size-border-radius-picture-default: 0;
5051
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
5052
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
5053
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
5054
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
5055
- --x-color-background-picture-default: transparent;
5056
- --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
5057
- --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
5058
- --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
5059
- --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
5060
- --x-object-fit-picture-default: contain;
5061
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
5062
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
5063
- --x-mix-blend-mode-picture-default: normal;
5064
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
5065
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
5066
- }
5067
5068
  :root {
5068
5069
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5069
5070
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -6874,15 +6875,6 @@
6874
6875
  );
6875
6876
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6876
6877
  }
6877
- :root {
6878
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6879
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6880
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6881
- --x-size-border-radius-bottom-right-input-group-card: var(
6882
- --x-size-border-radius-input-group-card
6883
- );
6884
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
6885
- }
6886
6878
  :root {
6887
6879
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6888
6880
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7069,6 +7061,15 @@
7069
7061
  );
7070
7062
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7071
7063
  }
7064
+ :root {
7065
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7066
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7067
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7068
+ --x-size-border-radius-bottom-right-input-group-card: var(
7069
+ --x-size-border-radius-input-group-card
7070
+ );
7071
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7072
+ }
7072
7073
 
7073
7074
  .x-input-group--card.x-input-group,
7074
7075
  .x-input-group--card .x-input-group {
@@ -7179,114 +7180,6 @@
7179
7180
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7180
7181
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7181
7182
  }
7182
- :root {
7183
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7184
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7185
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7186
- --x-color-text-input-default: var(--x-color-text-default);
7187
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7188
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7189
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7190
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7191
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7192
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7193
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7194
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7195
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7196
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7197
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7198
- --x-size-height-input-default: var(--x-size-base-07);
7199
- --x-size-padding-right-input-default: var(--x-size-base-04);
7200
- --x-size-padding-left-input-default: var(--x-size-base-04);
7201
- --x-font-family-input-default: var(--x-font-family-text);
7202
- --x-size-font-input-default: var(--x-size-font-text);
7203
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7204
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7205
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7206
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7207
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7208
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7209
- }
7210
-
7211
- [dir="ltr"] .x-input {
7212
- padding-left: var(--x-size-padding-left-input-default);
7213
- }
7214
-
7215
- [dir="rtl"] .x-input {
7216
- padding-right: var(--x-size-padding-left-input-default);
7217
- }
7218
-
7219
- [dir="ltr"] .x-input {
7220
- padding-right: var(--x-size-padding-right-input-default);
7221
- }
7222
-
7223
- [dir="rtl"] .x-input {
7224
- padding-left: var(--x-size-padding-right-input-default);
7225
- }
7226
-
7227
- [dir="ltr"] .x-input {
7228
- border-right-width: var(--x-size-border-width-right-input-default);
7229
- }
7230
-
7231
- [dir="rtl"] .x-input {
7232
- border-left-width: var(--x-size-border-width-right-input-default);
7233
- }
7234
-
7235
- [dir="ltr"] .x-input {
7236
- border-left-width: var(--x-size-border-width-left-input-default);
7237
- }
7238
-
7239
- [dir="rtl"] .x-input {
7240
- border-right-width: var(--x-size-border-width-left-input-default);
7241
- }
7242
-
7243
- .x-input {
7244
- position: relative;
7245
- display: flex;
7246
- overflow: hidden;
7247
- box-sizing: border-box;
7248
- margin: 0;
7249
- min-width: 0;
7250
- height: var(--x-size-height-input-default);
7251
- padding-top: 0;
7252
- padding-bottom: 0;
7253
- background-color: var(--x-color-background-input-default);
7254
- border-color: var(--x-color-border-input-default);
7255
- color: var(--x-color-text-input-default);
7256
- border-top-width: var(--x-size-border-width-top-input-default);
7257
- border-bottom-width: var(--x-size-border-width-bottom-input-default);
7258
- border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
7259
- border-style: solid;
7260
- font-family: var(--x-font-family-input-default);
7261
- font-size: var(--x-size-font-input-default);
7262
- font-weight: var(--x-number-font-weight-input-default);
7263
- line-height: var(--x-size-line-height-input-default);
7264
- }
7265
- @media not all and (min-resolution: 0.001dpcm) {
7266
- .x-input {
7267
- -webkit-appearance: none;
7268
- }
7269
- }
7270
- .x-input:focus {
7271
- border-color: var(--x-color-border-input-default-focus);
7272
- }
7273
- .x-input > .x-input-placeholder {
7274
- position: absolute;
7275
- height: 100%;
7276
- }
7277
- .x-input > .x-input {
7278
- background: none;
7279
- border: none;
7280
- padding: 0;
7281
- flex: 1 1 auto;
7282
- }
7283
- .x-input > .x-input-placeholder, .x-input::placeholder {
7284
- color: var(--x-color-text-input-placeholder-default);
7285
- font-family: var(--x-font-family-input-placeholder-default);
7286
- font-size: var(--x-size-font-input-placeholder-default);
7287
- font-weight: var(--x-number-font-weight-input-placeholder-default);
7288
- line-height: var(--x-size-line-height-input-placeholder-default);
7289
- }
7290
7183
  :root {
7291
7184
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7292
7185
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7917,6 +7810,13 @@
7917
7810
  :root {
7918
7811
  --x-size-width-dropdown-xl: 282px;
7919
7812
  }
7813
+ :root {
7814
+ --x-size-width-dropdown-xl: 282px;
7815
+ }
7816
+
7817
+ .x-dropdown.x-dropdown--xl {
7818
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7819
+ }
7920
7820
  :root {
7921
7821
  --x-size-width-dropdown-s: 74px;
7922
7822
  }
@@ -7927,13 +7827,6 @@
7927
7827
  .x-dropdown.x-dropdown--s {
7928
7828
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7929
7829
  }
7930
- :root {
7931
- --x-size-width-dropdown-xl: 282px;
7932
- }
7933
-
7934
- .x-dropdown.x-dropdown--xl {
7935
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7936
- }
7937
7830
  :root {
7938
7831
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7939
7832
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7942,16 +7835,6 @@
7942
7835
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7943
7836
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7944
7837
  }
7945
- :root {
7946
- --x-size-width-dropdown-m: 130px;
7947
- }
7948
- :root {
7949
- --x-size-width-dropdown-m: 130px;
7950
- }
7951
-
7952
- .x-dropdown.x-dropdown--m {
7953
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7954
- }
7955
7838
  :root {
7956
7839
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7957
7840
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7997,6 +7880,16 @@
7997
7880
  --x-size-border-width-left-dropdown-list-pill
7998
7881
  );
7999
7882
  }
7883
+ :root {
7884
+ --x-size-width-dropdown-m: 130px;
7885
+ }
7886
+ :root {
7887
+ --x-size-width-dropdown-m: 130px;
7888
+ }
7889
+
7890
+ .x-dropdown.x-dropdown--m {
7891
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7892
+ }
8000
7893
  :root {
8001
7894
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8002
7895
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8884,3 +8777,111 @@
8884
8777
  --x-size-border-radius-base-pill: 99999px;
8885
8778
  --x-size-border-width-base: 1px;
8886
8779
  }
8780
+ :root {
8781
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
8782
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
8783
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
8784
+ --x-color-text-input-default: var(--x-color-text-default);
8785
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
8786
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
8787
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
8788
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
8789
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
8790
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
8791
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
8792
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
8793
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
8794
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
8795
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
8796
+ --x-size-height-input-default: var(--x-size-base-07);
8797
+ --x-size-padding-right-input-default: var(--x-size-base-04);
8798
+ --x-size-padding-left-input-default: var(--x-size-base-04);
8799
+ --x-font-family-input-default: var(--x-font-family-text);
8800
+ --x-size-font-input-default: var(--x-size-font-text);
8801
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
8802
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
8803
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
8804
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
8805
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
8806
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
8807
+ }
8808
+
8809
+ [dir="ltr"] .x-input {
8810
+ padding-left: var(--x-size-padding-left-input-default);
8811
+ }
8812
+
8813
+ [dir="rtl"] .x-input {
8814
+ padding-right: var(--x-size-padding-left-input-default);
8815
+ }
8816
+
8817
+ [dir="ltr"] .x-input {
8818
+ padding-right: var(--x-size-padding-right-input-default);
8819
+ }
8820
+
8821
+ [dir="rtl"] .x-input {
8822
+ padding-left: var(--x-size-padding-right-input-default);
8823
+ }
8824
+
8825
+ [dir="ltr"] .x-input {
8826
+ border-right-width: var(--x-size-border-width-right-input-default);
8827
+ }
8828
+
8829
+ [dir="rtl"] .x-input {
8830
+ border-left-width: var(--x-size-border-width-right-input-default);
8831
+ }
8832
+
8833
+ [dir="ltr"] .x-input {
8834
+ border-left-width: var(--x-size-border-width-left-input-default);
8835
+ }
8836
+
8837
+ [dir="rtl"] .x-input {
8838
+ border-right-width: var(--x-size-border-width-left-input-default);
8839
+ }
8840
+
8841
+ .x-input {
8842
+ position: relative;
8843
+ display: flex;
8844
+ overflow: hidden;
8845
+ box-sizing: border-box;
8846
+ margin: 0;
8847
+ min-width: 0;
8848
+ height: var(--x-size-height-input-default);
8849
+ padding-top: 0;
8850
+ padding-bottom: 0;
8851
+ background-color: var(--x-color-background-input-default);
8852
+ border-color: var(--x-color-border-input-default);
8853
+ color: var(--x-color-text-input-default);
8854
+ border-top-width: var(--x-size-border-width-top-input-default);
8855
+ border-bottom-width: var(--x-size-border-width-bottom-input-default);
8856
+ border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
8857
+ border-style: solid;
8858
+ font-family: var(--x-font-family-input-default);
8859
+ font-size: var(--x-size-font-input-default);
8860
+ font-weight: var(--x-number-font-weight-input-default);
8861
+ line-height: var(--x-size-line-height-input-default);
8862
+ }
8863
+ @media not all and (min-resolution: 0.001dpcm) {
8864
+ .x-input {
8865
+ -webkit-appearance: none;
8866
+ }
8867
+ }
8868
+ .x-input:focus {
8869
+ border-color: var(--x-color-border-input-default-focus);
8870
+ }
8871
+ .x-input > .x-input-placeholder {
8872
+ position: absolute;
8873
+ height: 100%;
8874
+ }
8875
+ .x-input > .x-input {
8876
+ background: none;
8877
+ border: none;
8878
+ padding: 0;
8879
+ flex: 1 1 auto;
8880
+ }
8881
+ .x-input > .x-input-placeholder, .x-input::placeholder {
8882
+ color: var(--x-color-text-input-placeholder-default);
8883
+ font-family: var(--x-font-family-input-placeholder-default);
8884
+ font-size: var(--x-size-font-input-placeholder-default);
8885
+ font-weight: var(--x-number-font-weight-input-placeholder-default);
8886
+ line-height: var(--x-size-line-height-input-placeholder-default);
8887
+ }
package/js/components/base-teleport.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, getCurrentInstance, onUnmounted, watchEffect } 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 teleportHost = document.createElement('div')\n const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot\n if (isIsolated) {\n teleportHost.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n onUnmounted(() => {\n ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n })\n }\n\n watchEffect(() => {\n if (props.disabled) {\n teleportHost.remove()\n return\n }\n teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n const targetElement =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (!targetElement) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.insertAdjacentElement(position, teleportHost)\n })\n\n return { teleportHost }\n },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n display: none;\n}\n</style>\n"],"names":["teleportHost","_openBlock","_createBlock","_Teleport"],"mappings":";;;;;AACiBA,SAAAA,WAAAA,CAAAA,IAAAA,EAAa,gBAAcA,MAAY,EAAA,KAAA,EAAA,QAAA,EAAA;AAAG,EAAA,OAAAC,SAAA,EAAQ,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC/D,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;;;;;;;"}
1
+ {"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :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 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 teleportHost = document.createElement('div')\n const targetElement = ref()\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onBeforeUnmount(() => {\n teleportHost.remove()\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n })\n\n const isIsolated =\n getCurrentInstance()?.appContext.app._container?.parentNode instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n onUnmounted(() => {\n ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n })\n }\n\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 watchEffect(() => {\n if (props.disabled) {\n teleportHost.remove()\n return\n }\n teleportHost.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)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n const target =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (target?.isConnected) {\n targetAddedObserver.disconnect()\n targetRemovedObserver.observe(target.parentElement!, { childList: true })\n targetElement.value = target\n }\n }\n\n /** Checks if the target was disconected from the DOM and updates the observers */\n function targetRemoved() {\n if (!targetElement.value?.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n return { teleportHost }\n },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n display: none;\n}\n</style>\n"],"names":["teleportHost","_openBlock","_createBlock","_Teleport"],"mappings":";;;;;AACiBA,SAAAA,WAAAA,CAAAA,IAAAA,EAAa,gBAAcA,MAAY,EAAA,KAAA,EAAA,QAAA,EAAA;AAAG,EAAA,OAAAC,SAAA,EAAQ,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC/D,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;;;;;;;"}
package/js/components/base-teleport.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, getCurrentInstance, onUnmounted, watchEffect } from 'vue';
1
+ import { defineComponent, ref, onBeforeUnmount, getCurrentInstance, onUnmounted, watch, watchEffect } from 'vue';
2
2
 
3
3
  var _sfc_main = defineComponent({
4
4
  name: 'BaseTeleport',
@@ -28,7 +28,15 @@ var _sfc_main = defineComponent({
28
28
  },
29
29
  setup(props) {
30
30
  const teleportHost = document.createElement('div');
31
- const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot;
31
+ const targetElement = ref();
32
+ const targetAddedObserver = new MutationObserver(targetAdded);
33
+ const targetRemovedObserver = new MutationObserver(targetRemoved);
34
+ onBeforeUnmount(() => {
35
+ teleportHost.remove();
36
+ targetAddedObserver.disconnect();
37
+ targetRemovedObserver.disconnect();
38
+ });
39
+ const isIsolated = getCurrentInstance()?.appContext.app._container?.parentNode instanceof ShadowRoot;
32
40
  if (isIsolated) {
33
41
  teleportHost.attachShadow({ mode: 'open' });
34
42
  window.xCSSInjector.addHost(teleportHost.shadowRoot);
@@ -36,20 +44,47 @@ var _sfc_main = defineComponent({
36
44
  window.xCSSInjector.removeHost(teleportHost.shadowRoot);
37
45
  });
38
46
  }
47
+ watch(() => props.target, newTarget => {
48
+ targetAddedObserver.disconnect();
49
+ targetRemovedObserver.disconnect();
50
+ const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget;
51
+ if (target?.isConnected) {
52
+ targetAdded();
53
+ }
54
+ else {
55
+ targetRemoved();
56
+ }
57
+ }, { immediate: true });
39
58
  watchEffect(() => {
40
59
  if (props.disabled) {
41
60
  teleportHost.remove();
42
61
  return;
43
62
  }
44
63
  teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`;
45
- const targetElement = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
46
- if (!targetElement) {
64
+ if (!targetElement.value) {
47
65
  console.warn(`BaseTeleport: Target element "${props.target}" not found.`);
48
66
  return;
49
67
  }
50
68
  const position = props.position === 'onlychild' ? 'beforeend' : props.position;
51
- targetElement.insertAdjacentElement(position, teleportHost);
69
+ targetElement.value.insertAdjacentElement(position, teleportHost);
52
70
  });
71
+ /** Checks if the target element exists in the DOM and updates the observers */
72
+ function targetAdded() {
73
+ const target = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
74
+ if (target?.isConnected) {
75
+ targetAddedObserver.disconnect();
76
+ targetRemovedObserver.observe(target.parentElement, { childList: true });
77
+ targetElement.value = target;
78
+ }
79
+ }
80
+ /** Checks if the target was disconected from the DOM and updates the observers */
81
+ function targetRemoved() {
82
+ if (!targetElement.value?.isConnected) {
83
+ targetRemovedObserver.disconnect();
84
+ targetAddedObserver.observe(document.body, { childList: true, subtree: true });
85
+ targetElement.value = undefined;
86
+ }
87
+ }
53
88
  return { teleportHost };
54
89
  },
55
90
  });
package/js/components/base-teleport.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, getCurrentInstance, onUnmounted, watchEffect } 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 teleportHost = document.createElement('div')\n const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot\n if (isIsolated) {\n teleportHost.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n onUnmounted(() => {\n ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n })\n }\n\n watchEffect(() => {\n if (props.disabled) {\n teleportHost.remove()\n return\n }\n teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n const targetElement =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (!targetElement) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.insertAdjacentElement(position, teleportHost)\n })\n\n return { teleportHost }\n },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAUA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA+B;AACpD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,YAAW,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;AACjD,QAAA,MAAM,UAAS,GAAI,CAAC,CAAC,kBAAkB,EAAE,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,EAAE,UAAS,CAAA;AAC/E,QAAA,IAAI,UAAU,EAAE;YACd,YAAY,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAA,CACzC;YAAC,MAAc,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;YAC7D,WAAW,CAAC,MAAM;gBACd,MAAc,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAClE,aAAC,CAAA,CAAA;AACH,SAAA;QAEA,WAAW,CAAC,MAAM;YAChB,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,YAAY,CAAC,MAAM,EAAC,CAAA;gBACpB,OAAK;AACP,aAAA;YACA,YAAY,CAAC,SAAU,GAAE,CAAA,iCAAA,EAAoC,KAAK,CAAC,QAAQ,EAAC,CAAA;YAC5E,MAAM,aAAc,GAClB,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;AACP,aAAA;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;AAC7E,YAAA,aAAa,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAA,CAAA;AAC5D,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :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 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 teleportHost = document.createElement('div')\n const targetElement = ref()\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onBeforeUnmount(() => {\n teleportHost.remove()\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n })\n\n const isIsolated =\n getCurrentInstance()?.appContext.app._container?.parentNode instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n onUnmounted(() => {\n ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n })\n }\n\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 watchEffect(() => {\n if (props.disabled) {\n teleportHost.remove()\n return\n }\n teleportHost.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)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n const target =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (target?.isConnected) {\n targetAddedObserver.disconnect()\n targetRemovedObserver.observe(target.parentElement!, { childList: true })\n targetElement.value = target\n }\n }\n\n /** Checks if the target was disconected from the DOM and updates the observers */\n function targetRemoved() {\n if (!targetElement.value?.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n return { teleportHost }\n },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n display: none;\n}\n</style>\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.79",
3
+ "version": "6.0.0-alpha.80",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "32db516289faba04839e589c49778dba3c2fb665"
145
+ "gitHead": "ed7928c37647c1fffe9dabc64dbc76e0993f9326"
146
146
  }
package/types/components/base-teleport.vue.d.ts.map CHANGED
@@ -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;;IAM/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAyDE"}
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;;IAc/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAuGE"}