npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.62 → 6.0.0-alpha.64 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/js/x-modules/search/components/banners-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Banner } from '@empathyco/x-types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { FeatureLocation } from '../../../types/origin'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, isRef, provide, ref } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n \n The component provides a default slot which wraps the whole component with the `banners`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n \n It also provides the parent slots to customize the items.\n \n @public\n /\nexport default defineComponent({\n name: 'BannersList',\n xModule: searchXModule.name,\n props: {\n /* Animation component that will be used to animate the banners. /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /* The banners to render from the state. /\n const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners\n\n /* The provided {@link FeatureLocation} for the component. /\n const injectedLocation = inject<Ref<FeatureLocation> \| FeatureLocation>('location')\n const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation\n\n /* Number of columns the grid is being divided into. /\n const columnsNumber = ref(0)\n\n /\n Handler to update the number of columns when it changes.\n \n @param newColumnsNumber - The new columns value.\n * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n /\n $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n if (metadata.location === location) {\n columnsNumber.value = eventPayload\n }\n })\n\n /* It injects {@link ListItem} provided by an ancestor as injectedListItems. /\n const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n /\n The `stateItems` concatenated with the `injectedListItems` if there are.\n \n @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n \n @returns List of {@link ListItem}.\n /\n const items = computed(() => {\n if (!injectedListItems?.value!.length) {\n return stateItems.value\n }\n const items = [...injectedListItems.value]\n let index = 0\n let previousBannerRow = -1\n for (const item of stateItems.value) {\n const position = item.position ?? 1\n let row = position - 1\n if (row <= previousBannerRow) {\n row = previousBannerRow + 1\n }\n const rowsDiff = row - previousBannerRow\n if (rowsDiff > 1) {\n index += (rowsDiff - 1) columnsNumber.value\n }\n const isIndexInLoadedPages = index <= items.length\n const areAllPagesLoaded = $x.results.length === $x.totalResults\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break\n }\n items.splice(index, 0, item)\n index++\n previousBannerRow = row\n }\n return items\n })\n\n /*\n The computed list items of the entity that uses the mixin.\n \n @remarks It should be overridden in the component that uses the mixin and it's intended to be\n * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n * @returns An empty array as fallback in case it is not overridden.\n */\n provide(LIST_ITEMS_KEY as string, items)\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 BannersList 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 <BannersList />\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <BannersList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\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 <BannersList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #banner=\"{ item }\">\n <span>Banner: {{ item.title }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </BannersList>\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <BannersList #banner=\"{ item }\">\n <span class=\"banner\">\n {{ item.title }}\n </span>\n </BannersList>\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\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\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <BannersList>\n <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n </BannersList>\n </ResultsList>\n </div>\n</template>\n\n<script>\nimport { ResultsList, BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n ResultsList,\n BannersList,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAaA;;;;;;;;;;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,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;AAGjB,QAAA,MAAM,UAAU,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAM,CAAA;;AAGhF,QAAA,MAAM,mBAAmB,MAAM,CAAyC,UAAU,CAAA,CAAA;AAClF,QAAA,MAAM,QAAO,GAAI,KAAK,CAAC,gBAAgB,CAAE,GAAE,gBAAgB,CAAC,QAAQ,gBAAe,CAAA;;AAGnF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAE3B;;;;;AAKE;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,UAAU,KAAK;AACpF,YAAA,IAAI,QAAQ,CAAC,QAAO,KAAM,QAAQ,EAAE;AAClC,gBAAA,aAAa,CAAC,KAAI,GAAI,YAAW,CAAA;AACnC,aAAA;AACF,SAAC,CAAA,CAAA;;AAGD,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI,CAAA;AACxB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA,CAAA;YACzC,IAAI,QAAQ,CAAA,CAAA;AACZ,YAAA,IAAI,iBAAgB,GAAI,CAAC,CAAA,CAAA;AACzB,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAS,GAAE,IAAI,CAAC,QAAS,IAAG,CAAA,CAAA;AAClC,gBAAA,IAAI,MAAM,WAAW,CAAA,CAAA;gBACrB,IAAI,GAAE,IAAK,iBAAiB,EAAE;AAC5B,oBAAA,MAAM,oBAAoB,CAAA,CAAA;AAC5B,iBAAA;AACA,gBAAA,MAAM,QAAS,GAAE,GAAE,GAAI,iBAAgB,CAAA;gBACvC,IAAI,QAAO,GAAI,CAAC,EAAE;oBAChB,KAAM,IAAG,CAAC,QAAO,GAAI,CAAC,IAAI,aAAa,CAAC,KAAI,CAAA;AAC9C,iBAAA;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK,CAAA;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAO,KAAI,EAAE,CAAC,YAAW,CAAA;AAC9D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAI;AACN,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA,CAAA;AAC3B,gBAAA,KAAK,EAAC,CAAA;gBACN,iBAAkB,GAAE,GAAE,CAAA;AACxB,aAAA;AACA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { FeatureLocation } from '../../../types/origin'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, isRef, provide, ref } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n \n The component provides a default slot which wraps the whole component with the `banners`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n \n It also provides the parent slots to customize the items.\n \n @public\n /\nexport default defineComponent({\n name: 'BannersList',\n xModule: searchXModule.name,\n props: {\n /* Animation component that will be used to animate the banners. /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /* The banners to render from the state. /\n const stateItems = useState('search').banners\n\n /* The provided {@link FeatureLocation} for the component. /\n const injectedLocation = inject<Ref<FeatureLocation> \| FeatureLocation>('location')\n const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation\n\n /* Number of columns the grid is being divided into. /\n const columnsNumber = ref(0)\n\n /\n Handler to update the number of columns when it changes.\n \n @param newColumnsNumber - The new columns value.\n * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n /\n $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n if (metadata.location === location) {\n columnsNumber.value = eventPayload\n }\n })\n\n /* It injects {@link ListItem} provided by an ancestor as injectedListItems. /\n const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n /\n The `stateItems` concatenated with the `injectedListItems` if there are.\n \n @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n \n @returns List of {@link ListItem}.\n /\n const items = computed(() => {\n if (!injectedListItems?.value!.length) {\n return stateItems.value\n }\n const items = [...injectedListItems.value]\n let index = 0\n let previousBannerRow = -1\n for (const item of stateItems.value) {\n const position = item.position ?? 1\n let row = position - 1\n if (row <= previousBannerRow) {\n row = previousBannerRow + 1\n }\n const rowsDiff = row - previousBannerRow\n if (rowsDiff > 1) {\n index += (rowsDiff - 1) columnsNumber.value\n }\n const isIndexInLoadedPages = index <= items.length\n const areAllPagesLoaded = $x.results.length === $x.totalResults\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break\n }\n items.splice(index, 0, item)\n index++\n previousBannerRow = row\n }\n return items\n })\n\n /*\n The computed list items of the entity that uses the mixin.\n \n @remarks It should be overridden in the component that uses the mixin and it's intended to be\n * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n * @returns An empty array as fallback in case it is not overridden.\n */\n provide(LIST_ITEMS_KEY as string, items)\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 BannersList 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 <BannersList />\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <BannersList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\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 <BannersList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #banner=\"{ item }\">\n <span>Banner: {{ item.title }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </BannersList>\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <BannersList #banner=\"{ item }\">\n <span class=\"banner\">\n {{ item.title }}\n </span>\n </BannersList>\n </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n BannersList,\n },\n}\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\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\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <BannersList>\n <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n </BannersList>\n </ResultsList>\n </div>\n</template>\n\n<script>\nimport { ResultsList, BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'BannersListDemo',\n components: {\n SearchInput,\n ResultsList,\n BannersList,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAYA;;;;;;;;;;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,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;QAGjB,MAAM,aAAa,QAAQ,CAAC,QAAQ,CAAC,CAAC,OAAM,CAAA;;AAG5C,QAAA,MAAM,mBAAmB,MAAM,CAAyC,UAAU,CAAA,CAAA;AAClF,QAAA,MAAM,QAAO,GAAI,KAAK,CAAC,gBAAgB,CAAE,GAAE,gBAAgB,CAAC,QAAQ,gBAAe,CAAA;;AAGnF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,CAAC,CAAA,CAAA;AAE3B;;;;;AAKE;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,UAAU,KAAK;AACpF,YAAA,IAAI,QAAQ,CAAC,QAAO,KAAM,QAAQ,EAAE;AAClC,gBAAA,aAAa,CAAC,KAAI,GAAI,YAAW,CAAA;AACnC,aAAA;AACF,SAAC,CAAA,CAAA;;AAGD,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI,CAAA;AACxB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA,CAAA;YACzC,IAAI,QAAQ,CAAA,CAAA;AACZ,YAAA,IAAI,iBAAgB,GAAI,CAAC,CAAA,CAAA;AACzB,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAS,GAAE,IAAI,CAAC,QAAS,IAAG,CAAA,CAAA;AAClC,gBAAA,IAAI,MAAM,WAAW,CAAA,CAAA;gBACrB,IAAI,GAAE,IAAK,iBAAiB,EAAE;AAC5B,oBAAA,MAAM,oBAAoB,CAAA,CAAA;AAC5B,iBAAA;AACA,gBAAA,MAAM,QAAS,GAAE,GAAE,GAAI,iBAAgB,CAAA;gBACvC,IAAI,QAAO,GAAI,CAAC,EAAE;oBAChB,KAAM,IAAG,CAAC,QAAO,GAAI,CAAC,IAAI,aAAa,CAAC,KAAI,CAAA;AAC9C,iBAAA;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK,CAAA;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAO,KAAI,EAAE,CAAC,YAAW,CAAA;AAC9D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAI;AACN,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA,CAAA;AAC3B,gBAAA,KAAK,EAAC,CAAA;gBACN,iBAAkB,GAAE,GAAE,CAAA;AACxB,aAAA;AACA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/fallback-disclaimer.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search'~~, [\n 'query',\n 'fromNoResultsWithFilters',\n ]~~)\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAGI,UAAM,GAAA;AAAA,EACN,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,uBAAA;;;AAHF,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAQM,QARN,KAQM,EAAA,QAAA,EAAA;AAHJ,EAAA,OAAA,IAAA,CAAA,wBAAA,IAAAA,SAAA,uBAAyB,KACF,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAP3B,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search')\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAGI,UAAM,GAAA;AAAA,EACN,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,uBAAA;;;AAHF,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAQM,QARN,KAQM,EAAA,QAAA,EAAA;AAHJ,EAAA,OAAA,IAAA,CAAA,wBAAA,IAAAA,SAAA,uBAAyB,KACF,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAP3B,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/fallback-disclaimer.vue2.js CHANGED Viewed

