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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/design-system/deprecated-full-theme.css +1319 -1319
  3. package/docs/API-reference/components/common/x-components.page-selector.md +3 -18
  4. package/js/components/page-selector.vue.js.map +1 -1
  5. package/js/components/page-selector.vue2.js.map +1 -1
  6. package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js +1 -1
  7. package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map +1 -1
  8. package/package.json +49 -49
package/docs/API-reference/components/common/x-components.page-selector.md CHANGED
@@ -39,7 +39,7 @@ Basic example of how the component is rendered.
39
39
 
40
40
  ```vue live
41
41
  <template>
42
- <PageSelector :current-page="currentPage" :total-pages="totalPages" />
42
+ <PageSelector :current-page="page" :total-pages="totalPages" />
43
43
  </template>
44
44
 
45
45
  <script>
@@ -55,11 +55,6 @@ Basic example of how the component is rendered.
55
55
  page: 0,
56
56
  totalPages: 10
57
57
  };
58
- },
59
- computed: {
60
- currentPage() {
61
- return this.page;
62
- }
63
58
  }
64
59
  };
65
60
  </script>
@@ -73,7 +68,7 @@ This component allows to customise its content using slots.
73
68
  <template>
74
69
  <PageSelector
75
70
  :total-pages="totalPages"
76
- :currentPage="currentPage"
71
+ :currentPage="page"
77
72
  :item-classes="
78
73
  (isSelected: boolean) =>
79
74
  isSelected
@@ -109,11 +104,6 @@ This component allows to customise its content using slots.
109
104
  page: 2,
110
105
  totalPages: 10
111
106
  };
112
- },
113
- computed: {
114
- currentPage() {
115
- return this.page;
116
- }
117
107
  }
118
108
  };
119
109
  </script>
@@ -123,7 +113,7 @@ This component allows to customise its content using slots.
123
113
 
124
114
  ```vue live
125
115
  <template>
126
- <PageSelector :current-page="currentPage" :total-pages="totalPages" :range="range" />
116
+ <PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
127
117
  </template>
128
118
 
129
119
  <script>
@@ -140,11 +130,6 @@ This component allows to customise its content using slots.
140
130
  totalPages: 100,
141
131
  range: 4
142
132
  };
143
- },
144
- computed: {
145
- currentPage() {
146
- return this.page;
147
- }
148
133
  }
149
134
  };
150
135
  </script>
package/js/components/page-selector.vue.js.map CHANGED
@@ -1 +1 @@
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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"}
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=\"page\" :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 };\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=\"page\"\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 };\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=\"page\" :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 };\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.map CHANGED
@@ -1 +1 @@
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":"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"}
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=\"page\" :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 };\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=\"page\"\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 };\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=\"page\" :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 };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js CHANGED
@@ -30,7 +30,7 @@ function enrichRequest(request, state) {
30
30
  start = page === 1 ? 0 : results.length;
31
31
  }
32
32
  else {
33
- start = state.config.pageSize * page;
33
+ start = state.config.pageSize * (page - 1);
34
34
  }
35
35
  const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;
