wip: initial drawing of menu component inline mode

components/Menu/package.json

@@ -34,6 +34,7 @@
 	"dependencies": {
 		"@ikun-ui/icon": "workspace:*",
 		"@ikun-ui/utils": "workspace:*",
+		"@ikun-ui/divider": "workspace:*",
 		"baiwusanyu-utils": "^1.0.18",
 		"clsx": "^2.0.0",
 		"svelte": "^4.2.7"

components/Menu/src/index.svelte

@@ -7,7 +7,7 @@
 	export let triggerSubMenuAction: KMenuProps['triggerSubMenuAction'] = 'hover';
 	export let subMenuCloseDelay: KMenuProps['subMenuCloseDelay'] = 100;
 	export let subMenuOpenDelay: KMenuProps['subMenuOpenDelay'] = 0;
-	// export let items: KMenuProps['items'] = [];
+	export let inlineIndent: KMenuProps['inlineIndent'] = 24
 	export let expandIcon: KMenuProps['expandIcon'] = 'i-carbon-chevron-down';
 	export let overflowedIndicator: KMenuProps['overflowedIndicator'] =
 		'i-carbon-overflow-menu-horizontal';
@@ -22,6 +22,9 @@
 		expandIcon,
 		overflowedIndicator,
 		mode,
+		inlineIndent,
+		cls,
+		attrs,
 	})
 	setContext(menuKey, menuInst);
 	$: {
@@ -33,14 +36,21 @@
 				expandIcon,
 				overflowedIndicator,
 				mode,
+				inlineIndent,
+				cls,
+				attrs,
 			});
 		});
 	}
 
 	const prefixCls = getPrefixCls('menu');
-	$: cnames = clsx(prefixCls, cls);
+	$: cnames = clsx(
+		prefixCls,
+		`${prefixCls}-${mode}`,
+		cls
+	);
 </script>
 
-<div class={cnames} {...$$restProps} {...attrs}>
+<ul class={cnames} {...$$restProps} {...attrs}>
 	<slot/>
-</div>
+</ul>

components/Menu/src/item.svelte

@@ -1,54 +1,186 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
-	import type { KMenuInstance, KMenuInstanceOption, KMenuItemProps } from "./types";
+	import { getContext, tick } from "svelte";
+	import { KIcon } from "@ikun-ui/icon";
+	import type { KMenuInstance, KMenuInstanceOption, KMenuItemProps, SubMenuType } from "./types";
 	import { getPrefixCls, menuKey } from "@ikun-ui/utils";
 	import { clsx } from "clsx";
+	import { KDivider } from "@ikun-ui/divider";
+	import { KMenu } from "@ikun-ui/menu";
 	export let items: KMenuItemProps['items'] = [];
 	export let cls: KMenuItemProps['cls'] = undefined;
 	export let attrs: KMenuItemProps['attrs'] = {};
+	export let level: KMenuItemProps['level'] = 1;
+
+	const hasSub = (it: SubMenuType) => it.children && it.children.length
+	const isNotHorizontal = () => ctxProps.mode !== 'horizontal'
+	const isGroup = (it: SubMenuType) => it.type === 'group'
+	const getLevel = (it: SubMenuType, lv: number) => {
+		if(isGroup(it)){
+			return lv - 1
+		}
+		return lv
+	}
+
 
 	const menuCtx = getContext(menuKey) as KMenuInstance
 	let ctxProps:KMenuInstanceOption = {}
 	function updatedCtxProps(props: Record<any, any>){
 		ctxProps = {...props}
-		console.log(ctxProps)
 	}
 	if(menuCtx){
 		ctxProps = {...menuCtx.__dynamicProps}
 		menuCtx.__propHandleEvtMap.push(updatedCtxProps)
 	}
 
