Merge pull request #1912 from shentao/v3-3-1

release v3.3.1

Author: mattelen

dist/vue-multiselect.common.js

@@ -277,7 +277,7 @@
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    z-index: 9999;
+    z-index: 50;
     -webkit-overflow-scrolling: touch;
   }
 

dist/vue-multiselect.common.js.map

@@ -277,7 +277,7 @@
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    z-index: 9999;
+    z-index: 50;
     -webkit-overflow-scrolling: touch;
   }
 

dist/vue-multiselect.css

@@ -1073,6 +1073,15 @@ var script = {
     required: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Uses Vue Teleport's feature. Teleports the open dropdown to the bottom of the body element
+     * @default false
+     * @type {Boolean}
+     */
+    useTeleport: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -1165,18 +1174,23 @@ var script = {
   watch: {
     isOpen (val) {
       if (val) {
-        this.ready = false;
-        this.$nextTick(() => {
-          const rect = this.$el.getBoundingClientRect();
-          this.dropdownStyles = {
-            position: 'absolute',
-            top: `${rect.bottom + window.scrollY}px`,
-            left: `${rect.left + window.scrollX}px`,
-            width: `${rect.width}px`,
-            zIndex: 9999
-          };
+        if (this.useTeleport) {
+          this.ready = false;
+          // This helps with the positioning of the open dropdown when teleport is being used
+          this.$nextTick(() => {
+            const rect = this.$el.getBoundingClientRect();
+            this.dropdownStyles = {
+              position: 'absolute',
+              top: `${rect.bottom + window.scrollY}px`,
+              left: `${rect.left + window.scrollX}px`,
+              width: `${rect.width}px`,
+              zIndex: 9999
+            };
+            this.ready = true;
+          });
+        } else {
           this.ready = true;
-        });
+        }
       }
     }
   }
@@ -1332,7 +1346,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 32 /* NEED_HYDRATION */))
         : createCommentVNode("v-if", true)
     ], 512 /* NEED_PATCH */),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
+    (openBlock(), createBlock(Teleport, {
+      to: "body",
+      disabled: !$props.useTeleport
+    }, [
       createVNode(Transition, { name: "multiselect" }, {
         default: withCtx(() => [
           (_ctx.isOpen && $data.ready)
@@ -1436,7 +1453,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 3 /* FORWARDED */
       })
-    ]))
+    ], 8 /* PROPS */, ["disabled"]))
   ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1))
 }
 

dist/vue-multiselect.esm.css

@@ -1074,6 +1074,15 @@ var VueMultiselect = (function (exports, vue) {
       required: {
         type: Boolean,
         default: false
+      },
+      /**
+       * Uses Vue Teleport's feature. Teleports the open dropdown to the bottom of the body element
+       * @default false
+       * @type {Boolean}
+       */
+      useTeleport: {
+        type: Boolean,
+        default: false
       }
     },
     data () {
@@ -1166,18 +1175,23 @@ var VueMultiselect = (function (exports, vue) {
     watch: {
       isOpen (val) {
         if (val) {
-          this.ready = false;
-          this.$nextTick(() => {
-            const rect = this.$el.getBoundingClientRect();
-            this.dropdownStyles = {
-              position: 'absolute',
-              top: `${rect.bottom + window.scrollY}px`,
-              left: `${rect.left + window.scrollX}px`,
-              width: `${rect.width}px`,
-              zIndex: 9999
-            };
+          if (this.useTeleport) {
+            this.ready = false;
+            // This helps with the positioning of the open dropdown when teleport is being used
+            this.$nextTick(() => {
+              const rect = this.$el.getBoundingClientRect();
+              this.dropdownStyles = {
+                position: 'absolute',
+                top: `${rect.bottom + window.scrollY}px`,
+                left: `${rect.left + window.scrollX}px`,
+                width: `${rect.width}px`,
+                zIndex: 9999
+              };
+              this.ready = true;
+            });
+          } else {
             this.ready = true;
-          });
+          }
         }
       }
     }
@@ -1333,7 +1347,10 @@ var VueMultiselect = (function (exports, vue) {
             ], 32 /* NEED_HYDRATION */))
           : vue.createCommentVNode("v-if", true)
       ], 512 /* NEED_PATCH */),
-      (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+      (vue.openBlock(), vue.createBlock(vue.Teleport, {
+        to: "body",
+        disabled: !$props.useTeleport
+      }, [
         vue.createVNode(vue.Transition, { name: "multiselect" }, {
           default: vue.withCtx(() => [
             (_ctx.isOpen && $data.ready)
@@ -1437,7 +1454,7 @@ var VueMultiselect = (function (exports, vue) {
           ]),
           _: 3 /* FORWARDED */
         })
-      ]))
+      ], 8 /* PROPS */, ["disabled"]))
     ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1))
   }