Merge pull request #637 from 3YOURMIND/636-kt-modal-not-attached-to-body

fix(#636): Attach KtModal to body
3YOURMIND · Jun 28, 2022 · df68f75 · df68f75
2 parents c883866 + e061b1c
commit df68f75
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 16 deletions.
diff --git a/packages/documentation/pages/usage/components/modal.vue b/packages/documentation/pages/usage/components/modal.vue
@@ -36,7 +36,7 @@
 		<KtButton label="Open Modal" @click="showModal = true" />
 
 		<KtModal
-			v-if="showModal"
+			:isOpen="showModal"
 			:preventCloseOutside="settings.preventCloseOutside"
 			:size="settings.size"
 			@close="showModal = false"

diff --git a/packages/kotti-ui/source/kotti-modal/KtModal.vue b/packages/kotti-ui/source/kotti-modal/KtModal.vue
@@ -1,6 +1,7 @@
 <template>
-	<transition mode="out-in" name="kt-modal">
-		<div class="kt-modal__mask" @click.self="closeModal">
+	<div>
+		<div ref="targetRef" />
+		<div ref="contentRef" class="kt-modal__mask" @click.self="closeModal">
 			<slot name="container">
 				<div :class="modalClass">
 					<div v-if="hasHeader" class="kt-modal__header">
@@ -15,11 +16,13 @@
 				</div>
 			</slot>
 		</div>
-	</transition>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
+import { useTippy } from '@3yourmind/vue-use-tippy'
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import { Instance } from 'tippy.js'
 
 import { makeProps } from '../make-props'
 
@@ -29,17 +32,69 @@ export default defineComponent<KottiModal.PropsInternal>({
 	name: 'KtModal',
 	props: makeProps(KottiModal.propsSchema),
 	setup(props, { emit, slots }) {
+		const contentRef = ref<HTMLElement | null>(null)
+		const targetRef = ref<HTMLElement | null>(null)
+		const tippyInstanceRef = ref<Instance | null>(null)
+
+		useTippy(
+			targetRef,
+			computed(() => ({
+				appendTo: () => document.body,
+				hideOnClick: false,
+				interactive: true,
+				onCreate(instance) {
+					tippyInstanceRef.value = instance
+				},
+				offset: [0, 0],
+				popperOptions: {
+					modifiers: [
+						{
+							name: 'computeStyles',
+							options: {
+								adaptive: false,
+								gpuAcceleration: false,
+							},
+						},
+					],
+				},
+				render() {
+					const popper = document.createElement('div')
+
+					if (contentRef.value === null)
+						throw new Error('KtModal: Unbound contentRef')
+
+					popper.appendChild(contentRef.value)
+
+					return { popper }
+				},
+				trigger: 'manual',
+			})),
+		)
+
+		watch(
+			() => props.isOpen,
+			(value) => {
+				if (tippyInstanceRef.value === null)
+					throw new Error('KtModal: Unbound tippyInstanceRef')
+
+				if (value) tippyInstanceRef.value.show()
+				else tippyInstanceRef.value.unmount()
+			},
+		)
+
 		return {
 			closeModal: () => {
 				if (!props.preventCloseOutside) emit('close')
 			},
+			contentRef,
 			hasBody: computed(() => Boolean(slots.body)),
 			hasFooter: computed(() => Boolean(slots.footer)),
 			hasHeader: computed(() => Boolean(slots.header)),
 			modalClass: computed(() => [
 				'kt-modal__container',
 				`kt-modal--is-size-${props.size}`,
 			]),
+			targetRef,
 		}
 	},
 })
@@ -116,16 +171,5 @@ export default defineComponent<KottiModal.PropsInternal>({
 		flex: 0 0 auto;
 		text-align: right;
 	}
-
-	// transitions
-
-	&-enter,
-	&-leave-active {
-		opacity: 0;
-
-		.kt-modal__container {
-			transform: scale(1.1);
-		}
-	}
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-modal/types.ts b/packages/kotti-ui/source/kotti-modal/types.ts
@@ -9,6 +9,7 @@ export namespace KottiModal {
 	}
 
 	export const propsSchema = z.object({
+		isOpen: z.boolean().default(false),
 		preventCloseOutside: z.boolean().default(false),
 		size: z.nativeEnum(Size).default(Size.MEDIUM),
 	})