@empathyco/x-components 3.0.0-alpha.89 → 3.0.0-alpha.91
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 +26 -0
- package/design-system/full-theme.css +14 -15
- package/docs/API-reference/api/x-components.md +1 -1
- package/docs/API-reference/api/x-components.myhistory.animation.md +1 -1
- package/docs/API-reference/api/x-components.myhistory.locale.md +13 -0
- package/docs/API-reference/api/x-components.myhistory.md +3 -2
- package/docs/API-reference/components/history-queries/x-components.my-history.md +51 -4
- package/js/x-modules/history-queries/components/my-history.vue.js +140 -62
- package/js/x-modules/history-queries/components/my-history.vue.js.map +1 -1
- package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js +83 -4
- package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/components/banner.vue.js +2 -2
- package/js/x-modules/search/components/banner.vue.js.map +1 -1
- package/js/x-modules/search/components/promoted.vue.js +2 -2
- package/js/x-modules/search/components/promoted.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +32 -1
- package/report/x-components.api.md +12 -1
- package/types/x-modules/history-queries/components/my-history.vue.d.ts +71 -3
- package/types/x-modules/history-queries/components/my-history.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,32 @@
|
|
|
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.91](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.90...@empathyco/x-components@3.0.0-alpha.91) (2022-05-04)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add `alt-text` accessibility
|
|
11
|
+
([da5a10a](https://github.com/empathyco/x/commit/da5a10a236aae5fae96943fe0ad54849df15e7f5)),
|
|
12
|
+
closes [EX-5930](https://searchbroker.atlassian.net/browse/EX-5930)
|
|
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
|
+
|
|
19
|
+
## [3.0.0-alpha.90](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.89...@empathyco/x-components@3.0.0-alpha.90) (2022-05-03)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- **history-queries:** add `MyHistory` component
|
|
24
|
+
([9929212](https://github.com/empathyco/x/commit/992921275edcca7a6c14ab6dfeaa2dbacae6a5e8)),
|
|
25
|
+
closes [EX-5703](https://searchbroker.atlassian.net/browse/EX-5703)
|
|
26
|
+
|
|
27
|
+
# Change Log
|
|
28
|
+
|
|
29
|
+
All notable changes to this project will be documented in this file. See
|
|
30
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
31
|
+
|
|
6
32
|
## [3.0.0-alpha.89](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.88...@empathyco/x-components@3.0.0-alpha.89) (2022-04-29)
|
|
7
33
|
|
|
8
34
|
### Build System
|
|
@@ -218,6 +218,20 @@
|
|
|
218
218
|
--x-color-border-button-ghost: transparent;
|
|
219
219
|
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
220
220
|
}
|
|
221
|
+
.x-button--pill.x-button,
|
|
222
|
+
.x-button--pill .x-button {
|
|
223
|
+
--x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
|
|
224
|
+
--x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
|
|
225
|
+
--x-size-border-radius-top-right-button-default: var(
|
|
226
|
+
--x-size-border-radius-top-right-button-pill
|
|
227
|
+
);
|
|
228
|
+
--x-size-border-radius-bottom-right-button-default: var(
|
|
229
|
+
--x-size-border-radius-bottom-right-button-pill
|
|
230
|
+
);
|
|
231
|
+
--x-size-border-radius-bottom-left-button-default: var(
|
|
232
|
+
--x-size-border-radius-bottom-left-button-pill
|
|
233
|
+
);
|
|
234
|
+
}
|
|
221
235
|
:root {
|
|
222
236
|
--x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
|
|
223
237
|
--x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
|
|
@@ -7552,18 +7566,3 @@
|
|
|
7552
7566
|
.x-normal-case {
|
|
7553
7567
|
text-transform: none;
|
|
7554
7568
|
}
|
|
7555
|
-
|
|
7556
|
-
.x-button--pill.x-button,
|
|
7557
|
-
.x-button--pill .x-button {
|
|
7558
|
-
--x-size-border-radius-button-default: var(--x-size-border-radius-button-pill);
|
|
7559
|
-
--x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-pill);
|
|
7560
|
-
--x-size-border-radius-top-right-button-default: var(
|
|
7561
|
-
--x-size-border-radius-top-right-button-pill
|
|
7562
|
-
);
|
|
7563
|
-
--x-size-border-radius-bottom-right-button-default: var(
|
|
7564
|
-
--x-size-border-radius-bottom-right-button-pill
|
|
7565
|
-
);
|
|
7566
|
-
--x-size-border-radius-bottom-left-button-default: var(
|
|
7567
|
-
--x-size-border-radius-bottom-left-button-pill
|
|
7568
|
-
);
|
|
7569
|
-
}
|
|
@@ -85,7 +85,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
85
85
|
| [MainScroll](./x-components.mainscroll.md) | Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.<!-- -->Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component. |
|
|
86
86
|
| [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
|
|
87
87
|
| [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
|
|
88
|
-
| [MyHistory](./x-components.myhistory.md) |
|
|
88
|
+
| [MyHistory](./x-components.myhistory.md) | The component renders the full history of user searched queries grouped by the day they were performed. |
|
|
89
89
|
| [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
|
|
90
90
|
| [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
|
|
91
91
|
| [NextQuery](./x-components.nextquery.md) | Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default. |
|
|
@@ -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) > [MyHistory](./x-components.myhistory.md) > [locale](./x-components.myhistory.locale.md)
|
|
4
|
+
|
|
5
|
+
## MyHistory.locale property
|
|
6
|
+
|
|
7
|
+
The current locale.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
protected locale: string;
|
|
13
|
+
```
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## MyHistory class
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
The component renders the full history of user searched queries grouped by the day they were performed.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
@@ -21,5 +21,6 @@ Allows the user to select one of them, emitting the needed events. A history que
|
|
|
21
21
|
|
|
22
22
|
| Property | Modifiers | Type | Description |
|
|
23
23
|
| --- | --- | --- | --- |
|
|
24
|
-
| [animation](./x-components.myhistory.animation.md) | | Vue | Animation component that will be used to animate the suggestions. |
|
|
24
|
+
| [animation](./x-components.myhistory.animation.md) | | Vue \| string | Animation component that will be used to animate the suggestions. |
|
|
25
|
+
| [locale](./x-components.myhistory.locale.md) | | string | The current locale. |
|
|
25
26
|
|
|
@@ -6,7 +6,8 @@ title: MyHistory
|
|
|
6
6
|
|
|
7
7
|
# MyHistory
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
The component renders the full history of user searched queries grouped by the day
|
|
10
|
+
they were performed.
|
|
10
11
|
|
|
11
12
|
Allows the user to select one of them, emitting the needed events.
|
|
12
13
|
A history query is just another type of suggestion that contains a query that the user has
|
|
@@ -14,14 +15,16 @@ made in the past.
|
|
|
14
15
|
|
|
15
16
|
## Props
|
|
16
17
|
|
|
17
|
-
| Name | Description | Type
|
|
18
|
-
| ---------------------- | ----------------------------------------------------------------- |
|
|
19
|
-
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>
|
|
18
|
+
| Name | Description | Type | Default |
|
|
19
|
+
| ---------------------- | ----------------------------------------------------------------- | ------------------- | ----------------- |
|
|
20
|
+
| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>union</code> | <code>'ul'</code> |
|
|
21
|
+
| <code>locale</code> | The current locale. | <code>string</code> | <code>'en'</code> |
|
|
20
22
|
|
|
21
23
|
## Slots
|
|
22
24
|
|
|
23
25
|
| Name | Description | Bindings<br />(name - type - description) |
|
|
24
26
|
| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
27
|
+
| <code>date</code> | | |
|
|
25
28
|
| <code>suggestion</code> | History Query item | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
|
|
26
29
|
| <code>suggestion-content</code> | History Query content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
|
|
27
30
|
| <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
|
|
@@ -51,6 +54,27 @@ export default {
|
|
|
51
54
|
</script>
|
|
52
55
|
```
|
|
53
56
|
|
|
57
|
+
### Play with props
|
|
58
|
+
|
|
59
|
+
In this example, the my history has been configured to use the 'es' locale.
|
|
60
|
+
|
|
61
|
+
```vue
|
|
62
|
+
<template>
|
|
63
|
+
<MyHistory :locale="es" />
|
|
64
|
+
</template>
|
|
65
|
+
|
|
66
|
+
<script>
|
|
67
|
+
import { MyHistory } from "@empathyco/x-components/history-queries";
|
|
68
|
+
|
|
69
|
+
export default {
|
|
70
|
+
name: "MyHistoryDemo",
|
|
71
|
+
components: {
|
|
72
|
+
MyHistory
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
</script>
|
|
76
|
+
```
|
|
77
|
+
|
|
54
78
|
### Play with the animation
|
|
55
79
|
|
|
56
80
|
```vue
|
|
@@ -129,6 +153,29 @@ export default {
|
|
|
129
153
|
</script>
|
|
130
154
|
```
|
|
131
155
|
|
|
156
|
+
### Play with suggestion-content slot
|
|
157
|
+
|
|
158
|
+
In this example, an HTML span tag for the date are passed.
|
|
159
|
+
|
|
160
|
+
```vue
|
|
161
|
+
<template>
|
|
162
|
+
<MyHistory #date="{ date }">
|
|
163
|
+
<span>{{ date }}</span>
|
|
164
|
+
</MyHistory>
|
|
165
|
+
</template>
|
|
166
|
+
|
|
167
|
+
<script>
|
|
168
|
+
import { MyHistory } from "@empathyco/x-components/history-queries";
|
|
169
|
+
|
|
170
|
+
export default {
|
|
171
|
+
name: "MyHistoryDemo",
|
|
172
|
+
components: {
|
|
173
|
+
MyHistory
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
</script>
|
|
177
|
+
```
|
|
178
|
+
|
|
132
179
|
### Play with suggestion-content-remove slot
|
|
133
180
|
|
|
134
181
|
To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
|
|
@@ -9,77 +9,155 @@ var __vue_render__ = function () {
|
|
|
9
9
|
var _vm = this;
|
|
10
10
|
var _h = _vm.$createElement;
|
|
11
11
|
var _c = _vm._self._c || _h;
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
suggestions: _vm.historyQueries,
|
|
16
|
-
"data-test": "my-history-queries",
|
|
17
|
-
animation: _vm.animation,
|
|
18
|
-
},
|
|
19
|
-
scopedSlots: _vm._u(
|
|
20
|
-
[
|
|
12
|
+
return _vm.hasHistoryQueries
|
|
13
|
+
? _c(
|
|
14
|
+
_vm.animation,
|
|
21
15
|
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
16
|
+
tag: "component",
|
|
17
|
+
staticClass: "x-my-history x-list",
|
|
18
|
+
attrs: { tag: "ul" },
|
|
19
|
+
},
|
|
20
|
+
_vm._l(_vm.groupByDate, function (historyQueries, date) {
|
|
21
|
+
return _c(
|
|
22
|
+
"li",
|
|
23
|
+
{
|
|
24
|
+
key: date,
|
|
25
|
+
staticClass: "x-my-history-item",
|
|
26
|
+
attrs: { "data-test": "my-history-item" },
|
|
27
|
+
},
|
|
28
|
+
[
|
|
27
29
|
_vm._t(
|
|
28
|
-
"
|
|
30
|
+
"date",
|
|
29
31
|
function () {
|
|
30
32
|
return [
|
|
31
|
-
_c(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"data-test": "history-
|
|
33
|
+
_c(
|
|
34
|
+
"span",
|
|
35
|
+
{
|
|
36
|
+
staticClass: "x-my-history-item__date",
|
|
37
|
+
attrs: { "data-test": "my-history-date" },
|
|
36
38
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
[_vm._v(_vm._s(date))]
|
|
40
|
+
),
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{ date: date }
|
|
44
|
+
),
|
|
45
|
+
_vm._v(" "),
|
|
46
|
+
_c("BaseSuggestions", {
|
|
47
|
+
staticClass: "x-my-history-queries",
|
|
48
|
+
attrs: {
|
|
49
|
+
suggestions: historyQueries,
|
|
50
|
+
"data-test": "my-history-queries",
|
|
51
|
+
animation: _vm.animation,
|
|
52
|
+
},
|
|
53
|
+
scopedSlots: _vm._u(
|
|
54
|
+
[
|
|
55
|
+
{
|
|
56
|
+
key: "default",
|
|
57
|
+
fn: function (ref) {
|
|
58
|
+
var suggestion = ref.suggestion;
|
|
59
|
+
var index = ref.index;
|
|
60
|
+
return [
|
|
61
|
+
_vm._t(
|
|
62
|
+
"suggestion",
|
|
63
|
+
function () {
|
|
42
64
|
return [
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
65
|
+
_c("HistoryQuery", {
|
|
66
|
+
staticClass: "x-history-queries__item",
|
|
67
|
+
attrs: {
|
|
68
|
+
suggestion: suggestion,
|
|
69
|
+
"data-test": "history-query-item",
|
|
70
|
+
},
|
|
71
|
+
scopedSlots: _vm._u(
|
|
72
|
+
[
|
|
73
|
+
{
|
|
74
|
+
key: "default",
|
|
75
|
+
fn: function () {
|
|
76
|
+
return [
|
|
77
|
+
_vm._t(
|
|
78
|
+
"suggestion-content",
|
|
79
|
+
function () {
|
|
80
|
+
return [
|
|
81
|
+
_c(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
staticClass:
|
|
85
|
+
"x-list x-list--vertical",
|
|
86
|
+
},
|
|
87
|
+
[
|
|
88
|
+
_c("span", [
|
|
89
|
+
_vm._v(
|
|
90
|
+
_vm._s(
|
|
91
|
+
suggestion.query
|
|
92
|
+
)
|
|
93
|
+
),
|
|
94
|
+
]),
|
|
95
|
+
_vm._v(" "),
|
|
96
|
+
_c("span", [
|
|
97
|
+
_vm._v(
|
|
98
|
+
_vm._s(
|
|
99
|
+
_vm.formatTime(
|
|
100
|
+
suggestion.timestamp
|
|
101
|
+
)
|
|
102
|
+
)
|
|
103
|
+
),
|
|
104
|
+
]),
|
|
105
|
+
]
|
|
106
|
+
),
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
null,
|
|
110
|
+
{
|
|
111
|
+
suggestion: suggestion,
|
|
112
|
+
index: index,
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
]
|
|
116
|
+
},
|
|
117
|
+
proxy: true,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
key: "remove-button-content",
|
|
121
|
+
fn: function () {
|
|
122
|
+
return [
|
|
123
|
+
_vm._t(
|
|
124
|
+
"suggestion-remove-content",
|
|
125
|
+
null,
|
|
126
|
+
null,
|
|
127
|
+
{
|
|
128
|
+
suggestion: suggestion,
|
|
129
|
+
index: index,
|
|
130
|
+
}
|
|
131
|
+
),
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
proxy: true,
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
null,
|
|
138
|
+
true
|
|
139
|
+
),
|
|
46
140
|
}),
|
|
47
141
|
]
|
|
48
142
|
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
true
|
|
68
|
-
),
|
|
69
|
-
}),
|
|
70
|
-
]
|
|
71
|
-
},
|
|
72
|
-
null,
|
|
73
|
-
{ suggestion: suggestion, index: index }
|
|
74
|
-
),
|
|
75
|
-
]
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
],
|
|
79
|
-
null,
|
|
80
|
-
true
|
|
81
|
-
),
|
|
82
|
-
})
|
|
143
|
+
null,
|
|
144
|
+
{ suggestion: suggestion, index: index }
|
|
145
|
+
),
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
null,
|
|
151
|
+
true
|
|
152
|
+
),
|
|
153
|
+
}),
|
|
154
|
+
],
|
|
155
|
+
2
|
|
156
|
+
)
|
|
157
|
+
}),
|
|
158
|
+
0
|
|
159
|
+
)
|
|
160
|
+
: _vm._e()
|
|
83
161
|
};
|
|
84
162
|
var __vue_staticRenderFns__ = [];
|
|
85
163
|
__vue_render__._withStripped = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-my-history-queries\"\n data-test=\"my-history-queries\"\n :animation=\"animation\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default>\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { State } from '../../../components/decorators/store.decorators';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQueryComponent from './history-query.vue';\n\n /**\n * This component renders the complete list of suggestions coming from the user queries history.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n *\n * @public\n */\n @Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class MyHistory 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 * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n <MyHistory />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <MyHistory #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <MyHistory #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history x-list\" tag=\"ul\">\n <li\n v-for=\"(historyQueries, date) in groupByDate\"\n :key=\"date\"\n class=\"x-my-history-item\"\n data-test=\"my-history-item\"\n >\n <slot name=\"date\" :date=\"date\">\n <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n </slot>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-my-history-queries\"\n data-test=\"my-history-queries\"\n :animation=\"animation\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default>\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\">\n <div class=\"x-list x-list--vertical\">\n <span>{{ suggestion.query }}</span>\n <span>{{ formatTime(suggestion.timestamp) }}</span>\n </div>\n </slot>\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { State } from '../../../components/decorators/store.decorators';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQueryComponent from './history-query.vue';\n\n /**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\n @Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The current locale.\n *\n * @public\n */\n @Prop({ default: 'en' })\n protected locale!: string;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * The provided {@link SnippetConfig}.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig?: SnippetConfig;\n\n /**\n * Returns a record of history queries grouped by date.\n *\n * @example\n * ```typescript\n * const historyQueriesGrouped = {\n * 'Monday, January 10th, 2022' : [{\n * query: 'lego',\n * modelName: 'HistoryQuery',\n * timestamp: 121312312\n * }],\n * 'Tuesday, January 11th, 2022' : [{\n * query: 'barbie',\n * modelName: 'HistoryQuery',\n * timestamp: 15221212\n * }]\n * }\n * ```\n * @returns The history queries grouped by date.\n * @internal\n */\n protected get groupByDate(): Dictionary<HistoryQuery[]> {\n return groupItemsBy(this.historyQueries, current => {\n return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n day: 'numeric',\n weekday: 'long',\n month: 'long',\n year: 'numeric'\n });\n });\n }\n\n /**\n * Formats a timestamp into `hh:mm [PM/AM]` format.\n *\n * @example\n * ```typescript\n * // locale 'es'\n * console.log(formatTime(Date.now()) // '16:54'.\n *\n * // locale 'en'\n * console.log(formatTime(Date.now()) // '16:54 PM'.\n * ```\n * @param timestamp - The timestamp to format.\n * @returns The formatted time.\n * @internal\n */\n protected formatTime(timestamp: number): string {\n return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n hour: '2-digit',\n minute: '2-digit'\n });\n }\n /**\n * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n * stored.\n *\n * @returns True if there are history queries; false otherwise.\n * @internal\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n /**\n * The locale that it is going to be used. It can be the one send it by the snippet config or\n * the one pass it using the prop.\n *\n * @returns The locale to be used.\n * @internal\n */\n protected get usedLocale(): string {\n return this.snippetConfig?.lang ?? this.locale;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n <MyHistory />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <MyHistory #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <MyHistory #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n <MyHistory #date=\"{ date }\">\n <span>{{ date }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -1,31 +1,110 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
|
-
import { Prop, Component } from 'vue-property-decorator';
|
|
3
|
+
import { Prop, Inject, Component } from 'vue-property-decorator';
|
|
4
4
|
import { xComponentMixin } from '../../../components/x-component.mixin.js';
|
|
5
5
|
import { State } from '../../../components/decorators/store.decorators.js';
|
|
6
6
|
import __vue_component__$1 from '../../../components/suggestions/base-suggestions.vue.js';
|
|
7
|
+
import { groupItemsBy, isArrayEmpty } from '../../../utils/array.js';
|
|
7
8
|
import { historyQueriesXModule } from '../x-module.js';
|
|
8
9
|
import __vue_component__ from './history-query.vue.js';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
|
-
*
|
|
12
|
+
* The component renders the full history of user searched queries grouped by the day
|
|
13
|
+
* they were performed.
|
|
12
14
|
*
|
|
13
15
|
* @remarks
|
|
14
16
|
*
|
|
15
17
|
* Allows the user to select one of them, emitting the needed events.
|
|
16
18
|
* A history query is just another type of suggestion that contains a query that the user has
|
|
17
19
|
* made in the past.
|
|
18
|
-
*
|
|
19
20
|
* @public
|
|
20
21
|
*/
|
|
21
22
|
let MyHistory = class MyHistory extends Vue {
|
|
23
|
+
/**
|
|
24
|
+
* Returns a record of history queries grouped by date.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```typescript
|
|
28
|
+
* const historyQueriesGrouped = {
|
|
29
|
+
* 'Monday, January 10th, 2022' : [{
|
|
30
|
+
* query: 'lego',
|
|
31
|
+
* modelName: 'HistoryQuery',
|
|
32
|
+
* timestamp: 121312312
|
|
33
|
+
* }],
|
|
34
|
+
* 'Tuesday, January 11th, 2022' : [{
|
|
35
|
+
* query: 'barbie',
|
|
36
|
+
* modelName: 'HistoryQuery',
|
|
37
|
+
* timestamp: 15221212
|
|
38
|
+
* }]
|
|
39
|
+
* }
|
|
40
|
+
* ```
|
|
41
|
+
* @returns The history queries grouped by date.
|
|
42
|
+
* @internal
|
|
43
|
+
*/
|
|
44
|
+
get groupByDate() {
|
|
45
|
+
return groupItemsBy(this.historyQueries, current => {
|
|
46
|
+
return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {
|
|
47
|
+
day: 'numeric',
|
|
48
|
+
weekday: 'long',
|
|
49
|
+
month: 'long',
|
|
50
|
+
year: 'numeric'
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Formats a timestamp into `hh:mm [PM/AM]` format.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```typescript
|
|
59
|
+
* // locale 'es'
|
|
60
|
+
* console.log(formatTime(Date.now()) // '16:54'.
|
|
61
|
+
*
|
|
62
|
+
* // locale 'en'
|
|
63
|
+
* console.log(formatTime(Date.now()) // '16:54 PM'.
|
|
64
|
+
* ```
|
|
65
|
+
* @param timestamp - The timestamp to format.
|
|
66
|
+
* @returns The formatted time.
|
|
67
|
+
* @internal
|
|
68
|
+
*/
|
|
69
|
+
formatTime(timestamp) {
|
|
70
|
+
return new Date(timestamp).toLocaleTimeString(this.usedLocale, {
|
|
71
|
+
hour: '2-digit',
|
|
72
|
+
minute: '2-digit'
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* The `hasHistoryQueries` computed property is a flag representing if there are history queries
|
|
77
|
+
* stored.
|
|
78
|
+
*
|
|
79
|
+
* @returns True if there are history queries; false otherwise.
|
|
80
|
+
* @internal
|
|
81
|
+
*/
|
|
82
|
+
get hasHistoryQueries() {
|
|
83
|
+
return !isArrayEmpty(this.historyQueries);
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* The locale that it is going to be used. It can be the one send it by the snippet config or
|
|
87
|
+
* the one pass it using the prop.
|
|
88
|
+
*
|
|
89
|
+
* @returns The locale to be used.
|
|
90
|
+
* @internal
|
|
91
|
+
*/
|
|
92
|
+
get usedLocale() {
|
|
93
|
+
return this.snippetConfig?.lang ?? this.locale;
|
|
94
|
+
}
|
|
22
95
|
};
|
|
23
96
|
__decorate([
|
|
24
|
-
Prop()
|
|
97
|
+
Prop({ default: 'ul' })
|
|
25
98
|
], MyHistory.prototype, "animation", void 0);
|
|
99
|
+
__decorate([
|
|
100
|
+
Prop({ default: 'en' })
|
|
101
|
+
], MyHistory.prototype, "locale", void 0);
|
|
26
102
|
__decorate([
|
|
27
103
|
State('historyQueries', 'historyQueries')
|
|
28
104
|
], MyHistory.prototype, "historyQueries", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
Inject('snippetConfig')
|
|
107
|
+
], MyHistory.prototype, "snippetConfig", void 0);
|
|
29
108
|
MyHistory = __decorate([
|
|
30
109
|
Component({
|
|
31
110
|
components: { HistoryQuery: __vue_component__, BaseSuggestions: __vue_component__$1 },
|
package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-history.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\nimport { historyQueriesXModule } from '../x-module';\nimport HistoryQueryComponent from './history-query.vue';\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"my-history.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array';\nimport { SnippetConfig } from '../../../x-installer/api/api.types';\nimport { historyQueriesXModule } from '../x-module';\nimport HistoryQueryComponent from './history-query.vue';\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\n@Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The current locale.\n *\n * @public\n */\n @Prop({ default: 'en' })\n protected locale!: string;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * The provided {@link SnippetConfig}.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig?: SnippetConfig;\n\n /**\n * Returns a record of history queries grouped by date.\n *\n * @example\n * ```typescript\n * const historyQueriesGrouped = {\n * 'Monday, January 10th, 2022' : [{\n * query: 'lego',\n * modelName: 'HistoryQuery',\n * timestamp: 121312312\n * }],\n * 'Tuesday, January 11th, 2022' : [{\n * query: 'barbie',\n * modelName: 'HistoryQuery',\n * timestamp: 15221212\n * }]\n * }\n * ```\n * @returns The history queries grouped by date.\n * @internal\n */\n protected get groupByDate(): Dictionary<HistoryQuery[]> {\n return groupItemsBy(this.historyQueries, current => {\n return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n day: 'numeric',\n weekday: 'long',\n month: 'long',\n year: 'numeric'\n });\n });\n }\n\n /**\n * Formats a timestamp into `hh:mm [PM/AM]` format.\n *\n * @example\n * ```typescript\n * // locale 'es'\n * console.log(formatTime(Date.now()) // '16:54'.\n *\n * // locale 'en'\n * console.log(formatTime(Date.now()) // '16:54 PM'.\n * ```\n * @param timestamp - The timestamp to format.\n * @returns The formatted time.\n * @internal\n */\n protected formatTime(timestamp: number): string {\n return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n hour: '2-digit',\n minute: '2-digit'\n });\n }\n /**\n * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n * stored.\n *\n * @returns True if there are history queries; false otherwise.\n * @internal\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n /**\n * The locale that it is going to be used. It can be the one send it by the snippet config or\n * the one pass it using the prop.\n *\n * @returns The locale to be used.\n * @internal\n */\n protected get usedLocale(): string {\n return this.snippetConfig?.lang ?? this.locale;\n }\n}\n"],"names":["HistoryQueryComponent","BaseSuggestions"],"mappings":";;;;;;;;;;AAuEA;;;;;;;;;;;AAeA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;IAsDxC,IAAc,WAAW;QACvB,OAAO,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO;YAC9C,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE;gBACrE,GAAG,EAAE,SAAS;gBACd,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,SAAS;aAChB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;;;;;;;;;;;;IAiBS,UAAU,CAAC,SAAiB;QACpC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,EAAE;YAC7D,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;SAClB,CAAC,CAAC;KACJ;;;;;;;;IAQD,IAAc,iBAAiB;QAC7B,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;;;;;;;;IAQD,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC;KAChD;CACF,CAAA;AAnGC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACW;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACE;AAQ1B;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;iDACH;AAQvC;IADC,MAAM,CAAC,eAAe,CAAC;gDACa;AA/BlB,SAAS;IAJ7B,SAAS,CAAC;QACT,UAAU,EAAE,EAAE,YAAY,EAAEA,iBAAqB,mBAAEC,mBAAe,EAAE;QACpE,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,SAAS,CA0G7B;aA1GoB,SAAS;;;;"}
|
|
@@ -20,7 +20,7 @@ var __vue_render__ = function () {
|
|
|
20
20
|
[
|
|
21
21
|
_c("img", {
|
|
22
22
|
staticClass: "x-banner__image",
|
|
23
|
-
attrs: { src: _vm.banner.image, alt:
|
|
23
|
+
attrs: { src: _vm.banner.image, alt: _vm.banner.title },
|
|
24
24
|
}),
|
|
25
25
|
_vm._v(" "),
|
|
26
26
|
_c("h2", { staticClass: "x-banner__title" }, [
|
|
@@ -35,7 +35,7 @@ __vue_render__._withStripped = true;
|
|
|
35
35
|
/* style */
|
|
36
36
|
const __vue_inject_styles__ = function (inject) {
|
|
37
37
|
if (!inject) return
|
|
38
|
-
inject("data-v-
|
|
38
|
+
inject("data-v-3a9082b6_0", { source: ".x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}", map: undefined, media: undefined });
|
|
39
39
|
|
|
40
40
|
};
|
|
41
41
|
/* scoped */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n <img :src=\"banner.image\" class=\"x-banner__image\" alt=\"\" />\n <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Banner as BannerModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n /**\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears. It just contains a link to the banner content, an image\n * and a title.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Banner extends Vue {\n /**\n * The banner data.\n *\n * @public\n */\n @Prop({ required: true })\n public banner!: BannerModel;\n\n /**\n * Emits the banner click event.\n *\n * @internal\n */\n protected emitClickEvent(): void {\n this.$x.emit('UserClickedABanner', this.banner);\n }\n }\n</script>\n\n<style lang=\"scss\">\n .x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n\n &__image {\n width: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script>\n import { Banner } from '@empathyco/x-components/search';\n export default {\n name: 'BannerDemo',\n components: {\n Banner\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n <img :src=\"banner.image\" class=\"x-banner__image\" :alt=\"banner.title\" />\n <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Banner as BannerModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n /**\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears. It just contains a link to the banner content, an image\n * and a title.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Banner extends Vue {\n /**\n * The banner data.\n *\n * @public\n */\n @Prop({ required: true })\n public banner!: BannerModel;\n\n /**\n * Emits the banner click event.\n *\n * @internal\n */\n protected emitClickEvent(): void {\n this.$x.emit('UserClickedABanner', this.banner);\n }\n }\n</script>\n\n<style lang=\"scss\">\n .x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n\n &__image {\n width: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script>\n import { Banner } from '@empathyco/x-components/search';\n export default {\n name: 'BannerDemo',\n components: {\n Banner\n },\n data() {\n return {\n banner: {\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -20,7 +20,7 @@ var __vue_render__ = function () {
|
|
|
20
20
|
[
|
|
21
21
|
_c("img", {
|
|
22
22
|
staticClass: "x-promoted__image",
|
|
23
|
-
attrs: { src: _vm.promoted.image, alt:
|
|
23
|
+
attrs: { src: _vm.promoted.image, alt: _vm.promoted.title },
|
|
24
24
|
}),
|
|
25
25
|
_vm._v(" "),
|
|
26
26
|
_c("h2", { staticClass: "x-promoted__title" }, [
|
|
@@ -35,7 +35,7 @@ __vue_render__._withStripped = true;
|
|
|
35
35
|
/* style */
|
|
36
36
|
const __vue_inject_styles__ = function (inject) {
|
|
37
37
|
if (!inject) return
|
|
38
|
-
inject("data-v-
|
|
38
|
+
inject("data-v-6786add5_0", { source: ".x-promoted {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n.x-promoted__image {\n width: 100%;\n object-fit: contain;\n}", map: undefined, media: undefined });
|
|
39
39
|
|
|
40
40
|
};
|
|
41
41
|
/* scoped */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n <img :src=\"promoted.image\" class=\"x-promoted__image\" alt=\"\" />\n <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Promoted as PromotedModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n\n /**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Promoted extends Vue {\n /**\n * The promoted data.\n *\n * @public\n */\n @Prop({ required: true })\n public promoted!: PromotedModel;\n\n /**\n * Emits the promoted click event.\n *\n * @internal\n */\n protected emitClickEvent(): void {\n this.$x.emit('UserClickedAPromoted', this.promoted);\n }\n }\n</script>\n\n<style lang=\"scss\">\n .x-promoted {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n\n &__image {\n width: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n import { Promoted } from '@empathyco/x-components/search';\n\n export default {\n name: 'PromotedDemo',\n components: {\n Promoted\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Promoted as PromotedModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n\n /**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Promoted extends Vue {\n /**\n * The promoted data.\n *\n * @public\n */\n @Prop({ required: true })\n public promoted!: PromotedModel;\n\n /**\n * Emits the promoted click event.\n *\n * @internal\n */\n protected emitClickEvent(): void {\n this.$x.emit('UserClickedAPromoted', this.promoted);\n }\n }\n</script>\n\n<style lang=\"scss\">\n .x-promoted {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n\n &__image {\n width: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n import { Promoted } from '@empathyco/x-components/search';\n\n export default {\n name: 'PromotedDemo',\n components: {\n Promoted\n },\n data() {\n return {\n promoted: {\n modelName: 'Promoted',\n id: 'promoted-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.91",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"access": "public",
|
|
126
126
|
"directory": "dist"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "ef73eb4b19269566873d0207fdf611b2c44e1ea5"
|
|
129
129
|
}
|
|
@@ -23621,7 +23621,7 @@
|
|
|
23621
23621
|
{
|
|
23622
23622
|
"kind": "Class",
|
|
23623
23623
|
"canonicalReference": "@empathyco/x-components!MyHistory:class",
|
|
23624
|
-
"docComment": "/**\n *
|
|
23624
|
+
"docComment": "/**\n * The component renders the full history of user searched queries grouped by the day they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past.\n *\n * @public\n */\n",
|
|
23625
23625
|
"excerptTokens": [
|
|
23626
23626
|
{
|
|
23627
23627
|
"kind": "Content",
|
|
@@ -23654,6 +23654,10 @@
|
|
|
23654
23654
|
"text": "Vue",
|
|
23655
23655
|
"canonicalReference": "vue!Vue:interface"
|
|
23656
23656
|
},
|
|
23657
|
+
{
|
|
23658
|
+
"kind": "Content",
|
|
23659
|
+
"text": " | string"
|
|
23660
|
+
},
|
|
23657
23661
|
{
|
|
23658
23662
|
"kind": "Content",
|
|
23659
23663
|
"text": ";"
|
|
@@ -23662,6 +23666,33 @@
|
|
|
23662
23666
|
"isOptional": false,
|
|
23663
23667
|
"releaseTag": "Public",
|
|
23664
23668
|
"name": "animation",
|
|
23669
|
+
"propertyTypeTokenRange": {
|
|
23670
|
+
"startIndex": 1,
|
|
23671
|
+
"endIndex": 3
|
|
23672
|
+
},
|
|
23673
|
+
"isStatic": false
|
|
23674
|
+
},
|
|
23675
|
+
{
|
|
23676
|
+
"kind": "Property",
|
|
23677
|
+
"canonicalReference": "@empathyco/x-components!MyHistory#locale:member",
|
|
23678
|
+
"docComment": "/**\n * The current locale.\n *\n * @public\n */\n",
|
|
23679
|
+
"excerptTokens": [
|
|
23680
|
+
{
|
|
23681
|
+
"kind": "Content",
|
|
23682
|
+
"text": "protected locale: "
|
|
23683
|
+
},
|
|
23684
|
+
{
|
|
23685
|
+
"kind": "Content",
|
|
23686
|
+
"text": "string"
|
|
23687
|
+
},
|
|
23688
|
+
{
|
|
23689
|
+
"kind": "Content",
|
|
23690
|
+
"text": ";"
|
|
23691
|
+
}
|
|
23692
|
+
],
|
|
23693
|
+
"isOptional": false,
|
|
23694
|
+
"releaseTag": "Public",
|
|
23695
|
+
"name": "locale",
|
|
23665
23696
|
"propertyTypeTokenRange": {
|
|
23666
23697
|
"startIndex": 1,
|
|
23667
23698
|
"endIndex": 2
|
|
@@ -2262,9 +2262,20 @@ export type MutationsTree<State extends Dictionary, Mutations extends MutationsD
|
|
|
2262
2262
|
|
|
2263
2263
|
// @public
|
|
2264
2264
|
export class MyHistory extends Vue_2 {
|
|
2265
|
-
protected animation: Vue_2;
|
|
2265
|
+
protected animation: Vue_2 | string;
|
|
2266
|
+
// @internal
|
|
2267
|
+
protected formatTime(timestamp: number): string;
|
|
2268
|
+
// @internal
|
|
2269
|
+
protected get groupByDate(): Dictionary<HistoryQuery_2[]>;
|
|
2270
|
+
// @internal
|
|
2271
|
+
protected get hasHistoryQueries(): boolean;
|
|
2266
2272
|
// @internal
|
|
2267
2273
|
historyQueries: HistoryQuery_2[];
|
|
2274
|
+
protected locale: string;
|
|
2275
|
+
// @internal
|
|
2276
|
+
snippetConfig?: SnippetConfig;
|
|
2277
|
+
// @internal
|
|
2278
|
+
protected get usedLocale(): string;
|
|
2268
2279
|
}
|
|
2269
2280
|
|
|
2270
2281
|
// @public
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { HistoryQuery } from '@empathyco/x-types';
|
|
2
|
+
import { Dictionary } from '@empathyco/x-utils';
|
|
2
3
|
import Vue from 'vue';
|
|
4
|
+
import { SnippetConfig } from '../../../x-installer/api/api.types';
|
|
3
5
|
/**
|
|
4
|
-
*
|
|
6
|
+
* The component renders the full history of user searched queries grouped by the day
|
|
7
|
+
* they were performed.
|
|
5
8
|
*
|
|
6
9
|
* @remarks
|
|
7
10
|
*
|
|
8
11
|
* Allows the user to select one of them, emitting the needed events.
|
|
9
12
|
* A history query is just another type of suggestion that contains a query that the user has
|
|
10
13
|
* made in the past.
|
|
11
|
-
*
|
|
12
14
|
* @public
|
|
13
15
|
*/
|
|
14
16
|
export default class MyHistory extends Vue {
|
|
@@ -17,12 +19,78 @@ export default class MyHistory extends Vue {
|
|
|
17
19
|
*
|
|
18
20
|
* @public
|
|
19
21
|
*/
|
|
20
|
-
protected animation: Vue;
|
|
22
|
+
protected animation: Vue | string;
|
|
23
|
+
/**
|
|
24
|
+
* The current locale.
|
|
25
|
+
*
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
protected locale: string;
|
|
21
29
|
/**
|
|
22
30
|
* The list of history queries.
|
|
23
31
|
*
|
|
24
32
|
* @internal
|
|
25
33
|
*/
|
|
26
34
|
historyQueries: HistoryQuery[];
|
|
35
|
+
/**
|
|
36
|
+
* The provided {@link SnippetConfig}.
|
|
37
|
+
*
|
|
38
|
+
* @internal
|
|
39
|
+
*/
|
|
40
|
+
snippetConfig?: SnippetConfig;
|
|
41
|
+
/**
|
|
42
|
+
* Returns a record of history queries grouped by date.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```typescript
|
|
46
|
+
* const historyQueriesGrouped = {
|
|
47
|
+
* 'Monday, January 10th, 2022' : [{
|
|
48
|
+
* query: 'lego',
|
|
49
|
+
* modelName: 'HistoryQuery',
|
|
50
|
+
* timestamp: 121312312
|
|
51
|
+
* }],
|
|
52
|
+
* 'Tuesday, January 11th, 2022' : [{
|
|
53
|
+
* query: 'barbie',
|
|
54
|
+
* modelName: 'HistoryQuery',
|
|
55
|
+
* timestamp: 15221212
|
|
56
|
+
* }]
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
* @returns The history queries grouped by date.
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
protected get groupByDate(): Dictionary<HistoryQuery[]>;
|
|
63
|
+
/**
|
|
64
|
+
* Formats a timestamp into `hh:mm [PM/AM]` format.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```typescript
|
|
68
|
+
* // locale 'es'
|
|
69
|
+
* console.log(formatTime(Date.now()) // '16:54'.
|
|
70
|
+
*
|
|
71
|
+
* // locale 'en'
|
|
72
|
+
* console.log(formatTime(Date.now()) // '16:54 PM'.
|
|
73
|
+
* ```
|
|
74
|
+
* @param timestamp - The timestamp to format.
|
|
75
|
+
* @returns The formatted time.
|
|
76
|
+
* @internal
|
|
77
|
+
*/
|
|
78
|
+
protected formatTime(timestamp: number): string;
|
|
79
|
+
/**
|
|
80
|
+
* The `hasHistoryQueries` computed property is a flag representing if there are history queries
|
|
81
|
+
* stored.
|
|
82
|
+
*
|
|
83
|
+
* @returns True if there are history queries; false otherwise.
|
|
84
|
+
* @internal
|
|
85
|
+
*/
|
|
86
|
+
protected get hasHistoryQueries(): boolean;
|
|
87
|
+
/**
|
|
88
|
+
* The locale that it is going to be used. It can be the one send it by the snippet config or
|
|
89
|
+
* the one pass it using the prop.
|
|
90
|
+
*
|
|
91
|
+
* @returns The locale to be used.
|
|
92
|
+
* @internal
|
|
93
|
+
*/
|
|
94
|
+
protected get usedLocale(): string;
|
|
27
95
|
}
|
|
28
96
|
//# sourceMappingURL=my-history.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-history.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"my-history.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA2DA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,MAAM,KAAK,CAAC;AAMtB,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE;;;;;;;;;;GAUG;AAKH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,SAAS,CAAC,MAAM,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,cAAc,EAAG,YAAY,EAAE,CAAC;IAEvC;;;;OAIG;IAEI,aAAa,CAAC,EAAE,aAAa,CAAC;IAErC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,SAAS,KAAK,WAAW,IAAI,UAAU,CAAC,YAAY,EAAE,CAAC,CAStD;IAED;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAM/C;;;;;;OAMG;IACH,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;IACD;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,MAAM,CAEjC;CACF"}
|