@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/x-modules/search/components/sort-dropdown.vue2.js

@@ -16,18 +16,18 @@ var _sfc_main = defineComponent({
         /** The list of possible sort values. */
         items: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The transition to use for opening and closing the dropdown. */
-        animation: [String, Object]
+        animation: [String, Object],
     },
     emits: ['change'],
     setup(_, { emit }) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search', ['sort']);
+        const { sort: selectedSort } = useState('search');
         const rootRef = ref();
         watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
-            immediate: true
+            immediate: true,
         });
         /**
          * Emits the events related to the selection of a sort value.
@@ -44,9 +44,9 @@ var _sfc_main = defineComponent({
         return {
             emitUserClickedASort,
             rootRef,
-            selectedSort
+            selectedSort,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/sort-dropdown.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    @update:modelValue=\"emitUserClickedASort\"\n    :items=\"items\"\n    :modelValue=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { defineComponent, PropType, ref, watch } from 'vue';\n\n  import BaseDropdown from '../../../components/base-dropdown.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * The `SortDropdown` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortDropdown',\n    xModule: searchXModule.name,\n    components: { BaseDropdown },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for opening and closing the dropdown. */\n      animation: [String, Object] as PropType<string | typeof Vue>\n    },\n    emits: ['change'],\n    setup(_, { emit }) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n      const rootRef = ref<typeof BaseDropdown>();\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Emits the events related to the selection of a sort value.\n       *\n       * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n       * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n       *\n       * @param sort - The selected sort.\n       */\n      function emitUserClickedASort(sort: Sort) {\n        $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });\n        emit('change', sort);\n      }\n\n      return {\n        emitUserClickedASort,\n        rootRef,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA0CE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,IAAG,EAAG,EAAA;AACf,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAa,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAC3D,QAAA,MAAM,UAAU,GAAG,EAAuB,CAAA;AAE1C,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,GAAE,EAAG,CAAC,CAAA;AAC1E,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;SACtB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  xModule: searchXModule.name,\n  components: { BaseDropdown },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | typeof Vue>,\n  },\n  emits: ['change'],\n  setup(_, { emit }) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortDropdown,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\nimport { SortDropdown } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortDropdown,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA4CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AAC7D,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,IAAG,EAAG,EAAA;AACf,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAChD,QAAA,MAAM,OAAQ,GAAE,GAAG,EAAsB,CAAA;AAEzC,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA,CAAA;AAED;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,KAAK,CAAA,CAAA;AACzE,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA,CAAA;SACrB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/sort-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;;AAkBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAlBd,iBACkBC,CAAAA,CAAAA;AAAyB,EAAA,OAAAC,SAAA,EAA4B,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,2BAAA;AADxE,IAAA,WAAA,EAAA,WAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;iBACJL,SALZ,EAAA,EAAAG,kBAAA;AAAA,YAMY,IAAA;AAAA,YAAA;AAAA,cAAA,GAAA,EAAA,IAAA;cAEN,KAQkB,EAAAG,cAAA,CAAA,CAAA,UAAA,EAAA,uCAAA,CAAA,CAAA;AAAA,aAAA;;0BANP,0BAAgB,EAAA;AAAA,gBACxB,KAAM,EAAA,8BAAA;AAAA,gBAAA,WAAA,EAAA,eAAA;AAXf,gBAAA,MAAA,EAAA,KAAA;AAAA,eAAA,EAAA;AAAA,gBAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,mBAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | typeof Vue>,\n      default: () => 'ul',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortListItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-sort-list__item--is-selected': item === selectedSort.value,\n          'x-option-list__item--is-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;;AAkBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAlBd,iBACkBC,CAAAA,CAAAA;AAAyB,EAAA,OAAAC,SAAA,EAA4B,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,2BAAA;AADxE,IAAA,WAAA,EAAA,WAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;iBACJL,SALZ,EAAA,EAAAG,kBAAA;AAAA,YAMY,IAAA;AAAA,YAAA;AAAA,cAAA,GAAA,EAAA,IAAA;cAEN,KAQkB,EAAAG,cAAA,CAAA,CAAA,UAAA,EAAA,uCAAA,CAAA,CAAA;AAAA,aAAA;;0BANP,0BAAgB,EAAA;AAAA,gBACxB,KAAM,EAAA,8BAAA;AAAA,gBAAA,WAAA,EAAA,eAAA;AAXf,gBAAA,MAAA,EAAA,KAAA;AAAA,eAAA,EAAA;AAAA,gBAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,mBAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search/components/sort-list.vue2.js

