@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1 +1 @@
-{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<template>\n  <div v-if=\"items.length > 0\">\n    <!--\n      @slot Customize ResultsList.\n        @binding {Result[]} items - Results to render.\n        @binding {Vue | string} animation - Animation to animate the elements.\n    -->\n    <slot v-bind=\"{ items, animation }\">\n      <ItemsList :animation=\"animation\" :items=\"items\">\n        <template v-for=\"(_, slotName) in slots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { infiniteScroll } from '../../../directives';\n  import { animationProp } from '../../../utils/options-api';\n  import { useRegisterXModule, useState } from '../../../composables';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    components: {\n      ItemsList\n    },\n    xModule: searchXModule.name,\n    directives: { 'infinite-scroll': infiniteScroll },\n    props: {\n      /**\n       * Animation component that will be used to animate the results.\n       *\n       * @public\n       */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /**\n       * The {@link searchXModule | searchXModule } registered.\n       */\n      useRegisterXModule(searchXModule);\n\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       *\n       * @public\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /**\n       * The total number of results, taken from the state.\n       */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /**\n       * It provides the search query.\n       * This query is updated only when the search request has succeeded.\n       */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /**\n       * Indicates if there are more available results that have not been injected.\n       *\n       * @returns Boolean.\n       * @public\n       */\n      const hasMoreItems = computed(() => {\n        return items.value.length < totalResults.value;\n      });\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /**\n       * The status of the search request, taken from the state.\n       */\n      const searchStatus: Ref<RequestStatus> = useState('search', ['status']).status;\n\n      /**\n       * The query of the search request, taken from the state.\n       */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      const updateQuery = (status: RequestStatus): void => {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      };\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      /**\n       * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n       *\n       * @remarks This function is going to be executed when the observer\n       * is fired in {@link infiniteScroll}.\n       *\n       * @internal\n       */\n      const onInfiniteScrollEnd = (): void => {\n        xBus.emit('UserReachedResultsListEnd');\n      };\n\n      return {\n        items,\n        onInfiniteScrollEnd,\n        slots\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { animationProp } from '../../../utils/options-api';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,134 +1,6 @@
-import { defineComponent, provide, ref, computed, watch } from 'vue';
-import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
-import __vue_component__ from '../../../components/items-list.vue.js';
-import { infiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.js';
-import { animationProp } from '../../../utils/options-api.js';
-import '../../../composables/create-use-device.composable.js';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
-import '../../../plugins/x-bus.js';
-import '../../../plugins/x-plugin.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
-import { useRegisterXModule } from '../../../composables/use-register-x-module.js';
-import '@vueuse/core';
-import { useState } from '../../../composables/use-state.js';
-import { searchXModule } from '../x-module.js';
+import _sfc_main from './results-list.vue.js';
 
-/**
- * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
- * default.
- *
- * The component provides a default slot which wraps the whole component with the `results` bound.
- *
- * It also provides the slot result to customize the item, which is within the default slot, with
- * the result bound.
- *
- * @public
- */
-var script = defineComponent({
-    name: 'ResultsList',
-    components: {
-        ItemsList: __vue_component__
-    },
-    xModule: searchXModule.name,
-    directives: { 'infinite-scroll': infiniteScroll },
-    props: {
-        /**
-         * Animation component that will be used to animate the results.
-         *
-         * @public
-         */
-        animation: {
-            type: animationProp,
-            default: 'ul'
-        }
-    },
-    emits: ['UserReachedResultsListEnd'],
-    setup(props, { slots }) {
-        const xBus = useXBus();
-        /**
-         * The {@link searchXModule | searchXModule } registered.
-         */
-        useRegisterXModule(searchXModule);
-        /**
-         * The results to render from the state.
-         *
-         * @remarks The results list are provided with `items` key. It can be
-         * concatenated with list items from components such as `BannersList`, `PromotedsList`,
-         * `BaseGrid` or any component that injects the list.
-         *
-         * @public
-         */
-        const items = useState('search', ['results']).results;
-        provide(LIST_ITEMS_KEY, items);
-        /**
-         * The total number of results, taken from the state.
-         */
-        const totalResults = useState('search', ['totalResults']).totalResults;
-        /**
-         * It provides the search query.
-         * This query is updated only when the search request has succeeded.
-         */
-        let providedQuery = ref('');
-        provide(QUERY_KEY, providedQuery);
-        /**
-         * Indicates if there are more available results that have not been injected.
-         *
-         * @returns Boolean.
-         * @public
-         */
-        const hasMoreItems = computed(() => {
-            return items.value.length < totalResults.value;
-        });
-        provide(HAS_MORE_ITEMS_KEY, hasMoreItems);
-        /**
-         * The status of the search request, taken from the state.
-         */
-        const searchStatus = useState('search', ['status']).status;
-        /**
-         * The query of the search request, taken from the state.
-         */
-        const searchQuery = useState('search', ['query']).query;
-        /**
-         * Updates the query to be provided to the child components
-         * when the search request has succeeded.
-         *
-         * @param status - The status of the search request.
-         */
-        const updateQuery = (status) => {
-            if (status === 'success') {
-                providedQuery.value = searchQuery.value;
-            }
-        };
-        /**
-         * Watches the searchStatus and triggers updateQuery as callback
-         * when it changes.
-         *
-         * @param status - The status of the search request.
-         */
-        watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });
-        /**
-         * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.
-         *
-         * @remarks This function is going to be executed when the observer
-         * is fired in {@link infiniteScroll}.
-         *
-         * @internal
-         */
-        const onInfiniteScrollEnd = () => {
-            xBus.emit('UserReachedResultsListEnd');
-        };
-        return {
-            items,
-            onInfiniteScrollEnd,
-            slots
-        };
-    }
-});
 
