@finema/core 1.4.124 → 1.4.126

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 (64) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +1 -1
  4. package/dist/runtime/components/Alert.vue +48 -48
  5. package/dist/runtime/components/Avatar.vue +27 -27
  6. package/dist/runtime/components/Badge.vue +11 -11
  7. package/dist/runtime/components/Breadcrumb.vue +44 -44
  8. package/dist/runtime/components/Button/Group.vue +37 -37
  9. package/dist/runtime/components/Button/index.vue +75 -75
  10. package/dist/runtime/components/Card.vue +38 -38
  11. package/dist/runtime/components/Core.vue +37 -37
  12. package/dist/runtime/components/Dialog/index.vue +108 -108
  13. package/dist/runtime/components/Dropdown/index.vue +70 -70
  14. package/dist/runtime/components/FlexDeck/Base.vue +143 -143
  15. package/dist/runtime/components/FlexDeck/index.vue +68 -68
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +230 -230
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +28 -21
  19. package/dist/runtime/components/Form/InputCheckbox/types.d.ts +3 -1
  20. package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
  21. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
  22. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputSelect/index.vue +43 -36
  25. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +52 -52
  26. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  27. package/dist/runtime/components/Form/InputTags/index.vue +145 -145
  28. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  29. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  30. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  31. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  32. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +341 -341
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
  34. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
  35. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -164
  36. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
  37. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
  38. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -172
  39. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  40. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
  41. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
  42. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
  43. package/dist/runtime/components/Form/index.vue +6 -6
  44. package/dist/runtime/components/Form/types.d.ts +1 -0
  45. package/dist/runtime/components/Icon.vue +23 -23
  46. package/dist/runtime/components/Image.vue +36 -36
  47. package/dist/runtime/components/Loader.vue +27 -27
  48. package/dist/runtime/components/Log.vue +6 -30
  49. package/dist/runtime/components/LogItem.vue +43 -0
  50. package/dist/runtime/components/Modal/index.vue +146 -146
  51. package/dist/runtime/components/QRCode.vue +22 -22
  52. package/dist/runtime/components/SimplePagination.vue +96 -96
  53. package/dist/runtime/components/Slideover/index.vue +110 -110
  54. package/dist/runtime/components/Table/Base.vue +139 -139
  55. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  56. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  57. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  58. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  59. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  60. package/dist/runtime/components/Table/Simple.vue +69 -69
  61. package/dist/runtime/components/Table/index.vue +65 -65
  62. package/dist/runtime/components/Tabs/index.vue +64 -64
  63. package/dist/runtime/components/TeleportSafe.vue +40 -40
  64. package/package.json +95 -95
@@ -1,139 +1,139 @@
1
- <template>
2
- <UTable :loading="status.isLoading" :columns="columns" :rows="rawData" v-bind="$attrs">
3
- <template #loading-state>
4
- <div class="flex h-60 items-center justify-center">
5
- <Icon name="i-svg-spinners:180-ring-with-bg" class="text-primary size-8" />
6
- </div>
7
- </template>
8
- <template #empty-state>
9
- <div class="flex flex-col items-center justify-center gap-3 py-6">
10
- <span class="text-sm italic">ไม่พบข้อมูล!</span>
11
- </div>
12
- </template>
13
- <template v-for="column in columns" #[`${column.key}-data`]="{ row }" :key="column.key">
14
- <ColumnNumber
15
- v-if="column.type === COLUMN_TYPES.NUMBER"
16
- :value="transformValue(column, row)"
17
- :column="column"
18
- :row="row"
19
- />
20
- <ColumnImage
21
- v-else-if="column.type === COLUMN_TYPES.IMAGE"
22
- :value="transformValue(column, row)"
23
- :column="column"
24
- :row="row"
25
- />
26
- <ColumnDateTime
27
- v-else-if="column.type === COLUMN_TYPES.DATE_TIME"
28
- :value="transformValue(column, row)"
29
- :column="column"
30
- :row="row"
31
- />
32
- <ColumnDate
33
- v-else-if="column.type === COLUMN_TYPES.DATE"
34
- :value="transformValue(column, row)"
35
- :column="column"
36
- :row="row"
37
- />
38
- <component
39
- :is="column.component"
40
- v-else-if="column.type === COLUMN_TYPES.COMPONENT"
41
- :value="transformValue(column, row)"
42
- :column="column"
43
- :row="row"
44
- />
45
- <ColumnText v-else :value="transformValue(column, row)" :column="column" :row="row" />
46
- </template>
47
-
48
- <template v-for="(_, slot) of $slots" #[slot]="scope">
49
- <slot :name="slot" v-bind="scope" />
50
- </template>
51
- </UTable>
52
- <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
53
- <p class="text-xs text-gray-500">
54
- ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
55
- </p>
56
- <UPagination
57
- v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
58
- v-model="page"
59
- :page-count="pageOptions.limit"
60
- :total="pageOptions.totalCount"
61
- />
62
- <SimplePagination
63
- v-if="pageOptions.totalPage > 1 && isSimplePagination"
64
- v-model="page"
65
- :page-count="pageOptions.limit"
66
- :total="pageOptions.totalCount"
67
- />
68
- </div>
69
- </template>
70
-
71
- <script lang="ts" setup>
72
- import { COLUMN_TYPES, type IColumn, type ITableOptions } from '#core/components/Table/types'
73
- import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
74
- import ColumnImage from '#core/components/Table/ColumnImage.vue'
75
- import { computed, type PropType } from 'vue'
76
- import { StringHelper } from '#core/utils/StringHelper'
77
- import { ref, watch } from '#imports'
78
- import ColumnDateTime from '#core/components/Table/ColumnDateTime.vue'
79
- import ColumnDate from '#core/components/Table/ColumnDate.vue'
80
- import ColumnText from '#core/components/Table/ColumnText.vue'
81
-
82
- const emits = defineEmits(['pageChange'])
83
-
84
- const props = defineProps({
85
- status: {
86
- type: Object as PropType<ITableOptions['status']>,
87
- required: true,
88
- },
89
- pageOptions: {
90
- type: Object as PropType<ITableOptions['pageOptions']>,
91
- required: false,
92
- },
93
- columns: {
94
- type: Array as PropType<ITableOptions['columns']>,
95
- required: true,
96
- },
97
- rawData: {
98
- type: Array as PropType<ITableOptions['rawData']>,
99
- required: true,
100
- },
101
- isSimplePagination: {
102
- type: Boolean as PropType<ITableOptions['isSimplePagination']>,
103
- default: false,
104
- },
105
- isHideBottomPagination: {
106
- type: Boolean as PropType<ITableOptions['isHideBottomPagination']>,
107
- default: false,
108
- },
109
- })
110
-
111
- const page = ref(props.pageOptions?.currentPage || 1)
112
-
113
- const pageBetween = computed((): string => {
114
- const length = props.rawData?.length
115
-
116
- if (length === 0) {
117
- return '0'
118
- }
119
-
120
- const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
121
- const end = start + length - 1
122
-
123
- return `${start} - ${end}`
124
- })
125
-
126
- const transformValue = (column: IColumn, row: any) => {
127
- return column.transform ? column.transform(row[column.key], row, column) : row[column.key]
128
- }
129
-
130
- const totalCountWithComma = computed((): string => {
131
- return !props.pageOptions!.totalCount
132
- ? '0'
133
- : StringHelper.withComma(props.pageOptions!.totalCount)
134
- })
135
-
136
- watch(page, () => {
137
- emits('pageChange', page.value)
138
- })
139
- </script>
1
+ <template>
2
+ <UTable :loading="status.isLoading" :columns="columns" :rows="rawData" v-bind="$attrs">
3
+ <template #loading-state>
4
+ <div class="flex h-60 items-center justify-center">
5
+ <Icon name="i-svg-spinners:180-ring-with-bg" class="text-primary size-8" />
6
+ </div>
7
+ </template>
8
+ <template #empty-state>
9
+ <div class="flex flex-col items-center justify-center gap-3 py-6">
10
+ <span class="text-sm italic">ไม่พบข้อมูล!</span>
11
+ </div>
12
+ </template>
13
+ <template v-for="column in columns" #[`${column.key}-data`]="{ row }" :key="column.key">
14
+ <ColumnNumber
15
+ v-if="column.type === COLUMN_TYPES.NUMBER"
16
+ :value="transformValue(column, row)"
17
+ :column="column"
18
+ :row="row"
19
+ />
20
+ <ColumnImage
21
+ v-else-if="column.type === COLUMN_TYPES.IMAGE"
22
+ :value="transformValue(column, row)"
23
+ :column="column"
24
+ :row="row"
25
+ />
26
+ <ColumnDateTime
27
+ v-else-if="column.type === COLUMN_TYPES.DATE_TIME"
28
+ :value="transformValue(column, row)"
29
+ :column="column"
30
+ :row="row"
31
+ />
32
+ <ColumnDate
33
+ v-else-if="column.type === COLUMN_TYPES.DATE"
34
+ :value="transformValue(column, row)"
35
+ :column="column"
36
+ :row="row"
37
+ />
38
+ <component
39
+ :is="column.component"
40
+ v-else-if="column.type === COLUMN_TYPES.COMPONENT"
41
+ :value="transformValue(column, row)"
42
+ :column="column"
43
+ :row="row"
44
+ />
45
+ <ColumnText v-else :value="transformValue(column, row)" :column="column" :row="row" />
46
+ </template>
47
+
48
+ <template v-for="(_, slot) of $slots" #[slot]="scope">
49
+ <slot :name="slot" v-bind="scope" />
50
+ </template>
51
+ </UTable>
52
+ <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
53
+ <p class="text-xs text-gray-500">
54
+ ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
55
+ </p>
56
+ <UPagination
57
+ v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
58
+ v-model="page"
59
+ :page-count="pageOptions.limit"
60
+ :total="pageOptions.totalCount"
61
+ />
62
+ <SimplePagination
63
+ v-if="pageOptions.totalPage > 1 && isSimplePagination"
64
+ v-model="page"
65
+ :page-count="pageOptions.limit"
66
+ :total="pageOptions.totalCount"
67
+ />
68
+ </div>
69
+ </template>
70
+
71
+ <script lang="ts" setup>
72
+ import { COLUMN_TYPES, type IColumn, type ITableOptions } from '#core/components/Table/types'
73
+ import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
74
+ import ColumnImage from '#core/components/Table/ColumnImage.vue'
75
+ import { computed, type PropType } from 'vue'
76
+ import { StringHelper } from '#core/utils/StringHelper'
77
+ import { ref, watch } from '#imports'
78
+ import ColumnDateTime from '#core/components/Table/ColumnDateTime.vue'
79
+ import ColumnDate from '#core/components/Table/ColumnDate.vue'
80
+ import ColumnText from '#core/components/Table/ColumnText.vue'
81
+
82
+ const emits = defineEmits(['pageChange'])
83
+
84
+ const props = defineProps({
85
+ status: {
86
+ type: Object as PropType<ITableOptions['status']>,
87
+ required: true,
88
+ },
89
+ pageOptions: {
90
+ type: Object as PropType<ITableOptions['pageOptions']>,
91
+ required: false,
92
+ },
93
+ columns: {
94
+ type: Array as PropType<ITableOptions['columns']>,
95
+ required: true,
96
+ },
97
+ rawData: {
98
+ type: Array as PropType<ITableOptions['rawData']>,
99
+ required: true,
100
+ },
101
+ isSimplePagination: {
102
+ type: Boolean as PropType<ITableOptions['isSimplePagination']>,
103
+ default: false,
104
+ },
105
+ isHideBottomPagination: {
106
+ type: Boolean as PropType<ITableOptions['isHideBottomPagination']>,
107
+ default: false,
108
+ },
109
+ })
110
+
111
+ const page = ref(props.pageOptions?.currentPage || 1)
112
+
113
+ const pageBetween = computed((): string => {
114
+ const length = props.rawData?.length
115
+
116
+ if (length === 0) {
117
+ return '0'
118
+ }
119
+
120
+ const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
121
+ const end = start + length - 1
122
+
123
+ return `${start} - ${end}`
124
+ })
125
+
126
+ const transformValue = (column: IColumn, row: any) => {
127
+ return column.transform ? column.transform(row[column.key], row, column) : row[column.key]
128
+ }
129
+
130
+ const totalCountWithComma = computed((): string => {
131
+ return !props.pageOptions!.totalCount
132
+ ? '0'
133
+ : StringHelper.withComma(props.pageOptions!.totalCount)
134
+ })
135
+
136
+ watch(page, () => {
137
+ emits('pageChange', page.value)
138
+ })
139
+ </script>
@@ -1,16 +1,16 @@
1
- <template>
2
- {{ getValue }}
3
- </template>
4
- <script lang="ts" setup>
5
- import { computed } from 'vue'
6
- import { type IColumn } from '#core/components/Table/types'
7
- import { TimeHelper } from '#core/utils/TimeHelper'
8
-
9
- const props = defineProps<{
10
- value: any
11
- row: any
12
- column: IColumn
13
- }>()
14
-
15
- const getValue = computed<string>(() => TimeHelper.displayDate(props.value))
16
- </script>
1
+ <template>
2
+ {{ getValue }}
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { computed } from 'vue'
6
+ import { type IColumn } from '#core/components/Table/types'
7
+ import { TimeHelper } from '#core/utils/TimeHelper'
8
+
9
+ const props = defineProps<{
10
+ value: any
11
+ row: any
12
+ column: IColumn
13
+ }>()
14
+
15
+ const getValue = computed<string>(() => TimeHelper.displayDate(props.value))
16
+ </script>
@@ -1,18 +1,18 @@
1
- <template>
2
- {{ getValue }}
3
- </template>
4
- <script lang="ts" setup>
5
- import { computed } from 'vue'
6
- import { type IColumn } from '#core/components/Table/types'
7
- import { TimeHelper } from '#core/utils/TimeHelper'
8
-
9
- const props = defineProps<{
10
- value: any
11
- row: any
12
- column: IColumn
13
- }>()
14
-
15
- const getValue = computed(() => {
16
- return TimeHelper.displayDateTime(props.value)
17
- })
18
- </script>
1
+ <template>
2
+ {{ getValue }}
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { computed } from 'vue'
6
+ import { type IColumn } from '#core/components/Table/types'
7
+ import { TimeHelper } from '#core/utils/TimeHelper'
8
+
9
+ const props = defineProps<{
10
+ value: any
11
+ row: any
12
+ column: IColumn
13
+ }>()
14
+
15
+ const getValue = computed(() => {
16
+ return TimeHelper.displayDateTime(props.value)
17
+ })
18
+ </script>
@@ -1,15 +1,15 @@
1
- <template>
2
- <Image class="h-12" :src="getValue" />
3
- </template>
4
- <script lang="ts" setup>
5
- import { computed } from 'vue'
6
- import { type IColumn } from '#core/components/Table/types'
7
-
8
- const props = defineProps<{
9
- value: any
10
- row: any
11
- column: IColumn
12
- }>()
13
-
14
- const getValue = computed(() => props.value)
15
- </script>
1
+ <template>
2
+ <Image class="h-12" :src="getValue" />
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { computed } from 'vue'
6
+ import { type IColumn } from '#core/components/Table/types'
7
+
8
+ const props = defineProps<{
9
+ value: any
10
+ row: any
11
+ column: IColumn
12
+ }>()
13
+
14
+ const getValue = computed(() => props.value)
15
+ </script>
@@ -1,14 +1,14 @@
1
- <template>{{ getValue }}</template>
2
- <script lang="ts" setup>
3
- import { StringHelper } from '../../utils/StringHelper'
4
- import { computed } from 'vue'
5
- import { type IColumn } from '#core/components/Table/types'
6
-
7
- const props = defineProps<{
8
- value: any
9
- row: any
10
- column: IColumn
11
- }>()
12
-
13
- const getValue = computed(() => StringHelper.withComma(props.value))
14
- </script>
1
+ <template>{{ getValue }}</template>
2
+ <script lang="ts" setup>
3
+ import { StringHelper } from '../../utils/StringHelper'
4
+ import { computed } from 'vue'
5
+ import { type IColumn } from '#core/components/Table/types'
6
+
7
+ const props = defineProps<{
8
+ value: any
9
+ row: any
10
+ column: IColumn
11
+ }>()
12
+
13
+ const getValue = computed(() => StringHelper.withComma(props.value))
14
+ </script>
@@ -1,25 +1,25 @@
1
- <template>{{ getValue }}</template>
2
- <script lang="ts" setup>
3
- import { computed } from 'vue'
4
- import { type IColumn } from '#core/components/Table/types'
5
- import { StringHelper } from '#imports'
6
-
7
- const props = defineProps<{
8
- value: any
9
- row: any
10
- column: IColumn<{
11
- max?: number
12
- }>
13
- }>()
14
-
15
- const getValue = computed<string>(() => {
16
- const value = props.value
17
- const max = props.column.props?.max
18
-
19
- if (max) {
20
- return StringHelper.truncate(value, max)
21
- }
22
-
23
- return value ?? '-'
24
- })
25
- </script>
1
+ <template>{{ getValue }}</template>
2
+ <script lang="ts" setup>
3
+ import { computed } from 'vue'
4
+ import { type IColumn } from '#core/components/Table/types'
5
+ import { StringHelper } from '#imports'
6
+
7
+ const props = defineProps<{
8
+ value: any
9
+ row: any
10
+ column: IColumn<{
11
+ max?: number
12
+ }>
13
+ }>()
14
+
15
+ const getValue = computed<string>(() => {
16
+ const value = props.value
17
+ const max = props.column.props?.max
18
+
19
+ if (max) {
20
+ return StringHelper.truncate(value, max)
21
+ }
22
+
23
+ return value ?? '-'
24
+ })
25
+ </script>
@@ -1,69 +1,69 @@
1
- <template>
2
- <Base
3
- v-bind="$attrs"
4
- :columns="options.columns"
5
- :raw-data="itemsByPage"
6
- :status="options.status"
7
- :page-options="pageOptions"
8
- :is-simple-pagination="isShowSimplePagination"
9
- :is-hide-bottom-pagination="options.isHideBottomPagination"
10
- @page-change="onPageChange"
11
- >
12
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
- <slot :name="slot" v-bind="slotProps || {}" />
14
- </template>
15
- </Base>
16
- </template>
17
- <script lang="ts" setup>
18
- import { computed, type PropType, ref } from 'vue'
19
- import { type ISimpleTableOptions } from '#core/components/Table/types'
20
- import Base from '#core/components/Table/Base.vue'
21
- import { initPageOptions } from '#core/composables/loaderPage'
22
- import { useCoreConfig } from '#core/composables/useConfig'
23
-
24
- defineSlots<{
25
- 'empty-state': () => any
26
- 'loading-state': () => any
27
- }>()
28
-
29
- const props = defineProps({
30
- options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
- })
32
-
33
- const currentPage = ref(1)
34
- const coreConfig = useCoreConfig()
35
- const isShowSimplePagination = computed(
36
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
- )
38
-
39
- const pageOptions = computed(() => {
40
- if (!props.options?.limit) {
41
- return undefined
42
- }
43
-
44
- return {
45
- ...initPageOptions({
46
- limit: props.options.limit,
47
- primary: props.options.primary,
48
- }),
49
- totalCount: props.options.rawData.length,
50
- totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
- currentPage: currentPage.value,
52
- }
53
- })
54
-
55
- const onPageChange = (page: number) => {
56
- currentPage.value = page
57
- }
58
-
59
- const itemsByPage = computed(() => {
60
- if (!pageOptions.value) {
61
- return props.options?.rawData
62
- }
63
-
64
- const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
- const end = start + pageOptions.value.limit
66
-
67
- return props.options?.rawData.slice(start, end)
68
- })
69
- </script>
1
+ <template>
2
+ <Base
3
+ v-bind="$attrs"
4
+ :columns="options.columns"
5
+ :raw-data="itemsByPage"
6
+ :status="options.status"
7
+ :page-options="pageOptions"
8
+ :is-simple-pagination="isShowSimplePagination"
9
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
10
+ @page-change="onPageChange"
11
+ >
12
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
+ <slot :name="slot" v-bind="slotProps || {}" />
14
+ </template>
15
+ </Base>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { computed, type PropType, ref } from 'vue'
19
+ import { type ISimpleTableOptions } from '#core/components/Table/types'
20
+ import Base from '#core/components/Table/Base.vue'
21
+ import { initPageOptions } from '#core/composables/loaderPage'
22
+ import { useCoreConfig } from '#core/composables/useConfig'
23
+
24
+ defineSlots<{
25
+ 'empty-state': () => any
26
+ 'loading-state': () => any
27
+ }>()
28
+
29
+ const props = defineProps({
30
+ options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
+ })
32
+
33
+ const currentPage = ref(1)
34
+ const coreConfig = useCoreConfig()
35
+ const isShowSimplePagination = computed(
36
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
+ )
38
+
39
+ const pageOptions = computed(() => {
40
+ if (!props.options?.limit) {
41
+ return undefined
42
+ }
43
+
44
+ return {
45
+ ...initPageOptions({
46
+ limit: props.options.limit,
47
+ primary: props.options.primary,
48
+ }),
49
+ totalCount: props.options.rawData.length,
50
+ totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
+ currentPage: currentPage.value,
52
+ }
53
+ })
54
+
55
+ const onPageChange = (page: number) => {
56
+ currentPage.value = page
57
+ }
58
+
59
+ const itemsByPage = computed(() => {
60
+ if (!pageOptions.value) {
61
+ return props.options?.rawData
62
+ }
63
+
64
+ const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
+ const end = start + pageOptions.value.limit
66
+
67
+ return props.options?.rawData.slice(start, end)
68
+ })
69
+ </script>