@empathyco/x-components 3.0.0-alpha.253 → 3.0.0-alpha.255
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 +29 -0
- package/design-system/default-theme.css +100 -100
- package/docs/API-reference/api/{x-components.extraparams.mounted.md → x-components.extraparams.created.md} +3 -3
- package/docs/API-reference/api/x-components.extraparams.md +1 -1
- package/docs/API-reference/api/x-components.nextqueriesxevents.md +1 -1
- package/docs/API-reference/api/{x-components.nextqueriesxevents.nextquerypreviewmounted.md → x-components.nextqueriesxevents.nextquerypreviewmountedhook.md} +3 -3
- package/docs/API-reference/api/x-components.nextquerypreview.md +1 -1
- package/docs/API-reference/api/x-components.nextquerypreview.mounted.md +1 -1
- package/docs/API-reference/api/x-components.queriespreviewxevents.md +1 -1
- package/docs/API-reference/api/{x-components.queriespreviewxevents.querypreviewremoved.md → x-components.queriespreviewxevents.querypreviewunmountedhook.md} +3 -3
- package/docs/API-reference/components/next-queries/x-components.next-query-preview.md +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query-preview.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js +2 -2
- package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/next-queries/wiring.js +1 -1
- package/js/x-modules/next-queries/wiring.js.map +1 -1
- package/js/x-modules/queries-preview/wiring.js +1 -1
- package/js/x-modules/queries-preview/wiring.js.map +1 -1
- package/js/x-modules/scroll/components/main-scroll-item.vue.js +4 -1
- package/js/x-modules/scroll/components/main-scroll-item.vue.js.map +1 -1
- package/package.json +3 -3
- package/report/x-components.api.json +20 -20
- package/report/x-components.api.md +5 -5
- package/types/x-modules/extra-params/components/extra-params.vue.d.ts +1 -1
- package/types/x-modules/next-queries/components/next-query-preview.vue.d.ts +1 -1
- package/types/x-modules/next-queries/events.types.d.ts +1 -1
- package/types/x-modules/next-queries/events.types.d.ts.map +1 -1
- package/types/x-modules/next-queries/wiring.d.ts +1 -1
- package/types/x-modules/queries-preview/events.types.d.ts +1 -1
- package/types/x-modules/queries-preview/events.types.d.ts.map +1 -1
- package/types/x-modules/queries-preview/wiring.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.255](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.254...@empathyco/x-components@3.0.0-alpha.255) (2022-12-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @empathyco/x-components
|
|
9
|
+
|
|
10
|
+
# Change Log
|
|
11
|
+
|
|
12
|
+
All notable changes to this project will be documented in this file. See
|
|
13
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
14
|
+
|
|
15
|
+
## [3.0.0-alpha.254](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.253...@empathyco/x-components@3.0.0-alpha.254) (2022-12-20)
|
|
16
|
+
|
|
17
|
+
### ⚠ BREAKING CHANGES
|
|
18
|
+
|
|
19
|
+
- Rename `NextQueryPreviewMounted` to `NextQueryPreviewMountedHook` and `QueryPreviewRemoved` to
|
|
20
|
+
`QueryPreviewUnmountedHook`
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
- Rename lifecycle hook events (#939)
|
|
25
|
+
([e626b89](https://github.com/empathyco/x/commit/e626b899849b6742e0bce57d86a8ff89718817bf)),
|
|
26
|
+
closes [EX-7580](https://searchbroker.atlassian.net/browse/EX-7580)
|
|
27
|
+
- **scroll:** capture listeners in MainScrollItem component (#942)
|
|
28
|
+
([2719a3d](https://github.com/empathyco/x/commit/2719a3dd6c1408f9413ecbee4ebf3c46bf24eea2))
|
|
29
|
+
|
|
30
|
+
# Change Log
|
|
31
|
+
|
|
32
|
+
All notable changes to this project will be documented in this file. See
|
|
33
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
34
|
+
|
|
6
35
|
## [3.0.0-alpha.253](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.252...@empathyco/x-components@3.0.0-alpha.253) (2022-12-19)
|
|
7
36
|
|
|
8
37
|
**Note:** Version bump only for package @empathyco/x-components
|
|
@@ -2032,6 +2032,106 @@
|
|
|
2032
2032
|
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
2033
2033
|
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
2034
2034
|
}
|
|
2035
|
+
|
|
2036
|
+
[dir="ltr"] .x-suggestion-group {
|
|
2037
|
+
padding-left: var(--x-size-padding-left-suggestion-group-default);
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
[dir="rtl"] .x-suggestion-group {
|
|
2041
|
+
padding-right: var(--x-size-padding-left-suggestion-group-default);
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
[dir="ltr"] .x-suggestion-group {
|
|
2045
|
+
padding-right: var(--x-size-padding-right-suggestion-group-default);
|
|
2046
|
+
}
|
|
2047
|
+
|
|
2048
|
+
[dir="rtl"] .x-suggestion-group {
|
|
2049
|
+
padding-left: var(--x-size-padding-right-suggestion-group-default);
|
|
2050
|
+
}
|
|
2051
|
+
|
|
2052
|
+
[dir="ltr"] .x-suggestion-group {
|
|
2053
|
+
border-left-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
[dir="rtl"] .x-suggestion-group {
|
|
2057
|
+
border-right-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
2058
|
+
}
|
|
2059
|
+
|
|
2060
|
+
[dir="ltr"] .x-suggestion-group {
|
|
2061
|
+
border-right-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
[dir="rtl"] .x-suggestion-group {
|
|
2065
|
+
border-left-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
2066
|
+
}
|
|
2067
|
+
|
|
2068
|
+
.x-suggestion-group {
|
|
2069
|
+
display: flex;
|
|
2070
|
+
flex-flow: row nowrap;
|
|
2071
|
+
box-sizing: border-box;
|
|
2072
|
+
background-color: var(--x-color-background-suggestion-group-default);
|
|
2073
|
+
color: var(--x-color-text-suggestion-group-default);
|
|
2074
|
+
border-color: var(--x-color-border-suggestion-group-default);
|
|
2075
|
+
font-family: var(--x-font-family-suggestion-group-default);
|
|
2076
|
+
font-size: var(--x-size-font-suggestion-group-default);
|
|
2077
|
+
line-height: var(--x-size-line-height-suggestion-group-default);
|
|
2078
|
+
font-weight: var(--x-number-font-weight-suggestion-group-default);
|
|
2079
|
+
cursor: pointer;
|
|
2080
|
+
padding-top: var(--x-size-padding-top-suggestion-group-default);
|
|
2081
|
+
padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
|
|
2082
|
+
gap: var(--x-size-gap-suggestion-group-default);
|
|
2083
|
+
border-style: solid;
|
|
2084
|
+
border-top-width: var(--x-size-border-width-top-suggestion-group-default);
|
|
2085
|
+
border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
|
|
2086
|
+
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);
|
|
2087
|
+
}
|
|
2088
|
+
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
|
|
2089
|
+
.x-suggestion-group {
|
|
2090
|
+
gap: 0;
|
|
2091
|
+
}
|
|
2092
|
+
.x-suggestion-group > *:not(:last-child) {
|
|
2093
|
+
margin-right: var(--x-size-gap-suggestion-group-default);
|
|
2094
|
+
}
|
|
2095
|
+
}
|
|
2096
|
+
.x-suggestion-group .x-suggestion {
|
|
2097
|
+
padding: 0;
|
|
2098
|
+
flex: 1 1 auto;
|
|
2099
|
+
border: none;
|
|
2100
|
+
}
|
|
2101
|
+
.x-suggestion-group .x-button {
|
|
2102
|
+
--x-color-background-button-default: transparent;
|
|
2103
|
+
--x-color-border-button-default: transparent;
|
|
2104
|
+
--x-color-text-button-default: var(--x-color-text-suggestion-group-default);
|
|
2105
|
+
--x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
|
|
2106
|
+
--x-size-padding-right-button-default: 0;
|
|
2107
|
+
--x-size-padding-left-button-default: 0;
|
|
2108
|
+
border: none;
|
|
2109
|
+
}
|
|
2110
|
+
:root {
|
|
2111
|
+
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
2112
|
+
--x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
|
|
2113
|
+
--x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
|
|
2114
|
+
--x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
|
|
2115
|
+
--x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
|
|
2116
|
+
--x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
|
|
2117
|
+
--x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
|
|
2118
|
+
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
2119
|
+
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
2120
|
+
--x-size-border-width-suggestion-group-default: 0;
|
|
2121
|
+
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2122
|
+
--x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2123
|
+
--x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2124
|
+
--x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2125
|
+
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
2126
|
+
--x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2127
|
+
--x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2128
|
+
--x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2129
|
+
--x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2130
|
+
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
2131
|
+
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
2132
|
+
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
2133
|
+
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
2134
|
+
}
|
|
2035
2135
|
:root {
|
|
2036
2136
|
--x-string-align-items-suggestion-default: center;
|
|
2037
2137
|
--x-color-text-suggestion-default: var(--x-color-text-default);
|
|
@@ -2728,104 +2828,4 @@
|
|
|
2728
2828
|
--x-size-line-height-base-s: 16px;
|
|
2729
2829
|
--x-size-line-height-base-m: 24px;
|
|
2730
2830
|
--x-size-line-height-base-l: 32px;
|
|
2731
|
-
}
|
|
2732
|
-
:root {
|
|
2733
|
-
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
2734
|
-
--x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
|
|
2735
|
-
--x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
|
|
2736
|
-
--x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
|
|
2737
|
-
--x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
|
|
2738
|
-
--x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
|
|
2739
|
-
--x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
|
|
2740
|
-
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
2741
|
-
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
2742
|
-
--x-size-border-width-suggestion-group-default: 0;
|
|
2743
|
-
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2744
|
-
--x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2745
|
-
--x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2746
|
-
--x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
2747
|
-
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
2748
|
-
--x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2749
|
-
--x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2750
|
-
--x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2751
|
-
--x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
2752
|
-
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
2753
|
-
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
2754
|
-
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
2755
|
-
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
2756
|
-
}
|
|
2757
|
-
|
|
2758
|
-
[dir="ltr"] .x-suggestion-group {
|
|
2759
|
-
padding-left: var(--x-size-padding-left-suggestion-group-default);
|
|
2760
|
-
}
|
|
2761
|
-
|
|
2762
|
-
[dir="rtl"] .x-suggestion-group {
|
|
2763
|
-
padding-right: var(--x-size-padding-left-suggestion-group-default);
|
|
2764
|
-
}
|
|
2765
|
-
|
|
2766
|
-
[dir="ltr"] .x-suggestion-group {
|
|
2767
|
-
padding-right: var(--x-size-padding-right-suggestion-group-default);
|
|
2768
|
-
}
|
|
2769
|
-
|
|
2770
|
-
[dir="rtl"] .x-suggestion-group {
|
|
2771
|
-
padding-left: var(--x-size-padding-right-suggestion-group-default);
|
|
2772
|
-
}
|
|
2773
|
-
|
|
2774
|
-
[dir="ltr"] .x-suggestion-group {
|
|
2775
|
-
border-left-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
2776
|
-
}
|
|
2777
|
-
|
|
2778
|
-
[dir="rtl"] .x-suggestion-group {
|
|
2779
|
-
border-right-width: var(--x-size-border-width-left-suggestion-group-default);
|
|
2780
|
-
}
|
|
2781
|
-
|
|
2782
|
-
[dir="ltr"] .x-suggestion-group {
|
|
2783
|
-
border-right-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
2784
|
-
}
|
|
2785
|
-
|
|
2786
|
-
[dir="rtl"] .x-suggestion-group {
|
|
2787
|
-
border-left-width: var(--x-size-border-width-right-suggestion-group-default);
|
|
2788
|
-
}
|
|
2789
|
-
|
|
2790
|
-
.x-suggestion-group {
|
|
2791
|
-
display: flex;
|
|
2792
|
-
flex-flow: row nowrap;
|
|
2793
|
-
box-sizing: border-box;
|
|
2794
|
-
background-color: var(--x-color-background-suggestion-group-default);
|
|
2795
|
-
color: var(--x-color-text-suggestion-group-default);
|
|
2796
|
-
border-color: var(--x-color-border-suggestion-group-default);
|
|
2797
|
-
font-family: var(--x-font-family-suggestion-group-default);
|
|
2798
|
-
font-size: var(--x-size-font-suggestion-group-default);
|
|
2799
|
-
line-height: var(--x-size-line-height-suggestion-group-default);
|
|
2800
|
-
font-weight: var(--x-number-font-weight-suggestion-group-default);
|
|
2801
|
-
cursor: pointer;
|
|
2802
|
-
padding-top: var(--x-size-padding-top-suggestion-group-default);
|
|
2803
|
-
padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
|
|
2804
|
-
gap: var(--x-size-gap-suggestion-group-default);
|
|
2805
|
-
border-style: solid;
|
|
2806
|
-
border-top-width: var(--x-size-border-width-top-suggestion-group-default);
|
|
2807
|
-
border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
|
|
2808
|
-
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);
|
|
2809
|
-
}
|
|
2810
|
-
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
|
|
2811
|
-
.x-suggestion-group {
|
|
2812
|
-
gap: 0;
|
|
2813
|
-
}
|
|
2814
|
-
.x-suggestion-group > *:not(:last-child) {
|
|
2815
|
-
margin-right: var(--x-size-gap-suggestion-group-default);
|
|
2816
|
-
}
|
|
2817
|
-
}
|
|
2818
|
-
.x-suggestion-group .x-suggestion {
|
|
2819
|
-
padding: 0;
|
|
2820
|
-
flex: 1 1 auto;
|
|
2821
|
-
border: none;
|
|
2822
|
-
}
|
|
2823
|
-
.x-suggestion-group .x-button {
|
|
2824
|
-
--x-color-background-button-default: transparent;
|
|
2825
|
-
--x-color-border-button-default: transparent;
|
|
2826
|
-
--x-color-text-button-default: var(--x-color-text-suggestion-group-default);
|
|
2827
|
-
--x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
|
|
2828
|
-
--x-size-padding-right-button-default: 0;
|
|
2829
|
-
--x-size-padding-left-button-default: 0;
|
|
2830
|
-
border: none;
|
|
2831
2831
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
2
|
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ExtraParams](./x-components.extraparams.md) > [
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ExtraParams](./x-components.extraparams.md) > [created](./x-components.extraparams.created.md)
|
|
4
4
|
|
|
5
|
-
## ExtraParams.
|
|
5
|
+
## ExtraParams.created() method
|
|
6
6
|
|
|
7
7
|
Emits the initial extra params, overriding with the state extra params, just in case, those values were already set by XComponents initialization (url, plugin config, etc.).
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
created(): void;
|
|
13
13
|
```
|
|
14
14
|
<b>Returns:</b>
|
|
15
15
|
|
|
@@ -24,6 +24,6 @@ export default class ExtraParams extends Vue
|
|
|
24
24
|
|
|
25
25
|
| Method | Modifiers | Description |
|
|
26
26
|
| --- | --- | --- |
|
|
27
|
-
| [
|
|
27
|
+
| [created()](./x-components.extraparams.created.md) | | Emits the initial extra params, overriding with the state extra params, just in case, those values were already set by XComponents initialization (url, plugin config, etc.). |
|
|
28
28
|
| [render()](./x-components.extraparams.render.md) | | |
|
|
29
29
|
|
|
@@ -19,6 +19,6 @@ export interface NextQueriesXEvents
|
|
|
19
19
|
| [NextQueriesChanged](./x-components.nextqueriesxevents.nextquerieschanged.md) | NextQuery\[\] | Next Queries have been changed. Payload: The new [next queries](./x-types.nextquery.md)<!-- -->. |
|
|
20
20
|
| [NextQueriesDisplayed](./x-components.nextqueriesxevents.nextqueriesdisplayed.md) | NextQuery\[\] | The current next queries have been displayed to the user. Payload: The displayed next queries. |
|
|
21
21
|
| [NextQueriesRequestChanged](./x-components.nextqueriesxevents.nextqueriesrequestchanged.md) | NextQueriesRequest \| null | Any property of the next-queries request has changed Payload: The new next-queries request or <code>null</code> if there is not enough data in the state to conform a valid request. |
|
|
22
|
-
| [
|
|
22
|
+
| [NextQueryPreviewMountedHook](./x-components.nextqueriesxevents.nextquerypreviewmountedhook.md) | string | The component to show a next query preview has been mounted. Payload: The next query to preview. |
|
|
23
23
|
| [UserSelectedANextQuery](./x-components.nextqueriesxevents.userselectedanextquery.md) | NextQuery | The user has selected a next-query Payload: The next query that has been selected by the user. |
|
|
24
24
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
2
|
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueriesXEvents](./x-components.nextqueriesxevents.md) > [
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueriesXEvents](./x-components.nextqueriesxevents.md) > [NextQueryPreviewMountedHook](./x-components.nextqueriesxevents.nextquerypreviewmountedhook.md)
|
|
4
4
|
|
|
5
|
-
## NextQueriesXEvents.
|
|
5
|
+
## NextQueriesXEvents.NextQueryPreviewMountedHook property
|
|
6
6
|
|
|
7
7
|
The component to show a next query preview has been mounted. Payload: The next query to preview.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
NextQueryPreviewMountedHook: string;
|
|
13
13
|
```
|
|
@@ -26,5 +26,5 @@ export default class NextQueryPreview extends Vue
|
|
|
26
26
|
|
|
27
27
|
| Method | Modifiers | Description |
|
|
28
28
|
| --- | --- | --- |
|
|
29
|
-
| [mounted()](./x-components.nextquerypreview.mounted.md) | | The component emits the
|
|
29
|
+
| [mounted()](./x-components.nextquerypreview.mounted.md) | | The component emits the NextQueryPreviewMountedHook event to retrieve the results preview of the next query. |
|
|
30
30
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## NextQueryPreview.mounted() method
|
|
6
6
|
|
|
7
|
-
The component emits the
|
|
7
|
+
The component emits the NextQueryPreviewMountedHook event to retrieve the results preview of the next query.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
@@ -16,6 +16,6 @@ export interface QueriesPreviewXEvents
|
|
|
16
16
|
|
|
17
17
|
| Property | Type | Description |
|
|
18
18
|
| --- | --- | --- |
|
|
19
|
-
| [QueryPreviewRemoved](./x-components.queriespreviewxevents.querypreviewremoved.md) | string | The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed. |
|
|
20
19
|
| [QueryPreviewRequestChanged](./x-components.queriespreviewxevents.querypreviewrequestchanged.md) | SearchRequest | Any property of the queries preview request has changed. Payload: The new [request](./x-types.searchrequest.md)<!-- -->. |
|
|
20
|
+
| [QueryPreviewUnmountedHook](./x-components.queriespreviewxevents.querypreviewunmountedhook.md) | string | The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed. |
|
|
21
21
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
2
|
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) > [
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) > [QueryPreviewUnmountedHook](./x-components.queriespreviewxevents.querypreviewunmountedhook.md)
|
|
4
4
|
|
|
5
|
-
## QueriesPreviewXEvents.
|
|
5
|
+
## QueriesPreviewXEvents.QueryPreviewUnmountedHook property
|
|
6
6
|
|
|
7
7
|
The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
QueryPreviewUnmountedHook: string;
|
|
13
13
|
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State, xComponentMixin, XEmit } from '../../../components';\n import { extraParamsXModule } from '../x-module';\n\n /**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n
|
|
1
|
+
{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State, xComponentMixin, XEmit } from '../../../components';\n import { extraParamsXModule } from '../x-module';\n\n /**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n created(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`][1]\n\n[1](./../../api/x-components.extraparamsxevents.extraparamsprovided.md)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n export default {\n name: 'ExtraParamsDemo',\n components: {\n ExtraParams\n },\n data() {\n return {\n values: {\n warehouse: 1234\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -142,7 +142,7 @@ let ExtraParams = class ExtraParams extends Vue {
|
|
|
142
142
|
* Emits the initial extra params, overriding with the state extra params, just in case, those
|
|
143
143
|
* values were already set by XComponents initialization (url, plugin config, etc.).
|
|
144
144
|
*/
|
|
145
|
-
|
|
145
|
+
created() {
|
|
146
146
|
this.$x.emit('ExtraParamsInitialized', { ...this.values });
|
|
147
147
|
this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });
|
|
148
148
|
}
|
package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n
|
|
1
|
+
{"version":3,"file":"extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n /**\n * Emits the initial extra params, overriding with the state extra params, just in case, those\n * values were already set by XComponents initialization (url, plugin config, etc.).\n */\n created(): void {\n this.$x.emit('ExtraParamsInitialized', { ...this.values });\n this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n }\n\n /**\n * (Required) A Dictionary where the keys are the extra param names and its values.\n *\n * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n * component is rendered or the values changed.\n *\n * @public\n */\n @XEmit('ExtraParamsProvided', { deep: true })\n @Prop({ required: true })\n public values!: Dictionary<unknown>;\n\n /**\n * State extra params. Used to override the initial extra params.\n */\n @State('extraParams', 'params')\n public storeExtraParams!: Dictionary<unknown>;\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;AASA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;;;;;IAK1C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;KACnF;;IAqBD,MAAM,MAAW;CAClB,CAAA;AAVC;IAFC,KAAK,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5C,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;2CACW;AAMpC;IADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;qDACe;AA1B3B,WAAW;IAH/B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,WAAW,CA8B/B;aA9BoB,WAAW;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n <!--\n @slot Next Query Preview default slot.\n @binding {NextQuery} suggestion - Next Query suggestion data\n @binding {Result[]} results - The results preview of the next query\n @binding {number} totalResults - The total results of the search request\n -->\n <slot\n :suggestion=\"suggestion\"\n :results=\"suggestionResults.items\"\n :totalResults=\"suggestionResults.totalResults\"\n >\n <li\n v-for=\"result in suggestionResults.items\"\n :key=\"result.id\"\n class=\"x-next-query-preview__item\"\n data-test=\"next-query-preview-item\"\n >\n <!--\n @slot Next Query Preview result slot.\n @binding {Result} result - A Next Query Preview result\n -->\n <slot name=\"result\" :result=\"result\">\n <span data-test=\"result-name\">{{ result.name }}</span>\n </slot>\n </li>\n </slot>\n </ul>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NextQuery, PreviewResults } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { nextQueriesXModule } from '../x-module';\n import { State } from '../../../components/decorators/store.decorators';\n\n /**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueryPreview extends Vue {\n /**\n * The next query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected suggestion!: NextQuery;\n\n /**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The results preview of the next queries mounted.\n * It is a dictionary, indexed by the next query query.\n */\n @State('nextQueries', 'resultsPreview')\n public previewResults!: Dictionary<PreviewResults>;\n\n /**\n * The component emits the
|
|
1
|
+
{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n <!--\n @slot Next Query Preview default slot.\n @binding {NextQuery} suggestion - Next Query suggestion data\n @binding {Result[]} results - The results preview of the next query\n @binding {number} totalResults - The total results of the search request\n -->\n <slot\n :suggestion=\"suggestion\"\n :results=\"suggestionResults.items\"\n :totalResults=\"suggestionResults.totalResults\"\n >\n <li\n v-for=\"result in suggestionResults.items\"\n :key=\"result.id\"\n class=\"x-next-query-preview__item\"\n data-test=\"next-query-preview-item\"\n >\n <!--\n @slot Next Query Preview result slot.\n @binding {Result} result - A Next Query Preview result\n -->\n <slot name=\"result\" :result=\"result\">\n <span data-test=\"result-name\">{{ result.name }}</span>\n </slot>\n </li>\n </slot>\n </ul>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NextQuery, PreviewResults } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { nextQueriesXModule } from '../x-module';\n import { State } from '../../../components/decorators/store.decorators';\n\n /**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueryPreview extends Vue {\n /**\n * The next query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected suggestion!: NextQuery;\n\n /**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The results preview of the next queries mounted.\n * It is a dictionary, indexed by the next query query.\n */\n @State('nextQueries', 'resultsPreview')\n public previewResults!: Dictionary<PreviewResults>;\n\n /**\n * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n * of the next query.\n */\n mounted(): void {\n this.$x.emit('NextQueryPreviewMountedHook', this.suggestion.query);\n }\n\n /**\n * Gets from the state the results preview of the next query.\n *\n * @returns The results preview of the actual next query.\n */\n public get suggestionResults(): PreviewResults | undefined {\n const previewResults = this.previewResults[this.suggestion.query];\n\n return previewResults\n ? {\n ...previewResults,\n items: previewResults.items.slice(0, this.maxItemsToRender)\n }\n : undefined;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the `NextQueryPreviewMountedHook` when it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n export default {\n name: 'NextQueryPreviewDemo',\n components: {\n NextQueryPreview\n },\n data() {\n return {\n suggestion: {\n modelName: 'NextQuery',\n query: 'tshirt',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n <p>Total results: {{ totalResults }}</p>\n <SlidingPanel :resetOnContentChange=\"false\">\n <article\n v-for=\"result in results\"\n :key=\"result.id\"\n class=\"x-result\"\n style=\"max-width: 300px; overflow: hidden\"\n >\n <BaseResultLink :result=\"result\">\n <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n </BaseResultLink>\n <div class=\"x-result__description\">\n <BaseResultLink :result=\"result\">\n <h1 class=\"x-title3\">{{ result.name }}</h1>\n </BaseResultLink>\n </div>\n </article>\n </SlidingPanel>\n </NextQueryPreview>\n</template>\n\n<script>\n import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueryPreviewDemoOverridingSlot',\n components: {\n NextQueryPreview,\n SlidingPanel,\n BaseResultLink,\n BaseResultImage\n },\n data() {\n return {\n suggestion: {\n modelName: 'NextQuery',\n query: 'tshirt',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n <span>{{ result.id }}</span>\n <span>{{ result.name }}</span>\n </NextQueryPreview>\n</template>\n\n<script>\n import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n export default {\n name: 'NextQueryPreviewDemoOverridingResultSlot',\n components: {\n NextQueryPreview\n },\n data() {\n return {\n suggestion: {\n modelName: 'NextQuery',\n query: 'tshirt',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n <NextQueryPreview\n :maxItemsToRender=\"maxItemsToRender\"\n :suggestion=\"suggestion\"\n #default=\"{ results }\"\n >\n <BaseGrid #default=\"{ item }\" :items=\"results\">\n <BaseResultLink :result=\"item\">\n <BaseResultImage :result=\"item\" />\n </BaseResultLink>\n </BaseGrid>\n </NextQueryPreview>\n</template>\n\n<script>\n import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n export default {\n name: 'NextQueryPreviewDemo',\n components: {\n BaseGrid,\n BaseResultImage,\n BaseResultLink,\n NextQueryPreview\n },\n data() {\n return {\n maxItemsToRender: 4,\n suggestion: {\n modelName: 'NextQuery',\n query: 'tshirt',\n facets: []\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -14,11 +14,11 @@ import { State } from '../../../components/decorators/store.decorators.js';
|
|
|
14
14
|
*/
|
|
15
15
|
let NextQueryPreview = class NextQueryPreview extends Vue {
|
|
16
16
|
/**
|
|
17
|
-
* The component emits the
|
|
17
|
+
* The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
|
|
18
18
|
* of the next query.
|
|
19
19
|
*/
|
|
20
20
|
mounted() {
|
|
21
|
-
this.$x.emit('
|
|
21
|
+
this.$x.emit('NextQueryPreviewMountedHook', this.suggestion.query);
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* Gets from the state the results preview of the next query.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n /**\n * The next query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected suggestion!: NextQuery;\n\n /**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The results preview of the next queries mounted.\n * It is a dictionary, indexed by the next query query.\n */\n @State('nextQueries', 'resultsPreview')\n public previewResults!: Dictionary<PreviewResults>;\n\n /**\n * The component emits the
|
|
1
|
+
{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n /**\n * The next query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected suggestion!: NextQuery;\n\n /**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The results preview of the next queries mounted.\n * It is a dictionary, indexed by the next query query.\n */\n @State('nextQueries', 'resultsPreview')\n public previewResults!: Dictionary<PreviewResults>;\n\n /**\n * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n * of the next query.\n */\n mounted(): void {\n this.$x.emit('NextQueryPreviewMountedHook', this.suggestion.query);\n }\n\n /**\n * Gets from the state the results preview of the next query.\n *\n * @returns The results preview of the actual next query.\n */\n public get suggestionResults(): PreviewResults | undefined {\n const previewResults = this.previewResults[this.suggestion.query];\n\n return previewResults\n ? {\n ...previewResults,\n items: previewResults.items.slice(0, this.maxItemsToRender)\n }\n : undefined;\n }\n}\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;IA8B/C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,6BAA6B,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACpE;;;;;;IAOD,IAAW,iBAAiB;QAC1B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAElE,OAAO,cAAc;cACjB;gBACE,GAAG,cAAc;gBACjB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAC5D;cACD,SAAS,CAAC;KACf;CACF,CAAA;AAxCC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;oDAC+B;AAQjC;IADC,IAAI,EAAE;0DAC6B;AAOpC;IADC,KAAK,CAAC,aAAa,EAAE,gBAAgB,CAAC;wDACY;AAxBhC,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,gBAAgB,CAiDpC;aAjDoB,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/next-queries/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport {\n NamespacedWireCommit,\n NamespacedWireCommitWithoutPayload,\n NamespacedWireDispatch,\n NamespacedWiringData\n} from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `nextQueries` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'nextQueries';\n\n/**\n * WireCommit for {@link NextQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n\n/**\n * WireCommitWithoutPayload for {@link NextQueriesXModule}.\n */\nconst wireCommitWithoutPayload: NamespacedWireCommitWithoutPayload<typeof moduleName> =\n namespacedWireCommitWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link NextQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n\n/**\n * Sets the next queries state `query`.\n *\n * @public\n */\nexport const setNextQueriesQuery = wireCommit('setQuery');\n\n/**\n * Sets the next queries state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the next queries state `params`.\n *\n * @public\n */\nexport const setNextQueriesExtraParams = wireCommit('setParams');\n\n/**\n * Requests and stores the next queries.\n *\n * @public\n */\nexport const fetchAndSaveNextQueriesWire = wireDispatch('fetchAndSaveNextQueries');\n\n/**\n * Sets the next queries state `query` with the last query in history queries.\n *\n * @public\n */\nexport const setQueryFromLastHistoryQueryWire = wireDispatch('setQueryFromLastHistoryQuery');\n\n/**\n * Requests and store the next query preview results.\n *\n * @public\n */\nexport const fetchAndSaveNextQueryPreviewWire = wireDispatch(\n 'fetchAndSaveNextQueryPreview',\n ({ eventPayload: query, metadata: { location } }: NamespacedWiringData<'nextQueries'>) => {\n return {\n query,\n location\n };\n }\n);\n/**\n * Resets the next query preview results.\n *\n * @public\n */\nexport const resetResultsPreviewWire = wireCommitWithoutPayload('resetResultsPreview');\n\n/**\n * Sets the next queries state `searchedQueries` with the list of history queries.\n *\n * @public\n */\nexport const setSearchedQueries = wireCommit('setSearchedQueries');\n\n/**\n * Wiring configuration for the {@link NextQueriesXModule | next queries module}.\n *\n * @internal\n */\nexport const nextQueriesWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams\n },\n NextQueriesChanged: {\n resetResultsPreviewWire\n },\n UserAcceptedAQuery: {\n setNextQueriesQuery\n },\n SessionHistoryQueriesChanged: {\n setSearchedQueries,\n // TODO setQueryFromLastHistoryQuery it has to be called only one time\n setQueryFromLastHistoryQueryWire\n },\n NextQueriesRequestChanged: {\n fetchAndSaveNextQueriesWire\n },\n ExtraParamsChanged: {\n setNextQueriesExtraParams\n },\n
|
|
1
|
+
{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/next-queries/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport {\n NamespacedWireCommit,\n NamespacedWireCommitWithoutPayload,\n NamespacedWireDispatch,\n NamespacedWiringData\n} from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `nextQueries` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'nextQueries';\n\n/**\n * WireCommit for {@link NextQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n\n/**\n * WireCommitWithoutPayload for {@link NextQueriesXModule}.\n */\nconst wireCommitWithoutPayload: NamespacedWireCommitWithoutPayload<typeof moduleName> =\n namespacedWireCommitWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link NextQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n\n/**\n * Sets the next queries state `query`.\n *\n * @public\n */\nexport const setNextQueriesQuery = wireCommit('setQuery');\n\n/**\n * Sets the next queries state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the next queries state `params`.\n *\n * @public\n */\nexport const setNextQueriesExtraParams = wireCommit('setParams');\n\n/**\n * Requests and stores the next queries.\n *\n * @public\n */\nexport const fetchAndSaveNextQueriesWire = wireDispatch('fetchAndSaveNextQueries');\n\n/**\n * Sets the next queries state `query` with the last query in history queries.\n *\n * @public\n */\nexport const setQueryFromLastHistoryQueryWire = wireDispatch('setQueryFromLastHistoryQuery');\n\n/**\n * Requests and store the next query preview results.\n *\n * @public\n */\nexport const fetchAndSaveNextQueryPreviewWire = wireDispatch(\n 'fetchAndSaveNextQueryPreview',\n ({ eventPayload: query, metadata: { location } }: NamespacedWiringData<'nextQueries'>) => {\n return {\n query,\n location\n };\n }\n);\n/**\n * Resets the next query preview results.\n *\n * @public\n */\nexport const resetResultsPreviewWire = wireCommitWithoutPayload('resetResultsPreview');\n\n/**\n * Sets the next queries state `searchedQueries` with the list of history queries.\n *\n * @public\n */\nexport const setSearchedQueries = wireCommit('setSearchedQueries');\n\n/**\n * Wiring configuration for the {@link NextQueriesXModule | next queries module}.\n *\n * @internal\n */\nexport const nextQueriesWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams\n },\n NextQueriesChanged: {\n resetResultsPreviewWire\n },\n UserAcceptedAQuery: {\n setNextQueriesQuery\n },\n SessionHistoryQueriesChanged: {\n setSearchedQueries,\n // TODO setQueryFromLastHistoryQuery it has to be called only one time\n setQueryFromLastHistoryQueryWire\n },\n NextQueriesRequestChanged: {\n fetchAndSaveNextQueriesWire\n },\n ExtraParamsChanged: {\n setNextQueriesExtraParams\n },\n NextQueryPreviewMountedHook: {\n fetchAndSaveNextQueryPreviewWire\n }\n});\n"],"names":[],"mappings":";;;AAaA;;;;;AAKA,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC;;;;;AAKA,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAE7F;;;AAGA,MAAM,wBAAwB,GAC5B,kCAAkC,CAAC,UAAU,CAAC,CAAC;AAEjD;;;;;AAKA,MAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAEnG;;;;;MAKa,mBAAmB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE1D;;;;;AAKA,MAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;;MAKa,yBAAyB,GAAG,UAAU,CAAC,WAAW,EAAE;AAEjE;;;;;MAKa,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;;MAKa,gCAAgC,GAAG,YAAY,CAAC,8BAA8B,EAAE;AAE7F;;;;;MAKa,gCAAgC,GAAG,YAAY,CAC1D,8BAA8B,EAC9B,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAuC;IACnF,OAAO;QACL,KAAK;QACL,QAAQ;KACT,CAAC;AACJ,CAAC,EACD;AACF;;;;;MAKa,uBAAuB,GAAG,wBAAwB,CAAC,qBAAqB,EAAE;AAEvF;;;;;MAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;MAKa,iBAAiB,GAAG,YAAY,CAAC;IAC5C,mBAAmB,EAAE;QACnB,YAAY;KACb;IACD,kBAAkB,EAAE;QAClB,uBAAuB;KACxB;IACD,kBAAkB,EAAE;QAClB,mBAAmB;KACpB;IACD,4BAA4B,EAAE;QAC5B,kBAAkB;;QAElB,gCAAgC;KACjC;IACD,yBAAyB,EAAE;QACzB,2BAA2B;KAC5B;IACD,kBAAkB,EAAE;QAClB,yBAAyB;KAC1B;IACD,2BAA2B,EAAE;QAC3B,gCAAgC;KACjC;CACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/queries-preview/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `queriesPreview` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'queriesPreview';\n\n/**\n * WireCommit for {@link QueriesPreviewXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link QueriesPreviewXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Requests and stores the query preview results.\n *\n * @public\n */\nexport const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPreview');\n\n/**\n * Clears a query preview from queries preview module.\n *\n * @public\n */\n\nexport const clearQueryPreviewWire = wireCommit('clearQueryPreview');\n\n/**\n * Sets the queries preview state `params`.\n *\n * @public\n */\nexport const setQueriesPreviewExtraParamsWire = wireCommit('setParams');\n\n/**\n * Wiring configuration for the {@link QueriesPreviewXModule | queriesPreview module}.\n *\n * @internal\n */\nexport const queriesPreviewWiring = createWiring({\n QueryPreviewRequestChanged: {\n fetchAndSaveQueryPreviewWire\n },\n
|
|
1
|
+
{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/queries-preview/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `queriesPreview` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'queriesPreview';\n\n/**\n * WireCommit for {@link QueriesPreviewXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link QueriesPreviewXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Requests and stores the query preview results.\n *\n * @public\n */\nexport const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPreview');\n\n/**\n * Clears a query preview from queries preview module.\n *\n * @public\n */\n\nexport const clearQueryPreviewWire = wireCommit('clearQueryPreview');\n\n/**\n * Sets the queries preview state `params`.\n *\n * @public\n */\nexport const setQueriesPreviewExtraParamsWire = wireCommit('setParams');\n\n/**\n * Wiring configuration for the {@link QueriesPreviewXModule | queriesPreview module}.\n *\n * @internal\n */\nexport const queriesPreviewWiring = createWiring({\n QueryPreviewRequestChanged: {\n fetchAndSaveQueryPreviewWire\n },\n QueryPreviewUnmountedHook: {\n clearQueryPreviewWire\n },\n ExtraParamsChanged: {\n setQueriesPreviewExtraParamsWire\n }\n});\n"],"names":[],"mappings":";;;AAMA;;;;;AAKA,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC;;;;;AAKA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;AAKA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;;MAKa,4BAA4B,GAAG,YAAY,CAAC,0BAA0B,EAAE;AAErF;;;;;MAMa,qBAAqB,GAAG,UAAU,CAAC,mBAAmB,EAAE;AAErE;;;;;MAKa,gCAAgC,GAAG,UAAU,CAAC,WAAW,EAAE;AAExE;;;;;MAKa,oBAAoB,GAAG,YAAY,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,4BAA4B;KAC7B;IACD,yBAAyB,EAAE;QACzB,qBAAqB;KACtB;IACD,kBAAkB,EAAE;QAClB,gCAAgC;KACjC;CACF;;;;"}
|
|
@@ -11,7 +11,10 @@ var __vue_render__ = function () {
|
|
|
11
11
|
var _c = _vm._self._c || _h;
|
|
12
12
|
return _c(
|
|
13
13
|
_vm.tag,
|
|
14
|
-
|
|
14
|
+
_vm._g(
|
|
15
|
+
{ tag: "component", attrs: { "data-scroll": _vm.item.id } },
|
|
16
|
+
_vm.$listeners
|
|
17
|
+
),
|
|
15
18
|
[_vm._t("default")],
|
|
16
19
|
2
|
|
17
20
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main-scroll-item.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n <component :is=\"tag\" :data-scroll=\"item.id\">\n <slot />\n </component>\n</template>\n<script lang=\"ts\">\n import { Identifiable } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement, State, xComponentMixin } from '../../../components';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { scrollXModule } from '../x-module';\n import { ScrollObserverKey } from './scroll.const';\n import { ScrollVisibilityObserver } from './scroll.types';\n\n /**\n * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(scrollXModule)]\n })\n export default class MainScrollItem extends Vue {\n /**\n * Rendered HTML node.\n *\n * @public\n */\n public $el!: HTMLElement;\n\n /**\n * The item data. Used to set the scroll identifier.\n *\n * @public\n */\n @Prop({ required: true })\n public item!: Identifiable;\n\n /**\n * The tag to render.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public tag!: string | typeof Vue;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Observer to detect the first visible element.\n *\n * @internal\n */\n @XInject(ScrollObserverKey)\n public firstVisibleItemObserver!: ScrollVisibilityObserver | null;\n\n /**\n * Initialise scroll behavior.\n * - Observes the rendered element to detect if it is the first visible item.\n * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n * element into the first position of the view.\n *\n * @internal\n */\n async mounted(): Promise<void> {\n await this.$nextTick(); // Mounted does not guarantee that child components are mounted too\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });\n }\n\n /**\n * Detaches the observer from the rendered element to prevent memory leaks.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.firstVisibleItemObserver?.unobserve(this.$el);\n }\n\n /**\n * Initialises the element visibility observation, stopping the previous one if it has.\n *\n * @param newObserver - The new observer for the HTML element.\n * @param oldObserver - The old observer for the HTML element.\n */\n observeItem(\n newObserver: ScrollVisibilityObserver | null,\n oldObserver: ScrollVisibilityObserver | null\n ): void {\n oldObserver?.unobserve(this.$el);\n newObserver?.observe(this.$el);\n if (this.pendingScrollTo === this.item.id) {\n this.$el.scrollIntoView();\n this.$x.emit('ScrollRestoreSucceeded');\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n <div>\n <UrlHandler />\n <SearchInput />\n\n <MainScroll>\n <Scroll>\n <ResultsList #result=\"{ item }\">\n <MainScrollItem :item=\"item\" tag=\"article\">\n <BaseResultLink :item=\"item\">\n <img :src=\"item.images[0]\" />\n <p>{{ item.title }}</p>\n </BaseResultLink>\n </MainScrollItem>\n </ResultsList>\n </Scroll>\n </MainScroll>\n </div>\n</template>\n\n<script>\n import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { UrlHandler } from '@empathyco/x-components/url';\n\n export default {\n name: 'ScrollItemDemo',\n components: {\n Scroll,\n ResultsList,\n MainScroll,\n MainScrollItem,\n SearchInput,\n UrlHandler\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA
|
|
1
|
+
{"version":3,"file":"main-scroll-item.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n <component :is=\"tag\" v-on=\"$listeners\" :data-scroll=\"item.id\">\n <slot />\n </component>\n</template>\n<script lang=\"ts\">\n import { Identifiable } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement, State, xComponentMixin } from '../../../components';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { scrollXModule } from '../x-module';\n import { ScrollObserverKey } from './scroll.const';\n import { ScrollVisibilityObserver } from './scroll.types';\n\n /**\n * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n * position.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(scrollXModule)]\n })\n export default class MainScrollItem extends Vue {\n /**\n * Rendered HTML node.\n *\n * @public\n */\n public $el!: HTMLElement;\n\n /**\n * The item data. Used to set the scroll identifier.\n *\n * @public\n */\n @Prop({ required: true })\n public item!: Identifiable;\n\n /**\n * The tag to render.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public tag!: string | typeof Vue;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Observer to detect the first visible element.\n *\n * @internal\n */\n @XInject(ScrollObserverKey)\n public firstVisibleItemObserver!: ScrollVisibilityObserver | null;\n\n /**\n * Initialise scroll behavior.\n * - Observes the rendered element to detect if it is the first visible item.\n * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n * element into the first position of the view.\n *\n * @internal\n */\n async mounted(): Promise<void> {\n await this.$nextTick(); // Mounted does not guarantee that child components are mounted too\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });\n }\n\n /**\n * Detaches the observer from the rendered element to prevent memory leaks.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.firstVisibleItemObserver?.unobserve(this.$el);\n }\n\n /**\n * Initialises the element visibility observation, stopping the previous one if it has.\n *\n * @param newObserver - The new observer for the HTML element.\n * @param oldObserver - The old observer for the HTML element.\n */\n observeItem(\n newObserver: ScrollVisibilityObserver | null,\n oldObserver: ScrollVisibilityObserver | null\n ): void {\n oldObserver?.unobserve(this.$el);\n newObserver?.observe(this.$el);\n if (this.pendingScrollTo === this.item.id) {\n this.$el.scrollIntoView();\n this.$x.emit('ScrollRestoreSucceeded');\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n <div>\n <UrlHandler />\n <SearchInput />\n\n <MainScroll>\n <Scroll>\n <ResultsList #result=\"{ item }\">\n <MainScrollItem :item=\"item\" tag=\"article\">\n <BaseResultLink :item=\"item\">\n <img :src=\"item.images[0]\" />\n <p>{{ item.title }}</p>\n </BaseResultLink>\n </MainScrollItem>\n </ResultsList>\n </Scroll>\n </MainScroll>\n </div>\n</template>\n\n<script>\n import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { UrlHandler } from '@empathyco/x-components/url';\n\n export default {\n name: 'ScrollItemDemo',\n components: {\n Scroll,\n ResultsList,\n MainScroll,\n MainScrollItem,\n SearchInput,\n UrlHandler\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.255",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"@cypress/vue": "~2.2.4",
|
|
86
86
|
"@cypress/webpack-dev-server": "~1.8.4",
|
|
87
87
|
"@empathyco/x-adapter-platform": "^1.0.0-alpha.47",
|
|
88
|
-
"@empathyco/x-tailwindcss": "^0.2.0-alpha.
|
|
88
|
+
"@empathyco/x-tailwindcss": "^0.2.0-alpha.37",
|
|
89
89
|
"@microsoft/api-documenter": "~7.15.3",
|
|
90
90
|
"@microsoft/api-extractor": "~7.19.4",
|
|
91
91
|
"@rollup/plugin-commonjs": "~21.0.1",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"access": "public",
|
|
136
136
|
"directory": "dist"
|
|
137
137
|
},
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "e072108ff965ff6373b9b10fa1e87484162505fd"
|
|
139
139
|
}
|
|
@@ -13209,12 +13209,12 @@
|
|
|
13209
13209
|
"members": [
|
|
13210
13210
|
{
|
|
13211
13211
|
"kind": "Method",
|
|
13212
|
-
"canonicalReference": "@empathyco/x-components!ExtraParams#
|
|
13212
|
+
"canonicalReference": "@empathyco/x-components!ExtraParams#created:member(1)",
|
|
13213
13213
|
"docComment": "/**\n * Emits the initial extra params, overriding with the state extra params, just in case, those values were already set by XComponents initialization (url, plugin config, etc.).\n */\n",
|
|
13214
13214
|
"excerptTokens": [
|
|
13215
13215
|
{
|
|
13216
13216
|
"kind": "Content",
|
|
13217
|
-
"text": "
|
|
13217
|
+
"text": "created(): "
|
|
13218
13218
|
},
|
|
13219
13219
|
{
|
|
13220
13220
|
"kind": "Content",
|
|
@@ -13234,7 +13234,7 @@
|
|
|
13234
13234
|
"releaseTag": "Public",
|
|
13235
13235
|
"overloadIndex": 1,
|
|
13236
13236
|
"parameters": [],
|
|
13237
|
-
"name": "
|
|
13237
|
+
"name": "created"
|
|
13238
13238
|
},
|
|
13239
13239
|
{
|
|
13240
13240
|
"kind": "Method",
|
|
@@ -28805,12 +28805,12 @@
|
|
|
28805
28805
|
},
|
|
28806
28806
|
{
|
|
28807
28807
|
"kind": "PropertySignature",
|
|
28808
|
-
"canonicalReference": "@empathyco/x-components!NextQueriesXEvents#
|
|
28808
|
+
"canonicalReference": "@empathyco/x-components!NextQueriesXEvents#NextQueryPreviewMountedHook:member",
|
|
28809
28809
|
"docComment": "/**\n * The component to show a next query preview has been mounted. Payload: The next query to preview.\n */\n",
|
|
28810
28810
|
"excerptTokens": [
|
|
28811
28811
|
{
|
|
28812
28812
|
"kind": "Content",
|
|
28813
|
-
"text": "
|
|
28813
|
+
"text": "NextQueryPreviewMountedHook: "
|
|
28814
28814
|
},
|
|
28815
28815
|
{
|
|
28816
28816
|
"kind": "Content",
|
|
@@ -28823,7 +28823,7 @@
|
|
|
28823
28823
|
],
|
|
28824
28824
|
"isOptional": false,
|
|
28825
28825
|
"releaseTag": "Public",
|
|
28826
|
-
"name": "
|
|
28826
|
+
"name": "NextQueryPreviewMountedHook",
|
|
28827
28827
|
"propertyTypeTokenRange": {
|
|
28828
28828
|
"startIndex": 1,
|
|
28829
28829
|
"endIndex": 2
|
|
@@ -29163,7 +29163,7 @@
|
|
|
29163
29163
|
{
|
|
29164
29164
|
"kind": "Method",
|
|
29165
29165
|
"canonicalReference": "@empathyco/x-components!NextQueryPreview#mounted:member(1)",
|
|
29166
|
-
"docComment": "/**\n * The component emits the
|
|
29166
|
+
"docComment": "/**\n * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview of the next query.\n */\n",
|
|
29167
29167
|
"excerptTokens": [
|
|
29168
29168
|
{
|
|
29169
29169
|
"kind": "Content",
|
|
@@ -32230,16 +32230,17 @@
|
|
|
32230
32230
|
"members": [
|
|
32231
32231
|
{
|
|
32232
32232
|
"kind": "PropertySignature",
|
|
32233
|
-
"canonicalReference": "@empathyco/x-components!QueriesPreviewXEvents#
|
|
32234
|
-
"docComment": "/**\n *
|
|
32233
|
+
"canonicalReference": "@empathyco/x-components!QueriesPreviewXEvents#QueryPreviewRequestChanged:member",
|
|
32234
|
+
"docComment": "/**\n * Any property of the queries preview request has changed. Payload: The new {@link @empathyco/x-types#SearchRequest | request}.\n */\n",
|
|
32235
32235
|
"excerptTokens": [
|
|
32236
32236
|
{
|
|
32237
32237
|
"kind": "Content",
|
|
32238
|
-
"text": "
|
|
32238
|
+
"text": "QueryPreviewRequestChanged: "
|
|
32239
32239
|
},
|
|
32240
32240
|
{
|
|
32241
|
-
"kind": "
|
|
32242
|
-
"text": "
|
|
32241
|
+
"kind": "Reference",
|
|
32242
|
+
"text": "SearchRequest",
|
|
32243
|
+
"canonicalReference": "@empathyco/x-components!SearchRequest:interface"
|
|
32243
32244
|
},
|
|
32244
32245
|
{
|
|
32245
32246
|
"kind": "Content",
|
|
@@ -32248,7 +32249,7 @@
|
|
|
32248
32249
|
],
|
|
32249
32250
|
"isOptional": false,
|
|
32250
32251
|
"releaseTag": "Public",
|
|
32251
|
-
"name": "
|
|
32252
|
+
"name": "QueryPreviewRequestChanged",
|
|
32252
32253
|
"propertyTypeTokenRange": {
|
|
32253
32254
|
"startIndex": 1,
|
|
32254
32255
|
"endIndex": 2
|
|
@@ -32256,17 +32257,16 @@
|
|
|
32256
32257
|
},
|
|
32257
32258
|
{
|
|
32258
32259
|
"kind": "PropertySignature",
|
|
32259
|
-
"canonicalReference": "@empathyco/x-components!QueriesPreviewXEvents#
|
|
32260
|
-
"docComment": "/**\n *
|
|
32260
|
+
"canonicalReference": "@empathyco/x-components!QueriesPreviewXEvents#QueryPreviewUnmountedHook:member",
|
|
32261
|
+
"docComment": "/**\n * The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed.\n */\n",
|
|
32261
32262
|
"excerptTokens": [
|
|
32262
32263
|
{
|
|
32263
32264
|
"kind": "Content",
|
|
32264
|
-
"text": "
|
|
32265
|
+
"text": "QueryPreviewUnmountedHook: "
|
|
32265
32266
|
},
|
|
32266
32267
|
{
|
|
32267
|
-
"kind": "
|
|
32268
|
-
"text": "
|
|
32269
|
-
"canonicalReference": "@empathyco/x-components!SearchRequest:interface"
|
|
32268
|
+
"kind": "Content",
|
|
32269
|
+
"text": "string"
|
|
32270
32270
|
},
|
|
32271
32271
|
{
|
|
32272
32272
|
"kind": "Content",
|
|
@@ -32275,7 +32275,7 @@
|
|
|
32275
32275
|
],
|
|
32276
32276
|
"isOptional": false,
|
|
32277
32277
|
"releaseTag": "Public",
|
|
32278
|
-
"name": "
|
|
32278
|
+
"name": "QueryPreviewUnmountedHook",
|
|
32279
32279
|
"propertyTypeTokenRange": {
|
|
32280
32280
|
"startIndex": 1,
|
|
32281
32281
|
"endIndex": 2
|
|
@@ -1340,7 +1340,7 @@ export type ExtractState<Module extends XModuleName> = XModulesTree[Module] exte
|
|
|
1340
1340
|
|
|
1341
1341
|
// @public
|
|
1342
1342
|
export class ExtraParams extends Vue_2 {
|
|
1343
|
-
|
|
1343
|
+
created(): void;
|
|
1344
1344
|
// (undocumented)
|
|
1345
1345
|
render(): void;
|
|
1346
1346
|
storeExtraParams: Dictionary<unknown>;
|
|
@@ -2733,7 +2733,7 @@ export const nextQueriesWiring: {
|
|
|
2733
2733
|
ExtraParamsChanged: {
|
|
2734
2734
|
setNextQueriesExtraParams: Wire<Dictionary<unknown>>;
|
|
2735
2735
|
};
|
|
2736
|
-
|
|
2736
|
+
NextQueryPreviewMountedHook: {
|
|
2737
2737
|
fetchAndSaveNextQueryPreviewWire: AnyWire;
|
|
2738
2738
|
};
|
|
2739
2739
|
};
|
|
@@ -2743,7 +2743,7 @@ export interface NextQueriesXEvents {
|
|
|
2743
2743
|
NextQueriesChanged: NextQuery_2[];
|
|
2744
2744
|
NextQueriesDisplayed: NextQuery_2[];
|
|
2745
2745
|
NextQueriesRequestChanged: NextQueriesRequest | null;
|
|
2746
|
-
|
|
2746
|
+
NextQueryPreviewMountedHook: string;
|
|
2747
2747
|
UserSelectedANextQuery: NextQuery_2;
|
|
2748
2748
|
}
|
|
2749
2749
|
|
|
@@ -3068,7 +3068,7 @@ export const queriesPreviewWiring: {
|
|
|
3068
3068
|
QueryPreviewRequestChanged: {
|
|
3069
3069
|
fetchAndSaveQueryPreviewWire: Wire<SearchRequest>;
|
|
3070
3070
|
};
|
|
3071
|
-
|
|
3071
|
+
QueryPreviewUnmountedHook: {
|
|
3072
3072
|
clearQueryPreviewWire: Wire<string>;
|
|
3073
3073
|
};
|
|
3074
3074
|
ExtraParamsChanged: {
|
|
@@ -3078,8 +3078,8 @@ export const queriesPreviewWiring: {
|
|
|
3078
3078
|
|
|
3079
3079
|
// @public
|
|
3080
3080
|
export interface QueriesPreviewXEvents {
|
|
3081
|
-
QueryPreviewRemoved: string;
|
|
3082
3081
|
QueryPreviewRequestChanged: SearchRequest;
|
|
3082
|
+
QueryPreviewUnmountedHook: string;
|
|
3083
3083
|
}
|
|
3084
3084
|
|
|
3085
3085
|
// @public
|
|
@@ -11,7 +11,7 @@ export default class ExtraParams extends Vue {
|
|
|
11
11
|
* Emits the initial extra params, overriding with the state extra params, just in case, those
|
|
12
12
|
* values were already set by XComponents initialization (url, plugin config, etc.).
|
|
13
13
|
*/
|
|
14
|
-
|
|
14
|
+
created(): void;
|
|
15
15
|
/**
|
|
16
16
|
* (Required) A Dictionary where the keys are the extra param names and its values.
|
|
17
17
|
*
|
|
@@ -27,7 +27,7 @@ export default class NextQueryPreview extends Vue {
|
|
|
27
27
|
*/
|
|
28
28
|
previewResults: Dictionary<PreviewResults>;
|
|
29
29
|
/**
|
|
30
|
-
* The component emits the
|
|
30
|
+
* The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
|
|
31
31
|
* of the next query.
|
|
32
32
|
*/
|
|
33
33
|
mounted(): void;
|
|
@@ -31,6 +31,6 @@ export interface NextQueriesXEvents {
|
|
|
31
31
|
* The component to show a next query preview has been mounted.
|
|
32
32
|
* Payload: The next query to preview.
|
|
33
33
|
*/
|
|
34
|
-
|
|
34
|
+
NextQueryPreviewMountedHook: string;
|
|
35
35
|
}
|
|
36
36
|
//# sourceMappingURL=events.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/next-queries/events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,kBAAkB,EAAE,SAAS,EAAE,CAAC;IAChC;;;OAGG;IACH,oBAAoB,EAAE,SAAS,EAAE,CAAC;IAClC;;;;OAIG;IACH,yBAAyB,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACrD;;;OAGG;IACH,sBAAsB,EAAE,SAAS,CAAC;IAClC;;;OAGG;IACH,
|
|
1
|
+
{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/next-queries/events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,kBAAkB,EAAE,SAAS,EAAE,CAAC;IAChC;;;OAGG;IACH,oBAAoB,EAAE,SAAS,EAAE,CAAC;IAClC;;;;OAIG;IACH,yBAAyB,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACrD;;;OAGG;IACH,sBAAsB,EAAE,SAAS,CAAC;IAClC;;;OAGG;IACH,2BAA2B,EAAE,MAAM,CAAC;CACrC"}
|
|
@@ -65,7 +65,7 @@ export declare const nextQueriesWiring: {
|
|
|
65
65
|
ExtraParamsChanged: {
|
|
66
66
|
setNextQueriesExtraParams: import("../..").Wire<import("@empathyco/x-utils").Dictionary<unknown>>;
|
|
67
67
|
};
|
|
68
|
-
|
|
68
|
+
NextQueryPreviewMountedHook: {
|
|
69
69
|
fetchAndSaveNextQueryPreviewWire: import("../..").AnyWire;
|
|
70
70
|
};
|
|
71
71
|
};
|
|
@@ -15,6 +15,6 @@ export interface QueriesPreviewXEvents {
|
|
|
15
15
|
* The component that shows a Query preview has been unmounted.
|
|
16
16
|
* Payload: The query whose preview has been removed.
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
QueryPreviewUnmountedHook: string;
|
|
19
19
|
}
|
|
20
20
|
//# sourceMappingURL=events.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/queries-preview/events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,0BAA0B,EAAE,aAAa,CAAC;IAC1C;;;OAGG;IACH,
|
|
1
|
+
{"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/queries-preview/events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,0BAA0B,EAAE,aAAa,CAAC;IAC1C;;;OAGG;IACH,yBAAyB,EAAE,MAAM,CAAC;CACnC"}
|
|
@@ -25,7 +25,7 @@ export declare const queriesPreviewWiring: {
|
|
|
25
25
|
QueryPreviewRequestChanged: {
|
|
26
26
|
fetchAndSaveQueryPreviewWire: import("../..").Wire<import("@empathyco/x-types").SearchRequest>;
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
QueryPreviewUnmountedHook: {
|
|
29
29
|
clearQueryPreviewWire: import("../..").Wire<string>;
|
|
30
30
|
};
|
|
31
31
|
ExtraParamsChanged: {
|