-export { script as default };
+
+export { _sfc_main as default };
 //# sourceMappingURL=results-list.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/results-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { computed, ComputedRef, defineComponent, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { infiniteScroll } from '../../../directives';\n  import { animationProp } from '../../../utils/options-api';\n  import { useRegisterXModule, useState } from '../../../composables';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    components: {\n      ItemsList\n    },\n    xModule: searchXModule.name,\n    directives: { 'infinite-scroll': infiniteScroll },\n    props: {\n      /**\n       * Animation component that will be used to animate the results.\n       *\n       * @public\n       */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /**\n       * The {@link searchXModule | searchXModule } registered.\n       */\n      useRegisterXModule(searchXModule);\n\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       *\n       * @public\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /**\n       * The total number of results, taken from the state.\n       */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /**\n       * It provides the search query.\n       * This query is updated only when the search request has succeeded.\n       */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /**\n       * Indicates if there are more available results that have not been injected.\n       *\n       * @returns Boolean.\n       * @public\n       */\n      const hasMoreItems = computed(() => {\n        return items.value.length < totalResults.value;\n      });\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /**\n       * The status of the search request, taken from the state.\n       */\n      const searchStatus: Ref<RequestStatus> = useState('search', ['status']).status;\n\n      /**\n       * The query of the search request, taken from the state.\n       */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      const updateQuery = (status: RequestStatus): void => {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      };\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      /**\n       * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n       *\n       * @remarks This function is going to be executed when the observer\n       * is fired in {@link infiniteScroll}.\n       *\n       * @internal\n       */\n      const onInfiniteScrollEnd = (): void => {\n        xBus.emit('UserReachedResultsListEnd');\n      };\n\n      return {\n        items,\n        onInfiniteScrollEnd,\n        slots\n      };\n    }\n  });\n"],"names":["ItemsList"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCE;;;;;;;;;;AAUG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,UAAU,EAAE;mBACVA,iBAAS;AACV,KAAA;IACD,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,iBAAiB,EAAE,cAAc,EAAE;AACjD,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AAEpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;AACpB,QAAA,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;AAEvB;;AAEG;QACH,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAElC;;;;;;;;AAQG;AACH,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;AAC7E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAC;AAEhE;;AAEG;AACH,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;AAE5F;;;AAGG;AACH,QAAA,IAAI,aAAa,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAC;AAEzD;;;;;AAKG;AACH,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAK;YACjC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC;AACjD,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAC;AAE1E;;AAEG;AACH,QAAA,MAAM,YAAY,GAAuB,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAE/E;;AAEG;AACH,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AAE7E;;;;;AAKG;AACH,QAAA,MAAM,WAAW,GAAG,CAAC,MAAqB,KAAU;YAClD,IAAI,MAAM,KAAK,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;AACzC,aAAA;AACH,SAAC,CAAC;AAEF;;;;;AAKG;AACH,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;AAEhF;;;;;;;AAOG;QACH,MAAM,mBAAmB,GAAG,MAAW;AACrC,YAAA,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;AACzC,SAAC,CAAC;QAEF,OAAO;YACL,KAAK;YACL,mBAAmB;YACnB,KAAK;SACN,CAAC;KACH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"results-list.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,103 +1,44 @@
