adminforth 1.7.0-next.21 → 1.7.0-next.22
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/dist/spa/src/afcl/Dialog.vue +96 -0
- package/package.json +1 -1
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div @click="modal?.show()" class="inline-flex items-center cursor-pointer">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</div>
|
|
5
|
+
<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">
|
|
6
|
+
<div class="relative p-4 w-full max-w-2xl max-h-full">
|
|
7
|
+
<!-- Modal content -->
|
|
8
|
+
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
|
9
|
+
<!-- Modal header -->
|
|
10
|
+
<div
|
|
11
|
+
v-if="header"
|
|
12
|
+
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200"
|
|
13
|
+
>
|
|
14
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
15
|
+
{{ header }}
|
|
16
|
+
</h3>
|
|
17
|
+
<button
|
|
18
|
+
v-if="headerCloseButton"
|
|
19
|
+
type="button"
|
|
20
|
+
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"
|
|
21
|
+
@click="modal?.hide()"
|
|
22
|
+
>
|
|
23
|
+
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
24
|
+
<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"/>
|
|
25
|
+
</svg>
|
|
26
|
+
<span class="sr-only">Close modal</span>
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
<!-- Modal body -->
|
|
30
|
+
<div class="p-4 md:p-5 space-y-4">
|
|
31
|
+
<slot name="content"></slot>
|
|
32
|
+
</div>
|
|
33
|
+
<!-- Modal footer -->
|
|
34
|
+
<div
|
|
35
|
+
v-if="buttons.length"
|
|
36
|
+
class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
|
|
37
|
+
>
|
|
38
|
+
<Button
|
|
39
|
+
v-for="(button, buttonIndex) in buttons"
|
|
40
|
+
:key="buttonIndex"
|
|
41
|
+
v-bind="button.options"
|
|
42
|
+
:class="{ 'ms-3': buttonIndex > 0 }"
|
|
43
|
+
@click="button.onclick(modal)"
|
|
44
|
+
>
|
|
45
|
+
{{ button.label }}
|
|
46
|
+
</Button>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script setup lang="ts">
|
|
54
|
+
import Button from "./Button.vue";
|
|
55
|
+
import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
|
|
56
|
+
import { Modal } from 'flowbite';
|
|
57
|
+
|
|
58
|
+
const modalEl = ref(null);
|
|
59
|
+
const modal: Ref<Modal|null> = ref(null);
|
|
60
|
+
|
|
61
|
+
const props = defineProps({
|
|
62
|
+
header: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: '',
|
|
65
|
+
},
|
|
66
|
+
headerCloseButton: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: true,
|
|
69
|
+
},
|
|
70
|
+
buttons: {
|
|
71
|
+
type: Array,
|
|
72
|
+
default: () => [{ label: 'Close', onclick: (dialog) => dialog.hide(), type: '' }],
|
|
73
|
+
},
|
|
74
|
+
clickToCloseOutside: {
|
|
75
|
+
type: Boolean,
|
|
76
|
+
default: true,
|
|
77
|
+
},
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
onMounted(async () => {
|
|
81
|
+
//await one tick when all is mounted
|
|
82
|
+
await nextTick();
|
|
83
|
+
modal.value = new Modal(
|
|
84
|
+
modalEl.value,
|
|
85
|
+
{
|
|
86
|
+
backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
|
|
87
|
+
},
|
|
88
|
+
);
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
onUnmounted(() => {
|
|
92
|
+
//destroy tooltip
|
|
93
|
+
modal.value?.destroy();
|
|
94
|
+
})
|
|
95
|
+
|
|
96
|
+
</script>
|