@empathyco/x-components 6.0.0-alpha.77 → 6.0.0-alpha.79
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 +19 -0
- package/design-system/deprecated-full-theme.css +326 -327
- package/js/components/base-teleport.vue.js +1 -1
- package/js/components/base-teleport.vue.js.map +1 -1
- package/js/components/base-teleport.vue2.js +9 -1
- package/js/components/base-teleport.vue2.js.map +1 -1
- package/js/x-modules/tagging/store/module.js +1 -1
- package/js/x-modules/tagging/store/module.js.map +1 -1
- package/package.json +2 -2
- package/types/components/base-teleport.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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.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
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* disable default tagging on related-prompts no-result scenario (#1776) ([61480a6](https://github.com/empathyco/x/commit/61480a6069aa73124d2a16e394b549ee78214d89))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [6.0.0-alpha.78](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.77...@empathyco/x-components@6.0.0-alpha.78) (2025-05-08)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **base-teleport:** support shadowRoot ([04c5299](https://github.com/empathyco/x/commit/04c5299756fba1aa332ce083ac27c1e3b7e8c523))
|
|
21
|
+
* **home:** add teleport test section with BaseTeleport component ([a1d34d7](https://github.com/empathyco/x/commit/a1d34d736d7f04144b2b6bb7e69acc41cc330d13))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [6.0.0-alpha.77](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.76...@empathyco/x-components@6.0.0-alpha.77) (2025-05-06)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
2
|
.x-uppercase {
|
|
4
3
|
text-transform: uppercase;
|
|
5
4
|
}
|
|
@@ -1806,6 +1805,49 @@
|
|
|
1806
1805
|
.x-border-width--left-10 {
|
|
1807
1806
|
border-style: solid !important;
|
|
1808
1807
|
}
|
|
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
|
+
}
|
|
1809
1851
|
.x-border-radius--00 {
|
|
1810
1852
|
border-radius: 0 !important;
|
|
1811
1853
|
}
|
|
@@ -3314,64 +3356,6 @@
|
|
|
3314
3356
|
[dir="rtl"] .x-border-radius--bottom-right-20 {
|
|
3315
3357
|
border-bottom-left-radius: var(--x-size-base-20) !important;
|
|
3316
3358
|
}
|
|
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
|
-
}
|
|
3360
|
-
.x-text--stroke.x-text {
|
|
3361
|
-
--x-string-text-decoration: line-through;
|
|
3362
|
-
}
|
|
3363
|
-
.x-text--stroke.x-title1 {
|
|
3364
|
-
--x-string-text-decoration-title1: line-through;
|
|
3365
|
-
}
|
|
3366
|
-
.x-text--stroke.x-title2 {
|
|
3367
|
-
--x-string-text-decoration-title2: line-through;
|
|
3368
|
-
}
|
|
3369
|
-
.x-text--stroke.x-title3 {
|
|
3370
|
-
--x-string-text-decoration-title3: line-through;
|
|
3371
|
-
}
|
|
3372
|
-
.x-text--stroke.x-small {
|
|
3373
|
-
--x-string-text-decoration-small: line-through;
|
|
3374
|
-
}
|
|
3375
3359
|
.x-background--lead {
|
|
3376
3360
|
background-color: var(--x-color-base-lead) !important;
|
|
3377
3361
|
}
|
|
@@ -3415,6 +3399,21 @@
|
|
|
3415
3399
|
.x-background--transparent {
|
|
3416
3400
|
background-color: var(--x-color-base-transparent) !important;
|
|
3417
3401
|
}
|
|
3402
|
+
.x-text--stroke.x-text {
|
|
3403
|
+
--x-string-text-decoration: line-through;
|
|
3404
|
+
}
|
|
3405
|
+
.x-text--stroke.x-title1 {
|
|
3406
|
+
--x-string-text-decoration-title1: line-through;
|
|
3407
|
+
}
|
|
3408
|
+
.x-text--stroke.x-title2 {
|
|
3409
|
+
--x-string-text-decoration-title2: line-through;
|
|
3410
|
+
}
|
|
3411
|
+
.x-text--stroke.x-title3 {
|
|
3412
|
+
--x-string-text-decoration-title3: line-through;
|
|
3413
|
+
}
|
|
3414
|
+
.x-text--stroke.x-small {
|
|
3415
|
+
--x-string-text-decoration-small: line-through;
|
|
3416
|
+
}
|
|
3418
3417
|
:root {
|
|
3419
3418
|
--x-color-text-secondary: var(--x-color-base-neutral-35);
|
|
3420
3419
|
}
|
|
@@ -3596,6 +3595,9 @@
|
|
|
3596
3595
|
:root {
|
|
3597
3596
|
--x-color-text-accent: var(--x-color-base-accent);
|
|
3598
3597
|
}
|
|
3598
|
+
.x-text--accent {
|
|
3599
|
+
--x-color-text-default: var(--x-color-text-accent);
|
|
3600
|
+
}
|
|
3599
3601
|
:root {
|
|
3600
3602
|
--x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
|
|
3601
3603
|
--x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
|
|
@@ -3603,9 +3605,6 @@
|
|
|
3603
3605
|
--x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
|
|
3604
3606
|
--x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
|
|
3605
3607
|
}
|
|
3606
|
-
.x-text--accent {
|
|
3607
|
-
--x-color-text-default: var(--x-color-text-accent);
|
|
3608
|
-
}
|
|
3609
3608
|
:root {
|
|
3610
3609
|
--x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
|
|
3611
3610
|
--x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
|
|
@@ -3636,6 +3635,18 @@
|
|
|
3636
3635
|
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3637
3636
|
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3638
3637
|
}
|
|
3638
|
+
:root {
|
|
3639
|
+
--x-color-background-tag-ghost: transparent;
|
|
3640
|
+
--x-color-border-tag-ghost: transparent;
|
|
3641
|
+
--x-color-background-tag-selected-ghost: transparent;
|
|
3642
|
+
--x-color-border-tag-selected-ghost: transparent;
|
|
3643
|
+
--x-color-background-tag-curated-ghost: transparent;
|
|
3644
|
+
--x-color-border-tag-curated-ghost: transparent;
|
|
3645
|
+
--x-color-background-tag-curated-selected-ghost: transparent;
|
|
3646
|
+
--x-color-border-tag-curated-selected-ghost: transparent;
|
|
3647
|
+
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3648
|
+
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3649
|
+
}
|
|
3639
3650
|
|
|
3640
3651
|
.x-tag--ghost.x-tag,
|
|
3641
3652
|
.x-tag--ghost .x-tag {
|
|
@@ -3654,18 +3665,6 @@
|
|
|
3654
3665
|
--x-number-font-weight-tag-curated-selected-ghost
|
|
3655
3666
|
);
|
|
3656
3667
|
}
|
|
3657
|
-
:root {
|
|
3658
|
-
--x-color-background-tag-ghost: transparent;
|
|
3659
|
-
--x-color-border-tag-ghost: transparent;
|
|
3660
|
-
--x-color-background-tag-selected-ghost: transparent;
|
|
3661
|
-
--x-color-border-tag-selected-ghost: transparent;
|
|
3662
|
-
--x-color-background-tag-curated-ghost: transparent;
|
|
3663
|
-
--x-color-border-tag-curated-ghost: transparent;
|
|
3664
|
-
--x-color-background-tag-curated-selected-ghost: transparent;
|
|
3665
|
-
--x-color-border-tag-curated-selected-ghost: transparent;
|
|
3666
|
-
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3667
|
-
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3668
|
-
}
|
|
3669
3668
|
:root {
|
|
3670
3669
|
--x-color-background-tag-default: var(--x-color-base-neutral-100);
|
|
3671
3670
|
--x-color-border-tag-default: var(--x-color-text-tag-default);
|
|
@@ -4205,6 +4204,66 @@
|
|
|
4205
4204
|
--x-number-font-weight-suggestion-default-matching
|
|
4206
4205
|
);
|
|
4207
4206
|
}
|
|
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
|
+
}
|
|
4208
4267
|
:root {
|
|
4209
4268
|
--x-string-align-items-suggestion-default: center;
|
|
4210
4269
|
--x-color-text-suggestion-default: var(--x-color-text-default);
|
|
@@ -4427,91 +4486,31 @@
|
|
|
4427
4486
|
--x-color-text-suggestion-default-matching-curated
|
|
4428
4487
|
);
|
|
4429
4488
|
}
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4435
|
-
--x-
|
|
4436
|
-
pointer-events: none;
|
|
4437
|
-
}
|
|
4438
|
-
.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
|
|
4439
|
-
pointer-events: all;
|
|
4440
|
-
}
|
|
4441
|
-
.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
|
|
4442
|
-
transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
|
|
4443
|
-
}
|
|
4444
|
-
.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
|
|
4445
|
-
transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
|
|
4446
|
-
}
|
|
4447
|
-
.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
|
|
4448
|
-
opacity: 0;
|
|
4489
|
+
:root {
|
|
4490
|
+
--x-string-overflow-scroll: auto;
|
|
4491
|
+
--x-color-background-scroll-bar: transparent;
|
|
4492
|
+
--x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
|
|
4493
|
+
--x-color-background-scroll-bar-hover: transparent;
|
|
4494
|
+
--x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
|
|
4449
4495
|
}
|
|
4450
|
-
|
|
4451
|
-
|
|
4452
|
-
|
|
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);
|
|
4453
4503
|
}
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4504
|
+
:root {
|
|
4505
|
+
--x-string-overflow-scroll: auto;
|
|
4506
|
+
--x-color-background-scroll-bar: transparent;
|
|
4507
|
+
--x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
|
|
4508
|
+
--x-color-background-scroll-bar-hover: transparent;
|
|
4509
|
+
--x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
|
|
4457
4510
|
}
|
|
4458
|
-
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
|
|
4462
|
-
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));
|
|
4463
|
-
}
|
|
4464
|
-
.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .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));
|
|
4466
|
-
}
|
|
4467
|
-
.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
|
|
4468
|
-
mask: none;
|
|
4469
|
-
}
|
|
4470
|
-
.x-sliding-panel__scroll > * {
|
|
4471
|
-
flex: 0 0 auto;
|
|
4472
|
-
}
|
|
4473
|
-
.x-sliding-panel__scroll > .x-list {
|
|
4474
|
-
--x-string-flow-list: row nowrap;
|
|
4475
|
-
}
|
|
4476
|
-
.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
|
|
4477
|
-
opacity: 1;
|
|
4478
|
-
pointer-events: all;
|
|
4479
|
-
}
|
|
4480
|
-
.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
|
|
4481
|
-
opacity: 1;
|
|
4482
|
-
pointer-events: all;
|
|
4483
|
-
}
|
|
4484
|
-
:root {
|
|
4485
|
-
--x-color-background-sliding-panel: var(--x-color-base-neutral-100);
|
|
4486
|
-
--x-size-width-sliding-panel-gradient: var(--x-size-base-09);
|
|
4487
|
-
--x-size-padding-sliding-panel-button: var(--x-size-base-03);
|
|
4488
|
-
--x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
|
|
4489
|
-
}
|
|
4490
|
-
:root {
|
|
4491
|
-
--x-string-overflow-scroll: auto;
|
|
4492
|
-
--x-color-background-scroll-bar: transparent;
|
|
4493
|
-
--x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
|
|
4494
|
-
--x-color-background-scroll-bar-hover: transparent;
|
|
4495
|
-
--x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
|
|
4496
|
-
}
|
|
4497
|
-
/* @deprecated */
|
|
4498
|
-
:root {
|
|
4499
|
-
--x-size-padding-row-02: var(--x-size-base-02);
|
|
4500
|
-
--x-size-padding-row-03: var(--x-size-base-03);
|
|
4501
|
-
--x-size-padding-row-04: var(--x-size-base-04);
|
|
4502
|
-
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4503
|
-
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4504
|
-
}
|
|
4505
|
-
:root {
|
|
4506
|
-
--x-string-overflow-scroll: auto;
|
|
4507
|
-
--x-color-background-scroll-bar: transparent;
|
|
4508
|
-
--x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
|
|
4509
|
-
--x-color-background-scroll-bar-hover: transparent;
|
|
4510
|
-
--x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
|
|
4511
|
-
}
|
|
4512
|
-
|
|
4513
|
-
.x-scroll {
|
|
4514
|
-
overflow-y: var(--x-string-overflow-scroll);
|
|
4511
|
+
|
|
4512
|
+
.x-scroll {
|
|
4513
|
+
overflow-y: var(--x-string-overflow-scroll);
|
|
4515
4514
|
}
|
|
4516
4515
|
@media (hover: hover) {
|
|
4517
4516
|
.x-scroll {
|
|
@@ -4701,23 +4700,6 @@
|
|
|
4701
4700
|
--x-size-span-row-item: 1;
|
|
4702
4701
|
--x-size-start-row-item: 0;
|
|
4703
4702
|
}
|
|
4704
|
-
:root {
|
|
4705
|
-
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4706
|
-
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4707
|
-
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4708
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4709
|
-
--x-color-background-result-default: transparent;
|
|
4710
|
-
--x-size-padding-result-default: 0;
|
|
4711
|
-
--x-size-padding-result-overlay-default: 0;
|
|
4712
|
-
--x-size-padding-result-description-default: 0;
|
|
4713
|
-
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4714
|
-
--x-size-padding-result-picture-default: 0;
|
|
4715
|
-
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4716
|
-
--x-size-border-width-result-default: 0;
|
|
4717
|
-
--x-size-border-width-result-overlay-default: 0;
|
|
4718
|
-
--x-size-border-width-result-description-default: 0;
|
|
4719
|
-
--x-size-border-width-result-picture-default: 0;
|
|
4720
|
-
}
|
|
4721
4703
|
:root {
|
|
4722
4704
|
--x-size-gap-row: 0;
|
|
4723
4705
|
--x-size-padding-row: 0;
|
|
@@ -4863,6 +4845,23 @@
|
|
|
4863
4845
|
--x-size-border-width-result-description-default: 0;
|
|
4864
4846
|
--x-size-border-width-result-picture-default: 0;
|
|
4865
4847
|
}
|
|
4848
|
+
:root {
|
|
4849
|
+
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4850
|
+
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4851
|
+
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4852
|
+
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4853
|
+
--x-color-background-result-default: transparent;
|
|
4854
|
+
--x-size-padding-result-default: 0;
|
|
4855
|
+
--x-size-padding-result-overlay-default: 0;
|
|
4856
|
+
--x-size-padding-result-description-default: 0;
|
|
4857
|
+
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4858
|
+
--x-size-padding-result-picture-default: 0;
|
|
4859
|
+
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4860
|
+
--x-size-border-width-result-default: 0;
|
|
4861
|
+
--x-size-border-width-result-overlay-default: 0;
|
|
4862
|
+
--x-size-border-width-result-description-default: 0;
|
|
4863
|
+
--x-size-border-width-result-picture-default: 0;
|
|
4864
|
+
}
|
|
4866
4865
|
|
|
4867
4866
|
.x-result {
|
|
4868
4867
|
display: grid;
|
|
@@ -4936,6 +4935,15 @@
|
|
|
4936
4935
|
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4937
4936
|
--x-size-border-width-progress-bar-default: 0;
|
|
4938
4937
|
}
|
|
4938
|
+
:root {
|
|
4939
|
+
--x-size-height-progress-bar-line-default: var(--x-size-base-02);
|
|
4940
|
+
--x-size-width-progress-bar-line-default: var(--x-size-base-20);
|
|
4941
|
+
--x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
|
|
4942
|
+
--x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
|
|
4943
|
+
--x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
|
|
4944
|
+
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4945
|
+
--x-size-border-width-progress-bar-default: 0;
|
|
4946
|
+
}
|
|
4939
4947
|
|
|
4940
4948
|
.x-progress-bar {
|
|
4941
4949
|
display: inline-block;
|
|
@@ -4952,19 +4960,13 @@
|
|
|
4952
4960
|
border-radius: var(--x-size-border-radius-progress-bar-default);
|
|
4953
4961
|
background-color: var(--x-color-background-progress-bar-line-default);
|
|
4954
4962
|
}
|
|
4955
|
-
:root {
|
|
4956
|
-
--x-size-height-progress-bar-line-default: var(--x-size-base-02);
|
|
4957
|
-
--x-size-width-progress-bar-line-default: var(--x-size-base-20);
|
|
4958
|
-
--x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
|
|
4959
|
-
--x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
|
|
4960
|
-
--x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
|
|
4961
|
-
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4962
|
-
--x-size-border-width-progress-bar-default: 0;
|
|
4963
|
-
}
|
|
4964
4963
|
:root {
|
|
4965
4964
|
--x-number-zoom-scale-picture: 1.1;
|
|
4966
4965
|
--x-number-zoom-duration-picture: 0.3s;
|
|
4967
4966
|
}
|
|
4967
|
+
:root {
|
|
4968
|
+
--x-number-aspect-ratio-picture: 1;
|
|
4969
|
+
}
|
|
4968
4970
|
:root {
|
|
4969
4971
|
--x-number-zoom-scale-picture: 1.1;
|
|
4970
4972
|
--x-number-zoom-duration-picture: 0.3s;
|
|
@@ -4979,9 +4981,6 @@
|
|
|
4979
4981
|
:root {
|
|
4980
4982
|
--x-number-aspect-ratio-picture: 1;
|
|
4981
4983
|
}
|
|
4982
|
-
:root {
|
|
4983
|
-
--x-number-aspect-ratio-picture: 1;
|
|
4984
|
-
}
|
|
4985
4984
|
|
|
4986
4985
|
.x-picture--fixed-ratio.x-picture {
|
|
4987
4986
|
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
@@ -5005,24 +5004,6 @@
|
|
|
5005
5004
|
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
5006
5005
|
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
5007
5006
|
}
|
|
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
|
-
}
|
|
5026
5007
|
|
|
5027
5008
|
.x-picture {
|
|
5028
5009
|
display: block;
|
|
@@ -5065,6 +5046,24 @@
|
|
|
5065
5046
|
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
5066
5047
|
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
5067
5048
|
}
|
|
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
|
+
}
|
|
5068
5067
|
:root {
|
|
5069
5068
|
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
5070
5069
|
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
@@ -5091,6 +5090,12 @@
|
|
|
5091
5090
|
--x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
|
|
5092
5091
|
--x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
|
|
5093
5092
|
}
|
|
5093
|
+
:root {
|
|
5094
|
+
--x-color-background-picture-colored: var(--x-color-base-neutral-95);
|
|
5095
|
+
--x-mix-blend-mode-picture-colored: multiply;
|
|
5096
|
+
--x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
|
|
5097
|
+
--x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
|
|
5098
|
+
}
|
|
5094
5099
|
|
|
5095
5100
|
.x-picture--colored.x-picture {
|
|
5096
5101
|
--x-color-background-picture-default: var(--x-color-background-picture-colored);
|
|
@@ -5105,10 +5110,26 @@
|
|
|
5105
5110
|
--x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
|
|
5106
5111
|
}
|
|
5107
5112
|
:root {
|
|
5108
|
-
--x-
|
|
5109
|
-
--x-
|
|
5110
|
-
--x-
|
|
5111
|
-
--x-
|
|
5113
|
+
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
5114
|
+
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
5115
|
+
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
5116
|
+
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
5117
|
+
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
5118
|
+
}
|
|
5119
|
+
:root {
|
|
5120
|
+
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
5121
|
+
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
5122
|
+
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
5123
|
+
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
5124
|
+
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
5125
|
+
}
|
|
5126
|
+
|
|
5127
|
+
.x-picture--card.x-picture {
|
|
5128
|
+
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
5129
|
+
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
5130
|
+
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
|
|
5131
|
+
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
|
|
5132
|
+
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
|
|
5112
5133
|
}
|
|
5113
5134
|
:root {
|
|
5114
5135
|
--x-color-background-option-list-button-default: transparent;
|
|
@@ -5190,13 +5211,6 @@
|
|
|
5190
5211
|
--x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
|
|
5191
5212
|
--x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
|
|
5192
5213
|
}
|
|
5193
|
-
:root {
|
|
5194
|
-
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
5195
|
-
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
5196
|
-
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
5197
|
-
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
5198
|
-
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
5199
|
-
}
|
|
5200
5214
|
:root {
|
|
5201
5215
|
--x-color-background-option-list-button-default: transparent;
|
|
5202
5216
|
--x-color-border-option-list-button-default: transparent;
|
|
@@ -5389,21 +5403,6 @@
|
|
|
5389
5403
|
-webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
5390
5404
|
text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
5391
5405
|
}
|
|
5392
|
-
:root {
|
|
5393
|
-
--x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
|
|
5394
|
-
--x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
|
|
5395
|
-
--x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
|
|
5396
|
-
--x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
|
|
5397
|
-
--x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
|
|
5398
|
-
}
|
|
5399
|
-
|
|
5400
|
-
.x-picture--card.x-picture {
|
|
5401
|
-
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
5402
|
-
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
5403
|
-
--x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
|
|
5404
|
-
--x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
|
|
5405
|
-
--x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
|
|
5406
|
-
}
|
|
5407
5406
|
:root {
|
|
5408
5407
|
--x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
|
|
5409
5408
|
--x-color-text-option-list-button-bottom-selected-hover: var(
|
|
@@ -6750,6 +6749,15 @@
|
|
|
6750
6749
|
);
|
|
6751
6750
|
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6752
6751
|
}
|
|
6752
|
+
:root {
|
|
6753
|
+
--x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
|
|
6754
|
+
--x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6755
|
+
--x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6756
|
+
--x-size-border-radius-bottom-right-input-group-pill: var(
|
|
6757
|
+
--x-size-border-radius-input-group-pill
|
|
6758
|
+
);
|
|
6759
|
+
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6760
|
+
}
|
|
6753
6761
|
|
|
6754
6762
|
.x-input-group--pill.x-input-group,
|
|
6755
6763
|
.x-input-group--pill .x-input-group {
|
|
@@ -6767,15 +6775,6 @@
|
|
|
6767
6775
|
--x-size-border-radius-bottom-left-input-group-pill
|
|
6768
6776
|
);
|
|
6769
6777
|
}
|
|
6770
|
-
:root {
|
|
6771
|
-
--x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
|
|
6772
|
-
--x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6773
|
-
--x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6774
|
-
--x-size-border-radius-bottom-right-input-group-pill: var(
|
|
6775
|
-
--x-size-border-radius-input-group-pill
|
|
6776
|
-
);
|
|
6777
|
-
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6778
|
-
}
|
|
6779
6778
|
:root {
|
|
6780
6779
|
--x-size-padding-left-input-group-line: 0;
|
|
6781
6780
|
--x-size-padding-right-input-group-line: 0;
|
|
@@ -6875,6 +6874,15 @@
|
|
|
6875
6874
|
);
|
|
6876
6875
|
--x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
|
|
6877
6876
|
}
|
|
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
|
+
}
|
|
6878
6886
|
:root {
|
|
6879
6887
|
--x-color-background-input-group-default: var(--x-color-background-input-default);
|
|
6880
6888
|
--x-color-border-input-group-default: var(--x-color-border-input-default);
|
|
@@ -7061,15 +7069,6 @@
|
|
|
7061
7069
|
);
|
|
7062
7070
|
--x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
|
|
7063
7071
|
}
|
|
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
|
-
}
|
|
7073
7072
|
|
|
7074
7073
|
.x-input-group--card.x-input-group,
|
|
7075
7074
|
.x-input-group--card .x-input-group {
|
|
@@ -7130,6 +7129,28 @@
|
|
|
7130
7129
|
--x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
|
|
7131
7130
|
--x-size-border-width-left-input-line: 0;
|
|
7132
7131
|
}
|
|
7132
|
+
:root {
|
|
7133
|
+
--x-size-padding-top-input-line: var(--x-size-base-03);
|
|
7134
|
+
--x-size-padding-right-input-line: 0;
|
|
7135
|
+
--x-size-padding-bottom-input-line: var(--x-size-base-03);
|
|
7136
|
+
--x-size-padding-left-input-line: 0;
|
|
7137
|
+
--x-size-border-width-top-input-line: 0;
|
|
7138
|
+
--x-size-border-width-right-input-line: 0;
|
|
7139
|
+
--x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
|
|
7140
|
+
--x-size-border-width-left-input-line: 0;
|
|
7141
|
+
}
|
|
7142
|
+
|
|
7143
|
+
.x-input--line .x-input,
|
|
7144
|
+
.x-input--line.x-input {
|
|
7145
|
+
--x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
|
|
7146
|
+
--x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
|
|
7147
|
+
--x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
|
|
7148
|
+
--x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
|
|
7149
|
+
--x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
|
|
7150
|
+
--x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
|
|
7151
|
+
--x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
|
|
7152
|
+
--x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
|
|
7153
|
+
}
|
|
7133
7154
|
:root {
|
|
7134
7155
|
--x-color-background-input-default: var(--x-color-base-neutral-100);
|
|
7135
7156
|
--x-color-border-input-default: var(--x-color-base-neutral-70);
|
|
@@ -7158,35 +7179,6 @@
|
|
|
7158
7179
|
--x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
|
|
7159
7180
|
--x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
|
|
7160
7181
|
}
|
|
7161
|
-
:root {
|
|
7162
|
-
--x-size-padding-top-input-line: var(--x-size-base-03);
|
|
7163
|
-
--x-size-padding-right-input-line: 0;
|
|
7164
|
-
--x-size-padding-bottom-input-line: var(--x-size-base-03);
|
|
7165
|
-
--x-size-padding-left-input-line: 0;
|
|
7166
|
-
--x-size-border-width-top-input-line: 0;
|
|
7167
|
-
--x-size-border-width-right-input-line: 0;
|
|
7168
|
-
--x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
|
|
7169
|
-
--x-size-border-width-left-input-line: 0;
|
|
7170
|
-
}
|
|
7171
|
-
|
|
7172
|
-
.x-input--line .x-input,
|
|
7173
|
-
.x-input--line.x-input {
|
|
7174
|
-
--x-size-padding-top-input-default: var(--x-size-padding-top-input-line);
|
|
7175
|
-
--x-size-padding-right-input-default: var(--x-size-padding-right-input-line);
|
|
7176
|
-
--x-size-padding-bottom-input-default: var(--x-size-padding-bottom-input-line);
|
|
7177
|
-
--x-size-padding-left-input-default: var(--x-size-padding-left-input-line);
|
|
7178
|
-
--x-size-border-width-top-input-default: var(--x-size-border-width-top-input-line);
|
|
7179
|
-
--x-size-border-width-right-input-default: var(--x-size-border-width-right-input-line);
|
|
7180
|
-
--x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
|
|
7181
|
-
--x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
|
|
7182
|
-
}
|
|
7183
|
-
:root {
|
|
7184
|
-
--x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
|
|
7185
|
-
--x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
|
|
7186
|
-
--x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
|
|
7187
|
-
--x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
|
|
7188
|
-
--x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
|
|
7189
|
-
}
|
|
7190
7182
|
:root {
|
|
7191
7183
|
--x-color-background-input-default: var(--x-color-base-neutral-100);
|
|
7192
7184
|
--x-color-border-input-default: var(--x-color-base-neutral-70);
|
|
@@ -7302,6 +7294,13 @@
|
|
|
7302
7294
|
--x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
|
|
7303
7295
|
--x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
|
|
7304
7296
|
}
|
|
7297
|
+
:root {
|
|
7298
|
+
--x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
|
|
7299
|
+
--x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
|
|
7300
|
+
--x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
|
|
7301
|
+
--x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
|
|
7302
|
+
--x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
|
|
7303
|
+
}
|
|
7305
7304
|
|
|
7306
7305
|
.x-input--card.x-input,
|
|
7307
7306
|
.x-input--card .x-input {
|
|
@@ -7750,6 +7749,39 @@
|
|
|
7750
7749
|
--x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
|
|
7751
7750
|
--x-size-line-height-facet-default: var(--x-size-line-height-title3);
|
|
7752
7751
|
}
|
|
7752
|
+
:root {
|
|
7753
|
+
--x-color-background-facet-default: transparent;
|
|
7754
|
+
--x-color-border-facet-default: var(--x-color-background-facet-default);
|
|
7755
|
+
--x-color-text-facet-default: var(--x-color-text-default);
|
|
7756
|
+
--x-color-background-facet-header-default: var(--x-color-background-facet-default);
|
|
7757
|
+
--x-color-border-facet-header-default: var(--x-color-background-facet-default);
|
|
7758
|
+
--x-size-border-width-facet-default: var(--x-size-border-width-base);
|
|
7759
|
+
--x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
|
|
7760
|
+
--x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
|
|
7761
|
+
--x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
|
|
7762
|
+
--x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
|
|
7763
|
+
--x-size-border-width-facet-header-default: var(--x-size-border-width-base);
|
|
7764
|
+
--x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7765
|
+
--x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7766
|
+
--x-size-border-width-bottom-facet-header-default: var(
|
|
7767
|
+
--x-size-border-width-facet-header-default
|
|
7768
|
+
);
|
|
7769
|
+
--x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7770
|
+
--x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
|
|
7771
|
+
--x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
|
|
7772
|
+
--x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
|
|
7773
|
+
--x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
|
|
7774
|
+
--x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
|
|
7775
|
+
--x-size-padding-top-facet-header-default: var(--x-size-base-03);
|
|
7776
|
+
--x-size-padding-right-facet-header-default: 0;
|
|
7777
|
+
--x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
|
|
7778
|
+
--x-size-padding-left-facet-header-default: 0;
|
|
7779
|
+
--x-size-gap-facet-header-default: var(--x-size-base-03);
|
|
7780
|
+
--x-font-family-facet-default: var(--x-font-family-title3);
|
|
7781
|
+
--x-size-font-facet-default: var(--x-size-font-title3);
|
|
7782
|
+
--x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
|
|
7783
|
+
--x-size-line-height-facet-default: var(--x-size-line-height-title3);
|
|
7784
|
+
}
|
|
7753
7785
|
|
|
7754
7786
|
[dir="ltr"] .x-facet {
|
|
7755
7787
|
border-right-width: var(--x-size-border-width-right-facet-default);
|
|
@@ -7844,39 +7876,6 @@
|
|
|
7844
7876
|
.x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
|
|
7845
7877
|
margin-left: auto;
|
|
7846
7878
|
}
|
|
7847
|
-
:root {
|
|
7848
|
-
--x-color-background-facet-default: transparent;
|
|
7849
|
-
--x-color-border-facet-default: var(--x-color-background-facet-default);
|
|
7850
|
-
--x-color-text-facet-default: var(--x-color-text-default);
|
|
7851
|
-
--x-color-background-facet-header-default: var(--x-color-background-facet-default);
|
|
7852
|
-
--x-color-border-facet-header-default: var(--x-color-background-facet-default);
|
|
7853
|
-
--x-size-border-width-facet-default: var(--x-size-border-width-base);
|
|
7854
|
-
--x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
|
|
7855
|
-
--x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
|
|
7856
|
-
--x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
|
|
7857
|
-
--x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
|
|
7858
|
-
--x-size-border-width-facet-header-default: var(--x-size-border-width-base);
|
|
7859
|
-
--x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7860
|
-
--x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7861
|
-
--x-size-border-width-bottom-facet-header-default: var(
|
|
7862
|
-
--x-size-border-width-facet-header-default
|
|
7863
|
-
);
|
|
7864
|
-
--x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
|
|
7865
|
-
--x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
|
|
7866
|
-
--x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
|
|
7867
|
-
--x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
|
|
7868
|
-
--x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
|
|
7869
|
-
--x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
|
|
7870
|
-
--x-size-padding-top-facet-header-default: var(--x-size-base-03);
|
|
7871
|
-
--x-size-padding-right-facet-header-default: 0;
|
|
7872
|
-
--x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
|
|
7873
|
-
--x-size-padding-left-facet-header-default: 0;
|
|
7874
|
-
--x-size-gap-facet-header-default: var(--x-size-base-03);
|
|
7875
|
-
--x-font-family-facet-default: var(--x-font-family-title3);
|
|
7876
|
-
--x-size-font-facet-default: var(--x-size-font-title3);
|
|
7877
|
-
--x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
|
|
7878
|
-
--x-size-line-height-facet-default: var(--x-size-line-height-title3);
|
|
7879
|
-
}
|
|
7880
7879
|
:root {
|
|
7881
7880
|
--x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
|
|
7882
7881
|
--x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
|
|
@@ -7918,13 +7917,6 @@
|
|
|
7918
7917
|
:root {
|
|
7919
7918
|
--x-size-width-dropdown-xl: 282px;
|
|
7920
7919
|
}
|
|
7921
|
-
:root {
|
|
7922
|
-
--x-size-width-dropdown-xl: 282px;
|
|
7923
|
-
}
|
|
7924
|
-
|
|
7925
|
-
.x-dropdown.x-dropdown--xl {
|
|
7926
|
-
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
|
|
7927
|
-
}
|
|
7928
7920
|
:root {
|
|
7929
7921
|
--x-size-width-dropdown-s: 74px;
|
|
7930
7922
|
}
|
|
@@ -7935,6 +7927,13 @@
|
|
|
7935
7927
|
.x-dropdown.x-dropdown--s {
|
|
7936
7928
|
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
|
|
7937
7929
|
}
|
|
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
|
+
}
|
|
7938
7937
|
:root {
|
|
7939
7938
|
--x-size-gap-dropdown-pill: var(--x-size-base-03);
|
|
7940
7939
|
--x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
|
|
@@ -7943,6 +7942,16 @@
|
|
|
7943
7942
|
--x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
|
|
7944
7943
|
--x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
|
|
7945
7944
|
}
|
|
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
|
+
}
|
|
7946
7955
|
:root {
|
|
7947
7956
|
--x-size-gap-dropdown-pill: var(--x-size-base-03);
|
|
7948
7957
|
--x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
|
|
@@ -7988,16 +7997,6 @@
|
|
|
7988
7997
|
--x-size-border-width-left-dropdown-list-pill
|
|
7989
7998
|
);
|
|
7990
7999
|
}
|
|
7991
|
-
:root {
|
|
7992
|
-
--x-size-width-dropdown-m: 130px;
|
|
7993
|
-
}
|
|
7994
|
-
:root {
|
|
7995
|
-
--x-size-width-dropdown-m: 130px;
|
|
7996
|
-
}
|
|
7997
|
-
|
|
7998
|
-
.x-dropdown.x-dropdown--m {
|
|
7999
|
-
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
|
|
8000
|
-
}
|
|
8001
8000
|
:root {
|
|
8002
8001
|
--x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
|
|
8003
8002
|
--x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
|
|
@@ -8884,4 +8883,4 @@
|
|
|
8884
8883
|
--x-size-border-radius-base-m: var(--x-size-base-06);
|
|
8885
8884
|
--x-size-border-radius-base-pill: 99999px;
|
|
8886
8885
|
--x-size-border-width-base: 1px;
|
|
8887
|
-
}
|
|
8886
|
+
}
|
|
@@ -5,7 +5,7 @@ import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
|
|
|
5
5
|
|
|
6
6
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
7
7
|
return openBlock(), createBlock(Teleport, {
|
|
8
|
-
to: _ctx.teleportHost,
|
|
8
|
+
to: _ctx.teleportHost.shadowRoot ?? _ctx.teleportHost,
|
|
9
9
|
disabled: _ctx.disabled
|
|
10
10
|
}, [
|
|
11
11
|
renderSlot(_ctx.$slots, "default")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :to=\"teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, 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\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":";;;;;
|
|
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,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, watchEffect } from 'vue';
|
|
1
|
+
import { defineComponent, getCurrentInstance, onUnmounted, watchEffect } from 'vue';
|
|
2
2
|
|
|
3
3
|
var _sfc_main = defineComponent({
|
|
4
4
|
name: 'BaseTeleport',
|
|
@@ -28,6 +28,14 @@ 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;
|
|
32
|
+
if (isIsolated) {
|
|
33
|
+
teleportHost.attachShadow({ mode: 'open' });
|
|
34
|
+
window.xCSSInjector.addHost(teleportHost.shadowRoot);
|
|
35
|
+
onUnmounted(() => {
|
|
36
|
+
window.xCSSInjector.removeHost(teleportHost.shadowRoot);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
31
39
|
watchEffect(() => {
|
|
32
40
|
if (props.disabled) {
|
|
33
41
|
teleportHost.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport :to=\"teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, 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\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;
|
|
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;;;;"}
|
|
@@ -31,7 +31,7 @@ const taggingXStoreModule = {
|
|
|
31
31
|
state.queryTaggingInfo = queryTaggingInfo;
|
|
32
32
|
},
|
|
33
33
|
setNoResultsTaggingEnabled(state, module) {
|
|
34
|
-
if (module === 'semanticQueries') {
|
|
34
|
+
if (module === 'semanticQueries' || module === 'relatedPrompts') {
|
|
35
35
|
state.noResultsTaggingEnabled = true;
|
|
36
36
|
}
|
|
37
37
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { TaggingXStoreModule } from './types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { track } from './actions/track.action'\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n state: () => ({\n config: {\n sessionTTLMs: 30 * 60 * 1000,\n queryTaggingDebounceMs: 2000,\n storageKey: null,\n storageTTLMs: null,\n },\n consent: null,\n noResultsTaggingEnabled: false,\n queryTaggingInfo: null,\n toolingTaggingInfo: {\n toolingDisplayClick: null,\n toolingDisplayAdd2Cart: null,\n },\n }),\n getters: {},\n mutations: {\n setConsent(state, consent) {\n state.consent = consent\n },\n setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n state.queryTaggingInfo = queryTaggingInfo\n },\n setNoResultsTaggingEnabled(state, module) {\n if (module === 'semanticQueries') {\n state.noResultsTaggingEnabled = true\n }\n },\n setConfig,\n mergeConfig,\n },\n actions: {\n track,\n },\n}\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE;AAClB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,sBAAsB,EAAE,IAAI;AAC7B,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAA;SACxB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAA;SAC1C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { TaggingXStoreModule } from './types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { track } from './actions/track.action'\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n state: () => ({\n config: {\n sessionTTLMs: 30 * 60 * 1000,\n queryTaggingDebounceMs: 2000,\n storageKey: null,\n storageTTLMs: null,\n },\n consent: null,\n noResultsTaggingEnabled: false,\n queryTaggingInfo: null,\n toolingTaggingInfo: {\n toolingDisplayClick: null,\n toolingDisplayAdd2Cart: null,\n },\n }),\n getters: {},\n mutations: {\n setConsent(state, consent) {\n state.consent = consent\n },\n setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n state.queryTaggingInfo = queryTaggingInfo\n },\n setNoResultsTaggingEnabled(state, module) {\n if (module === 'semanticQueries' || module === 'relatedPrompts') {\n state.noResultsTaggingEnabled = true\n }\n },\n setConfig,\n mergeConfig,\n },\n actions: {\n track,\n },\n}\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE;AAClB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,sBAAsB,EAAE,IAAI;AAC7B,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAA;SACxB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAA;SAC1C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;AACtC,YAAA,IAAI,MAAM,KAAK,iBAAiB,IAAI,MAAM,KAAK,gBAAgB,EAAE;AAC/D,gBAAA,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAA;AACrC,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,KAAK;AACN,KAAA;;;;;"}
|
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.79",
|
|
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": "
|
|
145
|
+
"gitHead": "32db516289faba04839e589c49778dba3c2fb665"
|
|
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;;IAM/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;;IAM/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAyDE"}
|