-import script from './sort-dropdown.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './sort-dropdown.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("BaseDropdown", {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseDropdown = resolveComponent("BaseDropdown");
+  return openBlock(), createBlock(_component_BaseDropdown, {
     ref: "rootRef",
-    staticClass: "x-sort-dropdown",
-    attrs: {
-      items: _vm.items,
-      modelValue: _vm.selectedSort,
-      animation: _vm.animation,
-      "data-test": "sort-dropdown",
-      "aria-label": "Select sorting",
-    },
-    on: { "update:modelValue": _vm.emitUserClickedASort },
-    scopedSlots: _vm._u(
-      [
-        {
-          key: "toggle",
-          fn: function (ref) {
-            var isOpen = ref.isOpen;
-            var item = ref.item;
-            return [
-              _vm._t(
-                "toggle",
-                function () {
-                  return [_vm._v(_vm._s(item))]
-                },
-                null,
-                { isOpen: isOpen, item: item }
-              ),
-            ]
-          },
-        },
-        {
-          key: "item",
-          fn: function (ref) {
-            var item = ref.item;
-            var isHighlighted = ref.isHighlighted;
-            var isSelected = ref.isSelected;
-            return [
-              _vm._t(
-                "item",
-                function () {
-                  return [_vm._v(_vm._s(item))]
-                },
-                null,
-                {
-                  item: item,
-                  isHighlighted: isHighlighted,
-                  isSelected: isSelected,
-                }
-              ),
-            ]
-          },
-        },
-      ],
-      null,
-      true
-    ),
-  })
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+    "onUpdate:modelValue": _ctx.emitUserClickedASort,
+    items: _ctx.items,
+    modelValue: _ctx.selectedSort,
+    animation: _ctx.animation,
+    class: "x-sort-dropdown",
+    "data-test": "sort-dropdown",
+    "aria-label": "Select sorting"
+  }, {
+    toggle: withCtx(({ isOpen, item }) => [
+      createCommentVNode("\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      "),
+      renderSlot(_ctx.$slots, "toggle", normalizeProps(guardReactiveProps({ isOpen, item })), () => [
+        createTextVNode(
+          toDisplayString(item),
+          1
+          /* TEXT */
+        )
+      ])
+    ]),
+    item: withCtx(({ item, isHighlighted, isSelected }) => [
+      createCommentVNode("\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      "),
+      renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isHighlighted, isSelected })), () => [
+        createTextVNode(
+          toDisplayString(item),
+          1
+          /* TEXT */
+        )
+      ])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["onUpdate:modelValue", "items", "modelValue", "animation"]);
+}
+var sortDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { sortDropdown as default };
 //# sourceMappingURL=sort-dropdown.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sort-dropdown.vue.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, useRegisterXModule, useState } from '../../../composables';\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      useRegisterXModule(searchXModule);\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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sort-dropdown.vue.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":["_resolveComponent","_openBlock","_createBlock","emitUserClickedASort","selectedSort","animation","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;AA3BZ,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAmBC,uBAAoB,EAAA;AAAA,IACvC,GAAK,EAAA,SAAA;AAAA,IACL,qBAAYC,EAAAA,IAAAA,CAAAA,oBAAAA;AAAAA,IACZ,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,UAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IAAA,WAAA,EAAA,eAAA;IAEW,YAAM,EAAA,gBAAA;AAAA,GAAA,EAAA;AAOf,IAAA,MAAA,EAAAC,OAAA,CAA+D,CAlBrE,EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,MAkB2DC,kBAAA,CAAA,sSAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAE5C,OAAA,CAAA;AAAA,KAAA,CAAA;AAQT,IAAA,IAAA,EAAAJ,OAAA,CAAgF,CA5BtF,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MA4B4EC,kBAAA,CAAA,2WAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AA5B5E,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,28 +1,17 @@
 import { defineComponent, ref, watch } from 'vue';
