@fy-/fws-vue 2.1.46 → 2.1.48

package/components/ui/DefaultNotif.vue

@@ -62,9 +62,7 @@ function onCall(data: NotifProps) {
   }
 
   // Set the new notification
-  currentNotif.value = {
-    ...data,
-  }
+  currentNotif.value = { ...data }
 
   // (A) Hide the notification after the specified time
   hideTimeout = setTimeout(() => hideNotif(), data.time)
@@ -74,7 +72,7 @@ function onCall(data: NotifProps) {
   progressInterval = setInterval(() => {
     if (currentNotif.value && data.time) {
       // update progress based on a 100ms tick
-      progress.value += (100 / (data.time / 100))
+      progress.value += 100 / (data.time / 100)
       // if progress hits or exceeds 100, hide
       if (progress.value >= 100) {
         hideNotif()
@@ -83,9 +81,7 @@ function onCall(data: NotifProps) {
   }, 100)
 }
 
-/**
- * Clears everything related to the current notification
- */
+/** Clears everything related to the current notification */
 function hideNotif() {
   currentNotif.value = null
   progress.value = 0
@@ -100,16 +96,12 @@ function hideNotif() {
   }
 }
 
-/**
- * Setup: Listen to the global event bus
- */
+/** Setup: Listen to the global event bus */
 onMounted(() => {
   eventBus.on('SendNotif', onCall)
 })
 
-/**
- * Cleanup: remove event listeners
- */
+/** Cleanup: remove event listeners */
 onUnmounted(() => {
   eventBus.off('SendNotif', onCall)
 })
@@ -120,7 +112,7 @@ onUnmounted(() => {
     <div
       v-if="currentNotif !== null"
       id="base-notif"
-      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"
+      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"
       role="alert"
       :class="{
         'text-fv-neutral-800 border-fv-neutral-300 dark:text-fv-neutral-400 dark:border-fv-neutral-600':
@@ -133,6 +125,14 @@ onUnmounted(() => {
           currentNotif.type === 'secret',
       }"
     >
+      <!-- PROGRESS BAR at top (4px) -->
+      <div class="absolute top-0 left-0 w-full h-[4px] bg-gray-200">
+        <div
+          class="h-full bg-current transition-[width]"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+
       <!-- Title + icon or image -->
       <div class="flex items-center gap-2">
         <img
@@ -156,15 +156,6 @@ onUnmounted(() => {
         v-text="currentNotif.content"
       />
 
-      <!-- Progress bar (3px) -->
-      <div class="relative mt-3 h-[3px] bg-gray-200 rounded-full overflow-hidden">
-        <!-- We re-use text color (text-*) as background or define a custom color -->
-        <div
-          class="absolute left-0 top-0 h-full bg-current transition-[width]"
-          :style="{ width: `${progress}%` }"
-        />
-      </div>
-
       <!-- CTA row (if you need more buttons, just extend it) -->
       <div class="flex justify-end gap-2 pt-3">
         <button
@@ -173,7 +164,6 @@ onUnmounted(() => {
           aria-label="Close"
           @click="hideNotif"
         >
-          <!-- i18n example, or plain text like "Dismiss" -->
           {{ $t("dismiss_cta") }}
         </button>
       </div>

package/components/ui/DefaultTagInput.vue

@@ -350,18 +350,4 @@ function handlePaste(e: ClipboardEvent) {
 .input {
   @apply flex-grow min-w-[100px] outline-none border-none break-words;
 }
-
-/* Example button classes */
-.btn {
-  @apply inline-flex items-center justify-center rounded text-sm px-3 py-1
-    border border-transparent font-medium focus:outline-none
-    focus-visible:ring-2 focus-visible:ring-offset-2;
-}
-.btn.small {
-  @apply text-xs px-2 py-1;
-}
-.btn.neutral {
-  @apply bg-fv-neutral-300 hover:bg-fv-neutral-400 text-black
-    dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-500;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.1.46",
+  "version": "2.1.48",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",