From e95d4093d14a0d8a39d60cf63b304fbf5da4034d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 29 Jan 2025 15:48:03 +0500
Subject: [PATCH] fix: 'Paginator'

---
 src/components/Paginator/Paginator.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 0f0126d..1b7130f 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -5,7 +5,7 @@ import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
 import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
 import type { IPaginatorProps } from '@interfaces/componentsProps';
 import PaginatorItem from '@components/Paginator/PaginatorItem.vue';
-import { computed, ref, type Ref, watch } from 'vue';
+import { computed, type Ref, watch } from 'vue';
 import Select from '@components/Select/Select.vue';
 import type { ISelectOption } from '@interfaces/componentsProp';
 import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
@@ -15,16 +15,21 @@ const props = withDefaults(defineProps<IPaginatorProps>(), {
   size: 'normal',
   theme: 'white',
   darknessTheme: '500',
-  itemsPerPage: 1,
 });
 
-const current = defineModel({
+const current = defineModel('current', {
   default: 1,
 }) as Ref<number>;
 
-const perPage = ref(props.itemsPerPageOptions?.[0] ?? props.itemsPerPage);
+const itemsPerPage = defineModel('itemsPerPage', {
+  default: 1,
+}) as Ref<number>;
+
+if (props.itemsPerPageOptions) {
+  itemsPerPage.value = props.itemsPerPageOptions[0];
+}
 
-const itemsLength = computed(() => Math.ceil(props.total / perPage.value));
+const itemsLength = computed(() => Math.ceil(props.total / itemsPerPage.value));
 const initArray = computed(() => Array.from({ length: itemsLength.value }, (_, i) => i + 1));
 const selectOptions = computed(() =>
   !props.itemsPerPageOptions ? [{ value: '1' }] : props.itemsPerPageOptions.map((item) => ({ value: String(item) })),
@@ -59,7 +64,7 @@ const itemSize = computed(() => `${+iconSize.value * 2.5}px`);
 const color = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
 
-watch(perPage, (cur, prev) => {
+watch(itemsPerPage, (cur, prev) => {
   if (cur > prev) current.value = Math.ceil((current.value * prev) / cur);
   else current.value = Math.ceil((prev * (current.value - 1) + +cur) / cur);
 });
@@ -116,7 +121,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <Select
       v-if="itemsPerPageOptions"
-      v-model="perPage"
+      v-model="itemsPerPage"
       :theme="theme"
       :darknessTheme="darknessTheme"
       :size="size"
-- 
GitLab