@empathyco/x-components 3.0.0-alpha.285 → 3.0.0-alpha.286

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/design-system/full-theme.css +111 -112
  3. package/docs/API-reference/components/history-queries/x-components.history-query.md +56 -0
  4. package/js/x-modules/history-queries/components/history-query.vue.js +2 -1
  5. package/js/x-modules/history-queries/components/history-query.vue.js.map +1 -1
  6. package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js +1 -1
  7. package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  8. package/package.json +6 -6
  9. package/types/x-modules/history-queries/components/history-query.vue.d.ts +1 -1
  10. package/types/x-modules/history-queries/components/history-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.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.286](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.285...@empathyco/x-components@3.0.0-alpha.286) (2023-01-18)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * **history-queries:** Renamed `removeHistoryQueryClass` prop to `removeButtonClass`.
12
+
13
+ ### Features
14
+
15
+ * **history-queries:** add dynamic classes to the history query suggestion (#1014) ([ddd4ac7](https://github.com/empathyco/x/commit/ddd4ac76f30f90bb68497d507948caee060944cf)), closes [EX-7853](https://searchbroker.atlassian.net/browse/EX-7853)
16
+
17
+
18
+
6
19
  ## [3.0.0-alpha.285](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.284...@empathyco/x-components@3.0.0-alpha.285) (2023-01-17)
7
20
 
8
21
 
package/design-system/full-theme.css CHANGED
@@ -2546,6 +2546,117 @@
2546
2546
  --x-number-font-weight-base-regular
2547
2547
  );
2548
2548
  }
