1.0.0-beta1

Author: unknown

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Vue
 
-Version: FREE 1.0.0-alpha4
+Version: FREE 1.0.0-beta1
 
 Documentation:
 https://mdbootstrap.com/docs/b5/vue/

css/mdb.min.css

@@ -1,6 +1,6 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.0.0-alpha4",
+  "version": "1.0.0-beta1",
   "main": "js/mdb.umd.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",
   "author": "MDBootstrap",

css/mdb.min.css.map

@@ -86,8 +86,10 @@ export default {
     // controls if DropdownMenu has been mounted into DOM and its element
     // can be targeted by the Popper setup function
     const isMenuMounted = ref(false);
-    const setMenuMountedState = boolean => {
+    const dropdownMenu = ref(null);
+    const setMenuMountedState = (boolean, menuRef) => {
       isMenuMounted.value = boolean;
+      dropdownMenu.value = menuRef;
     };
     provide("setMenuMountedState", setMenuMountedState);
 
@@ -124,6 +126,7 @@ export default {
     });
 
     provide("isPopperActive", isPopperActive);
+    provide("externalTarget", props.target);
 
     // ------------------- handleEscAndOutsideClick -------------------
     // mimics toggling modelValue when user click outside the toggle button
@@ -147,7 +150,7 @@ export default {
       triggerEl.value = props.target
         ? document.querySelector(props.target)
         : root.value.querySelector("[data-trigger]");
-      popperEl.value = root.value.querySelector("[data-popper]");
+      popperEl.value = dropdownMenu.value;
 
       if (typeof props.align === "string") {
         menuAlignClasses.value = `dropdown-menu-${props.align}`;
@@ -174,7 +177,9 @@ export default {
         modifiers: {
           offset: {
             offset: props.offset || "0"
-          }
+          },
+          preventOverflow: { enabled: true },
+          flip: { enabled: true }
         }
       };
 

js/mdb.common.js

@@ -1,5 +1,5 @@
 <template>
-  <transition>
+  <transition v-if="!shouldTeleport">
     <component
       v-if="isMounted"
       :is="tag"
@@ -12,10 +12,25 @@
       <slot />
     </component>
   </transition>
+  <teleport v-else :to="externalTarget">
+    <transition>
+      <component
+        v-if="isMounted"
+        :is="tag"
+        :class="className"
+        :style="staticStyle"
+        v-bind="attrs"
+        :data-popper="externalTarget"
+        ref="root"
+      >
+        <slot />
+      </component>
+    </transition>
+  </teleport>
 </template>
 
 <script>
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, onMounted, ref, watch } from "vue";
 import { on, off } from "../../utils/MDBEventHandlers.js";
 
 export default {
@@ -86,8 +101,8 @@ export default {
       cur => {
         if (cur) {
           setTimeout(() => {
-            setMenuMountedState(true);
-          }, 10);
+            setMenuMountedState(true, root.value);
+          }, 100);
         } else if (!cur && isPopperActive) {
           setInactive();
 
@@ -123,6 +138,18 @@ export default {
       }
     });
 
+    const externalTarget = inject("externalTarget", false);
+    const shouldTeleport = ref(false);
+
+    onMounted(() => {
+      if (externalTarget) {
+        const target = document.body.querySelector(externalTarget);
+        if (target) {
+          shouldTeleport.value = true;
+        }
+      }
+    });
+
     // ------------------- isPopperActive -------------------
     // controls if DropdownMenu is visible for user or not
     // controls show class and animation
@@ -205,6 +232,8 @@ export default {
       showClass,
       className,
       isMounted,
+      shouldTeleport,
+      externalTarget,
       root,
       attrs,
       props