Merge branch 'feature/dynamic-modal' into next

hunterliu1003 · hunterliu1003 · commit 2e4af7792ee7 · 2021-01-08T18:03:43.000+08:00
diff --git a/README.md b/README.md
@@ -302,15 +302,15 @@ Or get `params` on `@beforeOpen` event:
 
 > `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
 
-toggle modal by name.
+toggle modals by name.
 
 ### `$vfm.get(name)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
 
-return the modal comopnent instance.
+return the modal instances.
 
 ### `$vfm.openedModals`
 
diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -307,15 +307,15 @@ Or get `params` on `@beforeOpen` event:
 
 <alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
 
-toggle modal by name.
+toggle modals by name.
 
 ### `$vfm.get(name)`
 
 - Type: `Function`
 - Arguments:
   - name: `String` - Name of the modal
 
-return the modal comopnent instance.
+return the modal instances.
 
 ### `$vfm.openedModals`
 
@@ -502,7 +502,7 @@ Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexAuto
 
 Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexAuto`, `zIndexBase` will be ignored.
 
-### `focusRemain`
+### `focusRetain`
 
 - Type: `Boolean`
 - Default: `true`
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -25,6 +25,8 @@
     <v-stop-before-close></v-stop-before-close>
     <h2 class="text-3xl py-2">Stop before open:</h2>
     <v-stop-before-open></v-stop-before-open>
+    <h2 class="text-3xl py-2">Dynamic modal</h2>
+    <v-dynamic-modal></v-dynamic-modal>
 
     <div v-for="i in 100" :key="i">{{ i }}</div>
   </div>
diff --git a/example/src/components/VContent.vue b/example/src/components/VContent.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>Content: {{ text }}</div>
+</template>
+
+<script>
+export default {
+  props: ['text']
+}
+</script>
diff --git a/example/src/components/VTitle.vue b/example/src/components/VTitle.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>Title: {{ text }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
diff --git a/example/src/components/basic/VDynamicModal.vue b/example/src/components/basic/VDynamicModal.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <ModalsContainer></ModalsContainer>
+
+    <button class="vfm-btn mb-4" @click="dynamic">Open Dynamic Modal</button>
+    <button class="vfm-btn mb-4" @click="$vfm.hide('dynamicModal')">
+      Close Dynamic Modal
+    </button>
+    <button class="vfm-btn mb-4" @click="$vfm.hideAll()">
+      Hide All Modals
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    dynamic() {
+      this.$vfm.show({
+        component: 'VModal',
+        bind: {
+          name: 'dynamicModal',
+          preventClick: true
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/example/src/components/hoc/VModal.vue b/example/src/components/hoc/VModal.vue
@@ -11,10 +11,14 @@
       <slot></slot>
     </div>
     <div class="modal__action">
-      <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
-      <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
+      <button class="vfm-btn" @click="$emit('confirm', close)">
+        confirm
+      </button>
+      <button class="vfm-btn" @click="$emit('cancel', close)">
+        cancel
+      </button>
     </div>
-    <button class="modal__close" @click="$emit('input', false)">
+    <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
   </vue-final-modal>
@@ -23,7 +27,12 @@
 <script>
 export default {
   name: 'VModal',
-  inheritAttrs: false
+  inheritAttrs: false,
+  methods: {
+    close() {
+      this.$emit('update:modelValue', false)
+    }
+  }
 }
 </script>
 
diff --git a/lib/ModalsContainer.vue b/lib/ModalsContainer.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="modals-container">
+    <component
+      :is="modal.component"
+      v-for="(modal, index) in api.dynamicModals"
+      :key="modal.id"
+      v-model="modal.value"
+      v-bind="modal.bind"
+      v-on="modal.on"
+      @closed="slice(index)"
+      @before-open="e => beforeOpen(e, modal)"
+    >
+      <template v-for="(slot, key) in modal.slots" #[key] :key="key">
+        <component :is="slot.component" v-bind="slot.bind" />
+      </template>
+    </component>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  computed: {
+    api() {
+      return this[this.options.key]
+    }
+  },
+  methods: {
+    slice(index) {
+      this.api.dynamicModals.splice(index, 1)
+    },
+    beforeOpen(e, modal) {
+      e.ref.params = modal.params
+    }
+  }
+}
+</script>
diff --git a/lib/Plugin.js b/lib/Plugin.js
@@ -1,8 +1,9 @@
-import { bindPrototype, registComponent } from './PluginCore'
-import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
+import { bindPrototype, registModal, registContainer } from './PluginCore'
+import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from './utils/errors'
 
 const defaultOptions = {
   componentName: 'VueFinalModal',
+  dynamicContainerName: 'ModalsContainer',
   key: '$vfm'
 }
 
@@ -11,16 +12,26 @@ const Plugin = () => ({
     const _options = Object.assign({}, defaultOptions, options)
     const isDuplicateKey = app.config.globalProperties[_options.key]
     const isDuplicateComponent = app._context.components[_options.componentName]
+    const isDuplicateDynamicContainer = app._context.components[_options.dynamicContainerName]
 
-    if (isDuplicateComponent) {
+    if (isDuplicateComponent || isDuplicateDynamicContainer) {
       if (typeof window !== 'undefined') {
-        console.warn(isDuplicateKey ? DUPLICATE_PLUGIN_COMPONENT : DUPLICATE_COMPONENT)
+        if (isDuplicateKey) {
+          console.error(DUPLICATE_PLUGIN_COMPONENT)
+        }
+        if (isDuplicateComponent) {
+          console.error(DUPLICATE_COMPONENT)
+        }
+        if (isDuplicateDynamicContainer) {
+          console.error(DUPLICATE_DYNAMIC_CONTAINER)
+        }
       }
     } else {
       if (!isDuplicateKey) {
         bindPrototype(app, _options)
       }
-      registComponent(app, _options)
+      registModal(app, _options)
+      registContainer(app, _options)
     }
   }
 })
diff --git a/lib/PluginCore.js b/lib/PluginCore.js
@@ -1,30 +1,69 @@
 import VueFinalModal from './VueFinalModal.vue'
+import ModalsContainer from './ModalsContainer.vue'
+import { shallowReactive } from 'vue'
 
-function createVfm() {
+function assignOptions(component, options) {
+  const _component = { ...component }
+  Object.assign(_component.props, {
+    options: { type: Object, default: () => options }
+  })
+  return _component
+}
+
+function createVfm(options) {
   let vfm
+  const PREFIX = '_dynamic_modal_'
+  const generateId = ((index = 0) => () => (index++).toString())()
 
   return function() {
     vfm = {
-      show(name, ...args) {
-        this.toggle(name, true, ...args)
+      show(modal, ...args) {
+        switch (typeof modal) {
+          case 'string':
+            this.toggle(modal, true, ...args)
+            break
+          case 'object':
+            {
+              const defaultModal = {
+                component: options.componentName,
+                bind: {},
+                slots: {},
+                on: {}
+              }
+              modal = Object.assign(defaultModal, modal)
+              const id = generateId()
+              const name = modal.bind.name || PREFIX + id
+              this.dynamicModals.push(
+                shallowReactive({
+                  value: true,
+                  id,
+                  ...modal,
+                  component: modal.component,
+                  slots: modal.slots,
+                  bind: { ...modal.bind, name },
+                  params: args[0]
+                })
+              )
+            }
+            break
+        }
       },
       hide(name) {
         this.toggle(name, false)
       },
       hideAll() {
-        this.openedModals.forEach(modal => {
-          modal.emit('update:modelValue', false)
-        })
+        for (let i = this.openedModals.length - 1; i >= 0; i--) {
+          this.openedModals[i].emit('update:modelValue', false)
+        }
       },
       toggle(name, ...args) {
-        const modal = this.get(name)
-        if (modal !== undefined) {
-          modal.toggle(...args)
-        }
+        const modals = this.get(name)
+        modals.forEach(modal => modal.toggle(...args))
       },
       get(name) {
-        return this.modals.find(modal => modal.props.name === name)
+        return this.modals.filter(modal => modal.props.name === name)
       },
+      dynamicModals: shallowReactive([]),
       openedModals: [],
       modals: []
     }
@@ -33,7 +72,7 @@ function createVfm() {
 }
 
 export function bindPrototype(app, options) {
-  const vfm = createVfm()()
+  const vfm = createVfm(options)()
   Object.defineProperty(app.config.globalProperties, options.key, {
     get() {
       return vfm
@@ -42,9 +81,9 @@ export function bindPrototype(app, options) {
   app.provide(options.key, vfm)
 }
 
-export function registComponent(app, options) {
-  app.component(options.componentName, {
-    ...VueFinalModal,
-    props: { ...VueFinalModal.props, options: { type: Object, default: () => options } }
-  })
+export function registModal(app, options) {
+  app.component(options.componentName, assignOptions(VueFinalModal, options))
+}
+export function registContainer(app, options) {
+  app.component(options.dynamicContainerName, assignOptions(ModalsContainer, options))
 }
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -67,7 +67,6 @@ const TransitionState = {
 }
 
 export default {
-  name: 'VueFinalModal',
   props: {
     name: { type: String, default: null },
     modelValue: { type: Boolean, default: false },
diff --git a/lib/utils/errors.js b/lib/utils/errors.js
@@ -2,3 +2,6 @@ export const DUPLICATE_PLUGIN_COMPONENT =
   '[vue-final-modal] Duplicate registration API key and componentName of VueFinalModal.'
 
 export const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'
+
+export const DUPLICATE_DYNAMIC_CONTAINER =
+  '[vue-final-modal] Duplicate registration dynamicContainerName of ModalsContainer.'
