fix: use absolute position handle KMask (#129)

* fix: use absolute position handle KMask

* test: updated snap

components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KDrawer > slot: content 1`] = `"<div style=\\"top: 0px; left: 0px; width: 100%; height: 100%;\\" class=\\"k-mask--base \\"><div class=\\"k-drawer--base k-drawer--base__dark right-0 \\"><div class=\\"k-drawer--op justify-start\\"><div role=\\"button\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark cursor-pointer \\"><div class=\\"i-carbon-chevron-right k-icon-transition hover:text-main\\" style=\\"width: 24px; height: 24px;\\"></div></div></div> <div class=\\"k-drawer--content\\" style=\\"height: calc(100% - 24px);\\"><div class=\\"w-full fc\\" id=\\"k_drawer_content\\"><h2 class=\\"w-300px text-center !my-2\\">A person's loneliness, never had the lonely mood is wrapped by this dark night.</h2></div></div></div></div>"`;
+exports[`Test: KDrawer > slot: content 1`] = `"<div style=\\"top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;\\" class=\\"k-mask--base \\"><div class=\\"k-drawer--base k-drawer--base__dark right-0 \\"><div class=\\"k-drawer--op justify-start\\"><div role=\\"button\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark cursor-pointer \\"><div class=\\"i-carbon-chevron-right k-icon-transition hover:text-main\\" style=\\"width: 24px; height: 24px;\\"></div></div></div> <div class=\\"k-drawer--content\\" style=\\"height: calc(100% - 24px);\\"><div class=\\"w-full fc\\" id=\\"k_drawer_content\\"><h2 class=\\"w-300px text-center !my-2\\">A person's loneliness, never had the lonely mood is wrapped by this dark night.</h2></div></div></div></div>"`;

components/Mask/src/index.svelte

@@ -26,15 +26,18 @@
 		if (containerDomRect) {
 			drawerWidth = containerDomRect.width ? `${containerDomRect.width}px` : '100%';
 			drawerHeight = containerDomRect.height ? `${containerDomRect.height}px` : '100%';
-			drawerTop = containerDomRect.top;
-			drawerLeft = containerDomRect.left;
+			// drawerTop = containerDomRect.top;
+			// drawerLeft = containerDomRect.left;
 		}
 	};
 
 	async function setParent() {
 		if (!target && value) {
 			await tick();
 			const parentEl = getParentEle()
+			if(parentEl === document.body){
+				drawerRef && (drawerRef.style.position = 'fixed');
+			}
 			parentEl.style.overflow = 'hidden'
 			parentEl.style.position = 'relative'
 			updatedPosition();
@@ -43,6 +46,9 @@
 
 		if (target && value) {
 			await tick();
+			if(target === document.body){
+				drawerRef && (drawerRef.style.position = 'fixed');
+			}
 			drawerRef && (target.style.overflow = 'hidden');
 			drawerRef && (target.style.position = 'relative');
 			updatedPosition();

preset/src/shortcuts/mask.ts

@@ -1,4 +1,4 @@
 export const maskShortcuts: Record<string, string> = {
 	// mask
-	'k-mask--base': 'ikun:50:bg-ikun-black z-999 fixed'
+	'k-mask--base': 'ikun:50:bg-ikun-black z-999 absolute'
 };