From 8c310f17c25b439cdcf60e06c2df96bccf4e8b35 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 8 Feb 2021 20:22:22 +0100
Subject: [PATCH] lesson 135: move the teleport tag to the BaseDialog

---
 .../src/components/UI/BaseDialog.vue          | 30 ++++++++++---------
 .../src/components/resources/AddResource.vue  | 28 ++++++++---------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue b/2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
index 687e6dc..ee186d3 100644
--- a/2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue	
+++ b/2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue	
@@ -1,18 +1,20 @@
 <template>
-  <div @click="$emit('close')"></div>
-  <dialog open>
-    <header>
-      <slot name="header">
-        <h2>{{ title }}</h2>
-      </slot>
-    </header>
-    <section><slot name="default"></slot></section>
-    <menu
-      ><slot name="actions">
-        <base-button @click="$emit('close')">Close</base-button>
-      </slot></menu
-    >
-  </dialog>
+  <teleport to="body">
+    <div @click="$emit('close')"></div>
+    <dialog open>
+      <header>
+        <slot name="header">
+          <h2>{{ title }}</h2>
+        </slot>
+      </header>
+      <section><slot name="default"></slot></section>
+      <menu
+        ><slot name="actions">
+          <base-button @click="$emit('close')">Close</base-button>
+        </slot></menu
+      >
+    </dialog>
+  </teleport>
 </template>
 <script>
 export default {
diff --git a/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue b/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue
index 2556476..dded469 100644
--- a/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue	
+++ b/2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue	
@@ -23,21 +23,19 @@
       </div>
     </form>
   </base-card>
-  <teleport to="body">
-    <base-dialog
-      v-if="inputIsInvalid"
-      title="Input may not be empty"
-      @close="resetErrorDialog"
-    >
-      <template #default>
-        <p>Unfortunately some inputs seem to be empty.</p>
-        <p>Please correct this and try again.</p>
-      </template>
-      <template #actions>
-        <base-button @click="resetErrorDialog">Ok</base-button>
-      </template>
-    </base-dialog>
-  </teleport>
+  <base-dialog
+    v-if="inputIsInvalid"
+    title="Input may not be empty"
+    @close="resetErrorDialog"
+  >
+    <template #default>
+      <p>Unfortunately some inputs seem to be empty.</p>
+      <p>Please correct this and try again.</p>
+    </template>
+    <template #actions>
+      <base-button @click="resetErrorDialog">Ok</base-button>
+    </template>
+  </base-dialog>
 </template>
 
 <script>