From 8e274ad3a2fa88571b769d563b4061e3f9bf0bad Mon Sep 17 00:00:00 2001
From: Rock070 <a0938130702@gmail.com>
Date: Fri, 1 Sep 2023 01:46:21 +0800
Subject: [PATCH] feat(plugin): set initial options by plugin, and override by
 useNoti() (#10)

---
 packages/core/src/components/Noti.vue         | 12 +++++---
 packages/core/src/composables/useNoti.ts      |  9 +++---
 .../core/src/composables/useNotiContext.ts    | 18 ++++++++++++
 packages/core/src/constant.ts                 |  4 +--
 packages/core/src/plugins/noti.ts             | 11 +++-----
 packages/core/src/types/index.ts              |  5 ++--
 playground/src/App.vue                        | 28 +++++++++++++++----
 playground/src/main.ts                        | 10 ++++++-
 8 files changed, 70 insertions(+), 27 deletions(-)
 create mode 100644 packages/core/src/composables/useNotiContext.ts

diff --git a/packages/core/src/components/Noti.vue b/packages/core/src/components/Noti.vue
index 6178d2c..83e1e25 100644
--- a/packages/core/src/components/Noti.vue
+++ b/packages/core/src/components/Noti.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+
+import { useCounter } from '@vueuse/core'
 import { useNoti } from '../composables/useNoti'
 import useEventBus from '../composables/useEventBus'
-import { DEFAULT_SETTING } from '../constant'
+
+import { useNotiContext } from '../composables/useNotiContext'
 
 import type { NotiOptions } from '../types'
 
@@ -14,17 +17,18 @@ export interface NotiProps {
 
 defineProps<NotiProps>()
 
+const { options: initialOptions } = useNotiContext()
+const { inc: countIncrease } = useCounter(1)
+
 const noti = useNoti()
 
 if (!noti)
   console.warn('[@vue3-noti/core warning] useNoti is undefined')
 
-let count = 1
-
 const queue = ref<NotificationList>([])
 
 function publishEvent(options: NotiOptions) {
-  const item = { ...DEFAULT_SETTING, ...options, id: count++ }
+  const item = { ...initialOptions, ...options, id: countIncrease() }
   queue.value.push(item)
 
   const { id, duration } = item
diff --git a/packages/core/src/composables/useNoti.ts b/packages/core/src/composables/useNoti.ts
index d8be7d2..042edcf 100644
--- a/packages/core/src/composables/useNoti.ts
+++ b/packages/core/src/composables/useNoti.ts
@@ -1,9 +1,8 @@
-import { inject } from 'vue'
-
-import { INJECT_KEY } from '../constant'
-import type { NotiEvent } from '../types'
+import type { NotiOptions } from '../types'
+import useEventBus from './useEventBus'
 
 export function useNoti() {
-  const noti = inject(INJECT_KEY) as NotiEvent
+  const bus = useEventBus()
+  const noti = (options: NotiOptions) => bus.emit(options)
   return noti
 }
diff --git a/packages/core/src/composables/useNotiContext.ts b/packages/core/src/composables/useNotiContext.ts
new file mode 100644
index 0000000..a0f7019
--- /dev/null
+++ b/packages/core/src/composables/useNotiContext.ts
@@ -0,0 +1,18 @@
+import { inject } from 'vue'
+import { DEFAULT_SETTING, INJECT_KEY } from '../constant'
+import type { NotiContext, NotiOptions } from '../types'
+
+export function useNotiProvideArguments(initialOptions: NotiOptions) {
+  const provideArguments = [INJECT_KEY, {
+    options: {
+      ...DEFAULT_SETTING,
+      ...initialOptions,
+    },
+  }] as const
+
+  return provideArguments
+}
+
+export function useNotiContext(): NotiContext {
+  return inject(INJECT_KEY) || { options: DEFAULT_SETTING }
+}
diff --git a/packages/core/src/constant.ts b/packages/core/src/constant.ts
index cbb4974..832781e 100644
--- a/packages/core/src/constant.ts
+++ b/packages/core/src/constant.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue'
-import type { NotiEvent, NotiOptions } from './types'
+import type { NotiContext, NotiOptions } from './types'
 import { NOTI_POSITION, NOTI_TYPE } from './types'
 
 export const DEFAULT_SETTING: NotiOptions = {
@@ -9,4 +9,4 @@ export const DEFAULT_SETTING: NotiOptions = {
   duration: 3000,
 }
 
-export const INJECT_KEY: InjectionKey<NotiEvent> = Symbol('noti')
+export const INJECT_KEY: InjectionKey<NotiContext> = Symbol('noti')
diff --git a/packages/core/src/plugins/noti.ts b/packages/core/src/plugins/noti.ts
index 4a7d744..83623fc 100644
--- a/packages/core/src/plugins/noti.ts
+++ b/packages/core/src/plugins/noti.ts
@@ -1,16 +1,13 @@
 import type { App, Plugin } from 'vue'
 
-import { INJECT_KEY } from '../constant'
-import useEventBus from '../composables/useEventBus'
+import { useNotiProvideArguments } from '../composables/useNotiContext'
 import type { NotiOptions } from '../types'
 
 // app: App, options: any
 export const NotiPlugin: Plugin = {
-  install: (app: App) => {
-    const bus = useEventBus()
-    const noti = (options: NotiOptions) => bus.emit(options)
+  install: (app: App, initialOptions: NotiOptions) => {
+    const notiArguments = useNotiProvideArguments(initialOptions)
 
-    // Plugin code goes here
-    app.provide(INJECT_KEY, noti)
+    app.provide(...notiArguments)
   },
 }
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
index 9533074..550ea82 100644
--- a/packages/core/src/types/index.ts
+++ b/packages/core/src/types/index.ts
@@ -47,7 +47,6 @@ export enum NOTI_POSITION {
   MIDDLE_RIGHT = 'middle-right',
 }
 
-// export type NotiPosition = ValueOf<NotiOptions>
 export type NotiPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'middle-top' | 'middle-left' | 'middle-right'
 
 export interface NotiOptions {
@@ -58,4 +57,6 @@ export interface NotiOptions {
   duration?: number
 }
 
-export type NotiEvent = (options: Partial<NotiOptions>) => void
+export interface NotiContext {
+  options: NotiOptions
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
index c791d20..b6387a5 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -9,9 +9,16 @@ const noti = useNoti()
 
 function callNoti() {
   noti({
-    message: 'Hello world',
+    message: 'Hello World',
+    type: 'success',
+  })
+}
+
+function callNoti2() {
+  noti({
+    duration: 5000,
+    message: 'Hello World Longer',
     type: 'success',
-    duration: 3000,
   })
 }
 </script>
@@ -29,10 +36,14 @@ function callNoti() {
 
     <br>
     <Noti v-model:test="string" />
-
-    <button type="button" @click="callNoti">
-      notify
-    </button>
+    <div class="button-group">
+      <button type="button" @click="callNoti">
+        call default notify last 1 second
+      </button>
+      <button type="button" @click="callNoti2">
+        call custom notify last 5 second
+      </button>
+    </div>
   </div>
 </template>
 
@@ -53,4 +64,9 @@ function callNoti() {
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+.button-group {
+  display: flex;
+  gap: 1em;
+  margin-top: 1em;
+}
 </style>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 05f7daa..ea0d640 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,6 +1,14 @@
 import { NotiPlugin } from '@vue3-noti/core'
+import type { NotiOptions } from '@vue3-noti/core'
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 
-createApp(App).use(NotiPlugin).mount('#app')
+const notiOptions: NotiOptions = {
+  message: 'Hello',
+  type: 'success',
+  duration: 1000,
+  position: 'top-right',
+}
+
+createApp(App).use(NotiPlugin, notiOptions).mount('#app')