@fy-/fws-vue 0.6.5 → 0.6.7

package/components/ui/DefaultNotif.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  ExclamationTriangleIcon,
+  LightBulbIcon,
+  CheckCircleIcon,
+} from "@heroicons/vue/24/solid";
+import { useEventBus } from "../../composables/event-bus";
+import type { Component } from "vue";
+import FadeTransition from "./transitions/FadeTransition.vue";
+import { on } from "events";
+interface NotifProps {
+  imgSrc?: string;
+  imgIcon?: Component;
+  title: string;
+  content?: string;
+  ctaText?: string;
+  ctaLink?: string;
+  ctaAction?: () => void;
+  type?: "info" | "warning" | "success";
+  time?: number;
+}
+const notif = ref<HTMLElement | null>(null);
+const eventBus = useEventBus();
+const currentNotif = ref<NotifProps | null>(null);
+
+const onCall = (props: NotifProps) => {
+  if (currentNotif.value) {
+    hideNotif();
+  }
+  const actualIcon = ref(props.imgIcon);
+  if (props.imgIcon === undefined) {
+    if (props.type === "info") {
+      actualIcon.value = LightBulbIcon;
+    } else if (props.type === "warning") {
+      actualIcon.value = ExclamationTriangleIcon;
+    } else if (props.type === "success") {
+      actualIcon.value = CheckCircleIcon;
+    }
+  }
+  if (!props.time) {
+    props.time = 5000;
+  }
+
+  currentNotif.value = {
+    imgSrc: props.imgSrc,
+    imgIcon: actualIcon.value,
+    title: props.title,
+    content: props.content,
+    ctaText: props.ctaText,
+    ctaLink: props.ctaLink,
+    ctaAction: props.ctaAction,
+  };
+
+  showNotif();
+};
+
+const visible = ref(false);
+const showNotif = () => {
+  visible.value = true;
+  setTimeout(
+    () => {
+      hideNotif();
+    },
+    currentNotif.value?.time,
+  );
+};
+const hideNotif = () => {
+  visible.value = false;
+  currentNotif.value = null;
+};
+onMounted(() => {
+  eventBus.on("main-notif", onCall);
+});
+onUnmounted(() => {
+  eventBus.off("main-notif", onCall);
+});
+</script>
+<template>
+  <FadeTransition>
+    <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]"
+      role="alert"
+      v-if="visible && currentNotif"
+    >
+      <div class="flex">
+        <img
+          class="w-8 h-8 rounded-full"
+          :src="currentNotif.imgSrc"
+          :alt="currentNotif.title"
+          v-if="currentNotif.imgSrc"
+        />
+        <component
+          :is="currentNotif.imgIcon"
+          class="w-8 h-8 rounded-full"
+          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">
+            {{ 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>
+        <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"
+          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>
+        </button>
+      </div>
+    </div>
+  </FadeTransition>
+</template>

package/index.ts

@@ -43,6 +43,7 @@ import DefaultGallery from "./components/ui/DefaultGallery.vue";
 import DefaultDropdown from "./components/ui/DefaultDropdown.vue";
 import DefaultDropdownLink from "./components/ui/DefaultDropdownLink.vue";
 import DefaultTagInput from "./components/ui/DefaultTagInput.vue";
+import DefaultNotif from "./components/ui/DefaultNotif.vue";
 // Components/FWS
 import UserFlow from "./components/fws/UserFlow.vue";
 import DataTable from "./components/fws/DataTable.vue";
@@ -135,6 +136,7 @@ export {
   DefaultDropdown,
   DefaultDropdownLink,
   DefaultTagInput,
+  DefaultNotif,
 
   // FWS
   UserFlow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -33,11 +33,12 @@
     "@vuelidate/core": "^2.0.x",
     "@vuelidate/validators": "^2.0.x",
     "@vueuse/core": "^10.x.x",
+    "flowbite": "^2.3.x",
     "mitt": "^3.0.x",
     "pinia": "2.x.x",
     "timeago.js": "^4.0.x",
     "vue": "^3.3.x",
     "vue-router": "^4.1.x",
-    "flowbite": "^2.3.x"
+    "vue-picture-cropper": "^0.7.x"
   }
 }