Merge branch 'dev' into next

Author: hunterliu1003

README.md

@@ -318,6 +318,7 @@ toggle modal by name.
   attach: { type: null, default: false, validator: validateAttachTarget },
   transition: { type: String, default: 'vfm' },
   overlayTransition: { type: String, default: 'vfm' },
+  zIndexAuto: { type: Boolean, default: true },
   zIndexBase: { type: [String, Number], default: 1000 },
   zIndex: { type: [Boolean, String, Number], default: false },
   focusRetain: { type: Boolean, default: true },

dist/VueFinalModal.esm.js

@@ -194,22 +194,6 @@ Changes API name from "$vfm" to any other string value. It is useful when you us
 
 Plugin API can be called within any component through `this.$vfm`.
 
-### `$vfm.openedModals`
-
-- Type: `Array`
-
-A stack array store the opened modal's vue component instance.
-
-You can use:
-1. `$vfm.openedModals[0]` to get the first opened modal instance.
-2. `$vfm.openedModals.length` to get how many modals is opened.
-
-### `$vfm.modals`
-
-- Type: `Array`
-
-All modal instances include show and hide.
-
 ### `$vfm.show(name, params)`
 
 - Type: `Function`
@@ -308,6 +292,30 @@ Or get `params` on `@beforeOpen` event:
 
 toggle modal by name.
 
+### `$vfm.get(name)`
+
+- Type: `Function`
+- Arguments:
+  - name: `String` - Name of the modal
+
+return the modal comopnent instance.
+
+### `$vfm.openedModals`
+
+- Type: `Array`
+
+A stack array store the opened modal's vue component instance.
+
+You can use:
+1. `$vfm.openedModals[0]` to get the first opened modal instance.
+2. `$vfm.openedModals.length` to get how many modals is opened.
+
+### `$vfm.modals`
+
+- Type: `Array`
+
+All modal instances include show and hide.
+
 ## **Props**
 
 ### `ssr`
@@ -446,19 +454,26 @@ Specifies which DOM element that this component should detach to.
 2. String can be any valid `querySelector`, e.g. `'body'`, `'#app'`.
 3. Object can be any valid `Node`, e.g. `this.$refs.container`.
 
+### `zIndexAuto`
+
+- Type: `Boolean`
+- Default: `true`
+
+Auto binding `z-index` base on the prop `zIndexBase` and adding `2` by each stackable modal. If zIndex is set, `zIndexAuto`, `zIndexBase` will be ignored.
+
 ### `zIndexBase`
 
 - Type: `[String, Number]`
 - Default: `1000`
 
-Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexBase` will become invalid.
+Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexAuto`, `zIndexBase` will be ignored.
 
 ### `zIndex`
 
 - Type: `[String, Number]`
 - Default: `false`
 
-Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexBase` will become invalid.
+Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexAuto`, `zIndexBase` will be ignored.
 
 ### `focusRemain`
 

dist/VueFinalModal.esm.js.map

@@ -57,6 +57,10 @@
         <span>overlayTransition:</span>
         <input v-model="overlayTransition" type="checkbox" />
       </label>
+      <label class="flex items-center space-x-2">
+        <span>zIndexAuto:</span>
+        <input v-model="zIndexAuto" type="checkbox" />
+      </label>
       <label class="flex items-center space-x-2">
         <span>zIndexBase:</span>
         <input
