@empathyco/x-components 3.0.0-alpha.82 → 3.0.0-alpha.85

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.85](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.84...@empathyco/x-components@3.0.0-alpha.85) (2022-04-14)
+
+### Features
+
+- extract SessionService to x-utils package
+  ([5268808](https://github.com/empathyco/x/commit/52688087e577dfd7ce9b0669b21ada75ae67053c))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.84](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.83...@empathyco/x-components@3.0.0-alpha.84) (2022-04-07)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.83](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.82...@empathyco/x-components@3.0.0-alpha.83) (2022-04-07)
+
+### Code Refactoring
+
+- move DeepPartial type from x-components to x-utils
+  ([a26f0c5](https://github.com/empathyco/x/commit/a26f0c54317f17144b4262c60b0a0dc086883eb9)),
+  closes [EX-5835](https://searchbroker.atlassian.net/browse/EX-5835)
+
+### Documentation
+
+- activating ready live-examples
+  ([953e6c2](https://github.com/empathyco/x/commit/953e6c2ead73cd464fbb861bcc917134eac478a1)),
+  closes [EX-5705](https://searchbroker.atlassian.net/browse/EX-5705)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.82](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.81...@empathyco/x-components@3.0.0-alpha.82) (2022-04-05)
 
 **Note:** Version bump only for package @empathyco/x-components

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -6234,70 +6234,6 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
-.x-shadow--none {
-  box-shadow: none !important;
-}
-
-.x-shadow--01 {
-  box-shadow: var(--x-string-box-shadow-01) !important;
-}
-.x-shadow--bottom-01 {
-  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
-}
-.x-shadow--02 {
-  box-shadow: var(--x-string-box-shadow-02) !important;
-}
-.x-shadow--bottom-02 {
-  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
-}
-.x-shadow--03 {
-  box-shadow: var(--x-string-box-shadow-03) !important;
-}
-.x-shadow--bottom-03 {
-  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
-}
-.x-shadow--04 {
-  box-shadow: var(--x-string-box-shadow-04) !important;
-}
-.x-shadow--bottom-04 {
-  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
-}
-.x-shadow--05 {
-  box-shadow: var(--x-string-box-shadow-05) !important;
-}
-.x-shadow--bottom-05 {
-  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
-}
-.x-shadow--06 {
-  box-shadow: var(--x-string-box-shadow-06) !important;
-}
-.x-shadow--bottom-06 {
-  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
-}
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
-}
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
-}
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
-}
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
-}
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
-}
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
-}
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
-}
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
-}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -6464,6 +6400,70 @@
 .x-font-color--transparent {
   color: var(--x-color-base-transparent) !important;
 }
+.x-shadow--none {
+  box-shadow: none !important;
+}
+
+.x-shadow--01 {
+  box-shadow: var(--x-string-box-shadow-01) !important;
+}
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
+}
+.x-shadow--02 {
+  box-shadow: var(--x-string-box-shadow-02) !important;
+}
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
+}
+.x-shadow--03 {
+  box-shadow: var(--x-string-box-shadow-03) !important;
+}
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
+}
+.x-shadow--04 {
+  box-shadow: var(--x-string-box-shadow-04) !important;
+}
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
+}
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
+}
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
+}
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
+}
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
+}
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
+}
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+}
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
+}
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+}
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
+}
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+}
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
+}
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;

package/docs/API-reference/api/x-components.md

@@ -58,7 +58,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slo. The transition fades between the two toggled elements at the same time. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
-|  [DefaultSessionService](./x-components.defaultsessionservice.md) | Default implementation for the [SessionService](./x-components.sessionservice.md)<!-- -->. |
 |  [DeviceDetector](./x-components.devicedetector.md) | This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
 |  [DirectionalFocusNavigationService](./x-components.directionalfocusnavigationservice.md) | Implementation of [SpatialNavigation](./x-components.spatialnavigation.md) using directional focus. |
 |  [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md) | Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.<!-- -->It provides a default slot, with some utils bind, to customize the whole component; and two named slots <code>apply-content</code> and <code>clear-content</code> to override each button content.<!-- -->If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.<!-- -->If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default. |
@@ -302,7 +301,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SearchMutations](./x-components.searchmutations.md) | Search store mutations. |
 |  [SearchState](./x-components.searchstate.md) | Search store state. |
 |  [SearchXEvents](./x-components.searchxevents.md) | Dictionary of the events of Search XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
