fix: 'Paginator'

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';

  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) })),

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);

});

    </PaginatorItem>

    <Select

      v-if="itemsPerPageOptions"

      v-model="perPage"

      v-model="itemsPerPage"

      :theme="theme"

      :darknessTheme="darknessTheme"

      :size="size"