adminforth 2.44.2-next.1 → 2.45.0-next.2
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.
|
@@ -6,24 +6,58 @@
|
|
|
6
6
|
backgroundCustomClasses="z-[998]"
|
|
7
7
|
modalCustomClasses="z-[999]"
|
|
8
8
|
>
|
|
9
|
-
<div class="relative p-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-2xl shadow-xl dark:bg-gray-800" >
|
|
10
|
+
|
|
11
|
+
<button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
|
|
12
|
+
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
12
13
|
<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"/>
|
|
13
14
|
</svg>
|
|
14
|
-
<span class="sr-only">{{ $t('Close modal') }}</span>
|
|
15
15
|
</button>
|
|
16
|
-
<div class="p-4 md:p-5 text-center">
|
|
17
|
-
<svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
18
|
-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
|
19
|
-
</svg>
|
|
20
|
-
<h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
|
|
21
|
-
<h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
17
|
+
<div class="text-center">
|
|
18
|
+
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-5 relative dark:bg-red-900/20">
|
|
19
|
+
<IconClipboardDocumentSolid class="w-10 h-10 text-red-500" />
|
|
20
|
+
<div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
|
|
21
|
+
<span class="text-white text-[10px] font-medium">!</span>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
|
|
26
|
+
There are unsaved changes.
|
|
27
|
+
</h3>
|
|
28
|
+
|
|
29
|
+
<div class="mb-2 text-[15px] text-gray-600 dark:text-gray-300">
|
|
30
|
+
<div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
|
|
31
|
+
<p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<hr class="border-t border-gray-100 dark:border-gray-700 mb-6">
|
|
35
|
+
|
|
36
|
+
<div class="flex justify-center gap-4 w-full">
|
|
37
|
+
<button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
|
|
38
|
+
Stay and continue
|
|
39
|
+
</button>
|
|
40
|
+
|
|
41
|
+
<button
|
|
42
|
+
@click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}"
|
|
43
|
+
type="button"
|
|
44
|
+
class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none
|
|
45
|
+
text-white bg-red-600 hover:bg-red-700
|
|
46
|
+
dark:bg-red-500 dark:hover:bg-red-600
|
|
47
|
+
border border-red-700 dark:border-red-600
|
|
48
|
+
rounded-lg shadow-sm focus:z-10 focus:ring-4
|
|
49
|
+
focus:ring-red-100 dark:focus:ring-red-900 gap-1">
|
|
50
|
+
Leave without saving
|
|
51
|
+
</button>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="flex items-center justify-center mt-5 text-xs text-gray-400 gap-1.5 font-medium">
|
|
55
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
56
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
57
|
+
</svg>
|
|
58
|
+
<span>Your changes will not be saved</span>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
27
61
|
</div>
|
|
28
62
|
</div>
|
|
29
63
|
</Modal>
|
|
@@ -31,9 +65,11 @@
|
|
|
31
65
|
</template>
|
|
32
66
|
|
|
33
67
|
<script setup lang="ts">
|
|
34
|
-
import { watch,
|
|
68
|
+
import { watch, ref } from 'vue';
|
|
35
69
|
import { useModalStore } from '@/stores/modal';
|
|
36
70
|
import { Modal } from '@/afcl';
|
|
71
|
+
import { IconClipboardDocumentSolid } from '@iconify-prerendered/vue-heroicons';
|
|
72
|
+
|
|
37
73
|
|
|
38
74
|
const modalRef = ref();
|
|
39
75
|
const modalStore = useModalStore();
|
|
@@ -707,7 +707,16 @@ export function generateMessageHtmlForRecordChange(changedFields: Record<string,
|
|
|
707
707
|
}).join('');
|
|
708
708
|
|
|
709
709
|
const listHtml = items ? `<ul class="mt-2 list-disc list-inside">${items}</ul>` : '';
|
|
710
|
-
const messageHtml =
|
|
710
|
+
const messageHtml = `
|
|
711
|
+
<div class="flex flex-col gap-y-2 text-center">
|
|
712
|
+
<div class="text-gray-500 dark:text-gray-400">
|
|
713
|
+
${listHtml}
|
|
714
|
+
</div>
|
|
715
|
+
<p class="font-medium text-gray-900 dark:text-white mt-4">
|
|
716
|
+
${escapeHtml(t('Are you sure you want to leave this page?'))}
|
|
717
|
+
</p>
|
|
718
|
+
</div>
|
|
719
|
+
`;
|
|
711
720
|
return messageHtml;
|
|
712
721
|
}
|
|
713
722
|
|