@empathyco/x-components 6.0.0-alpha.18 → 6.0.0-alpha.181

package/js/x-modules/search/components/partial-query-button.vue2.js

@@ -1,55 +1,55 @@
 import { defineComponent, ref } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
+import { searchXModule } from '../x-module.js';
 
-/**
- * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
- * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user
- * intention to set the partial query.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'PartialQueryButton',
-    xModule: searchXModule.name,
-    props: {
-        /**
-         * The query property.
-         *
-         * @public
-         */
-        query: {
-            type: String,
-            required: true
-        }
-    },
-    setup(props) {
-        const $x = use$x();
-        const partialButtonEl = ref();
-        /**
-         * Generates the {@link WireMetadata} object omitting the moduleName.
-         *
-         * @returns The {@link WireMetadata} object omitting the moduleName.
-         * @internal
-         */
-        const createEventMetadata = () => ({
-            target: partialButtonEl.value,
-            feature: 'partial_result'
-        });
-        /**
-         * Emits events when the button is clicked.
-         *
-         * @public
-         */
-        const emitEvents = () => {
-            $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());
-            $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());
-        };
-        return {
-            partialButtonEl,
-            emitEvents
-        };
-    }
+/**
+ * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
+ * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user
+ * intention to set the partial query.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'PartialQueryButton',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * The query property.
+         *
+         * @public
+         */
+        query: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props) {
+        const $x = use$x();
+        const partialButtonEl = ref();
+        /**
+         * Generates the {@link WireMetadata} object omitting the moduleName.
+         *
+         * @returns The {@link WireMetadata} object omitting the moduleName.
+         * @internal
+         */
+        const createEventMetadata = () => ({
+            target: partialButtonEl.value,
+            feature: 'partial_result',
+        });
+        /**
+         * Emits events when the button is clicked.
+         *
+         * @public
+         */
+        const emitEvents = () => {
+            $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());
+            $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());
+        };
+        return {
+            partialButtonEl,
+            emitEvents,
+        };
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"partial-query-button.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    @click=\"emitEvents\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n   * intention to set the partial query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialQueryButton',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The query property.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const partialButtonEl = ref<HTMLElement>();\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: partialButtonEl.value,\n        feature: 'partial_result'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());\n        $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());\n      };\n\n      return {\n        partialButtonEl,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\n  import { PartialQueryButton } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      PartialQueryButton\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAgB,GAAE,GAAG,EAAe,CAAA;AAE1C;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAe;AACzB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACjE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACxE,SAAC,CAAA;QAED,OAAO;YACL,eAAe;YACf,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"partial-query-button.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialQueryButton',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const partialButtonEl = ref<HTMLElement>()\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: partialButtonEl.value,\n      feature: 'partial_result',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n      $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n    }\n\n    return {\n      partialButtonEl,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    PartialQueryButton,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,eAAgB,GAAE,GAAG,EAAc,CAAA;AAEzC;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAgB;AAC1B,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AAChE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACvE,SAAA,CAAA;QAEA,OAAO;YACL,eAAe;YACf,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

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

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

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

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

@@ -1,58 +1,56 @@
 import { defineComponent, computed } from 'vue';
-import { searchXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { searchXModule } from '../x-module.js';
 
-/**
- * It renders a list of partial results from {@link SearchState.partialResults} by default.
- * It also provides the partial result slot to customize the item with the partial result bound.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'PartialResultsList',
-    xModule: searchXModule.name,
-    props: {
-        /**
-         * Animation component that will be used to animate the partial results.
-         *
-         * @public
-         */
-        animation: {
-            type: AnimationProp,
-            default: 'ul'
-        },
-        /**
-         * Maximum number of partial results to show.
-         *
-         * @public
-         */
-        maxItemsToRender: {
-            type: Number,
-            default: 5
-        }
-    },
-    setup(props) {
-        /**
-         * The partials results from the search state.
-         *
-         * @public
-         */
-        const items = useState('search', [
-            'partialResults'
-        ]).partialResults;
-        /**
-         * A limited number of partial results.
-         *
-         * @returns The partial results sliced by the maxItemsToRender.
-         *
-         * @internal
-         */
-        const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
-        return {
-            partialResults
-        };
-    }
+/**
+ * It renders a list of partial results from {@link SearchState.partialResults} by default.
+ * It also provides the partial result slot to customize the item with the partial result bound.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'PartialResultsList',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * Animation component that will be used to animate the partial results.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul',
+        },
+        /**
+         * Maximum number of partial results to show.
+         *
+         * @public
+         */
+        maxItemsToRender: {
+            type: Number,
+            default: 5,
+        },
+    },
+    setup(props) {
+        /**
+         * The partials results from the search state.
+         *
+         * @public
+         */
+        const items = useState('search').partialResults;
+        /**
+         * A limited number of partial results.
+         *
+         * @returns The partial results sliced by the maxItemsToRender.
+         *
+         * @internal
+         */
+        const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
+        return {
+            partialResults,
+        };
+    },
 });
 
 export { _sfc_main as default };

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

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

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

