feat: add useNinjaToaster composable

Author: stafyniaksacha

.playground/app.vue

@@ -2,9 +2,8 @@
 import { h } from 'vue'
 import CustomToast from './components/CustomToast.vue'
 import AdvancedToast from './components/AdvancedToast.vue'
-import { useNuxtApp } from '#app'
 
-const { $nt } = useNuxtApp()
+const $nt = useNinjaToaster()
 let i = 0
 
 function showBasicToast() {
@@ -84,6 +83,35 @@ async function showAdvancedToast() {
 
   toast.el.focus()
 }
+
+function showGlobalToast() {
+  $nt.showComponent('GlobalToast', {
+    props: {
+      type: 'basic',
+      message: 'Hello from GlobalToast module playground!'
+    },
+    options: {
+      theme: {
+        transition: {
+          name: 'toaster'
+        },
+        maxToasts: 5,
+        containerId: 'nt-container-bottom-right',
+        containerClass: [
+          'absolute',
+          'inset-0',
+          'pointer-events-none',
+          'p-4',
+          'flex',
+          'flex-col-reverse',
+          'items-start',
+          'gap-2'
+        ],
+        wrapperClass: 'pointer-events-auto cursor-pointer'
+      }
+    }
+  })
+}
 function clearAllToast() {
   $nt.clearAll()
 }
@@ -113,6 +141,12 @@ function clearTopLeftToast() {
     >
       show advanced toast
     </button>
+    <button
+      class="m-1 rounded border border-slate-200 px-2 py-1"
+      @click="showGlobalToast"
+    >
+      show global toast
+    </button>
     <button
       class="m-1 rounded border border-slate-200 px-2 py-1"
       @click="clearTopLeftToast"

.playground/components/global/GlobalToast.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: 'basic' | 'custom' | 'advanced'
+  message?: string
+}>()
+</script>
+
+<template>
+  <div class="rounded bg-green-600 p-4 text-white">
+    <p>Hello global, {{ props.message }}</p>
+  </div>
+</template>

src/module.ts

@@ -36,14 +36,18 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     if (options.installPlugin) {
+      addImports({
+        name: 'useNinjaToaster',
+        as: 'useNinjaToaster',
+        from: resolve(runtimeDir, 'composables/useNinjaToaster')
+      })
       addPlugin(resolve(runtimeDir, 'plugin'))
     }
   }
 })
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    /** nuxt-icon configuration */
     toaster?: NinjaToasterBaseProps
   }
-}
+}

src/runtime/composables/useNinjaToaster.ts

@@ -0,0 +1,7 @@
+
+type NinjaToasterInstance = ReturnType<typeof createNinjaToaster>
+
+export function useNinjaToaster() {
+  const { $nt } = useNuxtApp()
+  return $nt as NinjaToasterInstance
+}

src/runtime/create.ts

@@ -1,13 +1,17 @@
-import { type App, h, render } from 'vue'
+import { type App, type VNode, h, render } from 'vue'
 import { defu } from 'defu'
 
 import type { NinjaToasterTheme, NinjaToasterBaseProps, NinjaToasterProps, NinjaToasterShow } from '../types'
 import type { NinjaToasterRenderQueue } from './queue'
 import { type NinjaToastEventBus, createEventBus } from './events'
 import NinjaToaster from './components/NinjaToaster'
 
-// @ts-ignore
-import { useAppConfig, useNuxtApp } from '#imports'
+import { resolveComponent, useAppConfig, useNuxtApp } from '#imports'
+import type * as _AllComponents from '#components'
+
+type ComponentProps<T> = T extends keyof typeof _AllComponents
+  ? InstanceType<(typeof _AllComponents)[T]>['$props']
+  : undefined
 
 function createElement() {
   // @ts-ignore
@@ -54,9 +58,24 @@ export function createNinjaToaster(
   const events = createEventBus()
   const queues: Map<string, NinjaToasterRenderQueue> = new Map()
 
-  function show(options: NinjaToasterProps | string | number) {
-    const appConfigProps: NinjaToasterBaseProps = (useAppConfig() as any)
-      .toaster
+  function showComponent<T extends keyof typeof _AllComponents>(name: T, {
+    props,
+    children,
+    options,
+  }: {
+    props?: ComponentProps<T>,
+    children?: any
+    options?: Omit<NinjaToasterProps, 'content'>
+  }) {
+    const content = () => h(resolveComponent(name), props, children)
+    return show({
+      ...options,
+      content,
+    })
+  }
+
+  function show(options: NinjaToasterProps | string | number | (() => VNode)) {
+    const appConfigProps = useAppConfig()?.toaster as NinjaToasterBaseProps
     const app = useNuxtApp().vueApp
     const userProps =
       typeof options === 'string' ||
@@ -119,6 +138,7 @@ export function createNinjaToaster(
 
   return {
     show,
+    showComponent,
     clearAll,
     clear
   }