feat: added KMenu component

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: Install

.github/workflows/unit-test.yml

@@ -2,7 +2,7 @@ name: 🌈 Unit Test
 env:
   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 # Skip downloading during yarn install
   PLAYWRIGHT_BROWSERS_PATH: 0 # Places binaries to node_modules/@playwright/test
-
+  NPM_CONFIG_REGISTRY: https://registry.npmjs.org/
 on:
   push:
     branches:
@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [18.x]
+        node: [20.x]
         os: [ubuntu-latest, windows-latest, macos-latest]
       fail-fast: false
 
@@ -34,17 +34,20 @@ jobs:
       - name: Set node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: Setup
-        run: npm i -g @antfu/ni
+        run: npm i -g pnpm
+
+      - name: Reset pnpm registry
+        run: pnpm config set registry https://registry.npmjs.org/
 
       - name: Setup dependencies
-        run: nci
+        run: pnpm install --no-frozen-lockfile --registry=https://registry.npmjs.org/
 
       - name: Build
-        run: nr build
+        run: pnpm build
 
       - name: Unit Test
-        run: nr test:unit
+        run: pnpm test:unit

components/Ellipsis/__test__/__snapshots__/ellipsis.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KEllipsis > props: cls 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base k-ellipsis--test" slot="triggerEl" aria-hidden="true" style="">...</div></div> "`;
+exports[`Test: KEllipsis > props: cls 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base k-ellipsis--test" slot="triggerEl" aria-hidden="true" style="">...</div></div> "`;
 
-exports[`Test: KEllipsis > props: content 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="top" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both; bottom: 8px;" data-popper-reference-hidden="" data-popper-escaped=""><span slot="contentEl">自古逢秋悲寂寥</span> <div k-popover-arrow="true" class="svelte-13arsd0" data-popper-arrow-top=""></div></div>"`;
+exports[`Test: KEllipsis > props: content 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="top" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both; bottom: 8px;" data-popper-reference-hidden="" data-popper-escaped=""><span slot="contentEl">自古逢秋悲寂寥</span> <div k-popover-arrow="true" class="svelte-13arsd0" data-popper-arrow-top=""></div></div>"`;
 
-exports[`Test: KEllipsis > props: expand 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="-webkit-line-clamp: 3; display: -webkit-inline-box; overflow: hidden;">我言秋日...</div></div> "`;
+exports[`Test: KEllipsis > props: expand 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="-webkit-line-clamp: 3; display: -webkit-inline-box; overflow: hidden;">我言秋日...</div></div> "`;
 
-exports[`Test: KEllipsis > props: num 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日...</div></div> "`;
+exports[`Test: KEllipsis > props: num 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日...</div></div> "`;
 
-exports[`Test: KEllipsis > props: text 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> "`;
+exports[`Test: KEllipsis > props: text 1`] = `"<div aria-hidden="true" class="flex svelte-13arsd0" data-popover-trigger=""><div class="k-ellipsis k-ellipsis--base" slot="triggerEl" aria-hidden="true" style="">我言秋日胜春朝</div></div> "`;

components/Icon/src/index.svelte

@@ -11,6 +11,7 @@
 	export let color: KIconProps['color'] = '';
 	export let cls: KIconProps['cls'] = '';
 	export let attrs: KIconProps['attrs'] = {};
+	export let theme: KIconProps['theme'] = undefined;
 
 	$: tag = btn ? 'button' : '';
 
@@ -30,7 +31,7 @@
 	$: cnames = clsx(
 		`${prefixCls}--base`,
 		{
-			[`${prefixCls}--base__dark`]: !color,
+			[`${prefixCls}--base__dark`]: !color && ((theme && theme === 'dark') || theme === undefined),
 			[`${prefixCls}--role-button`]: !!btn
 		},
 		`${prefixCls}-transition`,

components/Icon/src/types.d.ts

@@ -7,6 +7,10 @@ export type KIconProps = {
 	width: string;
 	height: string;
 	color: string;
+	/**
+	 * @internal
+	 */
+	theme?: 'dark' | 'light';
 	cls: ClassValue;
 	attrs: Record<string, string>;
 };

components/Menu/__test__/fixture/action.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { KMenu, KMenuItem } from '@ikun-ui/menu';
+	import type { SubMenuType } from '@ikun-ui/menu';
+	let items: SubMenuType[] = [
+		{
+			label: 'Navigation Three - Su',
+			title: 'Navigation Three - Su',
+			uid: 'SubMenu',
+			popupClassName: 'ikun-test',
+			icon: 'i-carbon-logo-vue',
+			children: [
+				{
+					type: 'group',
+					label: 'Item 1',
+					title: 'Item 1',
+					popupClassName: 'ikun-test',
+					uid: 'asda',
+					// icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 1',
+							title: 'Option 1',
+							uid: 'setting:1',
+							popupClassName: 'ikun-test',
+							disabled: false,
+							// icon: 'i-carbon-logo-vue',
+							children: [
+								{
+									label: 'Option 3333 Option 3333 Option 3333',
+									title: 'Option 3333',
+									icon: 'i-carbon-logo-vue',
+									popupClassName: 'ikun-test',
+									uid: 'setting:3333'
+								}
+							]
+						},
+						{
+							label: 'Navigation Four-dv',
+							// icon: 'i-carbon-logo-react',
+							type: 'divider',
+							popupClassName: 'ikun-test',
+							uid: 'alipay-dv'
+						},
+						{
+							label: 'Option 2',
+							popupClassName: 'ikun-test',
+							uid: 'setting:2'
+						}
+					]
+				},
+				{
+					label: 'Item 2',
+					uid: 'asdqqda',
+					disabled: true,
+					popupClassName: 'ikun-test',
+					// icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 3',
+							popupClassName: 'ikun-test',
+							uid: 'setting:3'
+						},
+						{
+							label: 'Option 4',
+							popupClassName: 'ikun-test',
+							uid: 'setting:4'
+						}
+					]
+				}
+			]
+		}
+	];
+</script>
+
+<div class="w-full fsc">
+	<KMenu mode="vertical" triggerSubMenuAction="hover" ctxKey="11">
+		<KMenuItem {items} ctxKey="11" />
+	</KMenu>
+	<KMenu mode="vertical" triggerSubMenuAction="click" ctxKey="22">
+		<KMenuItem {items} ctxKey="22" />
+	</KMenu>
+</div>

components/Menu/__test__/fixture/children.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { KMenu, KMenuItem } from '@ikun-ui/menu';
+	import type { SubMenuType } from '@ikun-ui/menu';
+	let items: SubMenuType[] = [
+		{
+			label: 'Navigation Three - Su',
+			title: 'Navigation Three - Su',
+			uid: 'SubMenu',
+			popupClassName: 'ikun-test',
+			icon: 'i-carbon-logo-vue',
+			children: [
+				{
+					type: 'group',
+					label: 'Item 1',
+					title: 'Item 1',
+					popupClassName: 'ikun-test',
+					uid: 'asda',
+					icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 1',
+							title: 'Option 1',
+							uid: 'setting:1',
+							popupClassName: 'ikun-test',
+							disabled: false,
+							icon: 'i-carbon-logo-vue',
+							children: [
+								{
+									label: 'Option 3333 Option 3333 Option 3333',
+									title: 'Option 3333',
+									icon: 'i-carbon-logo-vue',
+									popupClassName: 'ikun-test',
+									uid: 'setting:3333'
+								}
+							]
+						},
+						{
+							label: 'Navigation Four-dv',
+							icon: 'i-carbon-logo-react',
+							type: 'divider',
+							popupClassName: 'ikun-test',
+							uid: 'alipay-dv'
+						},
+						{
+							label: 'Option 2',
+							popupClassName: 'ikun-test',
+							uid: 'setting:2'
+						}
+					]
+				},
+				{
+					label: 'Item 2',
+					uid: 'asdqqda',
+					disabled: true,
+					popupClassName: 'ikun-test',
+					icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 3',
+							popupClassName: 'ikun-test',
+							uid: 'setting:3'
+						},
+						{
+							label: 'Option 4',
+							popupClassName: 'ikun-test',
+							uid: 'setting:4'
+						}
+					]
+				}
+			]
+		}
+	];
+</script>
+
+<div class="w-full fsc">
+	<KMenu mode="vertical" id="children_test_vertical" triggerSubMenuAction="click" ctxKey="11">
+		<KMenuItem {items} ctxKey="11" />
+	</KMenu>
+	<KMenu mode="inline" id="children_test_inline" triggerSubMenuAction="click" ctxKey="22">
+		<KMenuItem {items} ctxKey="22" />
+	</KMenu>
+	<KMenu mode="horizontal" id="children_test_horizontal" triggerSubMenuAction="click" ctxKey="22">
+		<KMenuItem {items} ctxKey="22" />
+	</KMenu>
+</div>

