feat: add scopes & use nanoid

package.json

@@ -40,5 +40,8 @@
     "eslint": "latest",
     "nuxt": "^3.0.0-rc.11",
     "typescript": "latest"
+  },
+  "dependencies": {
+    "nanoid": "^4.0.0"
   }
 }

src/runtime/components/NuxtModals.vue

@@ -1,14 +1,18 @@
 <script setup>
 import { useModals } from '#imports'
 
-defineProps({
+const props = defineProps({
+  scope: {
+    type: String,
+    required: false,
+  },
   transition: {
     type: String,
-    default: 'modal',
+    default: 'default',
   },
 })
 
-const { modals } = useModals()
+const { modals } = useModals(props.scope)
 </script>
 
 <template>
@@ -21,14 +25,14 @@ const { modals } = useModals()
   </TransitionGroup>
 </template>
 
-<style lang="postcss">
-.modal-enter-active,
-.modal-leave-active {
+<style lang="postcss" scoped>
+.default-enter-active,
+.default-leave-active {
   transition: opacity 0.3s ease-out;
 }
 
-.modal-enter-from,
-.modal-leave-to {
+.default-enter-from,
+.default-leave-to {
   opacity: 0;
 }
 </style>

src/runtime/composables/useModals.ts

@@ -1,27 +1,26 @@
+import { nanoid } from 'nanoid'
+import type { Ref } from 'vue'
 import { markRaw, ref } from 'vue'
 
 type Component = abstract new (...args: any) => any
 
 interface Modal {
-  id: number
+  id: string
   component: Component
   bindings: Record<string, any>
 }
 
 type Bindings<T extends Component> = InstanceType<T>['$props']
 type ReturnValue<T extends Component> = Parameters<Bindings<T>['onClose']>[0]
 
-const modals = ref<Modal[]>([])
-let index = 0
+const scopes: Record<string, Ref<Modal[]>> = {}
 
-export function useModals () {
-  function generateId (): number {
-    return index++
-  }
+export function useModals (scope = '') {
+  const modals = scopes[scope] = scopes[scope] ?? ref<Modal[]>([])
 
   async function open <T extends Component> (component: T, bindings: Bindings<T>): Promise<ReturnValue<T>> {
     return new Promise((resolve) => {
-      const id = generateId()
+      const id = nanoid()
       modals.value.push({
         id,
         component: markRaw(component),