-|  [SessionService](./x-components.sessionservice.md) | Service to manage the session id. |
 |  [SnippetConfig](./x-components.snippetconfig.md) | Interface with the possible parameters to receive through the snippet integration. |
 |  [SpatialNavigation](./x-components.spatialnavigation.md) | Interface for SpatialNavigation services based on [CSSWK specification](https://www.w3.org/TR/css-nav-1/)<!-- -->. |
 |  [StateSelector](./x-components.stateselector.md) | Composition type of [SimpleStateSelector](./x-components.simplestateselector.md) which allows to indicate if the state selector should be executed in first instance (first assignment of values). Selector is the [SimpleStateSelector](./x-components.simplestateselector.md) and immediate flags if the selector should be executed when it is initialized for first time. |
@@ -575,7 +573,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [AnyXStoreModuleOption](./x-components.anyxstoremoduleoption.md) | Alias for any store module option. Use only when you don't care about the module concrete type. |
 |  [ArrowKey](./x-components.arrowkey.md) | Union type containing the existing arrow keys. |
 |  [DecoratorFor](./x-components.decoratorfor.md) | Creates a decorator that will only work for properties of the type passed. The decorator will only work if the property is public. |
-|  [DeepPartial](./x-components.deeppartial.md) | Makes all the properties of the T type optional in depth. |
 |  [DeviceXModule](./x-components.devicexmodule.md) | Device [XModule](./x-components.xmodule.md) alias. |
 |  [DeviceXStoreModule](./x-components.devicexstoremodule.md) | Device type safe store module. |
 |  [DocumentDirection](./x-components.documentdirection.md) | The HTML document direction orientation. Possible values: ltr (left to right) or rtl (right to left). |

package/docs/API-reference/api/x-components.xmoduleoptions.md

@@ -16,6 +16,6 @@ export interface XModuleOptions<ModuleName extends XModuleName>
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [config?](./x-components.xmoduleoptions.config.md) | [DeepPartial](./x-components.deeppartial.md)<!-- -->&lt;[ExtractState](./x-components.extractstate.md)<!-- -->&lt;ModuleName&gt; extends { config: infer Config; } ? Config : never&gt; | <i>(Optional)</i> The options to override the default config state for the module. |
+|  [config?](./x-components.xmoduleoptions.config.md) | DeepPartial&lt;[ExtractState](./x-components.extractstate.md)<!-- -->&lt;ModuleName&gt; extends { config: infer Config; } ? Config : never&gt; | <i>(Optional)</i> The options to override the default config state for the module. |
 |  [wiring?](./x-components.xmoduleoptions.wiring.md) | Partial&lt;[Wiring](./x-components.wiring.md)<!-- -->&gt; | <i>(Optional)</i> The options to override the default wiring configuration for the module. |
 

package/docs/API-reference/api/x-components.xstoremoduleoptions.md

@@ -16,5 +16,5 @@ export declare type XStoreModuleOptions<StoreModule extends AnyXStoreModule> = S
     mutations?: DeepPartial<MutationsTree<State, Mutations>>;
 } : never;
 ```
-<b>References:</b> [AnyXStoreModule](./x-components.anyxstoremodule.md)<!-- -->, [XStoreModule](./x-components.xstoremodule.md)<!-- -->, [DeepPartial](./x-components.deeppartial.md)<!-- -->, [ActionsTree](./x-components.actionstree.md)<!-- -->, [GettersTree](./x-components.getterstree.md)<!-- -->, [MutationsTree](./x-components.mutationstree.md)
+<b>References:</b> [AnyXStoreModule](./x-components.anyxstoremodule.md)<!-- -->, [XStoreModule](./x-components.xstoremodule.md)<!-- -->, [ActionsTree](./x-components.actionstree.md)<!-- -->, [GettersTree](./x-components.getterstree.md)<!-- -->, [MutationsTree](./x-components.mutationstree.md)
 

package/docs/API-reference/components/history-queries/x-components.clear-history-queries.md

@@ -22,10 +22,35 @@ intention to clear the whole history of queries.
 
 The component exposes a single default slot, where you can add icons or text.
 
-```vue
-<ClearHistoryQueries>
-  <img class="x-history-query__icon" src="./my-icon.svg"/>
-</ClearHistoryQueries>
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>
+    <HistoryQueries :animation="'FadeAndSlide'" :maxItemsToRender="10" />
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import {
+  HistoryQueries,
+  ClearHistoryQueries
+} from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
+export default {
+  name: "ClearHistoryQueriesDemo",
+  components: {
+    SearchInput,
+    HistoryQueries,
+    ClearHistoryQueries
+  }
+};
+</script>
 ```
 
 ## Events

package/docs/API-reference/components/history-queries/x-components.history-queries.md

@@ -35,17 +35,22 @@ This component doesn't emit events.
 
 Here you have a basic example of how the HistoryQueries is rendered.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries />
+  <div>
+    <SearchInput />
+    <HistoryQueries />
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -57,17 +62,22 @@ export default {
 In this example, the history queries have been limited to render a maximum of 10 queries (by default
 it is 5).
 
-```vue
+```vue live
 <template>
-  <HistoryQueries :maxItemsToRender="10" />
+  <div>
+    <SearchInput />
+    <HistoryQueries :maxItemsToRender="10" />
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -76,24 +86,27 @@ export default {
 
 ### Play with the animation
 
-```vue
+```vue live
 <template>
-  <HistoryQueries :animation="fadeAndSlide" />
+  <div>
+    <SearchInput />
+    <HistoryQueries :animation="'FadeAndSlide'" />
+  </div>
 </template>
 
 <script>
+import Vue from "vue";
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 import { FadeAndSlide } from "@empathyco/x-components";
 
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
-  },
-  data() {
-    return {
-      fadeAndSlide: FadeAndSlide
-    };
   }
 };
 </script>
@@ -104,14 +117,18 @@ export default {
 In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
 `suggestion` slot (although any other component could potentially be passed).
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion="{ suggestion }">
-    <HistoryQuery :suggestion="suggestion"></HistoryQuery>
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion="{ suggestion }">
+      <HistoryQuery :suggestion="suggestion" />
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import {
   HistoryQueries,
   HistoryQuery
@@ -120,6 +137,7 @@ import {
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries,
     HistoryQuery
   }
@@ -133,19 +151,24 @@ To continue the previous example, the [`HistoryQuery`](./x-components.history-qu
 passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
 passed.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion-content="{ suggestion }">
-    <span>{{ suggestion.query }}</span>
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion-content="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -158,20 +181,25 @@ To continue the previous example, the [`HistoryQuery`](./x-components.history-qu
 passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
 icon to remove the history query.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion-content-remove="{ suggestion }">
-    <CrossIcon />
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion-remove-content="{ suggestion }">
+      <CrossIcon />
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 import { CrossIcon } from "@empathyco/x-components";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries,
     CrossIcon
   }

package/docs/API-reference/components/history-queries/x-components.history-query.md

@@ -29,8 +29,29 @@ history queries.
 
 This component only requires a prop called `suggestion`
 
-```vue
-<HistoryQuery :suggestion="historyQuery" />
+```vue live
+<template>
+  <HistoryQuery :suggestion="suggestion" />
+</template>
+
+<script>
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueryDemo",
+  components: {
+    HistoryQuery
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "HistoryQuery",
+        query: "trousers",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Customizing slots content
@@ -43,18 +64,47 @@ the suggestion itself, and a `string` of HTML with the matched query.
 The other slot is called `remove-button-content`, and allows you to set the content of the button
 that serves to remove this query from the history. This slot only has one property, the suggestion.
 
-````vue
-<HistoryQuery :suggestion="historyQuery">
-  <template #default="{ suggestion, queryHTML }">
-    <img class="x-history-query__history-icon" src="./history-icon.svg"/>
-    <span class="x-history-query__matching-part" v-html="queryHTML"/>
-  </template>
-
-  <template #remove-button-content="{ suggestion }">
-    <img class="x-history-query__remove-icon" src="./remove-icon.svg"/>
-  </template>
-</HistoryQuery>
-``` ## Events A list of events that the component will emit: -
-`UserSelectedAHistoryQuery`: the event is emitted after the user clicks the
-button. The event payload is the history query data.
-````
+```vue live
+<template>
+  <HistoryQuery :suggestion="suggestion">
+    <template #default="{ suggestion, queryHTML }">
+      <HistoryIcon />
+      <span class="x-history-query__matching-part" v-html="queryHTML" />
+    </template>
+
+    <template #remove-button-content="{ suggestion }">
+      <CrossIcon />
+    </template>
+  </HistoryQuery>
+</template>
+
+<script>
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { HistoryIcon, CrossIcon } from "@empathyco/x-components";
+
+export default {
+  name: "HistoryQueryDemo",
+  components: {
+    HistoryQuery,
+    HistoryIcon,
+    CrossIcon
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "HistoryQuery",
+        query: "trousers",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```
+
+## Events
+
+A list of events that the component will emit:
+
+- `UserSelectedAHistoryQuery`: the event is emitted after the user clicks the button. The event
+  payload is the history query data.

package/docs/API-reference/components/next-queries/x-components.next-queries-list.md

@@ -42,7 +42,7 @@ Usually, this component is going to be used together with the `ResultsList` one.
 will be inserted between the results, guiding users to discover new searches directly from the
 results list.
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -77,7 +77,7 @@ Finally, a third group will be inserted at index `192`. Because `maxGroups` is c
 more groups will be inserted. Each one of this groups will have up to `6` next queries
 (`maxNextQueriesPerGroup`).
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />