adminforth 2.55.4-next.1 → 2.55.4-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.
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
v-show="isModalOpen"
|
|
11
11
|
v-if="!removeFromDom"
|
|
12
12
|
@click="backdropClick"
|
|
13
|
-
class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
|
|
13
|
+
class="bg-black/50 overflow-y-auto overscroll-contain overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
|
|
14
14
|
:class="props.backgroundCustomClasses"
|
|
15
15
|
>
|
|
16
16
|
<!-- Modal content -->
|
|
17
|
-
<div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
|
|
17
|
+
<div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund mx-4 sm:mx-0">
|
|
18
18
|
|
|
19
19
|
<!-- Modal body -->
|
|
20
20
|
<div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
:class="props.modalCustomClasses"
|
|
29
29
|
>
|
|
30
30
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
|
|
31
|
-
<h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
|
|
31
|
+
<h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ t('Confirm Close') }}</h2>
|
|
32
32
|
<p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
|
|
33
33
|
<div class="flex justify-end">
|
|
34
34
|
<Button
|
|
35
35
|
class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
|
|
36
36
|
@click="showConfirmationOnClose = false"
|
|
37
37
|
>
|
|
38
|
-
Cancel
|
|
38
|
+
{{ t('Cancel') }}
|
|
39
39
|
</Button>
|
|
40
40
|
<Button
|
|
41
41
|
@click="
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
close();
|
|
44
44
|
"
|
|
45
45
|
>
|
|
46
|
-
Confirm
|
|
46
|
+
{{ t('Confirm') }}
|
|
47
47
|
</Button>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
@@ -56,8 +56,10 @@
|
|
|
56
56
|
<script setup lang="ts">
|
|
57
57
|
import Button from "./Button.vue";
|
|
58
58
|
import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
|
|
59
|
+
import { useI18n } from 'vue-i18n';
|
|
59
60
|
|
|
60
61
|
const isModalOpen = ref(false);
|
|
62
|
+
const { t } = useI18n();
|
|
61
63
|
|
|
62
64
|
const removeFromDom = computed(() => {
|
|
63
65
|
return props.removeFromDomOnClose && !isModalOpen.value;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
backgroundCustomClasses="z-[998]"
|
|
7
7
|
modalCustomClasses="z-[999] flex items-center justify-center"
|
|
8
8
|
>
|
|
9
|
-
<div class="relative p-6 sm:p-8 w-[440px]
|
|
9
|
+
<div class="relative p-6 sm:p-8 sm:w-[440px] rounded-lg shadow-xl dark:bg-gray-800" >
|
|
10
10
|
|
|
11
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
12
|
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|