feat: Add custom header in KDrawer (#111)

* feat: Add custom header in KDrawer * feat: Add custom header in KDrawer * fix: rollback * fix: update test snap --------- Co-authored-by: Jobs <[email protected]>
ikun-svelte · Aug 25, 2023 · 7e828b5 · 7e828b5
1 parent 35836be
commit 7e828b5
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 19 deletions.
diff --git a/components/Drawer/__test__/drawer.spec.ts b/components/Drawer/__test__/drawer.spec.ts
@@ -73,7 +73,7 @@ describe('Test: KDrawer', () => {
 		expect(mockFn).toBeCalled();
 	});
 
-	test('slot: content', async () => {
+  test('slot: content', async () => {
 		const instance = new KDrawerContent({
 			target: host
 		});
@@ -82,4 +82,16 @@ describe('Test: KDrawer', () => {
 		expect(document.getElementById('k_drawer_content'));
 		expect(host.innerHTML).matchSnapshot();
 	});
+
+	test('slot: header', async () => {
+		const instance = new KDrawer({
+			target: host,
+			props: {
+				value: true
+			}
+		});
+		await tick();
+		expect(instance).toBeTruthy();
+		expect(host.innerHTML.includes('k-drawer--op')).toBeTruthy();
+	});
 });
diff --git a/components/Drawer/src/index.svelte b/components/Drawer/src/index.svelte
@@ -7,34 +7,41 @@
 	export let placement: 'right' | 'left' = 'right';
 	export let value = false;
 	export let cls = '';
-	export let attrs = {}
+	export let attrs = {};
+	export let header = true;
+
 	const dispatch = createEventDispatcher();
+
 	const toggleClose = () => {
 		dispatch('close');
 	};
 
-	$: isRight = (placement === 'right')
+	$: isRight = placement === 'right';
 </script>
+
 <KClientOnly>
 	<KMask target={document.body} {value}>
-		<div class="k-drawer--base k-drawer--base__dark {isRight ? 'right-0' : 'left-0'} {cls}"
-			 {...attrs}
-			 out:fly={{ duration: 250, x: isRight ? 200 : -200 }}
-			 in:fly={{ duration: 250, x: isRight ? 200 : -200 }}>
-			<div class="k-drawer--op {isRight ? 'justify-start' : 'justify-end'}">
-				<KIcon
-						icon={isRight ? 'i-carbon-chevron-right' : 'i-carbon-chevron-left'}
-						color="hover:text-main"
-						on:click={toggleClose}
-						btn
-				/>
-			</div>
-			<div
-					class="k-drawer--content"
-					style="height: calc(100% - 24px)">
+		<div
+			class="k-drawer--base k-drawer--base__dark {isRight ? 'right-0' : 'left-0'} {cls}"
+			{...attrs}
+			out:fly={{ duration: 250, x: isRight ? 200 : -200 }}
+			in:fly={{ duration: 250, x: isRight ? 200 : -200 }}
+		>
+			{#if header}
+				<slot name="header">
+					<div class="k-drawer--op {isRight ? 'justify-start' : 'justify-end'}">
+						<KIcon
+							icon={isRight ? 'i-carbon-chevron-right' : 'i-carbon-chevron-left'}
+							color="hover:text-main"
+							on:click={toggleClose}
+							btn
+						/>
+					</div>
+				</slot>
+			{/if}
+			<div class="k-drawer--content" style="height: calc(100% - 24px)">
 				<slot />
 			</div>
 		</div>
 	</KMask>
 </KClientOnly>
-
diff --git a/docs/components/KDrawer.md b/docs/components/KDrawer.md
@@ -31,6 +31,12 @@ Open the `drawer` by setting the `value` attribute
 
 <demo src="../../../../example/drawer/basic.svelte" github="Drawer"></demo>
 
+## Custom header
+
+Implement custom header through slots
+
+<demo src="../../../../example/drawer/custom.svelte" github="Drawer"></demo>
+
 ## Left or right
 
 You can choose to open from the `right` or `left`

diff --git a/docs/example/drawer/custom.svelte b/docs/example/drawer/custom.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { KIcon } from '@ikun-ui/icon';
+	import { KDrawer } from '@ikun-ui/drawer';
+	import { KButton } from '@ikun-ui/button';
+	let show = false;
+	const open = () => (show = true);
+	const close = () => (show = false);
+</script>
+
+<KButton on:click={open}>open the drawer(custom)</KButton>
+<KDrawer footer value={show} target={document.body} on:close={close}>
+	<span class="flex" slot="header">
+		<div>
+			<KIcon
+				icon="i-carbon-close"
+				on:click={() => (show = false)}
+				btn
+				color="k-drawer--header--icon__hover"
+			/>
+		</div>
+		<div class="pl-12px">真正的ikun：提高爱豆知名度</div>
+	</span>
+	<div class="w-full fc">
+		<h2 class="w-300px">
+			作为一名ikun真的已经麻木了 ，解释没有用， 你去反驳得到的只会是一堆表情包， 根本没人会站在你这边。这个世界充满恶意，坤坤到底怎么得罪你们了，为什么要这样对侍他，希望坤坤早点离开这个充满恶意的世界。热爱无罪，不爱也请不要诋毁！
+		</h2>
+	</div>
+</KDrawer>
diff --git a/preset/src/shortcuts/drawer.ts b/preset/src/shortcuts/drawer.ts
@@ -3,6 +3,9 @@ export const drawerShortcuts: Record<string, string> = {
 	'k-drawer--base': 'bg-ikun-white fixed z-1000 top-0 min-w-1/3 h-full p2',
 	'k-drawer--op': 'w-full fi',
 	'k-drawer--content': 'overflow-y-auto mt-2',
+	'k-drawer--header--icon__hover': 'hover:text-ikun-main',
+	'k-drawer--footer': 'p2 fi',
+	'k-drawer--footer--btn': 'mx-2',
 	// dark
 	'k-drawer--base__dark': 'dark:bg-ikun-dark-300'
 };