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

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

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x, useRegisterXModule, useState } from '../../../composables';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      useRegisterXModule(searchXModule);\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;;AAkBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAlBd,iBACkBC,CAAAA,CAAAA;AAAyB,EAAA,OAAAC,SAAA,EAA4B,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,2BAAA;AADxE,IAAA,WAAA,EAAA,WAAA;AAAA,GAAA,EAAA;;iBAIY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;iBACJL,SALZ,EAAA,EAAAG,kBAAA;AAAA,YAMY,IAAA;AAAA,YAAA;AAAA,cAAA,GAAA,EAAA,IAAA;cAEN,KAQkB,EAAAG,cAAA,CAAA,CAAA,UAAA,EAAA,uCAAA,CAAA,CAAA;AAAA,aAAA;;0BANP,0BAAgB,EAAA;AAAA,gBACxB,KAAM,EAAA,8BAAA;AAAA,gBAAA,WAAA,EAAA,eAAA;AAXf,gBAAA,MAAA,EAAA,KAAA;AAAA,eAAA,EAAA;AAAA,gBAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,mBAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x, useRegisterXModule, useState } from '../../../composables';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      useRegisterXModule(searchXModule);\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;AAuCE;;;AAGG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAE5D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC,CAAC;AAEH;;;;AAIG;AACH,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAI,KAAK,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAI,KAAK,YAAY,CAAC,KAAK;AAChE,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;SAClC,CAAC,CAAC,CACJ,CAAC;QAEF,OAAO;YACL,SAAS;YACT,YAAY;SACb,CAAC;KACH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button x-button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort list item options.\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'ul'\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortListItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-sort-list__item--is-selected': item === selectedSort.value,\n            'x-option-list__item--is-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAwCE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,IAAG;AACpB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAa,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE3D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,SAAU,GAAE,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAK,KAAI,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAK,KAAI,YAAY,CAAC,KAAI;AAC/D,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAK,EAAA;SACjC,CAAC,CAAA,CACH,CAAA;QAED,OAAO;YACL,SAAS;YACT,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-sort-list[data-v-7bf7ecc6] {\n  list-style-type: none;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/search/components/sort-list.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-sort-list[data-v-834b0328]{list-style-type:none}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=sort-list.vue3.js.map

package/js/x-modules/search/components/sort-list.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sort-list.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x, useRegisterXModule, useState } from '../../../composables';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` 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: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      useRegisterXModule(searchXModule);\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\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  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` 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: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\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  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withCtx","_renderSlot","_mergeProps"],"mappings":";;;;;AAqBc,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CArBd,iBAESC,CAAAA,CAAAA;AAEA,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC1B,GAAA,EAAA,KAAA;AAAA,IACA,KAAK,EAAA,oBAAA;AAAA,IAAA,WAAA,EAAA,aAAA;AANT,IAAA,IAAA,EAAA,MAAA;AAAA,GAAA,EAAA;;iBAUY,IAAI,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,KAAA;AACJ,UAAA,OAAAL,SAAA,gBAAG,0BAAuB,EAAA;AAAA,YAChC,GAAA,EAAA,IAAA;AAAA,YACC,OAAMM,cAAO,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,YACb,WAAA,EAAA,oBAAA;AAAA,YACD,MAAK,EAAA,KAAA;AAAA,YAAA,cAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA;AAfX,YAAA,IAAA,EAAA,UAAA;AAAA,WAAA,EAAA;AAAA,YAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,eAAA,CAAA;AAAA,aAAA,CAAA;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search/components/sort-picker-list.vue2.js

@@ -1,28 +1,17 @@
 import { defineComponent, watch, computed } from 'vue';
