@fy-/fws-vue 2.1.48 → 2.1.50
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.
- package/components/ui/DefaultNotif.vue +19 -12
- package/package.json +1 -1
|
@@ -62,7 +62,9 @@ function onCall(data: NotifProps) {
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
// Set the new notification
|
|
65
|
-
currentNotif.value = {
|
|
65
|
+
currentNotif.value = {
|
|
66
|
+
...data,
|
|
67
|
+
}
|
|
66
68
|
|
|
67
69
|
// (A) Hide the notification after the specified time
|
|
68
70
|
hideTimeout = setTimeout(() => hideNotif(), data.time)
|
|
@@ -72,7 +74,7 @@ function onCall(data: NotifProps) {
|
|
|
72
74
|
progressInterval = setInterval(() => {
|
|
73
75
|
if (currentNotif.value && data.time) {
|
|
74
76
|
// update progress based on a 100ms tick
|
|
75
|
-
progress.value += 100 / (data.time / 100)
|
|
77
|
+
progress.value += (100 / (data.time / 100))
|
|
76
78
|
// if progress hits or exceeds 100, hide
|
|
77
79
|
if (progress.value >= 100) {
|
|
78
80
|
hideNotif()
|
|
@@ -81,7 +83,9 @@ function onCall(data: NotifProps) {
|
|
|
81
83
|
}, 100)
|
|
82
84
|
}
|
|
83
85
|
|
|
84
|
-
/**
|
|
86
|
+
/**
|
|
87
|
+
* Clears everything related to the current notification
|
|
88
|
+
*/
|
|
85
89
|
function hideNotif() {
|
|
86
90
|
currentNotif.value = null
|
|
87
91
|
progress.value = 0
|
|
@@ -96,12 +100,16 @@ function hideNotif() {
|
|
|
96
100
|
}
|
|
97
101
|
}
|
|
98
102
|
|
|
99
|
-
/**
|
|
103
|
+
/**
|
|
104
|
+
* Setup: Listen to the global event bus
|
|
105
|
+
*/
|
|
100
106
|
onMounted(() => {
|
|
101
107
|
eventBus.on('SendNotif', onCall)
|
|
102
108
|
})
|
|
103
109
|
|
|
104
|
-
/**
|
|
110
|
+
/**
|
|
111
|
+
* Cleanup: remove event listeners
|
|
112
|
+
*/
|
|
105
113
|
onUnmounted(() => {
|
|
106
114
|
eventBus.off('SendNotif', onCall)
|
|
107
115
|
})
|
|
@@ -112,7 +120,7 @@ onUnmounted(() => {
|
|
|
112
120
|
<div
|
|
113
121
|
v-if="currentNotif !== null"
|
|
114
122
|
id="base-notif"
|
|
115
|
-
class="
|
|
123
|
+
class="p-2 mb-4 fixed bottom-4 right-8 !z-[2000] bg-fv-neutral-50/[.6] dark:bg-neutral-800/[.6] rounded-lg border overflow-hidden shadow-lg"
|
|
116
124
|
role="alert"
|
|
117
125
|
:class="{
|
|
118
126
|
'text-fv-neutral-800 border-fv-neutral-300 dark:text-fv-neutral-400 dark:border-fv-neutral-600':
|
|
@@ -125,15 +133,13 @@ onUnmounted(() => {
|
|
|
125
133
|
currentNotif.type === 'secret',
|
|
126
134
|
}"
|
|
127
135
|
>
|
|
128
|
-
|
|
129
|
-
|
|
136
|
+
<div class="relative mt-3 h-[3px] bg-fv-neutral-900/[.2] rounded-full overflow-hidden -mt-2">
|
|
137
|
+
<!-- We re-use text color (text-*) as background or define a custom color -->
|
|
130
138
|
<div
|
|
131
|
-
class="h-full bg-current transition-[width]"
|
|
139
|
+
class="absolute left-0 top-0 h-full bg-current transition-[width]"
|
|
132
140
|
:style="{ width: `${progress}%` }"
|
|
133
141
|
/>
|
|
134
142
|
</div>
|
|
135
|
-
|
|
136
|
-
<!-- Title + icon or image -->
|
|
137
143
|
<div class="flex items-center gap-2">
|
|
138
144
|
<img
|
|
139
145
|
v-if="currentNotif.imgSrc"
|
|
@@ -153,7 +159,7 @@ onUnmounted(() => {
|
|
|
153
159
|
<div
|
|
154
160
|
v-if="currentNotif.content"
|
|
155
161
|
class="mt-2 text-sm"
|
|
156
|
-
v-
|
|
162
|
+
v-html="currentNotif.content"
|
|
157
163
|
/>
|
|
158
164
|
|
|
159
165
|
<!-- CTA row (if you need more buttons, just extend it) -->
|
|
@@ -164,6 +170,7 @@ onUnmounted(() => {
|
|
|
164
170
|
aria-label="Close"
|
|
165
171
|
@click="hideNotif"
|
|
166
172
|
>
|
|
173
|
+
<!-- i18n example, or plain text like "Dismiss" -->
|
|
167
174
|
{{ $t("dismiss_cta") }}
|
|
168
175
|
</button>
|
|
169
176
|
</div>
|