feat: added KMenu component

components/Menu/__test__/menu.spec.ts

@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import KMenu 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: KMenu', () => {
+	test('props: cls', async () => {
+		const instance = new KMenu({
+			target: host,
+			props: {
+				cls: 'k-menu--test'
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(host!.innerHTML.includes('k-menu--test')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+});

components/Menu/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@ikun-ui/menu",
+	"version": "0.2.6",
+	"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": "svelte-package -i src",
+		"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/utils": "workspace:*",
+		"@ikun-ui/divider": "workspace:*",
+		"@ikun-ui/popover": "workspace:*",
+		"baiwusanyu-utils": "^1.0.18",
+		"esm-env": "^1.0.0",
+		"clsx": "^2.0.0",
+		"svelte": "^4.2.7"
+	},
+	"devDependencies": {
+		"@sveltejs/package": "^2.3.1",
+		"@tsconfig/svelte": "^5.0.4",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.4"
+	}
+}

components/Menu/src/index.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { menuKey, getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import type { ClickEvtPa, KMenuProps, SelectEvtPa } from './types';
+	import { createEventDispatcher, getContext, setContext } from 'svelte';
+	import { createKMenu, transitionIn, transitionOut } from './utils';
+	export let triggerSubMenuAction: KMenuProps['triggerSubMenuAction'] = 'hover';
+	export let subMenuCloseDelay: KMenuProps['subMenuCloseDelay'] = 100;
+	export let subMenuOpenDelay: KMenuProps['subMenuOpenDelay'] = 0;
+	export let inlineIndent: KMenuProps['inlineIndent'] = 24;
+	export let expandIcon: KMenuProps['expandIcon'] = '';
+	export let mode: KMenuProps['mode'] = 'vertical';
+	export let cls: KMenuProps['cls'] = undefined;
+	export let attrs: KMenuProps['attrs'] = {};
+	export let selectedUids: KMenuProps['selectedUids'] = [];
+	export let openUids: KMenuProps['openUids'] = [];
+	export let show: KMenuProps['show'] = true;
+	export let multiple: KMenuProps['multiple'] = true;
+	export let selectable: KMenuProps['selectable'] = true;
+	export let ctxKey: KMenuProps['ctxKey'] = '';
+	const dispatch = createEventDispatcher();
+	function onOpenChange(openUids: string[]) {
+		dispatch('openChange', openUids);
+	}
+
+	function onSelect(data: SelectEvtPa) {
+		dispatch('select', data);
+	}
+
+	function onClick(data: ClickEvtPa) {
+		dispatch('click', data);
+	}
+
+	function onDeSelect(data: SelectEvtPa) {
+		dispatch('deSelect', data);
+	}
+
+	let bdBg = 'transparent';
+	function removeBorderStyleBg() {
+		bdBg = '';
+	}
+
+	let menuRef: null | HTMLElement = null;
+	function getParentDom() {
+		if (menuRef) {
+			return menuRef.parentElement;
+		}
+	}
+	/**
+	 * @internal
+	 */
+	const menuInst = createKMenu(
+		{
+			triggerSubMenuAction,
+			subMenuCloseDelay,
+			subMenuOpenDelay,
+			expandIcon,
+			mode,
+			inlineIndent,
+			openUids,
+			selectedUids,
+			multiple,
+			selectable,
+			attrs,
+			ctxKey
+		},
+		onOpenChange,
+		onSelect,
+		onClick,
+		onDeSelect,
+		removeBorderStyleBg,
+		getParentDom
+	);
+	if (!getContext(ctxKey || menuKey)) {
+		setContext(ctxKey || menuKey, menuInst);
+	}
+	$: {
+		menuInst.__propHandleEvtMap.forEach((cb) => {
+			cb({
+				triggerSubMenuAction,
+				subMenuCloseDelay,
+				subMenuOpenDelay,
+				expandIcon,
+				mode,
+				inlineIndent,
+				openUids,
+				multiple,
+				selectedUids,
+				selectable,
+				attrs,
+				ctxKey
+			});
+		});
+	}
+
+	const prefixCls = getPrefixCls('menu');
+	$: cnames = clsx(prefixCls, `${prefixCls}-${mode}`, cls);
+</script>
+
+{#if show}
+	<div class="overflow-hidden" bind:this={menuRef}>
+		<ul
+			class={cnames}
+			style:border-color={bdBg}
+			style:transition="height 0.3s"
+			in:transitionIn
+			out:transitionOut
+			{...$$restProps}
+			{...attrs}
+		>
+			<slot />
+		</ul>
+	</div>
+{/if}

components/Menu/src/index.ts

@@ -0,0 +1,13 @@
+import Menu from './index.svelte';
+import MenuItem from './item.svelte';
+export { Menu as KMenu };
+export { MenuItem as KMenuItem };
+export default Menu;
+
+export type {
+	KMenuInstanceOption,
+	KMenuItemProps,
+	KMenuInstance,
+	KMenuProps,
+	SubMenuType
+} from './types';