2549
+ .x-option-list {
2550
+ display: inline-flex;
2551
+ flex-flow: row nowrap;
2552
+ align-items: center;
2553
+ box-sizing: border-box;
2554
+ list-style-type: none;
2555
+ margin: 0;
2556
+ padding: 0;
2557
+ }
2558
+ [dir="ltr"] .x-option-list__item {
2559
+ border-right-width: var(--x-size-border-width-right-option-list-item-default);
2560
+ }
2561
+ [dir="rtl"] .x-option-list__item {
2562
+ border-left-width: var(--x-size-border-width-right-option-list-item-default);
2563
+ }
2564
+ [dir="ltr"] .x-option-list__item {
2565
+ border-left-width: var(--x-size-border-width-left-option-list-item-default);
2566
+ }
2567
+ [dir="rtl"] .x-option-list__item {
2568
+ border-right-width: var(--x-size-border-width-left-option-list-item-default);
2569
+ }
2570
+ .x-option-list__item {
2571
+ border-top-color: var(--x-color-border-top-option-list-item-default);
2572
+ border-right-color: var(--x-color-border-right-option-list-item-default);
2573
+ border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
2574
+ border-left-color: var(--x-color-border-left-option-list-item-default);
2575
+ border-style: solid;
2576
+ border-top-width: var(--x-size-border-width-top-option-list-item-default);
2577
+ border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
2578
+ }
2579
+ .x-option-list__item.x-option-list__item--is-selected {
2580
+ --x-color-border-option-list-item-default: var(
2581
+ --x-color-border-option-list-item-default-selected
2582
+ );
2583
+ --x-color-border-top-option-list-item-default: var(
2584
+ --x-color-border-top-option-list-item-default-selected
2585
+ );
2586
+ --x-color-border-right-option-list-item-default: var(
2587
+ --x-color-border-right-option-list-item-default-selected
2588
+ );
2589
+ --x-color-border-bottom-option-list-item-default: var(
2590
+ --x-color-border-bottom-option-list-item-default-selected
2591
+ );
2592
+ --x-color-border-left-option-list-item-default: var(
2593
+ --x-color-border-left-option-list-item-default-selected
2594
+ );
2595
+ --x-size-border-width-top-option-list-item-default: var(
2596
+ --x-size-border-width-top-option-list-item-default-selected
2597
+ );
2598
+ --x-size-border-width-right-option-list-item-default: var(
2599
+ --x-size-border-width-right-option-list-item-default-selected
2600
+ );
2601
+ --x-size-border-width-bottom-option-list-item-default: var(
2602
+ --x-size-border-width-bottom-option-list-item-default-selected
2603
+ );
2604
+ --x-size-border-width-left-option-list-item-default: var(
2605
+ --x-size-border-width-left-option-list-item-default-selected
2606
+ );
2607
+ }
2608
+ .x-option-list__item.x-option-list__item--is-selected .x-button {
2609
+ --x-color-background-button-default: var(
2610
+ --x-color-background-option-list-button-default-selected
2611
+ );
2612
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
2613
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
2614
+ --x-number-font-weight-option-list-button-default: var(
2615
+ --x-number-font-weight-option-list-button-default-selected
2616
+ );
2617
+ }
2618
+ .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
2619
+ --x-color-background-button-default: var(
2620
+ --x-color-background-option-list-button-default-selected-hover
2621
+ );
2622
+ --x-color-border-button-default: var(
2623
+ --x-color-border-option-list-button-default-selected-hover
2624
+ );
2625
+ --x-color-text-button-default: var(
2626
+ --x-color-text-option-list-button-default-selected-hover
2627
+ );
2628
+ }
2629
+ .x-option-list__item:last-child {
2630
+ --x-size-border-width-option-list-item-default: 0;
2631
+ --x-size-border-width-top-option-list-item-default: 0;
2632
+ --x-size-border-width-right-option-list-item-default: 0;
2633
+ --x-size-border-width-bottom-option-list-item-default: 0;
2634
+ --x-size-border-width-left-option-list-item-default: 0;
2635
+ }
2636
+ .x-option-list__item .x-button {
2637
+ --x-color-background-button-default: var(--x-color-background-option-list-button-default);
2638
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default);
2639
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default);
2640
+ min-height: auto;
2641
+ --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
2642
+ --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
2643
+ --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
2644
+ --x-size-padding-bottom-button-default: var(
2645
+ --x-size-padding-bottom-option-list-button-default
2646
+ );
2647
+ --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
2648
+ --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
2649
+ --x-size-font-button-default: var(--x-size-font-option-list-button-default);
2650
+ }
2651
+ .x-option-list__item .x-button:hover {
2652
+ --x-color-background-button-default: var(
2653
+ --x-color-background-option-list-button-default-hover
2654
+ );
2655
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
2656
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
2657
+ -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
2658
+ text-decoration: var(--x-font-decoration-option-list-button-default-hover);
2659
+ }
2549
2660
  :root {
2550
2661
  --x-color-background-option-list-button-default: transparent;
2551
2662
  --x-color-border-option-list-button-default: transparent;
@@ -6558,115 +6669,3 @@
6558
6669
  .x-sticky {
6559
6670
  position: sticky !important;
6560
6671
  }
6561
-
6562
- .x-option-list {
6563
- display: inline-flex;
6564
- flex-flow: row nowrap;
6565
- align-items: center;
6566
- box-sizing: border-box;
6567
- list-style-type: none;
6568
- margin: 0;
6569
- padding: 0;
6570
- }
6571
- [dir="ltr"] .x-option-list__item {
6572
- border-right-width: var(--x-size-border-width-right-option-list-item-default);
6573
- }
6574
- [dir="rtl"] .x-option-list__item {
6575
- border-left-width: var(--x-size-border-width-right-option-list-item-default);
6576
- }
6577
- [dir="ltr"] .x-option-list__item {
6578
- border-left-width: var(--x-size-border-width-left-option-list-item-default);
6579
- }
6580
- [dir="rtl"] .x-option-list__item {
6581
- border-right-width: var(--x-size-border-width-left-option-list-item-default);
6582
- }
6583
- .x-option-list__item {
6584
- border-top-color: var(--x-color-border-top-option-list-item-default);
6585
- border-right-color: var(--x-color-border-right-option-list-item-default);
6586
- border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
6587
- border-left-color: var(--x-color-border-left-option-list-item-default);
6588
- border-style: solid;
6589
- border-top-width: var(--x-size-border-width-top-option-list-item-default);
6590
- border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
6591
- }
6592
- .x-option-list__item.x-option-list__item--is-selected {
6593
- --x-color-border-option-list-item-default: var(
6594
- --x-color-border-option-list-item-default-selected
6595
- );
6596
- --x-color-border-top-option-list-item-default: var(
6597
- --x-color-border-top-option-list-item-default-selected
6598
- );
6599
- --x-color-border-right-option-list-item-default: var(
6600
- --x-color-border-right-option-list-item-default-selected
6601
- );
6602
- --x-color-border-bottom-option-list-item-default: var(
6603
- --x-color-border-bottom-option-list-item-default-selected
6604
- );
6605
- --x-color-border-left-option-list-item-default: var(
6606
- --x-color-border-left-option-list-item-default-selected
6607
- );
6608
- --x-size-border-width-top-option-list-item-default: var(
6609
- --x-size-border-width-top-option-list-item-default-selected
6610
- );
6611
- --x-size-border-width-right-option-list-item-default: var(
6612
- --x-size-border-width-right-option-list-item-default-selected
6613
- );
6614
- --x-size-border-width-bottom-option-list-item-default: var(
6615
- --x-size-border-width-bottom-option-list-item-default-selected
6616
- );
6617
- --x-size-border-width-left-option-list-item-default: var(
6618
- --x-size-border-width-left-option-list-item-default-selected
6619
- );
6620
- }
6621
- .x-option-list__item.x-option-list__item--is-selected .x-button {
6622
- --x-color-background-button-default: var(
6623
- --x-color-background-option-list-button-default-selected
6624
- );
6625
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
6626
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
6627
- --x-number-font-weight-option-list-button-default: var(
6628
- --x-number-font-weight-option-list-button-default-selected
6629
- );
6630
- }
6631
- .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
6632
- --x-color-background-button-default: var(
6633
- --x-color-background-option-list-button-default-selected-hover
6634
- );
6635
- --x-color-border-button-default: var(
6636
- --x-color-border-option-list-button-default-selected-hover
6637
- );
6638
- --x-color-text-button-default: var(
6639
- --x-color-text-option-list-button-default-selected-hover
6640
- );
6641
- }
6642
- .x-option-list__item:last-child {
6643
- --x-size-border-width-option-list-item-default: 0;
6644
- --x-size-border-width-top-option-list-item-default: 0;
6645
- --x-size-border-width-right-option-list-item-default: 0;
6646
- --x-size-border-width-bottom-option-list-item-default: 0;
6647
- --x-size-border-width-left-option-list-item-default: 0;
6648
- }
6649
- .x-option-list__item .x-button {
6650
- --x-color-background-button-default: var(--x-color-background-option-list-button-default);
6651
- --x-color-border-button-default: var(--x-color-border-option-list-button-default);
6652
- --x-color-text-button-default: var(--x-color-text-option-list-button-default);
6653
- min-height: auto;
6654
- --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
6655
- --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
6656
- --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
6657
- --x-size-padding-bottom-button-default: var(
6658
- --x-size-padding-bottom-option-list-button-default
6659
- );
6660
- --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
6661
- --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
6662
- --x-size-font-button-default: var(--x-size-font-option-list-button-default);
6663
- }
6664
- .x-option-list__item .x-button:hover {
6665
- --x-color-background-button-default: var(
6666
- --x-color-background-option-list-button-default-hover
6667
- );
6668
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
6669
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
6670
- -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
6671
- text-decoration: var(--x-font-decoration-option-list-button-default-hover);
6672
- }
package/docs/API-reference/components/history-queries/x-components.history-query.md CHANGED
@@ -99,6 +99,62 @@ export default {
99
99
  </script>
100
100
  ```
101
101
 
102
+ ### Customizing the content with classes
103
+
104
+ The `suggestionClass` prop can be used to add classes to the history query suggestion.
105
+
106
+ ```vue live
107
+ <template>
108
+ <HistoryQuery :suggestion="suggestion" suggestionClass="x-custom-class" />
109
+ </template>
110
+
111
+ <script>
112
+ import { HistoryQuery } from "@empathyco/x-components/history-queries";
113
+ export default {
114
+ name: "HistoryQueryDemo",
115
+ components: {
116
+ HistoryQuery
117
+ },
118
+ data() {
119
+ return {
120
+ suggestion: {
121
+ modelName: "HistoryQuery",
122
+ query: "trousers",
123
+ facets: []
124
+ }
125
+ };
126
+ }
127
+ };
128
+ </script>
129
+ ```
130
+
131
+ The `removeButtonClass` prop can be used to add classes to the remove history query.
132
+
133
+ ```vue live
134
+ <template>
135
+ <HistoryQuery :suggestion="suggestion" removeButtonClass="x-custom-class" />
136
+ </template>
137
+
138
+ <script>
139
+ import { HistoryQuery } from "@empathyco/x-components/history-queries";
140
+ export default {
141
+ name: "HistoryQueryDemo",
142
+ components: {
143
+ HistoryQuery
144
+ },
145
+ data() {
146
+ return {
147
+ suggestion: {
148
+ modelName: "HistoryQuery",
149
+ query: "trousers",
150
+ facets: []
151
+ }
152
+ };
153
+ }
154
+ };
155
+ </script>
156
+ ```
157
+
102
158
  ## Events
103
159
 
104
160
  A list of events that the component will emit:
package/js/x-modules/history-queries/components/history-query.vue.js CHANGED
@@ -18,6 +18,7 @@ var __vue_render__ = function () {
18
18
  _vm._b(
19
19
  {
20
20
  staticClass: "x-history-query__suggestion",
21
+ class: _vm.suggestionClass,
21
22
  attrs: { "data-test": "history-query", feature: "history_query" },
22
23
  scopedSlots: _vm._u(
23
24
  [
@@ -52,7 +53,7 @@ var __vue_render__ = function () {
52
53
  "RemoveHistoryQuery",
53
54
  {
54
55
  staticClass: "x-history-query__remove x-suggestion-group-button",
55
- class: _vm.removeHistoryQueryClass,
56
+ class: _vm.removeButtonClass,
56
57
  attrs: {
57
58
  historyQuery: _vm.suggestion,
58
59
  "data-test": "remove-history-query",
package/js/x-modules/history-queries/components/history-query.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n <div class=\"x-history-query x-suggestion-group\">\n <BaseSuggestion\n class=\"x-history-query__suggestion\"\n v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n data-test=\"history-query\"\n feature=\"history_query\"\n #default=\"baseScope\"\n >\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ ...baseScope }\" />\n </BaseSuggestion>\n <RemoveHistoryQuery\n class=\"x-history-query__remove x-suggestion-group-button\"\n :class=\"removeHistoryQueryClass\"\n :historyQuery=\"suggestion\"\n data-test=\"remove-history-query\"\n >\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n -->\n <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n </RemoveHistoryQuery>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import Highlight from '../../../components/highlight.vue';\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 { historyQueriesXModule } from '../x-module';\n import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n import RemoveHistoryQuery from './remove-history-query.vue';\n\n /**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { Highlight, RemoveHistoryQuery, BaseSuggestion }\n })\n export default class HistoryQuery extends Mixins(dynamicPropsMixin(['removeHistoryQueryClass'])) {\n /**\n * The history query suggestion to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: HistoryQueryModel;\n\n /**\n * The normalized query of the history-queries module.\n *\n * @internal\n */\n @Getter('historyQueries', 'normalizedQuery')\n public query!: string;\n\n /**\n * The list of events that are going to be emitted when the suggestion button is pressed.\n *\n * @internal\n * @returns The {@link XEvent | XEvents} to emit.\n */\n protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n return {\n UserSelectedAHistoryQuery: this.suggestion\n };\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\">\n <template #default=\"{ suggestion }\">\n <HistoryIcon />\n <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n </template>\n\n <template #remove-button-content=\"{ suggestion }\">\n <CrossIcon />\n </template>\n </HistoryQuery>\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery,\n HistoryIcon,\n CrossIcon,\n Highlight\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedAHistoryQuery`: the event is emitted after the user clicks the button. The event\n payload is the history query data.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n <div class=\"x-history-query x-suggestion-group\">\n <BaseSuggestion\n class=\"x-history-query__suggestion\"\n :class=\"suggestionClass\"\n v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n data-test=\"history-query\"\n feature=\"history_query\"\n #default=\"baseScope\"\n >\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ ...baseScope }\" />\n </BaseSuggestion>\n <RemoveHistoryQuery\n class=\"x-history-query__remove x-suggestion-group-button\"\n :class=\"removeButtonClass\"\n :historyQuery=\"suggestion\"\n data-test=\"remove-history-query\"\n >\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n -->\n <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n </RemoveHistoryQuery>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import Highlight from '../../../components/highlight.vue';\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 { historyQueriesXModule } from '../x-module';\n import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n import RemoveHistoryQuery from './remove-history-query.vue';\n\n /**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { Highlight, RemoveHistoryQuery, BaseSuggestion }\n })\n export default class HistoryQuery extends Mixins(\n dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])\n ) {\n /**\n * The history query suggestion to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: HistoryQueryModel;\n\n /**\n * The normalized query of the history-queries module.\n *\n * @internal\n */\n @Getter('historyQueries', 'normalizedQuery')\n public query!: string;\n\n /**\n * The list of events that are going to be emitted when the suggestion button is pressed.\n *\n * @internal\n * @returns The {@link XEvent | XEvents} to emit.\n */\n protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n return {\n UserSelectedAHistoryQuery: this.suggestion\n };\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\">\n <template #default=\"{ suggestion }\">\n <HistoryIcon />\n <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n </template>\n\n <template #remove-button-content=\"{ suggestion }\">\n <CrossIcon />\n </template>\n </HistoryQuery>\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery,\n HistoryIcon,\n CrossIcon,\n Highlight\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\n import { HistoryQuery } from '@empathyco/x-components/history-queries';\n export default {\n name: 'HistoryQueryDemo',\n components: {\n HistoryQuery\n },\n data() {\n return {\n suggestion: {\n modelName: 'HistoryQuery',\n query: 'trousers',\n facets: []\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedAHistoryQuery`: the event is emitted after the user clicks the button. The event\n payload is the history query data.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js CHANGED
@@ -15,7 +15,7 @@ import __vue_component__$1 from './remove-history-query.vue.js';
15
15
  *
16
16
  * @public
17
17
  */
18
- let HistoryQuery = class HistoryQuery extends Mixins(dynamicPropsMixin(['removeHistoryQueryClass'])) {
18
+ let HistoryQuery = class HistoryQuery extends Mixins(dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])) {
19
19
  /**
20
20
  * The list of events that are going to be emitted when the suggestion button is pressed.
21
21
  *
package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"history-query.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-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\n\n\n\n\n\n\n\n\n\n\n\n\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import Highlight from '../../../components/highlight.vue';\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 { historyQueriesXModule } from '../x-module';\n import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n import RemoveHistoryQuery from './remove-history-query.vue';\n\n /**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { Highlight, RemoveHistoryQuery, BaseSuggestion }\n })\n export default class HistoryQuery extends Mixins(dynamicPropsMixin(['removeHistoryQueryClass'])) {\n /**\n * The history query suggestion to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: HistoryQueryModel;\n\n /**\n * The normalized query of the history-queries module.\n *\n * @internal\n */\n @Getter('historyQueries', 'normalizedQuery')\n public query!: string;\n\n /**\n * The list of events that are going to be emitted when the suggestion button is pressed.\n *\n * @internal\n * @returns The {@link XEvent | XEvents} to emit.\n */\n protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n return {\n UserSelectedAHistoryQuery: this.suggestion\n };\n }\n }\n"],"names":["Highlight","RemoveHistoryQuery","BaseSuggestion"],"mappings":";;;;;;;;;;AA4CE;;;;;;AAMG;AAKH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,MAAM,CAAC,iBAAiB,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAA;AAiB9F;;;;;AAKG;AACH,IAAA,IAAc,wBAAwB,GAAA;QACpC,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,UAAU;SAC3C,CAAC;KACH;CACF,CAAA;AArBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC;AACtB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAfH,YAAY,GAAA,UAAA,CAAA;AAJhC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;AAChD,QAAA,UAAU,EAAE,aAAEA,iBAAS,sBAAEC,mBAAkB,kBAAEC,mBAAc,EAAE;KAC9D,CAAC;AACmB,CAAA,EAAA,YAAY,CA4BhC,CAAA;aA5BoB,YAAY;;;;"}
1
+ {"version":3,"file":"history-query.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-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\n\n\n\n\n\n\n\n\n\n\n\n\n\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import Highlight from '../../../components/highlight.vue';\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 { historyQueriesXModule } from '../x-module';\n import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n import RemoveHistoryQuery from './remove-history-query.vue';\n\n /**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { Highlight, RemoveHistoryQuery, BaseSuggestion }\n })\n export default class HistoryQuery extends Mixins(\n dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])\n ) {\n /**\n * The history query suggestion to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: HistoryQueryModel;\n\n /**\n * The normalized query of the history-queries module.\n *\n * @internal\n */\n @Getter('historyQueries', 'normalizedQuery')\n public query!: string;\n\n /**\n * The list of events that are going to be emitted when the suggestion button is pressed.\n *\n * @internal\n * @returns The {@link XEvent | XEvents} to emit.\n */\n protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n return {\n UserSelectedAHistoryQuery: this.suggestion\n };\n }\n }\n"],"names":["Highlight","RemoveHistoryQuery","BaseSuggestion"],"mappings":";;;;;;;;;;AA6CE;;;;;;AAMG;AAKH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,MAAM,CAC9C,iBAAiB,CAAC,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAC5D,CAAA;AAiBC;;;;;AAKG;AACH,IAAA,IAAc,wBAAwB,GAAA;QACpC,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,UAAU;SAC3C,CAAC;KACH;CACF,CAAA;AArBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC;AACtB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAjBH,YAAY,GAAA,UAAA,CAAA;AAJhC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;AAChD,QAAA,UAAU,EAAE,aAAEA,iBAAS,sBAAEC,mBAAkB,kBAAEC,mBAAc,EAAE;KAC9D,CAAC;AACmB,CAAA,EAAA,YAAY,CA8BhC,CAAA;aA9BoB,YAAY;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.285",
3
+ "version": "3.0.0-alpha.286",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -66,11 +66,11 @@
66
66
  "cypress:open:component:firefox": "cypress open --component --browser firefox"
