feat: support prop zIndexAuto

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

@@ -446,19 +446,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

@@ -2,7 +2,7 @@
   <div
     v-if="ssr || visible"
     v-show="!ssr || visible"
-    :style="{ zIndex: calculateZIndex }"
+    :style="bindStyle"
     class="vfm vfm--inset"
     :class="[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]"
     @keydown="onEsc"
@@ -96,6 +96,7 @@ export default {
     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 },
@@ -124,15 +125,20 @@ export default {
       )
     },
     calculateZIndex() {
-      if (typeof this.zIndex === 'boolean') {
-        if (this.attach) {
-          return 'unset'
-        } else {
+      if (this.zIndex === false) {
+        if (this.zIndexAuto) {
           return this.zIndexBase + 2 * (this.modalStackIndex || 0)
+        } else {
+          return false
         }
       } else {
         return this.zIndex
       }
+    },
+    bindStyle() {
+      return {
+        ...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })
+      }
     }
   },
   watch: {