@fy-/fws-vue 2.3.46 → 2.3.47
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.
|
@@ -74,38 +74,52 @@ onUnmounted(() => {
|
|
|
74
74
|
<template>
|
|
75
75
|
<DefaultModal
|
|
76
76
|
id="confirm"
|
|
77
|
-
|
|
78
77
|
ref="modalRef"
|
|
78
|
+
m-size="!max-w-3xl w-full"
|
|
79
79
|
>
|
|
80
80
|
<div
|
|
81
|
-
class="
|
|
81
|
+
class="bg-gradient-to-br from-gray-900/70 to-gray-800/50 rounded-lg border border-gray-700/30 overflow-hidden"
|
|
82
82
|
:aria-labelledby="title ? 'confirm-modal-title' : undefined"
|
|
83
83
|
:aria-describedby="desc ? 'confirm-modal-desc' : undefined"
|
|
84
84
|
aria-modal="true"
|
|
85
85
|
role="dialog"
|
|
86
86
|
tabindex="-1"
|
|
87
87
|
>
|
|
88
|
+
<!-- Header with gradient background -->
|
|
88
89
|
<div
|
|
89
|
-
|
|
90
|
+
v-if="title"
|
|
91
|
+
class="bg-gradient-to-r from-indigo-900/30 to-indigo-800/20 p-4 border-b border-indigo-700/30"
|
|
90
92
|
>
|
|
91
|
-
<
|
|
92
|
-
v-if="title"
|
|
93
|
+
<h3
|
|
93
94
|
id="confirm-modal-title"
|
|
94
|
-
class="text-xl font-semibold text-
|
|
95
|
+
class="text-xl font-semibold text-white"
|
|
95
96
|
>
|
|
96
97
|
{{ title }}
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
98
|
+
</h3>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<!-- Content area with styled box -->
|
|
102
|
+
<div class="p-5 text-fv-neutral-100">
|
|
103
|
+
<div v-if="desc" class="bg-gradient-to-r from-blue-950/50 to-indigo-950/50 p-4 rounded-lg border border-blue-700/30 mb-6 shadow-md">
|
|
104
|
+
<p
|
|
105
|
+
id="confirm-modal-desc"
|
|
106
|
+
class="text-sm sm:text-base text-gray-200 prose prose-invert prose-sm min-w-full"
|
|
107
|
+
v-html="desc"
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Action buttons with modern styling -->
|
|
112
|
+
<div class="flex justify-center gap-4 mt-6">
|
|
113
|
+
<button
|
|
114
|
+
class="btn accent large shadow-lg hover:shadow-fuchsia-500/30 transition-all duration-300 hover:scale-105 active:scale-95 px-8 rounded-lg"
|
|
115
|
+
@click="_onConfirm()"
|
|
116
|
+
>
|
|
106
117
|
{{ $t("confirm_modal_cta_confirm") }}
|
|
107
118
|
</button>
|
|
108
|
-
<button
|
|
119
|
+
<button
|
|
120
|
+
class="btn neutral large shadow-md transform transition hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-500 px-8 rounded-lg"
|
|
121
|
+
@click="resetConfirm()"
|
|
122
|
+
>
|
|
109
123
|
{{ $t("confirm_modal_cta_cancel") }}
|
|
110
124
|
</button>
|
|
111
125
|
</div>
|
|
@@ -262,14 +262,14 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
|
|
|
262
262
|
>
|
|
263
263
|
<!-- Backdrop with click to close functionality -->
|
|
264
264
|
<div
|
|
265
|
-
class="flex
|
|
265
|
+
class="flex fixed backdrop-blur-[8px] inset-0 flex-col items-center py-8 px-4 overflow-y-auto text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
|
|
266
266
|
:style="{ zIndex }"
|
|
267
267
|
@click="handleBackdropClick"
|
|
268
268
|
>
|
|
269
269
|
<!-- Modal panel -->
|
|
270
270
|
<div
|
|
271
271
|
ref="modalRef"
|
|
272
|
-
:class="`relative ${mSize} max-w-6xl max-h-[85vh] px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
|
|
272
|
+
:class="`relative ${mSize} max-w-6xl max-h-[85vh] my-auto px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
|
|
273
273
|
:style="{ zIndex }"
|
|
274
274
|
tabindex="-1"
|
|
275
275
|
@click.stop
|