feat: added pageHeader component

components/Divider/src/index.svelte

@@ -23,7 +23,7 @@
 	$: contentCls = clsx(`${prefixCls}--content`);
 </script>
 
-<div class={dividerCls} {...$$restProps} {...attrs}>
+<div class={dividerCls} {...$$restProps} {...attrs} data-divider="k-divider">
 	{#if direction === 'horizontal' && $$slots.default}
 		<span class={contentCls}>
 			<slot />

components/PageHeader/__test__/page-header.spec.ts

@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import KPageHeader from '../src';
+
+let host;
+
+const initHost = () => {
+	host = globalThis.document.createElement('div');
+	host.setAttribute('id', 'host');
+	globalThis.document.body.appendChild(host);
+};
+beforeEach(() => {
+	initHost();
+	vi.useFakeTimers();
+});
+afterEach(() => {
+	host.remove();
+	vi.useRealTimers();
+});
+
+describe('Test: KPageHeader', () => {
+	test('props: cls', async () => {
+		const instance = new KPageHeader({
+			target: host,
+			props: {
+				cls: 'k-page-header--test'
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(host!.innerHTML.includes('k-page-header--test')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+});

components/PageHeader/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@ikun-ui/page-header",
+	"version": "0.1.0",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.d.ts",
+	"svelte": "src/index.ts",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"files": [
+		"dist",
+		"package.json"
+	],
+	"scripts": {
+		"build": "npm run build:js && npm run build:svelte",
+		"build:js": "tsc -p . --outDir dist/ --rootDir src/",
+		"build:svelte": "svelte-strip strip src/ dist",
+		"publish:pre": "node ../../scripts/pre-publish.js",
+		"publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
+	},
+	"publishConfig": {
+		"access": "public",
+		"main": "dist/index.js",
+		"module": "dist/index.js",
+		"svelte": "dist/index.js",
+		"types": "dist/index.d.ts"
+	},
+	"dependencies": {
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/divider": "workspace:*",
+		"@ikun-ui/utils": "workspace:*",
+		"baiwusanyu-utils": "^1.0.16",
+		"clsx": "^2.0.0"
+	},
+	"devDependencies": {
+		"@tsconfig/svelte": "^5.0.2",
+		"svelte-strip": "^2.0.0",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.2"
+	}
+}

components/PageHeader/src/index.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import type { KPageHeaderProps } from './types';
+	import { KIcon } from '@ikun-ui/icon';
+	import { KDivider } from '@ikun-ui/divider';
+	import { createEventDispatcher } from 'svelte';
+
+	export let title: KPageHeaderProps['title'] = '';
+	export let icon: KPageHeaderProps['icon'] = 'i-carbon-arrow-left';
+	export let content: KPageHeaderProps['content'] = '';
+	export let cls: KPageHeaderProps['cls'] = undefined;
+	export let attrs: KPageHeaderProps['attrs'] = {};
+
+	const dispatch = createEventDispatcher();
+	function handleClick() {
+		dispatch('back');
+	}
+
+	const prefixCls = getPrefixCls('page-header');
+	$: cnames = clsx(
+		prefixCls,
+		{
+			[`${prefixCls}--has-breadcrumb`]: !!$$slots.breadcrumb,
+			[`${prefixCls}--has-extra`]: !!$$slots.extra,
+			[`${prefixCls}--contentful`]: !!$$slots.default
+		},
+		cls
+	);
+
+	$: breadcrumbCls = clsx(`${prefixCls}__breadcrumb`);
+	$: headCls = clsx(`${prefixCls}__head`);
+	$: leftCls = clsx(`${prefixCls}__left`);
+	$: backCls = clsx(`${prefixCls}__back`);
+	$: iconCls = clsx(`${prefixCls}__icon`);
+	$: titleCls = clsx(`${prefixCls}__title`);
+	$: contentCls = clsx(`${prefixCls}__content`);
+	$: extraCls = clsx(`${prefixCls}--extra`);
+	$: mainCls = clsx(`${prefixCls}--main`);
+</script>
+
+<div class={cnames} {...$$restProps} {...attrs}>
+	{#if $$slots.breadcrumb}
+		<div class={breadcrumbCls}>
+			<slot name="breadcrumb" />
+		</div>
+	{/if}
+	<div class={headCls}>
+		<div class={leftCls}>
+			<div class={backCls} role="button" tabindex="0" aria-hidden="true" on:click={handleClick}>
+				{#if icon || $$slots.icon}
+					<div aria-label={title || 'Back'} class={iconCls}>
+						<slot name="icon">
+							<KIcon width="16px" height="16px" {icon}></KIcon>
+						</slot>
+					</div>
+				{/if}
+				<div class={titleCls}>
+					<slot name="title">{title || 'Back'}</slot>
+				</div>
+			</div>
+			<KDivider direction="vertical" />
+			<div class={contentCls}>
+				<slot name="content">{content}</slot>
+			</div>
+		</div>
+
+		{#if $$slots.extra}
+			<div class={extraCls}>
+				<slot name="extra" />
+			</div>
+		{/if}
+	</div>
+
+	{#if $$slots.default}
+		<div class={mainCls} data-pager-header="main">
+			<slot />
+		</div>
+	{/if}
+</div>

components/PageHeader/src/index.ts

@@ -0,0 +1,4 @@
+/// <reference types="./types" />
+import PageHeader from './index.svelte';
+export { PageHeader as KPageHeader };
+export default PageHeader;

components/PageHeader/src/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+import type { ClassValue } from 'clsx';
+export type KPageHeaderProps = {
+	icon: string;
+	title: string;
+	content: string;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};

components/PageHeader/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+
+	"compilerOptions": {
+		"noImplicitAny": true,
+		"strict": true,
+		"declaration": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
+	"exclude": ["node_modules/*", "**/*.spec.ts"]
+}

components/index.ts

@@ -54,3 +54,4 @@ export * from '@ikun-ui/affix';
 export * from '@ikun-ui/statistic';
 export * from '@ikun-ui/countdown';
 export * from '@ikun-ui/input-number';
+export * from '@ikun-ui/page-header';

package.json

@@ -68,7 +68,7 @@
 		"clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
 		"prepare": "npx simple-git-hooks",
 		"update:deps": "npx taze -w -r major && pnpm run init",
-		"create:new:comp": "node scripts/new-component.js input-number"
+		"create:new:comp": "node scripts/new-component.js page-header"
 	},
 	"peerDependencies": {
 		"baiwusanyu-utils": "^1.0.14",
@@ -136,7 +136,8 @@
 		"@ikun-ui/affix": "workspace:*",
 		"@ikun-ui/statistic": "workspace:*",
 		"@ikun-ui/countdown": "workspace:*",
-		"@ikun-ui/input-number": "workspace:*"
+		"@ikun-ui/input-number": "workspace:*",
+		"@ikun-ui/page-header": "workspace:*"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.1.1",