v5.0.0 update

2025-10-27 11:41:09 -04:00 · 2021-11-30 18:58:19 +05:30
parent d332712c22
commit 082d5cacf2
1253 changed files with 88309 additions and 71741 deletions
--- a/resources/scripts/components/notifications/NotificationItem.vue
+++ b/resources/scripts/components/notifications/NotificationItem.vue
@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="success || info ? 'bg-white' : 'bg-red-50'"
+    class="
+      max-w-sm
+      mb-3
+      rounded-lg
+      shadow-lg
+      cursor-pointer
+      pointer-events-auto
+      w-full
+      md:w-96
+    "
+    @click.stop="hideNotificationAction"
+    @mouseenter="clearNotificationTimeOut"
+    @mouseleave="setNotificationTimeOut"
+  >
+    <div class="overflow-hidden rounded-lg shadow-xs">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flex-shrink-0">
+            <svg
+              v-if="success"
+              class="w-6 h-6 text-green-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <svg
+              v-if="info"
+              class="w-6 h-6 text-blue-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <svg
+              v-if="error"
+              class="w-6 h-6 text-red-400"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div class="flex-1 w-0 ml-3 text-left">
+            <p
+              :class="`text-sm leading-5 font-medium ${
+                success || info ? 'text-gray-900' : 'text-red-800'
+              }`"
+            >
+              {{
+                notification.title
+                  ? notification.title
+                  : success
+                  ? 'Success!'
+                  : 'Error'
+              }}
+            </p>
+            <p
+              :class="`mt-1 text-sm leading-5 ${
+                success || info ? 'text-gray-500' : 'text-red-700'
+              }`"
+            >
+              {{
+                notification.message
+                  ? notification.message
+                  : success
+                  ? 'Successful'
+                  : 'Somthing went wrong'
+              }}
+            </p>
+          </div>
+          <div class="flex flex-shrink-0">
+            <button
+              :class="
+                success || info
+                  ? ' text-gray-400 focus:text-gray-500'
+                  : 'text-red-400 focus:text-red-500'
+              "
+              class="
+                inline-flex
+                w-5
+                h-5
+                transition
+                duration-150
+                ease-in-out
+                focus:outline-none
+              "
+              @click="hideNotificationAction"
+            >
+              <svg
+                class="w-6 h-6"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, computed, ref } from 'vue'
+import { useNotificationStore } from '@/scripts/stores/notification'
+
+const props = defineProps({
+  notification: {
+    type: Object,
+    default: null,
+  },
+})
+
+const notificationStore = useNotificationStore()
+
+let notiTimeOut = ref('')
+
+const success = computed(() => {
+  return props.notification.type == 'success'
+})
+
+const error = computed(() => {
+  return props.notification.type == 'error'
+})
+
+const info = computed(() => {
+  return props.notification.type == 'info'
+})
+
+function hideNotificationAction() {
+  notificationStore.hideNotification(props.notification)
+}
+
+function clearNotificationTimeOut() {
+  clearTimeout(notiTimeOut)
+}
+
+function setNotificationTimeOut() {
+  notiTimeOut = setTimeout(() => {
+    notificationStore.hideNotification(props.notification)
+  }, props.notification.time || 5000)
+}
+
+onMounted(() => {
+  setNotificationTimeOut()
+})
+</script>