components/Menu/__test__/fixture/click.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { KMenu, KMenuItem } from '@ikun-ui/menu';
+	import type { SubMenuType } from '@ikun-ui/menu';
+	let items: SubMenuType[] = [
+		{
+			label: 'Navigation Three - Su',
+			title: 'Navigation Three - Su',
+			uid: 'SubMenu',
+			popupClassName: 'ikun-test',
+			icon: 'i-carbon-logo-vue',
+			children: [
+				{
+					type: 'group',
+					label: 'Item 1',
+					title: 'Item 1',
+					popupClassName: 'ikun-test',
+					uid: 'asda',
+					// icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 1',
+							title: 'Option 1',
+							uid: 'setting:1',
+							popupClassName: 'ikun-test',
+							disabled: false,
+							// icon: 'i-carbon-logo-vue',
+							children: [
+								{
+									label: 'Option 3333 Option 3333 Option 3333',
+									title: 'Option 3333',
+									icon: 'i-carbon-logo-vue',
+									popupClassName: 'ikun-test',
+									uid: 'setting:3333'
+								}
+							]
+						},
+						{
+							label: 'Navigation Four-dv',
+							// icon: 'i-carbon-logo-react',
+							type: 'divider',
+							popupClassName: 'ikun-test',
+							uid: 'alipay-dv'
+						},
+						{
+							label: 'Option 2',
+							popupClassName: 'ikun-test',
+							uid: 'setting:2'
+						}
+					]
+				},
+				{
+					label: 'Item 2',
+					uid: 'asdqqda',
+					disabled: true,
+					popupClassName: 'ikun-test',
+					// icon: 'i-carbon-logo-vue',
+					children: [
+						{
+							label: 'Option 3',
+							popupClassName: 'ikun-test',
+							uid: 'setting:3'
+						},
+						{
+							label: 'Option 4',
+							popupClassName: 'ikun-test',
+							uid: 'setting:4'
+						}
+					]
+				}
+			]
+		}
+	];
+
+	let triggerTime = 0;
+	let res = {};
+	const handleClick = (item: CustomEvent) => {
+		res = item.detail;
+		triggerTime = triggerTime + 1;
+	};
+</script>
+
+<div class="w-full fsc">
+	<KMenu
+		mode="vertical"
+		id="click_test_vertical"
+		on:click={handleClick}
+		triggerSubMenuAction="click"
+		ctxKey="11"
+	>
+		<KMenuItem {items} ctxKey="11" />
+	</KMenu>
+	<KMenu
+		mode="inline"
+		id="click_test_inline"
+		triggerSubMenuAction="click"
+		on:click={handleClick}
+		ctxKey="22"
+	>
+		<KMenuItem {items} ctxKey="22" />
+	</KMenu>
+	<KMenu
+		mode="horizontal"
+		id="click_test_horizontal"
+		triggerSubMenuAction="click"
+		on:click={handleClick}
+		ctxKey="22"
+	>
+		<KMenuItem {items} ctxKey="22" />
+	</KMenu>
+	<div id="trigger_time">{triggerTime}</div>
+	<div>{JSON.stringify(res)}</div>
+</div>