ketekny-ui-kit 1.0.140 → 1.0.141
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.
- package/package.json +1 -1
- package/src/ui/kPagination.vue +138 -43
- package/src/ui/kSelect.vue +2 -2
package/package.json
CHANGED
package/src/ui/kPagination.vue
CHANGED
|
@@ -1,66 +1,116 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="flex flex-wrap items-center gap-3">
|
|
3
|
-
<div class="
|
|
2
|
+
<div class="flex flex-wrap items-center" :class="size === 'small' ? 'gap-2' : 'gap-3'">
|
|
3
|
+
<div class="font-medium text-slate-500" :class="size === 'small' ? 'text-xs' : 'text-sm'">
|
|
4
4
|
{{ paginationLabel }}
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
<div v-if="showPageSize" class="w-36 shrink-0">
|
|
8
|
+
<kSelect
|
|
9
|
+
v-model="pageSizeModel"
|
|
10
|
+
:options="normalizedPageSizeOptions"
|
|
11
|
+
:clearable="false"
|
|
12
|
+
:searchable="false"
|
|
13
|
+
aria-label="Μέγεθος σελίδας"
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div v-if="compact" class="inline-flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300">
|
|
18
|
+
<button
|
|
19
|
+
type="button"
|
|
20
|
+
class="inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-300 dark:hover:bg-slate-800 dark:disabled:text-slate-600"
|
|
21
|
+
:disabled="loading || currentPage <= 1"
|
|
22
|
+
aria-label="Προηγούμενη σελίδα"
|
|
23
|
+
@click="emit('previous')"
|
|
24
|
+
>
|
|
25
|
+
<ChevronLeft class="w-4 h-4" />
|
|
26
|
+
</button>
|
|
27
|
+
|
|
28
|
+
<span class="inline-flex items-center justify-center min-w-10 h-10 px-3 border border-slate-200 rounded-lg text-slate-700 bg-white dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
|
|
29
|
+
{{ currentPage }}
|
|
30
|
+
</span>
|
|
31
|
+
<span>από</span>
|
|
32
|
+
<span>{{ safeTotalPages }}</span>
|
|
33
|
+
|
|
34
|
+
<button
|
|
35
|
+
type="button"
|
|
36
|
+
class="inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-300 dark:hover:bg-slate-800 dark:disabled:text-slate-600"
|
|
37
|
+
:disabled="loading || currentPage >= safeTotalPages"
|
|
38
|
+
aria-label="Επόμενη σελίδα"
|
|
39
|
+
@click="emit('next')"
|
|
40
|
+
>
|
|
41
|
+
<ChevronRight class="w-4 h-4" />
|
|
42
|
+
</button>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div v-else class="inline-flex overflow-hidden border border-slate-200 rounded-lg divide-x divide-slate-200 dark:border-slate-700 dark:divide-slate-700">
|
|
46
|
+
<button
|
|
47
|
+
type="button"
|
|
48
|
+
:class="controlClass"
|
|
49
|
+
:disabled="loading || currentPage <= 1"
|
|
50
|
+
@click="emit('first')"
|
|
51
|
+
>
|
|
52
|
+
<ChevronsLeft :class="iconClass" />
|
|
53
|
+
<span>Πρώτη</span>
|
|
54
|
+
</button>
|
|
55
|
+
|
|
56
|
+
<button
|
|
57
|
+
type="button"
|
|
58
|
+
:class="controlClass"
|
|
59
|
+
:disabled="loading || currentPage <= 1"
|
|
60
|
+
@click="emit('previous')"
|
|
61
|
+
>
|
|
62
|
+
<ChevronLeft :class="iconClass" />
|
|
63
|
+
<span>Προηγ.</span>
|
|
64
|
+
</button>
|
|
65
|
+
|
|
24
66
|
<template v-for="item in paginationItems" :key="item.key">
|
|
25
67
|
<span
|
|
26
68
|
v-if="item.type === 'ellipsis'"
|
|
27
|
-
class="
|
|
69
|
+
class="flex items-center justify-center font-medium text-slate-400 bg-white dark:bg-slate-900"
|
|
70
|
+
:class="segmentClass"
|
|
28
71
|
>
|
|
29
72
|
...
|
|
30
73
|
</span>
|
|
31
74
|
|
|
32
|
-
<
|
|
75
|
+
<button
|
|
33
76
|
v-else
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
:class="item.active ? 'ring-2 ring-cyan-200' : ''"
|
|
77
|
+
type="button"
|
|
78
|
+
:class="[pageClass, item.active ? activePageClass : 'hover:bg-slate-50 dark:hover:bg-slate-800']"
|
|
37
79
|
:disabled="loading || item.active"
|
|
38
80
|
@click="emit('page', item.page)"
|
|
39
|
-
|
|
81
|
+
:aria-current="item.active ? 'page' : undefined"
|
|
82
|
+
>
|
|
83
|
+
{{ item.page }}
|
|
84
|
+
</button>
|
|
40
85
|
</template>
|
|
41
|
-
</div>
|
|
42
86
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
87
|
+
<button
|
|
88
|
+
type="button"
|
|
89
|
+
:class="controlClass"
|
|
90
|
+
:disabled="loading || currentPage >= safeTotalPages"
|
|
91
|
+
@click="emit('next')"
|
|
92
|
+
>
|
|
93
|
+
<span>Επόμ.</span>
|
|
94
|
+
<ChevronRight :class="iconClass" />
|
|
95
|
+
</button>
|
|
96
|
+
|
|
97
|
+
<button
|
|
98
|
+
type="button"
|
|
99
|
+
:class="controlClass"
|
|
100
|
+
:disabled="loading || currentPage >= safeTotalPages"
|
|
101
|
+
@click="emit('last')"
|
|
102
|
+
>
|
|
103
|
+
<span>Τελευταία</span>
|
|
104
|
+
<ChevronsRight :class="iconClass" />
|
|
105
|
+
</button>
|
|
106
|
+
</div>
|
|
58
107
|
</div>
|
|
59
108
|
</template>
|
|
60
109
|
|
|
61
110
|
<script setup>
|
|
62
111
|
import { computed } from 'vue'
|
|
63
|
-
import
|
|
112
|
+
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
|
|
113
|
+
import kSelect from './kSelect.vue'
|
|
64
114
|
|
|
65
115
|
const props = defineProps({
|
|
66
116
|
paginationLabel: {
|
|
@@ -79,12 +129,57 @@ const props = defineProps({
|
|
|
79
129
|
type: Boolean,
|
|
80
130
|
default: false,
|
|
81
131
|
},
|
|
132
|
+
size: {
|
|
133
|
+
type: String,
|
|
134
|
+
default: 'default',
|
|
135
|
+
validator: (value) => ['default', 'small'].includes(value),
|
|
136
|
+
},
|
|
137
|
+
compact: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
default: false,
|
|
140
|
+
},
|
|
141
|
+
pageSize: {
|
|
142
|
+
type: Number,
|
|
143
|
+
default: 10,
|
|
144
|
+
},
|
|
145
|
+
pageSizeOptions: {
|
|
146
|
+
type: Array,
|
|
147
|
+
default: () => [10, 25, 50, 100],
|
|
148
|
+
},
|
|
149
|
+
showPageSize: {
|
|
150
|
+
type: Boolean,
|
|
151
|
+
default: true,
|
|
152
|
+
},
|
|
82
153
|
})
|
|
83
154
|
|
|
84
|
-
const emit = defineEmits(['first', 'previous', 'page', 'next', 'last'])
|
|
155
|
+
const emit = defineEmits(['first', 'previous', 'page', 'next', 'last', 'update:pageSize'])
|
|
85
156
|
|
|
86
157
|
const safeTotalPages = computed(() => Math.max(1, Math.trunc(props.totalPages || 0)))
|
|
87
158
|
const currentPage = computed(() => Math.min(Math.max(Math.trunc(props.page || 1), 1), safeTotalPages.value))
|
|
159
|
+
const segmentClass = computed(() => props.size === 'small' ? 'h-8 min-w-8 px-2 text-xs' : 'h-10 min-w-9 px-3 text-sm')
|
|
160
|
+
const controlClass = computed(() => [
|
|
161
|
+
segmentClass.value,
|
|
162
|
+
'inline-flex items-center justify-center gap-1 bg-white text-slate-700 transition-colors',
|
|
163
|
+
'hover:bg-slate-50 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-white',
|
|
164
|
+
'dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 dark:disabled:text-slate-600 dark:disabled:hover:bg-slate-900',
|
|
165
|
+
])
|
|
166
|
+
const pageClass = computed(() => [
|
|
167
|
+
segmentClass.value,
|
|
168
|
+
'inline-flex items-center justify-center bg-white text-slate-700 transition-colors',
|
|
169
|
+
'disabled:cursor-default dark:bg-slate-900 dark:text-slate-200',
|
|
170
|
+
])
|
|
171
|
+
const activePageClass = 'bg-slate-100 text-slate-900 dark:bg-slate-700 dark:text-white'
|
|
172
|
+
const iconClass = computed(() => props.size === 'small' ? 'w-3.5 h-3.5' : 'w-4 h-4')
|
|
173
|
+
const normalizedPageSizeOptions = computed(() =>
|
|
174
|
+
props.pageSizeOptions.map((value) => ({
|
|
175
|
+
value: Number(value),
|
|
176
|
+
label: `${value} / σελίδα`,
|
|
177
|
+
}))
|
|
178
|
+
)
|
|
179
|
+
const pageSizeModel = computed({
|
|
180
|
+
get: () => props.pageSize,
|
|
181
|
+
set: (value) => emit('update:pageSize', Number(value)),
|
|
182
|
+
})
|
|
88
183
|
|
|
89
184
|
const paginationItems = computed(() => {
|
|
90
185
|
const pages = new Set([1, safeTotalPages.value, currentPage.value - 1, currentPage.value, currentPage.value + 1])
|
package/src/ui/kSelect.vue
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
<SelectViewport
|
|
88
88
|
ref="viewportRef"
|
|
89
|
-
class="select-viewport p-1 overflow-y-
|
|
89
|
+
class="select-viewport p-1 overflow-y-auto"
|
|
90
90
|
:style="{ maxHeight: resolvedDropdownHeight }"
|
|
91
91
|
@keydown="handleViewportKeydown"
|
|
92
92
|
>
|
|
@@ -418,7 +418,7 @@ function handleViewportKeydown(event) {
|
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
:deep([data-reka-select-viewport]) {
|
|
421
|
-
scrollbar-gutter:
|
|
421
|
+
scrollbar-gutter: auto;
|
|
422
422
|
scrollbar-width: auto !important;
|
|
423
423
|
scrollbar-color: #475569 #cbd5e1 !important;
|
|
424
424
|
-ms-overflow-style: auto !important;
|