@@ -1,5 +1,5 @@
 import _sfc_main from './promoted.vue2.js';
-import { openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, toDisplayString } from 'vue';
 import './promoted.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -7,10 +7,12 @@ const _hoisted_1 = ["href"];
 const _hoisted_2 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitClickEvent && _ctx.emitClickEvent(...args)),
     href: _ctx.promoted.url,
     class: "x-promoted",
-    "data-test": "promoted"
+    "data-test": "promoted",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args)),
+    onContextmenu: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args), ["right"])),
+    onMouseup: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args), ["middle"]))
   }, [
     createElementVNode("img", {
       src: _ctx.promoted.image,
@@ -27,7 +29,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       3
       /* TEXT, CLASS */
     )
-  ], 8, _hoisted_1);
+  ], 40, _hoisted_1);
 }
 var promoted = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4a8fc4b3"]]);
 

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":["_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString"],"mappings":";;;;;AAAA,MAAA,UAAA,GAAA,CAAA,MAAA,CAAA,CAAA;AAAA,MAAA,UAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA,CAAA;;sBACEA,kBAYI,CAAA,GAAA,EAAA;AAAA,IAXD,MAAM,IAAS,CAAA,QAAA,CAAA,GAAA;AAAA,IAChB,KAAM,EAAA,YAAA;AAAA,IACN,WAAU,EAAA,UAAA;AAAA,IACT,SAAK,MAAE,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,IALZ,oEAMkB,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,IAN1C,gEAOmB,IAAwB,CAAA,wBAAA,IAAA,IAAA,CAAA,wBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAEvCC,kBAA6E,CAAA,KAAA,EAAA;AAAA,MAAvE,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAO,KAAM,EAAA,mBAAA;AAAA,MAAqB,KAAK,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,KATxE,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA;AAAA,IAUIA,kBAAA;AAAA,MAEK,IAAA;AAAA,MAAA;AAAA,QAFD,KAAA,EAVRC,cAUc,CAAA,CAAA,mBAAA,EAA4B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,QAAE,WAAU,EAAA,gBAAA;AAAA,OAAA;AACvD,MAAAC,eAAA,CAAA,IAAA,CAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,GAXvB,EAAA,EAAA,EAAA,UAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,46 +1,46 @@
 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
- * something. Usually it is one of the first items in the grid, and has the same shape as a
- * result. It just contains a link to the promoted content, an image, and a title.
- *
- * Additionally, this component exposes the following props to modify the classes of the
- * elements: `titleClass`.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'Promoted',
-    xModule: searchXModule.name,
-    props: {
-        /**
-         * The promoted data.
-         *
-         * @public
-         */
-        promoted: {
-            type: Object,
-            required: true
-        },
-        titleClass: String
-    },
-    setup(props) {
-        const xBus = useXBus();
-        /**
-         * Emits the promoted click event.
-         *
-         * @internal
-         */
-        const emitClickEvent = () => {
-            xBus.emit('UserClickedAPromoted', props.promoted);
-        };
-        return {
-            emitClickEvent
-        };
-    }
+/**
+ * A promoted result is just an item that has been inserted into the search results to advertise
+ * something. Usually it is one of the first items in the grid, and has the same shape as a
+ * result. It just contains a link to the promoted content, an image, and a title.
+ *
+ * Additionally, this component exposes the following props to modify the classes of the
+ * elements: `titleClass`.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'Promoted',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * The promoted data.
+         *
+         * @public
+         */
+        promoted: {
+            type: Object,
+            required: true,
+        },
+        titleClass: String,
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * Emits the promoted click event.
+         *
+         * @internal
+         */
+        const emitUserClickedAPromoted = () => {
+            xBus.emit('UserClickedAPromoted', props.promoted);
+        };
+        return {
+            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;;;;"}