@@ -121,6 +125,7 @@ const initData = () => ({
   preventClick: false,
   transition: true,
   overlayTransition: true,
+  zIndexAuto: true,
   zIndexBase: 1000,
   allowZIndex: false,
   zIndex: 0,
@@ -142,6 +147,7 @@ export default {
         preventClick: this.preventClick,
         transition: this.transition ? 'vfm' : '',
         overlayTransition: this.overlayTransition ? 'vfm' : '',
+        zIndexAuto: this.zIndexAuto,
         zIndexBase: this.zIndexBase,
         ...(this.allowZIndex && { zIndex: this.zIndex }),
         attach: this.attach ? '#attach' : false,

dist/VueFinalModal.umd.js

@@ -6,11 +6,6 @@ function createVfm(options) {
 
   return function() {
     vfm = {
-      isScrollLocked: false,
-      get openedModals() {
-        return this.modals.filter(modal => modal.props.modelValue)
-      },
-      modals: [],
       show(name, ...args) {
         this.toggle(name, true, ...args)
       },
@@ -23,11 +18,12 @@ function createVfm(options) {
         })
       },
       toggle(name, ...args) {
-        const modal = this.modals.find(modal => modal.props.name === name)
+        const modal = this.get(name)
         if (modal !== undefined) {
           modal.toggle(...args)
         }
       },
+      isScrollLocked: false,
       lockScroll() {
         if (this.isScrollLocked) return
         if (options.isMobile) {
@@ -47,7 +43,14 @@ function createVfm(options) {
       },
       lockScrollListener(e) {
         e.preventDefault()
-      }
+      },
+      get(name) {
+        return this.modals.find(modal => modal.props.name === name)
+      },
+      get openedModals() {
+        return this.modals.filter(modal => modal.props.modelValue)
+      },
+      modals: []
     }
     return vfm
   }

dist/VueFinalModal.umd.js.map

@@ -3,7 +3,7 @@
     v-if="ssr || visible"
     v-show="!ssr || visible"
     ref="root"
-    :style="{ zIndex: calculateZIndex }"
+    :style="bindStyle"
     class="vfm vfm--inset"
     :class="[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]"
     @keydown="onEsc"
@@ -47,7 +47,7 @@
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           :style="contentStyle"
         >
-          <slot :params="_params" />
+          <slot :params="params" />
         </div>
       </div>
     </transition>
@@ -95,6 +95,7 @@ export default {
     },
     transition: { type: String, default: 'vfm' },
     overlayTransition: { type: String, default: 'vfm' },
+    zIndexAuto: { type: Boolean, default: true },
     zIndexBase: { type: [String, Number], default: 1000 },
     zIndex: { type: [Boolean, String, Number], default: false },
     focusRetain: { type: Boolean, default: true },
@@ -121,7 +122,7 @@ export const visibility = reactive({
 const overlayTransitionState = ref(null)
 const modalTransitionState = ref(null)
 const _stopEvent = ref(false)
-export const _params = ref({})
+export const params = ref({})
 
 const isComponentReadyToBeDestroyed = computed(() => {
   return (
@@ -131,17 +132,23 @@ const isComponentReadyToBeDestroyed = computed(() => {
 })
 
 export const calculateZIndex = computed(() => {
-  if (typeof props.zIndex === 'boolean') {
-    if (props.attach) {
-      return 'unset'
-    } else {
+  if (props.zIndex === false) {
+    if (props.zIndexAuto) {
       return props.zIndexBase + 2 * (modalStackIndex.value || 0)
+    } else {
+      return false
     }
   } else {
     return props.zIndex
   }
 })
 
+export const bindStyle = computed(() => {
+  return {
+    ...(calculateZIndex.value !== false && { zIndex: calculateZIndex.value })
+  }
+})
+
 watch(
   () => props.modelValue,
   value => {
@@ -332,7 +339,7 @@ export function afterModalLeave() {
   })
   emit('closed', event)
   if (stopEvent) return
-  _params.value = {}
+  params.value = {}
 }
 export function onClickContainer() {
   emit('click-outside', createModalEvent({ type: 'click-outside' }))
@@ -367,10 +374,10 @@ function emitEvent(eventType, value) {
   }
   return false
 }
-function toggle(show, params) {
+function toggle(show, _params) {
   const value = typeof show === 'boolean' ? show : !props.modelValue
   if (value && arguments.length === 2) {
-    _params.value = params
+    params.value = _params
   }
   emit('update:modelValue', value)
 }

docs/content/en/index.md

@@ -39,6 +39,7 @@ export type VueFinalModalComponent = ComponentPublicInstance & {
 export type VusFinalModalProperty = {
   openedModals: VueFinalModalInfo[]
   modals: VueFinalModalInfo[]
+  get(name: string): VueFinalModalInfo | undefined
   show(name: string): void
   hide(name: string): void
   hideAll(): void