@empathyco/x-components 3.0.0-alpha.284 → 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.
- package/CHANGELOG.md +28 -0
- package/design-system/default-theme.css +4 -4
- package/design-system/deprecated-full-theme.css +9 -9
- package/design-system/full-theme.css +8 -9
- package/design-system/grid-default.css +4 -4
- package/docs/API-reference/components/history-queries/x-components.history-query.md +56 -0
- package/js/components/base-grid.vue.js +3 -3
- package/js/components/base-grid.vue.js.map +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/js/x-modules/history-queries/components/history-query.vue.js +2 -1
- package/js/x-modules/history-queries/components/history-query.vue.js.map +1 -1
- package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +6 -6
- package/types/x-modules/history-queries/components/history-query.vue.d.ts +1 -1
- package/types/x-modules/history-queries/components/history-query.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,34 @@
|
|
|
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
|
+
|
|
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)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### ⚠ BREAKING CHANGES
|
|
23
|
+
|
|
24
|
+
* Rename `x-grid` class to `x-grid-list`.
|
|
25
|
+
* Rename `x-grid__item` class to `x-grid-list__item`.
|
|
26
|
+
* Rename `x-grid--cols-{cols}` class to `x-grid-list--cols-{cols}`.
|
|
27
|
+
|
|
28
|
+
### Features
|
|
29
|
+
|
|
30
|
+
* rename `x-grid` class to `x-grid-list` (#1015) ([dbb5d50](https://github.com/empathyco/x/commit/dbb5d502dd9c1e69c18d137edc8be2e13bceaeb2)), closes [EX-7481](https://searchbroker.atlassian.net/browse/EX-7481)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
6
34
|
## [3.0.0-alpha.284](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.283...@empathyco/x-components@3.0.0-alpha.284) (2023-01-17)
|
|
7
35
|
|
|
8
36
|
**Note:** Version bump only for package @empathyco/x-components
|
|
@@ -679,7 +679,7 @@
|
|
|
679
679
|
--x-size-min-width-grid-item: 150px;
|
|
680
680
|
}
|
|
681
681
|
|
|
682
|
-
.x-grid {
|
|
682
|
+
.x-grid-list {
|
|
683
683
|
margin: 0;
|
|
684
684
|
display: grid;
|
|
685
685
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -689,14 +689,14 @@
|
|
|
689
689
|
padding: var(--x-size-padding-grid);
|
|
690
690
|
gap: var(--x-size-gap-grid);
|
|
691
691
|
}
|
|
692
|
-
.x-
|
|
692
|
+
.x-grid-list__item {
|
|
693
693
|
display: flex;
|
|
694
694
|
flex-flow: column nowrap;
|
|
695
695
|
}
|
|
696
|
-
.x-
|
|
696
|
+
.x-grid-list__item > * {
|
|
697
697
|
flex-grow: 1;
|
|
698
698
|
}
|
|
699
|
-
.x-grid--cols-auto .x-
|
|
699
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
700
700
|
min-width: var(--x-size-min-width-grid-item);
|
|
701
701
|
}
|
|
702
702
|
:root {
|
|
@@ -805,6 +805,15 @@
|
|
|
805
805
|
font-size: var(--x-size-base-20) !important;
|
|
806
806
|
line-height: 1.5;
|
|
807
807
|
}
|
|
808
|
+
.x-font-weight--light {
|
|
809
|
+
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
810
|
+
}
|
|
811
|
+
.x-font-weight--regular {
|
|
812
|
+
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
813
|
+
}
|
|
814
|
+
.x-font-weight--bold {
|
|
815
|
+
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
816
|
+
}
|
|
808
817
|
.x-line-height--none {
|
|
809
818
|
line-height: 1 !important;
|
|
810
819
|
}
|
|
@@ -857,13 +866,4 @@
|
|
|
857
866
|
|
|
858
867
|
.x-normal-case {
|
|
859
868
|
text-transform: none;
|
|
860
|
-
}
|
|
861
|
-
.x-font-weight--light {
|
|
862
|
-
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
863
|
-
}
|
|
864
|
-
.x-font-weight--regular {
|
|
865
|
-
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
866
|
-
}
|
|
867
|
-
.x-font-weight--bold {
|
|
868
|
-
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
869
869
|
}
|
|
@@ -825,7 +825,7 @@
|
|
|
825
825
|
.x-filter--justified .x-filter > *:last-child:not(.x-filter__label) {
|
|
826
826
|
margin-left: auto;
|
|
827
827
|
}
|
|
828
|
-
.x-grid {
|
|
828
|
+
.x-grid-list {
|
|
829
829
|
margin: 0;
|
|
830
830
|
display: grid;
|
|
831
831
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -835,14 +835,14 @@
|
|
|
835
835
|
padding: var(--x-size-padding-grid);
|
|
836
836
|
gap: var(--x-size-gap-grid);
|
|
837
837
|
}
|
|
838
|
-
.x-
|
|
838
|
+
.x-grid-list__item {
|
|
839
839
|
display: flex;
|
|
840
840
|
flex-flow: column nowrap;
|
|
841
841
|
}
|
|
842
|
-
.x-
|
|
842
|
+
.x-grid-list__item > * {
|
|
843
843
|
flex-grow: 1;
|
|
844
844
|
}
|
|
845
|
-
.x-grid--cols-auto .x-
|
|
845
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
846
846
|
min-width: var(--x-size-min-width-grid-item);
|
|
847
847
|
}
|
|
848
848
|
:root {
|
|
@@ -899,6 +899,10 @@
|
|
|
899
899
|
--x-size-width-icon-default: var(--x-size-width-icon-s);
|
|
900
900
|
--x-size-height-icon-default: var(--x-size-height-icon-s);
|
|
901
901
|
}
|
|
902
|
+
:root {
|
|
903
|
+
--x-size-width-icon-s: var(--x-size-base-03);
|
|
904
|
+
--x-size-height-icon-s: var(--x-size-base-03);
|
|
905
|
+
}
|
|
902
906
|
.x-icon--xl {
|
|
903
907
|
--x-size-width-icon-default: var(--x-size-width-icon-xl);
|
|
904
908
|
--x-size-height-icon-default: var(--x-size-height-icon-xl);
|
|
@@ -6665,8 +6669,3 @@
|
|
|
6665
6669
|
.x-sticky {
|
|
6666
6670
|
position: sticky !important;
|
|
6667
6671
|
}
|
|
6668
|
-
|
|
6669
|
-
:root {
|
|
6670
|
-
--x-size-width-icon-s: var(--x-size-base-03);
|
|
6671
|
-
--x-size-height-icon-s: var(--x-size-base-03);
|
|
6672
|
-
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--x-size-min-width-grid-item: 150px;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.x-grid {
|
|
7
|
+
.x-grid-list {
|
|
8
8
|
margin: 0;
|
|
9
9
|
display: grid;
|
|
10
10
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
padding: var(--x-size-padding-grid);
|
|
15
15
|
gap: var(--x-size-gap-grid);
|
|
16
16
|
}
|
|
17
|
-
.x-
|
|
17
|
+
.x-grid-list__item {
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-flow: column nowrap;
|
|
20
20
|
}
|
|
21
|
-
.x-
|
|
21
|
+
.x-grid-list__item > * {
|
|
22
22
|
flex-grow: 1;
|
|
23
23
|
}
|
|
24
|
-
.x-grid--cols-auto .x-
|
|
24
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
25
25
|
min-width: var(--x-size-min-width-grid-item);
|
|
26
26
|
}
|
|
@@ -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:
|
|
@@ -13,7 +13,7 @@ var __vue_render__ = function () {
|
|
|
13
13
|
_vm.animation,
|
|
14
14
|
{
|
|
15
15
|
tag: "component",
|
|
16
|
-
staticClass: "x-grid x-base-grid",
|
|
16
|
+
staticClass: "x-grid-list x-base-grid",
|
|
17
17
|
class: _vm.cssClasses,
|
|
18
18
|
style: _vm.style,
|
|
19
19
|
attrs: { tag: "ul", "data-test": "grid" },
|
|
@@ -26,7 +26,7 @@ var __vue_render__ = function () {
|
|
|
26
26
|
"li",
|
|
27
27
|
{
|
|
28
28
|
key: item.id,
|
|
29
|
-
staticClass: "x-
|
|
29
|
+
staticClass: "x-grid-list__item x-base-grid__item",
|
|
30
30
|
class: cssClass,
|
|
31
31
|
},
|
|
32
32
|
[
|
|
@@ -56,7 +56,7 @@ __vue_render__._withStripped = true;
|
|
|
56
56
|
/* style */
|
|
57
57
|
const __vue_inject_styles__ = undefined;
|
|
58
58
|
/* scoped */
|
|
59
|
-
const __vue_scope_id__ = "data-v-
|
|
59
|
+
const __vue_scope_id__ = "data-v-3b62670c";
|
|
60
60
|
/* module identifier */
|
|
61
61
|
const __vue_module_identifier__ = undefined;
|
|
62
62
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-
|
|
1
|
+
{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid-list x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-grid-list__item x-base-grid__item\"\n >\n <!--\n @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n the item using that slot composition to render.\n @binding {item} item - Item to render\n -->\n <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n <!--\n @slot (required) Default item rendering. This slot will be used by default for rendering\n the item without an specific slot implementation.\n @binding {item} item - Item to render\n -->\n <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-base-grid {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n\n &__banner,\n &__next-queries-group {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n <BaseGrid :items=\"items\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n <BaseGrid :items=\"items\" :columns=\"12\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n <BaseGrid :animation=\"animation\" :items=\"items\">\n <template #banner=\"{ item }\">\n <span class=\"banner\">\n {{ `${item.title} banner` }}\n </span>\n </template>\n <template #next-queries=\"{ item }\">\n <span>\n {{ `${item.totalResults} next queries` }}\n </span>\n </template>\n <template #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ `${item.title} promoted` }}\n </span>\n </template>\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n {{ item.name }}\n </BaseResultLink>\n </template>\n </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -50,7 +50,7 @@ let BaseGrid = class BaseGrid extends Vue {
|
|
|
50
50
|
* @internal
|
|
51
51
|
*/
|
|
52
52
|
get cssClasses() {
|
|
53
|
-
return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';
|
|
53
|
+
return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
56
56
|
* CSSStyleDeclaration object specifying the number of columns the grid is divided into based on
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-grid.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 import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n"],"names":[],"mappings":";;;;;;;;AAoDE;;;;;;;;;AASG;AAEH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG,CAAA;AAAzC,IAAA,WAAA,GAAA;;AAoCE;;;;;AAKG;QAEI,IAAqB,CAAA,qBAAA,GAAG,CAAC,CAAC;KAwFlC;AAtFC;;;;;;AAMG;AACH,IAAA,IAAc,aAAa,GAAA;QACzB,QACE,IAAI,CAAC,KAAK;AACV,YAAA,IAAI,CAAC,iBAAiB;;;AAGtB,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;KACH;AAED;;;;;;;AAOG;AACH,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"base-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-grid.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 import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-base-grid[data-v-
|
|
3
|
+
var css = ".x-base-grid[data-v-3b62670c] {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n}\n.x-base-grid__banner[data-v-3b62670c], .x-base-grid__next-queries-group[data-v-3b62670c] {\n grid-column-start: 1;\n grid-column-end: -1;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
|
@@ -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.
|
|
56
|
+
class: _vm.removeButtonClass,
|
|
56
57
|
attrs: {
|
|
57
58
|
historyQuery: _vm.suggestion,
|
|
58
59
|
"data-test": "remove-history-query",
|
|
@@ -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=\"
|
|
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(['
|
|
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
|
*
|
|
@@ -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(['
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
92
|
-
"@empathyco/x-tailwindcss": "^0.2.0-alpha.
|
|
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": "
|
|
141
|
+
"gitHead": "0400d4cb34cc19653bd478ed54be48756ac2dd78"
|
|
142
142
|
}
|
|
@@ -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<"
|
|
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
|
|
@@ -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":"
|
|
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"}
|