@fy-/fws-vue 2.1.46 → 2.1.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.
|
@@ -75,7 +75,6 @@ function onCall(data: NotifProps) {
|
|
|
75
75
|
if (currentNotif.value && data.time) {
|
|
76
76
|
// update progress based on a 100ms tick
|
|
77
77
|
progress.value += (100 / (data.time / 100))
|
|
78
|
-
// if progress hits or exceeds 100, hide
|
|
79
78
|
if (progress.value >= 100) {
|
|
80
79
|
hideNotif()
|
|
81
80
|
}
|
|
@@ -120,7 +119,7 @@ onUnmounted(() => {
|
|
|
120
119
|
<div
|
|
121
120
|
v-if="currentNotif !== null"
|
|
122
121
|
id="base-notif"
|
|
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"
|
|
122
|
+
class="relative 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"
|
|
124
123
|
role="alert"
|
|
125
124
|
:class="{
|
|
126
125
|
'text-fv-neutral-800 border-fv-neutral-300 dark:text-fv-neutral-400 dark:border-fv-neutral-600':
|
|
@@ -133,6 +132,14 @@ onUnmounted(() => {
|
|
|
133
132
|
currentNotif.type === 'secret',
|
|
134
133
|
}"
|
|
135
134
|
>
|
|
135
|
+
<!-- PROGRESS BAR AT TOP -->
|
|
136
|
+
<div class="absolute top-0 left-0 w-full h-[4px] bg-gray-200">
|
|
137
|
+
<div
|
|
138
|
+
class="h-full bg-current transition-[width]"
|
|
139
|
+
:style="{ width: `${progress}%` }"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
136
143
|
<!-- Title + icon or image -->
|
|
137
144
|
<div class="flex items-center gap-2">
|
|
138
145
|
<img
|
|
@@ -156,15 +163,6 @@ onUnmounted(() => {
|
|
|
156
163
|
v-text="currentNotif.content"
|
|
157
164
|
/>
|
|
158
165
|
|
|
159
|
-
<!-- Progress bar (3px) -->
|
|
160
|
-
<div class="relative mt-3 h-[3px] bg-gray-200 rounded-full overflow-hidden">
|
|
161
|
-
<!-- We re-use text color (text-*) as background or define a custom color -->
|
|
162
|
-
<div
|
|
163
|
-
class="absolute left-0 top-0 h-full bg-current transition-[width]"
|
|
164
|
-
:style="{ width: `${progress}%` }"
|
|
165
|
-
/>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
166
|
<!-- CTA row (if you need more buttons, just extend it) -->
|
|
169
167
|
<div class="flex justify-end gap-2 pt-3">
|
|
170
168
|
<button
|
|
@@ -350,18 +350,4 @@ function handlePaste(e: ClipboardEvent) {
|
|
|
350
350
|
.input {
|
|
351
351
|
@apply flex-grow min-w-[100px] outline-none border-none break-words;
|
|
352
352
|
}
|
|
353
|
-
|
|
354
|
-
/* Example button classes */
|
|
355
|
-
.btn {
|
|
356
|
-
@apply inline-flex items-center justify-center rounded text-sm px-3 py-1
|
|
357
|
-
border border-transparent font-medium focus:outline-none
|
|
358
|
-
focus-visible:ring-2 focus-visible:ring-offset-2;
|
|
359
|
-
}
|
|
360
|
-
.btn.small {
|
|
361
|
-
@apply text-xs px-2 py-1;
|
|
362
|
-
}
|
|
363
|
-
.btn.neutral {
|
|
364
|
-
@apply bg-fv-neutral-300 hover:bg-fv-neutral-400 text-black
|
|
365
|
-
dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-500;
|
|
366
|
-
}
|
|
367
353
|
</style>
|