Skip to content

Commit 1022563

Browse files
yaroslav8765yaroslav8765
committed
fix: rework afcl accept modal to use afcl modal, instead of flowbite one.
Fix autoresolve bug for the adminforth.confirm
1 parent dfd178f commit 1022563

File tree

2 files changed

+37
-55
lines changed

2 files changed

+37
-55
lines changed

‎adminforth/spa/src/afcl/Modal.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,16 @@ const showConfirmationOnClose = ref(false);
8080
8181
8282
async function open() {
83-
await props.beforeOpenFunction?.();
83+
if (props.beforeOpenFunction) {
84+
await props.beforeOpenFunction?.();
85+
}
8486
isModalOpen.value = true;
8587
}
8688
8789
async function close() {
88-
await props.beforeCloseFunction?.();
90+
if (props.beforeCloseFunction) {
91+
await props.beforeCloseFunction?.();
92+
}
8993
isModalOpen.value = false;
9094
}
9195

‎adminforth/spa/src/components/AcceptModal.vue‎

Lines changed: 31 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,40 @@
11
<template>
22
<Teleport to="body">
3-
<div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-[110] w-full h-full overflow-y-auto overflow-x-hidden flex items-center justify-center">
4-
<div class="relative p-4 w-full max-w-md max-h-full" >
5-
<div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
6-
<button type="button" @click="modalStore.togleModal" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
7-
<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
8-
<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"/>
9-
</svg>
10-
<span class="sr-only">{{ $t('Close modal') }}</span>
11-
</button>
12-
<div class="p-4 md:p-5 text-center">
13-
<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">
14-
<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"/>
15-
</svg>
16-
<h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
17-
<h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
18-
19-
<button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
20-
{{ modalStore?.modalContent?.acceptText }}
21-
</button>
22-
<button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
23-
</div>
24-
</div>
3+
<Modal
4+
ref="modalRef"
5+
:beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
6+
>
7+
<div class="relative p-4 w-full max-w-md max-h-full" >
8+
<button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
9+
<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
10+
<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"/>
11+
</svg>
12+
<span class="sr-only">{{ $t('Close modal') }}</span>
13+
</button>
14+
<div class="p-4 md:p-5 text-center">
15+
<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">
16+
<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"/>
17+
</svg>
18+
<h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
19+
<h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
20+
21+
<button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
22+
{{ modalStore?.modalContent?.acceptText }}
23+
</button>
24+
<button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
2525
</div>
26-
</div>
27-
28-
</Teleport>
26+
</div>
27+
</Modal>
28+
</Teleport>
2929
</template>
3030

3131
<script setup lang="ts">
3232
import { watch, onMounted, nextTick, ref } from 'vue';
3333
import { useModalStore } from '@/stores/modal';
34-
import { Modal } from 'flowbite';
34+
import { Modal } from '@/afcl';
3535
36+
const modalRef = ref();
3637
const modalStore = useModalStore();
37-
const modalEl = ref(null);
38-
const modal = ref(null);
3938
4039
watch( () => modalStore.isOpened, (newVal) => {
4140
if (newVal) {
@@ -46,35 +45,14 @@ watch( () => modalStore.isOpened, (newVal) => {
4645
}
4746
);
4847
49-
onMounted(async () => {
50-
await nextTick();
51-
modal.value = new Modal(
52-
modalEl.value,
53-
{
54-
closable: true,
55-
backdrop: 'static',
56-
backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-[100]"
57-
}
58-
);
59-
})
48+
6049
6150
function open() {
62-
modal.value?.show();
51+
modalRef.value.open();
6352
}
6453
6554
function close() {
66-
modal.value?.hide();
55+
modalRef.value.close();
6756
}
6857
69-
</script>
70-
71-
<style scoped>
72-
.modal {
73-
position: fixed;
74-
z-index: 999;
75-
top: 20%;
76-
left: 50%;
77-
width: 300px;
78-
margin-left: -150px;
79-
}
80-
</style>
58+
</script>

0 commit comments

Comments
 (0)