adminforth 2.13.0-next.32 → 2.13.0-next.34
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 +65 -5
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
v-if="headerCloseButton"
|
|
23
23
|
type="button"
|
|
24
24
|
class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
|
|
25
|
-
@click="
|
|
25
|
+
@click="tryToHideModal"
|
|
26
26
|
>
|
|
27
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
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"/>
|
|
@@ -51,13 +51,41 @@
|
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
|
+
<div>
|
|
55
|
+
<!-- Confirmation Modal -->
|
|
56
|
+
<div
|
|
57
|
+
v-if="showConfirmationOnClose"
|
|
58
|
+
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-60"
|
|
59
|
+
>
|
|
60
|
+
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
|
|
61
|
+
<h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
|
|
62
|
+
<p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
|
|
63
|
+
<div class="flex justify-end">
|
|
64
|
+
<Button
|
|
65
|
+
class="me-3"
|
|
66
|
+
@click="showConfirmationOnClose = false"
|
|
67
|
+
>
|
|
68
|
+
Cancel
|
|
69
|
+
</Button>
|
|
70
|
+
<Button
|
|
71
|
+
@click="
|
|
72
|
+
showConfirmationOnClose = false;
|
|
73
|
+
modal?.hide();
|
|
74
|
+
"
|
|
75
|
+
>
|
|
76
|
+
Confirm
|
|
77
|
+
</Button>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
54
82
|
</div>
|
|
55
83
|
</Teleport>
|
|
56
84
|
</template>
|
|
57
85
|
|
|
58
86
|
<script setup lang="ts">
|
|
59
87
|
import Button from "./Button.vue";
|
|
60
|
-
import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
|
|
88
|
+
import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
|
|
61
89
|
import { Modal } from 'flowbite';
|
|
62
90
|
|
|
63
91
|
const modalEl = ref(null);
|
|
@@ -77,20 +105,42 @@ interface DialogProps {
|
|
|
77
105
|
beforeCloseFunction?: (() => void | Promise<void>) | null
|
|
78
106
|
beforeOpenFunction?: (() => void | Promise<void>) | null
|
|
79
107
|
closable?: boolean
|
|
108
|
+
askForCloseConfirmation?: boolean
|
|
109
|
+
closeConfirmationText?: string
|
|
80
110
|
}
|
|
81
111
|
|
|
82
112
|
const props = withDefaults(defineProps<DialogProps>(), {
|
|
83
113
|
header: '',
|
|
84
114
|
headerCloseButton: true,
|
|
85
|
-
buttons: () => [
|
|
86
|
-
{ label: 'Close', onclick: (dialog: any) => dialog.hide(), type: '' },
|
|
87
|
-
],
|
|
115
|
+
buttons: () => [],
|
|
88
116
|
clickToCloseOutside: true,
|
|
89
117
|
beforeCloseFunction: null,
|
|
90
118
|
beforeOpenFunction: null,
|
|
91
119
|
closable: true,
|
|
120
|
+
askForCloseConfirmation: false,
|
|
121
|
+
closeConfirmationText: 'Are you sure you want to close this dialog?',
|
|
92
122
|
})
|
|
93
123
|
|
|
124
|
+
const buttons = computed<DialogButton[]>(() => {
|
|
125
|
+
if (props.buttons && props.buttons.length > 0) {
|
|
126
|
+
return props.buttons;
|
|
127
|
+
}
|
|
128
|
+
return [
|
|
129
|
+
{
|
|
130
|
+
label: 'Close',
|
|
131
|
+
onclick: (dialog: any) => {
|
|
132
|
+
if (!props.askForCloseConfirmation) {
|
|
133
|
+
dialog.hide();
|
|
134
|
+
} else {
|
|
135
|
+
showConfirmationOnClose.value = true;
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
options: {}
|
|
139
|
+
}
|
|
140
|
+
];
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
const showConfirmationOnClose = ref(false);
|
|
94
144
|
onMounted(async () => {
|
|
95
145
|
//await one tick when all is mounted
|
|
96
146
|
await nextTick();
|
|
@@ -129,6 +179,16 @@ function close() {
|
|
|
129
179
|
defineExpose({
|
|
130
180
|
open: open,
|
|
131
181
|
close: close,
|
|
182
|
+
tryToHideModal: tryToHideModal,
|
|
132
183
|
})
|
|
133
184
|
|
|
185
|
+
function tryToHideModal() {
|
|
186
|
+
if (!props.askForCloseConfirmation ) {
|
|
187
|
+
modal.value?.hide();
|
|
188
|
+
} else {
|
|
189
|
+
showConfirmationOnClose.value = true;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
|
|
134
194
|
</script>
|