feat: added named modal feature

package.json

@@ -14,6 +14,7 @@
   "main": "./dist/vue-modal.umd.js",
   "module": "./dist/vue-modal.es.js",
   "unpkg": "dist/vue-modal.umd.js",
+  "sideEffects": false,
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",

playground/layouts/default/DefaultNav.vue

@@ -21,6 +21,9 @@
           <li class="nav-item">
             <router-link to="/example2" class="nav-link" @click="collapseNavbar">Example2</router-link>
           </li>
+          <li class="nav-item">
+            <router-link to="/named-example" class="nav-link" @click="collapseNavbar">Named example</router-link>
+          </li>
         </ul>
       </div>
     </div>

playground/main.js

@@ -1,6 +1,6 @@
 import App from './App.vue'
 import Default from './layouts/default/Default.vue'
-import Modal from '@/Modal.vue'
+import Modal, { modalPlugin } from '@/index'
 import { createApp } from 'vue'
 import { router } from './router'
 import { store } from './store'
@@ -12,4 +12,5 @@ app.component('Modal', Modal)
 
 app.use(store)
 app.use(router)
+app.use(modalPlugin)
 app.mount('#app')

playground/router/index.js

@@ -21,6 +21,14 @@ const routes = [
     meta: {
       layout: 'default'
     }
+  },
+  {
+    path: '/named-example',
+    name: 'NamedExample',
+    component: () => import(/* webpackChunkName: "named-example" */ '../views/NamedExample.vue'),
+    meta: {
+      layout: 'default'
+    }
   }
 ]
 const router = createRouter({

playground/views/NamedExample.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <div class="row mb-3">
+      <div class="col">
+        <button type="button" class="btn btn-primary" @click="$modal.show('modal1')">Open named modal 1</button>
+        <button type="button" class="btn btn-primary ml-2" @click="$modal.show('modal2')">Open named modal 2</button>
+      </div>
+    </div>
+
+    <Modal name="modal1" title="My first modal">
+      <p>Modal 1 content goes here...</p>
+    </Modal>
+
+    <Modal name="modal2" title="My second modal">
+      <p>Modal 2 content goes here...</p>
+    </Modal>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {}
+  }
+}
+</script>

src/Modal.vue

@@ -75,6 +75,10 @@ let animatingZIndex = 0
 export default {
   name: 'VueModal',
   props: {
+    name: {
+      type: String,
+      default: ''
+    },
     title: {
       type: String,
       default: ''
@@ -129,30 +133,56 @@ export default {
   },
   mounted() {
     this.id = 'vm-' + this.$.uid
-    this.$watch(
-      'modelValue',
-      function (newVal) {
-        if (newVal) {
-          this.mount = true
-          this.$nextTick(() => {
-            this.show = true
-          })
-        } else {
-          this.show = false
+
+    // Handle v-model modal
+    if (!this.name) {
+      this.$watch(
+        'modelValue',
+        (newVal) => {
+          if (newVal) {
+            this.mount = true
+            this.$nextTick(() => {
+              this.show = true
+            })
+          } else {
+            this.show = false
+          }
+        },
+        {
+          immediate: true
         }
-      },
-      {
-        immediate: true
-      }
-    )
+      )
+    }
+
+    // Handle named modal
+    if (this.name && this.$modal) {
+      this.$watch(
+        '$modal.state.modals',
+        (newVal) => {
+          if (newVal[this.name]) {
+            this.mount = true
+            this.$nextTick(() => {
+              this.show = true
+            })
+          } else {
+            this.show = false
+          }
+        },
+        {
+          deep: true
+        }
+      )
+    }
   },
   beforeUnmount() {
     this.elToFocus = null
+    this.name && this.$modal.hide(this.name)
   },
   methods: {
     close() {
       if (this.enableClose === true) {
         this.$emit('update:modelValue', false)
+        this.name && this.$modal.hide(this.name)
       }
     },
     clickOutside(e) {

src/index.js

@@ -0,0 +1,7 @@
+import Modal from './Modal.vue'
+import { modalPlugin } from './modalPlugin'
+import { useModal } from './useModal'
+
+export default Modal
+
+export { modalPlugin, useModal }

src/modalPlugin.js

@@ -0,0 +1,7 @@
+import { useModal } from './useModal'
+
+export const modalPlugin = {
+  install(app) {
+    app.config.globalProperties.$modal = useModal()
+  }
+}

src/useModal.ts

@@ -0,0 +1,23 @@
+import { reactive } from 'vue'
+
+const state = reactive({
+  modals: {}
+})
+
+export const useModal = () => {
+  const show = (name) => {
+    state.modals[name] = true
+  }
+
+  const hide = (name) => {
+    delete state.modals[name]
+  }
+
+  const hideAll = () => {
+    Object.keys(state.modals).forEach((modalName) => {
+      hide(modalName)
+    })
+  }
+
+  return { state, show, hide, hideAll }
+}

vite.config.js

@@ -44,6 +44,7 @@ module.exports = defineConfig({
     rollupOptions: {
       external: ['vue'],
       output: {
+        preserveModules: true,
         globals: {
           vue: 'Vue'
         },