@empathyco/x-components 6.0.0-alpha.26 → 6.0.0-alpha.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/core/index.js.map +1 -1
  3. package/design-system/deprecated-full-theme.css +2068 -2067
  4. package/docs/API-reference/api/x-components.md +2 -1
  5. package/docs/API-reference/api/x-components.relatedprompt.md +27 -11
  6. package/docs/API-reference/api/x-components.relatedpromptsmutations.md +1 -0
  7. package/docs/API-reference/api/x-components.relatedpromptsmutations.resetselectedprompt.md +17 -0
  8. package/docs/API-reference/api/x-components.relatedpromptsmutations.setrelatedpromptsproducts.md +1 -1
  9. package/docs/API-reference/api/x-components.relatedpromptstaglist.md +22 -0
  10. package/docs/API-reference/components/related-prompts/x-components.related-prompt.md +11 -14
  11. package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md +23 -0
  12. package/js/index.js +1 -0
  13. package/js/index.js.map +1 -1
  14. package/js/x-modules/related-prompts/components/related-prompt.vue.js +43 -81
  15. package/js/x-modules/related-prompts/components/related-prompt.vue.js.map +1 -1
  16. package/js/x-modules/related-prompts/components/related-prompt.vue2.js +34 -26
  17. package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map +1 -1
  18. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js +80 -0
  19. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map +1 -0
  20. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js +55 -0
  21. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map +1 -0
  22. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue3.js +7 -0
  23. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue3.js.map +1 -0
  24. package/js/x-modules/related-prompts/store/module.js +9 -1
  25. package/js/x-modules/related-prompts/store/module.js.map +1 -1
  26. package/js/x-modules/related-prompts/wiring.js +10 -0
  27. package/js/x-modules/related-prompts/wiring.js.map +1 -1
  28. package/package.json +2 -2
  29. package/related-prompts/index.js +1 -0
  30. package/report/x-components.api.json +209 -14
  31. package/report/x-components.api.md +47 -10
  32. package/types/x-modules/related-prompts/components/index.d.ts +1 -0
  33. package/types/x-modules/related-prompts/components/index.d.ts.map +1 -1
  34. package/types/x-modules/related-prompts/components/related-prompt.vue.d.ts +27 -13
  35. package/types/x-modules/related-prompts/components/related-prompt.vue.d.ts.map +1 -1
  36. package/types/x-modules/related-prompts/components/related-prompts-tag-list.vue.d.ts +14 -0
  37. package/types/x-modules/related-prompts/components/related-prompts-tag-list.vue.d.ts.map +1 -0
  38. package/types/x-modules/related-prompts/store/module.d.ts.map +1 -1
  39. package/types/x-modules/related-prompts/store/types.d.ts +5 -1
  40. package/types/x-modules/related-prompts/store/types.d.ts.map +1 -1
  41. package/types/x-modules/related-prompts/wiring.d.ts +6 -0
  42. package/types/x-modules/related-prompts/wiring.d.ts.map +1 -1
  43. package/js/x-modules/related-prompts/components/related-prompt.vue3.js +0 -7
  44. package/js/x-modules/related-prompts/components/related-prompt.vue3.js.map +0 -1
@@ -484,9 +484,10 @@ X-Components is a library usable everywhere not only for search experiences.
484
484
  | [Redirection](./x-components.redirection.md) | A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like <code>help</code>, <code>shipping costs</code>, <code>my account</code>, where a link to a section in the website will be more helpful than the set of results returned. |
485
485
  | [refreshHistoryQueriesSession](./x-components.refreshhistoryqueriessession.md) | Triggers a session refresh, extending its validity for the time configured in the [HistoryQueriesConfig.sessionTTLInMs](./x-components.historyqueriesconfig.sessionttlinms.md)<!-- -->. |
486
486
  | [refreshSession](./x-components.refreshsession.md) | Default implementation for the [HistoryQueriesActions.refreshSession()](./x-components.historyqueriesactions.refreshsession.md)<!-- -->. |
487
- | [RelatedPrompt](./x-components.relatedprompt.md) | <p>This component shows a suggested related prompt with the associated next queries. It allows to select one of the next query and show it.</p><p>It provide slots to customize the header, the next queries list, the individual next query inside the list and the selected query.</p> |
487
+ | [RelatedPrompt](./x-components.relatedprompt.md) | <p>This component shows a suggested related prompt.</p><p>It provides a slot to customize the related prompt button information.</p> |
488
488
  | [relatedPromptRequest](./x-components.relatedpromptrequest.md) | Default implementation for the [RelatedPromptsGetters.request](./x-components.relatedpromptsgetters.request.md) getter. |
489
489
  | [RelatedPromptsList](./x-components.relatedpromptslist.md) | Component that inserts groups of related prompts in different positions of the injected search items list, based on the provided configuration. |
