Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add closeOnClickMask behavior to close drawer #454

Merged
merged 4 commits into from
Nov 18, 2024
+72 −34
Merged

feat: add closeOnClickMask behavior to close drawer #454

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9f679d
feat: add closeOnClickMask behavior to close drawer
Onion-L Nov 13, 2024
ecccd16
Merge branch 'ikun-svelte:main' into xl/feat/drawer
Onion-L Nov 13, 2024
97e82a3
feat: change default value of closeOnClickMask
Onion-L Nov 15, 2024
c9747e0
docs: updated KDrawer document
Onion-L Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Drawer/__test__/__snapshots__/drawer.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>"`;
11 changes: 10 additions & 1 deletion components/Drawer/src/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'] = true;

$: cnames = clsx(cls);
$: maskCls = clsx('k-drawer--base k-drawer--base__dark', isRight ? 'right-0' : 'left-0', cnames);
Expand All @@ -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 }}
>
Expand Down
1 change: 1 addition & 0 deletions components/Drawer/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export type KDrawerProps = {
header: boolean;
cls: ClassValue;
attrs: Record<string, string>;
closeOnClickMask: boolean;
};
2 changes: 1 addition & 1 deletion components/Image/__test__/__snapshots__/image.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand Down
Loading
Loading