@empathyco/x-components 3.0.0-alpha.171 → 3.0.0-alpha.172
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 +13 -0
- package/core/index.js +1 -1
- package/design-system/full-theme.css +33 -33
- package/docs/API-reference/api/x-components.nextquerieslist.hasmoreitems.md +13 -0
- package/docs/API-reference/api/x-components.nextquerieslist.md +2 -0
- package/docs/API-reference/api/x-components.nextquerieslist.showonlyafteroffset.md +13 -0
- package/docs/API-reference/api/x-components.resultslist.hasmoreitems.md +13 -0
- package/docs/API-reference/api/x-components.resultslist.md +2 -0
- package/docs/API-reference/api/x-components.resultslist.totalresults.md +13 -0
- package/docs/API-reference/components/next-queries/x-components.next-queries-list.md +44 -7
- package/js/components/decorators/injection.consts.js +7 -1
- package/js/components/decorators/injection.consts.js.map +1 -1
- package/js/index.js +1 -1
- package/js/x-modules/next-queries/components/next-queries-list.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-queries-list.vue_rollup-plugin-vue_script.vue.js +24 -1
- package/js/x-modules/next-queries/components/next-queries-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/components/results-list.vue.js.map +1 -1
- package/js/x-modules/search/components/results-list.vue_rollup-plugin-vue_script.vue.js +16 -1
- package/js/x-modules/search/components/results-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +108 -0
- package/report/x-components.api.md +9 -0
- package/types/components/decorators/injection.consts.d.ts +6 -0
- package/types/components/decorators/injection.consts.d.ts.map +1 -1
- package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts +19 -0
- package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts.map +1 -1
- package/types/x-modules/search/components/results-list.vue.d.ts +11 -0
- package/types/x-modules/search/components/results-list.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
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.172](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.171...@empathyco/x-components@3.0.0-alpha.172) (2022-09-13)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **next-queries:** add `concatWhenNoMoreItems` prop (#705)
|
|
11
|
+
([ac73fb7](https://github.com/empathyco/x/commit/ac73fb7d2e66c3cb1aab0b64586d9e86495436de)),
|
|
12
|
+
closes [EX-6841](https://searchbroker.atlassian.net/browse/EX-6841)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
6
19
|
## [3.0.0-alpha.171](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.170...@empathyco/x-components@3.0.0-alpha.171) (2022-09-13)
|
|
7
20
|
|
|
8
21
|
### Features
|
package/core/index.js
CHANGED
|
@@ -121,7 +121,7 @@ export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
|
|
|
121
121
|
export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
|
|
122
122
|
export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
|
|
123
123
|
export { Debounce } from '../js/components/decorators/debounce.decorators.js';
|
|
124
|
-
export { DISABLE_ANIMATIONS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
|
|
124
|
+
export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
|
|
125
125
|
export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
|
|
126
126
|
export { Getter, State } from '../js/components/decorators/store.decorators.js';
|
|
127
127
|
export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
|
|
@@ -881,15 +881,6 @@
|
|
|
881
881
|
--x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
|
|
882
882
|
--x-size-line-height-facet-default: var(--x-size-line-height-title3);
|
|
883
883
|
}
|
|
884
|
-
.x-facet--line.x-facet,
|
|
885
|
-
.x-facet--line .x-facet {
|
|
886
|
-
--x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
|
|
887
|
-
--x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
|
|
888
|
-
--x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
|
|
889
|
-
--x-size-border-width-right-facet-header-default: var(--x-size-border-width-right-facet-header-line);
|
|
890
|
-
--x-size-border-width-bottom-facet-header-default: var(--x-size-border-width-bottom-facet-header-line);
|
|
891
|
-
--x-size-border-width-left-facet-header-default: var(--x-size-border-width-left-facet-header-line);
|
|
892
|
-
}
|
|
893
884
|
:root {
|
|
894
885
|
--x-color-border-facet-header-line: var(--x-color-base-neutral-10);
|
|
895
886
|
--x-size-border-width-facet-header-line: var(--x-size-border-width-base);
|
|
@@ -3579,6 +3570,31 @@
|
|
|
3579
3570
|
--x-size-padding-left-button-default: 0;
|
|
3580
3571
|
border: none;
|
|
3581
3572
|
}
|
|
3573
|
+
:root {
|
|
3574
|
+
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
3575
|
+
--x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
|
|
3576
|
+
--x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
|
|
3577
|
+
--x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
|
|
3578
|
+
--x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
|
|
3579
|
+
--x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
|
|
3580
|
+
--x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
|
|
3581
|
+
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
3582
|
+
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
3583
|
+
--x-size-border-width-suggestion-group-default: 0;
|
|
3584
|
+
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
3585
|
+
--x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
3586
|
+
--x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
3587
|
+
--x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
3588
|
+
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
3589
|
+
--x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
3590
|
+
--x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
3591
|
+
--x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
3592
|
+
--x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
3593
|
+
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
3594
|
+
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
3595
|
+
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
3596
|
+
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
3597
|
+
}
|
|
3582
3598
|
[dir="ltr"] .x-suggestion {
|
|
3583
3599
|
text-align: left;
|
|
3584
3600
|
}
|
|
@@ -7459,28 +7475,12 @@
|
|
|
7459
7475
|
text-transform: none;
|
|
7460
7476
|
}
|
|
7461
7477
|
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
--x-color-
|
|
7465
|
-
--x-
|
|
7466
|
-
--x-
|
|
7467
|
-
--x-size-
|
|
7468
|
-
--x-size-
|
|
7469
|
-
--x-size-
|
|
7470
|
-
--x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
|
|
7471
|
-
--x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
|
|
7472
|
-
--x-size-border-width-suggestion-group-default: 0;
|
|
7473
|
-
--x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
7474
|
-
--x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
7475
|
-
--x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
7476
|
-
--x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
|
|
7477
|
-
--x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
|
|
7478
|
-
--x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
7479
|
-
--x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
7480
|
-
--x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
7481
|
-
--x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
|
|
7482
|
-
--x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
|
|
7483
|
-
--x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
|
|
7484
|
-
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
7485
|
-
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
7478
|
+
.x-facet--line.x-facet,
|
|
7479
|
+
.x-facet--line .x-facet {
|
|
7480
|
+
--x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
|
|
7481
|
+
--x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
|
|
7482
|
+
--x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
|
|
7483
|
+
--x-size-border-width-right-facet-header-default: var(--x-size-border-width-right-facet-header-line);
|
|
7484
|
+
--x-size-border-width-bottom-facet-header-default: var(--x-size-border-width-bottom-facet-header-line);
|
|
7485
|
+
--x-size-border-width-left-facet-header-default: var(--x-size-border-width-left-facet-header-line);
|
|
7486
7486
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueriesList](./x-components.nextquerieslist.md) > [hasMoreItems](./x-components.nextquerieslist.hasmoreitems.md)
|
|
4
|
+
|
|
5
|
+
## NextQueriesList.hasMoreItems property
|
|
6
|
+
|
|
7
|
+
Indicates if there are more available results than the injected.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
hasMoreItems: boolean;
|
|
13
|
+
```
|
|
@@ -19,8 +19,10 @@ export default class NextQueriesList extends NextQueriesList_base
|
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
20
|
| [animation?](./x-components.nextquerieslist.animation.md) | | Vue \| string | <i>(Optional)</i> Animation component that will be used to animate the next queries groups. |
|
|
21
21
|
| [frequency](./x-components.nextquerieslist.frequency.md) | | number | The items cycle size to keep inserting next queries groups at. |
|
|
22
|
+
| [hasMoreItems](./x-components.nextquerieslist.hasmoreitems.md) | | boolean | Indicates if there are more available results than the injected. |
|
|
22
23
|
| [injectedQuery](./x-components.nextquerieslist.injectedquery.md) | | string \| undefined | Injected query, updated when the related request(s) have succeeded. |
|
|
23
24
|
| [maxGroups](./x-components.nextquerieslist.maxgroups.md) | | number | The maximum number of groups to insert into the injected list items list. |
|
|
24
25
|
| [maxNextQueriesPerGroup](./x-components.nextquerieslist.maxnextqueriespergroup.md) | | number | The maximum amount of next queries to add in a single group. |
|
|
25
26
|
| [offset](./x-components.nextquerieslist.offset.md) | | number | The first index to insert a group of next queries at. |
|
|
27
|
+
| [showOnlyAfterOffset](./x-components.nextquerieslist.showonlyafteroffset.md) | | boolean | Determines if a group is added to the injected items list in case the number of items is smaller than the offset. |
|
|
26
28
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueriesList](./x-components.nextquerieslist.md) > [showOnlyAfterOffset](./x-components.nextquerieslist.showonlyafteroffset.md)
|
|
4
|
+
|
|
5
|
+
## NextQueriesList.showOnlyAfterOffset property
|
|
6
|
+
|
|
7
|
+
Determines if a group is added to the injected items list in case the number of items is smaller than the offset.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
showOnlyAfterOffset: boolean;
|
|
13
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ResultsList](./x-components.resultslist.md) > [hasMoreItems](./x-components.resultslist.hasmoreitems.md)
|
|
4
|
+
|
|
5
|
+
## ResultsList.hasMoreItems property
|
|
6
|
+
|
|
7
|
+
Indicates if there are more available results that have not been injected.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
get hasMoreItems(): boolean;
|
|
13
|
+
```
|
|
@@ -24,10 +24,12 @@ export default class ResultsList extends Vue implements InfiniteScroll
|
|
|
24
24
|
| Property | Modifiers | Type | Description |
|
|
25
25
|
| --- | --- | --- | --- |
|
|
26
26
|
| [animation](./x-components.resultslist.animation.md) | | Vue \| string | Animation component that will be used to animate the results. |
|
|
27
|
+
| [hasMoreItems](./x-components.resultslist.hasmoreitems.md) | | boolean | Indicates if there are more available results that have not been injected. |
|
|
27
28
|
| [items](./x-components.resultslist.items.md) | | Result\[\] | The results to render from the state. |
|
|
28
29
|
| [providedQuery](./x-components.resultslist.providedquery.md) | | string | It provides the search query. This query is updated only when the search request has succeeded. |
|
|
29
30
|
| [searchQuery](./x-components.resultslist.searchquery.md) | | string | The query of the search request, taken from the state. |
|
|
30
31
|
| [searchStatus](./x-components.resultslist.searchstatus.md) | | [RequestStatus](./x-components.requeststatus.md) | The status of the search request, taken from the state. |
|
|
32
|
+
| [totalResults](./x-components.resultslist.totalresults.md) | | number | The total number of results, taken from the state. |
|
|
31
33
|
|
|
32
34
|
## Methods
|
|
33
35
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ResultsList](./x-components.resultslist.md) > [totalResults](./x-components.resultslist.totalresults.md)
|
|
4
|
+
|
|
5
|
+
## ResultsList.totalResults property
|
|
6
|
+
|
|
7
|
+
The total number of results, taken from the state.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
totalResults: number;
|
|
13
|
+
```
|
|
@@ -11,13 +11,14 @@ items list, based on the provided configuration.
|
|
|
11
11
|
|
|
12
12
|
## Props
|
|
13
13
|
|
|
14
|
-
| Name | Description
|
|
15
|
-
| ----------------------------------- |
|
|
16
|
-
| <code>animation</code> | Animation component that will be used to animate the next queries groups.
|
|
17
|
-
| <code>offset</code> | The first index to insert a group of next queries at.
|
|
18
|
-
| <code>frequency</code> | The items cycle size to keep inserting next queries groups at.
|
|
19
|
-
| <code>maxNextQueriesPerGroup</code> | The maximum amount of next queries to add in a single group.
|
|
20
|
-
| <code>maxGroups</code> | The maximum number of groups to insert into the injected list items list.
|
|
14
|
+
| Name | Description | Type | Default |
|
|
15
|
+
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
|
|
16
|
+
| <code>animation</code> | Animation component that will be used to animate the next queries groups. | <code>union</code> | <code></code> |
|
|
17
|
+
| <code>offset</code> | The first index to insert a group of next queries at. | <code>number</code> | <code>24</code> |
|
|
18
|
+
| <code>frequency</code> | The items cycle size to keep inserting next queries groups at. | <code>number</code> | <code>24</code> |
|
|
19
|
+
| <code>maxNextQueriesPerGroup</code> | The maximum amount of next queries to add in a single group. | <code>number</code> | <code>4</code> |
|
|
20
|
+
| <code>maxGroups</code> | The maximum number of groups to insert into the injected list items list. | <code>number</code> | <code></code> |
|
|
21
|
+
| <code>showOnlyAfterOffset</code> | Determines if a group is added to the injected items list in case the number<br />of items is smaller than the offset. | <code>boolean</code> | <code>false</code> |
|
|
21
22
|
|
|
22
23
|
## Slots
|
|
23
24
|
|
|
@@ -108,6 +109,42 @@ export default {
|
|
|
108
109
|
</script>
|
|
109
110
|
```
|
|
110
111
|
|
|
112
|
+
### Showing/hiding first next queries group when no more items
|
|
113
|
+
|
|
114
|
+
By default, the first next query group will be inserted when the total number of results is smaller
|
|
115
|
+
than the offset, but this behavior can be disabled setting the `showOnlyAfterOffset` to `true`.
|
|
116
|
+
|
|
117
|
+
```vue live
|
|
118
|
+
<template>
|
|
119
|
+
<div>
|
|
120
|
+
<SearchInput />
|
|
121
|
+
<ResultsList>
|
|
122
|
+
<NextQueriesList
|
|
123
|
+
:offset="48"
|
|
124
|
+
:frequency="72"
|
|
125
|
+
:maxNextQueriesPerGroup="1"
|
|
126
|
+
:showOnlyAfterOffset="true"
|
|
127
|
+
/>
|
|
128
|
+
</ResultsList>
|
|
129
|
+
</div>
|
|
130
|
+
</template>
|
|
131
|
+
|
|
132
|
+
<script>
|
|
133
|
+
import { NextQueriesList } from "@empathyco/x-components/next-queries";
|
|
134
|
+
import { ResultsList } from "@empathyco/x-components/search";
|
|
135
|
+
import { SearchInput } from "@empathyco/x-components/search-box";
|
|
136
|
+
|
|
137
|
+
export default {
|
|
138
|
+
name: "NextQueriesListDemo",
|
|
139
|
+
components: {
|
|
140
|
+
NextQueriesList,
|
|
141
|
+
ResultsList,
|
|
142
|
+
SearchInput
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
</script>
|
|
146
|
+
```
|
|
147
|
+
|
|
111
148
|
### Customise the layout of the component
|
|
112
149
|
|
|
113
150
|
This component will render by default the `id` of each search item, both the injected, and for the
|
|
@@ -16,6 +16,12 @@ const LIST_ITEMS_KEY = 'listItems';
|
|
|
16
16
|
* @internal
|
|
17
17
|
*/
|
|
18
18
|
const QUERY_KEY = 'query';
|
|
19
|
+
/**
|
|
20
|
+
* It's used to identify the provided and injected `hasMoreItems`.
|
|
21
|
+
*
|
|
22
|
+
* @internal
|
|
23
|
+
*/
|
|
24
|
+
const HAS_MORE_ITEMS_KEY = 'hasMoreItems';
|
|
19
25
|
/**
|
|
20
26
|
* It's used to identify the provided and injected `result`.
|
|
21
27
|
*
|
|
@@ -35,5 +41,5 @@ const SELECTED_VARIANTS_KEY = 'selectedVariants';
|
|
|
35
41
|
*/
|
|
36
42
|
const SELECT_RESULT_VARIANT_KEY = 'selectResultVariant';
|
|
37
43
|
|
|
38
|
-
export { DISABLE_ANIMATIONS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY };
|
|
44
|
+
export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY };
|
|
39
45
|
//# sourceMappingURL=injection.consts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { Result, ResultVariant } from '@empathyco/x-types';\nimport { ListItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `disable-animations`.\n *\n * @internal\n */\nexport const DISABLE_ANIMATIONS_KEY: XInjectKey<boolean | undefined> = 'disable-animations';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n\n/**\n * It's used to identify the provided and injected `query`.\n *\n * @internal\n */\nexport const QUERY_KEY: XInjectKey<string | undefined> = 'query';\n\n/**\n * It's used to identify the provided and injected `result`.\n *\n * @internal\n */\nexport const RESULT_WITH_VARIANTS_KEY: XInjectKey<Result> = 'resultWithVariants';\n\n/**\n * It's used to identify the provided and injected `selectedVariants` of a result.\n *\n * @internal\n */\nexport const SELECTED_VARIANTS_KEY: XInjectKey<ResultVariant[]> = 'selectedVariants';\n\n/**\n * It's used to identify the provided and injected `selectResultVariant` callback.\n *\n * @internal\n */\nexport const SELECT_RESULT_VARIANT_KEY: XInjectKey<\n (variant: ResultVariant, level?: number) => void\n> = 'selectResultVariant';\n"],"names":[],"mappings":"AAIA;;;;;MAKa,sBAAsB,GAAoC,qBAAqB;AAE5F;;;;;MAKa,cAAc,GAAuC,YAAY;AAE9E;;;;;MAKa,SAAS,GAAmC,QAAQ;AAEjE;;;;;MAKa,wBAAwB,GAAuB,qBAAqB;AAEjF;;;;;MAKa,qBAAqB,GAAgC,mBAAmB;AAErF;;;;;MAKa,yBAAyB,GAElC;;;;"}
|
|
1
|
+
{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { Result, ResultVariant } from '@empathyco/x-types';\nimport { ListItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `disable-animations`.\n *\n * @internal\n */\nexport const DISABLE_ANIMATIONS_KEY: XInjectKey<boolean | undefined> = 'disable-animations';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n\n/**\n * It's used to identify the provided and injected `query`.\n *\n * @internal\n */\nexport const QUERY_KEY: XInjectKey<string | undefined> = 'query';\n\n/**\n * It's used to identify the provided and injected `hasMoreItems`.\n *\n * @internal\n */\nexport const HAS_MORE_ITEMS_KEY: XInjectKey<boolean | undefined> = 'hasMoreItems';\n\n/**\n * It's used to identify the provided and injected `result`.\n *\n * @internal\n */\nexport const RESULT_WITH_VARIANTS_KEY: XInjectKey<Result> = 'resultWithVariants';\n\n/**\n * It's used to identify the provided and injected `selectedVariants` of a result.\n *\n * @internal\n */\nexport const SELECTED_VARIANTS_KEY: XInjectKey<ResultVariant[]> = 'selectedVariants';\n\n/**\n * It's used to identify the provided and injected `selectResultVariant` callback.\n *\n * @internal\n */\nexport const SELECT_RESULT_VARIANT_KEY: XInjectKey<\n (variant: ResultVariant, level?: number) => void\n> = 'selectResultVariant';\n"],"names":[],"mappings":"AAIA;;;;;MAKa,sBAAsB,GAAoC,qBAAqB;AAE5F;;;;;MAKa,cAAc,GAAuC,YAAY;AAE9E;;;;;MAKa,SAAS,GAAmC,QAAQ;AAEjE;;;;;MAKa,kBAAkB,GAAoC,eAAe;AAElF;;;;;MAKa,wBAAwB,GAAuB,qBAAqB;AAEjF;;;;;MAKa,qBAAqB,GAAgC,mBAAmB;AAErF;;;;;MAKa,yBAAyB,GAElC;;;;"}
|
package/js/index.js
CHANGED
|
@@ -121,7 +121,7 @@ export { default as SlidingPanel } from './components/sliding-panel.vue.js';
|
|
|
121
121
|
export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
|
|
122
122
|
export { XEmit, XOn } from './components/decorators/bus.decorators.js';
|
|
123
123
|
export { Debounce } from './components/decorators/debounce.decorators.js';
|
|
124
|
-
export { DISABLE_ANIMATIONS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
|
|
124
|
+
export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
|
|
125
125
|
export { XInject, XProvide } from './components/decorators/injection.decorators.js';
|
|
126
126
|
export { Getter, State } from './components/decorators/store.decorators.js';
|
|
127
127
|
export { ItemsListInjectionMixin } from './components/items-list-injection.mixin.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * Determines if a group is added to the injected items list in case the number\n * of items is smaller than the offset.\n *\n * @public\n */\n @Prop({ default: false })\n public showOnlyAfterOffset!: boolean;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * Indicates if there are more available results than the injected.\n */\n @XInject(HAS_MORE_ITEMS_KEY)\n public hasMoreItems!: boolean;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n if (this.hasNotEnoughListItems) {\n return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n\n /**\n * Checks if the number of items is smaller than the offset so a group\n * should be added to the injected items list.\n *\n * @returns True if a group should be added, false if not.\n * @internal\n */\n protected get hasNotEnoughListItems(): boolean {\n return (\n !this.showOnlyAfterOffset &&\n !this.hasMoreItems &&\n this.injectedListItems !== undefined &&\n this.injectedListItems.length > 0 &&\n this.offset > this.injectedListItems.length\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be disabled setting the `showOnlyAfterOffset` to `true`.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"1\"\n :showOnlyAfterOffset=\"true\"\n />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/next-queries/components/next-queries-list.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -10,7 +10,7 @@ import { groupItemsBy } from '../../../utils/array.js';
|
|
|
10
10
|
import __vue_component__ from '../../search/components/results-list.vue.js';
|
|
11
11
|
import { nextQueriesXModule } from '../x-module.js';
|
|
12
12
|
import { XInject } from '../../../components/decorators/injection.decorators.js';
|
|
13
|
-
import { QUERY_KEY } from '../../../components/decorators/injection.consts.js';
|
|
13
|
+
import { QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* Component that inserts groups of next queries in different positions of the injected search
|
|
@@ -47,6 +47,9 @@ let NextQueriesList = class NextQueriesList extends mixins(ItemsListInjectionMix
|
|
|
47
47
|
if (this.nextQueriesAreOutdated) {
|
|
48
48
|
return this.injectedListItems;
|
|
49
49
|
}
|
|
50
|
+
if (this.hasNotEnoughListItems) {
|
|
51
|
+
return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);
|
|
52
|
+
}
|
|
50
53
|
return this.nextQueriesGroups.reduce((items, nextQueriesGroup, index) => {
|
|
51
54
|
const targetIndex = this.offset + this.frequency * index;
|
|
52
55
|
if (targetIndex <= items.length) {
|
|
@@ -66,6 +69,20 @@ let NextQueriesList = class NextQueriesList extends mixins(ItemsListInjectionMix
|
|
|
66
69
|
(this.$x.query.nextQueries !== this.injectedQuery ||
|
|
67
70
|
this.$x.status.nextQueries !== 'success'));
|
|
68
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* Checks if the number of items is smaller than the offset so a group
|
|
74
|
+
* should be added to the injected items list.
|
|
75
|
+
*
|
|
76
|
+
* @returns True if a group should be added, false if not.
|
|
77
|
+
* @internal
|
|
78
|
+
*/
|
|
79
|
+
get hasNotEnoughListItems() {
|
|
80
|
+
return (!this.showOnlyAfterOffset &&
|
|
81
|
+
!this.hasMoreItems &&
|
|
82
|
+
this.injectedListItems !== undefined &&
|
|
83
|
+
this.injectedListItems.length > 0 &&
|
|
84
|
+
this.offset > this.injectedListItems.length);
|
|
85
|
+
}
|
|
69
86
|
};
|
|
70
87
|
__decorate([
|
|
71
88
|
Prop()
|
|
@@ -82,12 +99,18 @@ __decorate([
|
|
|
82
99
|
__decorate([
|
|
83
100
|
Prop()
|
|
84
101
|
], NextQueriesList.prototype, "maxGroups", void 0);
|
|
102
|
+
__decorate([
|
|
103
|
+
Prop({ default: false })
|
|
104
|
+
], NextQueriesList.prototype, "showOnlyAfterOffset", void 0);
|
|
85
105
|
__decorate([
|
|
86
106
|
Getter('nextQueries', 'nextQueries')
|
|
87
107
|
], NextQueriesList.prototype, "nextQueries", void 0);
|
|
88
108
|
__decorate([
|
|
89
109
|
XInject(QUERY_KEY)
|
|
90
110
|
], NextQueriesList.prototype, "injectedQuery", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
XInject(HAS_MORE_ITEMS_KEY)
|
|
113
|
+
], NextQueriesList.prototype, "hasMoreItems", void 0);
|
|
91
114
|
NextQueriesList = __decorate([
|
|
92
115
|
Component({
|
|
93
116
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.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\nimport Vue from 'vue';\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;;;AAoCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;
|
|
1
|
+
{"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.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\nimport Vue from 'vue';\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * Determines if a group is added to the injected items list in case the number\n * of items is smaller than the offset.\n *\n * @public\n */\n @Prop({ default: false })\n public showOnlyAfterOffset!: boolean;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * Indicates if there are more available results than the injected.\n */\n @XInject(HAS_MORE_ITEMS_KEY)\n public hasMoreItems!: boolean;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n if (this.hasNotEnoughListItems) {\n return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n\n /**\n * Checks if the number of items is smaller than the offset so a group\n * should be added to the injected items list.\n *\n * @returns True if a group should be added, false if not.\n * @internal\n */\n protected get hasNotEnoughListItems(): boolean {\n return (\n !this.showOnlyAfterOffset &&\n !this.hasMoreItems &&\n this.injectedListItems !== undefined &&\n this.injectedListItems.length > 0 &&\n this.offset > this.injectedListItems.length\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;;;AAoCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IA4E1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;SACvE;QACD,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;;;;;;;IAQD,IAAc,sBAAsB;QAClC,QACE,CAAC,CAAC,IAAI,CAAC,aAAa;aACnB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC,aAAa;gBAC/C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,SAAS,CAAC,EAC3C;KACH;;;;;;;;IASD,IAAc,qBAAqB;QACjC,QACE,CAAC,IAAI,CAAC,mBAAmB;YACzB,CAAC,IAAI,CAAC,YAAY;YAClB,IAAI,CAAC,iBAAiB,KAAK,SAAS;YACpC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAC3C;KACH;CACF,CAAA;AA7IC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAS1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;4DACY;AAQrC;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AAMjC;IADC,OAAO,CAAC,SAAS,CAAC;sDACuB;AAM1C;IADC,OAAO,CAAC,kBAAkB,CAAC;qDACE;AApEX,eAAe;IARnC,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;YACX,SAAS;uBACTC,mBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CAoJnC;aApJoB,eAAe;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customize ResultsList.\n @binding {Result[]} items - Results to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import {
|
|
1
|
+
{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customize ResultsList.\n @binding {Result[]} items - Results to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY\n } from '../../../components/decorators/injection.consts';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { InfiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.types';\n import { searchXModule } from '../x-module';\n import { RequestStatus } from '../../../store/utils/status-store.utils';\n\n /**\n * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n * default.\n *\n * The component provides a default slot which wraps the whole component with the `results` bound.\n *\n * It also provides the slot result to customize the item, which is within the default slot, with\n * the result bound.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class ResultsList extends Vue implements InfiniteScroll {\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n @State('search', 'results')\n public items!: Result[];\n\n /**\n * It provides the search query.\n * This query is updated only when the search request has succeeded.\n */\n @XProvide(QUERY_KEY)\n public providedQuery = '';\n\n /**\n * Indicates if there are more available results that have not been injected.\n *\n * @returns Boolean.\n * @public\n */\n @XProvide(HAS_MORE_ITEMS_KEY)\n public get hasMoreItems(): boolean {\n return this.items.length < this.totalResults;\n }\n\n /**\n * The total number of results, taken from the state.\n */\n @State('search', 'totalResults')\n public totalResults!: number;\n\n /**\n * The status of the search request, taken from the state.\n */\n @State('search', 'status')\n public searchStatus!: RequestStatus;\n\n /**\n * The query of the search request, taken from the state.\n */\n @State('search', 'query')\n public searchQuery!: string;\n\n /**\n * Animation component that will be used to animate the results.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Updates the query to be provided to the child components\n * when the search request has succeeded.\n *\n * @param status - The status of the search request.\n */\n @Watch('searchStatus')\n updateQuery(status: RequestStatus): void {\n if (status === 'success') {\n this.providedQuery = this.searchQuery;\n }\n }\n\n /**\n * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n *\n * @internal\n */\n onInfiniteScrollEnd(): void {\n this.$x.emit('UserReachedResultsListEnd');\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BaseGrid\n }\n };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #result=\"{ item }\">\n <span class=\"result\">\n {{ item.name }}\n </span>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <BannersList>\n <PromotedsList>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n </PromotedsList>\n </BannersList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BannersList,\n PromotedsList\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
3
|
import { Prop, Watch, Component } from 'vue-property-decorator';
|
|
4
|
-
import { LIST_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts.js';
|
|
4
|
+
import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
|
|
5
5
|
import { XProvide } from '../../../components/decorators/injection.decorators.js';
|
|
6
6
|
import { State } from '../../../components/decorators/store.decorators.js';
|
|
7
7
|
import { NoElement } from '../../../components/no-element.js';
|
|
@@ -29,6 +29,15 @@ let ResultsList = class ResultsList extends Vue {
|
|
|
29
29
|
*/
|
|
30
30
|
this.providedQuery = '';
|
|
31
31
|
}
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if there are more available results that have not been injected.
|
|
34
|
+
*
|
|
35
|
+
* @returns Boolean.
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
get hasMoreItems() {
|
|
39
|
+
return this.items.length < this.totalResults;
|
|
40
|
+
}
|
|
32
41
|
/**
|
|
33
42
|
* Updates the query to be provided to the child components
|
|
34
43
|
* when the search request has succeeded.
|
|
@@ -56,6 +65,12 @@ __decorate([
|
|
|
56
65
|
__decorate([
|
|
57
66
|
XProvide(QUERY_KEY)
|
|
58
67
|
], ResultsList.prototype, "providedQuery", void 0);
|
|
68
|
+
__decorate([
|
|
69
|
+
XProvide(HAS_MORE_ITEMS_KEY)
|
|
70
|
+
], ResultsList.prototype, "hasMoreItems", null);
|
|
71
|
+
__decorate([
|
|
72
|
+
State('search', 'totalResults')
|
|
73
|
+
], ResultsList.prototype, "totalResults", void 0);
|
|
59
74
|
__decorate([
|
|
60
75
|
State('search', 'status')
|
|
61
76
|
], ResultsList.prototype, "searchStatus", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"results-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport {
|
|
1
|
+
{"version":3,"file":"results-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY\n} from '../../../components/decorators/injection.consts';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { InfiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.types';\nimport { searchXModule } from '../x-module';\nimport { RequestStatus } from '../../../store/utils/status-store.utils';\n\n/**\n * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n * default.\n *\n * The component provides a default slot which wraps the whole component with the `results` bound.\n *\n * It also provides the slot result to customize the item, which is within the default slot, with\n * the result bound.\n *\n * @public\n */\n@Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class ResultsList extends Vue implements InfiniteScroll {\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n @State('search', 'results')\n public items!: Result[];\n\n /**\n * It provides the search query.\n * This query is updated only when the search request has succeeded.\n */\n @XProvide(QUERY_KEY)\n public providedQuery = '';\n\n /**\n * Indicates if there are more available results that have not been injected.\n *\n * @returns Boolean.\n * @public\n */\n @XProvide(HAS_MORE_ITEMS_KEY)\n public get hasMoreItems(): boolean {\n return this.items.length < this.totalResults;\n }\n\n /**\n * The total number of results, taken from the state.\n */\n @State('search', 'totalResults')\n public totalResults!: number;\n\n /**\n * The status of the search request, taken from the state.\n */\n @State('search', 'status')\n public searchStatus!: RequestStatus;\n\n /**\n * The query of the search request, taken from the state.\n */\n @State('search', 'query')\n public searchQuery!: string;\n\n /**\n * Animation component that will be used to animate the results.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Updates the query to be provided to the child components\n * when the search request has succeeded.\n *\n * @param status - The status of the search request.\n */\n @Watch('searchStatus')\n updateQuery(status: RequestStatus): void {\n if (status === 'success') {\n this.providedQuery = this.searchQuery;\n }\n }\n\n /**\n * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n *\n * @internal\n */\n onInfiniteScrollEnd(): void {\n this.$x.emit('UserReachedResultsListEnd');\n }\n}\n"],"names":["ItemsList"],"mappings":";;;;;;;;;;;AAmCA;;;;;;;;;;;AAkBA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;IAA5C;;;;;;QAmBS,kBAAa,GAAG,EAAE,CAAC;KA4D3B;;;;;;;IAnDC,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;KAC9C;;;;;;;IAmCD,WAAW,CAAC,MAAqB;QAC/B,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC;SACvC;KACF;;;;;;IAOD,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;KAC3C;CACF,CAAA;AAnEC;IAFC,QAAQ,CAAC,cAAc,CAAC;IACxB,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC;0CACH;AAOxB;IADC,QAAQ,CAAC,SAAS,CAAC;kDACM;AAS1B;IADC,QAAQ,CAAC,kBAAkB,CAAC;+CAG5B;AAMD;IADC,KAAK,CAAC,QAAQ,EAAE,cAAc,CAAC;iDACH;AAM7B;IADC,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC;iDACU;AAMpC;IADC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC;gDACG;AAQ5B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACW;AASnC;IADC,KAAK,CAAC,cAAc,CAAC;8CAKrB;AArEkB,WAAW;IAP/B,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;uBACTA,iBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,WAAW,CA+E/B;aA/EoB,WAAW;;;;"}
|
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.172",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"access": "public",
|
|
134
134
|
"directory": "dist"
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "fd694823a203f9b59bde25e2bc61b5ed25dba018"
|
|
137
137
|
}
|
|
@@ -26836,6 +26836,33 @@
|
|
|
26836
26836
|
},
|
|
26837
26837
|
"isStatic": false
|
|
26838
26838
|
},
|
|
26839
|
+
{
|
|
26840
|
+
"kind": "Property",
|
|
26841
|
+
"canonicalReference": "@empathyco/x-components!NextQueriesList#hasMoreItems:member",
|
|
26842
|
+
"docComment": "/**\n * Indicates if there are more available results than the injected.\n */\n",
|
|
26843
|
+
"excerptTokens": [
|
|
26844
|
+
{
|
|
26845
|
+
"kind": "Content",
|
|
26846
|
+
"text": "hasMoreItems: "
|
|
26847
|
+
},
|
|
26848
|
+
{
|
|
26849
|
+
"kind": "Content",
|
|
26850
|
+
"text": "boolean"
|
|
26851
|
+
},
|
|
26852
|
+
{
|
|
26853
|
+
"kind": "Content",
|
|
26854
|
+
"text": ";"
|
|
26855
|
+
}
|
|
26856
|
+
],
|
|
26857
|
+
"isOptional": false,
|
|
26858
|
+
"releaseTag": "Public",
|
|
26859
|
+
"name": "hasMoreItems",
|
|
26860
|
+
"propertyTypeTokenRange": {
|
|
26861
|
+
"startIndex": 1,
|
|
26862
|
+
"endIndex": 2
|
|
26863
|
+
},
|
|
26864
|
+
"isStatic": false
|
|
26865
|
+
},
|
|
26839
26866
|
{
|
|
26840
26867
|
"kind": "Property",
|
|
26841
26868
|
"canonicalReference": "@empathyco/x-components!NextQueriesList#injectedQuery:member",
|
|
@@ -26943,6 +26970,33 @@
|
|
|
26943
26970
|
"endIndex": 2
|
|
26944
26971
|
},
|
|
26945
26972
|
"isStatic": false
|
|
26973
|
+
},
|
|
26974
|
+
{
|
|
26975
|
+
"kind": "Property",
|
|
26976
|
+
"canonicalReference": "@empathyco/x-components!NextQueriesList#showOnlyAfterOffset:member",
|
|
26977
|
+
"docComment": "/**\n * Determines if a group is added to the injected items list in case the number of items is smaller than the offset.\n *\n * @public\n */\n",
|
|
26978
|
+
"excerptTokens": [
|
|
26979
|
+
{
|
|
26980
|
+
"kind": "Content",
|
|
26981
|
+
"text": "showOnlyAfterOffset: "
|
|
26982
|
+
},
|
|
26983
|
+
{
|
|
26984
|
+
"kind": "Content",
|
|
26985
|
+
"text": "boolean"
|
|
26986
|
+
},
|
|
26987
|
+
{
|
|
26988
|
+
"kind": "Content",
|
|
26989
|
+
"text": ";"
|
|
26990
|
+
}
|
|
26991
|
+
],
|
|
26992
|
+
"isOptional": false,
|
|
26993
|
+
"releaseTag": "Public",
|
|
26994
|
+
"name": "showOnlyAfterOffset",
|
|
26995
|
+
"propertyTypeTokenRange": {
|
|
26996
|
+
"startIndex": 1,
|
|
26997
|
+
"endIndex": 2
|
|
26998
|
+
},
|
|
26999
|
+
"isStatic": false
|
|
26946
27000
|
}
|
|
26947
27001
|
],
|
|
26948
27002
|
"extendsTokenRange": {
|
|
@@ -36934,6 +36988,33 @@
|
|
|
36934
36988
|
},
|
|
36935
36989
|
"isStatic": false
|
|
36936
36990
|
},
|
|
36991
|
+
{
|
|
36992
|
+
"kind": "Property",
|
|
36993
|
+
"canonicalReference": "@empathyco/x-components!ResultsList#hasMoreItems:member",
|
|
36994
|
+
"docComment": "/**\n * Indicates if there are more available results that have not been injected.\n *\n * @returns Boolean.\n *\n * @public\n */\n",
|
|
36995
|
+
"excerptTokens": [
|
|
36996
|
+
{
|
|
36997
|
+
"kind": "Content",
|
|
36998
|
+
"text": "get hasMoreItems(): "
|
|
36999
|
+
},
|
|
37000
|
+
{
|
|
37001
|
+
"kind": "Content",
|
|
37002
|
+
"text": "boolean"
|
|
37003
|
+
},
|
|
37004
|
+
{
|
|
37005
|
+
"kind": "Content",
|
|
37006
|
+
"text": ";"
|
|
37007
|
+
}
|
|
37008
|
+
],
|
|
37009
|
+
"isOptional": false,
|
|
37010
|
+
"releaseTag": "Public",
|
|
37011
|
+
"name": "hasMoreItems",
|
|
37012
|
+
"propertyTypeTokenRange": {
|
|
37013
|
+
"startIndex": 1,
|
|
37014
|
+
"endIndex": 2
|
|
37015
|
+
},
|
|
37016
|
+
"isStatic": false
|
|
37017
|
+
},
|
|
36937
37018
|
{
|
|
36938
37019
|
"kind": "Property",
|
|
36939
37020
|
"canonicalReference": "@empathyco/x-components!ResultsList#items:member",
|
|
@@ -37048,6 +37129,33 @@
|
|
|
37048
37129
|
},
|
|
37049
37130
|
"isStatic": false
|
|
37050
37131
|
},
|
|
37132
|
+
{
|
|
37133
|
+
"kind": "Property",
|
|
37134
|
+
"canonicalReference": "@empathyco/x-components!ResultsList#totalResults:member",
|
|
37135
|
+
"docComment": "/**\n * The total number of results, taken from the state.\n */\n",
|
|
37136
|
+
"excerptTokens": [
|
|
37137
|
+
{
|
|
37138
|
+
"kind": "Content",
|
|
37139
|
+
"text": "totalResults: "
|
|
37140
|
+
},
|
|
37141
|
+
{
|
|
37142
|
+
"kind": "Content",
|
|
37143
|
+
"text": "number"
|
|
37144
|
+
},
|
|
37145
|
+
{
|
|
37146
|
+
"kind": "Content",
|
|
37147
|
+
"text": ";"
|
|
37148
|
+
}
|
|
37149
|
+
],
|
|
37150
|
+
"isOptional": false,
|
|
37151
|
+
"releaseTag": "Public",
|
|
37152
|
+
"name": "totalResults",
|
|
37153
|
+
"propertyTypeTokenRange": {
|
|
37154
|
+
"startIndex": 1,
|
|
37155
|
+
"endIndex": 2
|
|
37156
|
+
},
|
|
37157
|
+
"isStatic": false
|
|
37158
|
+
},
|
|
37051
37159
|
{
|
|
37052
37160
|
"kind": "Method",
|
|
37053
37161
|
"canonicalReference": "@empathyco/x-components!ResultsList#updateQuery:member(1)",
|
|
@@ -1817,6 +1817,9 @@ export type GroupId = string;
|
|
|
1817
1817
|
// @public
|
|
1818
1818
|
export function groupItemsBy<ArrayType, ReturnType extends string | number>(array: ArrayType[], groupBy: (item: ArrayType, index: number) => ReturnType): Record<ReturnType, ArrayType[]>;
|
|
1819
1819
|
|
|
1820
|
+
// @internal
|
|
1821
|
+
export const HAS_MORE_ITEMS_KEY: XInjectKey<boolean | undefined>;
|
|
1822
|
+
|
|
1820
1823
|
// @public (undocumented)
|
|
1821
1824
|
export const HideIcon: {};
|
|
1822
1825
|
|
|
@@ -2523,6 +2526,9 @@ export interface NextQueriesGetters {
|
|
|
2523
2526
|
export class NextQueriesList extends NextQueriesList_base {
|
|
2524
2527
|
protected animation?: Vue_2 | string;
|
|
2525
2528
|
frequency: number;
|
|
2529
|
+
hasMoreItems: boolean;
|
|
2530
|
+
// @internal
|
|
2531
|
+
protected get hasNotEnoughListItems(): boolean;
|
|
2526
2532
|
injectedQuery: string | undefined;
|
|
2527
2533
|
// @internal
|
|
2528
2534
|
get items(): ListItem[];
|
|
@@ -2537,6 +2543,7 @@ export class NextQueriesList extends NextQueriesList_base {
|
|
|
2537
2543
|
// @internal
|
|
2538
2544
|
protected get nextQueriesGroups(): NextQueriesGroup[];
|
|
2539
2545
|
offset: number;
|
|
2546
|
+
showOnlyAfterOffset: boolean;
|
|
2540
2547
|
}
|
|
2541
2548
|
|
|
2542
2549
|
// @public
|
|
@@ -3469,12 +3476,14 @@ export type ResultOrigin = `${ResultFeature}:${FeatureLocation}`;
|
|
|
3469
3476
|
// @public
|
|
3470
3477
|
export class ResultsList extends Vue_2 implements InfiniteScroll {
|
|
3471
3478
|
protected animation: Vue_2 | string;
|
|
3479
|
+
get hasMoreItems(): boolean;
|
|
3472
3480
|
items: Result[];
|
|
3473
3481
|
// @internal
|
|
3474
3482
|
onInfiniteScrollEnd(): void;
|
|
3475
3483
|
providedQuery: string;
|
|
3476
3484
|
searchQuery: string;
|
|
3477
3485
|
searchStatus: RequestStatus;
|
|
3486
|
+
totalResults: number;
|
|
3478
3487
|
updateQuery(status: RequestStatus): void;
|
|
3479
3488
|
}
|
|
3480
3489
|
|
|
@@ -19,6 +19,12 @@ export declare const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined>;
|
|
|
19
19
|
* @internal
|
|
20
20
|
*/
|
|
21
21
|
export declare const QUERY_KEY: XInjectKey<string | undefined>;
|
|
22
|
+
/**
|
|
23
|
+
* It's used to identify the provided and injected `hasMoreItems`.
|
|
24
|
+
*
|
|
25
|
+
* @internal
|
|
26
|
+
*/
|
|
27
|
+
export declare const HAS_MORE_ITEMS_KEY: XInjectKey<boolean | undefined>;
|
|
22
28
|
/**
|
|
23
29
|
* It's used to identify the provided and injected `result`.
|
|
24
30
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"injection.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/decorators/injection.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAwB,CAAC;AAE5F;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,QAAQ,EAAE,GAAG,SAAS,CAAe,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAW,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,MAAM,CAAwB,CAAC;AAEjF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,UAAU,CAAC,aAAa,EAAE,CAAsB,CAAC;AAErF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAChD,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CACzB,CAAC"}
|
|
1
|
+
{"version":3,"file":"injection.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/decorators/injection.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAwB,CAAC;AAE5F;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,QAAQ,EAAE,GAAG,SAAS,CAAe,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAW,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAkB,CAAC;AAElF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,MAAM,CAAwB,CAAC;AAEjF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,UAAU,CAAC,aAAa,EAAE,CAAsB,CAAC;AAErF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAChD,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CACzB,CAAC"}
|
|
@@ -41,6 +41,13 @@ export default class NextQueriesList extends NextQueriesList_base {
|
|
|
41
41
|
* @public
|
|
42
42
|
*/
|
|
43
43
|
maxGroups: number;
|
|
44
|
+
/**
|
|
45
|
+
* Determines if a group is added to the injected items list in case the number
|
|
46
|
+
* of items is smaller than the offset.
|
|
47
|
+
*
|
|
48
|
+
* @public
|
|
49
|
+
*/
|
|
50
|
+
showOnlyAfterOffset: boolean;
|
|
44
51
|
/**
|
|
45
52
|
* The state next queries.
|
|
46
53
|
*
|
|
@@ -51,6 +58,10 @@ export default class NextQueriesList extends NextQueriesList_base {
|
|
|
51
58
|
* Injected query, updated when the related request(s) have succeeded.
|
|
52
59
|
*/
|
|
53
60
|
injectedQuery: string | undefined;
|
|
61
|
+
/**
|
|
62
|
+
* Indicates if there are more available results than the injected.
|
|
63
|
+
*/
|
|
64
|
+
hasMoreItems: boolean;
|
|
54
65
|
/**
|
|
55
66
|
* The grouped next queries based on the given config.
|
|
56
67
|
*
|
|
@@ -72,6 +83,14 @@ export default class NextQueriesList extends NextQueriesList_base {
|
|
|
72
83
|
* @internal
|
|
73
84
|
*/
|
|
74
85
|
protected get nextQueriesAreOutdated(): boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Checks if the number of items is smaller than the offset so a group
|
|
88
|
+
* should be added to the injected items list.
|
|
89
|
+
*
|
|
90
|
+
* @returns True if a group should be added, false if not.
|
|
91
|
+
* @internal
|
|
92
|
+
*/
|
|
93
|
+
protected get hasNotEnoughListItems(): boolean;
|
|
75
94
|
}
|
|
76
95
|
export {};
|
|
77
96
|
//# sourceMappingURL=next-queries-list.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAmBA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAK/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;;AAK5C;;;;;GAKG;AASH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAA+B;IAC1E;;;;OAIG;IAEH,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,WAAW,EAAG,SAAS,EAAE,CAAC;IAEjC;;OAEG;IAEI,aAAa,EAAG,MAAM,GAAG,SAAS,CAAC;IAE1C;;;;;OAKG;IACH,SAAS,KAAK,iBAAiB,IAAI,gBAAgB,EAAE,CAYpD;IAED;;;;;OAKG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"next-queries-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAmBA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAK/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;;AAK5C;;;;;GAKG;AASH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAA+B;IAC1E;;;;OAIG;IAEH,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;;OAKG;IAEI,mBAAmB,EAAG,OAAO,CAAC;IAErC;;;;OAIG;IAEI,WAAW,EAAG,SAAS,EAAE,CAAC;IAEjC;;OAEG;IAEI,aAAa,EAAG,MAAM,GAAG,SAAS,CAAC;IAE1C;;OAEG;IAEI,YAAY,EAAG,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,SAAS,KAAK,iBAAiB,IAAI,gBAAgB,EAAE,CAYpD;IAED;;;;;OAKG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,CAoBtC;IAED;;;;;OAKG;IACH,SAAS,KAAK,sBAAsB,IAAI,OAAO,CAM9C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,OAAO,CAQ7C;CACF"}
|
|
@@ -29,6 +29,17 @@ export default class ResultsList extends Vue implements InfiniteScroll {
|
|
|
29
29
|
* This query is updated only when the search request has succeeded.
|
|
30
30
|
*/
|
|
31
31
|
providedQuery: string;
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if there are more available results that have not been injected.
|
|
34
|
+
*
|
|
35
|
+
* @returns Boolean.
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
get hasMoreItems(): boolean;
|
|
39
|
+
/**
|
|
40
|
+
* The total number of results, taken from the state.
|
|
41
|
+
*/
|
|
42
|
+
totalResults: number;
|
|
32
43
|
/**
|
|
33
44
|
* The status of the search request, taken from the state.
|
|
34
45
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"results-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/results-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,GAAG,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"results-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/results-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,GAAG,MAAM,KAAK,CAAC;AAYtB,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAE3F,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAExE;;;;;;;;;;GAUG;AAQH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAI,YAAW,cAAc;IACpE;;;;;;;;OAQG;IAGI,KAAK,EAAG,MAAM,EAAE,CAAC;IAExB;;;OAGG;IAEI,aAAa,SAAM;IAE1B;;;;;OAKG;IACH,IACW,YAAY,IAAI,OAAO,CAEjC;IAED;;OAEG;IAEI,YAAY,EAAG,MAAM,CAAC;IAE7B;;OAEG;IAEI,YAAY,EAAG,aAAa,CAAC;IAEpC;;OAEG;IAEI,WAAW,EAAG,MAAM,CAAC;IAE5B;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;OAKG;IAEH,WAAW,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAMxC;;;;OAIG;IACH,mBAAmB,IAAI,IAAI;CAG5B"}
|