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

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

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Promoted',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The promoted data.\n       *\n       * @public\n       */\n      promoted: {\n        type: Object as PropType<PromotedModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Emits the promoted click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = () => {\n        xBus.emit('UserClickedAPromoted', props.promoted);\n      };\n\n      return {\n        emitClickEvent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-promoted__image {\n    width: 100%;\n    object-fit: contain;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["promoted","_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;AACM,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAuBA,EAAAA,OAAAA,SAAAA,EAAAA,EAASC,kBAAG,CAAA,GAAA,EAAA;AAAA,IAAE,SAAM,MAAY,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,cAAA,IAAA,IAAA,CAAA,cAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAC,WAAS,QAAC,CAAA,GAAA;AAAA,IAAA,KAAA,EAAA,YAAA;AAC3E,IAAA,WAAA,EAAA,UAAA;AAAA,GAAA,EAAA;AAAiC,IAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,MAAqB,KAAKF,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAA,KAAA,EAAA,mBAAA;MACpE,GAEK,EAAA,IAAA,CAAA,QAAA,CAAA,KAAA;AAAA,KAAA,EAFD,MAHR,CAGc,EAAA,UAAA,CAAA;AAAA,IAAAE,kBAAA;AAAkD,MAAA,IAAA;AAAA,MAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CACvDH,CAAc,mBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,gBAAA;;;;;;;;;;;;"}
+{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a\n    :href=\"promoted.url\"\n    class=\"x-promoted\"\n    data-test=\"promoted\"\n    @click=\"emitUserClickedAPromoted\"\n    @click.right=\"emitUserClickedAPromoted\"\n    @click.middle=\"emitUserClickedAPromoted\"\n  >\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Promoted',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    promoted: {\n      type: Object as PropType<PromotedModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    const emitUserClickedAPromoted = () => {\n      xBus.emit('UserClickedAPromoted', props.promoted)\n    }\n\n    return {\n      emitUserClickedAPromoted,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'PromotedDemo',\n  components: {\n    Promoted,\n  },\n  data() {\n    return {\n      promoted: {\n        modelName: 'Promoted',\n        id: 'promoted-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'PromotedDemo',\n  components: {\n    Promoted,\n  },\n  data() {\n    return {\n      promoted: {\n        modelName: 'Promoted',\n        id: 'promoted-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["promoted","_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;AAES,SAAA,WAAA,CAAEA,IAAY,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACd,EAAA,OAAAC,SAAA,EAAa,EAAAC,kBAAA,CAAA,GAAA,EAAA;AAAA,IAClB,WAAS,QAAC,CAAA,GAAA;AAAA,IACT,KAAK,EAAA,YAAA;AAAA,IALV,WAAA,EAAA,UAAA;AAAA,IAOmB,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,aAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;IAEf,SAA6E,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAA5C,IAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,MAAqB,KAAKJ,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAA,KAAA,EAAA,mBAAA;MACpE,GAEK,EAAA,IAAA,CAAA,QAAA,CAAA,KAAA;AAAA,KAAA,EAFD,MAVR,CAUc,EAAA,UAAA,CAAA;AAAA,IAAAI,kBAAA;AAAkD,MAAA,IAAA;AAAA,MAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CACvDL,CAAc,mBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,gBAAA;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { useXBus } from '../../../composables/use-x-bus.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * A promoted result is just an item that has been inserted into the search results to advertise
@@ -23,9 +23,9 @@ var _sfc_main = defineComponent({
          */
         promoted: {
             type: Object,
-            required: true
+            required: true,
         },
-        titleClass: String
+        titleClass: String,
     },
     setup(props) {
         const xBus = useXBus();
@@ -34,13 +34,13 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const emitClickEvent = () => {
+        const emitUserClickedAPromoted = () => {
             xBus.emit('UserClickedAPromoted', props.promoted);
         };
         return {
-            emitClickEvent
+            emitUserClickedAPromoted,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue2.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Promoted',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The promoted data.\n       *\n       * @public\n       */\n      promoted: {\n        type: Object as PropType<PromotedModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Emits the promoted click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = () => {\n        xBus.emit('UserClickedAPromoted', props.promoted);\n      };\n\n      return {\n        emitClickEvent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-promoted__image {\n    width: 100%;\n    object-fit: contain;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAeE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,UAAU,EAAE,MAAK;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AACnD,SAAC,CAAA;QAED,OAAO;YACL,cAAa;SACd,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"promoted.vue2.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a\n    :href=\"promoted.url\"\n    class=\"x-promoted\"\n    data-test=\"promoted\"\n    @click=\"emitUserClickedAPromoted\"\n    @click.right=\"emitUserClickedAPromoted\"\n    @click.middle=\"emitUserClickedAPromoted\"\n  >\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Promoted as PromotedModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**\n * A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Promoted',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    promoted: {\n      type: Object as PropType<PromotedModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    const emitUserClickedAPromoted = () => {\n      xBus.emit('UserClickedAPromoted', props.promoted)\n    }\n\n    return {\n      emitUserClickedAPromoted,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'PromotedDemo',\n  components: {\n    Promoted,\n  },\n  data() {\n    return {\n      promoted: {\n        modelName: 'Promoted',\n        id: 'promoted-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Promoted } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'PromotedDemo',\n  components: {\n    Promoted,\n  },\n  data() {\n    return {\n      promoted: {\n        modelName: 'Promoted',\n        id: 'promoted-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAuBA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;QACF,MAAM,wBAAyB,GAAE,MAAM;YACrC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAA,CAAA;AAClD,SAAA,CAAA;QAEA,OAAO;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,10 +1,10 @@
 import { defineComponent, inject, computed, provide, h } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { searchXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
-import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.
@@ -24,13 +24,13 @@ var _sfc_main = defineComponent({
         /** Animation component that will be used to animate the promoteds. */
         animation: {
             type: AnimationProp,
-            default: 'ul'
-        }
+            default: 'ul',
+        },
     },
     setup(props, { slots }) {
         const $x = use$x();
         /** The promoteds to render from the state. */
-        const stateItems = useState('search', ['promoteds']).promoteds;
+        const stateItems = useState('search').promoteds;
         /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
         const injectedListItems = inject(LIST_ITEMS_KEY);
         /**
@@ -74,7 +74,7 @@ var _sfc_main = defineComponent({
             // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
             return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Promoted } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n   *\n   * The component provides a default slot which wraps the whole component with the `promoteds`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PromotedsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the promoteds. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The promoteds to render from the state. */\n      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let index = position - 1;\n          while (items.at(index)?.modelName === 'Promoted') {\n            index++;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the PromotedsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } 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: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;;AAGlB,QAAA,MAAM,UAAU,GAA4B,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;;AAGvF,QAAA,MAAM,iBAAkB,GAAE,MAAM,CAAkB,cAAwB,CAAC,CAAA;AAE3E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAK,CAAA;AACzB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC1C,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAO,GAAI,IAAI,CAAC,QAAO,IAAK,CAAC,CAAA;AACnC,gBAAA,IAAI,KAAM,GAAE,QAAO,GAAI,CAAC,CAAA;gBACxB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAE,CAAA;AACT,iBAAA;AACA,gBAAA,MAAM,oBAAmB,GAAI,KAAI,IAAK,KAAK,CAAC,MAAM,CAAA;gBAClD,MAAM,iBAAkB,GAAE,EAAE,CAAC,OAAO,CAAC,MAAK,KAAM,EAAE,CAAC,YAAY,CAAA;AAC/D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAK;AACP,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAC9B,aAAA;AACA,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AAEF;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAC,CAAA;AAExC,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;;;;"}
+{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n *\n * The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PromotedsList',\n  xModule: searchXModule.name,\n  props: {\n    /** Animation component that will be used to animate the promoteds. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /** The promoteds to render from the state. */\n    const stateItems = useState('search').promoteds\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * The `stateItems` concatenated with the `injectedListItems` if there are.\n     *\n     * @remarks This computed defines the merging strategy of the `stateItems` and the\n     * `injectedListItems`.\n     *\n     * @returns List of {@link ListItem}.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value!.length) {\n        return stateItems.value\n      }\n      const items = [...injectedListItems.value]\n      for (const item of stateItems.value) {\n        const position = item.position ?? 1\n        let index = position - 1\n        while (items.at(index)?.modelName === 'Promoted') {\n          index++\n        }\n        const isIndexInLoadedPages = index <= items.length\n        const areAllPagesLoaded = $x.results.length === $x.totalResults\n        if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n          break\n        }\n        items.splice(index, 0, item)\n      }\n      return items\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the PromotedsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'PromotedsListDemo',\n  components: {\n    SearchInput,\n    PromotedsList,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'PromotedsListDemo',\n  components: {\n    SearchInput,\n    PromotedsList,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'PromotedsListDemo',\n  components: {\n    SearchInput,\n    PromotedsList,\n    BaseGrid,\n  },\n}\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\nimport { PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'PromotedsListDemo',\n  components: {\n    SearchInput,\n    PromotedsList,\n  },\n}\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { ResultsList, PromotedsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'PromotedsListDemo',\n  components: {\n    SearchInput,\n    ResultsList,\n    PromotedsList,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;;QAGjB,MAAM,UAAS,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,SAAQ,CAAA;;AAG9C,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI,CAAA;AACxB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA,CAAA;AACzC,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAS,GAAE,IAAI,CAAC,QAAS,IAAG,CAAA,CAAA;AAClC,gBAAA,IAAI,KAAM,GAAE,WAAW,CAAA,CAAA;gBACvB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAC,CAAA;AACR,iBAAA;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK,CAAA;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAO,KAAI,EAAE,CAAC,YAAW,CAAA;AAC9D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAI;AACN,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA,CAAA;AAC7B,aAAA;AACA,YAAA,OAAO,KAAI,CAAA;AACb,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

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

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * A redirection is a component that sends the user to a link in the website. It is helpful when
@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          */
         mode: {
             type: String,
-            default: 'auto'
+            default: 'auto',
         },
         /**
          * The waiting time in seconds until the redirection is made.
@@ -32,19 +32,19 @@ var _sfc_main = defineComponent({
          */
         delayInSeconds: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     setup(props, { slots }) {
         const $x = use$x();
-        const { redirections } = useState('search', ['redirections']);
+        const { redirections } = useState('search');
         /**
          * List of events to stop the animation.
          */
         const eventsToStopAnimation = [
             'UserAcceptedAQuery',
             'UserClearedQuery',
-            'UserSelectedARelatedTag'
+            'UserSelectedARelatedTag',
         ];
         /**
          * The timeout id, used to cancel the redirection.
@@ -104,7 +104,6 @@ var _sfc_main = defineComponent({
         watch(redirections, () => {
             isRedirecting.value = true;
             if (props.mode === 'auto' && redirection.value) {
-                // eslint-disable-next-line @typescript-eslint/unbound-method
                 timeoutId.value = window.setTimeout(redirect, props.delayInSeconds * 1000);
             }
         }, { immediate: true });
@@ -113,9 +112,9 @@ var _sfc_main = defineComponent({
             redirect,
             abortRedirect,
             isRedirecting,
-            slots
+            slots,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

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

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

@@ -1,8 +1,8 @@
 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 { AnimationProp } from '../../../types/animation-prop.js';
 import { searchXModule } from '../x-module.js';
 
 /**
@@ -22,9 +22,9 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the results. */
         animation: {
-            type: animationProp,
-            default: 'ul'
-        }
+            type: AnimationProp,
+            default: 'ul',
+        },
     },
     emits: ['UserReachedResultsListEnd'],
     setup(props, { slots }) {
@@ -35,20 +35,14 @@ var _sfc_main = defineComponent({
          * concatenated with list items from components such as `BannersList`, `PromotedsList`,
          * `BaseGrid` or any component that injects the list.
          */
-        const items = useState('search', ['results']).results;
+        const { query: searchQuery, totalResults, results: items, status: searchStatus, } = useState('search');
         provide(LIST_ITEMS_KEY, items);
-        /** The total number of results, taken from the state. */
-        const totalResults = useState('search', ['totalResults']).totalResults;
         /** This query is updated only when the search request has succeeded. */
-        let providedQuery = ref('');
+        const providedQuery = ref('');
         provide(QUERY_KEY, providedQuery);
         /** Indicates if there are more available results that have not been injected. */
         const hasMoreItems = computed(() => items.value.length < totalResults.value);
         provide(HAS_MORE_ITEMS_KEY, hasMoreItems);
-        /** The status of the search request, taken from the state. */
-        const searchStatus = useState('search', ['status']).status;
-        /** The query of the search request, taken from the state. */
-        const searchQuery = useState('search', ['query']).query;
         /**
          * Updates the query to be provided to the child components
          * when the search request has succeeded.
@@ -72,7 +66,7 @@ var _sfc_main = defineComponent({
             // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
             return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

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

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

@@ -1,21 +1,20 @@
 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) {
   const _component_BaseDropdown = resolveComponent("BaseDropdown");
   return openBlock(), createBlock(_component_BaseDropdown, {
     ref: "rootRef",
-    "onUpdate:modelValue": _ctx.emitUserClickedASort,
     items: _ctx.items,
-    modelValue: _ctx.selectedSort,
+    "model-value": _ctx.selectedSort,
     animation: _ctx.animation,
     class: "x-sort-dropdown",
     "data-test": "sort-dropdown",
-    "aria-label": "Select sorting"
+    "aria-label": "Select sorting",
+    "onUpdate:modelValue": _ctx.emitUserClickedASort
   }, {
     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),
@@ -36,7 +34,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["onUpdate:modelValue", "items", "modelValue", "animation"]);
+  }, 8, ["items", "model-value", "animation", "onUpdate:modelValue"]);
 }
 var sortDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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

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