@empathyco/x-components 6.0.0-alpha.31 → 6.0.0-alpha.33

package/docs/API-reference/api/x-components.globalxbus.md

@@ -154,6 +154,7 @@ _default: import("vue").DefineComponent<{
             UserClickedAPromoted: (payload: import("@empathyco/x-types").Promoted, metadata: import("..").WireMetadata) => unknown;
             UserClickedABanner: (payload: import("@empathyco/x-types").Banner, metadata: import("..").WireMetadata) => unknown;
             UserClickedAbortARedirection: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedAPage: (payload: number, metadata: import("..").WireMetadata) => unknown;
             SemanticQueryRequestUpdated: (payload: import("@empathyco/x-types").SemanticQueriesRequest | null, metadata: import("..").WireMetadata) => unknown;
             SemanticQueriesResponseChanged: (payload: import("@empathyco/x-types").SemanticQuery[], metadata: import("..").WireMetadata) => unknown;
             UserSelectedASemanticQuery: (payload: import("@empathyco/x-types").SemanticQuery, metadata: import("..").WireMetadata) => unknown;
@@ -322,6 +323,7 @@ _default: import("vue").DefineComponent<{
             UserClickedAPromoted: (payload: import("@empathyco/x-types").Promoted, metadata: import("..").WireMetadata) => unknown;
             UserClickedABanner: (payload: import("@empathyco/x-types").Banner, metadata: import("..").WireMetadata) => unknown;
             UserClickedAbortARedirection: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedAPage: (payload: number, metadata: import("..").WireMetadata) => unknown;
             SemanticQueryRequestUpdated: (payload: import("@empathyco/x-types").SemanticQueriesRequest | null, metadata: import("..").WireMetadata) => unknown;
             SemanticQueriesResponseChanged: (payload: import("@empathyco/x-types").SemanticQuery[], metadata: import("..").WireMetadata) => unknown;
             UserSelectedASemanticQuery: (payload: import("@empathyco/x-types").SemanticQuery, metadata: import("..").WireMetadata) => unknown;

package/docs/API-reference/api/x-components.hierarchicalfilter.md

@@ -166,6 +166,7 @@ _default: import("vue").DefineComponent<{
         UserClickedAPromoted?: import("@empathyco/x-types").Promoted | undefined;
         UserClickedABanner?: import("@empathyco/x-types").Banner | undefined;
         UserClickedAbortARedirection?: void | undefined;
+        UserSelectedAPage?: number | undefined;
         SemanticQueryRequestUpdated?: import("@empathyco/x-types").SemanticQueriesRequest | null | undefined;
         SemanticQueriesResponseChanged?: import("@empathyco/x-types").SemanticQuery[] | undefined;
         UserSelectedASemanticQuery?: import("@empathyco/x-types").SemanticQuery | undefined;

package/docs/API-reference/api/x-components.md

@@ -457,6 +457,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [NumberRangeFilter](./x-components.numberrangefilter.md) | Renders a number range filter, emitting the needed events when clicked. |
 |  [OpenMainModal](./x-components.openmainmodal.md) | Button to open the [MainModal](./x-components.mainmodal.md)<!-- -->. |
 |  [PageLoaderButton](./x-components.pageloaderbutton.md) | Component that renders a text with the number of rendered results and the remaining ones and a <code>&lt;BaseEventButton&gt;</code> with the logic of emitting the event "UserReachedResultsListEnd" to load more results on click. |
+|  [PageSelector](./x-components.pageselector.md) | Component that renders a pagination control with buttons for navigating between pages. It displays the current page, allows selecting other pages, and emits events when a page is selected. |
 |  [PartialQueryButton](./x-components.partialquerybutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [SearchXEvents.UserClickedPartialQuery](./x-components.searchxevents.userclickedpartialquery.md) events, expressing the user intention to set the partial query. |
 |  [PartialResultsList](./x-components.partialresultslist.md) | It renders a list of partial results from [SearchState.partialResults](./x-components.searchstate.partialresults.md) by default. It also provides the partial result slot to customize the item with the partial result bound. |
 |  [PopularSearch](./x-components.popularsearch.md) | Renders a popular search item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the popular search content. If the slot is not overridden, it will render the suggestion query by default. |

package/docs/API-reference/api/x-components.pageselector.md

@@ -0,0 +1,80 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [PageSelector](./x-components.pageselector.md)
+
+## PageSelector variable
+
+Component that renders a pagination control with buttons for navigating between pages. It displays the current page, allows selecting other pages, and emits events when a page is selected.
+
+**Signature:**
+
+```typescript
+_default: import("vue").DefineComponent<{
+    buttonClasses: {
+        type: PropType<(string | Dictionary<boolean>)[]>;
+        default: () => never[];
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    hiddenPage: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemClasses: {
+        type: PropType<(isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]>;
+        default: () => never[];
+    };
+    range: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scrollTarget: {
+        type: StringConstructor;
+        default: string;
+    };
+    totalPages: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    visiblePages: import("vue").ComputedRef<PageItem[]>;
+    selectPage: (page: number | string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    buttonClasses: {
+        type: PropType<(string | Dictionary<boolean>)[]>;
+        default: () => never[];
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    hiddenPage: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemClasses: {
+        type: PropType<(isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]>;
+        default: () => never[];
+    };
+    range: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scrollTarget: {
+        type: StringConstructor;
+        default: string;
+    };
+    totalPages: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {
+    buttonClasses: (string | Dictionary<boolean>)[];
+    hiddenPage: string;
+    itemClasses: (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[];
+    range: number;
+    scrollTarget: string;
+}, {}>
+```

package/docs/API-reference/api/x-components.searchconfig.md

@@ -16,5 +16,6 @@ export interface SearchConfig
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [pageMode](./x-components.searchconfig.pagemode.md) |  | PageMode |  |
 |  [pageSize](./x-components.searchconfig.pagesize.md) |  | number | Maximum number of results to request. |
 

package/docs/API-reference/api/x-components.searchconfig.pagemode.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SearchConfig](./x-components.searchconfig.md) &gt; [pageMode](./x-components.searchconfig.pagemode.md)
+
+## SearchConfig.pageMode property
+
+**Signature:**
+
+```typescript
+pageMode: PageMode;
+```

package/docs/API-reference/api/x-components.searchxevents.md

@@ -34,4 +34,5 @@ export interface SearchXEvents
 |  [UserClickedASort](./x-components.searchxevents.userclickedasort.md) |  | Sort | The user has clicked one of the sorts. Payload: The sort option that the user has selected. |
 |  [UserClickedPartialQuery](./x-components.searchxevents.userclickedpartialquery.md) |  | string | Partial query has been set. Payload: The new query string. |
 |  [UserReachedResultsListEnd](./x-components.searchxevents.userreachedresultslistend.md) |  | void | The user reached the limit of the scrollable content in a results list. |
+|  [UserSelectedAPage](./x-components.searchxevents.userselectedapage.md) |  | number | The user has selected a page. |
 

package/docs/API-reference/api/x-components.searchxevents.userselectedapage.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SearchXEvents](./x-components.searchxevents.md) &gt; [UserSelectedAPage](./x-components.searchxevents.userselectedapage.md)
+
+## SearchXEvents.UserSelectedAPage property
+
+The user has selected a page.
+
+**Signature:**
+
+```typescript
+UserSelectedAPage: number;
+```

package/docs/API-reference/api/x-components.simplefilter.md

@@ -163,6 +163,7 @@ _default: import("vue").DefineComponent<{
         UserClickedAPromoted?: import("@empathyco/x-types").Promoted | undefined;
         UserClickedABanner?: import("@empathyco/x-types").Banner | undefined;
         UserClickedAbortARedirection?: void | undefined;
+        UserSelectedAPage?: number | undefined;
         SemanticQueryRequestUpdated?: import("@empathyco/x-types").SemanticQueriesRequest | null | undefined;
         SemanticQueriesResponseChanged?: import("@empathyco/x-types").SemanticQuery[] | undefined;
         UserSelectedASemanticQuery?: import("@empathyco/x-types").SemanticQuery | undefined;

package/docs/API-reference/api/x-components.snippetcallbacks.md

@@ -153,6 +153,7 @@ _default: import("vue").DefineComponent<{}, {
         UserClickedAPromoted: (payload: import("@empathyco/x-types").Promoted, metadata: WireMetadata) => unknown;
         UserClickedABanner: (payload: import("@empathyco/x-types").Banner, metadata: WireMetadata) => unknown;
         UserClickedAbortARedirection: (payload: undefined, metadata: WireMetadata) => unknown;
+        UserSelectedAPage: (payload: number, metadata: WireMetadata) => unknown;
         SemanticQueryRequestUpdated: (payload: import("@empathyco/x-types").SemanticQueriesRequest | null, metadata: WireMetadata) => unknown;
         SemanticQueriesResponseChanged: (payload: import("@empathyco/x-types").SemanticQuery[], metadata: WireMetadata) => unknown;
         UserSelectedASemanticQuery: (payload: import("@empathyco/x-types").SemanticQuery, metadata: WireMetadata) => unknown;

package/docs/API-reference/components/common/x-components.page-selector.md

@@ -0,0 +1,151 @@
+---
+
+title: PageSelector
+
+---
+
+# PageSelector
+
+Component that renders a pagination control with buttons for navigating between pages. It displays
+the current page, allows selecting other pages, and emits events when a page is selected.
+
+## Props
+
+| Name                       | Description                                                                 | Type                                                                                                     | Default                    |
+| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
+| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons.                             | <code>(string \| Dictionary<boolean>)[]</code>                                                           | <code>() => []</code>      |
+| <code>currentPage</code>   | The current page number.                                                    | <code>number</code>                                                                                      | <code></code>              |
+| <code>hiddenPage</code>    | The string content of the hidden pages.                                     | <code>string</code>                                                                                      | <code>'...'</code>         |
+| <code>itemClasses</code>   | CSS classes to customize the page items.                                    | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code>      |
+| <code>range</code>         | The number of pages to show before and after the current page.              | <code>number</code>                                                                                      | <code>2</code>             |
+| <code>scrollTarget</code>  | The class of the scroll container to scroll to top when a page is selected. | <code>string</code>                                                                                      | <code>'main-scroll'</code> |
+| <code>totalPages</code>    | The total number of pages.                                                  | <code>number</code>                                                                                      | <code></code>              |
+
+## Slots
+
+| Name                              | Description | Bindings<br />(name - type - description) |
+| --------------------------------- | ----------- | ----------------------------------------- |
+| <code>previous-page-button</code> |             | None                                      |
+| <code>page-button</code>          |             | <br />                                    |
+| <code>next-page-button</code>     |             | None                                      |
+
+## Events
+
+This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.
+
+## See it in action
+
+Basic example of how the component is rendered.
+
+```vue live
+<template>
+  <PageSelector :current-page="currentPage" :total-pages="totalPages" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 0,
+        totalPages: 10
+      };
+    },
+    computed: {
+      currentPage() {
+        return this.page;
+      }
+    }
+  };
+</script>
+```
+
+### Customize the slots
+
+This component allows to customise its content using slots.
+
+```vue live
+<template>
+  <PageSelector
+    :total-pages="totalPages"
+    :currentPage="currentPage"
+    :item-classes="
+      (isSelected: boolean) =>
+        isSelected
+          ? 'x-button-lead x-text-neutral-10'
+          : 'x-text-neutral-90 x-button-outlined'
+    "
+    :buttonClasses="['x-rounded-md']"
+  >
+    <template #previous-page-button>
+      <span>Back</span>
+    </template>
+    <template #page-button="{ page, isSelected }">
+      <h2 :class="{ 'x-text1': !isSelected }">
+        {{ page }}
+      </h2>
+    </template>
+    <template #next-page-button>
+      <span>Forward</span>
+    </template>
+  </PageSelector>
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 2,
+        totalPages: 10
+      };
+    },
+    computed: {
+      currentPage() {
+        return this.page;
+      }
+    }
+  };
+</script>
+```
+
+### Customize the number of pages to show before and after the current page by changing the range default value.
+
+```vue live
+<template>
+  <PageSelector :current-page="currentPage" :total-pages="totalPages" :range="range" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 6,
+        totalPages: 100,
+        range: 4
+      };
+    },
+    computed: {
+      currentPage() {
+        return this.page;
+      }
+    }
+  };
+</script>
+```

package/js/components/page-selector.vue.js

@@ -0,0 +1,78 @@
+import _sfc_main from './page-selector.vue2.js';
+import { openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createTextVNode, Fragment, renderList, toDisplayString, createCommentVNode } from 'vue';
+import './page-selector.vue3.js';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "x-page-selector",
+  "aria-label": "Pagination"
+};
+const _hoisted_2 = ["disabled", "aria-disabled"];
+const _hoisted_3 = ["onClick", "data-test", "aria-label", "aria-current"];
+const _hoisted_4 = ["disabled", "aria-disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.visiblePages?.length > 1 ? (openBlock(), createElementBlock("nav", _hoisted_1, [
+    createElementVNode("button", {
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.selectPage(_ctx.currentPage - 1)),
+      class: normalizeClass(["x-button", _ctx.buttonClasses]),
+      disabled: _ctx.currentPage === 1,
+      "data-test": "previous-page-button",
+      "aria-label": "Previous page",
+      "aria-disabled": _ctx.currentPage === 1
+    }, [
+      renderSlot(_ctx.$slots, "previous-page-button", {}, () => [
+        createTextVNode("Prev")
+      ], true)
+    ], 10, _hoisted_2),
+    (openBlock(true), createElementBlock(
+      Fragment,
+      null,
+      renderList(_ctx.visiblePages, (page) => {
+        return openBlock(), createElementBlock("button", {
+          key: page.value,
+          onClick: ($event) => _ctx.selectPage(page.value),
+          class: normalizeClass(["x-button x-page-selector__page", [
+            _ctx.itemClasses(page.isSelected),
+            {
+              "x-page-selector__page--current": page.isSelected,
+              "x-page-selector__page--hidden": page.value === _ctx.hiddenPage
+            }
+          ]]),
+          "data-test": `page-button-${page.value}`,
+          "aria-label": `Page ${page.value}`,
+          "aria-current": page.isSelected ? "page" : void 0
+        }, [
+          renderSlot(_ctx.$slots, "page-button", {
+            page: page.value,
+            isSelected: page.isSelected
+          }, () => [
+            createTextVNode(
+              toDisplayString(page.value),
+              1
+              /* TEXT */
+            )
+          ], true)
+        ], 10, _hoisted_3);
+      }),
+      128
+      /* KEYED_FRAGMENT */
+    )),
+    createElementVNode("button", {
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.selectPage(_ctx.currentPage + 1)),
+      class: normalizeClass(["x-button", _ctx.buttonClasses]),
+      disabled: _ctx.currentPage === _ctx.totalPages,
+      "data-test": "next-page-button",
+      "aria-label": "Next page",
+      "aria-disabled": _ctx.currentPage === _ctx.totalPages
+    }, [
+      renderSlot(_ctx.$slots, "next-page-button", {}, () => [
+        createTextVNode("Next")
+      ], true)
+    ], 10, _hoisted_4)
+  ])) : createCommentVNode("v-if", true);
+}
+var pageSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b08cf95a"]]);
+
+export { pageSelector as default };
+//# sourceMappingURL=page-selector.vue.js.map