@@ -12,10 +12,7 @@ var _sfc_main = defineComponent({
     name: 'FallbackDisclaimer',
     xModule: searchXModule.name,
     setup() {
-        const { query, fromNoResultsWithFilters } = useState('search', [
-            'query',
-            'fromNoResultsWithFilters',
-        ]);
+        const { query, fromNoResultsWithFilters } = useState('search');
         return { query, fromNoResultsWithFilters };
     },
 });

package/js/x-modules/search/components/fallback-disclaimer.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fallback-disclaimer.vue2.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search'~~, [\n 'query',\n 'fromNoResultsWithFilters',\n ]~~)\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,~~0BAA2B~~,~~GAAE~~,QAAQ,CAAC,QAAQ,~~EAAE;YAC7D,OAAO;YACP,0BAA0B;AAC3B,SAAA,~~CAAA,CAAA;~~AAED~~,QAAA,OAAO,EAAE,KAAK,EAAE,wBAAyB,EAAA,CAAA;KAC1C;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"fallback-disclaimer.vue2.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n <div\n v-if=\"fromNoResultsWithFilters\"\n class=\"x-fallback-disclaimer\"\n data-test=\"fallback-disclaimer\"\n >\n <slot v-bind=\"{ query }\">\n No results found for {{ query }} with the selected filters. The filters have been unselected.\n </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 `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n \n @public\n */\nexport default defineComponent({\n name: 'FallbackDisclaimer',\n xModule: searchXModule.name,\n setup() {\n const { query, fromNoResultsWithFilters } = useState('search')\n\n return { query, fromNoResultsWithFilters }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n <template #default=\"{ query }\">\n No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n components: {\n FallbackDisclaimer,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,wBAAyB,EAAA,GAAI,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAE7D,QAAA,OAAO,EAAE,KAAK,EAAE,wBAAyB,EAAA,CAAA;KAC1C;AACF,CAAA,CAAA;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport ~~type~~ { ~~PartialResult } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport {~~ computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items: ~~ComputedRef<PartialResult[]>~~ = useState('search'~~, [\n 'partialResults',\n ]~~).partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;YAM1B,WAAwC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB9C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items = useState('search').partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;YAM1B,WAAwC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB9C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -38,9 +38,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const items = useState('search', [
-            'partialResults',
-        ]).partialResults;
+        const items = useState('search').partialResults;
         /**
          * A limited number of partial results.
          *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"partial-results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport ~~type~~ { ~~PartialResult } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport {~~ computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items: ~~ComputedRef<PartialResult[]>~~ = useState('search'~~, [\n 'partialResults',\n ]~~).partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;~~AA+BA~~;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;~~AACF~~,~~QAAA,~~MAAM,~~KAAK~~,~~GAAiC~~,QAAQ,CAAC,QAAQ,~~EAAE;YAC7D,gBAAgB;SACjB,~~CAAC,CAAC,cAAa,CAAA;~~AAEhB~~;;;;;;AAME;QACF,MAAM,cAAe,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA,CAAA;QAElF,OAAO;YACL,cAAc;SAChB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"partial-results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"partialResults.length\"\n class=\"x-partial-results-list\"\n data-test=\"partial-results\"\n tag=\"ul\"\n >\n <li\n v-for=\"(partialResult, index) in partialResults\"\n :key=\"`${partialResult.query}-${index}`\"\n class=\"x-partial-result\"\n data-test=\"partial-result\"\n >\n <!--\n @slot (Required) Partial results item content\n @binding {Partial} partialResult - Partial Result data\n -->\n <slot :partial-result=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n \n @public\n /\nexport default defineComponent({\n name: 'PartialResultsList',\n xModule: searchXModule.name,\n props: {\n /\n Animation component that will be used to animate the partial results.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n\n /\n Maximum number of partial results to show.\n \n @public\n /\n maxItemsToRender: {\n type: Number,\n default: 5,\n },\n },\n setup(props) {\n /\n The partials results from the search state.\n \n @public\n /\n const items = useState('search').partialResults\n\n /\n A limited number of partial results.\n \n @returns The partial results sliced by the maxItemsToRender.\n \n @internal\n */\n const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n return {\n partialResults,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n display: flex;\n flex-flow: column nowrap;\n list-style-type: none;\n padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n <PartialResultsList :maxItemsToRender=\"3\">\n <template #default=\"{ partialResult }\">\n <ResultsList :results=\"partialResult.results\" />\n </template>\n </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n <PartialResultsList>\n <template #default=\"{ partialResult }\">\n <span>{{ partialResult.query }}</span>\n <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n <template #default=\"{ item }\">\n <BaseResultImage :result=\"item\" />\n <span class=\"x-result__title\">{{ item.name }}</span>\n </template>\n </BaseResultLink>\n </template>\n </BaseGrid>\n <PartialQueryButton :query=\"partialResult.query\">\n <template #default=\"{ query }\">Ver todos {{ query }}</template>\n </PartialQueryButton>\n </template>\n </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,cAAa,CAAA;AAE9C;;;;;;AAME;QACF,MAAM,cAAe,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA,CAAA;QAElF,OAAO;YACL,cAAc;SAChB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/promoteds-list.vue.js CHANGED Viewed

@@ -30,7 +30,7 @@ var _sfc_main = defineComponent({
     setup(props, { slots }) {
         const $x = use$x();
         /** The promoteds to render from the state. */
-        const stateItems = useState('search', ['promoteds']).promoteds;
+        const stateItems = useState('search').promoteds;
         /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
         const injectedListItems = inject(LIST_ITEMS_KEY);
         /**

package/js/x-modules/search/components/promoteds-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ~~Promoted } from '@empathyco/x-types'\nimport type { ComputedRef,~~ Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n \n The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n \n It also provides the parent slots to customize the items.\n \n @public\n /\nexport default defineComponent({\n name: 'PromotedsList',\n xModule: searchXModule.name,\n props: {\n /* Animation component that will be used to animate the promoteds. /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /* The promoteds to render from the state. /\n const stateItems: ~~ComputedRef<Promoted[]>~~ = useState('search'~~, ['promoteds']~~).promoteds\n\n /* It injects {@link ListItem} provided by an ancestor as injectedListItems. /\n const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n /\n The `stateItems` concatenated with the `injectedListItems` if there are.\n \n @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n \n @returns List of {@link ListItem}.\n /\n const items = computed(() => {\n if (!injectedListItems?.value!.length) {\n return stateItems.value\n }\n const items = [...injectedListItems.value]\n for (const item of stateItems.value) {\n const position = item.position ?? 1\n let index = position - 1\n while (items.at(index)?.modelName === 'Promoted') {\n index++\n }\n const isIndexInLoadedPages = index <= items.length\n const areAllPagesLoaded = $x.results.length === $x.totalResults\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break\n }\n items.splice(index, 0, item)\n }\n return items\n })\n\n /\n The computed list items of the entity that uses the mixin.\n \n @remarks It should be overridden in the component that uses the mixin and it's intended to be\n * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n * @returns An empty array as fallback in case it is not overridden.\n */\n provide(LIST_ITEMS_KEY as string, items)\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 PromotedsList 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\n <PromotedsList />\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\n },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\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 <PromotedsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #promoted=\"{ item }\">\n <span>Promoted: {{ item.title }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </PromotedsList>\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\n BaseGrid,\n },\n}\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ item.title }}\n </span>\n </PromotedsList>\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\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\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <PromotedsList>\n <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n </PromotedsList>\n </ResultsList>\n </div>\n</template>\n\n<script>\nimport { ResultsList, PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n ResultsList,\n PromotedsList,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;~~AAYA~~;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;~~AAGjB~~,~~QAAA,~~MAAM,~~UAAU~~,~~GAA4B~~,QAAQ,CAAC,QAAQ,~~EAAE,~~CAAC,~~WAAW,~~CAAC,~~CAAC,CAAC,~~SAAQ,CAAA;;~~AAGtF~~,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI,CAAA;AACxB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA,CAAA;AACzC,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAS,GAAE,IAAI,CAAC,QAAS,IAAG,CAAA,CAAA;AAClC,gBAAA,IAAI,KAAM,GAAE,WAAW,CAAA,CAAA;gBACvB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAC,CAAA;AACR,iBAAA;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK,CAAA;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAO,KAAI,EAAE,CAAC,YAAW,CAAA;AAC9D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAI;AACN,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA,CAAA;AAC7B,aAAA;AACA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/*\n It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n \n The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n \n It also provides the parent slots to customize the items.\n \n @public\n /\nexport default defineComponent({\n name: 'PromotedsList',\n xModule: searchXModule.name,\n props: {\n /* Animation component that will be used to animate the promoteds. /\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /* The promoteds to render from the state. /\n const stateItems = useState('search').promoteds\n\n /* It injects {@link ListItem} provided by an ancestor as injectedListItems. /\n const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n /\n The `stateItems` concatenated with the `injectedListItems` if there are.\n \n @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n \n @returns List of {@link ListItem}.\n /\n const items = computed(() => {\n if (!injectedListItems?.value!.length) {\n return stateItems.value\n }\n const items = [...injectedListItems.value]\n for (const item of stateItems.value) {\n const position = item.position ?? 1\n let index = position - 1\n while (items.at(index)?.modelName === 'Promoted') {\n index++\n }\n const isIndexInLoadedPages = index <= items.length\n const areAllPagesLoaded = $x.results.length === $x.totalResults\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break\n }\n items.splice(index, 0, item)\n }\n return items\n })\n\n /\n The computed list items of the entity that uses the mixin.\n \n @remarks It should be overridden in the component that uses the mixin and it's intended to be\n * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n * @returns An empty array as fallback in case it is not overridden.\n */\n provide(LIST_ITEMS_KEY as string, items)\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 PromotedsList 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\n <PromotedsList />\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\n },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\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 <PromotedsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #promoted=\"{ item }\">\n <span>Promoted: {{ item.title }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </PromotedsList>\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\n BaseGrid,\n },\n}\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ item.title }}\n </span>\n </PromotedsList>\n </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\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\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <PromotedsList>\n <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n </PromotedsList>\n </ResultsList>\n </div>\n</template>\n\n<script>\nimport { ResultsList, PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n ResultsList,\n PromotedsList,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;QAGjB,MAAM,UAAS,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,SAAQ,CAAA;;AAG9C,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI,CAAA;AACxB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA,CAAA;AACzC,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAS,GAAE,IAAI,CAAC,QAAS,IAAG,CAAA,CAAA;AAClC,gBAAA,IAAI,KAAM,GAAE,WAAW,CAAA,CAAA;gBACvB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAC,CAAA;AACR,iBAAA;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK,CAAA;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAO,KAAI,EAAE,CAAC,YAAW,CAAA;AAC9D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAI;AACN,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA,CAAA;AAC7B,aAAA;AACA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/redirection.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search'~~, ['redirections']~~)\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAC2C,UAAM,GAAA;AAAA,EAAgB,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,eAAA;;;AAA/D,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;SADJ,IAAyF,CAAA,WAAA,IAAA,IAAA,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAF7F,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,CAAA,WAAA,EAAA,QAAA,EAAA,IAAA,CAAA,QAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,cAAA,EAAA,IAAA,CAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search')\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAC2C,UAAM,GAAA;AAAA,EAAgB,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,eAAA;;;AAA/D,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;SADJ,IAAyF,CAAA,WAAA,IAAA,IAAA,CAAA,KAAA,CAAA,OAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAF7F,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,CAAA,WAAA,EAAA,QAAA,EAAA,IAAA,CAAA,QAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,cAAA,EAAA,IAAA,CAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/redirection.vue2.js CHANGED Viewed

@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
     },
     setup(props, { slots }) {
         const $x = use$x();
-        const { redirections } = useState('search', ['redirections']);
+        const { redirections } = useState('search');
         /**
          * List of events to stop the animation.
          */

package/js/x-modules/search/components/redirection.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"redirection.vue2.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search'~~, ['redirections']~~)\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD;;;;;;AAME;AACF,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;~~AAEjB~~,~~QAAA,~~MAAM,EAAE,YAAW,EAAI,GAAE,QAAQ,CAAC,QAAQ,~~EAAE,CAAC,cAAc,CAAC,~~CAAA,CAAA;~~AAE5D~~;;AAEE;AACF,QAAA,MAAM,qBAAqB,GAAa;YACtC,oBAAoB;YACpB,kBAAkB;YAClB,yBAAyB;SAC3B,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,SAAS,GAAgB,GAAG,CAAC,CAAC,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,IAAI,CAAA,CAAA;AAE9B;;;;;;AAME;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAA+B,YAAY,EAAE,KAAK,CAAC,CAAC,CAAE,IAAG,IAAI,CAAA,CAAA;AAE1F;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;AAC3B,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA;AAC5B,YAAA,aAAa,CAAC,QAAQ,KAAI,CAAA;AAC5B,SAAA,CAAA;QAEA,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA,CAAA;AAEpF;;;;AAIE;QACF,MAAM,QAAS,GAAE,MAAM;AACrB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA;YAC5B,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,KAAM,CAAA,CAAA;YACrD,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAM,CAAC,GAAG,CAAA,CAAA;AAChD,SAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,gBAAgB,MAAM;AAC1B,YAAA,cAAc,EAAC,CAAA;AACf,YAAA,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAA,CAAA;AACxC,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CACH,YAAY,EACZ,MAAM;AACJ,YAAA,aAAa,CAAC,KAAM,GAAE,IAAG,CAAA;YACzB,IAAI,KAAK,CAAC,SAAS,MAAO,IAAG,WAAW,CAAC,KAAK,EAAE;AAC9C,gBAAA,SAAS,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAe,GAAE,IAAI,CAAA,CAAA;AAC3E,aAAA;AACF,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,OAAO;YACL,WAAW;YACX,QAAQ;YACR,aAAa;YACb,aAAa;YACb,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"redirection.vue2.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div v-if=\"redirection && slots.default\" class=\"x-redirection\" data-test=\"redirection\">\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Redirection as RedirectionModel } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { XEvent } from '../../../wiring/events.types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\nexport default defineComponent({\n name: 'Redirection',\n xModule: searchXModule.name,\n props: {\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n mode: {\n type: String as PropType<'auto' \| 'manual'>,\n default: 'auto',\n },\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n delayInSeconds: {\n type: Number,\n default: 0,\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n const { redirections } = useState('search')\n\n /\n List of events to stop the animation.\n /\n const eventsToStopAnimation: XEvent[] = [\n 'UserAcceptedAQuery',\n 'UserClearedQuery',\n 'UserSelectedARelatedTag',\n ]\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n const timeoutId: Ref<number> = ref(0)\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n const isRedirecting = ref(true)\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n const redirection = computed((): RedirectionModel \| null => redirections?.value[0] ?? null)\n\n /\n Stops the animation if the user search another query.\n \n @internal\n /\n const cancelRedirect = () => {\n clearTimeout(timeoutId.value)\n isRedirecting.value = false\n }\n\n eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect))\n\n /\n Dispatches the redirection, updating the url.\n \n @public\n /\n const redirect = () => {\n clearTimeout(timeoutId.value)\n $x.emit('UserClickedARedirection', redirection.value!)\n window.location.replace(redirection.value!.url)\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n const abortRedirect = () => {\n cancelRedirect()\n $x.emit('UserClickedAbortARedirection')\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n watch(\n redirections,\n () => {\n isRedirecting.value = true\n if (props.mode === 'auto' && redirection.value) {\n timeoutId.value = window.setTimeout(redirect, props.delayInSeconds 1000)\n }\n },\n { immediate: true },\n )\n\n return {\n redirection,\n redirect,\n abortRedirect,\n isRedirecting,\n slots,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n after the user clicks the abort redirection button.\n\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n}\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\nimport { Redirection } from '@empathyco/x-components/search'\nexport default {\n name: 'RedirectionDemo',\n components: {\n Redirection,\n },\n data() {\n return {\n mode: 'manual',\n }\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAeA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD;;;;;;AAME;AACF,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QAEjB,MAAM,EAAE,YAAW,EAAI,GAAE,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAE1C;;AAEE;AACF,QAAA,MAAM,qBAAqB,GAAa;YACtC,oBAAoB;YACpB,kBAAkB;YAClB,yBAAyB;SAC3B,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,SAAS,GAAgB,GAAG,CAAC,CAAC,CAAA,CAAA;AAEpC;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,IAAI,CAAA,CAAA;AAE9B;;;;;;AAME;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAA+B,YAAY,EAAE,KAAK,CAAC,CAAC,CAAE,IAAG,IAAI,CAAA,CAAA;AAE1F;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;AAC3B,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA;AAC5B,YAAA,aAAa,CAAC,QAAQ,KAAI,CAAA;AAC5B,SAAA,CAAA;QAEA,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA,CAAA;AAEpF;;;;AAIE;QACF,MAAM,QAAS,GAAE,MAAM;AACrB,YAAA,YAAY,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA;YAC5B,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,KAAM,CAAA,CAAA;YACrD,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,KAAM,CAAC,GAAG,CAAA,CAAA;AAChD,SAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,gBAAgB,MAAM;AAC1B,YAAA,cAAc,EAAC,CAAA;AACf,YAAA,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAA,CAAA;AACxC,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CACH,YAAY,EACZ,MAAM;AACJ,YAAA,aAAa,CAAC,KAAM,GAAE,IAAG,CAAA;YACzB,IAAI,KAAK,CAAC,SAAS,MAAO,IAAG,WAAW,CAAC,KAAK,EAAE;AAC9C,gBAAA,SAAS,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAe,GAAE,IAAI,CAAA,CAAA;AAC3E,aAAA;AACF,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;QAEA,OAAO;YACL,WAAW;YACX,QAAQ;YACR,aAAa;YACb,aAAa;YACb,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -35,20 +35,14 @@ var _sfc_main = defineComponent({
          * concatenated with list items from components such as `BannersList`, `PromotedsList`,
          * `BaseGrid` or any component that injects the list.
          */
-        const items = useState('search', ['results']).results;
+        const { query: searchQuery, totalResults, results: items, status: searchStatus, } = useState('search');
         provide(LIST_ITEMS_KEY, items);
-        /** The total number of results, taken from the state. */
-        const totalResults = useState('search', ['totalResults']).totalResults;
         /** This query is updated only when the search request has succeeded. */
         const providedQuery = ref('');
         provide(QUERY_KEY, providedQuery);
         /** Indicates if there are more available results that have not been injected. */
         const hasMoreItems = computed(() => 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.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ~~Result } from '@empathyco/x-types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type {~~ RequestStatus } from '../../../store/utils/status-store.utils'\nimport { computed, defineComponent, h, provide, ref, watch } from 'vue'\nimport {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { 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 /\nexport 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 const 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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\n\nexport 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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput, ResultsList } from '@empathyco/x-components/search'\n\nexport 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>\nimport { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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~~;;;;;;;;;;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,IAAI;AACd,SAAA;AACF,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,OAAM,CAAA;AAC3E,QAAA,~~OAAO,~~CAAwB,cAAwB,~~EAAE,KAAK,~~CAAA~~,~~CAAA;;AAG9D~~,~~QAAA~~,~~MAAM,~~YAAY,~~GAAwB~~,QAAQ,CAAC,QAAQ,~~EAAE~~,~~CAAC~~,~~cAAc~~,~~CAAC~~,CAAC,~~CAAC~~,~~YAAW~~,CAAA;;~~AAG1F~~,QAAA,MAAM,aAAc,GAAE,GAAG,CAAC,EAAE,CAAA,CAAA;AAC5B,QAAA,OAAO,~~CAAc~~,SAAmB,EAAE,aAAa,CAAA,CAAA;;~~AAGvD~~,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,YAAY,CAAC,KAAK,CAAA,CAAA;AAC3E,QAAA,OAAO,~~CAAuB~~,kBAA4B,EAAE,YAAY,CAAA,CAAA~~;;AAGxE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAK,CAAA;;AAGrF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI,CAAA~~;~~AAE3E~~;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAI,CAAA;AACxC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAA,CAAA;AAE9E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RequestStatus } from '../../../store/utils/status-store.utils'\nimport { computed, defineComponent, h, provide, ref, watch } from 'vue'\nimport {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { 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 /\nexport 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 {\n query: searchQuery,\n totalResults,\n results: items,\n status: searchStatus,\n } = useState('search')\n\n provide(LIST_ITEMS_KEY as string, items)\n\n /* This query is updated only when the search request has succeeded. /\n const providedQuery = ref('')\n provide(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(HAS_MORE_ITEMS_KEY as string, hasMoreItems)\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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport 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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\n\nexport 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>\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput, ResultsList } from '@empathyco/x-components/search'\n\nexport 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>\nimport { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BannersList,\n PromotedsList,\n },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaA;;;;;;;;;;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,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;QACF,MAAM,EACJ,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,YAAY,GACtB,GAAI,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAErB,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;;AAGvC,QAAA,MAAM,aAAc,GAAE,GAAG,CAAC,EAAE,CAAA,CAAA;AAC5B,QAAA,OAAO,CAAC,SAAmB,EAAE,aAAa,CAAA,CAAA;;AAG1C,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,YAAY,CAAC,KAAK,CAAA,CAAA;AAC3E,QAAA,OAAO,CAAC,kBAA4B,EAAE,YAAY,CAAA,CAAA;AAElD;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAI,CAAA;AACxC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAA,CAAA;AAE9E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

	@@ -1 +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 :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'~~, ['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>\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":["_resolveComponent","_openBlock","_createBlock","animation","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;SA3BPC,SAAO,EAAA,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IACZ,GAAA,EAAA,SAAA;AAAA,IACA,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,aAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IACC,WAAA,EAAA,eAAA;AAAA,IAAA,YAAA,EAAA,gBAAA;AAEU,IAAA,qBAAA,EAAU,IAAQ,CAAA,oBAAA;AAAA,GAAA,EAAA;YAXjCC,OAkBuD,CAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAExC,OAAA,CAAA;AAAA,KAAA,CAAA;AApBf,IAAA,IAAA,EAAAH,OAAA,CAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EA4BwE,UAAI,EAAA,KAAA;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;;;;;;;;;"}
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 :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":["_resolveComponent","_openBlock","_createBlock","animation","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;SA3BPC,SAAO,EAAA,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IACZ,GAAA,EAAA,SAAA;AAAA,IACA,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,aAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IACC,WAAA,EAAA,eAAA;AAAA,IAAA,YAAA,EAAA,gBAAA;AAEU,IAAA,qBAAA,EAAU,IAAQ,CAAA,oBAAA;AAAA,GAAA,EAAA;YAXjCC,OAkBuD,CAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAExC,OAAA,CAAA;AAAA,KAAA,CAAA;AApBf,IAAA,IAAA,EAAAH,OAAA,CAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EA4BwE,UAAI,EAAA,KAAA;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 CHANGED Viewed

@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
     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,

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

	@@ -1 +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 :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'~~, ['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>\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;~~AAEjB~~,~~QAAA,~~MAAM,EAAE,IAAI,EAAE,YAAW,~~EAAI~~,~~GAAE,~~QAAQ,CAAC,QAAQ,~~EAAE,CAAC,MAAM,CAAC,~~CAAA,CAAA;~~AAC1D~~,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;;;;"}
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 :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 CHANGED Viewed

	@@ -1 +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\">\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'~~, ['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>\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;;;;;;;;;"}
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\">\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 CHANGED Viewed

@@ -26,7 +26,7 @@ var _sfc_main = defineComponent({
     },
     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,
         });