adminforth 1.11.5-next.2 → 1.11.5-next.4
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.
|
@@ -5,52 +5,54 @@
|
|
|
5
5
|
>
|
|
6
6
|
<slot name="trigger"></slot>
|
|
7
7
|
</div>
|
|
8
|
-
<
|
|
9
|
-
<div
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
18
|
-
{{ header }}
|
|
19
|
-
</h3>
|
|
20
|
-
<button
|
|
21
|
-
v-if="headerCloseButton"
|
|
22
|
-
type="button"
|
|
23
|
-
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
24
|
-
@click="modal?.hide()"
|
|
8
|
+
<Teleport to="body">
|
|
9
|
+
<div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
10
|
+
<div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="$attrs.class?.includes('w-') ? '' : 'w-full'">
|
|
11
|
+
<!-- Modal content -->
|
|
12
|
+
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
|
13
|
+
<!-- Modal header -->
|
|
14
|
+
<div
|
|
15
|
+
v-if="header"
|
|
16
|
+
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200"
|
|
25
17
|
>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
</
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
18
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
19
|
+
{{ header }}
|
|
20
|
+
</h3>
|
|
21
|
+
<button
|
|
22
|
+
v-if="headerCloseButton"
|
|
23
|
+
type="button"
|
|
24
|
+
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
25
|
+
@click="modal?.hide()"
|
|
26
|
+
>
|
|
27
|
+
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
28
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
29
|
+
</svg>
|
|
30
|
+
<span class="sr-only">Close modal</span>
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
<!-- Modal body -->
|
|
34
|
+
<div class="p-4 md:p-5 space-y-4 text-gray-700 dark:text-gray-400">
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</div>
|
|
37
|
+
<!-- Modal footer -->
|
|
38
|
+
<div
|
|
39
|
+
v-if="buttons.length"
|
|
40
|
+
class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
|
|
47
41
|
>
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
<Button
|
|
43
|
+
v-for="(button, buttonIndex) in buttons"
|
|
44
|
+
:key="buttonIndex"
|
|
45
|
+
v-bind="button.options"
|
|
46
|
+
:class="{ 'ms-3': buttonIndex > 0 }"
|
|
47
|
+
@click="button.onclick(modal)"
|
|
48
|
+
>
|
|
49
|
+
{{ button.label }}
|
|
50
|
+
</Button>
|
|
51
|
+
</div>
|
|
50
52
|
</div>
|
|
51
53
|
</div>
|
|
52
54
|
</div>
|
|
53
|
-
</
|
|
55
|
+
</Teleport>
|
|
54
56
|
</template>
|
|
55
57
|
|
|
56
58
|
<script setup lang="ts">
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
<!-- Buttons -->
|
|
190
190
|
<button
|
|
191
191
|
class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
|
|
192
|
-
@click="page
|
|
192
|
+
@click="page--; pageInput = page.toString();" :disabled="page <= 1">
|
|
193
193
|
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
194
194
|
viewBox="0 0 14 10">
|
|
195
195
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
@@ -201,28 +201,28 @@
|
|
|
201
201
|
</button>
|
|
202
202
|
<button
|
|
203
203
|
class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
|
|
204
|
-
@click="page = 1" :disabled="page <= 1">
|
|
204
|
+
@click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
|
|
205
205
|
<!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
|
|
206
206
|
1
|
|
207
207
|
</button>
|
|
208
|
-
<div
|
|
208
|
+
<div
|
|
209
209
|
contenteditable="true"
|
|
210
210
|
class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
|
|
211
211
|
@input="page = parseInt($event.target.innerText) || ''"
|
|
212
212
|
>
|
|
213
|
-
{{
|
|
213
|
+
{{ pageInput }}
|
|
214
214
|
</div>
|
|
215
215
|
|
|
216
216
|
<button
|
|
217
217
|
class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
|
|
218
|
-
@click="page = totalPages" :disabled="page >= totalPages">
|
|
218
|
+
@click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
|
|
219
219
|
{{ totalPages }}
|
|
220
220
|
|
|
221
221
|
<!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
|
|
222
222
|
</button>
|
|
223
223
|
<button
|
|
224
224
|
class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
|
|
225
|
-
@click="page
|
|
225
|
+
@click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
|
|
226
226
|
<span class="hidden sm:inline">{{ $t('Next') }}</span>
|
|
227
227
|
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
228
228
|
viewBox="0 0 14 10">
|
|
@@ -318,6 +318,7 @@ const emits = defineEmits([
|
|
|
318
318
|
]);
|
|
319
319
|
|
|
320
320
|
const checkboxesInternal: Ref<any[]> = ref([]);
|
|
321
|
+
const pageInput = ref('1');
|
|
321
322
|
const page = ref(1);
|
|
322
323
|
const sort = ref([]);
|
|
323
324
|
|
|
@@ -346,6 +347,9 @@ watch(() => props.sort, (newSort) => {
|
|
|
346
347
|
});
|
|
347
348
|
|
|
348
349
|
watch(() => props.page, (newPage) => {
|
|
350
|
+
// page.value and newPage will not be equal only on page load
|
|
351
|
+
// this check prevents cursor jumping on manual input
|
|
352
|
+
if (page.value !== newPage) pageInput.value = newPage.toString();
|
|
349
353
|
page.value = newPage;
|
|
350
354
|
});
|
|
351
355
|
|