@empathyco/x-components 4.1.0-alpha.25 → 4.1.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.
- package/CHANGELOG.md +18 -0
- package/design-system/deprecated-full-theme.css +39 -39
- package/docs/API-reference/api/x-components.historyqueriesswitch.md +1 -1
- package/docs/API-reference/api/x-components.md +4 -3
- package/docs/API-reference/api/x-components.renderlessfilter.md +1 -1
- package/docs/API-reference/api/x-components.tagging.md +1 -1
- package/docs/API-reference/api/x-components.usehybridinject.md +3 -3
- package/docs/API-reference/api/x-components.usehybridinject_1.md +23 -0
- package/docs/API-reference/components/common/panels/x-components.base-tabs-panel.md +1 -1
- package/docs/API-reference/components/facets/x-components.filters/renderless-filter.md +2 -2
- package/docs/API-reference/components/history-queries/x-components.history-queries-switch.md +7 -7
- package/docs/API-reference/components/next-queries/x-components.next-queries-list.md +2 -1
- package/docs/API-reference/components/tagging/x-components.tagging.md +1 -1
- package/js/components/panels/base-tabs-panel.vue.js +1 -1
- package/js/components/panels/base-tabs-panel.vue.js.map +1 -1
- package/js/components/panels/base-tabs-panel.vue3.js +1 -1
- package/js/composables/use-hybrid-inject.js +27 -15
- package/js/composables/use-hybrid-inject.js.map +1 -1
- package/js/x-modules/facets/components/filters/renderless-filter.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/renderless-filter.vue2.js +1 -1
- package/js/x-modules/facets/components/filters/renderless-filter.vue2.js.map +1 -1
- package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map +1 -1
- package/js/x-modules/history-queries/components/history-queries-switch.vue2.js +1 -1
- package/js/x-modules/history-queries/components/history-queries-switch.vue2.js.map +1 -1
- package/js/x-modules/next-queries/components/next-queries-list.vue.js.map +1 -1
- package/js/x-modules/tagging/components/tagging.vue.js.map +1 -1
- package/js/x-modules/tagging/components/tagging.vue2.js +1 -1
- package/js/x-modules/tagging/components/tagging.vue2.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +65 -12
- package/report/x-components.api.md +4 -1
- package/types/composables/use-hybrid-inject.d.ts +3 -2
- package/types/composables/use-hybrid-inject.d.ts.map +1 -1
- package/types/x-modules/facets/components/filters/renderless-filter.vue.d.ts +1 -1
- package/types/x-modules/history-queries/components/history-queries-switch.vue.d.ts +1 -1
- package/types/x-modules/tagging/components/tagging.vue.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.1.0-alpha.27](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.26...@empathyco/x-components@4.1.0-alpha.27) (2024-03-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* change useHybridInject so it works more like vue inject (#1427) ([f7e2946](https://github.com/empathyco/x/commit/f7e2946771213c06b6b7f6c9b4987ba971303463))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [4.1.0-alpha.26](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.25...@empathyco/x-components@4.1.0-alpha.26) (2024-02-23)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Documentation
|
|
19
|
+
|
|
20
|
+
* replace enable/disable with activate/deactivate (#1420) ([5370c7c](https://github.com/empathyco/x/commit/5370c7c908db1f78d1b315dfd46a518cb534ca8d))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [4.1.0-alpha.25](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.24...@empathyco/x-components@4.1.0-alpha.25) (2024-02-23)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -7979,30 +7979,6 @@
|
|
|
7979
7979
|
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
7980
7980
|
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
7981
7981
|
}
|
|
7982
|
-
:root {
|
|
7983
|
-
--x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
|
|
7984
|
-
--x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
|
|
7985
|
-
--x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
|
|
7986
|
-
--x-size-padding-right-dropdown-item-line: 0;
|
|
7987
|
-
--x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
|
|
7988
|
-
--x-size-padding-left-dropdown-item-line: 0;
|
|
7989
|
-
--x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
|
|
7990
|
-
--x-size-padding-right-dropdown-toggle-line: 0;
|
|
7991
|
-
--x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
|
|
7992
|
-
--x-size-padding-left-dropdown-toggle-line: 0;
|
|
7993
|
-
--x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
|
|
7994
|
-
--x-size-border-width-top-dropdown-toggle-line: 0;
|
|
7995
|
-
--x-size-border-width-right-dropdown-toggle-line: 0;
|
|
7996
|
-
--x-size-border-width-bottom-dropdown-toggle-line: var(
|
|
7997
|
-
--x-size-border-width-dropdown-toggle-line
|
|
7998
|
-
);
|
|
7999
|
-
--x-size-border-width-left-dropdown-toggle-line: 0;
|
|
8000
|
-
--x-size-border-width-dropdown-list-line: 0;
|
|
8001
|
-
--x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8002
|
-
--x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8003
|
-
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8004
|
-
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8005
|
-
}
|
|
8006
7982
|
|
|
8007
7983
|
.x-dropdown--line {
|
|
8008
7984
|
--x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
|
|
@@ -8464,16 +8440,6 @@
|
|
|
8464
8440
|
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8465
8441
|
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8466
8442
|
}
|
|
8467
|
-
:root {
|
|
8468
|
-
--x-color-background-button-secondary: transparent;
|
|
8469
|
-
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8470
|
-
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8471
|
-
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8472
|
-
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8473
|
-
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8474
|
-
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8475
|
-
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8476
|
-
}
|
|
8477
8443
|
|
|
8478
8444
|
.x-button--secondary.x-button,
|
|
8479
8445
|
.x-button--secondary .x-button {
|
|
@@ -8485,6 +8451,16 @@
|
|
|
8485
8451
|
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
|
|
8486
8452
|
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
|
|
8487
8453
|
}
|
|
8454
|
+
:root {
|
|
8455
|
+
--x-color-background-button-secondary: transparent;
|
|
8456
|
+
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8457
|
+
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8458
|
+
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8459
|
+
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8460
|
+
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8461
|
+
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8462
|
+
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8463
|
+
}
|
|
8488
8464
|
:root {
|
|
8489
8465
|
--x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
|
|
8490
8466
|
--x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
|
|
@@ -8555,6 +8531,11 @@
|
|
|
8555
8531
|
--x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
|
|
8556
8532
|
--x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
|
|
8557
8533
|
}
|
|
8534
|
+
:root {
|
|
8535
|
+
--x-color-background-button-ghost: transparent;
|
|
8536
|
+
--x-color-border-button-ghost: transparent;
|
|
8537
|
+
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8538
|
+
}
|
|
8558
8539
|
:root {
|
|
8559
8540
|
--x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
|
|
8560
8541
|
--x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
|
|
@@ -8582,11 +8563,6 @@
|
|
|
8582
8563
|
--x-color-border-button-ghost: transparent;
|
|
8583
8564
|
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8584
8565
|
}
|
|
8585
|
-
:root {
|
|
8586
|
-
--x-color-background-button-ghost: transparent;
|
|
8587
|
-
--x-color-border-button-ghost: transparent;
|
|
8588
|
-
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8589
|
-
}
|
|
8590
8566
|
|
|
8591
8567
|
.x-button--ghost.x-button,
|
|
8592
8568
|
.x-button--ghost .x-button {
|
|
@@ -8841,4 +8817,28 @@
|
|
|
8841
8817
|
--x-size-border-radius-base-m: var(--x-size-base-06);
|
|
8842
8818
|
--x-size-border-radius-base-pill: 99999px;
|
|
8843
8819
|
--x-size-border-width-base: 1px;
|
|
8820
|
+
}
|
|
8821
|
+
:root {
|
|
8822
|
+
--x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
|
|
8823
|
+
--x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
|
|
8824
|
+
--x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
|
|
8825
|
+
--x-size-padding-right-dropdown-item-line: 0;
|
|
8826
|
+
--x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
|
|
8827
|
+
--x-size-padding-left-dropdown-item-line: 0;
|
|
8828
|
+
--x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
|
|
8829
|
+
--x-size-padding-right-dropdown-toggle-line: 0;
|
|
8830
|
+
--x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
|
|
8831
|
+
--x-size-padding-left-dropdown-toggle-line: 0;
|
|
8832
|
+
--x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
|
|
8833
|
+
--x-size-border-width-top-dropdown-toggle-line: 0;
|
|
8834
|
+
--x-size-border-width-right-dropdown-toggle-line: 0;
|
|
8835
|
+
--x-size-border-width-bottom-dropdown-toggle-line: var(
|
|
8836
|
+
--x-size-border-width-dropdown-toggle-line
|
|
8837
|
+
);
|
|
8838
|
+
--x-size-border-width-left-dropdown-toggle-line: 0;
|
|
8839
|
+
--x-size-border-width-dropdown-list-line: 0;
|
|
8840
|
+
--x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8841
|
+
--x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8842
|
+
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8843
|
+
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8844
8844
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## HistoryQueriesSwitch class
|
|
6
6
|
|
|
7
|
-
History Queries Switch is a component to
|
|
7
|
+
History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the `isEnabled` value.
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
@@ -61,7 +61,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
61
61
|
| [Highlight](./x-components.highlight.md) | Highlights the given part of the text. The component is smart enough to do matches between special characters like tilde, cedilla, eñe, capital letters... |
|
|
62
62
|
| [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. 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. |
|
|
63
63
|
| [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
|
|
64
|
-
| [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to
|
|
64
|
+
| [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the <code>isEnabled</code> value. |
|
|
65
65
|
| [HistoryQuery](./x-components.historyquery.md) | This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries. |
|
|
66
66
|
| [IdentifierResult](./x-components.identifierresult.md) | This component renders an identifier result value and highlights its matching part with the query from the state. Receives as prop the [Result](./x-types.result.md) data. |
|
|
67
67
|
| [IdentifierResults](./x-components.identifierresults.md) | Paints the list of identifier results stored in the state. Each identifier result should be represented by a [IdentifierResult](./x-components.identifierresult.md) component besides any other component. |
|
|
@@ -95,7 +95,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
95
95
|
| [RelatedTags](./x-components.relatedtags.md) | This component renders a set of \[<code>RelatedTag</code>\](./x-components.related-tag) components by default to select from after a query is performed to fine-tune search. For example, if you are searching for \*lego\*, different related tags could be \*city\*, \*friends\*, or \*harry potter\*, refining the search with \*lego city\*, \*lego friends\*, or \*lego harry potter\*. |
|
|
96
96
|
| [RemoveHistoryQuery](./x-components.removehistoryquery.md) | Button that when it is pressed emits the [HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md) event, expressing the user intention to remove a query in the history. |
|
|
97
97
|
| [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
|
|
98
|
-
| [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be
|
|
98
|
+
| [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be deactivated. |
|
|
99
99
|
| [ResultsList](./x-components.resultslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.</p><p>The component provides a default slot which wraps the whole component with the <code>results</code> bound.</p><p>It also provides the slot result to customize the item, which is within the default slot, with the result bound.</p> |
|
|
100
100
|
| [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
|
|
101
101
|
| [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | <p>Component that exposes the result merged with its selected variant in the default slot.</p><p>It receives the original result and keeps track of the selected variant.</p><p>It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.</p> |
|
|
@@ -124,7 +124,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
124
124
|
| [SpellcheckButton](./x-components.spellcheckbutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query. |
|
|
125
125
|
| [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation. |
|
|
126
126
|
| [StaggeringTransitionGroup](./x-components.staggeringtransitiongroup.md) | A replacement component for Vue's transition-group, that also adds the option to stagger the animations. |
|
|
127
|
-
| [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows to
|
|
127
|
+
| [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows you to activate or deactivate the session id management through the <code>consent</code> prop. |
|
|
128
128
|
| [UrlHandler](./x-components.urlhandler.md) | This component manages the browser URL parameters to preserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM. |
|
|
129
129
|
| [WindowScroll](./x-components.windowscroll.md) | The <code>WindowScroll</code> component listens to either the <code>html</code> or <code>body</code> DOM scroll events, and re-emits them as X Events. Additionally it also emits events related to the direction or current position of these elements scroll. |
|
|
130
130
|
| [XInstaller](./x-components.xinstaller.md) | <p>The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more.</p><p>This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project.</p><p>The steps 2 & 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md)<!-- -->.</p> |
|
|
@@ -190,6 +190,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
190
190
|
| [useEmitDisplayEvent({ element, taggingRequest, eventMetadata })](./x-components.useemitdisplayevent.md) | Composable that emits a <code>TrackableElementDisplayed</code> event whenever the provided element appears in the viewport for the first time. |
|
|
191
191
|
| [useGetter(module, getters)](./x-components.usegetter.md) | Function which returns the requested getters as a dictionary of getters. |
|
|
192
192
|
| [useHybridInject(key, defaultValue)](./x-components.usehybridinject.md) | Function to use a hybrid inject, which allows to inject a value provided by the regular provide of vue or by the XProvide decorator. |
|
|
193
|
+
| [useHybridInject(key)](./x-components.usehybridinject_1.md) | |
|
|
193
194
|
| [useNoElementRender(slots)](./x-components.usenoelementrender.md) | Returns a render function that returns the default slot or nothing if it's not defined. |
|
|
194
195
|
| [useOnDisplay({ element, callback, triggerOnce })](./x-components.useondisplay.md) | Composable that triggers a callback whenever the provided element appears in the viewport. It can trigger the first time only or every time the element appears in the viewport. |
|
|
195
196
|
| [useRegisterXModule(module)](./x-components.useregisterxmodule.md) | Initializes a component as an X-Component: \* Registers the module passed as parameter. \* Flags the component as X-Component, so then it can be detected with the [isXComponent()](./x-components.isxcomponent.md) function. |
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## RenderlessFilter class
|
|
6
6
|
|
|
7
|
-
Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be
|
|
7
|
+
Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be deactivated.
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## Tagging class
|
|
6
6
|
|
|
7
|
-
This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows to
|
|
7
|
+
This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows you to activate or deactivate the session id management through the `consent` prop.
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
@@ -9,7 +9,7 @@ Function to use a hybrid inject, which allows to inject a value provided by the
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
export declare function useHybridInject<SomeValue>(key: string, defaultValue
|
|
12
|
+
export declare function useHybridInject<SomeValue>(key: string, defaultValue: SomeValue): SomeValue;
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Parameters
|
|
@@ -17,11 +17,11 @@ export declare function useHybridInject<SomeValue>(key: string, defaultValue?: S
|
|
|
17
17
|
| Parameter | Type | Description |
|
|
18
18
|
| --- | --- | --- |
|
|
19
19
|
| key | string | The key of the value to inject. |
|
|
20
|
-
| defaultValue | SomeValue |
|
|
20
|
+
| defaultValue | SomeValue | The default value to use if the value is not provided. |
|
|
21
21
|
|
|
22
22
|
**Returns:**
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
SomeValue
|
|
25
25
|
|
|
26
26
|
The computed value of the injected value.
|
|
27
27
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [useHybridInject](./x-components.usehybridinject_1.md)
|
|
4
|
+
|
|
5
|
+
## useHybridInject() function
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
**Signature:**
|
|
9
|
+
|
|
10
|
+
```typescript
|
|
11
|
+
export declare function useHybridInject<SomeValue>(key: string): SomeValue | undefined;
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Parameters
|
|
15
|
+
|
|
16
|
+
| Parameter | Type | Description |
|
|
17
|
+
| --- | --- | --- |
|
|
18
|
+
| key | string | |
|
|
19
|
+
|
|
20
|
+
**Returns:**
|
|
21
|
+
|
|
22
|
+
SomeValue \| undefined
|
|
23
|
+
|
|
@@ -109,7 +109,7 @@ which tab should be opened at first.
|
|
|
109
109
|
|
|
110
110
|
The prop `allowTabDeselect` allows the tabs to be deselected. When a tab that is already selected is
|
|
111
111
|
clicked again, the tab will be deselected and no panel content will be displayed. By default, this
|
|
112
|
-
behavior is
|
|
112
|
+
behavior is deactivated.
|
|
113
113
|
|
|
114
114
|
```vue
|
|
115
115
|
<template>
|
|
@@ -8,7 +8,7 @@ title: RenderlessFilter
|
|
|
8
8
|
|
|
9
9
|
Renders default slot content. It binds to the default slot a @empathyco/x-types#BooleanFilter, the
|
|
10
10
|
XEvent that will be emitted when clicking the content, the css classes and if the content should be
|
|
11
|
-
|
|
11
|
+
deactivated.
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
@@ -20,7 +20,7 @@ disabled.
|
|
|
20
20
|
## Examples
|
|
21
21
|
|
|
22
22
|
Renders default slot content. It binds to the default slot a filter, the events that will be emitted
|
|
23
|
-
when clicking the content, the
|
|
23
|
+
when clicking the content, the CSS classes and if the content should be deactivated.
|
|
24
24
|
|
|
25
25
|
### Basic usage
|
|
26
26
|
|
package/docs/API-reference/components/history-queries/x-components.history-queries-switch.md
CHANGED
|
@@ -6,21 +6,21 @@ title: HistoryQueriesSwitch
|
|
|
6
6
|
|
|
7
7
|
# HistoryQueriesSwitch
|
|
8
8
|
|
|
9
|
-
History Queries Switch is a component to
|
|
10
|
-
events depending on the `isEnabled` value.
|
|
9
|
+
History Queries Switch is a component to activate or deactivate the history queries. This component
|
|
10
|
+
emits events depending on the `isEnabled` value.
|
|
11
11
|
|
|
12
12
|
## Events
|
|
13
13
|
|
|
14
14
|
A list of events that the component will emit:
|
|
15
15
|
|
|
16
16
|
- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
|
|
17
|
-
the event is emitted whenever the user clicks the switch and the history queries are
|
|
17
|
+
the event is emitted whenever the user clicks the switch and the history queries are deactivated.
|
|
18
18
|
- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
|
|
19
|
-
the event is emitted whenever the user clicks the switch when the history queries are
|
|
20
|
-
the list of history queries is not empty.
|
|
19
|
+
the event is emitted whenever the user clicks the switch when the history queries are activated
|
|
20
|
+
and the list of history queries is not empty.
|
|
21
21
|
- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
|
|
22
|
-
the event is emitted whenever the user clicks the switch when the history queries are
|
|
23
|
-
the list of history queries is empty.
|
|
22
|
+
the event is emitted whenever the user clicks the switch when the history queries are activated
|
|
23
|
+
and the list of history queries is empty.
|
|
24
24
|
|
|
25
25
|
## See it in action
|
|
26
26
|
|
|
@@ -108,7 +108,8 @@ more groups will be inserted. Each one of this groups will have up to `6` next q
|
|
|
108
108
|
### Showing/hiding first next queries group when no more items
|
|
109
109
|
|
|
110
110
|
By default, the first next query group will be inserted when the total number of results is smaller
|
|
111
|
-
than the offset, but this behavior can be
|
|
111
|
+
than the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to
|
|
112
|
+
`true`.
|
|
112
113
|
|
|
113
114
|
```vue live
|
|
114
115
|
<template>
|
|
@@ -8,7 +8,7 @@ title: Tagging
|
|
|
8
8
|
|
|
9
9
|
This component enables and manages the sending of information to the
|
|
10
10
|
[Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
|
|
11
|
-
It allows to
|
|
11
|
+
It allows you to activate or deactivate the session id management through the `consent` prop.
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
@@ -116,7 +116,7 @@ __vue_render__._withStripped = true;
|
|
|
116
116
|
/* style */
|
|
117
117
|
const __vue_inject_styles__ = undefined;
|
|
118
118
|
/* scoped */
|
|
119
|
-
const __vue_scope_id__ = "data-v-
|
|
119
|
+
const __vue_scope_id__ = "data-v-a2fe119c";
|
|
120
120
|
/* module identifier */
|
|
121
121
|
const __vue_module_identifier__ = undefined;
|
|
122
122
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-tabs-panel.vue.js","sources":["../../../../src/components/panels/base-tabs-panel.vue"],"sourcesContent":["<template>\n <section v-if=\"getTabs().length > 0\" class=\"x-tabs-panel\" data-test=\"base-tabs-panel\">\n <component\n :is=\"tabsAnimation\"\n class=\"x-tabs-panel__items-list\"\n :class=\"tabsListClass\"\n data-test=\"base-tabs-panel-list\"\n role=\"tablist\"\n >\n <!--\n @slot Slot used to replace the whole tab.\n @binding {string} tab - The tab name.\n @binding {boolean} isSelected - Indicates if the tab is selected.\n @binding {function} select - Function to select the tab.\n -->\n <slot\n v-for=\"tab in getTabs()\"\n name=\"tab\"\n v-bind=\"{ tab, isSelected: tabIsSelected(tab), select: () => selectTab(tab) }\"\n >\n <button\n :key=\"tab\"\n @click=\"selectTab(tab)\"\n :id=\"`base-tabs-panel-${tab}`\"\n class=\"x-tabs-panel__list-item x-tabs-panel__button x-button\"\n :class=\"tabIsSelected(tab) ? activeTabClass : tabClass\"\n :aria-selected=\"tabIsSelected(tab)\"\n data-test=\"base-tabs-panel-button\"\n role=\"tab\"\n >\n <!--\n @slot Slot used to just pass the content.\n @binding {string} tab - The tab name.\n @binding {boolean} isSelected - Indicates if the tab is selected.\n -->\n <slot name=\"tab-content\" v-bind=\"{ tab, isSelected: tabIsSelected(tab) }\">\n {{ tab }}\n </slot>\n </button>\n </slot>\n </component>\n\n <component :is=\"contentAnimation\">\n <div\n v-if=\"selectedTab && $scopedSlots[selectedTab]\"\n :key=\"selectedTab\"\n :class=\"contentClass\"\n :aria-labelledby=\"`base-tabs-panel-${selectedTab}`\"\n data-test=\"base-tabs-panel-content\"\n role=\"tabpanel\"\n >\n <!--\n @slot Slot used to display the selected tab content.\n @binding {string} tab - This content's tab name.\n @binding {function} selectTab - Function to select a tab.\n @binding {function} deselectTab - Function to deselect the tab.\n -->\n <slot\n :name=\"selectedTab\"\n v-bind=\"{ tab: selectedTab, selectTab, deselectTab: () => selectTab(selectedTab) }\"\n />\n </div>\n </component>\n </section>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n import { dynamicPropsMixin } from '../dynamic-props.mixin';\n\n /**\n * Base Tabs Panel.\n *\n * @public\n */\n @Component\n export default class BaseTabsPanel extends mixins(\n dynamicPropsMixin(['activeTabClass', 'contentClass', 'tabClass', 'tabsListClass'])\n ) {\n /**\n * Animation component that will be used to animate the tabs list.\n *\n * @public\n */\n @Prop({ default: 'header' })\n public tabsAnimation!: Vue | string;\n\n /**\n * Animation component that will be used to animate the selected tab content.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public contentAnimation!: Vue | string;\n\n /**\n * The tab to be initially selected.\n *\n * @public\n */\n @Prop({ default: '' })\n public initialTab!: string;\n\n /**\n * Allows the tabs to be unselected.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public allowTabDeselect!: boolean;\n\n /**\n * The currently selected tab.\n *\n * @internal\n */\n protected selectedTab: string = this.initialTab;\n\n /**\n * Extracts the tab from the slots.\n *\n * @returns The list of tabs.\n *\n * @internal\n */\n protected getTabs(): string[] {\n return Object.keys(this.$scopedSlots).filter(\n slotName => !['tab', 'tab-content'].includes(slotName)\n );\n }\n\n /**\n * Changes the current selected tab. If the tab is already selected\n * and `allowTabDeselect` is `true`, the tab will be unselected.\n *\n * @param tab - The tab to be selected.\n *\n * @internal\n */\n protected selectTab(tab: string): void {\n if (this.allowTabDeselect && this.selectedTab === tab) {\n this.selectedTab = '';\n } else {\n this.selectedTab = tab;\n }\n }\n\n /**\n * Checks if a tab is selected.\n *\n * @param tab - Tab to check.\n * @returns True if the tab is selected, false otherwise.\n *\n * @internal\n */\n protected tabIsSelected(tab: string): boolean {\n return this.selectedTab === tab;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-tabs-panel__items-list {\n display: flex;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## Examples\n\nThis component renders a list of tabs based on the name of the slots passed on its template. By\ndefault, the name of each slot will be used as tab label. If an initial tab is passed by prop, the\ncontent of its correspondent slot will displayed in a panel. Otherwise, no content will be displayed\nuntil a tab is selected.\n\n### Basic example\n\nIt renders a list of tabs and, when a tab is clicked, a panel with its content will be displayed.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n### Play with props\n\n#### Define the tab to be initially opened\n\nBy default, no tab is selected so any panel is displayed. The `initialTab` prop allows to indicate\nwhich tab should be opened at first.\n\n```vue\n<template>\n <BaseTabsPanel initialTab=\"summer\">\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Allowing tabs deselection\n\nThe prop `allowTabDeselect` allows the tabs to be deselected. When a tab that is already selected is\nclicked again, the tab will be deselected and no panel content will be displayed. By default, this\nbehavior is disabled.\n\n```vue\n<template>\n <BaseTabsPanel initialTab=\"summer\" allowTabDeselect>\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Customizing the content with classes\n\n- The `activeTabClass` prop can be used to add classes to the active tab button.\n- The `contentClass` prop can be used to add classes to the content.\n- The `tabClass` prop can be used to add classes to the tab buttons.\n- The `tabsListClass` prop can be used to add classes to the tabs list.\n\n```vue\n<template>\n <BaseTabsPanel\n activeTabClass=\"x-button-auxiliary\"\n contentClass=\"x-p-12 x-bg-auxiliary-25\"\n tabClass=\"x-button-ghost\"\n tabListClass=\"x-flex-col\"\n >\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Play with the animations\n\n- The `tabsAnimation` prop can be used to animate the tabs list.\n- The `contentAnimation` prop can be used to animate the selected tab content.\n\n```vue\n<template>\n <BaseTabsPanel :tabsAnimation=\"staggeredFadeAndSlide\" :contentAnimation=\"staggeredFadeAndSlide\">\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n },\n data() {\n return {\n staggeredFadeAndSlide: StaggeredFadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding the slots\n\n#### Customizing the tab button\n\nBy default, the component is rendering a button for each tab to be displayed. This button can be\nreplaced entirely through the `tab` slot.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #tab=\"{ tab, isSelected, select }\">\n <CheckIcon v-if=\"isSelected\" />\n This is the {{ tab }} tab.\n <button @click=\"select\">Open tab</button>\n </template>\n\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel,\n CheckIcon\n }\n };\n</script>\n```\n\n#### Customizing the tab button content\n\nAlternatively to the previous example, instead of changing the whole tab button, the slot\n`tab-content` offers the possibility of changing just its contents.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #tab-content=\"{ tab, isSelected }\">\n <CheckIcon v-if=\"isSelected\" />\n {{ tab }}\n </template>\n\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel,\n CheckIcon\n }\n };\n</script>\n```\n\n#### Customizing the tab panel content\n\nThe displayed tab name and a method to select a tab are exposed to the tab panel content slot.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #summer=\"{ tab, selectTab, deselectTab }\">\n <h1>{{ tab }}</h1>\n <button @click=\"() => selectTab('fall')\">Open Fall</button>\n <button @click=\"deselectTab\">Close tab</button>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"base-tabs-panel.vue.js","sources":["../../../../src/components/panels/base-tabs-panel.vue"],"sourcesContent":["<template>\n <section v-if=\"getTabs().length > 0\" class=\"x-tabs-panel\" data-test=\"base-tabs-panel\">\n <component\n :is=\"tabsAnimation\"\n class=\"x-tabs-panel__items-list\"\n :class=\"tabsListClass\"\n data-test=\"base-tabs-panel-list\"\n role=\"tablist\"\n >\n <!--\n @slot Slot used to replace the whole tab.\n @binding {string} tab - The tab name.\n @binding {boolean} isSelected - Indicates if the tab is selected.\n @binding {function} select - Function to select the tab.\n -->\n <slot\n v-for=\"tab in getTabs()\"\n name=\"tab\"\n v-bind=\"{ tab, isSelected: tabIsSelected(tab), select: () => selectTab(tab) }\"\n >\n <button\n :key=\"tab\"\n @click=\"selectTab(tab)\"\n :id=\"`base-tabs-panel-${tab}`\"\n class=\"x-tabs-panel__list-item x-tabs-panel__button x-button\"\n :class=\"tabIsSelected(tab) ? activeTabClass : tabClass\"\n :aria-selected=\"tabIsSelected(tab)\"\n data-test=\"base-tabs-panel-button\"\n role=\"tab\"\n >\n <!--\n @slot Slot used to just pass the content.\n @binding {string} tab - The tab name.\n @binding {boolean} isSelected - Indicates if the tab is selected.\n -->\n <slot name=\"tab-content\" v-bind=\"{ tab, isSelected: tabIsSelected(tab) }\">\n {{ tab }}\n </slot>\n </button>\n </slot>\n </component>\n\n <component :is=\"contentAnimation\">\n <div\n v-if=\"selectedTab && $scopedSlots[selectedTab]\"\n :key=\"selectedTab\"\n :class=\"contentClass\"\n :aria-labelledby=\"`base-tabs-panel-${selectedTab}`\"\n data-test=\"base-tabs-panel-content\"\n role=\"tabpanel\"\n >\n <!--\n @slot Slot used to display the selected tab content.\n @binding {string} tab - This content's tab name.\n @binding {function} selectTab - Function to select a tab.\n @binding {function} deselectTab - Function to deselect the tab.\n -->\n <slot\n :name=\"selectedTab\"\n v-bind=\"{ tab: selectedTab, selectTab, deselectTab: () => selectTab(selectedTab) }\"\n />\n </div>\n </component>\n </section>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n import { dynamicPropsMixin } from '../dynamic-props.mixin';\n\n /**\n * Base Tabs Panel.\n *\n * @public\n */\n @Component\n export default class BaseTabsPanel extends mixins(\n dynamicPropsMixin(['activeTabClass', 'contentClass', 'tabClass', 'tabsListClass'])\n ) {\n /**\n * Animation component that will be used to animate the tabs list.\n *\n * @public\n */\n @Prop({ default: 'header' })\n public tabsAnimation!: Vue | string;\n\n /**\n * Animation component that will be used to animate the selected tab content.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public contentAnimation!: Vue | string;\n\n /**\n * The tab to be initially selected.\n *\n * @public\n */\n @Prop({ default: '' })\n public initialTab!: string;\n\n /**\n * Allows the tabs to be unselected.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public allowTabDeselect!: boolean;\n\n /**\n * The currently selected tab.\n *\n * @internal\n */\n protected selectedTab: string = this.initialTab;\n\n /**\n * Extracts the tab from the slots.\n *\n * @returns The list of tabs.\n *\n * @internal\n */\n protected getTabs(): string[] {\n return Object.keys(this.$scopedSlots).filter(\n slotName => !['tab', 'tab-content'].includes(slotName)\n );\n }\n\n /**\n * Changes the current selected tab. If the tab is already selected\n * and `allowTabDeselect` is `true`, the tab will be unselected.\n *\n * @param tab - The tab to be selected.\n *\n * @internal\n */\n protected selectTab(tab: string): void {\n if (this.allowTabDeselect && this.selectedTab === tab) {\n this.selectedTab = '';\n } else {\n this.selectedTab = tab;\n }\n }\n\n /**\n * Checks if a tab is selected.\n *\n * @param tab - Tab to check.\n * @returns True if the tab is selected, false otherwise.\n *\n * @internal\n */\n protected tabIsSelected(tab: string): boolean {\n return this.selectedTab === tab;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-tabs-panel__items-list {\n display: flex;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## Examples\n\nThis component renders a list of tabs based on the name of the slots passed on its template. By\ndefault, the name of each slot will be used as tab label. If an initial tab is passed by prop, the\ncontent of its correspondent slot will displayed in a panel. Otherwise, no content will be displayed\nuntil a tab is selected.\n\n### Basic example\n\nIt renders a list of tabs and, when a tab is clicked, a panel with its content will be displayed.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n### Play with props\n\n#### Define the tab to be initially opened\n\nBy default, no tab is selected so any panel is displayed. The `initialTab` prop allows to indicate\nwhich tab should be opened at first.\n\n```vue\n<template>\n <BaseTabsPanel initialTab=\"summer\">\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Allowing tabs deselection\n\nThe prop `allowTabDeselect` allows the tabs to be deselected. When a tab that is already selected is\nclicked again, the tab will be deselected and no panel content will be displayed. By default, this\nbehavior is deactivated.\n\n```vue\n<template>\n <BaseTabsPanel initialTab=\"summer\" allowTabDeselect>\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Customizing the content with classes\n\n- The `activeTabClass` prop can be used to add classes to the active tab button.\n- The `contentClass` prop can be used to add classes to the content.\n- The `tabClass` prop can be used to add classes to the tab buttons.\n- The `tabsListClass` prop can be used to add classes to the tabs list.\n\n```vue\n<template>\n <BaseTabsPanel\n activeTabClass=\"x-button-auxiliary\"\n contentClass=\"x-p-12 x-bg-auxiliary-25\"\n tabClass=\"x-button-ghost\"\n tabListClass=\"x-flex-col\"\n >\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n\n#### Play with the animations\n\n- The `tabsAnimation` prop can be used to animate the tabs list.\n- The `contentAnimation` prop can be used to animate the selected tab content.\n\n```vue\n<template>\n <BaseTabsPanel :tabsAnimation=\"staggeredFadeAndSlide\" :contentAnimation=\"staggeredFadeAndSlide\">\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n },\n data() {\n return {\n staggeredFadeAndSlide: StaggeredFadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding the slots\n\n#### Customizing the tab button\n\nBy default, the component is rendering a button for each tab to be displayed. This button can be\nreplaced entirely through the `tab` slot.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #tab=\"{ tab, isSelected, select }\">\n <CheckIcon v-if=\"isSelected\" />\n This is the {{ tab }} tab.\n <button @click=\"select\">Open tab</button>\n </template>\n\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel,\n CheckIcon\n }\n };\n</script>\n```\n\n#### Customizing the tab button content\n\nAlternatively to the previous example, instead of changing the whole tab button, the slot\n`tab-content` offers the possibility of changing just its contents.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #tab-content=\"{ tab, isSelected }\">\n <CheckIcon v-if=\"isSelected\" />\n {{ tab }}\n </template>\n\n <template #summer>\n <div>Summer Top Sales</div>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n\n <template #outlet>\n <div>Outlet Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel,\n CheckIcon\n }\n };\n</script>\n```\n\n#### Customizing the tab panel content\n\nThe displayed tab name and a method to select a tab are exposed to the tab panel content slot.\n\n```vue\n<template>\n <BaseTabsPanel>\n <template #summer=\"{ tab, selectTab, deselectTab }\">\n <h1>{{ tab }}</h1>\n <button @click=\"() => selectTab('fall')\">Open Fall</button>\n <button @click=\"deselectTab\">Close tab</button>\n </template>\n\n <template #fall>\n <div>Fall Top Sales</div>\n </template>\n </BaseTabsPanel>\n</template>\n\n<script>\n import { BaseTabsPanel } from '@empathyco/x-components';\n\n export default {\n name: 'BaseTabsPanelDemo',\n components: {\n BaseTabsPanel\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-tabs-panel__items-list[data-v-
|
|
3
|
+
var css = ".x-tabs-panel__items-list[data-v-a2fe119c] {\n display: flex;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
|
@@ -1,23 +1,35 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { inject, isRef, isReactive, reactive, ref } from 'vue';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* of vue or by the XProvide decorator.
|
|
4
|
+
* Makes the injection reactive if it is not already.
|
|
6
5
|
*
|
|
7
|
-
* @param
|
|
8
|
-
*
|
|
9
|
-
* @returns The
|
|
10
|
-
* @
|
|
6
|
+
* @param injection - The injection to make reactive.
|
|
7
|
+
*
|
|
8
|
+
* @returns The reactive injection.
|
|
9
|
+
* @internal
|
|
11
10
|
*/
|
|
11
|
+
const makeInjectionReactive = (injection) => {
|
|
12
|
+
// Check if the injection comes from XProvide and it is not already reactive.
|
|
13
|
+
if (!!injection &&
|
|
14
|
+
typeof injection === 'object' &&
|
|
15
|
+
'value' in injection &&
|
|
16
|
+
(!isRef(injection) || !isReactive(injection))) {
|
|
17
|
+
const xRefValue = injection.value;
|
|
18
|
+
if (xRefValue && typeof xRefValue === 'object') {
|
|
19
|
+
return reactive(xRefValue);
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
return ref(xRefValue);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return injection;
|
|
26
|
+
};
|
|
27
|
+
/** @public */
|
|
12
28
|
function useHybridInject(key, defaultValue) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return injectedValue && typeof injectedValue === 'object' && 'value' in injectedValue
|
|
18
|
-
? injectedValue.value
|
|
19
|
-
: injectedValue;
|
|
20
|
-
});
|
|
29
|
+
const injection = defaultValue
|
|
30
|
+
? inject(key, defaultValue)
|
|
31
|
+
: inject(key);
|
|
32
|
+
return makeInjectionReactive(injection);
|
|
21
33
|
}
|
|
22
34
|
|
|
23
35
|
export { useHybridInject };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hybrid-inject.js","sources":["../../../src/composables/use-hybrid-inject.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"use-hybrid-inject.js","sources":["../../../src/composables/use-hybrid-inject.ts"],"sourcesContent":["import { inject, isReactive, isRef, reactive, Ref, ref, UnwrapRef } from 'vue';\nimport { UnwrapNestedRefs } from 'vue/types/v3-generated';\n\n/**\n * Makes the injection reactive if it is not already.\n *\n * @param injection - The injection to make reactive.\n *\n * @returns The reactive injection.\n * @internal\n */\nconst makeInjectionReactive = <SomeValue>(\n injection: SomeValue | { value: SomeValue } | undefined\n): Ref<UnwrapRef<SomeValue>> | UnwrapNestedRefs<SomeValue> | SomeValue | undefined => {\n // Check if the injection comes from XProvide and it is not already reactive.\n if (\n !!injection &&\n typeof injection === 'object' &&\n 'value' in injection &&\n (!isRef(injection) || !isReactive(injection))\n ) {\n const xRefValue = injection.value;\n\n if (xRefValue && typeof xRefValue === 'object') {\n return reactive(xRefValue);\n } else {\n return ref<SomeValue>(xRefValue);\n }\n }\n\n return injection as SomeValue | undefined;\n};\n\n/**\n * Function to use a hybrid inject, which allows to inject a value provided by the regular provide\n * of vue or by the XProvide decorator.\n *\n * @param key - The key of the value to inject.\n * @param defaultValue - The default value to use if the value is not provided.\n * @returns The computed value of the injected value.\n * @public\n */\n/* eslint-disable */\nexport function useHybridInject<SomeValue>(key: string, defaultValue: SomeValue): SomeValue;\n/** @public */\nexport function useHybridInject<SomeValue>(key: string): SomeValue | undefined;\n/** @public */\nexport function useHybridInject<SomeValue>(key: string, defaultValue?: SomeValue) {\n /* eslint-enable */\n type WrappedValue = { value: SomeValue };\n\n const injection = defaultValue\n ? inject<SomeValue | WrappedValue>(key, defaultValue)\n : inject<SomeValue | WrappedValue>(key);\n\n return makeInjectionReactive<SomeValue>(injection);\n}\n"],"names":[],"mappings":";;AAGA;;;;;;;AAOG;AACH,MAAM,qBAAqB,GAAG,CAC5B,SAAuD,KAC4B;;IAEnF,IACE,CAAC,CAAC,SAAS;QACX,OAAO,SAAS,KAAK,QAAQ;AAC7B,QAAA,OAAO,IAAI,SAAS;AACpB,SAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,EAC7C;AACA,QAAA,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC;AAElC,QAAA,IAAI,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AAC9C,YAAA,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC;AAC5B,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,GAAG,CAAY,SAAS,CAAC,CAAC;AAClC,SAAA;AACF,KAAA;AAED,IAAA,OAAO,SAAkC,CAAC;AAC5C,CAAC,CAAC;AAeF;AACgB,SAAA,eAAe,CAAY,GAAW,EAAE,YAAwB,EAAA;IAI9E,MAAM,SAAS,GAAG,YAAY;AAC5B,UAAE,MAAM,CAA2B,GAAG,EAAE,YAAY,CAAC;AACrD,UAAE,MAAM,CAA2B,GAAG,CAAC,CAAC;AAE1C,IAAA,OAAO,qBAAqB,CAAY,SAAS,CAAC,CAAC;AACrD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderless-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/renderless-filter.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { BooleanFilter } from '@empathyco/x-types';\n import { xComponentMixin } from '../../../../components';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEvent, XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Renders default slot content. It binds to the default slot a\n * {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}\n * that will be emitted when clicking the content, the css classes and if the content should be\n *
|
|
1
|
+
{"version":3,"file":"renderless-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/renderless-filter.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { BooleanFilter } from '@empathyco/x-types';\n import { xComponentMixin } from '../../../../components';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEvent, XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Renders default slot content. It binds to the default slot a\n * {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}\n * that will be emitted when clicking the content, the css classes and if the content should be\n * deactivated.\n *\n * @remarks The default slot expects a root element, if it receives a list of elements, it will\n * renders the first element.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class RenderlessFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: BooleanFilter;\n\n /** Additional events with its payload to emit when the filter is clicked. */\n @Prop()\n public clickEvents?: Partial<XEventsTypes>;\n\n /**\n * The events that will be emitted when the filter is clicked.\n *\n * @returns The events to be emitted when the filter is clicked.\n * @internal\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserClickedAFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * The events to emit to the bus.\n *\n * @internal\n */\n protected emitEvents(): void {\n Object.entries(this.events).forEach(([event, payload]) => {\n this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });\n });\n }\n\n /**\n * Returns `true` when the filter should be disabled.\n *\n * @returns `true` if the filter should be disabled.\n * @internal\n */\n protected get isDisabled(): boolean {\n return this.filter.totalResults === 0;\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return ['x-facet-filter', { 'x-selected': this.filter.selected }];\n }\n\n render(h: CreateElement): VNode {\n return (\n this.$scopedSlots.default?.({\n filter: this.filter,\n // eslint-disable-next-line @typescript-eslint/unbound-method\n clickFilter: this.emitEvents,\n cssClasses: this.cssClasses,\n isDisabled: this.isDisabled\n })?.[0] ?? h()\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot a filter, the events that will be emitted\nwhen clicking the content, the CSS classes and if the content should be deactivated.\n\n### Basic usage\n\n```vue\n<RenderlessFilter :filter=\"filter\" />\n```\n\n### Customizing its contents and adding new events\n\n```vue\n<template>\n <RenderlessFilter\n :filter=\"filter\"\n :clickEvents=\"clickEvents\"\n v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n >\n <button @click=\"clickFilter\" :class=\"cssClasses\" :disabled=\"isDisabled\">\n {{ filter.label }}\n </button>\n </RenderlessFilter>\n</template>\n\n<script>\n import { RenderlessFilter } from '@empathyco/x-components';\n\n export default {\n components: {\n RenderlessFilter\n },\n props: ['filter'],\n computed: {\n clickEvents() {\n return { UserClickedAHierarchicalFilter: this.filter };\n }\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -153,7 +153,7 @@ import { facetsXModule } from '../../x-module.js';
|
|
|
153
153
|
* Renders default slot content. It binds to the default slot a
|
|
154
154
|
* {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}
|
|
155
155
|
* that will be emitted when clicking the content, the css classes and if the content should be
|
|
156
|
-
*
|
|
156
|
+
* deactivated.
|
|
157
157
|
*
|
|
158
158
|
* @remarks The default slot expects a root element, if it receives a list of elements, it will
|
|
159
159
|
* renders the first element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderless-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/renderless-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { BooleanFilter } from '@empathyco/x-types';\n import { xComponentMixin } from '../../../../components';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEvent, XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Renders default slot content. It binds to the default slot a\n * {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}\n * that will be emitted when clicking the content, the css classes and if the content should be\n *
|
|
1
|
+
{"version":3,"file":"renderless-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/renderless-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { BooleanFilter } from '@empathyco/x-types';\n import { xComponentMixin } from '../../../../components';\n import { VueCSSClasses } from '../../../../utils/types';\n import { XEvent, XEventsTypes } from '../../../../wiring/events.types';\n import { facetsXModule } from '../../x-module';\n\n /**\n * Renders default slot content. It binds to the default slot a\n * {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}\n * that will be emitted when clicking the content, the css classes and if the content should be\n * deactivated.\n *\n * @remarks The default slot expects a root element, if it receives a list of elements, it will\n * renders the first element.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class RenderlessFilter extends Vue {\n /** The filter data to render. */\n @Prop({ required: true })\n public filter!: BooleanFilter;\n\n /** Additional events with its payload to emit when the filter is clicked. */\n @Prop()\n public clickEvents?: Partial<XEventsTypes>;\n\n /**\n * The events that will be emitted when the filter is clicked.\n *\n * @returns The events to be emitted when the filter is clicked.\n * @internal\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserClickedAFilter: this.filter,\n ...this.clickEvents\n };\n }\n\n /**\n * The events to emit to the bus.\n *\n * @internal\n */\n protected emitEvents(): void {\n Object.entries(this.events).forEach(([event, payload]) => {\n this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });\n });\n }\n\n /**\n * Returns `true` when the filter should be disabled.\n *\n * @returns `true` if the filter should be disabled.\n * @internal\n */\n protected get isDisabled(): boolean {\n return this.filter.totalResults === 0;\n }\n\n /**\n * Dynamic CSS classes to apply to the component.\n *\n * @returns The dynamic CSS classes to apply to the component.\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return ['x-facet-filter', { 'x-selected': this.filter.selected }];\n }\n\n render(h: CreateElement): VNode {\n return (\n this.$scopedSlots.default?.({\n filter: this.filter,\n // eslint-disable-next-line @typescript-eslint/unbound-method\n clickFilter: this.emitEvents,\n cssClasses: this.cssClasses,\n isDisabled: this.isDisabled\n })?.[0] ?? h()\n );\n }\n }\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASE;;;;;;;;;;AAUG;AAIY,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,GAAG,CAAA;AAS/C;;;;;AAKG;AACH,IAAA,IAAc,MAAM,GAAA;QAClB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,MAAM;YAC/B,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;AAED;;;;AAIG;IACO,UAAU,GAAA;AAClB,QAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,KAAI;AACvD,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAe,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;AAC9E,SAAC,CAAC,CAAC;KACJ;AAED;;;;;AAKG;AACH,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,KAAK,CAAC,CAAC;KACvC;AAED;;;;;AAKG;AACH,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;KACnE;AAED,IAAA,MAAM,CAAC,CAAgB,EAAA;AACrB,QAAA,QACE,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG;YAC1B,MAAM,EAAE,IAAI,CAAC,MAAM;;YAEnB,WAAW,EAAE,IAAI,CAAC,UAAU;YAC5B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,EACd;KACH;CACF,CAAA;AA7DC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACK,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9B,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACoC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPxB,gBAAgB,GAAA,UAAA,CAAA;AAHpC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;AACmB,CAAA,EAAA,gBAAgB,CAgEpC,CAAA;aAhEoB,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { HistoryQuery } from '@empathyco/x-types';\n import BaseSwitch from '../../../components/base-switch.vue';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import { isArrayEmpty } from '../../../utils/array';\n\n /**\n * History Queries Switch is a component to
|
|
1
|
+
{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { HistoryQuery } from '@empathyco/x-types';\n import BaseSwitch from '../../../components/base-switch.vue';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import { isArrayEmpty } from '../../../utils/array';\n\n /**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { BaseSwitch }\n })\n export default class HistoryQueriesSwitch extends Vue {\n /**\n * A boolean with the isEnabled value coming from the store state.\n *\n * @internal\n */\n @State('historyQueries', 'isEnabled')\n public isEnabled!: boolean;\n\n /**\n * The history queries from the state.\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * Checks if there are history queries.\n *\n * @returns True if there are history queries; false otherwise.\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n\n /**\n * Emits an event based on the switch state.\n *\n * @internal\n */\n protected toggle(): void {\n this.$x.emit(\n this.isEnabled\n ? this.hasHistoryQueries\n ? 'UserClickedDisableHistoryQueries'\n : 'UserClickedConfirmDisableHistoryQueries'\n : 'UserClickedEnableHistoryQueries'\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted whenever the user clicks the switch when the history queries are activated\n and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted whenever the user clicks the switch when the history queries are activated\n and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <HistoryQueriesSwitch />\n</template>\n\n<script>\n import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueriesSwitchDemo',\n components: {\n HistoryQueriesSwitch\n }\n };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n <div>\n <div>\n <SearchInput :instant=\"false\" />\n <SearchButton>Search</SearchButton>\n </div>\n <label>\n History queries:\n <HistoryQueriesSwitch />\n <HistoryQueries />\n <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n </BaseEventsModal>\n </label>\n </div>\n</template>\n\n<script>\n import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n export default {\n name: 'HistoryQueriesSwitchDemo',\n components: {\n BaseEventButton,\n BaseEventsModal,\n HistoryQueriesSwitch,\n HistoryQueries,\n SearchInput,\n SearchButton\n },\n data() {\n return {\n eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n disableEvents: {\n UserClickedConfirmDisableHistoryQueries: undefined,\n UserClickedCloseEventsModal: undefined\n },\n cancelEvents: {\n UserClickedCloseEventsModal: undefined\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,7 +8,7 @@ import { historyQueriesXModule } from '../x-module.js';
|
|
|
8
8
|
import { isArrayEmpty } from '../../../utils/array.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* History Queries Switch is a component to
|
|
11
|
+
* History Queries Switch is a component to activate or deactivate the history queries.
|
|
12
12
|
* This component emits events depending on the `isEnabled` value.
|
|
13
13
|
*
|
|
14
14
|
* @public
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { HistoryQuery } from '@empathyco/x-types';\n import BaseSwitch from '../../../components/base-switch.vue';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import { isArrayEmpty } from '../../../utils/array';\n\n /**\n * History Queries Switch is a component to
|
|
1
|
+
{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { HistoryQuery } from '@empathyco/x-types';\n import BaseSwitch from '../../../components/base-switch.vue';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import { isArrayEmpty } from '../../../utils/array';\n\n /**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(historyQueriesXModule)],\n components: { BaseSwitch }\n })\n export default class HistoryQueriesSwitch extends Vue {\n /**\n * A boolean with the isEnabled value coming from the store state.\n *\n * @internal\n */\n @State('historyQueries', 'isEnabled')\n public isEnabled!: boolean;\n\n /**\n * The history queries from the state.\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * Checks if there are history queries.\n *\n * @returns True if there are history queries; false otherwise.\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n\n /**\n * Emits an event based on the switch state.\n *\n * @internal\n */\n protected toggle(): void {\n this.$x.emit(\n this.isEnabled\n ? this.hasHistoryQueries\n ? 'UserClickedDisableHistoryQueries'\n : 'UserClickedConfirmDisableHistoryQueries'\n : 'UserClickedEnableHistoryQueries'\n );\n }\n }\n"],"names":["BaseSwitch"],"mappings":";;;;;;;;;AAcE;;;;;AAKG;AAKY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,GAAG,CAAA;AAenD;;;;AAIG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;AAED;;;;AAIG;IACO,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,SAAS;cACV,IAAI,CAAC,iBAAiB;AACtB,kBAAE,kCAAkC;AACpC,kBAAE,yCAAyC;cAC3C,iCAAiC,CACtC,CAAC;KACH;CACF,CAAA;AA/BC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC;AACV,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM3B,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;AACH,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAbpB,oBAAoB,GAAA,UAAA,CAAA;AAJxC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;QAChD,UAAU,EAAE,cAAEA,iBAAU,EAAE;KAC3B,CAAC;AACmB,CAAA,EAAA,oBAAoB,CAsCxC,CAAA;aAtCoB,oBAAoB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * Determines if a group is added to the injected items list in case the number\n * of items is smaller than the offset.\n *\n * @public\n */\n @Prop({ default: false })\n public showOnlyAfterOffset!: boolean;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * Indicates if there are more available results than the injected.\n */\n @XInject(HAS_MORE_ITEMS_KEY)\n public hasMoreItems!: boolean;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n if (this.hasNotEnoughListItems) {\n return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n\n /**\n * Checks if the number of items is smaller than the offset so a group\n * should be added to the injected items list.\n *\n * @returns True if a group should be added, false if not.\n * @internal\n */\n protected get hasNotEnoughListItems(): boolean {\n return (\n !this.showOnlyAfterOffset &&\n !this.hasMoreItems &&\n this.injectedListItems !== undefined &&\n this.injectedListItems.length > 0 &&\n this.offset > this.injectedListItems.length\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be disabled setting the `showOnlyAfterOffset` to `true`.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"1\"\n :showOnlyAfterOffset=\"true\"\n />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n import { XInject } from '../../../components/decorators/injection.decorators';\n import { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * Determines if a group is added to the injected items list in case the number\n * of items is smaller than the offset.\n *\n * @public\n */\n @Prop({ default: false })\n public showOnlyAfterOffset!: boolean;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * Injected query, updated when the related request(s) have succeeded.\n */\n @XInject(QUERY_KEY)\n public injectedQuery!: string | undefined;\n\n /**\n * Indicates if there are more available results than the injected.\n */\n @XInject(HAS_MORE_ITEMS_KEY)\n public hasMoreItems!: boolean;\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n if (this.nextQueriesAreOutdated) {\n return this.injectedListItems;\n }\n if (this.hasNotEnoughListItems) {\n return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n }\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n\n /**\n * Checks if the next queries are outdated taking into account the injected query.\n *\n * @returns True if the next queries are outdated, false if not.\n * @internal\n */\n protected get nextQueriesAreOutdated(): boolean {\n return (\n !!this.injectedQuery &&\n (this.$x.query.nextQueries !== this.injectedQuery ||\n this.$x.status.nextQueries !== 'success')\n );\n }\n\n /**\n * Checks if the number of items is smaller than the offset so a group\n * should be added to the injected items list.\n *\n * @returns True if a group should be added, false if not.\n * @internal\n */\n protected get hasNotEnoughListItems(): boolean {\n return (\n !this.showOnlyAfterOffset &&\n !this.hasMoreItems &&\n this.injectedListItems !== undefined &&\n this.injectedListItems.length > 0 &&\n this.offset > this.injectedListItems.length\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"1\"\n :showOnlyAfterOffset=\"true\"\n />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n /* eslint-disable max-len */\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows to
|
|
1
|
+
{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n /* eslint-disable max-len */\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows you to activate or deactivate the session id management through the `consent` prop.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(taggingXModule)]\n })\n export default class Tagging extends Vue {\n /**\n * The TTL in milliseconds for storing the clicked result info.\n *\n * @public\n */\n @Prop({ default: 30000 })\n public clickedResultStorageTTLMs!: number;\n\n /**\n * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n * that will be used as id for the storage. By default, the Result url will be used.\n *\n * @public\n */\n @Prop({ default: 'url' })\n public clickedResultStorageKey!: string;\n\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n protected snippetConfig?: SnippetConfig;\n\n /**\n * The session TTL in milliseconds.\n *\n * @internal\n */\n @Prop()\n public sessionTTLMs: number | undefined;\n\n /**\n * The debounce time in milliseconds to track the query.\n *\n * @internal\n */\n @Prop()\n public queryTaggingDebounceMs: number | undefined;\n\n /**\n * The consent to be emitted.\n *\n * @public\n */\n @Prop()\n protected consent?: boolean;\n\n /**\n * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n * property. False by default.\n *\n * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n * false.\n *\n * @returns A boolean that represents if the consent is accepted or not.\n */\n @XEmit('ConsentProvided')\n public get activeConsent(): boolean {\n return this.consent ?? this.snippetConfig?.consent ?? false;\n }\n\n @XEmit('TaggingConfigProvided')\n public get config(): TaggingConfig {\n return {\n queryTaggingDebounceMs: this.queryTaggingDebounceMs as number,\n sessionTTLMs: this.sessionTTLMs as number,\n clickedResultStorageTTLMs: this.clickedResultStorageTTLMs,\n clickedResultStorageKey: this.clickedResultStorageKey\n };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n\n /**\n * To emit the event that PDP is loaded just when the snippet config includes a product id.\n */\n created(): void {\n this.emitEvents();\n }\n\n /**\n * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n * a product id.\n *\n * @internal\n */\n protected emitEvents(): void {\n if (this.snippetConfig?.productId) {\n this.$x.emit('PDPIsLoaded', this.snippetConfig.productId);\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n <Tagging />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n import { Tagging } from '@empathyco/x-components/tagging';\n\n export default {\n name: 'TaggingDemo',\n components: {\n Tagging\n }\n };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,7 +9,7 @@ import { taggingXModule } from '../x-module.js';
|
|
|
9
9
|
/**
|
|
10
10
|
* This component enables and manages the sending of information to the
|
|
11
11
|
* [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
|
|
12
|
-
* It allows to
|
|
12
|
+
* It allows you to activate or deactivate the session id management through the `consent` prop.
|
|
13
13
|
*
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagging.vue2.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n /* eslint-disable max-len */\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows to
|
|
1
|
+
{"version":3,"file":"tagging.vue2.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { taggingXModule } from '../x-module';\n import { TaggingConfig } from '../config.types';\n /* eslint-disable max-len */\n /**\n * This component enables and manages the sending of information to the\n * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n * It allows you to activate or deactivate the session id management through the `consent` prop.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(taggingXModule)]\n })\n export default class Tagging extends Vue {\n /**\n * The TTL in milliseconds for storing the clicked result info.\n *\n * @public\n */\n @Prop({ default: 30000 })\n public clickedResultStorageTTLMs!: number;\n\n /**\n * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n * that will be used as id for the storage. By default, the Result url will be used.\n *\n * @public\n */\n @Prop({ default: 'url' })\n public clickedResultStorageKey!: string;\n\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n protected snippetConfig?: SnippetConfig;\n\n /**\n * The session TTL in milliseconds.\n *\n * @internal\n */\n @Prop()\n public sessionTTLMs: number | undefined;\n\n /**\n * The debounce time in milliseconds to track the query.\n *\n * @internal\n */\n @Prop()\n public queryTaggingDebounceMs: number | undefined;\n\n /**\n * The consent to be emitted.\n *\n * @public\n */\n @Prop()\n protected consent?: boolean;\n\n /**\n * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n * property. False by default.\n *\n * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n * false.\n *\n * @returns A boolean that represents if the consent is accepted or not.\n */\n @XEmit('ConsentProvided')\n public get activeConsent(): boolean {\n return this.consent ?? this.snippetConfig?.consent ?? false;\n }\n\n @XEmit('TaggingConfigProvided')\n public get config(): TaggingConfig {\n return {\n queryTaggingDebounceMs: this.queryTaggingDebounceMs as number,\n sessionTTLMs: this.sessionTTLMs as number,\n clickedResultStorageTTLMs: this.clickedResultStorageTTLMs,\n clickedResultStorageKey: this.clickedResultStorageKey\n };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n render(): void {}\n\n /**\n * To emit the event that PDP is loaded just when the snippet config includes a product id.\n */\n created(): void {\n this.emitEvents();\n }\n\n /**\n * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n * a product id.\n *\n * @internal\n */\n protected emitEvents(): void {\n if (this.snippetConfig?.productId) {\n this.$x.emit('PDPIsLoaded', this.snippetConfig.productId);\n }\n }\n }\n"],"names":[],"mappings":";;;;;;;AAQE;AACA;;;;;;AAMG;AAIY,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,GAAG,CAAA;AAkDtC;;;;;;;;AAQG;AAEH,IAAA,IAAW,aAAa,GAAA;QACtB,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,OAAO,IAAI,KAAK,CAAC;KAC7D;AAGD,IAAA,IAAW,MAAM,GAAA;QACf,OAAO;YACL,sBAAsB,EAAE,IAAI,CAAC,sBAAgC;YAC7D,YAAY,EAAE,IAAI,CAAC,YAAsB;YACzC,yBAAyB,EAAE,IAAI,CAAC,yBAAyB;YACzD,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;SACtD,CAAC;KACH;;AAGD,IAAA,MAAM,MAAW;AAEjB;;AAEG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;AAED;;;;;AAKG;IACO,UAAU,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE;AACjC,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;AAC3D,SAAA;KACF;CACF,CAAA;AAxFC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,2BAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS1C,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACe,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQxC,UAAA,CAAA;IADC,MAAM,CAAC,eAAe,CAAC;AACgB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQxC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACiC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQxC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AAC2C,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQlD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACqB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAY5B,UAAA,CAAA;IADC,KAAK,CAAC,iBAAiB,CAAC;AAGxB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,eAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,uBAAuB,CAAC;AAQ9B,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAxEkB,OAAO,GAAA,UAAA,CAAA;AAH3B,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;AACmB,CAAA,EAAA,OAAO,CA+F3B,CAAA;aA/FoB,OAAO;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "4.1.0-alpha.
|
|
3
|
+
"version": "4.1.0-alpha.27",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"access": "public",
|
|
144
144
|
"directory": "dist"
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "34ad28181d032d9fe74fa7a47e0ca9aea44f1e85"
|
|
147
147
|
}
|
|
@@ -26863,7 +26863,7 @@
|
|
|
26863
26863
|
{
|
|
26864
26864
|
"kind": "Class",
|
|
26865
26865
|
"canonicalReference": "@empathyco/x-components!HistoryQueriesSwitch:class",
|
|
26866
|
-
"docComment": "/**\n * History Queries Switch is a component to
|
|
26866
|
+
"docComment": "/**\n * History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\n",
|
|
26867
26867
|
"excerptTokens": [
|
|
26868
26868
|
{
|
|
26869
26869
|
"kind": "Content",
|
|
@@ -45295,7 +45295,7 @@
|
|
|
45295
45295
|
{
|
|
45296
45296
|
"kind": "Class",
|
|
45297
45297
|
"canonicalReference": "@empathyco/x-components!RenderlessFilter:class",
|
|
45298
|
-
"docComment": "/**\n * Renders default slot content. It binds to the default slot a {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent} that will be emitted when clicking the content, the css classes and if the content should be
|
|
45298
|
+
"docComment": "/**\n * Renders default slot content. It binds to the default slot a {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent} that will be emitted when clicking the content, the css classes and if the content should be deactivated.\n *\n * @remarks\n *\n * The default slot expects a root element, if it receives a list of elements, it will renders the first element.\n *\n * @public\n */\n",
|
|
45299
45299
|
"excerptTokens": [
|
|
45300
45300
|
{
|
|
45301
45301
|
"kind": "Content",
|
|
@@ -60023,7 +60023,7 @@
|
|
|
60023
60023
|
{
|
|
60024
60024
|
"kind": "Class",
|
|
60025
60025
|
"canonicalReference": "@empathyco/x-components!Tagging:class",
|
|
60026
|
-
"docComment": "/**\n * This component enables and manages the sending of information to the [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows to
|
|
60026
|
+
"docComment": "/**\n * This component enables and manages the sending of information to the [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows you to activate or deactivate the session id management through the `consent` prop.\n *\n * @public\n */\n",
|
|
60027
60027
|
"excerptTokens": [
|
|
60028
60028
|
{
|
|
60029
60029
|
"kind": "Content",
|
|
@@ -63832,7 +63832,7 @@
|
|
|
63832
63832
|
},
|
|
63833
63833
|
{
|
|
63834
63834
|
"kind": "Content",
|
|
63835
|
-
"text": ", defaultValue
|
|
63835
|
+
"text": ", defaultValue: "
|
|
63836
63836
|
},
|
|
63837
63837
|
{
|
|
63838
63838
|
"kind": "Content",
|
|
@@ -63842,14 +63842,9 @@
|
|
|
63842
63842
|
"kind": "Content",
|
|
63843
63843
|
"text": "): "
|
|
63844
63844
|
},
|
|
63845
|
-
{
|
|
63846
|
-
"kind": "Reference",
|
|
63847
|
-
"text": "ComputedRef",
|
|
63848
|
-
"canonicalReference": "vue!ComputedRef:interface"
|
|
63849
|
-
},
|
|
63850
63845
|
{
|
|
63851
63846
|
"kind": "Content",
|
|
63852
|
-
"text": "
|
|
63847
|
+
"text": "SomeValue"
|
|
63853
63848
|
},
|
|
63854
63849
|
{
|
|
63855
63850
|
"kind": "Content",
|
|
@@ -63859,7 +63854,7 @@
|
|
|
63859
63854
|
"fileUrlPath": "src/composables/use-hybrid-inject.ts",
|
|
63860
63855
|
"returnTypeTokenRange": {
|
|
63861
63856
|
"startIndex": 5,
|
|
63862
|
-
"endIndex":
|
|
63857
|
+
"endIndex": 6
|
|
63863
63858
|
},
|
|
63864
63859
|
"releaseTag": "Public",
|
|
63865
63860
|
"overloadIndex": 1,
|
|
@@ -63878,7 +63873,65 @@
|
|
|
63878
63873
|
"startIndex": 3,
|
|
63879
63874
|
"endIndex": 4
|
|
63880
63875
|
},
|
|
63881
|
-
"isOptional":
|
|
63876
|
+
"isOptional": false
|
|
63877
|
+
}
|
|
63878
|
+
],
|
|
63879
|
+
"typeParameters": [
|
|
63880
|
+
{
|
|
63881
|
+
"typeParameterName": "SomeValue",
|
|
63882
|
+
"constraintTokenRange": {
|
|
63883
|
+
"startIndex": 0,
|
|
63884
|
+
"endIndex": 0
|
|
63885
|
+
},
|
|
63886
|
+
"defaultTypeTokenRange": {
|
|
63887
|
+
"startIndex": 0,
|
|
63888
|
+
"endIndex": 0
|
|
63889
|
+
}
|
|
63890
|
+
}
|
|
63891
|
+
],
|
|
63892
|
+
"name": "useHybridInject"
|
|
63893
|
+
},
|
|
63894
|
+
{
|
|
63895
|
+
"kind": "Function",
|
|
63896
|
+
"canonicalReference": "@empathyco/x-components!useHybridInject:function(2)",
|
|
63897
|
+
"docComment": "/**\n * @public\n */\n",
|
|
63898
|
+
"excerptTokens": [
|
|
63899
|
+
{
|
|
63900
|
+
"kind": "Content",
|
|
63901
|
+
"text": "export declare function useHybridInject<SomeValue>(key: "
|
|
63902
|
+
},
|
|
63903
|
+
{
|
|
63904
|
+
"kind": "Content",
|
|
63905
|
+
"text": "string"
|
|
63906
|
+
},
|
|
63907
|
+
{
|
|
63908
|
+
"kind": "Content",
|
|
63909
|
+
"text": "): "
|
|
63910
|
+
},
|
|
63911
|
+
{
|
|
63912
|
+
"kind": "Content",
|
|
63913
|
+
"text": "SomeValue | undefined"
|
|
63914
|
+
},
|
|
63915
|
+
{
|
|
63916
|
+
"kind": "Content",
|
|
63917
|
+
"text": ";"
|
|
63918
|
+
}
|
|
63919
|
+
],
|
|
63920
|
+
"fileUrlPath": "src/composables/use-hybrid-inject.ts",
|
|
63921
|
+
"returnTypeTokenRange": {
|
|
63922
|
+
"startIndex": 3,
|
|
63923
|
+
"endIndex": 4
|
|
63924
|
+
},
|
|
63925
|
+
"releaseTag": "Public",
|
|
63926
|
+
"overloadIndex": 2,
|
|
63927
|
+
"parameters": [
|
|
63928
|
+
{
|
|
63929
|
+
"parameterName": "key",
|
|
63930
|
+
"parameterTypeTokenRange": {
|
|
63931
|
+
"startIndex": 1,
|
|
63932
|
+
"endIndex": 2
|
|
63933
|
+
},
|
|
63934
|
+
"isOptional": false
|
|
63882
63935
|
}
|
|
63883
63936
|
],
|
|
63884
63937
|
"typeParameters": [
|
|
@@ -6188,7 +6188,10 @@ export function useEmitDisplayEvent({ element, taggingRequest, eventMetadata }:
|
|
|
6188
6188
|
export function useGetter<Module extends XModuleName, GetterName extends keyof ExtractGetters<Module> & string>(module: Module, getters: GetterName[]): Dictionary<ComputedRef<GetterName[]>>;
|
|
6189
6189
|
|
|
6190
6190
|
// @public
|
|
6191
|
-
export function useHybridInject<SomeValue>(key: string, defaultValue
|
|
6191
|
+
export function useHybridInject<SomeValue>(key: string, defaultValue: SomeValue): SomeValue;
|
|
6192
|
+
|
|
6193
|
+
// @public (undocumented)
|
|
6194
|
+
export function useHybridInject<SomeValue>(key: string): SomeValue | undefined;
|
|
6192
6195
|
|
|
6193
6196
|
// @public
|
|
6194
6197
|
export function useNoElementRender(slots: {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ComputedRef } from 'vue';
|
|
2
1
|
/**
|
|
3
2
|
* Function to use a hybrid inject, which allows to inject a value provided by the regular provide
|
|
4
3
|
* of vue or by the XProvide decorator.
|
|
@@ -8,5 +7,7 @@ import { ComputedRef } from 'vue';
|
|
|
8
7
|
* @returns The computed value of the injected value.
|
|
9
8
|
* @public
|
|
10
9
|
*/
|
|
11
|
-
export declare function useHybridInject<SomeValue>(key: string, defaultValue
|
|
10
|
+
export declare function useHybridInject<SomeValue>(key: string, defaultValue: SomeValue): SomeValue;
|
|
11
|
+
/** @public */
|
|
12
|
+
export declare function useHybridInject<SomeValue>(key: string): SomeValue | undefined;
|
|
12
13
|
//# sourceMappingURL=use-hybrid-inject.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hybrid-inject.d.ts","sourceRoot":"","sources":["../../../src/composables/use-hybrid-inject.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-hybrid-inject.d.ts","sourceRoot":"","sources":["../../../src/composables/use-hybrid-inject.ts"],"names":[],"mappings":"AAiCA;;;;;;;;GAQG;AAEH,wBAAgB,eAAe,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,GAAG,SAAS,CAAC;AAC5F,cAAc;AACd,wBAAgB,eAAe,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { XEventsTypes } from '../../../../wiring/events.types';
|
|
|
6
6
|
* Renders default slot content. It binds to the default slot a
|
|
7
7
|
* {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}
|
|
8
8
|
* that will be emitted when clicking the content, the css classes and if the content should be
|
|
9
|
-
*
|
|
9
|
+
* deactivated.
|
|
10
10
|
*
|
|
11
11
|
* @remarks The default slot expects a root element, if it receives a list of elements, it will
|
|
12
12
|
* renders the first element.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
2
|
import { HistoryQuery } from '@empathyco/x-types';
|
|
3
3
|
/**
|
|
4
|
-
* History Queries Switch is a component to
|
|
4
|
+
* History Queries Switch is a component to activate or deactivate the history queries.
|
|
5
5
|
* This component emits events depending on the `isEnabled` value.
|
|
6
6
|
*
|
|
7
7
|
* @public
|
|
@@ -4,7 +4,7 @@ import { TaggingConfig } from '../config.types';
|
|
|
4
4
|
/**
|
|
5
5
|
* This component enables and manages the sending of information to the
|
|
6
6
|
* [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
|
|
7
|
-
* It allows to
|
|
7
|
+
* It allows you to activate or deactivate the session id management through the `consent` prop.
|
|
8
8
|
*
|
|
9
9
|
* @public
|
|
10
10
|
*/
|