From b65ff3293235f92e503728bd1ea5d1c2d2ee8549 Mon Sep 17 00:00:00 2001
From: Kevin Marrec <kevin@marrec.io>
Date: Fri, 30 Sep 2022 13:17:59 +0200
Subject: [PATCH] feat: add scopes & use nanoid

---
 package.json                          |  3 +++
 pnpm-lock.yaml                        |  5 ++++-
 src/runtime/components/NuxtModals.vue | 20 ++++++++++++--------
 src/runtime/composables/useModals.ts  | 15 +++++++--------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index bf01136..e40c57c 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,8 @@
     "eslint": "latest",
     "nuxt": "^3.0.0-rc.11",
     "typescript": "latest"
+  },
+  "dependencies": {
+    "nanoid": "^4.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53ac995..b2adc40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,13 @@ specifiers:
   '@vueuse/components': latest
   '@vueuse/core': latest
   eslint: latest
+  nanoid: ^4.0.0
   nuxt: ^3.0.0-rc.11
   typescript: latest
 
+dependencies:
+  nanoid: 4.0.0
+
 devDependencies:
   '@antfu/eslint-config': 0.27.0_ypn2ylkkyfa5i233caldtndbqa
   '@iconify-json/mdi': 1.1.33
@@ -4602,7 +4606,6 @@ packages:
     resolution: {integrity: sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==}
     engines: {node: ^14 || ^16 || >=18}
     hasBin: true
-    dev: true
 
   /natural-compare/1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
diff --git a/src/runtime/components/NuxtModals.vue b/src/runtime/components/NuxtModals.vue
index 6dddbd8..e8501a2 100644
--- a/src/runtime/components/NuxtModals.vue
+++ b/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>
diff --git a/src/runtime/composables/useModals.ts b/src/runtime/composables/useModals.ts
index 3e7725d..fc85383 100644
--- a/src/runtime/composables/useModals.ts
+++ b/src/runtime/composables/useModals.ts
@@ -1,9 +1,11 @@
+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>
 }
@@ -11,17 +13,14 @@ interface Modal {
 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),