490
+ | [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md) | |
490
491
  | [relatedPromptsXModule](./x-components.relatedpromptsxmodule.md) | Related Prompts [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>related-prompts</code> entry point. |
491
492
  | [RelatedTag](./x-components.relatedtag.md) | This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for \*lego\*, a related tag could be \*city\*, refining the search with \*lego city\*. |
492
493
  | [relatedTags](./x-components.relatedtags.md) | Default implementation for the [RelatedTagsGetters.relatedTags](./x-components.relatedtagsgetters.relatedtags.md) getter. |
@@ -4,9 +4,9 @@
4
4
 
5
5
  ## RelatedPrompt variable
6
6
 
7
- This component shows a suggested related prompt with the associated next queries. It allows to select one of the next query and show it.
7
+ This component shows a suggested related prompt.
8
8
 
9
- It provide slots to customize the header, the next queries list, the individual next query inside the list and the selected query.
9
+ It provides a slot to customize the related prompt button information.
10
10
 
11
11
  **Signature:**
12
12
 
@@ -16,23 +16,39 @@ _default: import("vue").DefineComponent<{
16
16
  type: PropType<RelatedPrompt>;
17
17
  required: true;
18
18
  };
19
- nextQueryButtonClass: {
20
- type: StringConstructor;
21
- default: string;
19
+ isPromptVisible: {
20
+ type: BooleanConstructor;
21
+ default: boolean;
22
+ };
23
+ isSelected: {
24
+ type: BooleanConstructor;
25
+ default: boolean;
26
+ };
27
+ index: {
28
+ type: NumberConstructor;
29
+ required: true;
22
30
  };
23
31
  }, {
24
- selectedNextQuery: import("vue").Ref<string>;
25
- onClick: (nextQuery: string) => void;
32
+ toggleSuggestion: (index: number) => void;
26
33
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
27
34
  relatedPrompt: {
28
35
  type: PropType<RelatedPrompt>;
29
36
  required: true;
30
37
  };
31
- nextQueryButtonClass: {
32
- type: StringConstructor;
33
- default: string;
38
+ isPromptVisible: {
39
+ type: BooleanConstructor;
40
+ default: boolean;
41
+ };
42
+ isSelected: {
43
+ type: BooleanConstructor;
44
+ default: boolean;
45
+ };
46
+ index: {
47
+ type: NumberConstructor;
48
+ required: true;
34
49
  };
35
50
  }>>, {
36
- nextQueryButtonClass: string;
51
+ isPromptVisible: boolean;
52
+ isSelected: boolean;
37
53
  }, {}>
38
54
  ```
@@ -18,6 +18,7 @@ export interface RelatedPromptsMutations extends StatusMutations, QueryMutations
18
18
  | Method | Description |
19
19
  | --- | --- |
20
20
  | [resetRelatedPromptsState()](./x-components.relatedpromptsmutations.resetrelatedpromptsstate.md) | Resets the related prompts state. |
21
+ | [resetSelectedPrompt()](./x-components.relatedpromptsmutations.resetselectedprompt.md) | Resets the selected related prompt number. |
21
22
  | [setParams(params)](./x-components.relatedpromptsmutations.setparams.md) | Sets the extra params of the module. |
22
23
  | [setRelatedPromptsProducts(products)](./x-components.relatedpromptsmutations.setrelatedpromptsproducts.md) | Sets the related prompts of the module. |
23
24
  | [setSelectedPrompt(index)](./x-components.relatedpromptsmutations.setselectedprompt.md) | Sets the selected related prompt. |
@@ -0,0 +1,17 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsMutations](./x-components.relatedpromptsmutations.md) &gt; [resetSelectedPrompt](./x-components.relatedpromptsmutations.resetselectedprompt.md)
4
+
5
+ ## RelatedPromptsMutations.resetSelectedPrompt() method
6
+
7
+ Resets the selected related prompt number.
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ resetSelectedPrompt(): void;
13
+ ```
14
+ **Returns:**
15
+
16
+ void
17
+
@@ -16,7 +16,7 @@ setRelatedPromptsProducts(products: RelatedPrompt[]): void;
16
16
 
17
17
  | Parameter | Type | Description |
18
18
  | --- | --- | --- |
19
- | products | RelatedPrompt\[\] | |
19
+ | products | RelatedPrompt\[\] | The new related prompts to save to the state. |
20
20
 
21
21
  **Returns:**
22
22
 
@@ -0,0 +1,22 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md)
4
+
5
+ ## RelatedPromptsTagList variable
6
+
7
+ **Signature:**
8
+
9
+ ```typescript
10
+ _default: import("vue").DefineComponent<{
11
+ buttonClass: StringConstructor;
12
+ }, {
13
+ arePromptsVisible: import("vue").Ref<boolean>;
14
+ hidePrompt: (index: number) => boolean;
15
+ isSelected: (index: number) => boolean;
16
+ relatedPrompts: import("vue").ComputedRef<any>;
17
+ selectedPrompt: import("vue").ComputedRef<any>;
18
+ slidingPanelContent: import("vue").Ref<Element | undefined>;
19
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
+ buttonClass: StringConstructor;
21
+ }>>, {}, {}>
22
+ ```
@@ -6,24 +6,21 @@ title: RelatedPrompt
6
6
 
7
7
  # RelatedPrompt
8
8
 
9
- This component shows a suggested related prompt with the associated next queries. It allows to
10
- select one of the next query and show it.
9
+ This component shows a suggested related prompt.
11
10
 
12
- It provide slots to customize the header, the next queries list, the individual next query inside
13
- the list and the selected query.
11
+ It provides a slot to customize the related prompt button information.
14
12
 
15
13
  ## Props
16
14
 
17
- | Name | Description | Type | Default |
18
- | --------------------------------- | ----------- | -------------------------- | -------------------------------- |
19
- | <code>relatedPrompt</code> | | <code>RelatedPrompt</code> | <code></code> |
20
- | <code>nextQueryButtonClass</code> | | <code>string</code> | <code>'x-button-outlined'</code> |
15
+ | Name | Description | Type | Default |
16
+ | ---------------------------- | ----------- | -------------------------- | ------------------ |
17
+ | <code>relatedPrompt</code> | | <code>RelatedPrompt</code> | <code></code> |
18
+ | <code>isPromptVisible</code> | | <code>boolean</code> | <code>false</code> |
19
+ | <code>isSelected</code> | | <code>boolean</code> | <code>false</code> |
20
+ | <code>index</code> | | <code>number</code> | <code></code> |
21
21
 
22
22
  ## Slots
23
23
 
24
- | Name | Description | Bindings<br />(name - type - description) |
25
- | --------------------------- | ----------- | ----------------------------------------- |
26
- | <code>header</code> | | |
27
- | <code>next-queries</code> | | |
28
- | <code>next-query</code> | | |
29
- | <code>selected-query</code> | | |
24
+ | Name | Description | Bindings<br />(name - type - description) |
25
+ | --------------------------------------- | ----------- | ----------------------------------------- |
26
+ | <code>related-prompt-button-info</code> | | None |
@@ -0,0 +1,23 @@
1
+ ---
2
+
3
+ title: RelatedPromptsTagList
4
+
5
+ ---
6
+
7
+ # RelatedPromptsTagList
8
+
9
+ ## Props
10
+
11
+ | Name | Description | Type | Default |
12
+ | ------------------------ | ----------- | ------------------- | ------------- |
13
+ | <code>buttonClass</code> | | <code>string</code> | <code></code> |
14
+
15
+ ## Slots
16
+
17
+ | Name | Description | Bindings<br />(name - type - description) |
18
+ | --------------------------------------- | ----------- | ----------------------------------------- |
19
+ | <code>header</code> | | None |
20
+ | <code>sliding-panel-left-button</code> | | None |
21
+ | <code>sliding-panel-content</code> | | None |
22
+ | <code>related-prompt-button</code> | | <br /><br /><br /> |
23
+ | <code>sliding-panel-right-button</code> | | None |
package/js/index.js CHANGED
@@ -331,6 +331,7 @@ export { recommendationsWiring, setRecommendationsExtraParams } from './x-module
331
331
  export { recommendationsXModule } from './x-modules/recommendations/x-module.js';
332
332
  export { default as RelatedPrompt } from './x-modules/related-prompts/components/related-prompt.vue.js';
333
333
  export { default as RelatedPromptsList } from './x-modules/related-prompts/components/related-prompts-list.vue.js';
334
+ export { default as RelatedPromptsTagList } from './x-modules/related-prompts/components/related-prompts-tag-list.vue.js';
334
335
  export { cancelFetchAndSaveRelatedPrompts, fetchAndSaveRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.js';
335
336
  export { fetchRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-related-prompts.action.js';
336
337
  export { request as relatedPromptRequest } from './x-modules/related-prompts/store/getters/request.getter.js';
package/js/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,90 +1,52 @@
1
1
  import _sfc_main from './related-prompt.vue2.js';
2
- import { resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, Fragment, renderList, normalizeClass, createBlock } from 'vue';
3
- import './related-prompt.vue3.js';
2
+ import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode, normalizeStyle, toDisplayString, createBlock } from 'vue';
4
3
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
4
 
6
- const _hoisted_1 = {
7
- class: "x-related-prompt",
8
- "data-test": "related-prompt"
9
- };
10
- const _hoisted_2 = { class: "x-related-prompt__info" };
11
- const _hoisted_3 = { class: "x-related-prompt__sliding-panel-content" };
12
- const _hoisted_4 = ["onClick"];
13
- const _hoisted_5 = { class: "x-related-prompt__query-preview" };
5
+ const _hoisted_1 = { class: "x-related-prompt__button-info" };
14
6
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
15
7
  const _component_CrossTinyIcon = resolveComponent("CrossTinyIcon");
16
8
  const _component_PlusIcon = resolveComponent("PlusIcon");
17
- const _component_SlidingPanel = resolveComponent("SlidingPanel");
18
- return openBlock(), createElementBlock("div", _hoisted_1, [
19
- createElementVNode("div", _hoisted_2, [
20
- renderSlot(_ctx.$slots, "header", {
21
- suggestionText: _ctx.relatedPrompt.suggestionText
22
- }, () => [
23
- createTextVNode(
24
- toDisplayString(_ctx.relatedPrompt.suggestionText),
25
- 1
26
- /* TEXT */
27
- )
28
- ], true),
29
- renderSlot(_ctx.$slots, "next-queries", {
30
- nextQueries: _ctx.relatedPrompt.nextQueries
31
- }, () => [
32
- createVNode(_component_SlidingPanel, { resetOnContentChange: false }, {
33
- default: withCtx(() => [
34
- createElementVNode("div", _hoisted_3, [
35
- (openBlock(true), createElementBlock(
36
- Fragment,
37
- null,
38
- renderList(_ctx.relatedPrompt.nextQueries, (nextQuery, index) => {
39
- return openBlock(), createElementBlock("button", {
40
- key: index,
41
- onClick: ($event) => _ctx.onClick(nextQuery),
42
- class: normalizeClass([
43
- "x-button",
44
- { "x-selected": _ctx.selectedNextQuery === nextQuery },
45
- _ctx.nextQueryButtonClass
46
- ])
47
- }, [
48
- renderSlot(_ctx.$slots, "next-query", { nextQuery }, () => [
49
- createElementVNode(
50
- "span",
51
- null,
52
- toDisplayString(nextQuery),
53
- 1
54
- /* TEXT */
55
- ),
56
- _ctx.selectedNextQuery === nextQuery ? (openBlock(), createBlock(_component_CrossTinyIcon, {
57
- key: 0,
58
- class: "x-icon"
59
- })) : (openBlock(), createBlock(_component_PlusIcon, {
60
- key: 1,
61
- class: "x-icon"
62
- }))
63
- ], true)
64
- ], 10, _hoisted_4);
65
- }),
66
- 128
67
- /* KEYED_FRAGMENT */
68
- ))
69
- ])
70
- ]),
71
- _: 3
72
- /* FORWARDED */
73
- })
74
- ], true)
75
- ]),
76
- createElementVNode("div", _hoisted_5, [
77
- renderSlot(_ctx.$slots, "selected-query", { selectedQuery: _ctx.selectedNextQuery }, () => [
78
- createTextVNode(
79
- toDisplayString(_ctx.selectedNextQuery),
80
- 1
81
- /* TEXT */
82
- )
83
- ], true)
84
- ])
85
- ]);
9
+ return openBlock(), createElementBlock(
10
+ "div",
11
+ {
12
+ onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
13
+ onKeydown: _cache[1] || (_cache[1] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
14
+ class: normalizeClass(["x-related-prompt__button", [{ "x-related-prompt-selected__button": _ctx.isSelected }]]),
15
+ role: "button",
16
+ "aria-pressed": "true",
17
+ tabindex: "0"
18
+ },
19
+ [
20
+ renderSlot(_ctx.$slots, "related-prompt-button-info", {}, () => [
21
+ createElementVNode("div", _hoisted_1, [
22
+ createElementVNode(
23
+ "span",
24
+ {
25
+ class: normalizeClass(["x-typewritter-initial", [{ "x-typewritter-animation": _ctx.isPromptVisible }]]),
26
+ style: normalizeStyle({
27
+ animationDelay: `${_ctx.index * 0.4 + 0.05}s`,
28
+ "--suggestion-text-length": _ctx.relatedPrompt.suggestionText.length
29
+ })
30
+ },
31
+ toDisplayString(_ctx.relatedPrompt.suggestionText),
32
+ 7
33
+ /* TEXT, CLASS, STYLE */
34
+ )
35
+ ]),
36
+ _ctx.isSelected ? (openBlock(), createBlock(_component_CrossTinyIcon, {
37
+ key: 0,
38
+ class: "x-icon-lg"
39
+ })) : (openBlock(), createBlock(_component_PlusIcon, {
40
+ key: 1,
41
+ class: "x-icon-lg"
42
+ }))
43
+ ])
44
+ ],
45
+ 34
46
+ /* CLASS, NEED_HYDRATION */
47
+ );
86
48
  }
87
- var relatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-44e318df"]]);
49
+ var RelatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
88
50
 
89
- export { relatedPrompt as default };
51
+ export { RelatedPrompt as default };
90
52
  //# sourceMappingURL=related-prompt.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <div class=\"x-related-prompt\" data-test=\"related-prompt\">\n <div class=\"x-related-prompt__info\">\n <slot name=\"header\" :suggestionText=\"relatedPrompt.suggestionText\">\n {{ relatedPrompt.suggestionText }}\n </slot>\n <slot name=\"next-queries\" :nextQueries=\"relatedPrompt.nextQueries\">\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-related-prompt__sliding-panel-content\">\n <button\n v-for=\"(nextQuery, index) in relatedPrompt.nextQueries\"\n :key=\"index\"\n @click=\"onClick(nextQuery)\"\n :class=\"[\n 'x-button',\n { 'x-selected': selectedNextQuery === nextQuery },\n nextQueryButtonClass\n ]\"\n >\n <slot name=\"next-query\" :nextQuery=\"nextQuery\">\n <span>{{ nextQuery }}</span>\n <CrossTinyIcon v-if=\"selectedNextQuery === nextQuery\" class=\"x-icon\" />\n <PlusIcon v-else class=\"x-icon\" />\n </slot>\n </button>\n </div>\n </SlidingPanel>\n </slot>\n </div>\n <div class=\"x-related-prompt__query-preview\">\n <slot name=\"selected-query\" :selectedQuery=\"selectedNextQuery\">\n {{ selectedNextQuery }}\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType, ref } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import { relatedPromptsXModule } from '../x-module';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n\n /**\n * This component shows a suggested related prompt with the associated next queries.\n * It allows to select one of the next query and show it.\n *\n * It provide slots to customize the header, the next queries list,\n * the individual next query inside the list and the selected query.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n components: {\n SlidingPanel,\n CrossTinyIcon,\n PlusIcon\n },\n xModule: relatedPromptsXModule.name,\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n nextQueryButtonClass: {\n type: String,\n default: 'x-button-outlined'\n }\n },\n setup(props) {\n const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);\n\n /**\n * Handles the click event on a next query button.\n *\n * @param nextQuery - The clicked next query.\n */\n function onClick(nextQuery: string): void {\n if (selectedNextQuery.value === nextQuery) {\n selectedNextQuery.value = '';\n } else {\n selectedNextQuery.value = nextQuery;\n }\n }\n\n return { selectedNextQuery, onClick };\n }\n });\n</script>\n<style lang=\"css\" scoped>\n .x-related-prompt__info {\n display: flex;\n flex-direction: column;\n }\n\n .x-related-prompt__sliding-panel-content {\n display: flex;\n gap: 8px;\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createElementVNode","relatedPrompt","_renderSlot","_createTextVNode","_toDisplayString","_createVNode","_withCtx","_Fragment","_renderList","onClick","selectedNextQuery","nextQueryButtonClass","_createBlock"],"mappings":";;;;;MACgC,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,kBAAA;;;AAD1C,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,wBAAA,EAAA,CAAA;AA6BS,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,yCAAiC,EAAA,CAAA;;;;;;kCA5B9CA,gBAiCM,CAAA,cAAA,CAAA,CAAA;SA/BFC,SAEO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAF8BC,KAAc,EAAA,UAAA,EAAA;AAAA,MAE5CC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,QALb,cAIWD,EAAAA,IAAAA,CAAAA,aAAAA,CAAAA,cAAAA;AAAAA,OAAAA,EAAAA,MAAAA;AAEL,QAAAE,eAAA;AAAA,UAqBOC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OArBoB,EAAA,IAAA,CAAA;AAAA,MAqBpBF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,cAAA,EAAA;AAAA,QApBL,WAmBe,EAAA,IAAA,CAAA,aAAA,CAAA,WAAA;AAAA,OA1BvB,EAAA,MAAA;AAAA,QAAAG,WAAA,CAQU,uBAiBM,EAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,EAAA;AAAA,UAhBJ,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,YAAAN,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,eAAAF,SAAA,CAEQ,IAAK,CAAA,EAAAC,kBAAA;AAAA,gBAAAQ,QAAA;AAAA,gBAAA,IAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,aAAA,CAAA,WAAA,EAAA,CAAA,SAAA,EAAA,KAAA,KAAA;yBACVV,SAAK,EAAA,EAAEW,mBAAQ,QAAS,EAAA;AAAA,oBACxB,GAAK,EAAA,KAAA;AAAA,oBAAA,OAAA,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,CAAA,SAAA,CAAA;AAAgEC,oBAAAA,KAAAA,EAAAA,cAAAA,CAAAA;AAAAA,sBAAmDC,UAAAA;AAAAA,sBAAAA,EAAAA,YAAAA,EAAAA,IAAAA,CAAAA,iBAAAA,KAAAA,SAAAA,EAAAA;;;;AAQlGD,oBAAAA,UAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAiB,YAAc,EAAA,EAAA,SAAA,EAAA,EAAA,MAAA;AAAA,sBAAAV,kBAAA;AAApD,wBAAA,MAAA;AAAA,wBAAA,IAAA;AAAA,wBAAuEI,eAAA,CAAA,SAAA,CAAA;AAAA,wBAAA,CAAA;AAAA;AAAA,uBAAA;AAAA,sBAAA,IAAA,CArBvF,8CAqBoF,EAAAQ,WAAA,CAAA,wBAAA,EAAA;AAAA,wBAAA,GAAA,EAAA,CAAA;;wCACrC,EAAAA,WAAA,CAAA,mBAAA,EAAA;AAAA,wBAAA,GAAA,EAAA,CAAA;;;;;;;;;AAtB/C,aAAA,CAAA;AAAA,WAAA,CAAA;;;;AA6BI,OAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;uBA7BJ,KA+BWF,EAAAA,UAAAA,EAAAA;AAAAA,MAAAA,UAAAA,CAAAA,IAAAA,CAAAA,MAAAA,EAAAA,gBAAAA,EAAAA,EAAAA,aAAAA,EAAAA,IAAAA,CAAAA,iBAAAA,EAAAA,EAAAA,MAAAA;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <div\n @click=\"toggleSuggestion(index)\"\n @keydown=\"toggleSuggestion(index)\"\n class=\"x-related-prompt__button\"\n :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n role=\"button\"\n aria-pressed=\"true\"\n tabindex=\"0\"\n >\n <slot name=\"related-prompt-button-info\">\n <div class=\"x-related-prompt__button-info\">\n <span\n class=\"x-typewritter-initial\"\n :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n :style=\"{\n animationDelay: `${index * 0.4 + 0.05}s`,\n '--suggestion-text-length': relatedPrompt.suggestionText.length\n }\"\n >\n {{ relatedPrompt.suggestionText }}\n </span>\n </div>\n <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n <PlusIcon v-else class=\"x-icon-lg\" />\n </slot>\n </div>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import { relatedPromptsXModule } from '../x-module';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { use$x } from '../../../composables/index';\n\n /**\n * This component shows a suggested related prompt.\n *\n * It provides a slot to customize the related prompt button information.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n xModule: relatedPromptsXModule.name,\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n isPromptVisible: {\n type: Boolean,\n default: false\n },\n isSelected: {\n type: Boolean,\n default: false\n },\n index: {\n type: Number,\n required: true\n }\n },\n setup() {\n const x = use$x();\n\n const toggleSuggestion = (index: number): void => {\n x.emit('UserSelectedARelatedPrompt', index);\n };\n\n return {\n toggleSuggestion\n };\n }\n });\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","index","_normalizeStyle","relatedPrompt","isSelected","_toDisplayString","_createBlock"],"mappings":";;;;;;;8BACEA,gBAyBM,CAAA,UAAA,CAAA,CAAA;SAvBHC,SAAO,EAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MACR,OAAA,EAJJ,qBAIU,CAA0B,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MAEhC,WAAK,MAAQ,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MACb,KAAmB,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,CAAA,EAAA,mCAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,MACnB,IAAA,EAAA,QAAA;AAAA,MAAA,cAAA,EAAA,MAAA;AAEA,MAAA,QAAA,EAAA,GAAA;AAAA,KAAA;;iBAEI,IASO,CAAA,MAAA,EAAA,4BAAA,EAAA,EAAA,EAAA,MAAA;AAAA,QAAAC,kBAAA,CArBf,KAagB,EAAA,UAAA,EAAA;AAAA,UAAAA,kBAAA;AAbhB,YAAA,MAAA;AAAA,YAAA;AAAA,cAAA,KAAA,EAAAD,cAAA,CAemDE,CAAK,uBAAA,EAAA,CAAA,EAAA,yBAAA,EAAA,IAAA,CAAA,eAAA,EAAA,CAAA,CAAA,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA;;AAK3CC,gBAAAA,0BAAAA,EAAAA,IAAAA,CAAAA,aAAAA,CAAc,cAAc,CAAA,MAAA;AAAA,eAAA,CAAA;AAGdC,aAAAA;AAAAA,YAAUC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;AAvBrC,QAAA,IAAA,CAAA,UAAA,IAAAR,SAAA,EAuBwD,EAAAS,WAAA,CAAA,wBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;0BAChB,EAAAA,WAAA,CAAA,mBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;"}
@@ -1,22 +1,30 @@
1
- import { defineComponent, ref } from 'vue';
1
+ import { defineComponent } from 'vue';
2
2
  import { relatedPromptsXModule } from '../x-module.js';
3
3
  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue.js';
4
4
  import PlusIcon from '../../../components/icons/plus.vue.js';
5
- import SlidingPanel from '../../../components/sliding-panel.vue.js';
5
+ import '../../../composables/create-use-device.js';
6
+ import { use$x } from '../../../composables/use-_x.js';
7
+ import '@vue/devtools-api';
8
+ import '../../../plugins/devtools/timeline.devtools.js';
9
+ import '@empathyco/x-utils';
10
+ import 'rxjs/operators';
11
+ import 'rxjs';
12
+ import '../../../plugins/devtools/colors.utils.js';
13
+ import '../../../plugins/x-bus.js';
14
+ import '../../../plugins/x-plugin.js';
15
+ import 'vuex';
16
+ import '@vueuse/core';
6
17
 
7
18
  /**
8
- * This component shows a suggested related prompt with the associated next queries.
9
- * It allows to select one of the next query and show it.
19
+ * This component shows a suggested related prompt.
10
20
  *
11
- * It provide slots to customize the header, the next queries list,
12
- * the individual next query inside the list and the selected query.
21
+ * It provides a slot to customize the related prompt button information.
13
22
  *
14
23
  * @public
15
24
  */
16
25
  var _sfc_main = defineComponent({
17
26
  name: 'RelatedPrompt',
18
27
  components: {
19
- SlidingPanel,
20
28
  CrossTinyIcon,
21
29
  PlusIcon
22
30
  },
@@ -26,27 +34,27 @@ var _sfc_main = defineComponent({
26
34
  type: Object,
27
35
  required: true
28
36
  },
29
- nextQueryButtonClass: {
30
- type: String,
31
- default: 'x-button-outlined'
37
+ isPromptVisible: {
38
+ type: Boolean,
39
+ default: false
40
+ },
41
+ isSelected: {
42
+ type: Boolean,
43
+ default: false
44
+ },
45
+ index: {
46
+ type: Number,
47
+ required: true
32
48
  }
33
49
  },
34
- setup(props) {
35
- const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);
36
- /**
37
- * Handles the click event on a next query button.
38
- *
39
- * @param nextQuery - The clicked next query.
40
- */
41
- function onClick(nextQuery) {
42
- if (selectedNextQuery.value === nextQuery) {
43
- selectedNextQuery.value = '';
44
- }
45
- else {
46
- selectedNextQuery.value = nextQuery;
47
- }
48
- }
49
- return { selectedNextQuery, onClick };
50
+ setup() {
51
+ const x = use$x();
52
+ const toggleSuggestion = (index) => {
53
+ x.emit('UserSelectedARelatedPrompt', index);
54
+ };
55
+ return {
56
+ toggleSuggestion
57
+ };
50
58
  }
51
59
  });
52
60
 
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <div class=\"x-related-prompt\" data-test=\"related-prompt\">\n <div class=\"x-related-prompt__info\">\n <slot name=\"header\" :suggestionText=\"relatedPrompt.suggestionText\">\n {{ relatedPrompt.suggestionText }}\n </slot>\n <slot name=\"next-queries\" :nextQueries=\"relatedPrompt.nextQueries\">\n <SlidingPanel :resetOnContentChange=\"false\">\n <div class=\"x-related-prompt__sliding-panel-content\">\n <button\n v-for=\"(nextQuery, index) in relatedPrompt.nextQueries\"\n :key=\"index\"\n @click=\"onClick(nextQuery)\"\n :class=\"[\n 'x-button',\n { 'x-selected': selectedNextQuery === nextQuery },\n nextQueryButtonClass\n ]\"\n >\n <slot name=\"next-query\" :nextQuery=\"nextQuery\">\n <span>{{ nextQuery }}</span>\n <CrossTinyIcon v-if=\"selectedNextQuery === nextQuery\" class=\"x-icon\" />\n <PlusIcon v-else class=\"x-icon\" />\n </slot>\n </button>\n </div>\n </SlidingPanel>\n </slot>\n </div>\n <div class=\"x-related-prompt__query-preview\">\n <slot name=\"selected-query\" :selectedQuery=\"selectedNextQuery\">\n {{ selectedNextQuery }}\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType, ref } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import { relatedPromptsXModule } from '../x-module';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n\n /**\n * This component shows a suggested related prompt with the associated next queries.\n * It allows to select one of the next query and show it.\n *\n * It provide slots to customize the header, the next queries list,\n * the individual next query inside the list and the selected query.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n components: {\n SlidingPanel,\n CrossTinyIcon,\n PlusIcon\n },\n xModule: relatedPromptsXModule.name,\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n nextQueryButtonClass: {\n type: String,\n default: 'x-button-outlined'\n }\n },\n setup(props) {\n const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);\n\n /**\n * Handles the click event on a next query button.\n *\n * @param nextQuery - The clicked next query.\n */\n function onClick(nextQuery: string): void {\n if (selectedNextQuery.value === nextQuery) {\n selectedNextQuery.value = '';\n } else {\n selectedNextQuery.value = nextQuery;\n }\n }\n\n return { selectedNextQuery, onClick };\n }\n });\n</script>\n<style lang=\"css\" scoped>\n .x-related-prompt__info {\n display: flex;\n flex-direction: column;\n }\n\n .x-related-prompt__sliding-panel-content {\n display: flex;\n gap: 8px;\n }\n</style>\n"],"names":[],"mappings":";;;;;;AA4CE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,aAAa;QACb,QAAO;AACR,KAAA;IACD,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,mBAAkB;AAC7B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAkB,GAAE,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;AAEjE;;;;AAIE;QACF,SAAS,OAAO,CAAC,SAAiB,EAAA;AAChC,YAAA,IAAI,iBAAiB,CAAC,KAAI,KAAM,SAAS,EAAE;AACzC,gBAAA,iBAAiB,CAAC,KAAI,GAAI,EAAE,CAAA;AAC5B,aAAA;AAAK,iBAAA;AACL,gBAAA,iBAAiB,CAAC,QAAQ,SAAS,CAAA;AACrC,aAAA;SACF;AAEA,QAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,CAAA;KACvC;AACD,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <div\n @click=\"toggleSuggestion(index)\"\n @keydown=\"toggleSuggestion(index)\"\n class=\"x-related-prompt__button\"\n :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n role=\"button\"\n aria-pressed=\"true\"\n tabindex=\"0\"\n >\n <slot name=\"related-prompt-button-info\">\n <div class=\"x-related-prompt__button-info\">\n <span\n class=\"x-typewritter-initial\"\n :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n :style=\"{\n animationDelay: `${index * 0.4 + 0.05}s`,\n '--suggestion-text-length': relatedPrompt.suggestionText.length\n }\"\n >\n {{ relatedPrompt.suggestionText }}\n </span>\n </div>\n <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n <PlusIcon v-else class=\"x-icon-lg\" />\n </slot>\n </div>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import { relatedPromptsXModule } from '../x-module';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { use$x } from '../../../composables/index';\n\n /**\n * This component shows a suggested related prompt.\n *\n * It provides a slot to customize the related prompt button information.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n xModule: relatedPromptsXModule.name,\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n isPromptVisible: {\n type: Boolean,\n default: false\n },\n isSelected: {\n type: Boolean,\n default: false\n },\n index: {\n type: Number,\n required: true\n }\n },\n setup() {\n const x = use$x();\n\n const toggleSuggestion = (index: number): void => {\n x.emit('UserSelectedARelatedPrompt', index);\n };\n\n return {\n toggleSuggestion\n };\n }\n });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;IACD,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,gBAAe,GAAI,CAAC,KAAa,KAAW;AAChD,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAA;AAC7C,SAAC,CAAA;QAED,OAAO;YACL,gBAAe;SAChB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
@@ -0,0 +1,80 @@
1
+ import _sfc_main from './related-prompts-tag-list.vue2.js';
2
+ import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createVNode, withCtx, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, mergeProps } from 'vue';
3
+ import './related-prompts-tag-list.vue3.js';
4
+ import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
+
6
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
7
+ const _component_RelatedPrompt = resolveComponent("RelatedPrompt");
8
+ const _component_SlidingPanel = resolveComponent("SlidingPanel");
9
+ return openBlock(), createElementBlock("div", null, [
10
+ _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : createCommentVNode("v-if", true),
11
+ createVNode(_component_SlidingPanel, {
12
+ "reset-on-content-change": true,
13
+ "button-class": _ctx.buttonClass,
14
+ "scroll-container-class": _ctx.selectedPrompt === -1 ? "desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm" : ""
15
+ }, {
16
+ "sliding-panel-left-button": withCtx(() => [
17
+ renderSlot(_ctx.$slots, "sliding-panel-left-button")
18
+ ]),
19
+ "sliding-panel-right-button": withCtx(() => [
20
+ renderSlot(_ctx.$slots, "sliding-panel-right-button")
21
+ ]),
22
+ default: withCtx(() => [
23
+ renderSlot(_ctx.$slots, "sliding-panel-content", {}, () => [
24
+ createElementVNode(
25
+ "div",
26
+ {
27
+ ref: "slidingPanelContent",
28
+ class: normalizeClass(["x-related-prompt__sliding-panel-content", { "x-w-[calc(100%)]": _ctx.selectedPrompt !== -1 }])
29
+ },
30
+ [
31
+ (openBlock(true), createElementBlock(
32
+ Fragment,
33
+ null,
34
+ renderList(_ctx.relatedPrompts, (suggestion, index) => {
35
+ return openBlock(), createElementBlock(
36
+ "div",
37
+ {
38
+ key: index,
39
+ style: normalizeStyle({
40
+ animationDelay: `${index * 0.4 + 0.05}s`
41
+ }),
42
+ class: normalizeClass(["x-related-prompt x-staggered-initial", [
43
+ { "x-staggered-animation": _ctx.arePromptsVisible },
44
+ { "x-hidden": _ctx.hidePrompt(index) },
45
+ { "x-related-prompt-selected": _ctx.isSelected(index) }
46
+ ]]),
47
+ "data-test": "related-prompt-item"
48
+ },
49
+ [
50
+ renderSlot(_ctx.$slots, "related-prompt-button", mergeProps({ ref_for: true }, { suggestion, index, arePromptsVisible: _ctx.arePromptsVisible, isSelected: _ctx.isSelected }), () => [
51
+ createVNode(_component_RelatedPrompt, {
52
+ "related-prompt": suggestion,
53
+ index,
54
+ "is-prompt-visible": _ctx.arePromptsVisible,
55
+ "is-selected": _ctx.isSelected(index)
56
+ }, null, 8, ["related-prompt", "index", "is-prompt-visible", "is-selected"])
57
+ ])
58
+ ],
59
+ 6
60
+ /* CLASS, STYLE */
61
+ );
62
+ }),
63
+ 128
64
+ /* KEYED_FRAGMENT */
65
+ ))
66
+ ],
67
+ 2
68
+ /* CLASS */
69
+ )
70
+ ])
71
+ ]),
72
+ _: 3
73
+ /* FORWARDED */
74
+ }, 8, ["button-class", "scroll-container-class"])
75
+ ]);
76
+ }
77
+ var relatedPromptsTagList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
78
+
79
+ export { relatedPromptsTagList as default };
80
+ //# sourceMappingURL=related-prompts-tag-list.vue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n <div>\n <template v-if=\"$slots.header\">\n <slot name=\"header\" />\n </template>\n <SlidingPanel\n :reset-on-content-change=\"true\"\n :button-class=\"buttonClass\"\n :scroll-container-class=\"\n selectedPrompt === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''\n \"\n >\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panel-left-button\" />\n </template>\n\n <slot name=\"sliding-panel-content\">\n <div\n ref=\"slidingPanelContent\"\n class=\"x-related-prompt__sliding-panel-content\"\n :class=\"{ 'x-w-[calc(100%)]': selectedPrompt !== -1 }\"\n >\n <div\n v-for=\"(suggestion, index) in relatedPrompts\"\n :key=\"index\"\n :style=\"{\n animationDelay: `${index * 0.4 + 0.05}s`\n }\"\n class=\"x-related-prompt x-staggered-initial\"\n :class=\"[\n { 'x-staggered-animation': arePromptsVisible },\n { 'x-hidden': hidePrompt(index) },\n { 'x-related-prompt-selected': isSelected(index) }\n ]\"\n data-test=\"related-prompt-item\"\n >\n <slot\n name=\"related-prompt-button\"\n v-bind=\"{ suggestion, index, arePromptsVisible, isSelected }\"\n >\n <RelatedPrompt\n :related-prompt=\"suggestion\"\n :index=\"index\"\n :is-prompt-visible=\"arePromptsVisible\"\n :is-selected=\"isSelected(index)\"\n />\n </slot>\n </div>\n </div>\n </slot>\n\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n </div>\n</template>\n<script lang=\"ts\">\n import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { useState } from '../../../composables/index';\n import RelatedPrompt from './related-prompt.vue';\n\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { RelatedPrompt, SlidingPanel },\n props: {\n buttonClass: String\n },\n setup() {\n const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const slidingPanelContent = ref<Element>();\n const arePromptsVisible = ref(false);\n\n const observer = new IntersectionObserver(([entry]) => {\n arePromptsVisible.value = entry.isIntersecting;\n });\n\n onMounted(() => {\n observer.observe(slidingPanelContent.value as Element);\n });\n\n onUnmounted(() => {\n observer.disconnect();\n });\n\n const isSelected = (index: number): boolean => selectedPrompt.value === index;\n\n const hidePrompt = (index: number): boolean =>\n selectedPrompt.value !== -1 && selectedPrompt.value !== index;\n\n return {\n arePromptsVisible,\n hidePrompt,\n isSelected,\n relatedPrompts,\n selectedPrompt,\n slidingPanelContent\n };\n }\n });\n</script>\n\n<style lang=\"css\">\n .x-related-prompt__sliding-panel-content {\n display: flex;\n gap: 8px;\n }\n\n .x-related-prompt {\n display: flex;\n flex-direction: column;\n border-radius: 12px;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 500ms;\n min-height: 112px;\n height: 100%;\n width: 303px;\n }\n\n .x-related-prompt-selected {\n width: 100% !important;\n min-height: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n &__button {\n width: 100% !important;\n }\n }\n\n .x-related-prompt__button {\n display: flex;\n flex-direction: row;\n gap: 12px;\n justify-content: space-between;\n align-items: start;\n text-align: start;\n padding: 16px;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 500ms;\n flex-grow: 1;\n width: 303px;\n }\n\n .x-related-prompt__button-info {\n display: flex;\n min-height: 32px;\n }\n\n @media (max-width: 743px) {\n .x-related-prompt {\n width: 204px;\n &__button {\n width: 204px;\n }\n }\n }\n\n .x-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n\n .x-no-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n\n .x-typewritter-initial {\n color: #0000;\n background: linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,\n linear-gradient(#575757 0 0) 0 0;\n background-size: 0 200%;\n -webkit-background-clip: padding-box, text;\n background-clip: padding-box, text;\n background-repeat: no-repeat;\n }\n\n .x-typewritter-animation {\n animation: typewritter calc(var(--suggestion-text-length) * 0.05s)\n steps(var(--suggestion-text-length)) forwards;\n }\n\n @keyframes typewritter {\n from {\n background-size: 0 200%;\n }\n to {\n background-size: calc(var(--suggestion-text-length) * 1ch) 200%;\n }\n }\n\n .x-staggered-initial {\n opacity: 0;\n transform: translateY(20px);\n }\n\n .x-staggered-animation {\n animation: fadeInUp 0.6s forwards;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createVNode","selectedPrompt","_withCtx","_createElementVNode","relatedPrompts","_Fragment","_renderList","hidePrompt","isSelected","_mergeProps"],"mappings":";;;;;;;kCACEA,gBAsDM,CAAA,cAAA,CAAA,CAAA;AApDF,EAAA,OAAAC,SAAA,EAHN,EAAAC,kBAAA,CAAA,KAAA,EAAA,IAAA,EAAA;AAAA,IAKI,IAAA,CAAA,MAAA,CAAA,MAAA,GAAAC,UAAA,CAiDe,IAhDZ,CAAA,MAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAC,kBAAA,CAAA,MAAA,EAAyB,IAAI,CAAA;AAAA,IAAAC,WAAA,CAC7B,uBAAyB,EAAA;AAAA,MACzB,yBAAsB,EAAA,IAAA;AAAA,MAAA,cAAA,EAAWC,IAAc,CAAA,WAAA;AAAA,MAAA,wBAAA,EAAA,IAAA,CAAA,cAAA,KAAA,CAAA,CAAA,GAAA,8DAAA,GAAA,EAAA;;;QA2CrCH,UACiC,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,CAAA;AAAA,OAAA,CAAA;;QApDlDA,UAiDa,CAAA,IAAA,CAAA,MAAA,EAAA,4BAAA,CAAA;AAAA,OAAA,CAAA;eAhCLI,OA+BM,CAAA,MAAA;AAAA,QAAAJ,UAAA,CA9BA,IAAqB,CAAA,MAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,MAAA;AAAA,UAAAK,kBAAA;AAlBnC,YAAA,KAAA;AAAA,YAmBgB;AAAA,cAAA,GAAA,EAAA,qBAAA;oCAGN,CAtBV,yCAAA,EAAA,EAuB0CC,kBAvB1C,EAAA,IAAA,CAuBoB,cAAiB,KAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,aAAA;;yBACnB,IAAK,CAAA,EAAAP,kBAAA;AAAA,gBAAAQ,QAAA;AAAA,gBAAA,IAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;yBACLV,SAzBlB,EAAA,EAAAC,kBAAA;AAAA,oBAAA,KAAA;AAAA,oBAAA;AAAA,sBAAA,GAAA,EAAA,KAAA;;wCAAA,CA4BkB,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,CAAA,CAAA,CAAA;AAAA,uBAAA,CAAA;4CAC8FU,CAAgB,sCAAA,EAAA;AAAA,wBAAA,EAAA,uBAAA,EAAA,IAAA,CAAkDC,iBAAW,EAAA;AAAA,wBAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA;AAKjL,wBAAA,EAAA,2BAAA,EAAU,IAAqB,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA;AAAA,uBAAA,CAAA,CAAA;sBAE/B,WAUO,EAAA,qBAAA;AAAA,qBAAA;;AALF,sBAAAV,UAAA,CAAA,IAAA,CAAA,MAAA,EAAgB,uBAAU,EAAAW,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,wBAAAT,WAAA,CACnB,wBAAK,EAAA;AAAA,0BACZ,gBAAA,EAAA,UAAA;AAAA,0BACA,KAAA;AAAA,0BAAA,mBAAA,EAAA,IAAA,CAAA,iBAAA;;;;;;;;;;;;;;;;AA5CjB,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}