36
36
  return {
package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchRequest, SearchResponse } from '@empathyco/x-types';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n InternalSearchRequest | null,\n SearchResponse | null\n>({\n fetch({ dispatch, state }, request) {\n return request\n ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n : Promise.resolve(null);\n },\n onSuccess({ dispatch }, response) {\n if (response !== null) {\n dispatch('saveSearchResponse', response);\n }\n }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n const { page, ...restRequest } = request;\n const {\n config: { pageSize, pageMode },\n origin,\n results\n } = state;\n\n let start;\n if (pageMode === 'infinite_scroll') {\n start = page === 1 ? 0 : results.length;\n } else {\n start = state.config.pageSize * page;\n }\n\n const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;\n\n return {\n ...restRequest,\n ...(origin && { origin }),\n start,\n rows\n };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AAChC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;AAC1C,SAAA;KACF;AACF,CAAA,CAAC,CAAC;AAEH;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;AACzC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC9B,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;AAEV,IAAA,IAAI,KAAK,CAAC;IACV,IAAI,QAAQ,KAAK,iBAAiB,EAAE;AAClC,QAAA,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;AACzC,KAAA;AAAM,SAAA;QACL,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;AACtC,KAAA;AAED,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAK,iBAAiB,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEjF,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;QACL,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAa;AAEvD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}
1
+ {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchRequest, SearchResponse } from '@empathyco/x-types';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n InternalSearchRequest | null,\n SearchResponse | null\n>({\n fetch({ dispatch, state }, request) {\n return request\n ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n : Promise.resolve(null);\n },\n onSuccess({ dispatch }, response) {\n if (response !== null) {\n dispatch('saveSearchResponse', response);\n }\n }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n const { page, ...restRequest } = request;\n const {\n config: { pageSize, pageMode },\n origin,\n results\n } = state;\n\n let start;\n if (pageMode === 'infinite_scroll') {\n start = page === 1 ? 0 : results.length;\n } else {\n start = state.config.pageSize * (page - 1);\n }\n\n const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;\n\n return {\n ...restRequest,\n ...(origin && { origin }),\n start,\n rows\n };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AAChC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;AAC1C,SAAA;KACF;AACF,CAAA,CAAC,CAAC;AAEH;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;AACzC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC9B,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;AAEV,IAAA,IAAI,KAAK,CAAC;IACV,IAAI,QAAQ,KAAK,iBAAiB,EAAE;AAClC,QAAA,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;AACzC,KAAA;AAAM,SAAA;AACL,QAAA,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC;AAC5C,KAAA;AAED,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAK,iBAAiB,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEjF,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;QACL,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAa;AAEvD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.33",
3
+ "version": "6.0.0-alpha.35",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -69,14 +69,14 @@
69
69
  "prepublishOnly": "pnpm run build"
70
70
  },
71
71
  "dependencies": {
72
- "@empathyco/x-adapter": "^8.1.0-alpha.0",
73
- "@empathyco/x-adapter-platform": "^1.1.0-alpha.9",
74
- "@empathyco/x-bus": "^1.0.3-alpha.1",
75
- "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
72
+ "@empathyco/x-adapter": "^8.1.0-alpha.1",
73
+ "@empathyco/x-adapter-platform": "^1.1.0-alpha.10",
74
+ "@empathyco/x-bus": "^1.0.3-alpha.2",
75
+ "@empathyco/x-deep-merge": "^2.0.3-alpha.2",
76
76
  "@empathyco/x-logger": "^1.2.0-alpha.11",
77
- "@empathyco/x-storage-service": "^2.0.3-alpha.0",
78
- "@empathyco/x-types": "^10.1.0-alpha.6",
79
- "@empathyco/x-utils": "^1.0.3-alpha.1",
77
+ "@empathyco/x-storage-service": "^2.0.3-alpha.1",
78
+ "@empathyco/x-types": "^10.1.0-alpha.7",
79
+ "@empathyco/x-utils": "^1.0.3-alpha.2",
80
80
  "@vue/devtools-api": "~6.5.0",
81
81
  "@vueuse/core": "~10.7.1",
82
82
  "js-md5": "~0.8.3",
@@ -90,53 +90,53 @@
90
90
  "vuex": "4.0.2"
91
91
  },
92
92
  "devDependencies": {
93
- "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
94
- "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
95
- "@empathyco/x-tailwindcss": "^2.0.0-alpha.2",
96
- "@microsoft/api-documenter": "~7.23.0",
97
- "@microsoft/api-extractor": "~7.39.0",
98
- "@testing-library/jest-dom": "~5.17.0",
99
- "@types/autoprefixer": "~10.2.0",
100
- "@types/glob": "~8.0.1",
101
- "@types/jest": "~27.5.0",
102
- "@types/node": "~18.19.0",
103
- "@types/testing-library__jest-dom": "~5.14.5",
104
- "@vitejs/plugin-vue": "~5.1.2",
93
+ "@badeball/cypress-cucumber-preprocessor": "20.0.0",
94
+ "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
95
+ "@empathyco/x-tailwindcss": "^2.0.0-alpha.3",
96
+ "@microsoft/api-documenter": "7.23.0",
97
+ "@microsoft/api-extractor": "7.39.0",
98
+ "@testing-library/jest-dom": "5.17.0",
99
+ "@types/autoprefixer": "10.2.0",
100
+ "@types/glob": "8.0.1",
101
+ "@types/jest": "27.5.0",
102
+ "@types/node": "18.19.0",
103
+ "@types/testing-library__jest-dom": "5.14.5",
104
+ "@vitejs/plugin-vue": "5.1.2",
105
105
  "@vue/test-utils": "~2.4.6",
106
- "@vue/vue3-jest": "~27.0.0",
107
- "autoprefixer": "~10.4.4",
108
- "convert-source-map": "~2.0.0",
109
- "cypress": "~13.6.0",
106
+ "@vue/vue3-jest": "27.0.0",
107
+ "autoprefixer": "10.4.4",
108
+ "convert-source-map": "2.0.0",
109
+ "cypress": "13.6.0",
110
110
  "esbuild": "0.20.0",
111
- "glob": "~10.3.0",
112
- "jest": "~27.5.0",
113
- "jest-scss-transform": "~1.0.1",
114
- "postcss": "~8.4.12",
115
- "postcss-dir-pseudo-class": "~7.0.0",
116
- "postcss-logical": "~4.0.2",
117
- "rimraf": "~3.0.2",
118
- "rollup": "~4.9.1",
119
- "rollup-plugin-copy": "~3.5.0",
120
- "rollup-plugin-delete": "~2.0.0",
121
- "rollup-plugin-styles": "~4.0.0",
122
- "rollup-plugin-typescript2": "~0.36.0",
123
- "rollup-plugin-vue": "~6.0.0",
124
- "sass": "~1.70.0",
125
- "start-server-and-test": "~2.0.0",
126
- "tailwindcss": "~3.4.0",
127
- "ts-jest": "~27.1.0",
128
- "ts-node": "~10.9.2",
129
- "typescript": "~4.9.4",
130
- "vite": "~4.5.0",
131
- "vite-plugin-vue-inspector": "~5.1.2",
132
- "vue": "~3.4.31",
133
- "vue-docgen-cli": "~4.79.0",
134
- "vue-router": "~4.4.0",
111
+ "glob": "10.3.0",
112
+ "jest": "27.5.0",
113
+ "jest-scss-transform": "1.0.1",
114
+ "postcss": "8.4.12",
115
+ "postcss-dir-pseudo-class": "7.0.0",
116
+ "postcss-logical": "4.0.2",
117
+ "rimraf": "3.0.2",
118
+ "rollup": "4.9.1",
119
+ "rollup-plugin-copy": "3.5.0",
120
+ "rollup-plugin-delete": "2.0.0",
121
+ "rollup-plugin-styles": "4.0.0",
122
+ "rollup-plugin-typescript2": "0.36.0",
123
+ "rollup-plugin-vue": "6.0.0",
124
+ "sass": "1.70.0",
125
+ "start-server-and-test": "2.0.0",
126
+ "tailwindcss": "3.4.0",
127
+ "ts-jest": "27.1.0",
128
+ "ts-node": "10.9.2",
129
+ "typescript": "4.9.4",
130
+ "vite": "4.5.0",
131
+ "vite-plugin-vue-inspector": "5.1.2",
132
+ "vue": "3.4.31",
133
+ "vue-docgen-cli": "4.79.0",
134
+ "vue-router": "4.4.0",
135
135
  "vuex": "4.0.2"
136
136
  },
137
137
  "publishConfig": {
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "42d507459e2ca709d101c07cc1aa92302ae1df28"
141
+ "gitHead": "782271b380929cc378d5414ebeaa98d1e4cd7858"
142
142
  }