67
67
  },
68
68
  "dependencies": {
69
- "@empathyco/x-adapter": "^8.0.0-alpha.19",
69
+ "@empathyco/x-adapter": "^8.0.0-alpha.20",
70
70
  "@empathyco/x-deep-merge": "^1.3.0-alpha.27",
71
71
  "@empathyco/x-logger": "^1.2.0-alpha.5",
72
72
  "@empathyco/x-storage-service": "^2.0.0-alpha.5",
73
- "@empathyco/x-types": "^10.0.0-alpha.53",
73
+ "@empathyco/x-types": "^10.0.0-alpha.54",
74
74
  "@empathyco/x-utils": "^1.0.0-alpha.13",
75
75
  "@vue/devtools-api": "~6.4.5",
76
76
  "rxjs": "~7.8.0",
@@ -88,8 +88,8 @@
88
88
  "@badeball/cypress-cucumber-preprocessor": "~15.0.0",
89
89
  "@bahmutov/cypress-esbuild-preprocessor": "~2.1.5",
90
90
  "@cypress/vue": "~2.2.4",
91
- "@empathyco/x-adapter-platform": "^1.0.0-alpha.55",
92
- "@empathyco/x-tailwindcss": "^0.2.0-alpha.47",
91
+ "@empathyco/x-adapter-platform": "^1.0.0-alpha.56",
92
+ "@empathyco/x-tailwindcss": "^0.2.0-alpha.48",
93
93
  "@microsoft/api-documenter": "~7.19.27",
94
94
  "@microsoft/api-extractor": "~7.33.7",
95
95
  "@rollup/plugin-commonjs": "~21.0.1",
@@ -138,5 +138,5 @@
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "785ef3c79d456e8abd89af0b0257af4b07c6107f"
141
+ "gitHead": "0400d4cb34cc19653bd478ed54be48756ac2dd78"
142
142
  }
