npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.6 → 6.0.0-alpha.61 - Mend

@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.61

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 (833) hide show

package/js/x-modules/related-tags/components/related-tag.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tag.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12,7 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "related-tag"
     },
     [
-      createCommentVNode("\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ relatedTag: _ctx.relatedTag, isSelected: _ctx.isSelected, shouldHighlightCurated: _ctx.shouldHighlightCurated })), () => [
         createTextVNode(
           toDisplayString(_ctx.relatedTag.tag),

package/js/x-modules/related-tags/components/related-tag.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n <button\n ref=\"buttonEl\"\n @click=\"clickRelatedTag\"\n class=\"x-tag x-related-tag\"\n data-test=\"related-tag\"\n :class=\"dynamicClasses\"\n >\n <!--\n @slot Custom content that replaces the RelatedTag default content.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} isSelected - Related tag status.\n @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n -->\n <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { VueCSSClasses } from '../../../utils/types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { relatedTagsXModule } from '../x-module';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n\n /*\n This component renders a related tag for a query. A related tag is a descriptive keyword\n * related to the current query to fine-tune the search. For example, if you are searching\n * for lego, a related tag could be city, refining the search with lego city.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedTag',\n xModule: relatedTagsXModule.name,\n props: {\n /\n Indicates if the curated related tag should be highlighted.\n \n @public\n /\n highlightCurated: {\n type: Boolean,\n default: false\n },\n /\n The related tag model data.\n \n @public\n /\n relatedTag: {\n type: Object as PropType<RelatedTagModel>,\n required: true\n }\n },\n setup(props) {\n const $x = use$x();\n\n const buttonEl = ref<HTMLElement \| undefined>();\n\n /\n The selected related tags.\n \n @internal\n /\n const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n 'relatedTags',\n ['selectedRelatedTags']\n );\n\n /\n Check if the related tag is selected or not.\n \n @returns If the related tag is selected.\n \n @internal\n /\n const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n /\n Blurs the related tag if it is selected.\n \n @public\n /\n const blurRelatedTag = () => {\n if (isSelected.value) {\n buttonEl.value?.blur();\n }\n };\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: buttonEl.value as HTMLElement,\n feature: 'related_tag'\n });\n\n /\n Emits events when the button is clicked.\n \n @public\n /\n const emitEvents = () => {\n // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n // isSelected value before emitting this selection events.\n $x.emit(\n isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n props.relatedTag,\n createEventMetadata()\n );\n $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n };\n\n /\n Handles the click on the button.\n \n @public\n /\n const clickRelatedTag = () => {\n emitEvents();\n blurRelatedTag();\n };\n\n /\n Check if the related tag is curated and should be highlighted.\n \n @returns True if the related tag is curated and should be highlighted.\n \n @internal\n /\n const shouldHighlightCurated = computed(\n () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n );\n\n /\n Adds the dynamic css classes to the component.\n \n @returns The class to be added to the component.\n \n @internal\n */\n const dynamicClasses = computed(\n (): VueCSSClasses => ({\n 'x-selected x-related-tag--is-selected': isSelected.value,\n 'x-related-tag--is-curated': shouldHighlightCurated.value\n })\n );\n\n return {\n buttonEl,\n dynamicClasses,\n isSelected,\n clickRelatedTag,\n shouldHighlightCurated\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n }\n };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n </RelatedTag>\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n },\n methods: {\n alertRelatedTag(relatedTag) {\n alert(`You have clicked the related tag: ${relatedTag.query}`);\n }\n }\n };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"~~,"_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"~~],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,gBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;~~AAGvB~~,~~MAAA~~,~~WAAA,~~EAAA,aAAA;AAAA,KAAA;AAMA,IAAA;AAAA,MAAAC,kBAAA,CAdJ,2SAcuF,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,sBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n <button\n ref=\"buttonEl\"\n @click=\"clickRelatedTag\"\n class=\"x-tag x-related-tag\"\n data-test=\"related-tag\"\n :class=\"dynamicClasses\"\n >\n <!--\n @slot Custom content that replaces the RelatedTag default content.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} isSelected - Related tag status.\n @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n -->\n <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import { VueCSSClasses } from '../../../utils/types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { relatedTagsXModule } from '../x-module';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n\n /*\n This component renders a related tag for a query. A related tag is a descriptive keyword\n * related to the current query to fine-tune the search. For example, if you are searching\n * for lego, a related tag could be city, refining the search with lego city.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedTag',\n xModule: relatedTagsXModule.name,\n props: {\n /\n Indicates if the curated related tag should be highlighted.\n \n @public\n /\n highlightCurated: {\n type: Boolean,\n default: false\n },\n /\n The related tag model data.\n \n @public\n /\n relatedTag: {\n type: Object as PropType<RelatedTagModel>,\n required: true\n }\n },\n setup(props) {\n const $x = use$x();\n\n const buttonEl = ref<HTMLElement \| undefined>();\n\n /\n The selected related tags.\n \n @internal\n /\n const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n 'relatedTags',\n ['selectedRelatedTags']\n );\n\n /\n Check if the related tag is selected or not.\n \n @returns If the related tag is selected.\n \n @internal\n /\n const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n /\n Blurs the related tag if it is selected.\n \n @public\n /\n const blurRelatedTag = () => {\n if (isSelected.value) {\n buttonEl.value?.blur();\n }\n };\n\n /\n Generates the {@link WireMetadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n target: buttonEl.value as HTMLElement,\n feature: 'related_tag'\n });\n\n /\n Emits events when the button is clicked.\n \n @public\n /\n const emitEvents = () => {\n // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n // isSelected value before emitting this selection events.\n $x.emit(\n isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n props.relatedTag,\n createEventMetadata()\n );\n $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n };\n\n /\n Handles the click on the button.\n \n @public\n /\n const clickRelatedTag = () => {\n emitEvents();\n blurRelatedTag();\n };\n\n /\n Check if the related tag is curated and should be highlighted.\n \n @returns True if the related tag is curated and should be highlighted.\n \n @internal\n /\n const shouldHighlightCurated = computed(\n () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n );\n\n /\n Adds the dynamic css classes to the component.\n \n @returns The class to be added to the component.\n \n @internal\n */\n const dynamicClasses = computed(\n (): VueCSSClasses => ({\n 'x-selected x-related-tag--is-selected': isSelected.value,\n 'x-related-tag--is-curated': shouldHighlightCurated.value\n })\n );\n\n return {\n buttonEl,\n dynamicClasses,\n isSelected,\n clickRelatedTag,\n shouldHighlightCurated\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n }\n };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n </RelatedTag>\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagDemo',\n components: {\n RelatedTag\n },\n data() {\n return {\n tag: {\n modelName: 'RelatedTag',\n query: 'high heel',\n isCurated: false,\n tag: 'heel'\n }\n };\n },\n methods: {\n alertRelatedTag(relatedTag) {\n alert(`You have clicked the related tag: ${relatedTag.query}`);\n }\n }\n };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,gBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;MASvB,WAA6F,EAAA,aAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tags.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, mergeProps, createVNode, normalizeClass } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, createVNode, normalizeClass, createCommentVNode } from 'vue';
 import './related-tags.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
@@ -21,7 +21,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-related-tags__item",
             "data-test": "related-tag-item"
           }, [
-            createCommentVNode("\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       "),
             renderSlot(_ctx.$slots, "related-tag", mergeProps({ ref_for: true }, { relatedTag, highlightCurated: _ctx.highlightCurated }), () => [
               createVNode(_component_RelatedTag, {
                 highlightCurated: _ctx.highlightCurated,
@@ -29,8 +28,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: normalizeClass(_ctx.itemClass)
               }, {
                 default: withCtx(({ relatedTag: relatedTag2, isSelected, shouldHighlightCurated }) => [
-                  createCommentVNode(" eslint-disable max-len "),
-                  createCommentVNode("\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            "),
                   renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTag2, isSelected, shouldHighlightCurated }), void 0, true)
                 ]),
                 _: 2

package/js/x-modules/related-tags/components/related-tags.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"relatedTags.length\"\n tag=\"ul\"\n class=\"x-related-tags\"\n data-test=\"related-tags\"\n >\n <li\n v-for=\"relatedTag in relatedTags\"\n :key=\"relatedTag.query\"\n class=\"x-related-tags__item\"\n data-test=\"related-tag-item\"\n >\n <!--\n @slot Custom content that replaces the RelatedTag component.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n -->\n <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n <RelatedTag\n :highlightCurated=\"highlightCurated\"\n :relatedTag=\"relatedTag\"\n :class=\"itemClass\"\n >\n <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Custom content that replaces the RelatedTag default content.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} isSelected - Related tag status.\n @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n -->\n <slot\n name=\"related-tag-content\"\n v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n />\n </template>\n </RelatedTag>\n </slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n import { computed, ComputedRef, defineComponent } from 'vue';\n import { relatedTagsXModule } from '../x-module';\n import { AnimationProp } from '../../../types/index';\n import { useGetter } from '../../../composables/use-getter';\n import RelatedTag from './related-tag.vue';\n\n /*\n This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for lego, different related tags could be city,\n * friends, or harry potter, refining the search with lego city, lego friends,\n * or lego harry potter.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedTags',\n xModule: relatedTagsXModule.name,\n components: {\n RelatedTag\n },\n props: {\n /\n Animation component that will be used to animate the suggestion.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n\n /\n Number of related tags to be rendered.\n \n @public\n /\n maxItemsToRender: Number,\n\n /\n Flag to indicate if the curated tags should be displayed different.\n \n @public\n /\n highlightCurated: {\n type: Boolean,\n default: false\n },\n\n /* Class inherited by content element. */\n itemClass: String\n },\n setup(props) {\n const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n 'relatedTags'\n ]).relatedTags;\n\n const relatedTags = computed((): RelatedTagModel[] =>\n storedRelatedTags.value.slice(0, props.maxItemsToRender)\n );\n\n return {\n relatedTags\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-related-tags {\n display: flex;\n flex-flow: row nowrap;\n list-style: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags />\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n </div>\n</template>\n\n<script>\n import Vue from 'vue';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n // Registering the animation as a global component\n Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag=\"{ relatedTag }\">\n <RelatedTag :relatedTag=\"relatedTag\" />\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags,\n RelatedTag\n }\n };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag-content=\"{ relatedTag }\">\n <span>{{ relatedTag.tag }}</span>\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags />\n <ResultsList #result=\"{ item }\">\n <span class=\"result\">\n {{ item.name }}\n </span>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n import { ResultsList } from '@empathyco/x-components/search';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags,\n ResultsList\n }\n };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n <span>{{ relatedTag.tag }}</span>\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_withCtx","relatedTag"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;AAEV,YAAA,WAAA,EAAA,kBAAA;AAAA,WAKA,EAAA;AAAA,YAmBeG,kBAAA,CAAA,2OAAA,CAAA;AAAA,YAAAC,UAAA,CAjBV,aAAkBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;AAEhC,gBAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,EAAA,UAAA,EAAAC,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,KAAA;AAAA,kBAMAR,kBAGE,CAAA,0BAAA,CAAA;AAAA,kBAAAA,kBAAA,CAAA,iVAAA,CAAA;AApCd,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAK,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAR,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n v-if=\"relatedTags.length\"\n tag=\"ul\"\n class=\"x-related-tags\"\n data-test=\"related-tags\"\n >\n <li\n v-for=\"relatedTag in relatedTags\"\n :key=\"relatedTag.query\"\n class=\"x-related-tags__item\"\n data-test=\"related-tag-item\"\n >\n <!--\n @slot Custom content that replaces the RelatedTag component.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n -->\n <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n <RelatedTag\n :highlightCurated=\"highlightCurated\"\n :relatedTag=\"relatedTag\"\n :class=\"itemClass\"\n >\n <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Custom content that replaces the RelatedTag default content.\n @binding {RelatedTag} relatedTag - Related tag data.\n @binding {boolean} isSelected - Related tag status.\n @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n -->\n <slot\n name=\"related-tag-content\"\n v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n />\n </template>\n </RelatedTag>\n </slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n import { computed, ComputedRef, defineComponent } from 'vue';\n import { relatedTagsXModule } from '../x-module';\n import { AnimationProp } from '../../../types/index';\n import { useGetter } from '../../../composables/use-getter';\n import RelatedTag from './related-tag.vue';\n\n /*\n This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for lego, different related tags could be city,\n * friends, or harry potter, refining the search with lego city, lego friends,\n * or lego harry potter.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedTags',\n xModule: relatedTagsXModule.name,\n components: {\n RelatedTag\n },\n props: {\n /\n Animation component that will be used to animate the suggestion.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n\n /\n Number of related tags to be rendered.\n \n @public\n /\n maxItemsToRender: Number,\n\n /\n Flag to indicate if the curated tags should be displayed different.\n \n @public\n /\n highlightCurated: {\n type: Boolean,\n default: false\n },\n\n /* Class inherited by content element. */\n itemClass: String\n },\n setup(props) {\n const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n 'relatedTags'\n ]).relatedTags;\n\n const relatedTags = computed((): RelatedTagModel[] =>\n storedRelatedTags.value.slice(0, props.maxItemsToRender)\n );\n\n return {\n relatedTags\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-related-tags {\n display: flex;\n flex-flow: row nowrap;\n list-style: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags />\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n </div>\n</template>\n\n<script>\n import Vue from 'vue';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n // Registering the animation as a global component\n Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag=\"{ relatedTag }\">\n <RelatedTag :relatedTag=\"relatedTag\" />\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags,\n RelatedTag\n }\n };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag-content=\"{ relatedTag }\">\n <span>{{ relatedTag.tag }}</span>\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags />\n <ResultsList #result=\"{ item }\">\n <span class=\"result\">\n {{ item.name }}\n </span>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n import { ResultsList } from '@empathyco/x-components/search';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags,\n ResultsList\n }\n };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n <span>{{ relatedTag.tag }}</span>\n </RelatedTags>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n export default {\n name: 'RelatedTagsDemo',\n components: {\n SearchInput,\n RelatedTags\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","relatedTag","_createCommentVNode"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;YAOV,WAoBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AAlBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAkBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AAzB5C,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAI,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/related-tags/store/emitters.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { createEmitterArrayFilter } from '../../../utils/array.js';
 import { relatedTagsXStoreModule } from './module.js';

package/js/x-modules/related-tags/store/emitters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { createEmitterArrayFilter } from '../../../utils/array';\nimport { relatedTagsXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the related-tags module.\n \n @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n RelatedTagsChanged: state => state.relatedTags,\n RelatedTagsRequestUpdated: (_, getters) => getters.request,\n SelectedRelatedTagsChanged: {\n selector: state => state.selectedRelatedTags,\n filter: createEmitterArrayFilter('tag')\n }\n});\n"],"names":[],"mappings":"~~;;;;~~AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { createEmitterArrayFilter } from '../../../utils/array';\nimport { relatedTagsXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the related-tags module.\n \n @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n RelatedTagsChanged: state => state.relatedTags,\n RelatedTagsRequestUpdated: (_, getters) => getters.request,\n SelectedRelatedTagsChanged: {\n selector: state => state.selectedRelatedTags,\n filter: createEmitterArrayFilter('tag')\n }\n});\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './scroll-to-top.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14,7 +14,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         events: _ctx.events
       }, {
         default: withCtx(() => [
-          createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3

package/js/x-modules/scroll/components/scroll-to-top.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { NoAnimation, BaseEventButton } from '../../../components';\n import { XEventsTypes } from '../../../wiring';\n import { scrollXModule } from '../x-module';\n import { AnimationProp } from '../../../types';\n import { useState } from '../../../composables';\n import { MainScrollId } from './scroll.const';\n\n /*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\n export default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId\n }\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll', ['data']);\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false\n };\n });\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n );\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n );\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n );\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n );\n\n return {\n events,\n isVisible\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\n import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","~~_createCommentVNode~~","~~_renderSlot~~"],"mappings":";;;;;AAYc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAZd,iBACkBC,CAAAA,CAAAA;SAENC,SAAS,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IADjB,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAFJ,wBAIsC,EAAAF,WAAA,CAAA,0BAAA,EAAA;AAAA,QAChC,GAAA,EAAA,CAAA;AAAA,QACA,KAAA,EAAA,0BAAA;AAAA,QACC,WAAQG,EAAAA,eAAAA;AAAAA,QAAAA,YAAAA,EAAAA,eAAAA;AAPf,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA~~;iBAUMD,OAAQ,CAAA,MAAA;~~AAAA,~~UAAAE,kBAAA,CAAA,gEAAA,CAAA;AAVd,~~UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,~~IAAAD~~,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { NoAnimation, BaseEventButton } from '../../../components';\n import { XEventsTypes } from '../../../wiring';\n import { scrollXModule } from '../x-module';\n import { AnimationProp } from '../../../types';\n import { useState } from '../../../composables';\n import { MainScrollId } from './scroll.const';\n\n /*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\n export default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId\n }\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll', ['data']);\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false\n };\n });\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n );\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n );\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n );\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n );\n\n return {\n events,\n isVisible\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\n import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","isVisible","_createBlock","_resolveDynamicComponent","_withCtx","events","_renderSlot","_createCommentVNode"],"mappings":";;;;;AAYc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAZd,iBACkBC,CAAAA,CAAAA;SAENC,SAAS,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IADjB,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAFJ,wBAIsC,EAAAF,WAAA,CAAA,0BAAA,EAAA;AAAA,QAChC,GAAA,EAAA,CAAA;AAAA,QACA,KAAA,EAAA,0BAAA;AAAA,QACC,WAAQG,EAAAA,eAAAA;AAAAA,QAAAA,YAAAA,EAAAA,eAAAA;AAPf,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,OAAA,EAAA;;AAAA,UAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;AAAA,QAAA,CAAA,EAAA,CAAA;AAAA;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue2.js CHANGED Viewed

@@ -82,6 +82,8 @@ import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
 import '../../../components/base-rating.vue2.js';
 import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
 import '../../../components/base-switch.vue2.js';
 import '../../../components/base-switch.vue3.js';
 import '../../../components/base-variable-column-grid.vue2.js';
@@ -94,6 +96,12 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
+import '../../../components/display-click-provider.vue.js';
+import '../../../components/base-teleport.vue2.js';
+import '../../../components/base-teleport.vue3.js';
 import { scrollXModule } from '../x-module.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
 import '../../../composables/create-use-device.js';

package/js/x-modules/scroll/components/scroll-to-top.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { NoAnimation, BaseEventButton } from '../../../components';\n import { XEventsTypes } from '../../../wiring';\n import { scrollXModule } from '../x-module';\n import { AnimationProp } from '../../../types';\n import { useState } from '../../../composables';\n import { MainScrollId } from './scroll.const';\n\n /*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\n export default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId\n }\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll', ['data']);\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false\n };\n });\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n );\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n );\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n );\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n );\n\n return {\n events,\n isVisible\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\n import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop\n }\n };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <BaseEventButton\n v-if=\"isVisible\"\n class=\"x-scroll-to-top x-button\"\n data-test=\"scroll-to-top\"\n aria-label=\"Scroll to top\"\n :events=\"events\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\n <slot />\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { NoAnimation, BaseEventButton } from '../../../components';\n import { XEventsTypes } from '../../../wiring';\n import { scrollXModule } from '../x-module';\n import { AnimationProp } from '../../../types';\n import { useState } from '../../../composables';\n import { MainScrollId } from './scroll.const';\n\n /*\n The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n \n @public\n /\n export default defineComponent({\n name: 'ScrollToTop',\n xModule: scrollXModule.name,\n components: { BaseEventButton },\n props: {\n /\n Animation to use for showing/hiding the button.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n },\n /\n Threshold in pixels from the top to show the button.\n \n @public\n /\n thresholdPx: Number,\n /\n Id of the target scroll component.\n \n @public\n /\n scrollId: {\n type: String,\n default: MainScrollId\n }\n },\n setup(props) {\n /\n State of all the scroll components in this module.\n \n @internal\n /\n // TODO: Directly retrieve the needed data in this computed property\n const { data } = useState('scroll', ['data']);\n\n /\n The scroll data retrieved for this component.\n \n @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n * passed. Otherwise it returns `null`.\n * @internal\n /\n const scrollData = computed(() => {\n return props.scrollId && data.value[props.scrollId]\n ? data.value[props.scrollId]\n : {\n position: 0,\n direction: 'UP',\n hasReachedStart: false,\n hasAlmostReachedEnd: false,\n hasReachedEnd: false\n };\n });\n\n /\n Event that will be emitted when the scroll to top is clicked.\n \n @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n * @internal\n /\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n );\n\n /\n Checks if the thresholdPx prop has been provided and if it is a number.\n \n @returns If the thresholdPx is a number or not.\n * @internal\n /\n const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n /\n Checks if the threshold has been reached in case the threshold strategy is in use.\n \n @returns If the scrollTop is bigger than the thresholdPx.\n * @internal\n /\n const isThresholdReached = computed(\n () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n );\n\n /\n Returns if the scroll has almost reached its end or not.\n \n @returns True if the scroll has almost reached the end and the user is still scrolling down.\n * @internal\n /\n const hasAlmostReachedScrollEnd = computed(\n () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n );\n\n /\n Whether if the button is visible or not depending on the strategy being used.\n \n @returns If the button should be visible or not.\n * @internal\n */\n const isVisible = computed(() =>\n useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n );\n\n return {\n events,\n isVisible\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the id of the scroll\n that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n <div>\n <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n <span>Scroll to top</span>\n </ScrollToTop>\n </div>\n</template>\n\n<script>\n import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollToTopTest',\n components: {\n ScrollToTop\n }\n };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/scroll/store/emitters.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { scrollXStoreModule } from './module.js';

package/js/x-modules/scroll/store/emitters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/scroll/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { scrollXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the scroll module.\n \n @internal\n */\nexport const scrollEmitters = createStoreEmitters(scrollXStoreModule, {});\n"],"names":[],"mappings":"~~;;;~~AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
1	+ {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/scroll/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { scrollXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the scroll module.\n \n @internal\n */\nexport const scrollEmitters = createStoreEmitters(scrollXStoreModule, {});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './partial-results-list.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from 'vue';
 import './partial-results-list.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-partial-result",
             "data-test": "partial-result"
           }, [
-            createCommentVNode("\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      "),
             renderSlot(_ctx.$slots, "default", { partialResult }, void 0, true)
           ]);
         }),

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 :partialResult=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { PartialResult } from '@empathyco/x-types';\n import { computed, ComputedRef, defineComponent } from 'vue';\n import { searchXModule } from '../x-module';\n import { AnimationProp } from '../../../types/animation-prop';\n import { useState } from '../../../composables/use-state';\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 /\n export 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;~~AAE1B~~,~~YAAA~~,~~WAAA,~~EAAA,gBAAA;AAAA,~~WAIA~~,EAAA~~;AAAA,YAAAG,kBAAA,CAAA,mIAAA,CAAA~~;;;~~AAlBN~~,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,~~IAAAA~~,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 :partialResult=\"partialResult\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { PartialResult } from '@empathyco/x-types';\n import { computed, ComputedRef, defineComponent } from 'vue';\n import { searchXModule } from '../x-module';\n import { AnimationProp } from '../../../types/animation-prop';\n import { useState } from '../../../composables/use-state';\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 /\n export 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,WAAuC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB7C,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/results-list.vue.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { defineComponent, provide, ref, computed, watch, h } from 'vue';
 import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { animationProp } from '../../../utils/options-api.js';
 import { useState } from '../../../composables/use-state.js';
 import { searchXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 /**
  * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the results. */
         animation: {
-            type: animationProp,
+            type: AnimationProp,
             default: 'ul'
         }
     },

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

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

@@ -1,5 +1,5 @@
 import _sfc_main from './sort-dropdown.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -15,7 +15,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Select sorting"
   }, {
     toggle: withCtx(({ isOpen, item }) => [
-      createCommentVNode("\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      "),
       renderSlot(_ctx.$slots, "toggle", normalizeProps(guardReactiveProps({ isOpen, item })), () => [
         createTextVNode(
           toDisplayString(item),
@@ -25,7 +24,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     item: withCtx(({ item, isHighlighted, isSelected }) => [
-      createCommentVNode("\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      "),
       renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isHighlighted, isSelected })), () => [
         createTextVNode(
           toDisplayString(item),

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 @update:modelValue=\"emitUserClickedASort\"\n :items=\"items\"\n :modelValue=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue, { defineComponent, PropType, ref, watch } from 'vue';\n\n import BaseDropdown from '../../../components/base-dropdown.vue';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n import { searchXModule } from '../x-module';\n\n /*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\n export default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true\n },\n /* The transition to use for opening and closing the dropdown. /\n animation: [String, Object] as PropType<string \| typeof Vue>\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x();\n\n const { sort: selectedSort } = useState('search', ['sort']);\n const rootRef = ref<typeof BaseDropdown>();\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true\n });\n\n /\n Emits the events related to the selection of a sort value.\n \n @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n \n @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });\n emit('change', sort);\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","emitUserClickedASort","selectedSort","animation","_withCtx","~~_createCommentVNode","~~_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;AA3BZ,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAmBC,uBAAoB,EAAA;AAAA,IACvC,GAAK,EAAA,SAAA;AAAA,IACL,qBAAYC,EAAAA,IAAAA,CAAAA,oBAAAA;AAAAA,IACZ,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,UAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IAAA,WAAA,EAAA,eAAA;IAEW,YAAM,EAAA,gBAAA;AAAA,GAAA,EAAA;~~AAOf~~,~~IAAA~~,~~MAAA~~,~~EAAAC~~,~~OAAA,CAA+D,CAlBrE,~~EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,~~MAkB2DC,kBAAA,CAAA,sSAAA,CAAA;AAAA,~~MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;~~AAE5C~~,OAAA,CAAA;AAAA,KAAA,CAAA;~~AAQT~~,IAAA,IAAA,~~EAAAJ~~,OAAA,~~CAAgF~~,~~CA5BtF~~,EAAA,IAAA,EAAA,aAAA,~~EAAA~~,~~UAAA~~,EAAA,KAAA;AAAA,~~MA4B4EC,kBAAA,CAAA,2WAAA,CAAA;AAAA,~~MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AA5B5E,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n @update:modelValue=\"emitUserClickedASort\"\n :items=\"items\"\n :modelValue=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue, { defineComponent, PropType, ref, watch } from 'vue';\n\n import BaseDropdown from '../../../components/base-dropdown.vue';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n import { searchXModule } from '../x-module';\n\n /*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n /\n export default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /* The list of possible sort values. /\n items: {\n type: Array as PropType<Sort[]>,\n required: true\n },\n /* The transition to use for opening and closing the dropdown. /\n animation: [String, Object] as PropType<string \| typeof Vue>\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x();\n\n const { sort: selectedSort } = useState('search', ['sort']);\n const rootRef = ref<typeof BaseDropdown>();\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true\n });\n\n /\n Emits the events related to the selection of a sort value.\n \n @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n \n @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });\n emit('change', sort);\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","emitUserClickedASort","selectedSort","animation","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;AA3BZ,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAmBC,uBAAoB,EAAA;AAAA,IACvC,GAAK,EAAA,SAAA;AAAA,IACL,qBAAYC,EAAAA,IAAAA,CAAAA,oBAAAA;AAAAA,IACZ,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,UAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IAAA,WAAA,EAAA,eAAA;IAEW,YAAM,EAAA,gBAAA;AAAA,GAAA,EAAA;YAXrBC,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/store/actions/fetch-and-save-search-response.action.js CHANGED Viewed

@@ -24,13 +24,20 @@ const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
  */
 function enrichRequest(request, state) {
     const { page, ...restRequest } = request;
-    const { config: { pageSize }, origin, results } = state;
-    const start = page === 1 ? 0 : results.length;
+    const { config: { pageSize, pageMode }, origin, results } = state;
+    let start;
+    if (pageMode === 'infinite_scroll') {
+        start = page === 1 ? 0 : results.length;
+    }
+    else {
+        start = state.config.pageSize * (page - 1);
+    }
+    const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;
     return {
         ...restRequest,
         ...(origin && { origin }),
         start,
-        rows: pageSize * page - start
+        rows
     };
 }
 /**

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

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

package/js/x-modules/search/store/actions/save-search-response.action.js CHANGED Viewed

@@ -7,10 +7,11 @@
  *
  * @public
  */
-const saveSearchResponse = ({ commit, state, getters }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging, displayTagging }) => {
+const saveSearchResponse = ({ commit, state, getters }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging, displayTagging, stats }) => {
     if (totalResults === 0) {
         commit('setIsNoResults', true);
         if (getters.request && Object.keys(getters.request.filters).length > 0) {
+            commit('setSelectedFilters', []);
             commit('setFromNoResultsWithFilters', true);
         }
     }
@@ -38,6 +39,7 @@ const saveSearchResponse = ({ commit, state, getters }, { results, partialResult
     }
     commit('setTotalResults', totalResults);
     commit('setSpellcheck', spellcheck ?? '');
+    commit('setStats', stats);
 };
 export { saveSearchResponse };

package/js/x-modules/search/store/actions/save-search-response.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/save-search-response.action.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchActions.saveSearchResponse}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param response - The {@link @empathyco/x-types#SearchResponse} to save.\n \n @public\n */\nexport const saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse'] = (\n { commit, state, getters },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging,\n displayTagging\n }\n) => {\n if (totalResults === 0) {\n commit('setIsNoResults', true);\n if (getters.request && Object.keys(getters.request.filters!).length > 0) {\n commit('setFromNoResultsWithFilters', true);\n }\n } else {\n commit('setIsNoResults', false);\n }\n\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners ?? []);\n commit('setPromoteds', promoteds ?? []);\n commit('setRedirections', redirections ?? []);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n\n if (displayTagging) {\n commit('setDisplayTagging', displayTagging);\n }\n\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n};\n"],"names":[],"mappings":"~~AAEA~~;;;;;;;;AAQG;~~AACI~~,~~MAAM~~,kBAAkB,GAAwD,CACrF,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1B,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,~~EACf~~,KACC;IACF,IAAI,YAAY,KAAK,CAAC,EAAE;AACtB,QAAA,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAC/B,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AACvE,YAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC;AAC7C,SAAA;AACF,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AACjC,KAAA;IAED,IAAI,KAAK,CAAC,eAAe,EAAE;AACzB,QAAA,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAClC,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAC9B,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,CAAC,cAAc,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;AACxC,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;AAC/C,KAAA;AAED,IAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;AAElD,IAAA,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAC7B,KAAA;AAED,IAAA,IAAI,YAAY,EAAE;AAChB,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACzC,KAAA;AAED,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAC7C,KAAA;AAED,IAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACxC,IAAA,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;~~AAC5C~~;;;;"}
1	+ {"version":3,"file":"save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/save-search-response.action.ts"],"sourcesContent":["import { Stats } from '@empathyco/x-types';\nimport { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchActions.saveSearchResponse}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param response - The {@link @empathyco/x-types#SearchResponse} to save.\n \n @public\n */\nexport const saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse'] = (\n { commit, state, getters },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging,\n displayTagging,\n stats\n }\n) => {\n if (totalResults === 0) {\n commit('setIsNoResults', true);\n if (getters.request && Object.keys(getters.request.filters!).length > 0) {\n commit('setSelectedFilters', []);\n commit('setFromNoResultsWithFilters', true);\n }\n } else {\n commit('setIsNoResults', false);\n }\n\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners ?? []);\n commit('setPromoteds', promoteds ?? []);\n commit('setRedirections', redirections ?? []);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n\n if (displayTagging) {\n commit('setDisplayTagging', displayTagging);\n }\n\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n commit('setStats', stats as Stats);\n};\n"],"names":[],"mappings":"AAGA;;;;;;;;AAQG;AACU,MAAA,kBAAkB,GAAwD,CACrF,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1B,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,KAAK,EACN,KACC;IACF,IAAI,YAAY,KAAK,CAAC,EAAE;AACtB,QAAA,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAC/B,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AACvE,YAAA,MAAM,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;AACjC,YAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC;AAC7C,SAAA;AACF,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AACjC,KAAA;IAED,IAAI,KAAK,CAAC,eAAe,EAAE;AACzB,QAAA,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAClC,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAC9B,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,CAAC,cAAc,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;AACxC,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;AAC/C,KAAA;AAED,IAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;AAElD,IAAA,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAC7B,KAAA;AAED,IAAA,IAAI,YAAY,EAAE;AAChB,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACzC,KAAA;AAED,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAC7C,KAAA;AAED,IAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACxC,IAAA,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;AAC1C,IAAA,MAAM,CAAC,UAAU,EAAE,KAAc,CAAC,CAAC;AACrC;;;;"}

package/js/x-modules/search/store/emitters.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { isStringEmpty } from '../../../utils/string.js';
 import { searchXStoreModule } from './module.js';