-import __vue_component__ from '../../../components/base-event-button.vue.js';
-import '../../../composables/create-use-device.composable.js';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { use$x } from '../../../composables/use-_x.js';
-import { useRegisterXModule } from '../../../composables/use-register-x-module.js';
-import '@vueuse/core';
-import '../../../plugins/x-plugin.js';
-import '../../../plugins/x-bus.js';
 import { useState } from '../../../composables/use-state.js';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import { searchXModule } from '../x-module.js';
 
 /**
  * The `SortPickerList` component allows user to select the search results order. This component
  * also allows to change the selected sort programmatically.
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'SortPickerList',
     xModule: searchXModule.name,
-    components: { BaseEventButton: __vue_component__ },
+    components: { BaseEventButton },
     props: {
         /** The list of possible sort values. */
         items: {
@@ -38,7 +27,6 @@ var script = defineComponent({
         buttonClass: String
     },
     setup(props) {
-        useRegisterXModule(searchXModule);
         const $x = use$x();
         const { sort: selectedSort } = useState('search', ['sort']);
         watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
@@ -63,5 +51,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=sort-picker-list.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x, useRegisterXModule, useState } from '../../../composables';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` 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: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      useRegisterXModule(searchXModule);\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;AA0CE;;;AAGG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,mBAAEA,iBAAe,EAAE;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAE5D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC,CAAC;AAEH;;;;AAIG;AACH,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,IAAI,KAAK,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;SAClC,CAAC,CAAC,CACJ,CAAC;QAEF,OAAO;YACL,SAAS;YACT,YAAY;SACb,CAAC;KACH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { computed, defineComponent, PropType, watch } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * Sort Picker item options.\n   */\n  interface SortPickerItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n\n  /**\n   * The `SortPickerList` 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: 'SortPickerList',\n    xModule: searchXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for rendering the list. */\n      animation: {\n        type: [String, Object] as PropType<string | typeof Vue>,\n        default: () => 'div'\n      },\n      /** Class inherited by each sort button. */\n      buttonClass: String\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Sort list items.\n       *\n       * @returns A list of items with their css class and the event associate to it.\n       */\n      const listItems = computed<SortPickerItem[]>(() =>\n        props.items.map(item => ({\n          item,\n          cssClasses: {\n            'x-selected': item === selectedSort.value\n          },\n          event: { UserClickedASort: item }\n        }))\n      );\n\n      return {\n        listItems,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggest, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\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  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script>\n  import { SortPickerList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortPickerList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,KAAI;AACpB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,EAAE,IAAI,EAAE,YAAa,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE3D,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,IAAK,KAAI,YAAY,CAAC,KAAI;AACzC,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAK,EAAA;SACjC,CAAC,CAAA,CACH,CAAA;QAED,OAAO;YACL,SAAS;YACT,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue.js

@@ -1,67 +1,31 @@
-import script from './spellcheck-button.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './spellcheck-button.vue2.js';
+import { openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.spellcheckedQuery ? (openBlock(), createElementBlock(
+    "button",
+    {
+      key: 0,
+      ref: "el",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
+      class: "x-spellcheck-button",
+      "data-test": "set-spellcheck"
+    },
+    [
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ spellcheckedQuery: _ctx.spellcheckedQuery })), () => [
+        createTextVNode(
+          toDisplayString(_ctx.spellcheckedQuery),
+          1
+          /* TEXT */
+        )
+      ])
+    ],
+    512
+    /* NEED_PATCH */
+  )) : createCommentVNode("v-if", true);
+}
+var spellcheckButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.spellcheckedQuery
-    ? _c(
-        "button",
-        {
-          staticClass: "x-spellcheck-button",
-          attrs: { "data-test": "set-spellcheck" },
-          on: { click: _vm.emitEvents },
-        },
-        [
-          _vm._t(
-            "default",
-            function () {
-              return [_vm._v(_vm._s(_vm.spellcheckedQuery))]
-            },
-            null,
-            { spellcheckedQuery: _vm.spellcheckedQuery }
-          ),
-        ],
-        2
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { spellcheckButton as default };
 //# sourceMappingURL=spellcheck-button.vue.js.map

package/js/x-modules/search/components/spellcheck-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    @click=\"emitEvents\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class SpellcheckButton extends Vue {\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    @State('search', 'spellcheckedQuery')\n    public spellcheckedQuery!: string;\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    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'spellcheck'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.spellcheckedQuery, this.createEventMetadata());\n      this.$x.emit(\n        'UserAcceptedSpellcheckQuery',\n        this.spellcheckedQuery,\n        this.createEventMetadata()\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 button. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    @click=\"emitEvents\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</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  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SpellcheckButton',\n    xModule: searchXModule.name,\n    setup() {\n      const $x = use$x();\n\n      const el = ref<HTMLElement>();\n\n      /**\n       * The spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);\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: el.value as HTMLElement,\n        feature: 'spellcheck'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata());\n        $x.emit(\n          'UserAcceptedSpellcheckQuery',\n          spellcheckedQuery.value as string,\n          createEventMetadata()\n        );\n      };\n\n      return {\n        el,\n        spellcheckedQuery,\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 button. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;qBACE,IAQS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SATX,IAGY,CAAA,iBAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA;AAAA,MACP,GAAA,EAAA,CAAA;AAAA,MACD,GAAK,EAAA,IAAA;AAAA,MACL,gBAAU,CAAgB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAA,qBAAA;MAE1B,WAAmE,EAAA,gBAAA;AAAA,KAAA;;;;;;;;AARvE,OAAA,CAAA;AAAA,KAAA;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue2.js

@@ -1,9 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref } from 'vue';
 import { searchXModule } from '../x-module.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
@@ -12,38 +10,44 @@ import { searchXModule } from '../x-module.js';
  *
  * @public
  */
-let SpellcheckButton = class SpellcheckButton extends Vue {
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    createEventMetadata() {
-        return {
-            target: this.$el,
+var _sfc_main = defineComponent({
+    name: 'SpellcheckButton',
+    xModule: searchXModule.name,
+    setup() {
+        const $x = use$x();
+        const el = ref();
+        /**
+         * The spellcheckedQuery from the search state.
+         *
+         * @public
+         */
+        const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);
+        /**
+         * Generates the {@link WireMetadata} object omitting the moduleName.
+         *
+         * @returns The {@link WireMetadata} object omitting the moduleName.
+         * @internal
+         */
+        const createEventMetadata = () => ({
+            target: el.value,
             feature: 'spellcheck'
+        });
+        /**
+         * Emits events when the button is clicked.
+         *
+         * @public
+         */
+        const emitEvents = () => {
+            $x.emit('UserAcceptedAQuery', spellcheckedQuery.value, createEventMetadata());
+            $x.emit('UserAcceptedSpellcheckQuery', spellcheckedQuery.value, createEventMetadata());
+        };
+        return {
+            el,
+            spellcheckedQuery,
+            emitEvents
         };
     }
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    emitEvents() {
-        this.$x.emit('UserAcceptedAQuery', this.spellcheckedQuery, this.createEventMetadata());
-        this.$x.emit('UserAcceptedSpellcheckQuery', this.spellcheckedQuery, this.createEventMetadata());
-    }
-};
-__decorate([
-    State('search', 'spellcheckedQuery')
-], SpellcheckButton.prototype, "spellcheckedQuery", void 0);
-SpellcheckButton = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchXModule)]
-    })
-], SpellcheckButton);
-var script = SpellcheckButton;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=spellcheck-button.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spellcheck-button.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class SpellcheckButton extends Vue {\n    /**\n     * The spellcheckedQuery from the search state.\n     *\n     * @public\n     */\n    @State('search', 'spellcheckedQuery')\n    public spellcheckedQuery!: string;\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    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'spellcheck'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.spellcheckedQuery, this.createEventMetadata());\n      this.$x.emit(\n        'UserAcceptedSpellcheckQuery',\n        this.spellcheckedQuery,\n        this.createEventMetadata()\n      );\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AAkBE;;;;;;AAMG;AAIY,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,GAAG,CAAA;AAS/C;;;;;AAKG;IACO,mBAAmB,GAAA;QAC3B,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,GAAkB;AAC/B,YAAA,OAAO,EAAE,YAAY;SACtB,CAAC;KACH;AAED;;;;AAIG;IACO,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;AACvF,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,6BAA6B,EAC7B,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,mBAAmB,EAAE,CAC3B,CAAC;KACH;CACF,CAAA;AA5BC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC;AACH,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPf,gBAAgB,GAAA,UAAA,CAAA;AAHpC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;AACmB,CAAA,EAAA,gBAAgB,CAmCpC,CAAA;aAnCoB,gBAAgB;;;;"}
+{"version":3,"file":"spellcheck-button.vue2.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"spellcheckedQuery\"\n    ref=\"el\"\n    @click=\"emitEvents\"\n    class=\"x-spellcheck-button\"\n    data-test=\"set-spellcheck\"\n  >\n    <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</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  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n   * intention to set the spellchecked query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SpellcheckButton',\n    xModule: searchXModule.name,\n    setup() {\n      const $x = use$x();\n\n      const el = ref<HTMLElement>();\n\n      /**\n       * The spellcheckedQuery from the search state.\n       *\n       * @public\n       */\n      const { spellcheckedQuery } = useState('search', ['spellcheckedQuery']);\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: el.value as HTMLElement,\n        feature: 'spellcheck'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', spellcheckedQuery.value as string, createEventMetadata());\n        $x.emit(\n          'UserAcceptedSpellcheckQuery',\n          spellcheckedQuery.value as string,\n          createEventMetadata()\n        );\n      };\n\n      return {\n        el,\n        spellcheckedQuery,\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 button. The event payload is the spellchecked query\n  data.\n- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the spellchecked query\n  data.\n\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n  <template #default=\"{ spellcheckedQuery }\">\n    <span class=\"x-spellcheck__text\">\n      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n    </span>\n  </template>\n</SpellcheckButton>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAmBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,KAAK,GAAG,EAAe,CAAA;AAE7B;;;;AAIE;AACF,QAAA,MAAM,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAEvE;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,EAAE,CAAC,KAAoB;AAC/B,YAAA,OAAO,EAAE,YAAW;AACrB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,KAAe,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACvF,YAAA,EAAE,CAAC,IAAI,CACL,6BAA6B,EAC7B,iBAAiB,CAAC,KAAe,EACjC,mBAAmB,EAAC,CACrB,CAAA;AACH,SAAC,CAAA;QAED,OAAO;YACL,EAAE;YACF,iBAAiB;YACjB,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}