@empathyco/x-components 3.0.0-alpha.225 → 3.0.0-alpha.226
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/docs/API-reference/api/x-components.md +2 -2
- package/docs/API-reference/components/history-queries/x-components.history-queries.md +16 -11
- package/docs/API-reference/components/next-queries/x-components.next-queries.md +19 -11
- package/docs/API-reference/components/popular-searches/x-components.popular-searches.md +13 -10
- package/docs/API-reference/components/query-suggestions/x-components.query-suggestions.md +13 -10
- package/js/x-modules/history-queries/components/history-queries.vue.js +90 -72
- package/js/x-modules/history-queries/components/history-queries.vue.js.map +1 -1
- package/js/x-modules/history-queries/components/history-queries.vue_rollup-plugin-vue_script.vue.js +3 -13
- package/js/x-modules/history-queries/components/history-queries.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-queries.vue.js +69 -65
- package/js/x-modules/next-queries/components/next-queries.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-queries.vue_rollup-plugin-vue_script.vue.js +5 -11
- package/js/x-modules/next-queries/components/next-queries.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/popular-searches/components/popular-searches.vue.js +71 -54
- package/js/x-modules/popular-searches/components/popular-searches.vue.js.map +1 -1
- package/js/x-modules/popular-searches/components/popular-searches.vue_rollup-plugin-vue_script.vue.js +1 -7
- package/js/x-modules/popular-searches/components/popular-searches.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/query-suggestions/components/query-suggestions.vue.js +62 -55
- package/js/x-modules/query-suggestions/components/query-suggestions.vue.js.map +1 -1
- package/js/x-modules/query-suggestions/components/query-suggestions.vue_rollup-plugin-vue_script.vue.js +1 -7
- package/js/x-modules/query-suggestions/components/query-suggestions.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +5 -228
- package/report/x-components.api.md +0 -8
- package/types/x-modules/history-queries/components/history-queries.vue.d.ts +2 -18
- package/types/x-modules/history-queries/components/history-queries.vue.d.ts.map +1 -1
- package/types/x-modules/next-queries/components/next-queries.vue.d.ts +5 -17
- package/types/x-modules/next-queries/components/next-queries.vue.d.ts.map +1 -1
- package/types/x-modules/popular-searches/components/popular-searches.vue.d.ts +0 -12
- package/types/x-modules/popular-searches/components/popular-searches.vue.d.ts.map +1 -1
- package/types/x-modules/query-suggestions/components/query-suggestions.vue.d.ts +0 -12
- package/types/x-modules/query-suggestions/components/query-suggestions.vue.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.historyqueries.animation.md +0 -13
- package/docs/API-reference/api/x-components.historyqueries.maxitemstorender.md +0 -13
- package/docs/API-reference/api/x-components.nextqueries.animation.md +0 -13
- package/docs/API-reference/api/x-components.nextqueries.maxitemstorender.md +0 -13
- package/docs/API-reference/api/x-components.popularsearches.animation.md +0 -13
- package/docs/API-reference/api/x-components.popularsearches.maxitemstorender.md +0 -13
- package/docs/API-reference/api/x-components.querysuggestions.animation.md +0 -13
- package/docs/API-reference/api/x-components.querysuggestions.maxitemstorender.md +0 -13
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.226](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.225...@empathyco/x-components@3.0.0-alpha.226) (2022-11-14)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- Change suggestion components to bind $attrs to base suggestions (#831)
|
|
11
|
+
([49c139b](https://github.com/empathyco/x/commit/49c139bc55f4cc1a2e1e0ec2e2e7972376eaf487)),
|
|
12
|
+
closes [EX-7356](https://searchbroker.atlassian.net/browse/EX-7356)
|
|
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.225](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.224...@empathyco/x-components@3.0.0-alpha.225) (2022-11-11)
|
|
7
20
|
|
|
8
21
|
**Note:** Version bump only for package @empathyco/x-components
|
|
@@ -78,7 +78,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
78
78
|
| [FixedHeaderAndAsidesLayout](./x-components.fixedheaderandasideslayout.md) | Component for use as Layout to be filled with the rest of the components. |
|
|
79
79
|
| [GlobalXBus](./x-components.globalxbus.md) | This component helps subscribing to any [XEvent](./x-components.xevent.md) with custom callbacks using Vue listeners API. |
|
|
80
80
|
| [HierarchicalFilter](./x-components.hierarchicalfilter.md) | Renders a hierarchical filter recursively, emitting the needed events when clicked. |
|
|
81
|
-
| [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. |
|
|
81
|
+
| [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past. |
|
|
82
82
|
| [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
|
|
83
83
|
| [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to enable or disable the history queries. This component emits events depending on the <code>isEnabled</code> value. |
|
|
84
84
|
| [HistoryQuery](./x-components.historyquery.md) | This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries. |
|
|
@@ -92,7 +92,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
92
92
|
| [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
|
|
93
93
|
| [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
|
|
94
94
|
| [MyHistory](./x-components.myhistory.md) | The component renders the full history of user searched queries grouped by the day they were performed. |
|
|
95
|
-
| [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
|
|
95
|
+
| [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of \[<code>BaseSuggestions</code>\](./x-components.base-suggestions.md), allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
|
|
96
96
|
| [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
|
|
97
97
|
| [NextQuery](./x-components.nextquery.md) | Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default. |
|
|
98
98
|
| [NextQueryPreview](./x-components.nextquerypreview.md) | Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results. |
|
|
@@ -7,21 +7,26 @@ title: HistoryQueries
|
|
|
7
7
|
# HistoryQueries
|
|
8
8
|
|
|
9
9
|
This component renders a list of suggestions coming from the user queries history.
|
|
10
|
+
Allows the user to select one of them, emitting the needed events. A history query is just
|
|
11
|
+
another type of suggestion that contains a query that the user has made in the past.
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Slots
|
|
12
14
|
|
|
13
|
-
| Name
|
|
14
|
-
|
|
|
15
|
-
| <code>
|
|
16
|
-
| <code>
|
|
15
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
16
|
+
| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
17
|
+
| <code>suggestion</code> | History Query item | **v-bind** <code>Object</code> - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index |
|
|
18
|
+
| <code>suggestion-content</code> | History Query content | **queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag<br />**v-bind** <code>Object</code> - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index |
|
|
19
|
+
| <code>suggestion-remove-content</code> | History Query remove button content | **v-bind** <code>Object</code> - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index |
|
|
17
20
|
|
|
18
|
-
##
|
|
21
|
+
## Inherited props
|
|
22
|
+
|
|
23
|
+
This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
|
|
24
|
+
props.
|
|
19
25
|
|
|
20
|
-
| Name
|
|
21
|
-
|
|
|
22
|
-
| <code>
|
|
23
|
-
| <code>
|
|
24
|
-
| <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
|
|
26
|
+
| Name | Description | Type | Default |
|
|
27
|
+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | --------------- |
|
|
28
|
+
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code>ul</code> |
|
|
29
|
+
| <code>maxItemsToRender</code> | Maximum number of history queries to show. It should be a lower number than the<br />{@link HistoryQueriesConfig.maxItemsToStore}. If it is not provided, it will show<br />all the stored `HistoryQueries`. | <code>number</code> | <code></code> |
|
|
25
30
|
|
|
26
31
|
## Events
|
|
27
32
|
|
|
@@ -6,27 +6,35 @@ title: NextQueries
|
|
|
6
6
|
|
|
7
7
|
# NextQueries
|
|
8
8
|
|
|
9
|
-
Simple next-queries component that renders a list of
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
of `shirts`.
|
|
9
|
+
Simple next-queries component that renders a list of
|
|
10
|
+
[`BaseSuggestions`](./x-components.base-suggestions.md),
|
|
11
|
+
allowing the user to select one of them, and emitting the needed events. A next query is a
|
|
12
|
+
suggestion for a new search, related to your previous query. I.e. If people normally search
|
|
13
|
+
for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.
|
|
14
14
|
|
|
15
15
|
## Props
|
|
16
16
|
|
|
17
17
|
| Name | Description | Type | Default |
|
|
18
18
|
| ----------------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------ |
|
|
19
|
-
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code></code> |
|
|
20
|
-
| <code>maxItemsToRender</code> | Number of next queries to be rendered. | <code>number</code> | <code></code> |
|
|
21
19
|
| <code>highlightCurated</code> | Flag to indicate if the curated next queries should be displayed different. | <code>boolean</code> | <code>false</code> |
|
|
22
20
|
| <code>suggestions</code> | NextQueries list to be used instead of state NextQueries. | <code>Array</code> | <code></code> |
|
|
23
21
|
|
|
24
22
|
## Slots
|
|
25
23
|
|
|
26
|
-
| Name | Description | Bindings<br />(name - type - description)
|
|
27
|
-
| ------------------------------- | ------------------ |
|
|
28
|
-
| <code>suggestion</code> | Next Query item | **
|
|
29
|
-
| <code>suggestion-content</code> | Next Query content | **
|
|
24
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
25
|
+
| ------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| <code>suggestion</code> | Next Query item | **highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Next Query suggestion data<br /> - **index** <code>number</code> - Next Query suggestion index |
|
|
27
|
+
| <code>suggestion-content</code> | Next Query content | **shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Next Query suggestion data<br /> - **index** <code>number</code> - Next Query suggestion index |
|
|
28
|
+
|
|
29
|
+
## Inherited props
|
|
30
|
+
|
|
31
|
+
This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
|
|
32
|
+
props.
|
|
33
|
+
|
|
34
|
+
| Name | Description | Type | Default |
|
|
35
|
+
| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |
|
|
36
|
+
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code>ul</code> |
|
|
37
|
+
| <code>maxItemsToRender</code> | Number of next queries to be rendered. | <code>number</code> | <code></code> |
|
|
30
38
|
|
|
31
39
|
## Examples
|
|
32
40
|
|
|
@@ -11,19 +11,22 @@ select one of them, and emitting the needed events.
|
|
|
11
11
|
A popular search is just a query that has been searched a lot in a certain period and may
|
|
12
12
|
optionally have associated a set of filters.
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## Slots
|
|
15
15
|
|
|
16
|
-
| Name
|
|
17
|
-
|
|
|
18
|
-
| <code>
|
|
19
|
-
| <code>
|
|
16
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
17
|
+
| ------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
18
|
+
| <code>suggestion</code> | Popular Search item | **v-bind** <code>Object</code> - Popular Search suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br /> - **index** <code>number</code> - Popular Search suggestion index |
|
|
19
|
+
| <code>suggestion-content</code> | Popular Search content | **v-bind** <code>Object</code> - Popular Search suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br /> - **index** <code>number</code> - Popular Search suggestion index |
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Inherited props
|
|
22
|
+
|
|
23
|
+
This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
|
|
24
|
+
props.
|
|
22
25
|
|
|
23
|
-
| Name
|
|
24
|
-
|
|
|
25
|
-
| <code>
|
|
26
|
-
| <code>
|
|
26
|
+
| Name | Description | Type | Default |
|
|
27
|
+
| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |
|
|
28
|
+
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code>ul</code> |
|
|
29
|
+
| <code>maxItemsToRender</code> | Number of popular searches to be rendered. | <code>number</code> | <code></code> |
|
|
27
30
|
|
|
28
31
|
## Examples
|
|
29
32
|
|
|
@@ -10,19 +10,22 @@ This component renders a list of possible search queries to select from as a que
|
|
|
10
10
|
in the input field. By default, this is a list of
|
|
11
11
|
[`QuerySuggestion`](./x-components.query-suggestion.md) components.
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Slots
|
|
14
14
|
|
|
15
|
-
| Name
|
|
16
|
-
|
|
|
17
|
-
| <code>
|
|
18
|
-
| <code>
|
|
15
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
16
|
+
| ------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| <code>suggestion</code> | Custom component that replaces the `QuerySuggestion` component | **v-bind** <code>Object</code> - Query Suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Query Suggestion data<br /> - **index** <code>number</code> - Query Suggestion index |
|
|
18
|
+
| <code>suggestion-content</code> | Custom content that replaces the `QuerySuggestion` default content | **queryHTML** <code>string</code> - Suggestion’s query with the matching part wrapped in a HTML span tag<br />**v-bind** <code>Object</code> - Query Suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - Query Suggestion data<br /> - **index** <code>number</code> - Query Suggestion index |
|
|
19
19
|
|
|
20
|
-
##
|
|
20
|
+
## Inherited props
|
|
21
|
+
|
|
22
|
+
This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
|
|
23
|
+
props.
|
|
21
24
|
|
|
22
|
-
| Name
|
|
23
|
-
|
|
|
24
|
-
| <code>
|
|
25
|
-
| <code>
|
|
25
|
+
| Name | Description | Type | Default |
|
|
26
|
+
| ----------------------------- | ------------------------------------------- | ------------------- | --------------- |
|
|
27
|
+
| <code>animation</code> | Animation component for `QuerySuggestions`. | <code>Vue</code> | <code>ul</code> |
|
|
28
|
+
| <code>maxItemsToRender</code> | Number of query suggestions to be rendered. | <code>number</code> | <code></code> |
|
|
26
29
|
|
|
27
30
|
## See it in action
|
|
28
31
|
|
|
@@ -5,83 +5,101 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs'
|
|
|
5
5
|
const __vue_script__ = script;
|
|
6
6
|
|
|
7
7
|
/* template */
|
|
8
|
+
function objectWithoutProperties(obj, exclude) {
|
|
9
|
+
var target = {};
|
|
10
|
+
for (var k in obj)
|
|
11
|
+
if (
|
|
12
|
+
Object.prototype.hasOwnProperty.call(obj, k) &&
|
|
13
|
+
exclude.indexOf(k) === -1
|
|
14
|
+
)
|
|
15
|
+
target[k] = obj[k];
|
|
16
|
+
return target
|
|
17
|
+
}
|
|
8
18
|
var __vue_render__ = function () {
|
|
9
19
|
var _vm = this;
|
|
10
20
|
var _h = _vm.$createElement;
|
|
11
21
|
var _c = _vm._self._c || _h;
|
|
12
|
-
return _c(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
scopedSlots: _vm._u(
|
|
21
|
-
[
|
|
22
|
-
{
|
|
23
|
-
key: "default",
|
|
24
|
-
fn: function (ref) {
|
|
25
|
-
var suggestion = ref.suggestion;
|
|
26
|
-
var index = ref.index;
|
|
27
|
-
return [
|
|
28
|
-
_vm._t(
|
|
29
|
-
"suggestion",
|
|
30
|
-
function () {
|
|
31
|
-
return [
|
|
32
|
-
_c("HistoryQuery", {
|
|
33
|
-
staticClass: "x-history-queries__item",
|
|
34
|
-
attrs: {
|
|
35
|
-
suggestion: suggestion,
|
|
36
|
-
"data-test": "history-query-item",
|
|
37
|
-
},
|
|
38
|
-
scopedSlots: _vm._u(
|
|
39
|
-
[
|
|
40
|
-
{
|
|
41
|
-
key: "default",
|
|
42
|
-
fn: function (ref) {
|
|
43
|
-
var queryHTML = ref.queryHTML;
|
|
44
|
-
return [
|
|
45
|
-
_vm._t("suggestion-content", null, null, {
|
|
46
|
-
suggestion: suggestion,
|
|
47
|
-
index: index,
|
|
48
|
-
queryHTML: queryHTML,
|
|
49
|
-
}),
|
|
50
|
-
]
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
key: "remove-button-content",
|
|
55
|
-
fn: function () {
|
|
56
|
-
return [
|
|
57
|
-
_vm._t(
|
|
58
|
-
"suggestion-remove-content",
|
|
59
|
-
null,
|
|
60
|
-
null,
|
|
61
|
-
{ suggestion: suggestion, index: index }
|
|
62
|
-
),
|
|
63
|
-
]
|
|
64
|
-
},
|
|
65
|
-
proxy: true,
|
|
66
|
-
},
|
|
67
|
-
],
|
|
68
|
-
null,
|
|
69
|
-
true
|
|
70
|
-
),
|
|
71
|
-
}),
|
|
72
|
-
]
|
|
73
|
-
},
|
|
74
|
-
null,
|
|
75
|
-
{ suggestion: suggestion, index: index }
|
|
76
|
-
),
|
|
77
|
-
]
|
|
78
|
-
},
|
|
22
|
+
return _c(
|
|
23
|
+
"BaseSuggestions",
|
|
24
|
+
_vm._b(
|
|
25
|
+
{
|
|
26
|
+
staticClass: "x-history-queries",
|
|
27
|
+
attrs: {
|
|
28
|
+
suggestions: _vm.historyQueries,
|
|
29
|
+
"data-test": "history-queries",
|
|
79
30
|
},
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
31
|
+
scopedSlots: _vm._u(
|
|
32
|
+
[
|
|
33
|
+
{
|
|
34
|
+
key: "default",
|
|
35
|
+
fn: function (props) {
|
|
36
|
+
return [
|
|
37
|
+
_vm._t(
|
|
38
|
+
"suggestion",
|
|
39
|
+
function () {
|
|
40
|
+
return [
|
|
41
|
+
_c("HistoryQuery", {
|
|
42
|
+
staticClass: "x-history-queries__item",
|
|
43
|
+
attrs: {
|
|
44
|
+
suggestion: props.suggestion,
|
|
45
|
+
"data-test": "history-query-item",
|
|
46
|
+
},
|
|
47
|
+
scopedSlots: _vm._u(
|
|
48
|
+
[
|
|
49
|
+
{
|
|
50
|
+
key: "default",
|
|
51
|
+
fn: function (ref) {
|
|
52
|
+
var queryHTML = ref.queryHTML;
|
|
53
|
+
return [
|
|
54
|
+
_vm._t(
|
|
55
|
+
"suggestion-content",
|
|
56
|
+
null,
|
|
57
|
+
null,
|
|
58
|
+
Object.assign({}, props, {
|
|
59
|
+
queryHTML: queryHTML,
|
|
60
|
+
})
|
|
61
|
+
),
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
key: "remove-button-content",
|
|
67
|
+
fn: function (ref) {
|
|
68
|
+
var rest = objectWithoutProperties(ref, []);
|
|
69
|
+
var props = rest;
|
|
70
|
+
return [
|
|
71
|
+
_vm._t(
|
|
72
|
+
"suggestion-remove-content",
|
|
73
|
+
null,
|
|
74
|
+
null,
|
|
75
|
+
Object.assign({}, props)
|
|
76
|
+
),
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
],
|
|
81
|
+
null,
|
|
82
|
+
true
|
|
83
|
+
),
|
|
84
|
+
}),
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
null,
|
|
88
|
+
Object.assign({}, props)
|
|
89
|
+
),
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
null,
|
|
95
|
+
true
|
|
96
|
+
),
|
|
97
|
+
},
|
|
98
|
+
"BaseSuggestions",
|
|
99
|
+
_vm.$attrs,
|
|
100
|
+
false
|
|
101
|
+
)
|
|
102
|
+
)
|
|
85
103
|
};
|
|
86
104
|
var __vue_staticRenderFns__ = [];
|
|
87
105
|
__vue_render__._withStripped = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-history-queries\"\n data-test=\"history-queries\"\n
|
|
1
|
+
{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n v-bind=\"$attrs\"\n :suggestions=\"historyQueries\"\n class=\"x-history-queries\"\n data-test=\"history-queries\"\n >\n <template #default=\"props\">\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query item\n @binding {Object} v-bind - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion\" v-bind=\"{ ...props }\">\n <HistoryQuery\n :suggestion=\"props.suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default=\"{ queryHTML }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Object} v-bind - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index\n @binding {string} queryHTML - Suggestion's query with the matching part inside a span tag\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion-content\" v-bind=\"{ ...props, queryHTML }\" />\n </template>\n <template #remove-button-content=\"{ ...props }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query remove button content\n @binding {Object} v-bind - History Query suggestion attributes:<br /> - **suggestion** <code>Suggestion</code> - History Query suggestion data<br /> - **index** <code>number</code> - History Query suggestion index\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ ...props }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQuery from './history-query.vue';\n\n /**\n * This component renders a list of suggestions coming from the user queries history.\n * Allows the user to select one of them, emitting the needed events. A history query is just\n * another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\n @Component({\n components: { BaseSuggestions, HistoryQuery },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class HistoryQueries extends Vue {\n /**\n * The filtered list of history queries.\n *\n * @internal\n */\n @Getter('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQueryModel[];\n }\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name | Description | Type | Default |\n| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | --------------- |\n| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code>ul</code> |\n| <code>maxItemsToRender</code> | Maximum number of history queries to show. It should be a lower number than the<br />{@link HistoryQueriesConfig.maxItemsToStore}. If it is not provided, it will show<br />all the stored `HistoryQueries`. | <code>number</code> | <code></code> |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries />\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries :maxItemsToRender=\"10\" />\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries :animation=\"'FadeAndSlide'\" />\n </div>\n</template>\n\n<script>\n import Vue from 'vue';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n // Registering the animation as a global component\n Vue.component('FadeAndSlide', FadeAndSlide);\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\" />\n </HistoryQueries>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </HistoryQueries>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n <CrossIcon />\n </HistoryQueries>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n SearchInput,\n HistoryQueries,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/history-queries/components/history-queries.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
|
-
import {
|
|
3
|
+
import { Component } from 'vue-property-decorator';
|
|
4
4
|
import __vue_component__ from '../../../components/suggestions/base-suggestions.vue.js';
|
|
5
5
|
import { Getter } from '../../../components/decorators/store.decorators.js';
|
|
6
6
|
import { xComponentMixin } from '../../../components/x-component.mixin.js';
|
|
@@ -9,23 +9,13 @@ import __vue_component__$1 from './history-query.vue.js';
|
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* This component renders a list of suggestions coming from the user queries history.
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* Allows the user to select one of them, emitting the needed events.
|
|
16
|
-
* A history query is just another type of suggestion that contains a query that the user has
|
|
17
|
-
* made in the past.
|
|
12
|
+
* Allows the user to select one of them, emitting the needed events. A history query is just
|
|
13
|
+
* another type of suggestion that contains a query that the user has made in the past.
|
|
18
14
|
*
|
|
19
15
|
* @public
|
|
20
16
|
*/
|
|
21
17
|
let HistoryQueries = class HistoryQueries extends Vue {
|
|
22
18
|
};
|
|
23
|
-
__decorate([
|
|
24
|
-
Prop()
|
|
25
|
-
], HistoryQueries.prototype, "animation", void 0);
|
|
26
|
-
__decorate([
|
|
27
|
-
Prop()
|
|
28
|
-
], HistoryQueries.prototype, "maxItemsToRender", void 0);
|
|
29
19
|
__decorate([
|
|
30
20
|
Getter('historyQueries', 'historyQueries')
|
|
31
21
|
], HistoryQueries.prototype, "historyQueries", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component
|
|
1
|
+
{"version":3,"file":"history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { historyQueriesXModule } from '../x-module';\nimport HistoryQuery from './history-query.vue';\n\n/**\n * This component renders a list of suggestions coming from the user queries history.\n * Allows the user to select one of them, emitting the needed events. A history query is just\n * another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\n@Component({\n components: { BaseSuggestions, HistoryQuery },\n mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class HistoryQueries extends Vue {\n /**\n * The filtered list of history queries.\n *\n * @internal\n */\n @Getter('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQueryModel[];\n}\n"],"names":["BaseSuggestions","HistoryQuery"],"mappings":";;;;;;;;;AAuDA;;;;;;;AAWA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;CAQ9C,CAAA;AADC;IADC,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;sDACC;AAPzB,cAAc;IAJlC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,gBAAEC,mBAAY,EAAE;QAC7C,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,cAAc,CAQlC;aARoB,cAAc;;;;"}
|