fix: Fixes babel config and removes only usage of async

ChristianKienle · ChristianKienle · commit 44d9790f9dd3 · 2019-05-03T14:58:15.000+02:00
diff --git a/README.md b/README.md
@@ -42,20 +42,18 @@ Paste the following snippet in your `<head>`-tag:
 Then you can use Fundamental Vue like this:
 
 ```html
-  <body>
-    <div id="app" />
-    <script>
-      new Vue({
-        el: '#app',
-        template: `
-          <FdPopover v-fd-margin:large>
-            <h1 v-fd-margin:large slot="body">
-              🚀 Hello Fundamental Vue 🚀
-            </h1>
-          </FdPopover>`
-      });
-    </script>
-  </body>
+<div id="app">
+  <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
+    <h1 v-fd-margin:large>
+      🚀 Hello Fundamental Vue 🚀
+    </h1>
+    <template #control="{toggle}">
+      <fd-button @click="toggle">Show Popover</fd-button>
+    </template>
+  </fd-popover>
+</div>
+
+<script>new Vue({ el: '#app' })</script>
 ```
 
 When using *Fundamental Vue* via a `<script>`-tag you don't have to install it manually by calling `Vue.use(FundamentalVue)`. This is done for you automatically. You can disable the automatic installation by setting `window.__FD_AUTO_INSTALL_DISABLED_KEY__` to true early on.
diff --git a/babel.config.js b/babel.config.js
@@ -5,9 +5,10 @@ const mode =
 const appPresets = ["@vue/app"];
 
 if(process.env.VUE_CLI_BUILD_TARGET === "app") {
-  return {
+  module.exports = {
     presets: ["@vue/app"]
-  }
+  };
+  return;
 };
 
 const uiPresets = [
diff --git a/public/auto-install-demo.html b/public/auto-install-demo.html
@@ -10,7 +10,7 @@
       href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
     />
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-    <script src="./FundamentalVue.umd.js"></script>
+    <script src="./../dist/FundamentalVue.umd.js"></script>
 
     <title>Fundamental Vue</title>
   </head>
@@ -26,8 +26,11 @@
       new Vue({
         el: '#app',
         template: `
-          <FdPopover v-fd-margin:large>
-            <h1 v-fd-margin:large slot="body">
+          <FdPopover with-arrow v-fd-margin:large placement="bottom-start">
+            <template #control="{toggle}">
+              <FdButton @click="toggle">Show Popover</FdButton>
+            </template>
+            <h1 v-fd-margin:large>
               🚀 Hello Fundamental Vue 🚀
             </h1>
           </FdPopover>`
diff --git a/public/auto-install-disabled-demo.html b/public/auto-install-disabled-demo.html
@@ -10,13 +10,11 @@
       href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
     />
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
     <script>
       // This is how you disable auto install if you don't like it for any reason.
       window.__FD_AUTO_INSTALL_DISABLED_KEY__ = true;
-    </script>
-
-    <script src="./FundamentalVue.umd.js"></script>
+      </script>
+    <script src="./../dist/FundamentalVue.umd.js"></script>
 
     <title>Fundamental Vue</title>
   </head>
@@ -32,8 +30,11 @@
       new Vue({
         el: '#app',
         template: `
-          <FdPopover v-fd-margin:large>
-            <h1 v-fd-margin:large slot="body">
+          <FdPopover with-arrow v-fd-margin:large placement="bottom-start">
+            <template #control="{toggle}">
+              <FdButton @click="toggle">Show Popover</FdButton>
+            </template>
+            <h1 v-fd-margin:large>
               🚀 Hello Fundamental Vue 🚀
             </h1>
           </FdPopover>`
diff --git a/src/components/Popper/Popper.vue b/src/components/Popper/Popper.vue
@@ -217,8 +217,7 @@ export default {
   beforeDestroy() {
     document.querySelector("body").removeChild(this.elements().body);
   },
-  async mounted() {
-    await this.$nextTick();
+  mounted() {
     const popoverBody = this.elements().body;
     popoverBody.parentNode.removeChild(popoverBody);
     const body = document.querySelector("body");
