feat: add closeOnClickMask behavior to close drawer (#454)

* feat: add closeOnClickMask behavior to close drawer * feat: change default value of closeOnClickMask * docs: updated KDrawer document
ikun-svelte · Nov 18, 2024 · 547ea4b · 547ea4b
1 parent 106d096
commit 547ea4b
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 34 deletions.
diff --git a/components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap b/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 class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-drawer--base k-drawer--base__dark right-0"><div class="k-drawer--op justify-start"><span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-chevron-right hover:text-main" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></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 role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; position: fixed;"><div class="k-drawer--base k-drawer--base__dark right-0" role="dialog" aria-modal="true"><div class="k-drawer--op justify-start"><span class="k-icon--base k-icon--role-button k-icon-transition i-carbon-chevron-right hover:text-main" role="button" aria-hidden="true" style="width: 24px; height: 24px;"></span></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>"`;
diff --git a/components/Drawer/src/index.svelte b/components/Drawer/src/index.svelte
@@ -12,6 +12,7 @@
 	export let cls: KDrawerProps['cls'] = undefined;
 	export let attrs: KDrawerProps['attrs'] = {};
 	export let header: KDrawerProps['header'] = true;
+	export let closeOnClickMask: KDrawerProps['closeOnClickMask'] = false;
 
 	$: cnames = clsx(cls);
 	$: maskCls = clsx('k-drawer--base k-drawer--base__dark', isRight ? 'right-0' : 'left-0', cnames);
@@ -23,14 +24,22 @@
 		dispatch('close');
 	};
 
+	const onClickMask = () => {
+		if (closeOnClickMask) toggleClose();
+	};
+
 	$: isRight = placement === 'right';
 </script>
 
 <KClientOnly>
-	<KMask target={document.body} {value}>
+	<KMask {onClickMask} target={document.body} {value}>
+		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 		<div
 			class={maskCls}
 			{...attrs}
+			on:click|stopPropagation
+			role="dialog"
+			aria-modal="true"
 			out:fly={{ duration: 250, x: isRight ? 200 : -200 }}
 			in:fly={{ duration: 250, x: isRight ? 200 : -200 }}
 		>

diff --git a/components/Drawer/src/types.d.ts b/components/Drawer/src/types.d.ts
@@ -7,4 +7,5 @@ export type KDrawerProps = {
 	header: boolean;
 	cls: ClassValue;
 	attrs: Record<string, string>;
+	closeOnClickMask: boolean;
 };
diff --git a/components/Image/__test__/__snapshots__/image.spec.ts.snap b/components/Image/__test__/__snapshots__/image.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`Test: KImage > props: cls 1`] = `"<div class="k-image k-image--test"><i
 exports[`Test: KImage > props: fit 1`] = `"<div class="demo-image svelte-1ep430a"><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">fill</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: fill;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">contain</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: contain;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">cover</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: cover;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">none</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: none;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div><div class="block svelte-1ep430a"><span class="demonstration svelte-1ep430a">scale-down</span> <div class="k-image"><img alt="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" aria-hidden="true" style="width: 100px; height: 100px; object-fit: scale-down;" src="https://pic3.zhimg.com/80/v2-f0f6615f256bdd3aeb77ec0637bab192_1440w.webp" class="k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> </div> </div></div>"`;
 
 exports[`Test: KImage > props: previewSrcList 1`] = `
-"<div class="k-image"><img alt="" aria-hidden="true" src="" class="k-image__inner k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> <div class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; animation: __svelte_665066525_0 300ms linear 0ms 1 both;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="previewSrcList" alt="previewSrcList" class="k-image-view--body__img" style="
+"<div class="k-image"><img alt="" aria-hidden="true" src="" class="k-image__inner k-image__inner k-image__loading"> <div class="k-image__wrapper"><div class="k-image__placeholder"></div></div> <div role="presentation" class="k-mask--base" style="top: 0px; left: 0px; width: 100%; height: 100%; animation: __svelte_665066525_0 300ms linear 0ms 1 both;"><div class="k-image-view"><div class="k-image-view--close" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-close" role="" aria-hidden="true" style="width: 26px; height: 26px;"></span></div> <div class="k-image-view--body"><img src="previewSrcList" alt="previewSrcList" class="k-image-view--body__img" style="
 		transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(0deg);
 		transition: transform 0.3s ease 0s;
 	"></div> <div class="k-image-view--footer__wrapper"><div class="k-image-view--footer"> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-vertical k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-arrows-horizontal k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-counterclockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-rotate-clockwise k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-out k-image-view--footer__icon__disabled" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> <span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-zoom-in k-image-view--footer__icon" role="" aria-hidden="true" style="width: 20px; height: 20px;"></span> </div></div></div></div></div>"