@empathyco/x-components 3.0.0-alpha.40 → 3.0.0-alpha.41
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.nextqueries.highlightcurated.md +13 -0
- package/docs/API-reference/api/x-components.nextquery.highlightcurated.md +13 -0
- package/docs/API-reference/api/x-components.nextquery.md +1 -0
- package/docs/API-reference/components/next-queries/x-components.next-queries.md +17 -11
- package/docs/API-reference/components/next-queries/x-components.next-query.md +16 -7
- package/js/x-modules/next-queries/components/next-queries.vue.js +15 -4
- 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.js +3 -0
- package/js/x-modules/next-queries/components/next-queries.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query.vue.js +6 -1
- package/js/x-modules/next-queries/components/next-query.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query.vue_rollup-plugin-vue=script.js +18 -0
- package/js/x-modules/next-queries/components/next-query.vue_rollup-plugin-vue=script.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +54 -0
- package/report/x-components.api.md +4 -0
- package/types/x-modules/next-queries/components/next-queries.vue.d.ts +6 -0
- package/types/x-modules/next-queries/components/next-queries.vue.d.ts.map +1 -1
- package/types/x-modules/next-queries/components/next-query.vue.d.ts +14 -0
- package/types/x-modules/next-queries/components/next-query.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.41](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.40...@empathyco/x-components@3.0.0-alpha.41) (2022-01-03)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **next-queries:** add isCurated property
|
|
11
|
+
([8b7b313](https://github.com/empathyco/x/commit/8b7b3132c7fa8aff095a92c84abdc150be705976)),
|
|
12
|
+
closes [EX-5152](https://searchbroker.atlassian.net/browse/EX-5152)
|
|
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.40](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.39...@empathyco/x-components@3.0.0-alpha.40) (2021-12-29)
|
|
7
20
|
|
|
8
21
|
### Features
|
|
@@ -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) > [NextQueries](./x-components.nextqueries.md) > [highlightCurated](./x-components.nextqueries.highlightcurated.md)
|
|
4
|
+
|
|
5
|
+
## NextQueries.highlightCurated property
|
|
6
|
+
|
|
7
|
+
Flag to indicate if the curated next queries should be displayed different.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
protected highlightCurated: 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) > [NextQuery](./x-components.nextquery.md) > [highlightCurated](./x-components.nextquery.highlightcurated.md)
|
|
4
|
+
|
|
5
|
+
## NextQuery.highlightCurated property
|
|
6
|
+
|
|
7
|
+
Indicates if the curated next query should be highlighted.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
protected highlightCurated: boolean;
|
|
13
|
+
```
|
|
@@ -18,5 +18,6 @@ export default class NextQuery extends Vue
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
20
|
| [events](./x-components.nextquery.events.md) | | Partial<[XEventsTypes](./x-components.xeventstypes.md)<!-- -->> | Events list which are going to be emitted when a next query is selected. |
|
|
21
|
+
| [highlightCurated](./x-components.nextquery.highlightcurated.md) | | boolean | Indicates if the curated next query should be highlighted. |
|
|
21
22
|
| [suggestion](./x-components.nextquery.suggestion.md) | | NextQueryModel | The suggestion to render and use in the default slot. |
|
|
22
23
|
|
|
@@ -14,17 +14,18 @@ of `shirts`.
|
|
|
14
14
|
|
|
15
15
|
## Props
|
|
16
16
|
|
|
17
|
-
| Name | Description
|
|
18
|
-
| ----------------------------- |
|
|
19
|
-
| <code>animation</code> | Animation component that will be used to animate the suggestions.
|
|
20
|
-
| <code>maxItemsToRender</code> | Number of next queries to be rendered.
|
|
17
|
+
| Name | Description | Type | Default |
|
|
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
|
+
| <code>highlightCurated</code> | Flag to indicate if the curated next queries should be displayed different. | <code>boolean</code> | <code>false</code> |
|
|
21
22
|
|
|
22
23
|
## Slots
|
|
23
24
|
|
|
24
|
-
| Name | Description | Bindings<br />(name - type - description)
|
|
25
|
-
| ------------------------------- | ------------------ |
|
|
26
|
-
| <code>suggestion</code> | Next Query item | **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 | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**index** <code>number</code> - Next Query suggestion index |
|
|
25
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
26
|
+
| ------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
27
|
+
| <code>suggestion</code> | Next Query item | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**index** <code>number</code> - Next Query suggestion index |
|
|
28
|
+
| <code>suggestion-content</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should<br /> be highlighted<br />**index** <code>number</code> - Next Query suggestion index |
|
|
28
29
|
|
|
29
30
|
## Examples
|
|
30
31
|
|
|
@@ -37,11 +38,16 @@ queries it will show them
|
|
|
37
38
|
<NextQueries />
|
|
38
39
|
```
|
|
39
40
|
|
|
40
|
-
The component has
|
|
41
|
-
`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5)
|
|
41
|
+
The component has three optional props. `animation` to render the component with an animation,
|
|
42
|
+
`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and
|
|
43
|
+
`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.
|
|
42
44
|
|
|
43
45
|
```vue
|
|
44
|
-
<NextQueries
|
|
46
|
+
<NextQueries
|
|
47
|
+
:animation="FadeAndSlide"
|
|
48
|
+
:maxItemsToRender="10"
|
|
49
|
+
:highlightCurated="true"
|
|
50
|
+
/>
|
|
45
51
|
```
|
|
46
52
|
|
|
47
53
|
### Overriding Next Queries' Content
|
|
@@ -12,20 +12,23 @@ it will render the suggestion query by default.
|
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
15
|
-
| Name
|
|
16
|
-
|
|
|
17
|
-
| <code>suggestion</code>
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| ----------------------------- | ---------------------------------------------------------- | --------------------------- | ------------------ |
|
|
17
|
+
| <code>suggestion</code> | The suggestion to render and use in the default slot. | <code>NextQueryModel</code> | <code></code> |
|
|
18
|
+
| <code>highlightCurated</code> | Indicates if the curated next query should be highlighted. | <code>boolean</code> | <code>false</code> |
|
|
18
19
|
|
|
19
20
|
## Slots
|
|
20
21
|
|
|
21
|
-
| Name | Description | Bindings<br />(name - type - description)
|
|
22
|
-
| -------------------- | ------------------ |
|
|
23
|
-
| <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data |
|
|
22
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
23
|
+
| -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
+
| <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted |
|
|
24
25
|
|
|
25
26
|
## Examples
|
|
26
27
|
|
|
27
28
|
This components expects just a suggestion as a prop to be rendered. It has a slot to override the
|
|
28
|
-
content. By default, it renders the suggestion query of the next query.
|
|
29
|
+
content. By default, it renders the suggestion query of the next query. It also has an optional
|
|
30
|
+
prop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a
|
|
31
|
+
CSS class.
|
|
29
32
|
|
|
30
33
|
### Basic Usage
|
|
31
34
|
|
|
@@ -48,6 +51,12 @@ The default slot allows you to replace the content of the suggestion button.
|
|
|
48
51
|
</NextQuery>
|
|
49
52
|
```
|
|
50
53
|
|
|
54
|
+
## Dynamic Classes
|
|
55
|
+
|
|
56
|
+
`NextQuery` uses the following dynamic CSS classes so you can style it when is:
|
|
57
|
+
|
|
58
|
+
- Curated: `x-next-query--is-curated`.
|
|
59
|
+
|
|
51
60
|
## Events
|
|
52
61
|
|
|
53
62
|
A list of events that the component will emit:
|
|
@@ -31,19 +31,26 @@ var __vue_render__ = function () {
|
|
|
31
31
|
return [
|
|
32
32
|
_c("NextQuery", {
|
|
33
33
|
staticClass: "x-next-queries__suggestion",
|
|
34
|
-
attrs: {
|
|
34
|
+
attrs: {
|
|
35
|
+
suggestion: suggestion,
|
|
36
|
+
highlightCurated: _vm.highlightCurated,
|
|
37
|
+
},
|
|
35
38
|
scopedSlots: _vm._u(
|
|
36
39
|
[
|
|
37
40
|
{
|
|
38
41
|
key: "default",
|
|
39
|
-
fn: function () {
|
|
42
|
+
fn: function (ref) {
|
|
43
|
+
var suggestion = ref.suggestion;
|
|
44
|
+
var shouldHighlightCurated =
|
|
45
|
+
ref.shouldHighlightCurated;
|
|
40
46
|
return [
|
|
41
47
|
_vm._t("suggestion-content", null, null, {
|
|
42
48
|
suggestion: suggestion,
|
|
49
|
+
shouldHighlightCurated:
|
|
50
|
+
shouldHighlightCurated,
|
|
43
51
|
index: index,
|
|
44
52
|
}) ]
|
|
45
53
|
},
|
|
46
|
-
proxy: true,
|
|
47
54
|
} ],
|
|
48
55
|
null,
|
|
49
56
|
true
|
|
@@ -51,7 +58,11 @@ var __vue_render__ = function () {
|
|
|
51
58
|
}) ]
|
|
52
59
|
},
|
|
53
60
|
null,
|
|
54
|
-
{
|
|
61
|
+
{
|
|
62
|
+
suggestion: suggestion,
|
|
63
|
+
highlightCurated: _vm.highlightCurated,
|
|
64
|
+
index: index,
|
|
65
|
+
}
|
|
55
66
|
) ]
|
|
56
67
|
},
|
|
57
68
|
} ],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"nextQueries\"\n data-test=\"next-queries\"\n class=\"x-next-queries\"\n :animation=\"animation\"\n :maxItemsToRender=\"maxItemsToRender\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot Next Query item\n @binding {Suggestion} suggestion - Next Query suggestion data\n @binding {number} index - Next Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <NextQuery :suggestion=\"suggestion\"
|
|
1
|
+
{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"nextQueries\"\n data-test=\"next-queries\"\n class=\"x-next-queries\"\n :animation=\"animation\"\n :maxItemsToRender=\"maxItemsToRender\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot Next Query item\n @binding {Suggestion} suggestion - Next Query suggestion data\n @binding {number} index - Next Query suggestion index\n @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, highlightCurated, index }\">\n <NextQuery\n #default=\"{ suggestion, shouldHighlightCurated }\"\n :suggestion=\"suggestion\"\n :highlightCurated=\"highlightCurated\"\n class=\"x-next-queries__suggestion\"\n >\n <!--\n @slot Next Query content\n @binding {Suggestion} suggestion - Next Query suggestion data\n @binding {boolean} shouldHighlightCurated - True if the curated NQ should\n be highlighted\n @binding {number} index - Next Query suggestion index\n -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, shouldHighlightCurated, index }\" />\n </NextQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } 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 { nextQueriesXModule } from '../x-module';\n import NextQuery from './next-query.vue';\n\n /**\n * Simple next-queries component that renders a list of suggestions, allowing the user to\n * select one of them, and emitting the needed events.\n * A next query is a suggestion for a new search, related to your previous query. I.e. If\n * people normally search for `shirts`, and then `trousers`, `trousers` would be a next query\n * of `shirts`.\n *\n * @public\n */\n @Component({\n components: { NextQuery, BaseSuggestions },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueries extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop()\n protected animation!: Vue;\n\n /**\n * Number of next queries to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The list of next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQueryModel[];\n\n /**\n * Flag to indicate if the curated next queries should be displayed different.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue\n<NextQueries />\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue\n<NextQueries :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue\n<NextQueries>\n <template #suggestion-content=\"{suggestion}\">\n <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n </template>\n</NextQueries>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue\n<NextQueries>\n <template #suggestion=\"{suggestion}\">\n <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n <template #default=\"{suggestion}\">\n <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n </template>\n </NextQuery>\n <button>Custom Behaviour</button>\n </template>\n</NextQueries>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -30,6 +30,9 @@ var NextQueries = /** @class */ (function (_super) {
|
|
|
30
30
|
__decorate([
|
|
31
31
|
Getter('nextQueries', 'nextQueries')
|
|
32
32
|
], NextQueries.prototype, "nextQueries", void 0);
|
|
33
|
+
__decorate([
|
|
34
|
+
Prop({ default: false, type: Boolean })
|
|
35
|
+
], NextQueries.prototype, "highlightCurated", void 0);
|
|
33
36
|
NextQueries = __decorate([
|
|
34
37
|
Component({
|
|
35
38
|
components: { NextQuery: NextQuery, BaseSuggestions: BaseSuggestions },
|
package/js/x-modules/next-queries/components/next-queries.vue_rollup-plugin-vue=script.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-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\nimport { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } 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 { nextQueriesXModule } from '../x-module';\nimport NextQuery from './next-query.vue';\n\n/**\n * Simple next-queries component that renders a list of suggestions, allowing the user to\n * select one of them, and emitting the needed events.\n * A next query is a suggestion for a new search, related to your previous query. I.e. If\n * people normally search for `shirts`, and then `trousers`, `trousers` would be a next query\n * of `shirts`.\n *\n * @public\n */\n@Component({\n components: { NextQuery, BaseSuggestions },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueries extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop()\n protected animation!: Vue;\n\n /**\n * Number of next queries to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The list of next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQueryModel[];\n}\n"],"names":[],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"next-queries.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-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\nimport { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } 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 { nextQueriesXModule } from '../x-module';\nimport NextQuery from './next-query.vue';\n\n/**\n * Simple next-queries component that renders a list of suggestions, allowing the user to\n * select one of them, and emitting the needed events.\n * A next query is a suggestion for a new search, related to your previous query. I.e. If\n * people normally search for `shirts`, and then `trousers`, `trousers` would be a next query\n * of `shirts`.\n *\n * @public\n */\n@Component({\n components: { NextQuery, BaseSuggestions },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueries extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop()\n protected animation!: Vue;\n\n /**\n * Number of next queries to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The list of next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQueryModel[];\n\n /**\n * Flag to indicate if the curated next queries should be displayed different.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n}\n"],"names":[],"mappings":";;;;;;;;;AA8CA;;;;;;;;;AAaA;IAAyC,+BAAG;IAA5C;;KAgCC;IAzBC;QADC,IAAI,EAAE;kDACmB;IAQ1B;QADC,IAAI,EAAE;yDAC6B;IAQpC;QADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACC;IAQtC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACH;IA/BlB,WAAW;QAJ/B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,SAAS,WAAA,EAAE,eAAe,iBAAA,EAAE;YAC1C,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,WAAW,CAgC/B;IAAD,kBAAC;CAAA,CAhCwC,GAAG;;;;"}
|
|
@@ -11,6 +11,7 @@ var __vue_render__ = function () {
|
|
|
11
11
|
var _c = _vm._self._c || _h;
|
|
12
12
|
return _c("BaseSuggestion", {
|
|
13
13
|
staticClass: "x-next-query",
|
|
14
|
+
class: { "x-next-query--is-curated": _vm.shouldHighlightCurated },
|
|
14
15
|
attrs: {
|
|
15
16
|
suggestion: _vm.suggestion,
|
|
16
17
|
suggestionSelectedEvents: _vm.events,
|
|
@@ -29,7 +30,11 @@ var __vue_render__ = function () {
|
|
|
29
30
|
function () {
|
|
30
31
|
return [_vm._v(_vm._s(suggestion.query))]
|
|
31
32
|
},
|
|
32
|
-
|
|
33
|
+
null,
|
|
34
|
+
{
|
|
35
|
+
suggestion: suggestion,
|
|
36
|
+
shouldHighlightCurated: _vm.shouldHighlightCurated,
|
|
37
|
+
}
|
|
33
38
|
) ]
|
|
34
39
|
},
|
|
35
40
|
} ],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-query.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue"],"sourcesContent":["<template>\n <BaseSuggestion\n class=\"x-next-query\"\n :suggestion=\"suggestion\"\n :suggestionSelectedEvents=\"events\"\n data-test=\"next-query\"\n feature=\"next_query\"\n >\n <template #default=\"{ suggestion }\">\n <!--\n @slot Next Query content\n @binding {Suggestion} suggestion - Next Query suggestion data\n -->\n <slot
|
|
1
|
+
{"version":3,"file":"next-query.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue"],"sourcesContent":["<template>\n <BaseSuggestion\n class=\"x-next-query\"\n :suggestion=\"suggestion\"\n :suggestionSelectedEvents=\"events\"\n data-test=\"next-query\"\n feature=\"next_query\"\n :class=\"{ 'x-next-query--is-curated': shouldHighlightCurated }\"\n >\n <template #default=\"{ suggestion }\">\n <!--\n @slot Next Query content\n @binding {Suggestion} suggestion - Next Query suggestion data\n @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n -->\n <slot v-bind=\"{ suggestion, shouldHighlightCurated }\">{{ suggestion.query }}</slot>\n </template>\n </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { nextQueriesXModule } from '../x-module';\n\n /**\n * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the next query content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n @Component({\n components: { BaseSuggestion },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQuery extends Vue {\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: NextQueryModel;\n\n /**\n * Indicates if the curated next query should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * Events list which are going to be emitted when a next query is selected.\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserSelectedANextQuery: this.suggestion\n };\n }\n\n /**\n * Checks if the next query is curated and if it should be highlighted.\n *\n * @returns True if the next query is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && (this.suggestion.isCurated ?? false);\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis components expects just a suggestion as a prop to be rendered. It has a slot to override the\ncontent. By default, it renders the suggestion query of the next query. It also has an optional\nprop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a\nCSS class.\n\n### Basic Usage\n\nUsing default slot:\n\n```vue\n<NextQuery :suggestion=\"suggestion\" />\n```\n\n### Overriding default slot.\n\nThe default slot allows you to replace the content of the suggestion button.\n\n```vue\n<NextQuery :suggestion=\"suggestion\">\n <template #default=\"{ suggestion }\">\n <img class=\"x-next-query__icon\" src=\"./next-query.svg\" />\n <span class=\"x-next-query__query\" :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n </template>\n</NextQuery>\n```\n\n## Dynamic Classes\n\n`NextQuery` uses the following dynamic CSS classes so you can style it when is:\n\n- Curated: `x-next-query--is-curated`.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedANextQuery`: the event is emitted after the user clicks the button. The event payload\n is the next query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -32,9 +32,27 @@ var NextQuery = /** @class */ (function (_super) {
|
|
|
32
32
|
enumerable: false,
|
|
33
33
|
configurable: true
|
|
34
34
|
});
|
|
35
|
+
Object.defineProperty(NextQuery.prototype, "shouldHighlightCurated", {
|
|
36
|
+
/**
|
|
37
|
+
* Checks if the next query is curated and if it should be highlighted.
|
|
38
|
+
*
|
|
39
|
+
* @returns True if the next query is curated and should be highlighted.
|
|
40
|
+
*
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
43
|
+
get: function () {
|
|
44
|
+
var _a;
|
|
45
|
+
return this.highlightCurated && ((_a = this.suggestion.isCurated) !== null && _a !== void 0 ? _a : false);
|
|
46
|
+
},
|
|
47
|
+
enumerable: false,
|
|
48
|
+
configurable: true
|
|
49
|
+
});
|
|
35
50
|
__decorate([
|
|
36
51
|
Prop({ required: true })
|
|
37
52
|
], NextQuery.prototype, "suggestion", void 0);
|
|
53
|
+
__decorate([
|
|
54
|
+
Prop({ default: false, type: Boolean })
|
|
55
|
+
], NextQuery.prototype, "highlightCurated", void 0);
|
|
38
56
|
NextQuery = __decorate([
|
|
39
57
|
Component({
|
|
40
58
|
components: { BaseSuggestion: BaseSuggestion },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-query.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.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 { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the next query content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n components: { BaseSuggestion },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQuery extends Vue {\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: NextQueryModel;\n\n /**\n * Events list which are going to be emitted when a next query is selected.\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserSelectedANextQuery: this.suggestion\n };\n }\n}\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"next-query.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.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\nimport { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the next query content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n components: { BaseSuggestion },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQuery extends Vue {\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: NextQueryModel;\n\n /**\n * Indicates if the curated next query should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * Events list which are going to be emitted when a next query is selected.\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserSelectedANextQuery: this.suggestion\n };\n }\n\n /**\n * Checks if the next query is curated and if it should be highlighted.\n *\n * @returns True if the next query is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && (this.suggestion.isCurated ?? false);\n }\n}\n"],"names":[],"mappings":";;;;;;;AA6BA;;;;;;;AAWA;IAAuC,6BAAG;IAA1C;;KAuCC;IAhBC,sBAAc,6BAAM;;;;;;;aAApB;YACE,OAAO;gBACL,sBAAsB,EAAE,IAAI,CAAC,UAAU;aACxC,CAAC;SACH;;;OAAA;IASD,sBAAc,6CAAsB;;;;;;;;aAApC;;YACE,OAAO,IAAI,CAAC,gBAAgB,KAAK,MAAA,IAAI,CAAC,UAAU,CAAC,SAAS,mCAAI,KAAK,CAAC,CAAC;SACtE;;;OAAA;IA/BD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACa;IAQtC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACH;IAflB,SAAS;QAJ7B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,SAAS,CAuC7B;IAAD,gBAAC;CAAA,CAvCsC,GAAG;;;;"}
|
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.41",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -131,5 +131,5 @@
|
|
|
131
131
|
"access": "public",
|
|
132
132
|
"directory": "dist"
|
|
133
133
|
},
|
|
134
|
-
"gitHead": "
|
|
134
|
+
"gitHead": "85fcc9da906381cd7299f9bda47fd2edf6cbdb20"
|
|
135
135
|
}
|
|
@@ -24462,6 +24462,33 @@
|
|
|
24462
24462
|
},
|
|
24463
24463
|
"isStatic": false
|
|
24464
24464
|
},
|
|
24465
|
+
{
|
|
24466
|
+
"kind": "Property",
|
|
24467
|
+
"canonicalReference": "@empathyco/x-components!NextQueries#highlightCurated:member",
|
|
24468
|
+
"docComment": "/**\n * Flag to indicate if the curated next queries should be displayed different.\n *\n * @public\n */\n",
|
|
24469
|
+
"excerptTokens": [
|
|
24470
|
+
{
|
|
24471
|
+
"kind": "Content",
|
|
24472
|
+
"text": "protected highlightCurated: "
|
|
24473
|
+
},
|
|
24474
|
+
{
|
|
24475
|
+
"kind": "Content",
|
|
24476
|
+
"text": "boolean"
|
|
24477
|
+
},
|
|
24478
|
+
{
|
|
24479
|
+
"kind": "Content",
|
|
24480
|
+
"text": ";"
|
|
24481
|
+
}
|
|
24482
|
+
],
|
|
24483
|
+
"isOptional": false,
|
|
24484
|
+
"releaseTag": "Public",
|
|
24485
|
+
"name": "highlightCurated",
|
|
24486
|
+
"propertyTypeTokenRange": {
|
|
24487
|
+
"startIndex": 1,
|
|
24488
|
+
"endIndex": 2
|
|
24489
|
+
},
|
|
24490
|
+
"isStatic": false
|
|
24491
|
+
},
|
|
24465
24492
|
{
|
|
24466
24493
|
"kind": "Property",
|
|
24467
24494
|
"canonicalReference": "@empathyco/x-components!NextQueries#maxItemsToRender:member",
|
|
@@ -25919,6 +25946,33 @@
|
|
|
25919
25946
|
},
|
|
25920
25947
|
"isStatic": false
|
|
25921
25948
|
},
|
|
25949
|
+
{
|
|
25950
|
+
"kind": "Property",
|
|
25951
|
+
"canonicalReference": "@empathyco/x-components!NextQuery#highlightCurated:member",
|
|
25952
|
+
"docComment": "/**\n * Indicates if the curated next query should be highlighted.\n *\n * @public\n */\n",
|
|
25953
|
+
"excerptTokens": [
|
|
25954
|
+
{
|
|
25955
|
+
"kind": "Content",
|
|
25956
|
+
"text": "protected highlightCurated: "
|
|
25957
|
+
},
|
|
25958
|
+
{
|
|
25959
|
+
"kind": "Content",
|
|
25960
|
+
"text": "boolean"
|
|
25961
|
+
},
|
|
25962
|
+
{
|
|
25963
|
+
"kind": "Content",
|
|
25964
|
+
"text": ";"
|
|
25965
|
+
}
|
|
25966
|
+
],
|
|
25967
|
+
"isOptional": false,
|
|
25968
|
+
"releaseTag": "Public",
|
|
25969
|
+
"name": "highlightCurated",
|
|
25970
|
+
"propertyTypeTokenRange": {
|
|
25971
|
+
"startIndex": 1,
|
|
25972
|
+
"endIndex": 2
|
|
25973
|
+
},
|
|
25974
|
+
"isStatic": false
|
|
25975
|
+
},
|
|
25922
25976
|
{
|
|
25923
25977
|
"kind": "Property",
|
|
25924
25978
|
"canonicalReference": "@empathyco/x-components!NextQuery#suggestion:member",
|
|
@@ -2261,6 +2261,7 @@ export type NamespacedWiringData<ModuleName extends XModuleName> = StoreModuleSt
|
|
|
2261
2261
|
// @public
|
|
2262
2262
|
export class NextQueries extends Vue_2 {
|
|
2263
2263
|
protected animation: Vue_2;
|
|
2264
|
+
protected highlightCurated: boolean;
|
|
2264
2265
|
protected maxItemsToRender?: number;
|
|
2265
2266
|
// Warning: (ae-forgotten-export) The symbol "NextQuery" needs to be exported by the entry point index.d.ts
|
|
2266
2267
|
//
|
|
@@ -2387,6 +2388,9 @@ export const nextQueriesXStoreModule: NextQueriesXStoreModule;
|
|
|
2387
2388
|
// @public
|
|
2388
2389
|
export class NextQuery extends Vue_2 {
|
|
2389
2390
|
protected get events(): Partial<XEventsTypes>;
|
|
2391
|
+
protected highlightCurated: boolean;
|
|
2392
|
+
// @internal
|
|
2393
|
+
protected get shouldHighlightCurated(): boolean;
|
|
2390
2394
|
protected suggestion: NextQuery_2;
|
|
2391
2395
|
}
|
|
2392
2396
|
|
|
@@ -28,5 +28,11 @@ export default class NextQueries extends Vue {
|
|
|
28
28
|
* @internal
|
|
29
29
|
*/
|
|
30
30
|
nextQueries: NextQueryModel[];
|
|
31
|
+
/**
|
|
32
|
+
* Flag to indicate if the curated next queries should be displayed different.
|
|
33
|
+
*
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
protected highlightCurated: boolean;
|
|
31
37
|
}
|
|
32
38
|
//# sourceMappingURL=next-queries.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"next-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAqCA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB;;;;;;;;GAQG;AAKH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IAC1C;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,CAAC;IAE1B;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IAEI,WAAW,EAAG,cAAc,EAAE,CAAC;IAEtC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,EAAG,OAAO,CAAC;CACtC"}
|
|
@@ -15,6 +15,12 @@ export default class NextQuery extends Vue {
|
|
|
15
15
|
* @public
|
|
16
16
|
*/
|
|
17
17
|
protected suggestion: NextQueryModel;
|
|
18
|
+
/**
|
|
19
|
+
* Indicates if the curated next query should be highlighted.
|
|
20
|
+
*
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
protected highlightCurated: boolean;
|
|
18
24
|
/**
|
|
19
25
|
* Events list which are going to be emitted when a next query is selected.
|
|
20
26
|
*
|
|
@@ -22,5 +28,13 @@ export default class NextQuery extends Vue {
|
|
|
22
28
|
* @public
|
|
23
29
|
*/
|
|
24
30
|
protected get events(): Partial<XEventsTypes>;
|
|
31
|
+
/**
|
|
32
|
+
* Checks if the next query is curated and if it should be highlighted.
|
|
33
|
+
*
|
|
34
|
+
* @returns True if the next query is curated and should be highlighted.
|
|
35
|
+
*
|
|
36
|
+
* @internal
|
|
37
|
+
*/
|
|
38
|
+
protected get shouldHighlightCurated(): boolean;
|
|
25
39
|
}
|
|
26
40
|
//# sourceMappingURL=next-query.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"next-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;;;OAIG;IAEH,SAAS,CAAC,UAAU,EAAG,cAAc,CAAC;IAEtC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,EAAG,OAAO,CAAC;IAErC;;;;;OAKG;IACH,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAI5C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,sBAAsB,IAAI,OAAO,CAE9C;CACF"}
|