@@ -16,19 +16,19 @@ var _sfc_main = defineComponent({
         /** The list of possible sort values. */
         items: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The transition to use for rendering the list. */
         animation: {
             type: [String, Object],
-            default: () => 'ul'
-        }
+            default: () => 'ul',
+        },
     },
     setup(props) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search', ['sort']);
+        const { sort: selectedSort } = useState('search');
         watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
-            immediate: true
+            immediate: true,
         });
         /**
          * Sort list items.
@@ -39,15 +39,15 @@ var _sfc_main = defineComponent({
             item,
             cssClasses: {
                 'x-sort-list__item--is-selected': item === selectedSort.value,
-                'x-option-list__item--is-selected': item === selectedSort.value
+                'x-option-list__item--is-selected': item === selectedSort.value,
             },
-            event: { UserClickedASort: item }
+            event: { UserClickedASort: item },
         })));
         return {
             listItems,
-            selectedSort
+            selectedSort,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/sort-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAwCE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAG;AACpB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAa,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE3D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAK,KAAI,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAK,KAAI,YAAY,CAAC,KAAI;AAC/D,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAK,EAAA;SACjC,CAAC,CAAA,CACH,CAAA;QAED,OAAO;YACL,SAAS;YACT,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | typeof Vue>,\n      default: () => 'ul',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortListItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-sort-list__item--is-selected': item === selectedSort.value,\n          'x-option-list__item--is-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\nimport { SortList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA0CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAK,KAAI,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAChE,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;AAqBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CArBd,iBAESC,CAAAA,CAAAA;AAEA,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC1B,GAAA,EAAA,KAAA;AAAA,IACA,KAAK,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AANT,IAAA,IAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAUY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AACJ,UAAA,OAAAL,SAAA,gBAAG,0BAAuB,EAAA;AAAA,YAChC,GAAA,EAAA,IAAA;AAAA,YACC,OAAMM,cAAO,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,YACb,WAAA,EAAA,oBAAA;AAAA,YACD,MAAK,EAAA,KAAA;AAAA,YAAA,cAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA;AAfX,YAAA,IAAA,EAAA,UAAA;AAAA,WAAA,EAAA;AAAA,YAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,eAAA,CAAA;AAAA,aAAA,CAAA;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | typeof Vue>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;AAqBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CArBd,iBAESC,CAAAA,CAAAA;AAEA,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC1B,GAAA,EAAA,KAAA;AAAA,IACA,KAAK,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AANT,IAAA,IAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAUY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AACJ,UAAA,OAAAL,SAAA,gBAAG,0BAAuB,EAAA;AAAA,YAChC,GAAA,EAAA,IAAA;AAAA,YACC,OAAMM,cAAO,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,YACb,WAAA,EAAA,oBAAA;AAAA,YACD,MAAK,EAAA,KAAA;AAAA,YAAA,cAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA;AAfX,YAAA,IAAA,EAAA,UAAA;AAAA,WAAA,EAAA;AAAA,YAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,eAAA,CAAA;AAAA,aAAA,CAAA;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue2.js

@@ -16,21 +16,21 @@ var _sfc_main = defineComponent({
         /** The list of possible sort values. */
         items: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The transition to use for rendering the list. */
         animation: {
             type: [String, Object],
-            default: () => 'div'
+            default: () => 'div',
         },
         /** Class inherited by each sort button. */
-        buttonClass: String
+        buttonClass: String,
     },
     setup(props) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search', ['sort']);
+        const { sort: selectedSort } = useState('search');
         watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