+
+	let itemsList = items
+	$: {
+		itemsList = items
+	}
+
+	function setOpenAndSelectStatus(it: SubMenuType, list = itemsList){
+		return list.map(value => {
+			if(value.uid === it.uid && !isGroup(it)){
+				// set selected
+				it.selected = value.selected = !value.selected
+				it.selected = value.selected = ctxProps.selectedUids?.includes(value.uid || '') || value.selected
+				// set open
+				it.open = value.open = !value.open
+				it.open = value.open = ctxProps.openUids?.includes(value.uid || '') || value.open
+			}
+			if(hasSub(value)){
+				it.children = value.children = setOpenAndSelectStatus(it, value.children)
+			}
+			return value
+		})
+	}
+	async function handleSelect(it: SubMenuType){
+
+		const parent = document.querySelector('#bwsy');
+		// parent.style.maxHeight =  parent.scrollHeight + 'px';
+
+		itemsList = setOpenAndSelectStatus(it)
+		setTimeout(async () => {
+			console.log(parent?.getClientRects().height)
+			console.log(it.open, parent.scrollHeight)
+			parent.style.height =  parent.scrollHeight + 'px';
+		}, 100)
+
+		await tick()
+		setTimeout(() => {
+			parent.style.height =  'auto'
+			console.log('RRRRRRRRRRRRRRR')
+		}, 500)
+	}
+
+	const menuPrefixCls = getPrefixCls('menu');
 	const prefixCls = getPrefixCls('menu-item');
-	$: cnames = clsx(prefixCls, cls);
+	$: cnames = (it: SubMenuType) => {
+		return clsx(
+			prefixCls,
+			{
+				[`${prefixCls}-${ctxProps.mode}-group`]: isGroup(it),
+				[`${prefixCls}-${ctxProps.mode}`]: !isGroup(it),
+				[`${prefixCls}-selected`]: !isGroup(it) && isNotHorizontal() && ctxProps.selectedUids?.includes(it.uid || '') || it.selected,
+				[`${prefixCls}-hover-ih`]: !isGroup(it) && isNotHorizontal() && !(ctxProps.selectedUids?.includes(it.uid || '') || it.selected),
+				[`${prefixCls}-vh-child`]: !isGroup(it) && isNotHorizontal() && hasSub(it)
+			},
+			cls);
+	}
+
+	const iconCls = clsx(
+		`${prefixCls}-icon`,
+		);
+
+	const expendIconCls = (it: SubMenuType) => {
+		return it.open ? `${ctxProps.expandIcon} rotate-180 k-icon-transition` : `${ctxProps.expandIcon} k-icon-transition`
+	}
+
+	const titleContentCls = (hasIcon: boolean) => {
+		return clsx({
+			[`${menuPrefixCls}-title-content`]: !hasIcon,
+			[`${menuPrefixCls}-title-content-i`]: hasIcon
+		})
+	}
+	const dividerCls = clsx(`${prefixCls}-divider`)
+	$: subMenuCls = clsx(`${menuPrefixCls}-sub`, ctxProps.cls)
 </script>
 