package/types/x-modules/history-queries/components/history-query.vue.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
2
2
  import { XEventsTypes } from '../../../wiring/events.types';
3
- declare const HistoryQuery_base: import("vue-class-component/lib/declarations").VueClass<object & import("vue/types/v3-component-options").ExtractComputedReturns<{}> & Record<never, any> & Partial<Record<"removeHistoryQueryClass", string>> & import("vue").ShallowUnwrapRef<{}>>;
3
+ declare const HistoryQuery_base: import("vue-class-component/lib/declarations").VueClass<object & import("vue/types/v3-component-options").ExtractComputedReturns<{}> & Record<never, any> & Partial<Record<"removeButtonClass" | "suggestionClass", string>> & import("vue").ShallowUnwrapRef<{}>>;
4
4
  /**
5
5
  * This component renders a history query suggestion combining two buttons: one for selecting this
6
6
  * suggestion as the search query, and another one to remove this query suggestion from the
package/types/x-modules/history-queries/components/history-query.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"history-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiCE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;;AAK5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAAsD;IAC9F;;;;OAIG;IAEH,SAAS,CAAC,UAAU,EAAG,iBAAiB,CAAC;IAEzC;;;;OAIG;IAEI,KAAK,EAAG,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,KAAK,wBAAwB,IAAI,OAAO,CAAC,YAAY,CAAC,CAI9D;CACF"}
1
+ {"version":3,"file":"history-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;;AAK5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAEzC;IACC;;;;OAIG;IAEH,SAAS,CAAC,UAAU,EAAG,iBAAiB,CAAC;IAEzC;;;;OAIG;IAEI,KAAK,EAAG,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,KAAK,wBAAwB,IAAI,OAAO,CAAC,YAAY,CAAC,CAI9D;CACF"}