-            immediate: true
+            immediate: true,
         });
         /**
          * Sort list items.
@@ -40,15 +40,15 @@ var _sfc_main = defineComponent({
         const listItems = computed(() => props.items.map(item => ({
             item,
             cssClasses: {
-                'x-selected': item === selectedSort.value
+                'x-selected': item === selectedSort.value,
             },
-            event: { UserClickedASort: item }
+            event: { UserClickedASort: item },
         })));
         return {
             listItems,
-            selectedSort
+            selectedSort,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/sort-picker-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,KAAI;AACpB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAa,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE3D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,IAAK,KAAI,YAAY,CAAC,KAAI;AACzC,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAK,EAAA;SACjC,CAAC,CAAA,CACH,CAAA;QAED,OAAO;YACL,SAAS;YACT,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort Picker item options.\n */\ninterface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | typeof Vue>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return {\n      selectedSort: 'Price asc',\n      sortValues: ['Relevance', 'Price asc', 'Price desc'],\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\nimport { SortPickerList } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    SortPickerList,\n  },\n  data() {\n    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA6CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,SAAS,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL,CAAA;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue.js

@@ -8,9 +8,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     {
       key: 0,
       ref: "el",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
       class: "x-spellcheck-button",
-      "data-test": "set-spellcheck"
+      "data-test": "set-spellcheck",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args))
     },
     [
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ spellcheckedQuery: _ctx.spellcheckedQuery })), () => [

package/js/x-modules/search/components/spellcheck-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    @click=\"emitEvents\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SpellcheckButton',\n    xModule: searchXModule.name,\n    setup() {\n      const $x = use$x();\n\n      const el = ref<HTMLElement>();\n\n      /**\n       * The spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: el.value as HTMLElement,\n        feature: 'spellcheck'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata());\n        $x.emit(\n          'UserAcceptedSpellcheckQuery',\n          spellcheckedQuery.value as string,\n          createEventMetadata()\n        );\n      };\n\n      return {\n        el,\n        spellcheckedQuery,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](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. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](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. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;qBACE,IAQS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SATX,IAGY,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA;AAAA,MACP,GAAA,EAAA,CAAA;AAAA,MACD,GAAK,EAAA,IAAA;AAAA,MACL,gBAAU,CAAgB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAA,qBAAA;MAE1B,WAAmE,EAAA,gBAAA;AAAA,KAAA;;;;;;;;AARvE,OAAA,CAAA;AAAA,KAAA;;;;;;;;;"}
+{"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SpellcheckButton',\n  xModule: searchXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const el = ref<HTMLElement>()\n\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { spellcheckedQuery } = useState('search')\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: el.value as HTMLElement,\n      feature: 'spellcheck',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n      $x.emit(\n        'UserAcceptedSpellcheckQuery',\n        spellcheckedQuery.value as string,\n        createEventMetadata(),\n      )\n    }\n\n    return {\n      el,\n      spellcheckedQuery,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](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. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](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. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;qBACE,IAQS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SATX,IAGY,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA;AAAA,MACR,GAAK,EAAA,CAAA;AAAA,MACL,GAAA,EAAA,IAAA;AAAA,MACC,KAAK,EAAA,qBAAA;AAAA,MAAA,WAAA,EAAA,gBAAA;AAEN,MAAA,OAAA,EAAA,MAAA,CAAmE,CARvE,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;AAAA,OAAA,CAAA;AAAA,KAAA;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);
+        const { spellcheckedQuery } = useState('search');
         /**
          * Generates the {@link WireMetadata} object omitting the moduleName.
          *
@@ -30,7 +30,7 @@ var _sfc_main = defineComponent({
          */
         const createEventMetadata = () => ({
             target: el.value,
-            feature: 'spellcheck'
+            feature: 'spellcheck',
         });
         /**
          * Emits events when the button is clicked.
@@ -44,9 +44,9 @@ var _sfc_main = defineComponent({
         return {
             el,
             spellcheckedQuery,
-            emitEvents
+            emitEvents,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/spellcheck-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    @click=\"emitEvents\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SpellcheckButton',\n    xModule: searchXModule.name,\n    setup() {\n      const $x = use$x();\n\n      const el = ref<HTMLElement>();\n\n      /**\n       * The spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: el.value as HTMLElement,\n        feature: 'spellcheck'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata());\n        $x.emit(\n          'UserAcceptedSpellcheckQuery',\n          spellcheckedQuery.value as string,\n          createEventMetadata()\n        );\n      };\n\n      return {\n        el,\n        spellcheckedQuery,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](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. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](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. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,KAAK,GAAG,EAAe,CAAA;AAE7B;;;;AAIE;AACF,QAAA,MAAM,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAEvE;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAW;AACrB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACvF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAC,CACrB,CAAA;AACH,SAAC,CAAA;QAED,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"spellcheck-button.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SpellcheckButton',\n  xModule: searchXModule.name,\n  setup() {\n    const $x = use$x()\n\n    const el = ref<HTMLElement>()\n\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { spellcheckedQuery } = useState('search')\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: el.value as HTMLElement,\n      feature: 'spellcheck',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata())\n      $x.emit(\n        'UserAcceptedSpellcheckQuery',\n        spellcheckedQuery.value as string,\n        createEventMetadata(),\n      )\n    }\n\n    return {\n      el,\n      spellcheckedQuery,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](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. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](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. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,EAAG,GAAE,GAAG,EAAc,CAAA;AAE5B;;;;AAIE;QACF,MAAM,EAAE,iBAAgB,KAAM,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAE/C;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACtF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAE,CACvB,CAAA;AACF,SAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/spellcheck.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * The `Spellcheck` component allows to inform the user with a friendly message that he\n   * might have misspelled the search query. This message can be set using the default slot\n   * of the component, which gives access to the searched query using the `query` scope property,\n   * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n   *\n   * The component will only render itself if the `spellcheckedQuery` property has value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Spellcheck',\n    xModule: searchXModule.name,\n    setup() {\n      /**\n       * The query and the spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { query, spellcheckedQuery } = useState('search', ['query', 'spellcheckedQuery']);\n\n      return {\n        query,\n        spellcheckedQuery\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\n  import { Spellcheck } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      Spellcheck\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","query","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MACgC,UAAM,GAAA;AAAA,EAAe,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,cAAA;;;AAAnD,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,8BAA+CC,UAAQ,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAF3D,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n *\n * The component will only render itself if the `spellcheckedQuery` property has value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Spellcheck',\n  xModule: searchXModule.name,\n  setup() {\n    /**\n     * The query and the spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { query, spellcheckedQuery } = useState('search')\n\n    return {\n      query,\n      spellcheckedQuery,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","query","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MACgC,UAAM,GAAA;AAAA,EAAe,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,cAAA;;;AAAnD,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,8BAA+CC,UAAQ,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAF3D,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/spellcheck.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { useState } from '../../../composables/use-state.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * The `Spellcheck` component allows to inform the user with a friendly message that he
@@ -21,12 +21,12 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { query, spellcheckedQuery } = useState('search', ['query', 'spellcheckedQuery']);
+        const { query, spellcheckedQuery } = useState('search');
         return {
             query,
-            spellcheckedQuery
+            spellcheckedQuery,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/spellcheck.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheck.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * The `Spellcheck` component allows to inform the user with a friendly message that he\n   * might have misspelled the search query. This message can be set using the default slot\n   * of the component, which gives access to the searched query using the `query` scope property,\n   * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n   *\n   * The component will only render itself if the `spellcheckedQuery` property has value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Spellcheck',\n    xModule: searchXModule.name,\n    setup() {\n      /**\n       * The query and the spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { query, spellcheckedQuery } = useState('search', ['query', 'spellcheckedQuery']);\n\n      return {\n        query,\n        spellcheckedQuery\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\n  import { Spellcheck } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      Spellcheck\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAWE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAA;QAEvF,OAAO;YACL,KAAK;YACL,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"spellcheck.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n  <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n    <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n *\n * The component will only render itself if the `spellcheckedQuery` property has value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Spellcheck',\n  xModule: searchXModule.name,\n  setup() {\n    /**\n     * The query and the spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    const { query, spellcheckedQuery } = useState('search')\n\n    return {\n      query,\n      spellcheckedQuery,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n  <template #default=\"{ query, spellcheckedQuery }\">\n    No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n  </template>\n</Spellcheck>\n\n<script>\nimport { Spellcheck } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    Spellcheck,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,KAAK,EAAE,iBAAkB,EAAA,GAAI,QAAQ,CAAC,QAAQ,CAAA,CAAA;QAEtD,OAAO;YACL,KAAK;YACL,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js

@@ -1,16 +1,16 @@
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 
 const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
-    fetch({ dispatch, state }, request) {
+    async fetch({ dispatch, state }, request) {
         return request
             ? dispatch('fetchSearchResponse', enrichRequest(request, state))
             : Promise.resolve(null);
     },
     onSuccess({ dispatch }, response) {
         if (response !== null) {
-            dispatch('saveSearchResponse', response);
+            void dispatch('saveSearchResponse', response);
         }
-    }
+    },
 });
 /**
  * Enriches the {@link SearchRequest} object with the origin and page properties taken from the
@@ -24,13 +24,20 @@ const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
  */
 function enrichRequest(request, state) {
     const { page, ...restRequest } = request;
-    const { config: { pageSize }, origin, results } = state;
-    const start = page === 1 ? 0 : results.length;
+    const { config: { pageSize, pageMode }, origin, results, } = state;
+    let start;
+    if (pageMode === 'infinite_scroll') {
+        start = page === 1 ? 0 : results.length;
+    }
+    else {
+        start = state.config.pageSize * (page - 1);
+    }
+    const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;
     return {
         ...restRequest,
         ...(origin && { origin }),
         start,
-        rows: pageSize * page - start
+        rows,
     };
 }
 /**

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchRequest, SearchResponse } from '@empathyco/x-types';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  SearchActionContext,\n  InternalSearchRequest | null,\n  SearchResponse | null\n>({\n  fetch({ dispatch, state }, request) {\n    return request\n      ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n      : Promise.resolve(null);\n  },\n  onSuccess({ dispatch }, response) {\n    if (response !== null) {\n      dispatch('saveSearchResponse', response);\n    }\n  }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n  const { page, ...restRequest } = request;\n  const {\n    config: { pageSize },\n    origin,\n    results\n  } = state;\n  const start = page === 1 ? 0 : results.length;\n\n  return {\n    ...restRequest,\n    ...(origin && { origin }),\n    start,\n    rows: pageSize * page - start\n  };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AAChC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;AAC1C,SAAA;KACF;AACF,CAAA,CAAC,CAAC;AAEH;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;AACzC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,EACpB,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9C,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;AACL,QAAA,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK;KAC9B,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAa;AAEvD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}
+{"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import type { SearchRequest, SearchResponse } from '@empathyco/x-types'\nimport type { InternalSearchRequest } from '../../types'\nimport type { SearchActionContext, SearchState } from '../types'\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils'\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  SearchActionContext,\n  InternalSearchRequest | null,\n  SearchResponse | null\n>({\n  async fetch({ dispatch, state }, request) {\n    return request\n      ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n      : Promise.resolve(null)\n  },\n  onSuccess({ dispatch }, response) {\n    if (response !== null) {\n      void dispatch('saveSearchResponse', response)\n    }\n  },\n})\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n  const { page, ...restRequest } = request\n  const {\n    config: { pageSize, pageMode },\n    origin,\n    results,\n  } = state\n\n  let start\n  if (pageMode === 'infinite_scroll') {\n    start = page === 1 ? 0 : results.length\n  } else {\n    start = state.config.pageSize * (page - 1)\n  }\n\n  const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize\n\n  return {\n    ...restRequest,\n    ...(origin && { origin }),\n    start,\n    rows,\n  }\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;IACA,MAAM,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AACtC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;KAC1B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,KAAK,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAA;AAC9C,SAAA;KACF;AACF,CAAA,CAAC,CAAA;AAEF;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAA;AACxC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC9B,MAAM,EACN,OAAO,GACR,GAAG,KAAK,CAAA;AAET,IAAA,IAAI,KAAK,CAAA;IACT,IAAI,QAAQ,KAAK,iBAAiB,EAAE;AAClC,QAAA,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAA;AACxC,KAAA;AAAM,SAAA;AACL,QAAA,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,GAAG,CAAC,CAAC,CAAA;AAC3C,KAAA;AAED,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAK,iBAAiB,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAA;IAEhF,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;QACL,IAAI;KACL,CAAA;AACH,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAY;AAEtD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}

package/js/x-modules/search/store/actions/fetch-search-response.action.js

@@ -10,7 +10,7 @@ import { XPlugin } from '../../../../plugins/x-plugin.js';
  *
  * @public
  */
-const fetchSearchResponse = (_context, request) => XPlugin.adapter.search(request);
+const fetchSearchResponse = async (_context, request) => XPlugin.adapter.search(request);
 
 export { fetchSearchResponse };
 //# sourceMappingURL=fetch-search-response.action.js.map