-{#each items as it (it.uid)}
-	<div
-		class={cnames}
-		{...$$restProps}
-		{...attrs}>
-		<slot name="item" item={it}>
-
-			<div>
-				{it.label}
-				<slot name="ic" item={it}></slot>
-			</div>
-
-		</slot>
-		{#if it.children && it.children.length}
-			<svelte:self items={it.children}>
-				<svelte:fragment let:item slot="item">
-					<slot name="item" item={item}>
-
-						<div>
-							{item.label}
-							<slot name="ic" item={it}></slot>
-						</div>
+{#each itemsList as it (it.uid)}
+	{#if it.type !== 'divider'}
+		<li
+			on:click={() => handleSelect(it)}
+			aria-hidden="true"
+			style:padding-left={`${(ctxProps.inlineIndent || 24 ) * getLevel(it, level)}px`}
+			class={cnames(it)}
+			{...$$restProps}
+			{...attrs}>
+			<slot name="item" item={it}>
+				<div>
+					<slot name="icon" item={it}>
+						{#if it.icon}
+							<KIcon width="14px"
+										 cls={iconCls}
+										 height="14px"
+										 icon={it.icon}>
+							</KIcon>
+						{/if}
+					</slot>
+					<span class={titleContentCls(!!it.icon)}>{it.label}</span>
+				</div>
 
+				{#if hasSub(it) && !isGroup(it)}
+					<slot name="expandIcon" item={it}>
+						<KIcon width="14px"
+									 cls={iconCls}
+									 height="14px"
+									 icon={expendIconCls(it)}>
+						</KIcon>
 					</slot>
-				</svelte:fragment>
-			</svelte:self>
+				{/if}
+			</slot>
+
+
+		</li>
+
+		{#if (hasSub(it) && it.open) || isGroup(it)}
+			<KMenu {...ctxProps} cls={subMenuCls}>
+				<svelte:self items={it.children} level={getLevel(it, level) + 1}>
+					<svelte:fragment let:item slot="item">
+
+
+						<slot name="item" item={item}>
+							<div>
+								<slot name="icon" item={item}>
+									{#if item.icon}
+										<KIcon width="14px"
+													 cls={iconCls}
+													 height="14px"
+													 icon={item.icon}>
+										</KIcon>
+									{/if}
+								</slot>
+								<span class={titleContentCls(!!item.icon)}>self {item.label}</span>
+							</div>
+
+							{#if hasSub(item) && !isGroup(item)}
+								<slot name="expandIcon" item={item}>
+									<KIcon width="14px"
+												 cls={iconCls}
+												 height="14px"
+												 icon={expendIconCls(item)}>
+									</KIcon>
+								</slot>
+							{/if}
+
+						</slot>
+
+					</svelte:fragment>
+				</svelte:self>
+			</KMenu>
 		{/if}
-	</div>
+		{:else}
+		<KDivider cls={dividerCls}></KDivider>
+	{/if}
 {/each}
 

components/Menu/src/types.d.ts

@@ -3,7 +3,7 @@ import type { ClassValue } from 'clsx';
 export type KMenuInstanceOption = {
 	expandIcon?: string;
 	inlineIndent?: number;
-	inlineCollapsed?: number;
+	inlineCollapsed?: boolean;
 	mode?: `vertical` | `horizontal` | `inline`;
 	openUids?: string[];
 	overflowedIndicator?: string;
@@ -13,6 +13,8 @@ export type KMenuInstanceOption = {
 	subMenuOpenDelay?: number;
 	theme?: 'light' | 'dark';
 	triggerSubMenuAction?: 'hover' | 'click';
+	cls?: ClassValue;
+	attrs?: Record<string, string>;
 }
 export type KMenuInstance = {
 	__propHandleEvtMap: Array<(props: Record<any, any>) => void>
@@ -32,13 +34,9 @@ export type KMenuProps = {
 	inlineIndent?: number;
 	/**
 	 * TODO: inline 时菜单是否收起状态 (指显示图标的mini模式和展开到常规模式)
-	 * @default 24
-	 */
-	inlineCollapsed?: number;
-	/**
-	 * TODO: 🎯 菜单内容
+	 * @default false
 	 */
-	// items: KItemType[]
+	inlineCollapsed?: boolean;
 	/**
 	 * TODO: 🎯 菜单类型，现在支持垂直、水平、和内嵌模式三种
 	 * `vertical` 和 `inline` 的区别在于 `vertical` 子菜单以 popover 形式出现
@@ -96,6 +94,10 @@ export type KMenuProps = {
 // TODO: slots expandIcon 展开图标
 
 export type KMenuItemProps = {
+	/**
+	 * @internal
+	 */
+	level: number
 	items: SubMenuType[]
 	cls: ClassValue;
 	attrs: Record<string, string>;
@@ -132,14 +134,20 @@ export type SubMenuType = {
 	/**
 	 * TODO: 子菜单的菜单项
 	 */
-	children?: KItemType[];
+	children?: SubMenuType[];
 	/**
 	 * TODO: 子菜单样式，mode="inline" 时无效
 	 */
 	popupClassName?: string;
+	[property: string]: any
 };
 
 // TODO: onTitleClick 点击子菜单标题
 
 // TODO: Items Slots slots label 分组标题
 // TODO: Items Slots slots  icon  菜单图标
+
+
+// TODO: 高度动画
+// TODO: 缩略文字
+// TODO: 背景色随着层级加深

preset/src/rules/index.ts

@@ -18,6 +18,7 @@ import { carouselRules } from './src/carousel';
 import { skeletonRules } from './src/skeleton';
 import { colorPickerRules } from './src/color-picker';
 import { timelineRules } from './src/timeline';
+import { menuRules } from './src/menu';
 import { baseRules } from './src/base';
 
 declare type dynamicRulesFunc = (...args: any[]) => Array<RegExp | ((...args: any[]) => any)>;
@@ -34,6 +35,7 @@ export const defaultRules = {
 	...carouselRules,
 	...skeletonRules,
 	...colorPickerRules,
+	...menuRules,
 	...timelineRules,
 	...baseRules,
 	...getColCls(),

preset/src/rules/src/menu.ts

@@ -0,0 +1,7 @@
+export const menuRules = {
+  'k-menu-w': { width: 'calc(100% - 8px)' },
+  'k-menu-transition-c': { transition: 'color 0.3s' },
+  'k-menu-transition-o': { transition: 'opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),margin 0.3s,color 0.3s' },
+  'k-menu-transition-w': { transition: 'width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s' },
+  'k-menu-transition': { transition: 'border-color 0.3s,background 0.3s,padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)' },
+};

preset/src/shortcuts/src/common.ts

@@ -29,6 +29,7 @@ export const commonShortcuts: UserShortcuts<Theme> = {
 	infcc: 'inline-flex justify-center items-center',
 	'bd-1': 'border-t-1 border-l-1 border-b-1 border-r-1',
 	'bdt-1': 'border-t-1 border-l-0 border-b-0 border-r-0',
+	'bdr-1': 'border-t-0 border-l-0 border-b-0 border-r-1',
 	'bdl-1': 'border-l-1 border-t-0 border-b-0 border-r-0',
 	'bdb-1': 'border-l-0 border-t-0 border-b-1 border-r-0',
 	'bdlb-1': 'border-l-1 border-t-0 border-b-1 border-r-0',

preset/src/shortcuts/src/menu.ts

@@ -1,3 +1,34 @@
 export const menuShortcuts: Record<string, string> = {
-	'k-menu': ''
+	'k-menu': 'bg-white text-ikun-tx-base p-0 m-0 box-border text-14px leading-0 list-none outline-none focus:outline-none k-menu-transition-w',
+	'k-menu-item': 'box-border',
+	'k-menu-item-icon': 'inline-flex text-inherit items-center leading-0',
+	'k-menu-title-content': 'box-border k-menu-transition-c',
+	'k-menu-title-content-i': 'm-is-10px k-menu-transition-o opacity-[1]',
+	'k-menu-item-divider': 'my-0',
+
+
+
+	'k-menu-sub': 'border-none',
+
+
+	'k-menu-horizontal': '',
+	'k-menu-item-horizontal': '',
+
+
+
+
+
+	'k-menu-item-selected': 'ikun:20:bg-ikun-main text-ikun-main hover:(ikun:20:bg-ikun-main)',
+	'k-menu-item-hover-ih': 'hover:(ikun:6:bg-ikun-black)',
+	'k-menu-item-vh-child': 'justify-between',
+
+	'k-menu-inline': 'bdr-1 b-e-solid border-ikun-bd-base',
+	'k-menu-vertical': 'bdr-1 b-e-solid border-ikun-bd-base',
+	'k-menu-item-vertical': '',
+	'k-menu-item-inline': 'cursor-pointer k-menu-w k-menu-transition ' +
+		'flex items-center pr h-40px leading-40px list-style-position truncate ps-16px p-ie-16px m-is-4px m-ie-4px m-bs-4px m-be-4px ' +
+		'rounded-8px active:(ikun:20:bg-ikun-main)',
+	'k-menu-item-inline-group': 'k-menu-w k-menu-transition ' +
+		'flex items-center pr h-40px leading-40px list-style-position truncate ps-16px p-ie-16px m-is-4px m-ie-4px m-bs-4px m-be-4px ' +
+		'rounded-8px ikun:50:text-black',
 };