package/js/components/page-selector.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-selector.vue.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      @click=\"selectPage(currentPage - 1)\"\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      @click=\"selectPage(page.value)\"\n      class=\"x-button x-page-selector__page\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage\n        }\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      @click=\"selectPage(currentPage + 1)\"\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, computed, PropType } from 'vue';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { useXBus } from '../composables';\n\n  interface PageItem {\n    value: number | string;\n    isSelected: boolean;\n  }\n\n  /**\n   * Component that renders a pagination control with buttons for navigating\n   * between pages. It displays the current page, allows selecting other pages,\n   * and emits events when a page is selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PageSelector',\n    props: {\n      /**\n       * CSS classes to customize the prev/next buttons.\n       */\n      buttonClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /**\n       * The current page number.\n       */\n      currentPage: {\n        type: Number,\n        required: true\n      },\n      /**\n       * The string content of the hidden pages.\n       */\n      hiddenPage: {\n        type: String,\n        default: '...'\n      },\n      /**\n       * CSS classes to customize the page items.\n       */\n      itemClasses: {\n        type: Function as PropType<\n          (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n        >,\n        default: () => []\n      },\n      /**\n       * The number of pages to show before and after the current page.\n       */\n      range: {\n        type: Number,\n        default: 2\n      },\n      /**\n       * The class of the scroll container to scroll to top when a page is selected.\n       */\n      scrollTarget: {\n        type: String,\n        default: 'main-scroll'\n      },\n      /**\n       * The total number of pages.\n       */\n      totalPages: {\n        type: Number,\n        required: true\n      }\n    },\n    setup(props) {\n      const bus = useXBus();\n\n      const visiblePages = computed(() => {\n        const start = Math.max(props.currentPage - props.range, 1);\n        const end = Math.min(props.currentPage + props.range, props.totalPages);\n        const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n          const pageValue: string | number = start + i;\n          return { value: pageValue, isSelected: pageValue === props.currentPage };\n        });\n\n        // Ensure first and last pages are always visible when needed\n        if (start > 1) {\n          pages.unshift({ value: 1, isSelected: 1 === props.currentPage });\n          if (start > 2) {\n            pages.splice(1, 0, { value: props.hiddenPage, isSelected: false });\n          }\n        }\n        if (end < props.totalPages) {\n          if (end < props.totalPages - 1) {\n            pages.push({ value: props.hiddenPage, isSelected: false });\n          }\n          pages.push({\n            value: props.totalPages,\n            isSelected: props.totalPages === props.currentPage\n          });\n        }\n\n        return pages;\n      });\n\n      /**\n       * Handles the selection of a page.\n       *\n       * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n       */\n      const selectPage = (page: number | string): void => {\n        if (page === '...') {\n          return;\n        }\n        if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n          bus.emit('UserSelectedAPage', page);\n          /**\n           * Emits scroll to top to prevent keeping the position if there is more content\n           * after results, as for example Next Queries Preview.\n           */\n          bus.emit('UserClickedScrollToTop', props.scrollTarget);\n        }\n      };\n\n      return {\n        visiblePages,\n        selectPage\n      };\n    }\n  });\n</script>\n\n<style scoped>\n  .x-page-selector {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 2px;\n  }\n\n  .x-page-selector__page--current,\n  .x-page-selector__page--hidden {\n    cursor: default;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"currentPage\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 0,\n        totalPages: 10\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"currentPage\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 2,\n        totalPages: 10\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"currentPage\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 6,\n        totalPages: 100,\n        range: 4\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["selectPage","currentPage","_createTextVNode","_openBlock","_createElementBlock","_Fragment","_renderList","itemClasses","_normalizeClass","_renderSlot","_toDisplayString","_createElementVNode","totalPages","_createCommentVNode"],"mappings":"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"}

