@fy-/fws-vue 0.7.2 → 0.7.3

package/components/ui/DefaultNotif.vue

@@ -55,6 +55,7 @@ const onCall = (data: NotifProps) => {
     ctaText: data.ctaText,
     ctaLink: data.ctaLink,
     time: data.time,
+    type: data.type,
     ctaAction: data.ctaAction,
   };
 
@@ -77,91 +78,47 @@ onUnmounted(() => {
 <template>
   <ScaleTransition>
     <div
-      id="mainNotif"
-      ref="notif"
-      class="w-full max-w-xs p-4 text-fv-neutral-500 bg-white rounded-lg shadow dark:bg-fv-neutral-800 dark:text-fv-neutral-400 absolute bottom-4 right-4 z-[16]"
+      id="alert-additional-content-1"
+      class="p-4 mb-4"
       role="alert"
+      :class="{
+        'text-fv-neutral-800 border border-fv-neutral-300 rounded-lg bg-fv-neutral-50 dark:bg-gray-800 dark:text-fv-neutral-400 dark:border-fv-neutral-800':
+          currentNotif.type === 'info',
+        'text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-red-800 dark:text-red-300 dark:border-red-800':
+          currentNotif.type === 'warning',
+        'text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-green-800 dark:text-green-300 dark:border-green-800':
+          currentNotif.type === 'success',
+      }"
       v-if="currentNotif !== null"
     >
-      <div class="flex">
+      <div class="flex items-center">
         <img
-          class="w-8 h-8 rounded-full"
+          class="flex-shrink-0 w-4 h-4 me-2"
           :src="currentNotif.imgSrc"
           :alt="currentNotif.title"
           v-if="currentNotif.imgSrc"
         />
         <component
           :is="currentNotif.imgIcon"
-          class="w-8 h-8 rounded-full"
+          class="flex-shrink-0 w-4 h-4 me-2"
           v-else
         />
-        <div class="ms-3 text-sm font-normal">
-          <span
-            class="mb-1 text-sm font-semibold"
-            :class="{
-              'text-fv-neutral-900 dark:text-white':
-                currentNotif.type === 'info',
-              'text-red-900 dark:text-red-300': currentNotif.type === 'warning',
-              'text-green-900 dark:text-green-300':
-                currentNotif.type === 'success',
-            }"
-          >
-            {{ currentNotif.title }}
-          </span>
-          <div
-            class="mb-2 text-sm font-normal"
-            v-if="currentNotif.content"
-            :class="{
-              'text-fv-neutral-900 dark:text-white':
-                currentNotif.type === 'info',
-              'text-red-900 dark:text-red-300': currentNotif.type === 'warning',
-              'text-green-900 dark:text-green-300':
-                currentNotif.type === 'success',
-            }"
-          >
-            {{ currentNotif.content }}
-          </div>
-          <router-link
-            v-if="currentNotif.ctaText && currentNotif.ctaLink"
-            :to="currentNotif.ctaLink"
-            class="btn primary small"
-            >{{ currentNotif.ctaText }}</router-link
-          >
-          <button
-            v-else-if="currentNotif.ctaText && currentNotif.ctaAction"
-            @click="
-              () => {
-                // @ts-ignore
-                currentNotif.ctaAction();
-                hideNotif();
-              }
-            "
-            class="btn primary small"
-          >
-            {{ currentNotif.ctaText }}
-          </button>
-        </div>
+        <span class="sr-only">Info</span>
+        <h3 class="text-lg font-medium" v-text="currentNotif.title" />
+      </div>
+      <div
+        class="mt-2 mb-4 text-sm"
+        v-text="currentNotif.content"
+        v-if="currentNotif.content"
+      />
+      <div class="flex">
         <button
           type="button"
-          class="ms-auto -mx-1.5 -my-1.5 bg-white justify-center items-center flex-shrink-0 text-fv-neutral-400 hover:text-fv-neutral-900 rounded-lg focus:ring-2 focus:ring-fv-neutral-300 p-1.5 hover:bg-fv-neutral-100 inline-flex h-8 w-8 dark:text-fv-neutral-500 dark:hover:text-white dark:bg-fv-neutral-800 dark:hover:bg-fv-neutral-700"
+          class="btn primary small"
+          @click="hideNotif"
           aria-label="Close"
         >
-          <span class="sr-only">Close</span>
-          <svg
-            class="w-3 h-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 14 14"
-          >
-            <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"
-            />
-          </svg>
+          {{ $t("dismiss_cta") }}
         </button>
       </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {