@empathyco/x-components 3.0.0-alpha.402 → 3.0.0-alpha.403
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 +8 -0
- package/design-system/deprecated-full-theme.css +123 -123
- package/docs/API-reference/api/x-components.devicedetector.md +1 -1
- package/docs/API-reference/api/x-components.md +1 -1
- package/docs/API-reference/components/device/x-components.device-detector.md +4 -4
- package/js/x-modules/device/components/device-detector.vue.js.map +1 -1
- package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +1 -1
- package/types/x-modules/device/components/device-detector.vue.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [3.0.0-alpha.403](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.402...@empathyco/x-components@3.0.0-alpha.403) (2023-08-21)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @empathyco/x-components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [3.0.0-alpha.402](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.401...@empathyco/x-components@3.0.0-alpha.402) (2023-08-17)
|
|
7
15
|
|
|
8
16
|
|
|
@@ -3971,6 +3971,122 @@
|
|
|
3971
3971
|
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
3972
3972
|
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
3973
3973
|
}
|
|
3974
|
+
:root {
|
|
3975
|
+
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
3976
|
+
--x-color-text-suggestion-group-matching-part-default: var(
|
|
3977
|
+
--x-color-text-suggestion-matching-part-default
|
|
3978
|
+
);
|
|
3979
|
+
--x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
|
|
3980
|
+
--x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
|
|
3981
|
+
--x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
|
|
3982
|
+
--x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
|
|
3983
|
+
--x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
|
|
3984
|
+
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
3985
|
+
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
3986
|
+
--x-size-border-width-suggestion-group-default: 0;
|
|
3987
|
+
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
3988
|
+
--x-size-border-width-right-suggestion-group-default: var(
|
|
3989
|
+
--x-size-border-width-suggestion-default
|
|
3990
|
+
);
|
|
3991
|
+
--x-size-border-width-bottom-suggestion-group-default: var(
|
|
3992
|
+
--x-size-border-width-suggestion-default
|
|
3993
|
+
);
|
|
3994
|
+
--x-size-border-width-left-suggestion-group-default: var(
|
|
3995
|
+
--x-size-border-width-suggestion-default
|
|
3996
|
+
);
|
|
3997
|
+
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
3998
|
+
--x-size-border-radius-top-left-suggestion-group-default: var(
|
|
3999
|
+
--x-size-border-radius-suggestion-default
|
|
4000
|
+
);
|
|
4001
|
+
--x-size-border-radius-top-right-suggestion-group-default: var(
|
|
4002
|
+
--x-size-border-radius-suggestion-default
|
|
4003
|
+
);
|
|
4004
|
+
--x-size-border-radius-bottom-right-suggestion-group-default: var(
|
|
4005
|
+
--x-size-border-radius-suggestion-default
|
|
4006
|
+
);
|
|
4007
|
+
--x-size-border-radius-bottom-left-suggestion-group-default: var(
|
|
4008
|
+
--x-size-border-radius-suggestion-default
|
|
4009
|
+
);
|
|
4010
|
+
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
4011
|
+
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
4012
|
+
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
4013
|
+
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
4014
|
+
}
|
|
4015
|
+
|
|
4016
|
+
[dir="ltr"] .x-suggestion-group {
|
|
4017
|
+
padding-left: var(--x-size-padding-left-suggestion-group-default);
|
|
4018
|
+
}
|
|
4019
|
+
|
|
4020
|
+
[dir="rtl"] .x-suggestion-group {
|
|
4021
|
+
padding-right: var(--x-size-padding-left-suggestion-group-default);
|
|
4022
|
+
}
|
|
4023
|
+
|
|
4024
|
+
[dir="ltr"] .x-suggestion-group {
|
|
4025
|
+
padding-right: var(--x-size-padding-right-suggestion-group-default);
|
|
4026
|
+
}
|
|
4027
|
+
|
|
4028
|
+
[dir="rtl"] .x-suggestion-group {
|
|
4029
|
+
padding-left: var(--x-size-padding-right-suggestion-group-default);
|
|
4030
|
+
}
|
|
4031
|
+
|
|
4032
|
+
[dir="ltr"] .x-suggestion-group {
|
|
4033
|
+
border-left-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
4034
|
+
}
|
|
4035
|
+
|
|
4036
|
+
[dir="rtl"] .x-suggestion-group {
|
|
4037
|
+
border-right-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
4038
|
+
}
|
|
4039
|
+
|
|
4040
|
+
[dir="ltr"] .x-suggestion-group {
|
|
4041
|
+
border-right-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
4042
|
+
}
|
|
4043
|
+
|
|
4044
|
+
[dir="rtl"] .x-suggestion-group {
|
|
4045
|
+
border-left-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
4046
|
+
}
|
|
4047
|
+
|
|
4048
|
+
.x-suggestion-group {
|
|
4049
|
+
display: flex;
|
|
4050
|
+
flex-flow: row nowrap;
|
|
4051
|
+
box-sizing: border-box;
|
|
4052
|
+
background-color: var(--x-color-background-suggestion-group-default);
|
|
4053
|
+
color: var(--x-color-text-suggestion-group-default);
|
|
4054
|
+
border-color: var(--x-color-border-suggestion-group-default);
|
|
4055
|
+
font-family: var(--x-font-family-suggestion-group-default);
|
|
4056
|
+
font-size: var(--x-size-font-suggestion-group-default);
|
|
4057
|
+
line-height: var(--x-size-line-height-suggestion-group-default);
|
|
4058
|
+
font-weight: var(--x-number-font-weight-suggestion-group-default);
|
|
4059
|
+
cursor: pointer;
|
|
4060
|
+
padding-top: var(--x-size-padding-top-suggestion-group-default);
|
|
4061
|
+
padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
|
|
4062
|
+
gap: var(--x-size-gap-suggestion-group-default);
|
|
4063
|
+
border-style: solid;
|
|
4064
|
+
border-top-width: var(--x-size-border-width-top-suggestion-group-default);
|
|
4065
|
+
border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
|
|
4066
|
+
border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
|
|
4067
|
+
}
|
|
4068
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
4069
|
+
.x-suggestion-group {
|
|
4070
|
+
gap: 0;
|
|
4071
|
+
}
|
|
4072
|
+
.x-suggestion-group > *:not(:last-child) {
|
|
4073
|
+
margin-right: var(--x-size-gap-suggestion-group-default);
|
|
4074
|
+
}
|
|
4075
|
+
}
|
|
4076
|
+
.x-suggestion-group .x-suggestion {
|
|
4077
|
+
padding: 0;
|
|
4078
|
+
flex: 1 1 auto;
|
|
4079
|
+
border: none;
|
|
4080
|
+
}
|
|
4081
|
+
.x-suggestion-group .x-button {
|
|
4082
|
+
--x-color-background-button-default: transparent;
|
|
4083
|
+
--x-color-border-button-default: transparent;
|
|
4084
|
+
--x-color-text-button-default: var(--x-color-text-suggestion-group-default);
|
|
4085
|
+
--x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
|
|
4086
|
+
--x-size-padding-right-button-default: 0;
|
|
4087
|
+
--x-size-padding-left-button-default: 0;
|
|
4088
|
+
border: none;
|
|
4089
|
+
}
|
|
3974
4090
|
:root {
|
|
3975
4091
|
--x-string-align-items-suggestion-default: center;
|
|
3976
4092
|
--x-color-text-suggestion-default: var(--x-color-text-default);
|
|
@@ -4283,122 +4399,6 @@
|
|
|
4283
4399
|
--x-color-text-suggestion-default-matching-curated
|
|
4284
4400
|
);
|
|
4285
4401
|
}
|
|
4286
|
-
:root {
|
|
4287
|
-
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
4288
|
-
--x-color-text-suggestion-group-matching-part-default: var(
|
|
4289
|
-
--x-color-text-suggestion-matching-part-default
|
|
4290
|
-
);
|
|
4291
|
-
--x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
|
|
4292
|
-
--x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
|
|
4293
|
-
--x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
|
|
4294
|
-
--x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
|
|
4295
|
-
--x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
|
|
4296
|
-
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
4297
|
-
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
4298
|
-
--x-size-border-width-suggestion-group-default: 0;
|
|
4299
|
-
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
4300
|
-
--x-size-border-width-right-suggestion-group-default: var(
|
|
4301
|
-
--x-size-border-width-suggestion-default
|
|
4302
|
-
);
|
|
4303
|
-
--x-size-border-width-bottom-suggestion-group-default: var(
|
|
4304
|
-
--x-size-border-width-suggestion-default
|
|
4305
|
-
);
|
|
4306
|
-
--x-size-border-width-left-suggestion-group-default: var(
|
|
4307
|
-
--x-size-border-width-suggestion-default
|
|
4308
|
-
);
|
|
4309
|
-
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
4310
|
-
--x-size-border-radius-top-left-suggestion-group-default: var(
|
|
4311
|
-
--x-size-border-radius-suggestion-default
|
|
4312
|
-
);
|
|
4313
|
-
--x-size-border-radius-top-right-suggestion-group-default: var(
|
|
4314
|
-
--x-size-border-radius-suggestion-default
|
|
4315
|
-
);
|
|
4316
|
-
--x-size-border-radius-bottom-right-suggestion-group-default: var(
|
|
4317
|
-
--x-size-border-radius-suggestion-default
|
|
4318
|
-
);
|
|
4319
|
-
--x-size-border-radius-bottom-left-suggestion-group-default: var(
|
|
4320
|
-
--x-size-border-radius-suggestion-default
|
|
4321
|
-
);
|
|
4322
|
-
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
4323
|
-
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
4324
|
-
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
4325
|
-
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
4326
|
-
}
|
|
4327
|
-
|
|
4328
|
-
[dir="ltr"] .x-suggestion-group {
|
|
4329
|
-
padding-left: var(--x-size-padding-left-suggestion-group-default);
|
|
4330
|
-
}
|
|
4331
|
-
|
|
4332
|
-
[dir="rtl"] .x-suggestion-group {
|
|
4333
|
-
padding-right: var(--x-size-padding-left-suggestion-group-default);
|
|
4334
|
-
}
|
|
4335
|
-
|
|
4336
|
-
[dir="ltr"] .x-suggestion-group {
|
|
4337
|
-
padding-right: var(--x-size-padding-right-suggestion-group-default);
|
|
4338
|
-
}
|
|
4339
|
-
|
|
4340
|
-
[dir="rtl"] .x-suggestion-group {
|
|
4341
|
-
padding-left: var(--x-size-padding-right-suggestion-group-default);
|
|
4342
|
-
}
|
|
4343
|
-
|
|
4344
|
-
[dir="ltr"] .x-suggestion-group {
|
|
4345
|
-
border-left-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
4346
|
-
}
|
|
4347
|
-
|
|
4348
|
-
[dir="rtl"] .x-suggestion-group {
|
|
4349
|
-
border-right-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
4350
|
-
}
|
|
4351
|
-
|
|
4352
|
-
[dir="ltr"] .x-suggestion-group {
|
|
4353
|
-
border-right-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
4354
|
-
}
|
|
4355
|
-
|
|
4356
|
-
[dir="rtl"] .x-suggestion-group {
|
|
4357
|
-
border-left-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
4358
|
-
}
|
|
4359
|
-
|
|
4360
|
-
.x-suggestion-group {
|
|
4361
|
-
display: flex;
|
|
4362
|
-
flex-flow: row nowrap;
|
|
4363
|
-
box-sizing: border-box;
|
|
4364
|
-
background-color: var(--x-color-background-suggestion-group-default);
|
|
4365
|
-
color: var(--x-color-text-suggestion-group-default);
|
|
4366
|
-
border-color: var(--x-color-border-suggestion-group-default);
|
|
4367
|
-
font-family: var(--x-font-family-suggestion-group-default);
|
|
4368
|
-
font-size: var(--x-size-font-suggestion-group-default);
|
|
4369
|
-
line-height: var(--x-size-line-height-suggestion-group-default);
|
|
4370
|
-
font-weight: var(--x-number-font-weight-suggestion-group-default);
|
|
4371
|
-
cursor: pointer;
|
|
4372
|
-
padding-top: var(--x-size-padding-top-suggestion-group-default);
|
|
4373
|
-
padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
|
|
4374
|
-
gap: var(--x-size-gap-suggestion-group-default);
|
|
4375
|
-
border-style: solid;
|
|
4376
|
-
border-top-width: var(--x-size-border-width-top-suggestion-group-default);
|
|
4377
|
-
border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
|
|
4378
|
-
border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
|
|
4379
|
-
}
|
|
4380
|
-
@media not all and (min-resolution: 0.001dpcm) {
|
|
4381
|
-
.x-suggestion-group {
|
|
4382
|
-
gap: 0;
|
|
4383
|
-
}
|
|
4384
|
-
.x-suggestion-group > *:not(:last-child) {
|
|
4385
|
-
margin-right: var(--x-size-gap-suggestion-group-default);
|
|
4386
|
-
}
|
|
4387
|
-
}
|
|
4388
|
-
.x-suggestion-group .x-suggestion {
|
|
4389
|
-
padding: 0;
|
|
4390
|
-
flex: 1 1 auto;
|
|
4391
|
-
border: none;
|
|
4392
|
-
}
|
|
4393
|
-
.x-suggestion-group .x-button {
|
|
4394
|
-
--x-color-background-button-default: transparent;
|
|
4395
|
-
--x-color-border-button-default: transparent;
|
|
4396
|
-
--x-color-text-button-default: var(--x-color-text-suggestion-group-default);
|
|
4397
|
-
--x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
|
|
4398
|
-
--x-size-padding-right-button-default: 0;
|
|
4399
|
-
--x-size-padding-left-button-default: 0;
|
|
4400
|
-
border: none;
|
|
4401
|
-
}
|
|
4402
4402
|
:root {
|
|
4403
4403
|
--x-color-background-sliding-panel: var(--x-color-base-neutral-100);
|
|
4404
4404
|
--x-size-width-sliding-panel-gradient: var(--x-size-base-09);
|
|
@@ -8631,13 +8631,6 @@
|
|
|
8631
8631
|
--x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
|
|
8632
8632
|
--x-size-line-height-button-default: var(--x-size-line-height-text);
|
|
8633
8633
|
}
|
|
8634
|
-
:root {
|
|
8635
|
-
--x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
|
|
8636
|
-
--x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
|
|
8637
|
-
--x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
|
|
8638
|
-
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8639
|
-
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8640
|
-
}
|
|
8641
8634
|
:root {
|
|
8642
8635
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
8643
8636
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -8730,6 +8723,13 @@
|
|
|
8730
8723
|
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8731
8724
|
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8732
8725
|
}
|
|
8726
|
+
:root {
|
|
8727
|
+
--x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
|
|
8728
|
+
--x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
|
|
8729
|
+
--x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
|
|
8730
|
+
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8731
|
+
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8732
|
+
}
|
|
8733
8733
|
|
|
8734
8734
|
.x-button--card.x-button,
|
|
8735
8735
|
.x-button--card .x-button {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## DeviceDetector class
|
|
6
6
|
|
|
7
|
-
This component helps
|
|
7
|
+
This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property.
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
@@ -43,7 +43,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
43
43
|
| [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time. |
|
|
44
44
|
| [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
|
|
45
45
|
| [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
|
|
46
|
-
| [DeviceDetector](./x-components.devicedetector.md) | This component helps
|
|
46
|
+
| [DeviceDetector](./x-components.devicedetector.md) | This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
|
|
47
47
|
| [DirectionalFocusNavigationService](./x-components.directionalfocusnavigationservice.md) | Implementation of [SpatialNavigation](./x-components.spatialnavigation.md) using directional focus. |
|
|
48
48
|
| [DisableAnimationMixin](./x-components.disableanimationmixin.md) | Mixin to ease disabling animations. |
|
|
49
49
|
| [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md) | <p>Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.</p><p>It provides a default slot, with some utils bind, to customize the whole component; and two named slots <code>apply-content</code> and <code>clear-content</code> to override each button content.</p><p>If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.</p><p>If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default.</p> |
|
|
@@ -6,7 +6,7 @@ title: DeviceDetector
|
|
|
6
6
|
|
|
7
7
|
# DeviceDetector
|
|
8
8
|
|
|
9
|
-
This component helps
|
|
9
|
+
This component helps to detect or setting a device, that can be used later to create different
|
|
10
10
|
layouts optimized for different devices. This detected device is available under the {@link
|
|
11
11
|
XComponentAliasAPI.device} property.
|
|
12
12
|
|
|
@@ -31,7 +31,7 @@ name given an object containing all the possible breakpoints.
|
|
|
31
31
|
|
|
32
32
|
_Try resizing the browser window!_
|
|
33
33
|
|
|
34
|
-
```vue
|
|
34
|
+
```vue live
|
|
35
35
|
<template>
|
|
36
36
|
<div>
|
|
37
37
|
<DeviceDetector :breakpoints="breakpoints" />
|
|
@@ -67,7 +67,7 @@ matter what the window width is.
|
|
|
67
67
|
|
|
68
68
|
_Try resizing the window to check that it never changes_
|
|
69
69
|
|
|
70
|
-
```vue
|
|
70
|
+
```vue live
|
|
71
71
|
<template>
|
|
72
72
|
<div>
|
|
73
73
|
<DeviceDetector force="mobile" :breakpoints="breakpoints" />
|
|
@@ -103,7 +103,7 @@ payload. This device is stored in a data variable and then displayed.
|
|
|
103
103
|
|
|
104
104
|
_Try resizing the browser window!_
|
|
105
105
|
|
|
106
|
-
```vue
|
|
106
|
+
```vue live
|
|
107
107
|
<template>
|
|
108
108
|
<div>
|
|
109
109
|
<DeviceDetector :breakpoints="breakpoints" @DeviceProvided="storeDevice" />
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { throttle } from '../../../utils/throttle';\n import { deviceXModule } from '../x-module';\n\n /** Alias just to improve code readiness. */\n type Device = string;\n /** Alias just to improve code readiness. */\n type MaxWidth = number;\n\n /**\n * This component helps
|
|
1
|
+
{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { throttle } from '../../../utils/throttle';\n import { deviceXModule } from '../x-module';\n\n /** Alias just to improve code readiness. */\n type Device = string;\n /** Alias just to improve code readiness. */\n type MaxWidth = number;\n\n /**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(deviceXModule)],\n components: {\n GlobalEvents\n }\n })\n export default class DeviceDetector extends Vue {\n /**\n * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n * the max width in pixels for that device.\n *\n * @public\n */\n @Prop({ default: () => ({}) })\n public readonly breakpoints!: Record<Device, MaxWidth>;\n\n /**\n * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n *\n * @public\n */\n @Prop()\n public readonly force?: Device;\n\n /**\n * Time in milliseconds to throttle the resize events used to detect the device.\n *\n * @public\n */\n @Prop({ default: 100 })\n public readonly throttleMs!: number;\n\n /**\n * The width in pixels of the window where the app is being rendered.\n *\n * @internal\n */\n protected windowWidthPx: number | null = null;\n\n /**\n * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n *\n * @internal\n */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n /**\n * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n * max width.\n *\n * @returns A list of the breakpoints sorted by its max width in ascending order.\n *\n * @internal\n */\n protected get sortedBreakpoints(): [Device, MaxWidth][] {\n return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n }\n\n /**\n * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n * prop.\n *\n * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n * prop.\n *\n * @internal\n */\n @XEmit('DeviceProvided')\n public get detectedDevice(): string | null {\n if (this.force) {\n return this.force;\n } else if (this.windowWidthPx === null) {\n return null;\n } else {\n return (\n this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n );\n }\n }\n\n /**\n * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n *\n * @internal\n */\n protected storeWindowWidth(): void {\n this.windowWidthPx = window.innerWidth;\n }\n\n /**\n * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n * {@link DeviceDetector.throttleMs}.\n *\n * @param throttleMs - The new duration in milliseconds for the throttle.\n *\n * @internal\n */\n @Watch('throttleMs', { immediate: true })\n protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n }\n\n /**\n * Initialises the store window width.\n *\n * @remarks This is done this way to ensure SSR compatibility.\n *\n * @internal\n */\n mounted(): void {\n this.storeWindowWidth();\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](./../../api/x-components.devicexevents.md)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n <div>\n <DeviceDetector :breakpoints=\"breakpoints\" />\n {{ $x.device }}\n </div>\n</template>\n\n<script>\n import { DeviceDetector } from '@empathyco/x-components/device';\n\n export default {\n name: 'DeviceDemo',\n components: {\n DeviceDetector\n },\n data() {\n return {\n breakpoints: {\n mobile: 600,\n tablet: 900,\n desktop: Number.POSITIVE_INFINITY\n }\n };\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n <div>\n <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n {{ $x.device }}\n </div>\n</template>\n\n<script>\n import { DeviceDetector } from '@empathyco/x-components/device';\n\n export default {\n name: 'DeviceDemo',\n components: {\n DeviceDetector\n },\n data() {\n return {\n breakpoints: {\n mobile: 600,\n tablet: 900,\n desktop: Number.POSITIVE_INFINITY\n }\n };\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n <div>\n <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n {{ device }}\n </div>\n</template>\n\n<script>\n import { DeviceDetector } from '@empathyco/x-components/device';\n\n export default {\n name: 'DeviceDemo',\n components: {\n DeviceDetector\n },\n data() {\n return {\n device: 'unknown',\n breakpoints: {\n mobile: 600,\n tablet: 900,\n desktop: Number.POSITIVE_INFINITY\n }\n };\n },\n methods: {\n storeDevice(device) {\n this.device = device;\n }\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,7 +8,7 @@ import { throttle } from '../../../utils/throttle.js';
|
|
|
8
8
|
import { deviceXModule } from '../x-module.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* This component helps
|
|
11
|
+
* This component helps to detect or setting a device, that can be used later to create
|
|
12
12
|
* different layouts optimized for different devices. This detected device is available under
|
|
13
13
|
* the {@link XComponentAliasAPI.device} property.
|
|
14
14
|
*
|
package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"device-detector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { throttle } from '../../../utils/throttle';\n import { deviceXModule } from '../x-module';\n\n /** Alias just to improve code readiness. */\n type Device = string;\n /** Alias just to improve code readiness. */\n type MaxWidth = number;\n\n /**\n * This component helps
|
|
1
|
+
{"version":3,"file":"device-detector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { throttle } from '../../../utils/throttle';\n import { deviceXModule } from '../x-module';\n\n /** Alias just to improve code readiness. */\n type Device = string;\n /** Alias just to improve code readiness. */\n type MaxWidth = number;\n\n /**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(deviceXModule)],\n components: {\n GlobalEvents\n }\n })\n export default class DeviceDetector extends Vue {\n /**\n * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n * the max width in pixels for that device.\n *\n * @public\n */\n @Prop({ default: () => ({}) })\n public readonly breakpoints!: Record<Device, MaxWidth>;\n\n /**\n * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n *\n * @public\n */\n @Prop()\n public readonly force?: Device;\n\n /**\n * Time in milliseconds to throttle the resize events used to detect the device.\n *\n * @public\n */\n @Prop({ default: 100 })\n public readonly throttleMs!: number;\n\n /**\n * The width in pixels of the window where the app is being rendered.\n *\n * @internal\n */\n protected windowWidthPx: number | null = null;\n\n /**\n * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n *\n * @internal\n */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n /**\n * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n * max width.\n *\n * @returns A list of the breakpoints sorted by its max width in ascending order.\n *\n * @internal\n */\n protected get sortedBreakpoints(): [Device, MaxWidth][] {\n return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n }\n\n /**\n * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n * prop.\n *\n * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n * prop.\n *\n * @internal\n */\n @XEmit('DeviceProvided')\n public get detectedDevice(): string | null {\n if (this.force) {\n return this.force;\n } else if (this.windowWidthPx === null) {\n return null;\n } else {\n return (\n this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n );\n }\n }\n\n /**\n * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n *\n * @internal\n */\n protected storeWindowWidth(): void {\n this.windowWidthPx = window.innerWidth;\n }\n\n /**\n * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n * {@link DeviceDetector.throttleMs}.\n *\n * @param throttleMs - The new duration in milliseconds for the throttle.\n *\n * @internal\n */\n @Watch('throttleMs', { immediate: true })\n protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n }\n\n /**\n * Initialises the store window width.\n *\n * @remarks This is done this way to ensure SSR compatibility.\n *\n * @internal\n */\n mounted(): void {\n this.storeWindowWidth();\n }\n }\n"],"names":[],"mappings":";;;;;;;;;AAkBE;;;;;;AAMG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAAhC,IAAA,WAAA,GAAA;;AA0Bb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;AAE9C;;;;AAIG;;AAEO,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAqE7D;AAnEC;;;;;;;AAOG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;KAC3F;AAED;;;;;;;;AAQG;AAEH,IAAA,IAAW,cAAc,GAAA;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACnB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AAAM,aAAA;AACL,YAAA,QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,aAAc,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EACrF;AACH,SAAA;KACF;AAED;;;;AAIG;IACO,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;KACxC;AAED;;;;;;;AAOG;AAEO,IAAA,+BAA+B,CAAC,UAAkB,EAAA;;QAE1D,IAAI,CAAC,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AApGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACwB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACa,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCpC,UAAA,CAAA;IADC,KAAK,CAAC,gBAAgB,CAAC;AAWvB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAoBD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAIxC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,CAAA;AAhGkB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACxC,QAAA,UAAU,EAAE;YACV,YAAY;AACb,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA4GlC,CAAA;aA5GoB,cAAc;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.403",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"access": "public",
|
|
144
144
|
"directory": "dist"
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "0d3d088f94be1a63002fb58a79545ddef0cff0dd"
|
|
147
147
|
}
|
|
@@ -13764,7 +13764,7 @@
|
|
|
13764
13764
|
{
|
|
13765
13765
|
"kind": "Class",
|
|
13766
13766
|
"canonicalReference": "@empathyco/x-components!DeviceDetector:class",
|
|
13767
|
-
"docComment": "/**\n * This component helps
|
|
13767
|
+
"docComment": "/**\n * This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\n",
|
|
13768
13768
|
"excerptTokens": [
|
|
13769
13769
|
{
|
|
13770
13770
|
"kind": "Content",
|
|
@@ -4,7 +4,7 @@ type Device = string;
|
|
|
4
4
|
/** Alias just to improve code readiness. */
|
|
5
5
|
type MaxWidth = number;
|
|
6
6
|
/**
|
|
7
|
-
* This component helps
|
|
7
|
+
* This component helps to detect or setting a device, that can be used later to create
|
|
8
8
|
* different layouts optimized for different devices. This detected device is available under
|
|
9
9
|
* the {@link XComponentAliasAPI.device} property.
|
|
10
10
|
*
|