fix(dialog): resolving #128 - 'relative' option is broken as elements…

… being appended to body
feather-design-system · Aug 15, 2022 · 05e504c · 05e504c
1 parent d3f8c67
commit 05e504c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 14 deletions.
diff --git a/docs/.vuepress/examples/Dialog/Relative.vue b/docs/.vuepress/examples/Dialog/Relative.vue
@@ -6,7 +6,7 @@
       :aria-expanded="visible ? 'true' : 'false'"
       >Open Dialog</FeatherButton
     >
-    <div class="relative">
+    <div class="relative-demo">
       <div style="height: 200%">
         <FeatherDialog v-model="visible" relative :labels="labels">
           <p class="my-content">A message from the Relative Dialog</p>
@@ -39,7 +39,7 @@ export default {
 .my-content {
   width: 25rem;
 }
-.relative {
+.relative-demo {
   width: 37.5rem;
   height: 37.5rem;
   position: relative;

diff --git a/packages/@featherds/dialog/demos/Relative.vue b/packages/@featherds/dialog/demos/Relative.vue
@@ -7,7 +7,7 @@
       >Open Dialog</feather-button
     >
     <p>Dialog Is Open: {{ visible }}</p>
-    <div class="relative">
+    <div class="relative-demo">
       <div style="height: 120vh">
         <feather-dialog v-model="visible" :relative="true" :labels="labels">
           <p class="my-content">Ich bin zufrieden</p>
@@ -48,7 +48,7 @@ export default defineComponent({
 .my-content {
   width: 25rem;
 }
-.relative {
+.relative-demo {
   width: 37.5rem;
   height: 37.5rem;
   position: relative;

diff --git a/packages/@featherds/dialog/src/components/FeatherDialog.vue b/packages/@featherds/dialog/src/components/FeatherDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="body" :disabled="relative">
     <div
       class="feather-dialog feather-styles"
       :class="{ relative: relative }"
@@ -67,15 +67,7 @@ import {
   useHideRelativeOverflow,
 } from "@featherds/composables/modal/HideOverflow";
 import { useLabelProperty } from "@featherds/composables/LabelProperty";
-import {
-  computed,
-  toRef,
-  ref,
-  watch,
-  defineComponent,
-  PropType,
-  Ref,
-} from "vue";
+import { computed, toRef, ref, watch, defineComponent, PropType } from "vue";
 
 const LABELS = {
   title: "REQUIRED",