package/js/components/page-selector.vue2.js

@@ -0,0 +1,128 @@
+import { defineComponent, computed } from 'vue';
+import '../composables/create-use-device.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 '../plugins/x-bus.js';
+import '../plugins/x-plugin.js';
+import 'vuex';
+import { useXBus } from '../composables/use-x-bus.js';
+import '@vueuse/core';
+
+/**
+ * Component that renders a pagination control with buttons for navigating
+ * between pages. It displays the current page, allows selecting other pages,
+ * and emits events when a page is selected.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'PageSelector',
+    props: {
+        /**
+         * CSS classes to customize the prev/next buttons.
+         */
+        buttonClasses: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * The current page number.
+         */
+        currentPage: {
+            type: Number,
+            required: true
+        },
+        /**
+         * The string content of the hidden pages.
+         */
+        hiddenPage: {
+            type: String,
+            default: '...'
+        },
+        /**
+         * CSS classes to customize the page items.
+         */
+        itemClasses: {
+            type: Function,
+            default: () => []
+        },
+        /**
+         * The number of pages to show before and after the current page.
+         */
+        range: {
+            type: Number,
+            default: 2
+        },
+        /**
+         * The class of the scroll container to scroll to top when a page is selected.
+         */
+        scrollTarget: {
+            type: String,
+            default: 'main-scroll'
+        },
+        /**
+         * The total number of pages.
+         */
+        totalPages: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props) {
+        const bus = useXBus();
+        const visiblePages = computed(() => {
+            const start = Math.max(props.currentPage - props.range, 1);
+            const end = Math.min(props.currentPage + props.range, props.totalPages);
+            const pages = Array.from({ length: end - start + 1 }, (_, i) => {
+                const pageValue = start + i;
+                return { value: pageValue, isSelected: pageValue === props.currentPage };
+            });
+            // Ensure first and last pages are always visible when needed
+            if (start > 1) {
+                pages.unshift({ value: 1, isSelected: 1 === props.currentPage });
+                if (start > 2) {
+                    pages.splice(1, 0, { value: props.hiddenPage, isSelected: false });
+                }
+            }
+            if (end < props.totalPages) {
+                if (end < props.totalPages - 1) {
+                    pages.push({ value: props.hiddenPage, isSelected: false });
+                }
+                pages.push({
+                    value: props.totalPages,
+                    isSelected: props.totalPages === props.currentPage
+                });
+            }
+            return pages;
+        });
+        /**
+         * Handles the selection of a page.
+         *
+         * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.
+         */
+        const selectPage = (page) => {
+            if (page === '...') {
+                return;
+            }
+            if (typeof page === 'number' && page > 0 && page <= props.totalPages) {
+                bus.emit('UserSelectedAPage', page);
+                /**
+                 * Emits scroll to top to prevent keeping the position if there is more content
+                 * after results, as for example Next Queries Preview.
+                 */
+                bus.emit('UserClickedScrollToTop', props.scrollTarget);
+            }
+        };
+        return {
+            visiblePages,
+            selectPage
+        };
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=page-selector.vue2.js.map

package/js/components/page-selector.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-selector.vue2.js","sources":["../../../src/components/page-selector.vue"],"sourcesContent":["<template>\n  <nav v-if=\"visiblePages?.length > 1\" class=\"x-page-selector\" aria-label=\"Pagination\">\n    <button\n      @click=\"selectPage(currentPage - 1)\"\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === 1\"\n      data-test=\"previous-page-button\"\n      aria-label=\"Previous page\"\n      :aria-disabled=\"currentPage === 1\"\n    >\n      <slot name=\"previous-page-button\">Prev</slot>\n    </button>\n\n    <button\n      v-for=\"page in visiblePages\"\n      :key=\"page.value\"\n      @click=\"selectPage(page.value)\"\n      class=\"x-button x-page-selector__page\"\n      :class=\"[\n        itemClasses(page.isSelected),\n        {\n          'x-page-selector__page--current': page.isSelected,\n          'x-page-selector__page--hidden': page.value === hiddenPage\n        }\n      ]\"\n      :data-test=\"`page-button-${page.value}`\"\n      :aria-label=\"`Page ${page.value}`\"\n      :aria-current=\"page.isSelected ? 'page' : undefined\"\n    >\n      <slot name=\"page-button\" :page=\"page.value\" :is-selected=\"page.isSelected\">\n        {{ page.value }}\n      </slot>\n    </button>\n\n    <button\n      @click=\"selectPage(currentPage + 1)\"\n      class=\"x-button\"\n      :class=\"buttonClasses\"\n      :disabled=\"currentPage === totalPages\"\n      data-test=\"next-page-button\"\n      aria-label=\"Next page\"\n      :aria-disabled=\"currentPage === totalPages\"\n    >\n      <slot name=\"next-page-button\">Next</slot>\n    </button>\n  </nav>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, computed, PropType } from 'vue';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { useXBus } from '../composables';\n\n  interface PageItem {\n    value: number | string;\n    isSelected: boolean;\n  }\n\n  /**\n   * Component that renders a pagination control with buttons for navigating\n   * between pages. It displays the current page, allows selecting other pages,\n   * and emits events when a page is selected.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PageSelector',\n    props: {\n      /**\n       * CSS classes to customize the prev/next buttons.\n       */\n      buttonClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /**\n       * The current page number.\n       */\n      currentPage: {\n        type: Number,\n        required: true\n      },\n      /**\n       * The string content of the hidden pages.\n       */\n      hiddenPage: {\n        type: String,\n        default: '...'\n      },\n      /**\n       * CSS classes to customize the page items.\n       */\n      itemClasses: {\n        type: Function as PropType<\n          (isSelected: boolean) => string | Dictionary<boolean> | (string | Dictionary<boolean>)[]\n        >,\n        default: () => []\n      },\n      /**\n       * The number of pages to show before and after the current page.\n       */\n      range: {\n        type: Number,\n        default: 2\n      },\n      /**\n       * The class of the scroll container to scroll to top when a page is selected.\n       */\n      scrollTarget: {\n        type: String,\n        default: 'main-scroll'\n      },\n      /**\n       * The total number of pages.\n       */\n      totalPages: {\n        type: Number,\n        required: true\n      }\n    },\n    setup(props) {\n      const bus = useXBus();\n\n      const visiblePages = computed(() => {\n        const start = Math.max(props.currentPage - props.range, 1);\n        const end = Math.min(props.currentPage + props.range, props.totalPages);\n        const pages: PageItem[] = Array.from({ length: end - start + 1 }, (_, i) => {\n          const pageValue: string | number = start + i;\n          return { value: pageValue, isSelected: pageValue === props.currentPage };\n        });\n\n        // Ensure first and last pages are always visible when needed\n        if (start > 1) {\n          pages.unshift({ value: 1, isSelected: 1 === props.currentPage });\n          if (start > 2) {\n            pages.splice(1, 0, { value: props.hiddenPage, isSelected: false });\n          }\n        }\n        if (end < props.totalPages) {\n          if (end < props.totalPages - 1) {\n            pages.push({ value: props.hiddenPage, isSelected: false });\n          }\n          pages.push({\n            value: props.totalPages,\n            isSelected: props.totalPages === props.currentPage\n          });\n        }\n\n        return pages;\n      });\n\n      /**\n       * Handles the selection of a page.\n       *\n       * @param page - The page to select. Can be a number representing the page number or a string '...' indicating an ellipsis.\n       */\n      const selectPage = (page: number | string): void => {\n        if (page === '...') {\n          return;\n        }\n        if (typeof page === 'number' && page > 0 && page <= props.totalPages) {\n          bus.emit('UserSelectedAPage', page);\n          /**\n           * Emits scroll to top to prevent keeping the position if there is more content\n           * after results, as for example Next Queries Preview.\n           */\n          bus.emit('UserClickedScrollToTop', props.scrollTarget);\n        }\n      };\n\n      return {\n        visiblePages,\n        selectPage\n      };\n    }\n  });\n</script>\n\n<style scoped>\n  .x-page-selector {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 2px;\n  }\n\n  .x-page-selector__page--current,\n  .x-page-selector__page--hidden {\n    cursor: default;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserSelectedAPage\" and the UserClickedScrollToTop events by default.\n\n## See it in action\n\nBasic example of how the component is rendered.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"currentPage\" :total-pages=\"totalPages\" />\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 0,\n        totalPages: 10\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n\n### Customize the slots\n\nThis component allows to customise its content using slots.\n\n```vue live\n<template>\n  <PageSelector\n    :total-pages=\"totalPages\"\n    :currentPage=\"currentPage\"\n    :item-classes=\"\n      (isSelected: boolean) =>\n        isSelected\n          ? 'x-button-lead x-text-neutral-10'\n          : 'x-text-neutral-90 x-button-outlined'\n    \"\n    :buttonClasses=\"['x-rounded-md']\"\n  >\n    <template #previous-page-button>\n      <span>Back</span>\n    </template>\n    <template #page-button=\"{ page, isSelected }\">\n      <h2 :class=\"{ 'x-text1': !isSelected }\">\n        {{ page }}\n      </h2>\n    </template>\n    <template #next-page-button>\n      <span>Forward</span>\n    </template>\n  </PageSelector>\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 2,\n        totalPages: 10\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n\n### Customize the number of pages to show before and after the current page by changing the range default value.\n\n```vue live\n<template>\n  <PageSelector :current-page=\"currentPage\" :total-pages=\"totalPages\" :range=\"range\" />\n</template>\n\n<script>\n  import { PageSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'PageSelectorDemo',\n    components: {\n      PageSelector\n    },\n    data() {\n      return {\n        page: 6,\n        totalPages: 100,\n        range: 4\n      };\n    },\n    computed: {\n      currentPage() {\n        return this.page;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2DE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;AACD;;AAEE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;AAEE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,QAEL;AACD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;AACD;;AAEE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,aAAY;AACtB,SAAA;AACD;;AAEE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,GAAI,GAAE,OAAO,EAAE,CAAA;AAErB,QAAA,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM;AAClC,YAAA,MAAM,KAAI,GAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,WAAU,GAAI,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;AAC1D,YAAA,MAAM,GAAI,GAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,WAAY,GAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;YACvE,MAAM,KAAK,GAAe,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAE,GAAI,KAAI,GAAI,CAAA,EAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;AAC1E,gBAAA,MAAM,SAAS,GAAoB,KAAI,GAAI,CAAC,CAAA;AAC5C,gBAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAU,KAAI,KAAK,CAAC,aAAa,CAAA;AAC1E,aAAC,CAAC,CAAA;;YAGF,IAAI,KAAI,GAAI,CAAC,EAAE;AACb,gBAAA,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,CAAA,KAAM,KAAK,CAAC,WAAY,EAAC,CAAC,CAAA;gBAChE,IAAI,KAAI,GAAI,CAAC,EAAE;AACb,oBAAA,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAM,EAAC,CAAC,CAAA;AACpE,iBAAA;AACF,aAAA;AACA,YAAA,IAAI,MAAM,KAAK,CAAC,UAAU,EAAE;AAC1B,gBAAA,IAAI,GAAE,GAAI,KAAK,CAAC,UAAS,GAAI,CAAC,EAAE;AAC9B,oBAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAM,EAAC,CAAC,CAAA;AAC5D,iBAAA;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,KAAK,EAAE,KAAK,CAAC,UAAU;AACvB,oBAAA,UAAU,EAAE,KAAK,CAAC,eAAe,KAAK,CAAC,WAAU;AAClD,iBAAA,CAAC,CAAA;AACJ,aAAA;AAEA,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,UAAS,GAAI,CAAC,IAAqB,KAAW;YAClD,IAAI,IAAK,KAAI,KAAK,EAAE;gBAClB,OAAM;AACR,aAAA;AACA,YAAA,IAAI,OAAO,IAAG,KAAM,QAAO,IAAK,IAAK,GAAE,CAAE,IAAG,IAAK,IAAG,KAAK,CAAC,UAAU,EAAE;AACpE,gBAAA,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;AACnC;;;AAGE;gBACF,GAAG,CAAC,IAAI,CAAC,wBAAwB,EAAE,KAAK,CAAC,YAAY,CAAC,CAAA;AACxD,aAAA;AACF,SAAC,CAAA;QAED,OAAO;YACL,YAAY;YACZ,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/components/page-selector.vue3.js

@@ -0,0 +1,7 @@
+import injectCss from '../../tools/inject-css.js';
+
+var css = ".x-page-selector[data-v-b08cf95a]{align-items:center;display:flex;gap:2px;justify-content:center}.x-page-selector__page--current[data-v-b08cf95a],.x-page-selector__page--hidden[data-v-b08cf95a]{cursor:default}";
+injectCss(css);
+
+export { css, css as default };
+//# sourceMappingURL=page-selector.vue3.js.map

package/js/components/page-selector.vue3.js.map

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

package/js/index.js

@@ -139,6 +139,7 @@ export { default as LocationProvider } from './components/location-provider.vue.
 export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
 export { default as PageLoaderButton } from './components/page-loader-button.vue.js';
+export { default as PageSelector } from './components/page-selector.vue.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
 export { createUseDevice } from './composables/create-use-device.js';

package/js/index.js.map

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

package/js/x-modules/empathize/components/empathize.vue2.js

@@ -89,6 +89,8 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
 import '../../../composables/create-use-device.js';
 import '@vue/devtools-api';
 import '../../../plugins/devtools/timeline.devtools.js';