-import __vue_component__ from '../../../components/base-dropdown.vue.js';
-import '../../../composables/create-use-device.composable.js';
+import BaseDropdown from '../../../components/base-dropdown.vue.js';
 import { use$x } from '../../../composables/use-_x.js';
-import { useRegisterXModule } from '../../../composables/use-register-x-module.js';
-import '@vueuse/core';
-import '../../../plugins/x-plugin.js';
-import '../../../plugins/x-bus.js';
 import { useState } from '../../../composables/use-state.js';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import { searchXModule } from '../x-module.js';
 
 /**
  * The `SortDropdown` component allows user to select the search results order. This component
  * also allows to change the selected sort programmatically.
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'SortDropdown',
     xModule: searchXModule.name,
-    components: { BaseDropdown: __vue_component__ },
+    components: { BaseDropdown },
     props: {
         /** The list of possible sort values. */
         items: {
@@ -34,7 +23,6 @@ var script = defineComponent({
     },
     emits: ['change'],
     setup(_, { emit }) {
-        useRegisterXModule(searchXModule);
         const $x = use$x();
         const { sort: selectedSort } = useState('search', ['sort']);
         const rootRef = ref();
@@ -61,5 +49,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=sort-dropdown.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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, useRegisterXModule, useState } from '../../../composables';\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      useRegisterXModule(searchXModule);\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"],"names":["BaseDropdown"],"mappings":";;;;;;;;;;;;;;;;;AAyCE;;;AAGG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,gBAAEA,iBAAY,EAAE;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,IAAI,EAAE,EAAA;QACf,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5D,QAAA,MAAM,OAAO,GAAG,GAAG,EAAuB,CAAC;AAE3C,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC,CAAC;AAEH;;;;;;;AAOG;QACH,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,GAAG,EAAE,CAAC,CAAC;AAC3E,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;SACtB;QAED,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAY;SACb,CAAC;KACH;AACF,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    @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;;;;"}

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

@@ -1,89 +1,58 @@
-import script from './sort-list.vue2.js';
+import _sfc_main from './sort-list.vue2.js';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createVNode, renderSlot, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import './sort-list.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    _vm.animation,
-    {
-      tag: "component",
-      staticClass: "x-option-list x-sort-list",
-      attrs: { tag: "ul", "data-test": "sort-list" },
-    },
-    _vm._l(_vm.listItems, function (ref) {
-      var item = ref.item;
-      var cssClasses = ref.cssClasses;
-      var event = ref.event;
-      return _c(
-        "li",
-        {
-          key: item,
-          staticClass: "x-option-list__item x-sort-list__item",
-          class: cssClasses,
-        },
-        [
-          _c(
-            "BaseEventButton",
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    tag: "ul",
+    class: "x-option-list x-sort-list",
+    "data-test": "sort-list"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.listItems, ({ item, cssClasses, event }) => {
+          return openBlock(), createElementBlock(
+            "li",
             {
-              staticClass: "x-sort-list__button x-button",
-              attrs: { "data-test": "x-sort-button", events: event },
+              key: item,
+              class: normalizeClass([cssClasses, "x-option-list__item x-sort-list__item"])
             },
             [
-              _vm._t(
-                "default",
-                function () {
-                  return [_vm._v(" " + _vm._s(item) + " ")]
-                },
-                null,
-                { item: item, isSelected: item === _vm.selectedSort }
-              ),
+              createVNode(_component_BaseEventButton, {
+                class: "x-sort-list__button x-button",
+                "data-test": "x-sort-button",
+                events: event
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { item, isSelected: item === _ctx.selectedSort }), () => [
+                    createTextVNode(
+                      toDisplayString(item),
+                      1
+                      /* TEXT */
+                    )
+                  ], true)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["events"])
             ],
             2
-          ),
-        ],
-        1
-      )
-    }),
-    0
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+            /* CLASS */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var sortList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-834b0328"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-7bf7ecc6";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { sortList as default };
 //# sourceMappingURL=sort-list.vue.js.map