feat(plugin): set initial options by plugin, and override by useNoti() (

#10)

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

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
 }

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 }
+}

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')

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)
   },
 }

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
+}

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>

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')