feat: implement scopes

Author: adamcikado

package.json

@@ -17,7 +17,7 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@outloud/eslint-config-vue": "^1.0.3",
+    "@outloud/eslint-config-vue": "^1.1.5",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/node": "^20.12.12",
     "concurrently": "^8.2.2",

packages/vue-modals/src/Modal.ts

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 export type ModalListener = (...args: any[]) => void
 
 export type ModalId = string | number
+export type ModalScope = ModalId
 export type ModalStatus = 'pending' | 'open' | 'closed'
 export type ModalProps = Record<string, any>
 export type ModalListeners = Record<string, ModalListener>
@@ -16,12 +17,14 @@ export interface ModalOptions {
 
 export interface ModalData<Props = ModalProps> extends ModalOptions {
   id: ModalId
+  scope?: ModalScope
   props: Props
   listeners: ModalListeners
 }
 
 export class Modal<T = any> {
   readonly id: ModalId
+  readonly scope?: ModalScope
   readonly props: ModalProps
   readonly listeners: ModalListeners
   readonly options: ModalOptions
@@ -33,8 +36,9 @@ export class Modal<T = any> {
   reject?: (err: Error) => void
   resolve?: (value: T) => void
 
-  constructor({ id, props, listeners, ...options }: ModalData) {
+  constructor({ id, scope, props, listeners, ...options }: ModalData) {
     this.id = id
+    this.scope = scope
     this.props = props
     this.listeners = listeners
     this.options = options

packages/vue-modals/src/ModalManager.ts

@@ -1,30 +1,41 @@
-import type { Component, Raw, Ref } from 'vue'
-import { markRaw, reactive } from 'vue'
+import type { Component, Ref } from 'vue'
+import { markRaw } from 'vue'
 import { Modal } from './Modal'
-import type { ModalData, ModalId, ModalProps } from './Modal'
+import type { ModalData, ModalId, ModalProps, ModalScope } from './Modal'
 import type { ModalsConfig } from './config'
 import type { ComponentOrImport, ComponentProps, LazyComponent, ModalConfirmProps } from './types'
+import { State } from './State'
 
 export type ModalOpenOptions<Props = ModalProps> = Partial<ModalData<Props>> & {
   fetchData?: () => Promise<ModalProps | undefined>
 }
 
-interface ComponentData {
-  loader: LazyComponent
-  component?: Component
-}
-
 export class ModalManager {
-  list = reactive<Raw<Modal>[]>([])
-  content?: Ref<HTMLElement | undefined>
+  private readonly state: State
+  private scopeId?: ModalScope
+
+  constructor(options?: Partial<ModalsConfig>, state?: State) {
+    this.state = state || new State(options)
+  }
+
+  get list() {
+    return this.state.list
+  }
 
-  private modalId = 1
-  private components = new Map<string, ComponentData>()
+  get options() {
+    return this.state.options
+  }
+
+  get content() {
+    return this.state.content
+  }
 
-  constructor(public options: ModalsConfig) {}
+  set content(value: Ref<HTMLElement | undefined> | undefined) {
+    this.state.content = value
+  }
 
   getComponent(name: string): ComponentOrImport {
-    const component = this.components.get(name)
+    const component = this.state.components.get(name)
 
     if (!component) {
       throw new Error(`Component "${name}" not found`)
@@ -49,7 +60,7 @@ export class ModalManager {
   }
 
   registerComponent(name: string, loader: LazyComponent, preload = false) {
-    this.components.set(name, { loader })
+    this.state.components.set(name, { loader })
 
     if (preload) {
       const result = this.getComponent(name)
@@ -112,10 +123,11 @@ export class ModalManager {
     component: ComponentOrImport<C>,
     options: ModalOpenOptions<ComponentProps<C>> = {},
   ) {
-    const mergedOptions = Object.assign({
-      id: this.modalId++,
+    const mergedOptions: ModalData = Object.assign({
+      id: this.state.modalId++,
       props: {},
       listeners: {},
+      scope: this.scopeId,
     }, this.options, options)
 
     const existingModal: Modal<T> | undefined = this.get(mergedOptions.id)
@@ -162,6 +174,24 @@ export class ModalManager {
     return true
   }
 
+  closeScope() {
+    if (!this.scopeId) {
+      return
+    }
+
+    for (const modal of this.list) {
+      if (modal.scope === this.scopeId) {
+        this.close(modal)
+      }
+    }
+  }
+
+  closeAll() {
+    for (const modal of this.list) {
+      this.close(modal)
+    }
+  }
+
   confirm<T = boolean>(props: ModalConfirmProps) {
     return this.open<T>(this.getComponent('confirm'), {
       props,
@@ -172,4 +202,11 @@ export class ModalManager {
     const prototype: any = ModalManager.prototype
     prototype[name] = def
   }
+
+  scope(scopeId: ModalScope) {
+    const scope = new ModalManager(undefined, this.state)
+    scope.scopeId = scopeId
+
+    return scope
+  }
 }

packages/vue-modals/src/State.ts

@@ -0,0 +1,21 @@
+import { type Component, type Raw, reactive, type Ref } from 'vue'
+import type { Modal, ModalOptions } from './Modal'
+import type { LazyComponent } from './types'
+import { defaults, type ModalsConfig } from './config'
+
+interface ComponentData {
+  loader: LazyComponent
+  component?: Component
+}
+
+export class State {
+  list = reactive<Raw<Modal>[]>([])
+  content?: Ref<HTMLElement | undefined>
+  components = new Map<string, ComponentData>()
+  modalId = 1
+  options: ModalOptions
+
+  constructor(options?: Partial<ModalsConfig>) {
+    this.options = Object.assign({}, defaults, options)
+  }
+}

packages/vue-modals/src/composables/modals.ts

@@ -1,7 +1,15 @@
-import { inject } from 'vue'
+import { getCurrentInstance, inject, onBeforeUnmount } from 'vue'
 import type { ModalManager } from '../ModalManager'
 import { modalsSymbol } from '../symbols'
 
 export function useModals(): ModalManager {
-  return inject(modalsSymbol)!
+  const uid = getCurrentInstance()?.uid
+  const modals = inject(modalsSymbol)!
+  const scope = uid !== undefined ? modals.scope(uid) : modals
+
+  onBeforeUnmount(() => {
+    uid !== undefined && scope.closeScope()
+  })
+
+  return scope
 }

packages/vue-modals/src/config.ts

@@ -11,7 +11,7 @@ export interface ModalsConfig {
   escToClose: boolean
 }
 
-export const config: ModalsConfig = {
+export const defaults: ModalsConfig = {
   clickToClose: true,
   escToClose: true,
 }

packages/vue-modals/src/plugin.ts

@@ -2,11 +2,10 @@ import type { App } from 'vue'
 import { markRaw, warn } from 'vue'
 import { ModalManager } from './ModalManager'
 import type { ModalsConfig } from './config'
-import { config } from './config'
 import { modalsSymbol } from './symbols'
 
 export function createModals(options: Partial<ModalsConfig> = {}) {
-  const api = markRaw(new ModalManager(Object.assign({}, config, options)))
+  const api = markRaw(new ModalManager(options))
 
   const install = (app: App) => {
     if (app.config.globalProperties.$modals) {