@empathyco/x-components 6.0.0-alpha.63 → 6.0.0-alpha.64

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

@@ -10,7 +10,7 @@ The `FallbackDisclaimer` component shows a message if the filters have been remo
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    query: import("vue").ComputedRef<any>;
-    fromNoResultsWithFilters: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
+    fromNoResultsWithFilters: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -11,6 +11,6 @@ History Queries Switch is a component to activate or deactivate the history quer
 ```typescript
 _default: import("vue").DefineComponent<{}, {
     toggle: () => void;
-    isEnabled: import("vue").ComputedRef<any>;
+    isEnabled: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -15,7 +15,7 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    query: ComputedRef<any>;
+    query: ComputedRef<string>;
     highlightedQueryHTML: ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     result: {

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

@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
     };
     maxItemsToRender: NumberConstructor;
 }, {
-    identifierResults: import("vue").ComputedRef<any>;
+    identifierResults: import("vue").ComputedRef<Result[]>;
     identifierResultsToRender: import("vue").ComputedRef<Result[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {

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

@@ -90,7 +90,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [useGetter(module, getters)](./x-components.usegetter.md) | Function which returns the requested getters as a dictionary of getters. |
 |  [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. |
 |  [useScroll(props, { emit }, scrollEl)](./x-components.usescroll.md) | Composable to share Scroll logic. |
-|  [useState(module, paths)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. |
+|  [useState(module)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. |
 |  [useXBus()](./x-components.usexbus.md) | Composable which injects the current location, returns the <code>on</code> and <code>emit</code> functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted. |
 |  [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated. |

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

@@ -22,7 +22,7 @@ _default: import("vue").DefineComponent<{
 }, {
     hasHistoryQueries: import("vue").ComputedRef<boolean>;
     groupByDate: import("vue").ComputedRef<Dictionary<HistoryQueryType[]>>;
-    historyQueries: import("vue").ComputedRef<any>;
+    historyQueries: import("vue").ComputedRef<HistoryQueryType[]>;
     formatTime: (timestamp: number) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {

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

@@ -19,7 +19,7 @@ _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
-    partialResults: ComputedRef<PartialResult[]>;
+    partialResults: import("vue").ComputedRef<import("@empathyco/x-types").PartialResult[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -29,8 +29,8 @@ _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    hasResults: ComputedRef<boolean>;
-    queryPreviewResults: ComputedRef<{
+    hasResults: import("vue").ComputedRef<boolean>;
+    queryPreviewResults: import("vue").ComputedRef<{
         results: import("@empathyco/x-types").Result[];
         request: SearchRequest;
         displayTagging?: import("@empathyco/x-types").TaggingRequest | undefined;

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

@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
     };
     maxItemsToRender: NumberConstructor;
 }, {
-    recommendations: ComputedRef<Result[]>;
+    recommendations: import("vue").ComputedRef<Result[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -29,8 +29,8 @@ _default: import("vue").DefineComponent<{
     onBeforeEnter: (el: Element) => void;
     onEnter: (el: Element, done: () => void) => void;
     onLeave: (el: Element, done: () => void) => void;
-    selectedPromptIndex: ComputedRef<number>;
-    visibleRelatedPrompts: ComputedRef<{
+    selectedPromptIndex: import("vue").ComputedRef<number>;
+    visibleRelatedPrompts: import("vue").ComputedRef<{
         index: number;
         relatedPromptNextQueries?: import("@empathyco/x-types").RelatedPromptNextQuery[] | undefined;
         nextQueries: string[];

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

@@ -20,10 +20,10 @@ _default: import("vue").DefineComponent<{
     };
 }, {
     buttonEl: import("vue").Ref<HTMLElement | undefined>;
-    dynamicClasses: ComputedRef<VueCSSClasses>;
-    isSelected: ComputedRef<boolean>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+    isSelected: import("vue").ComputedRef<boolean>;
     clickRelatedTag: () => void;
-    shouldHighlightCurated: ComputedRef<boolean>;
+    shouldHighlightCurated: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     highlightCurated: {
         type: BooleanConstructor;

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

@@ -21,7 +21,7 @@ _default: import("vue").DefineComponent<{
     };
 }, {
     events: import("vue").ComputedRef<Partial<XEventsTypes>>;
-    isVisible: import("vue").ComputedRef<any>;
+    isVisible: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -10,7 +10,7 @@ This component renders a button to submit the query.
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    dynamicClasses: ComputedRef<VueCSSClasses>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
     buttonRef: import("vue").Ref<HTMLElement | null>;
     emitEvents: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>

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

@@ -27,7 +27,7 @@ _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
-    query: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
     inputElement: import("vue").Ref<HTMLInputElement | undefined>;
     emitUserHoveredInSearchBox: () => void;
     emitUserHoveredOutSearchBox: () => void;

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

@@ -10,6 +10,6 @@ Retrieves a list of semantic queries from the state and exposes them in the slot
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    suggestions: ComputedRef<Suggestion[]>;
+    suggestions: import("vue").ComputedRef<import("@empathyco/x-types").SemanticQuery[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -18,7 +18,7 @@ _default: Vue.DefineComponent<{
 }, {
     emitUserClickedASort: (sort: Sort) => void;
     rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any, Vue.ComputedOptions, Vue.MethodOptions, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{}>>, {}, {}> | undefined>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -20,7 +20,7 @@ _default: Vue.DefineComponent<{
     };
 }, {
     listItems: Vue.ComputedRef<SortListItem[]>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -21,7 +21,7 @@ _default: Vue.DefineComponent<{
     buttonClass: StringConstructor;
 }, {
     listItems: Vue.ComputedRef<SortPickerItem[]>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -12,7 +12,7 @@ The component will only render itself if the `spellcheckedQuery` property has va
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    query: import("vue").ComputedRef<any>;
-    spellcheckedQuery: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
+    spellcheckedQuery: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -11,7 +11,7 @@ A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-compo
 ```typescript
 _default: import("vue").DefineComponent<{}, {
     el: import("vue").Ref<HTMLElement | undefined>;
-    spellcheckedQuery: import("vue").ComputedRef<any>;
+    spellcheckedQuery: import("vue").ComputedRef<string>;
     emitEvents: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -9,7 +9,9 @@ Function which returns the requested state's properties as a dictionary.
 **Signature:**
 
 ```typescript
-export declare function useState<Module extends XModuleName, Path extends keyof ExtractState<Module> & string>(module: Module, paths: Path[]): Dictionary<ComputedRef>;
+export declare function useState<Module extends XModuleName, State = ExtractState<Module>>(module: Module): {
+    [P in keyof State]: ComputedRef<State[P]>;
+};
 ```
 
 ## Parameters
@@ -17,11 +19,10 @@ export declare function useState<Module extends XModuleName, Path extends keyof
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  module | Module | The [XModuleName](./x-components.xmodulename.md) of the getter. |
-|  paths | Path\[\] | List of state paths. |
 
 **Returns:**
 
-Dictionary&lt;ComputedRef&gt;
+{ \[P in keyof State\]: ComputedRef&lt;State\[P\]&gt;; }
 
-The requested state properties of the module.
+A dictionary of computed state properties of the module.
 

package/js/composables/use-state.js

@@ -3,20 +3,18 @@ import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested state's properties as a dictionary.
- *
  * @param module - The {@link XModuleName} of the getter.
- * @param paths - List of state paths.
- * @returns The requested state properties of the module.
+ * @returns A dictionary of computed state properties of the module.
  *
  * @public
  */
-function useState(module, paths) {
+function useState(module) {
     const store = useStore();
-    return paths.reduce((stateDictionary, path) => {
-        // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access
-        stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
-        return stateDictionary;
-    }, {});
+    return new Proxy({}, {
+        get(_obj, path) {
+            return computed(() => store?.state.x[module]?.[path]);
+        },
+    });
 }
 
 export { useState };

package/js/composables/use-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef } from 'vue'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from './use-store'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string,\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore()\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path])\n    return stateDictionary\n  }, {})\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;;QAErE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;AACtE,QAAA,OAAO,eAAe,CAAA;KACvB,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}
+{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { ComputedRef } from 'vue'\nimport type { RootXStoreState } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from 'vuex'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n * @param module - The {@link XModuleName} of the getter.\n * @returns A dictionary of computed state properties of the module.\n *\n * @public\n */\nexport function useState<Module extends XModuleName, State = ExtractState<Module>>(\n  module: Module,\n): { [P in keyof State]: ComputedRef<State[P]> } {\n  const store = useStore<RootXStoreState>()\n  return new Proxy({} as { [P in keyof State]: ComputedRef<State[P]> }, {\n    get(_obj, path) {\n      return computed(() => store?.state.x[module]?.[path as keyof ExtractState<Module>])\n    },\n  })\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;AAMG;AACG,SAAU,QAAQ,CACtB,MAAc,EAAA;AAEd,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAmB,CAAA;AACzC,IAAA,OAAO,IAAI,KAAK,CAAC,EAAmD,EAAE;QACpE,GAAG,CAAC,IAAI,EAAE,IAAI,EAAA;AACZ,YAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAkC,CAAC,CAAC,CAAA;SACpF;AACF,KAAA,CAAC,CAAA;AACJ;;;;"}

package/js/x-modules/extra-params/components/extra-params.vue.js

@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
         },
     },
     setup(props) {
-        const params = useState('extraParams', ['params']).params;
+        const params = useState('extraParams').params;
         const $x = use$x();
         $x.emit('ExtraParamsInitialized', { ...props.values });
         $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });

package/js/x-modules/extra-params/components/extra-params.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef, PropType } from 'vue'\nimport { defineComponent, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'ExtraParams',\n  xModule: extraParamsXModule.name,\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params\n    const $x = use$x()\n\n    $x.emit('ExtraParamsInitialized', { ...props.values })\n    $x.emit('ExtraParamsProvided', { ...params.value, ...props.values })\n\n    watch(\n      () => props.values,\n      values => {\n        $x.emit('ExtraParamsProvided', { ...values })\n      },\n      { deep: true },\n    )\n\n    return () => {}\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <ExtraParams :values=\"values\" />\n</template>\n\n<script>\nimport { ExtraParams } from '@empathyco/x-components/extra-params'\n\nexport default {\n  name: 'ExtraParamsDemo',\n  components: {\n    ExtraParams,\n  },\n  data() {\n    return {\n      values: {\n        warehouse: 1234,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAQA;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAK,CAAA;AACjF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAA,CAAA;AACrD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAA,CAAA;QAEnE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,QAAQ,CAAA,CAAA;AAC9C,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA,QAAA,OAAO,MAAO,GAAA,CAAA;KACf;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { defineComponent, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n\nexport default defineComponent({\n  name: 'ExtraParams',\n  xModule: extraParamsXModule.name,\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const params = useState('extraParams').params\n    const $x = use$x()\n\n    $x.emit('ExtraParamsInitialized', { ...props.values })\n    $x.emit('ExtraParamsProvided', { ...params.value, ...props.values })\n\n    watch(\n      () => props.values,\n      values => {\n        $x.emit('ExtraParamsProvided', { ...values })\n      },\n      { deep: true },\n    )\n\n    return () => {}\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n  <ExtraParams :values=\"values\" />\n</template>\n\n<script>\nimport { ExtraParams } from '@empathyco/x-components/extra-params'\n\nexport default {\n  name: 'ExtraParamsDemo',\n  components: {\n    ExtraParams,\n  },\n  data() {\n    return {\n      values: {\n        warehouse: 1234,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAQA;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,MAAK,GAAI,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAK,CAAA;AAC5C,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAA,CAAA;AACrD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAA,CAAA;QAEnE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,QAAQ,CAAA,CAAA;AAC9C,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA,QAAA,OAAO,MAAO,GAAA,CAAA;KACf;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js

@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
     setup(props, { slots }) {
         const xBus = useXBus();
         /** A dictionary with the extra params in the store state. */
-        const stateParams = useState('extraParams', ['params']).params;
+        const stateParams = useState('extraParams').params;
         /** It returns the value of the extra param from the store. */
         const extraParam = computed(() => stateParams.value[props.name]);
         /**

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RenderlessExtraParam',\n  xModule: extraParamsXModule.name,\n  props: {\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** A dictionary with the extra params in the store state. */\n    const stateParams = useState('extraParams', ['params']).params\n\n    /** It returns the value of the extra param from the store. */\n    const extraParam = computed(() => stateParams.value[props.name])\n\n    /**\n     * It sets the new value to the store.\n     *\n     * @param newValue - The new value of the extra param.\n     */\n    function updateValue(newValue: unknown) {\n      xBus.emit('UserChangedExtraParams', { [props.name]: newValue })\n    }\n\n    return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\nimport { RenderlessExtraParams } from '@empathyco/x-components/extra-params'\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'RenderlessExtraParamsDemo',\n  components: {\n    RenderlessExtraParams,\n    BaseDropdown,\n  },\n  props: ['name'],\n  data() {\n    return {\n      items: ['spain', 'portugal'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;;AAGrB,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAK,CAAA;;AAG7D,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA;AAE/D;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAO,EAAG,CAAA,CAAA;SAChE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAU,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KAC/E;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RenderlessExtraParam',\n  xModule: extraParamsXModule.name,\n  props: {\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** A dictionary with the extra params in the store state. */\n    const stateParams = useState('extraParams').params\n\n    /** It returns the value of the extra param from the store. */\n    const extraParam = computed(() => stateParams.value[props.name])\n\n    /**\n     * It sets the new value to the store.\n     *\n     * @param newValue - The new value of the extra param.\n     */\n    function updateValue(newValue: unknown) {\n      xBus.emit('UserChangedExtraParams', { [props.name]: newValue })\n    }\n\n    return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\nimport { RenderlessExtraParams } from '@empathyco/x-components/extra-params'\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'RenderlessExtraParamsDemo',\n  components: {\n    RenderlessExtraParams,\n    BaseDropdown,\n  },\n  props: ['name'],\n  data() {\n    return {\n      items: ['spain', 'portugal'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;;QAGrB,MAAM,WAAY,GAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAK,CAAA;;AAGjD,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA;AAE/D;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAO,EAAG,CAAA,CAAA;SAChE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAU,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KAC/E;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_normalizeClass","clearHistoryQueriesEvents","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAPf,EAAA,OAAAC,SAAA,EAA+B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,KAAA,EAAMC,eAAEC,CAAyB,kCAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAClC,QAAU,EAAA,IAAA,CAAA,qBAAA;AAAA,IACV,MAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;AAPd,IAAA,YAAA,EAAA,WAAA;AAAA,GAAA,EAAA;aAAAC,OAUW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AAVX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_normalizeClass","clearHistoryQueriesEvents","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAPf,EAAA,OAAAC,SAAA,EAA+B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,KAAA,EAAMC,eAAEC,CAAyB,kCAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAClC,QAAU,EAAA,IAAA,CAAA,qBAAA;AAAA,IACV,MAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;AAPd,IAAA,YAAA,EAAA,WAAA;AAAA,GAAA,EAAA;aAAAC,OAUW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AAVX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js

@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { historyQueries } = useState('historyQueries', ['historyQueries']);
+        const { historyQueries } = useState('historyQueries');
         /**
          * Returns if the array of history queries is empty.
          *

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAExE;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA,CAAA;AAE9E;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,mCAAmC,EAAE,qBAAqB,CAAC,KAAK;AACjE,SAAA,CAAC,CACJ,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,yBAAyB,GAA0B;AACvD,YAAA,8BAA8B,EAAE,SAAS;SAC3C,CAAA;QAEA,OAAO;YACL,cAAc;YACd,yBAAyB;YACzB,qBAAqB;SACvB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,cAAa,KAAM,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAEpD;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA,CAAA;AAE9E;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,mCAAmC,EAAE,qBAAqB,CAAC,KAAK;AACjE,SAAA,CAAC,CACJ,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,yBAAyB,GAA0B;AACvD,YAAA,8BAA8B,EAAE,SAAS;SAC3C,CAAA;QAEA,OAAO;YACL,cAAc;YACd,yBAAyB;YACzB,qBAAqB;SACvB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map

@@ -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 :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\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 */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries', [\n      'isEnabled',\n      'historyQueries',\n    ])\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\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>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport 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":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAkG,CAAA,YAAA,CAAA,CAAA;AAA7D,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,aAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAAA,YAAA,EAAA,kBAAA;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\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 */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries')\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\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>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport 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":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAkG,CAAA,YAAA,CAAA,CAAA;AAA7D,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,aAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAAA,YAAA,EAAA,kBAAA;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js

@@ -24,10 +24,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { isEnabled, historyQueries } = useState('historyQueries', [
-            'isEnabled',
-            'historyQueries',
-        ]);
+        const { isEnabled, historyQueries } = useState('historyQueries');
         /**
          * Checks if there are history queries.
          *

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\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 */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries', [\n      'isEnabled',\n      'historyQueries',\n    ])\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\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>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport 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":";;;;;;;AAaA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAgB;AACjB,SAAA,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAC,CAAA,CAAA;QAE9F,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAyC,CAC/C,CAAA;AAEA;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAI,GAAI,iCAAiC,CAAA,CAAA;AAClF,SAAA,CAAA;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\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 */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries')\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\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>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport 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":";;;;;;;AAaA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,cAAe,EAAA,GAAI,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAE/D;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAC,CAAA,CAAA;QAE9F,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAyC,CAC/C,CAAA;AAEA;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAI,GAAI,iCAAiC,CAAA,CAAA;AAClF,SAAA,CAAA;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/my-history.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,OAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;uBAQdC,OAwBe,CAAA,CAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAJ,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;AA/BhC,oBAAA,OAAA,EAAAE,OAAA,CAAA,MAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AA0CyB,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;AA1CzB,sBAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode","animation","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;MAS8C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,yBAAA;;;;;AARJ,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AADpD,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAC,SAAA,EAC0E,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAI,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,cAAA;AAD/E,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,IAAA,KAAA;AACL,UAAA,OAAAL,SAAA,EAAoB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACzB,GAAA,EAAA,IAAA;AAAA,YAAA,KAAA,EAAA,mBAAA;YAEA,WAEO,EAAA,iBAAA;AAAA,WAAA,EAAA;;AACP,cAAAG,kBAAA;AAAA,gBA0CkB,MAAA;AAAA,gBAAA,UAAA;AAAA,gBAAAC,eAAA,CAAA,IAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAzCf,EAAA,IAAA,CAAA;AAAA,YAAAC,WAAA,CAZT,0BAac,EAAA;AAAA,cAEN,WAAU,EAAA,OAAA;AAAA,cACT,sBAAWC,CAAS,sBAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,cAAA,WAAA,EAAA,oBAAA;cAEV,SAAO,EAAA,IAAA,CAAA,SAAA;AAAA,aAAA,EAAA;uBAQdC,OAwBe,CAAA,CAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AAAA,gBAAAC,UAAA,CAvBZ,KAAY,MAAU,EAAA,YAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,kBAAAJ,WAAA,CACd,uBAAqB,EAAA;AAAA,oBAC9B,UAAA;AAAA,oBAAA,WAAA,EAAA,oBAAA;oBAEW,KAAO,EAAA,sCAAA;AAAA,mBAAA,EAAA;AA/BhC,oBAAA,OAAA,EAAAE,OAAA,CAAA,MAAA;AAAA,sBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AA0CyB,uBAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;AA1CzB,sBAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,qBAAA,CAAA;;;;AAAA,iBAAA,EAAA,IAAA,CAAA;AAAA,eAAA,CAAA;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/history-queries/components/my-history.vue2.js

@@ -52,7 +52,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { historyQueries } = useState('historyQueries', ['historyQueries']);
+        const { historyQueries } = useState('historyQueries');
         /**
          * The provided {@link SnippetConfig}.
          *