simrsx-fe/app/components/app/control-letter/history-dialog.vue

<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
import { config } from './history-list.cfg'

interface Props {
  data: any[]
  paginationMeta: PaginationMeta
}
const props = defineProps<Props>()
const isModalOpen = inject(`isHistoryDialogOpen`) as Ref<boolean>

function handlePageChange(page: number) {
  emit('pageChange', page)
}
</script>

<template>
  <Dialog v-model:open="isModalOpen" title="Riwayat Surat Kontrol" size="full">   
    <PubMyUiDataTable
            v-bind="config"
            :rows="data"
            :skeleton-size="props.paginationMeta?.pageSize"
        />
        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
  </Dialog>
</template>