adminforth 2.22.0-next.36 → 2.22.0-next.38
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.
|
@@ -1,124 +1,188 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
<Modal
|
|
3
|
+
ref="modalRef"
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
:closeByClickOutside="clickToCloseOutside || closeByClickOutside"
|
|
6
|
+
:closeByEsc="closeByEsc || closable"
|
|
7
|
+
:beforeCloseFunction="beforeCloseFunction"
|
|
8
|
+
:beforeOpenFunction="beforeOpenFunction"
|
|
9
|
+
:askForCloseConfirmation="askForCloseConfirmation"
|
|
10
|
+
:closeConfirmationText="closeConfirmationText"
|
|
11
|
+
:removeFromDomOnClose="removeFromDomOnClose"
|
|
5
12
|
>
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
>
|
|
49
|
-
{{ button.label }}
|
|
50
|
-
</Button>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
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 !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"
|
|
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>
|
|
13
|
+
<template v-if="$slots.trigger" #trigger>
|
|
14
|
+
<slot name="trigger"></slot>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<!-- Modal header -->
|
|
18
|
+
<div
|
|
19
|
+
v-if="header"
|
|
20
|
+
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
|
|
21
|
+
>
|
|
22
|
+
<h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
|
|
23
|
+
{{ header }}
|
|
24
|
+
</h3>
|
|
25
|
+
<button
|
|
26
|
+
v-if="headerCloseButton"
|
|
27
|
+
type="button"
|
|
28
|
+
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"
|
|
29
|
+
@click="tryToHideModal"
|
|
30
|
+
>
|
|
31
|
+
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
32
|
+
<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"/>
|
|
33
|
+
</svg>
|
|
34
|
+
<span class="sr-only">{{ t('Close Modal') }}</span>
|
|
35
|
+
</button>
|
|
36
|
+
</div>
|
|
37
|
+
<!-- Modal body -->
|
|
38
|
+
<div class="p-4 md:p-5 text-lightDialogBodyText dark:text-darkDialogBodyText">
|
|
39
|
+
<slot></slot>
|
|
40
|
+
</div>
|
|
41
|
+
<!-- Modal footer -->
|
|
42
|
+
<div
|
|
43
|
+
v-if="buttons.length"
|
|
44
|
+
class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
|
|
45
|
+
>
|
|
46
|
+
<Button
|
|
47
|
+
v-for="(button, buttonIndex) in buttons"
|
|
48
|
+
:key="buttonIndex"
|
|
49
|
+
v-bind="button.options"
|
|
50
|
+
:class="{ 'ms-3': buttonIndex > 0 }"
|
|
51
|
+
@click="button.onclick(dialog)"
|
|
52
|
+
>
|
|
53
|
+
{{ button.label }}
|
|
54
|
+
</Button>
|
|
82
55
|
</div>
|
|
83
|
-
</
|
|
56
|
+
</Modal>
|
|
84
57
|
</template>
|
|
85
58
|
|
|
86
59
|
<script setup lang="ts">
|
|
87
60
|
import Button from "./Button.vue";
|
|
88
|
-
import { ref,
|
|
89
|
-
import { Modal } from '
|
|
61
|
+
import { ref, computed, type Ref } from 'vue';
|
|
62
|
+
import { Modal } from '@/afcl'
|
|
63
|
+
import { useI18n } from "vue-i18n";
|
|
64
|
+
|
|
65
|
+
const { t } = useI18n();
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
interface IDialogInsideButtonClickHandler {
|
|
69
|
+
hide: () => void
|
|
70
|
+
}
|
|
90
71
|
|
|
91
|
-
const modalEl = ref(null);
|
|
92
|
-
const modal: Ref<Modal|null> = ref(null);
|
|
93
72
|
|
|
94
73
|
interface DialogButton {
|
|
95
74
|
label: string
|
|
96
|
-
onclick: (dialog:
|
|
75
|
+
onclick: (dialog: IDialogInsideButtonClickHandler) => void
|
|
97
76
|
options?: Record<string, any>
|
|
98
77
|
}
|
|
99
78
|
|
|
79
|
+
|
|
100
80
|
interface DialogProps {
|
|
81
|
+
/**
|
|
82
|
+
* The header text to display in the dialog. If not provided, no header will be displayed.
|
|
83
|
+
*/
|
|
101
84
|
header?: string
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* If true, a close button will be displayed in the dialog header. Default is true.
|
|
88
|
+
*/
|
|
102
89
|
headerCloseButton?: boolean
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* An array of buttons to display in the dialog footer.
|
|
93
|
+
*/
|
|
103
94
|
buttons?: DialogButton[]
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* If true, clicking outside the dialog will close it. Default is true.
|
|
98
|
+
*
|
|
99
|
+
* @deprecated Use `closeByClickOutside` instead
|
|
100
|
+
*/
|
|
104
101
|
clickToCloseOutside?: boolean
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* If true, pressing the Esc key will close the dialog. Default is true.
|
|
105
|
+
*/
|
|
106
|
+
closeByEsc?: boolean
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* If true, clicking outside the dialog will close it. Default is true.
|
|
110
|
+
*/
|
|
111
|
+
closeByClickOutside?: boolean
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Function that will be called before the dialog is closed.
|
|
115
|
+
*/
|
|
105
116
|
beforeCloseFunction?: (() => void | Promise<void>) | null
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Function that will be called before the dialog is opened.
|
|
120
|
+
*/
|
|
106
121
|
beforeOpenFunction?: (() => void | Promise<void>) | null
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Disables close on Ecs button
|
|
125
|
+
*
|
|
126
|
+
* @deprecated Use `closeByEsc` or instead
|
|
127
|
+
*/
|
|
107
128
|
closable?: boolean
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* If true, the dialog will ask for confirmation before closing. Default is false.
|
|
132
|
+
*/
|
|
108
133
|
askForCloseConfirmation?: boolean
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* The text to display in the close confirmation dialog. Default is "Are you sure you want to close this dialog?".
|
|
137
|
+
*/
|
|
109
138
|
closeConfirmationText?: string
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* If true, the dialog will be removed from the DOM when closed. Default is false.
|
|
142
|
+
*/
|
|
143
|
+
removeFromDomOnClose?: boolean
|
|
110
144
|
}
|
|
111
145
|
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
/********** for the backward compatibility ***************/
|
|
152
|
+
class Dialog implements IDialogInsideButtonClickHandler {
|
|
153
|
+
hide: () => void
|
|
154
|
+
constructor( hide: () => void ) {
|
|
155
|
+
this.hide = hide;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
const dialog: Ref<Dialog> = ref(
|
|
159
|
+
new Dialog(
|
|
160
|
+
() => {
|
|
161
|
+
if (dialog.value) {
|
|
162
|
+
tryToHideModal();
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
);
|
|
167
|
+
/*************************************************************/
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
const modalRef = ref();
|
|
172
|
+
|
|
112
173
|
const props = withDefaults(defineProps<DialogProps>(), {
|
|
113
174
|
header: '',
|
|
114
175
|
headerCloseButton: true,
|
|
115
176
|
buttons: () => [],
|
|
116
|
-
clickToCloseOutside:
|
|
177
|
+
clickToCloseOutside: false,
|
|
178
|
+
closeByEsc: true,
|
|
179
|
+
closeByClickOutside: true,
|
|
117
180
|
beforeCloseFunction: null,
|
|
118
181
|
beforeOpenFunction: null,
|
|
119
|
-
closable:
|
|
182
|
+
closable: false,
|
|
120
183
|
askForCloseConfirmation: false,
|
|
121
184
|
closeConfirmationText: 'Are you sure you want to close this dialog?',
|
|
185
|
+
removeFromDomOnClose: false,
|
|
122
186
|
})
|
|
123
187
|
|
|
124
188
|
const buttons = computed<DialogButton[]>(() => {
|
|
@@ -129,51 +193,20 @@ const buttons = computed<DialogButton[]>(() => {
|
|
|
129
193
|
{
|
|
130
194
|
label: 'Close',
|
|
131
195
|
onclick: (dialog: any) => {
|
|
132
|
-
|
|
133
|
-
dialog.hide();
|
|
134
|
-
} else {
|
|
135
|
-
showConfirmationOnClose.value = true;
|
|
136
|
-
}
|
|
196
|
+
tryToHideModal();
|
|
137
197
|
},
|
|
138
198
|
options: {}
|
|
139
199
|
}
|
|
140
200
|
];
|
|
141
201
|
});
|
|
142
202
|
|
|
143
|
-
const showConfirmationOnClose = ref(false);
|
|
144
|
-
onMounted(async () => {
|
|
145
|
-
//await one tick when all is mounted
|
|
146
|
-
await nextTick();
|
|
147
|
-
modal.value = new Modal(
|
|
148
|
-
modalEl.value,
|
|
149
|
-
{
|
|
150
|
-
closable: props.closable,
|
|
151
|
-
backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
|
|
152
|
-
onHide: async () => {
|
|
153
|
-
if (props.beforeCloseFunction) {
|
|
154
|
-
await props.beforeCloseFunction();
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
onShow: async () => {
|
|
158
|
-
if (props.beforeOpenFunction) {
|
|
159
|
-
await props.beforeOpenFunction();
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
})
|
|
165
|
-
|
|
166
|
-
onUnmounted(() => {
|
|
167
|
-
//destroy tooltip
|
|
168
|
-
modal.value?.destroy();
|
|
169
|
-
})
|
|
170
203
|
|
|
171
204
|
function open() {
|
|
172
|
-
|
|
205
|
+
modalRef.value.open();
|
|
173
206
|
}
|
|
174
207
|
|
|
175
208
|
function close() {
|
|
176
|
-
|
|
209
|
+
modalRef.value.hide();
|
|
177
210
|
}
|
|
178
211
|
|
|
179
212
|
defineExpose({
|
|
@@ -183,11 +216,7 @@ defineExpose({
|
|
|
183
216
|
})
|
|
184
217
|
|
|
185
218
|
function tryToHideModal() {
|
|
186
|
-
|
|
187
|
-
modal.value?.hide();
|
|
188
|
-
} else {
|
|
189
|
-
showConfirmationOnClose.value = true;
|
|
190
|
-
}
|
|
219
|
+
modalRef.value?.tryToHideModal();
|
|
191
220
|
}
|
|
192
221
|
|
|
193
222
|
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
<slot name="trigger"></slot>
|
|
7
7
|
</div>
|
|
8
8
|
<Teleport to="body">
|
|
9
|
-
<div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick"
|
|
9
|
+
<div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick" 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" >
|
|
10
10
|
<!-- Modal content -->
|
|
11
|
-
<div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
|
|
11
|
+
<div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
|
|
12
12
|
|
|
13
13
|
<!-- Modal body -->
|
|
14
|
-
<div class="
|
|
14
|
+
<div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
|
|
15
15
|
<slot ></slot>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
'hidden': !showDropdown,
|
|
19
19
|
'left-0 md:left-auto': checkboxes && checkboxes.length > 0
|
|
20
20
|
}"
|
|
21
|
-
class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-
|
|
21
|
+
class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-max max-w-64 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600 right-0">
|
|
22
22
|
<ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
|
|
23
23
|
<li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
|
|
24
24
|
<div
|