diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue index 0f0126dae038fed0f779bd858270f9a5a6da54ac..1b7130f6c324db9430c37f385e2d87fa394ffe1d 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(), { size: 'normal', theme: 'white', darknessTheme: '500', - itemsPerPage: 1, }); -const current = defineModel({ +const current = defineModel('current', { default: 1, }) as Ref; -const perPage = ref(props.itemsPerPageOptions?.[0] ?? props.itemsPerPage); +const itemsPerPage = defineModel('itemsPerPage', { + default: 1, +}) as Ref; + +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) => {