feat(Noti): make multi notification (#9)

* feat(Noti): make multi notification * fix: type
Rock070 · Aug 31, 2023 · 9e18a7f · 9e18a7f
1 parent 77e953b
commit 9e18a7f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 41 deletions.
diff --git a/packages/core/src/components/Noti.vue b/packages/core/src/components/Noti.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useToggle, watchImmediate } from '@vueuse/core'
+import { ref } from 'vue'
 import { useNoti } from '../composables/useNoti'
 import useEventBus from '../composables/useEventBus'
+import { DEFAULT_SETTING } from '../constant'
+
 import type { NotiOptions } from '../types'
 
-export type NotificationList = (NotiOptions & { id: symbol })[]
+export type NotificationList = (NotiOptions & { id: number | string | symbol })[]
 
 export interface NotiProps {
   test: string
@@ -16,65 +17,52 @@ defineProps<NotiProps>()
 const noti = useNoti()
 
 if (!noti)
-  console.warn('useNoti is not provided')
+  console.warn('[@vue3-noti/core warning] useNoti is undefined')
 
-const [open, toggleOpen] = useToggle(false)
+let count = 1
 
-const options = reactive({
-  message: '',
-  duration: 1000,
-})
-const message = ref('')
-const duration = ref(1000)
+const queue = ref<NotificationList>([])
 
 function publishEvent(options: NotiOptions) {
-  message.value = options.message
-  duration.value = options.duration
-  toggleOpen(true)
+  const item = { ...DEFAULT_SETTING, ...options, id: count++ }
+  queue.value.push(item)
+
+  const { id, duration } = item
+  setTimeout(() => {
+    queue.value = queue.value.filter(item => item.id !== id)
+  }, duration)
 }
 
 const bus = useEventBus()
 bus.on(publishEvent)
-
-function resetOptions() {
-  options.message = ''
-  options.duration = 1000
-}
-
-watchImmediate(
-  open,
-  (val) => {
-    if (!val)
-      return
-
-    setTimeout(() => {
-      toggleOpen(false)
-      resetOptions()
-    }, duration.value)
-  })
 </script>
 
 <template>
   <div class="vue3-noti">
-    <div v-if="open" class="vue3-noti-group">
-      {{ message }}
+    <div class="vue3-noti__container">
+      <div v-for="item in queue" :key="item.id" class="vue3-noti-group">
+        {{ item.message }} {{ item.id }}
+      </div>
     </div>
   </div>
 </template>
 
 <style>
-.vue3-noti .vue3-noti-group {
+.vue3-noti .vue3-noti__container {
   position: fixed;
   bottom: 16px;
   right: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 16px;
+  z-index: 9999;
+}
+.vue3-noti .vue3-noti__container .vue3-noti-group {
   font-size: 32px;
   background-color: chartreuse;
   color: black;
   border-radius: 12px;
   padding: 10px 20px
 }
-
-.vue3-noti-group__item {
-
-}
 </style>
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -53,9 +53,9 @@ export type NotiPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-l
 export interface NotiOptions {
   message: string
 
-  type: NotificationType
-  position: NotiPosition
-  duration: number
+  type?: NotificationType
+  position?: NotiPosition
+  duration?: number
 }
 
 export type NotiEvent = (options: Partial<NotiOptions>) => void