handleSelectedRecursion(e, index)}
items={it.children}
level={getLevel(it, level) + 1}
diff --git a/components/Menu/src/types.d.ts b/components/Menu/src/types.d.ts
index 2c216bf3..4cce9315 100644
--- a/components/Menu/src/types.d.ts
+++ b/components/Menu/src/types.d.ts
@@ -95,7 +95,7 @@ export type KMenuProps = {
*/
selectedUids?: string[];
/**
- * TODO: 👀是否允许选中(为 false， 点击不高亮，不触发 select事件) inline
+ * TODO: 👀 是否允许选中(为 false， 点击不高亮，不触发 select事件) inline
* TODO: 是否允许选中(为 false， 点击不高亮，不触发 select事件) vertical
* TODO: 是否允许选中(为 false， 点击不高亮，不触发 select事件) horizontal
* @default false
@@ -122,7 +122,7 @@ export type KMenuProps = {
*/
multiple?: boolean;
/**
- * TODO: SubMenu 展开/关闭的触发行为(非 inline 模式)
+ * TODO: 👀 SubMenu 展开/关闭的触发行为(非 inline 模式)
* @default 'hover'
*/
triggerSubMenuAction?: 'hover' | 'click';
@@ -194,7 +194,7 @@ export type SubMenuType = {
*/
theme?: 'light' | 'dark';
/**
- * TODO: 设置收缩时展示的悬浮标题(无子菜单情况下生效，不传时默认为 label)
+ * TODO: 🎯设置收缩时展示的悬浮标题(无子菜单情况下生效，不传时默认为 label)
*/
title?: string;
/**
@@ -234,4 +234,4 @@ export type SubMenuType = {
// TODO: 👀 Items Slots slots icon 菜单图标 inline
// TODO: onSelect 选择子菜单时，再次选择被错误的取消
-// TODO: 非 inline 模式只允許一個子菜單
+// TODO: 🎯 测试非inline 模式下 ‘👀’ 的功能
From 72ad9fb14ef56f5637e0bf50152016bb7d2aa104 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 22 Apr 2024 11:05:19 +0800
Subject: [PATCH 27/39] wip: KMenu component completes vertical mode
subMenuCloseDelay and subMenuOpneDelay props
---
components/Menu/src/item.svelte | 2 ++
components/Menu/src/types.d.ts | 28 +++++++++++++++-------------
2 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/components/Menu/src/item.svelte b/components/Menu/src/item.svelte
index f933bd9e..a54c5af9 100644
--- a/components/Menu/src/item.svelte
+++ b/components/Menu/src/item.svelte
@@ -339,6 +339,8 @@
width="100%"
placement="right"
offset={setPopoverOffset}
+ mouseEnterDelay={ctxProps.subMenuOpenDelay}
+ mouseLeaveDelay={ctxProps.subMenuCloseDelay}
trigger={ctxProps.triggerSubMenuAction}
cls={popoverContentCls}
clsTrigger={popoverTriggerCls}
diff --git a/components/Menu/src/types.d.ts b/components/Menu/src/types.d.ts
index 4cce9315..af84bc88 100644
--- a/components/Menu/src/types.d.ts
+++ b/components/Menu/src/types.d.ts
@@ -82,32 +82,32 @@ export type KMenuProps = {
mode?: `vertical` | `horizontal` | `inline`;
/**
* TODO: 👀 当前展开的 SubMenu 菜单项 key 数组 inline
- * TODO: 当前展开的 SubMenu 菜单项 key 数组 vertical
+ * TODO: 🎯 当前展开的 SubMenu 菜单项 key 数组 vertical
* TODO: 当前展开的 SubMenu 菜单项 key 数组 horizontal
* @default `[]`
*/
openUids?: string[];
/**
* TODO: 👀 当前选中的菜单项 key 数组(子菜单只高亮，不展开) inline
- * TODO: 当前选中的菜单项 key 数组(子菜单只高亮，不展开) vertical
+ * TODO: 👀 当前选中的菜单项 key 数组(子菜单只高亮，不展开) vertical
* TODO: 当前选中的菜单项 key 数组(子菜单只高亮，不展开) horizontal
* @default `[]`
*/
selectedUids?: string[];
/**
* TODO: 👀 是否允许选中(为 false， 点击不高亮，不触发 select事件) inline
- * TODO: 是否允许选中(为 false， 点击不高亮，不触发 select事件) vertical
+ * TODO: 👀 是否允许选中(为 false， 点击不高亮，不触发 select事件) vertical
* TODO: 是否允许选中(为 false， 点击不高亮，不触发 select事件) horizontal
* @default false
*/
selectable?: boolean;
/**
- * TODO: 用户鼠标离开子菜单后关闭延时，单位：毫秒(非 inline 模式, hover触发)
+ * TODO: 👀 用户鼠标离开子菜单后关闭延时，单位：毫秒(非 inline 模式, hover触发)
* @default 100ms
*/
subMenuCloseDelay?: number;
/**
- * TODO: 用户鼠标进入子菜单后开启延时，单位：毫秒(非 inline 模式, hover触发)
+ * TODO: 👀 用户鼠标进入子菜单后开启延时，单位：毫秒(非 inline 模式, hover触发)
* @default 0
*/
subMenuOpenDelay?: number;
@@ -137,14 +137,16 @@ export type KMenuProps = {
// TODO: 👀 onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） inline
// TODO: 👀 onOpenChange SubMenu 展开/关闭的回调 inline
// TODO: 👀 onSelect 被选中时调用(点击子菜单标题不触发） inline
-// TODO: onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） vertical
-// TODO: onOpenChange SubMenu 展开/关闭的回调 vertical
-// TODO: onSelect 被选中时调用(点击子菜单标题不触发） vertical
+
+// TODO: 👀 onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） vertical
+// TODO: 👀 onOpenChange SubMenu 展开/关闭的回调 vertical
+// TODO: 👀 onSelect 被选中时调用(点击子菜单标题不触发） vertical
+
// TODO: onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） horizontal
// TODO: onOpenChange SubMenu 展开/关闭的回调 horizontal
// TODO: onSelect 被选中时调用(点击子菜单标题不触发） horizontal
-// TODO: slots expandIcon 展开图标 vertical
+// TODO: 👀 slots expandIcon 展开图标 vertical
// TODO: slots expandIcon 展开图标 horizontal
// TODO: 👀 slots expandIcon 展开图标 inline
@@ -226,12 +228,12 @@ export type SubMenuType = {
// TODO: onTitleClick 点击子菜单标题
-// TODO: Items Slots slots label 分组标题 vertical
+// TODO: 🎯Items Slots slots label 分组标题 vertical
// TODO: Items Slots slots label 分组标题 horizontal
// TODO: 🎯Items Slots slots label 分组标题 inline
-// TODO: Items Slots slots icon 菜单图标 vertical
+// TODO: 👀 Items Slots slots icon 菜单图标 vertical
// TODO: Items Slots slots icon 菜单图标 horizontal
// TODO: 👀 Items Slots slots icon 菜单图标 inline
-// TODO: onSelect 选择子菜单时，再次选择被错误的取消
-// TODO: 🎯 测试非inline 模式下 ‘👀’ 的功能
+// TODO: 🎯 onSelect 选择子菜单时，选择和取消的预期行为是什么
+// TODO: 🎯 onOpenChange 选择和取消的预期行为是什么
From 81854d48702bc177090abe9b44dceb5f0d8c8bcb Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 22 Apr 2024 13:39:08 +0800
Subject: [PATCH 28/39] wip: KMenu component completes vertical and inline mode
onDeSelect event
---
components/Menu/src/index.svelte | 11 ++++--
components/Menu/src/item.svelte | 60 +++++++++++++++-----------------
components/Menu/src/types.d.ts | 13 +++----
components/Menu/src/utils.ts | 6 ++--
4 files changed, 47 insertions(+), 43 deletions(-)
diff --git a/components/Menu/src/index.svelte b/components/Menu/src/index.svelte
index b300a6ab..4456d399 100644
--- a/components/Menu/src/index.svelte
+++ b/components/Menu/src/index.svelte
@@ -30,6 +30,10 @@
function onClick(data: ClickEvtPa) {
dispatch('click', data);
}
+
+ function onDeSelect(data: SelectEvtPa) {
+ dispatch('deSelect', data);
+ }
/**
* @internal
*/
@@ -46,11 +50,12 @@
multiple,
selectable,
attrs,
- ctxKey,
+ ctxKey
},
onOpenChange,
onSelect,
- onClick
+ onClick,
+ onDeSelect
);
if (!getContext(ctxKey || menuKey)) {
setContext(ctxKey || menuKey, menuInst);
@@ -69,7 +74,7 @@
selectedUids,
selectable,
attrs,
- ctxKey,
+ ctxKey
});
});
}
diff --git a/components/Menu/src/item.svelte b/components/Menu/src/item.svelte
index a54c5af9..6a2f30ca 100644
--- a/components/Menu/src/item.svelte
+++ b/components/Menu/src/item.svelte
@@ -8,8 +8,8 @@
import KMenu from './index';
import { getUidPath } from './utils';
import { KPopover } from '@ikun-ui/popover';
- import type { OffsetsFunction, OffsetsFnPa } from '@ikun-ui/popover';
- import {jsonClone} from "baiwusanyu-utils";
+ import type { OffsetsFunction, OffsetsFnPa } from '@ikun-ui/popover';
+ import { jsonClone } from 'baiwusanyu-utils';
export let items: KMenuItemProps['items'] = [];
export let cls: KMenuItemProps['cls'] = undefined;
export let attrs: KMenuItemProps['attrs'] = {};
@@ -41,7 +41,7 @@
const defaultSelected = menuCtx.__selectedUids?.has(value.uid || '');
const defaultOpen = menuCtx.__openUids?.has(value.uid || '');
value.selected = defaultSelected;
- value.inGroup = inGroup
+ value.inGroup = inGroup;
menuCtx.syncSelectedItems(value, value.selected ? 'set' : 'delete');
value.open = defaultOpen;
if (defaultSelected) {
@@ -65,7 +65,7 @@
}
}
- if(hasSub(value) && ctxProps.mode === 'vertical'){
+ if (hasSub(value) && ctxProps.mode === 'vertical') {
const recRes = initOpenSelectedStatus(value.children!, isGroup(value));
if (!isGroup(value)) {
value.children = recRes.children;
@@ -78,12 +78,12 @@
deps.push(value.uid!);
}
} else {
- const { children } = value
- value.children = []
+ const { children } = value;
+ value.children = [];
res.push({ ...value });
- res = res.concat(children!)
+ res = res.concat(children!);
deps = recRes.deps;
- return
+ return;
}
}
res.push({ ...value });
@@ -118,7 +118,6 @@
| { detail: { selected: boolean; uid: string } },
index: number
) {
-
const { selected, uid } = e.detail;
const it = itemsList[index];
if (!isGroup(it)) {
@@ -191,7 +190,7 @@
if (!hasSub(it) && !isGroup(it) && ctxProps.selectable) {
menuCtx.syncUids(it.uid!, 'selected', it.selected ? 'add' : 'delete');
menuCtx.syncSelectedItems(it, it.selected ? 'set' : 'delete');
- menuCtx.onSelect({
+ const params = {
item: it,
uid: it.uid!,
uidPath,
@@ -201,7 +200,12 @@
(uid) => getUidPath(uid, menuCtx.__org_items!) || []
),
e
- });
+ };
+ if (it.selected) {
+ menuCtx.onSelect(params);
+ } else {
+ menuCtx.onDeSelect(params);
+ }
}
}
}
@@ -228,13 +232,11 @@
const iconRootCls = clsx(`${prefixCls}-icon-root`);
$: expendIconCls = (it: SubMenuType) => {
- const icon = (ctxProps.expandIcon || 'i-carbon-chevron-down ');
+ const icon = ctxProps.expandIcon || 'i-carbon-chevron-down ';
if (ctxProps.mode === 'vertical') {
- return `${icon} -rotate-90`
+ return `${icon} -rotate-90`;
}
- return it.open
- ? `${icon} rotate-180 k-icon-transition`
- : `${icon} k-icon-transition`;
+ return it.open ? `${icon} rotate-180 k-icon-transition` : `${icon} k-icon-transition`;
};
const titleContentCls = (hasIcon: boolean) => {
@@ -252,17 +254,16 @@
const popoverContentCls = clsx(`${prefixCls}-popover-content p-0 box-border`);
const popoverTriggerCls = clsx(`${prefixCls}-popover-trigger-v`);
- $:getIndent = (it: SubMenuType) => {
- if(ctxProps.mode !== 'inline') {
- return `${it.inGroup ? (ctxProps.inlineIndent || 24) * 2 : ctxProps.inlineIndent}px`
+ $: getIndent = (it: SubMenuType) => {
+ if (ctxProps.mode !== 'inline') {
+ return `${it.inGroup ? (ctxProps.inlineIndent || 24) * 2 : ctxProps.inlineIndent}px`;
}
- return `${(ctxProps.inlineIndent || 24) * getLevel(it, level)}px`
- }
-
- const setPopoverOffset: OffsetsFunction = ({popper, reference}: OffsetsFnPa) => {
- return [popper.height / 2 - reference.height / 2, 4]
- }
+ return `${(ctxProps.inlineIndent || 24) * getLevel(it, level)}px`;
+ };
+ const setPopoverOffset: OffsetsFunction = ({ popper, reference }: OffsetsFnPa) => {
+ return [popper.height / 2 - reference.height / 2, 4];
+ };
{#each itemsList as it, index (it.uid)}
@@ -344,7 +345,7 @@
trigger={ctxProps.triggerSubMenuAction}
cls={popoverContentCls}
clsTrigger={popoverTriggerCls}
- disabled={!((hasSub(it)) || isGroup(it))}
+ disabled={!(hasSub(it) || isGroup(it))}
>
{#if it.type !== 'divider'}
@@ -378,12 +379,7 @@
{/if}
-
+
;
- ctxKey?: string
+ ctxKey?: string;
};
export type ClickEvtPa = {
@@ -49,6 +49,7 @@ export type KMenuInstance = {
) => void;
onOpenChange: (openUids: string[]) => void;
onSelect: (param: SelectEvtPa) => void;
+ onDeSelect: (param: SelectEvtPa) => void;
onClick: (param: ClickEvtPa) => void;
};
@@ -56,7 +57,7 @@ export type KMenuProps = {
/**
* TODO: 👀 上下文 key
*/
- ctxKey?: string
+ ctxKey?: string;
/**
* TODO: 👀 展开图标
* @default 'i-carbon-chevron-down'
@@ -137,14 +138,17 @@ export type KMenuProps = {
// TODO: 👀 onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） inline
// TODO: 👀 onOpenChange SubMenu 展开/关闭的回调 inline
// TODO: 👀 onSelect 被选中时调用(点击子菜单标题不触发） inline
+// TODO: 👀 onDeSelect 被选中时调用(点击子菜单标题不触发） inline
// TODO: 👀 onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） vertical
// TODO: 👀 onOpenChange SubMenu 展开/关闭的回调 vertical
// TODO: 👀 onSelect 被选中时调用(点击子菜单标题不触发） vertical
+// TODO: 👀 onDeSelect 被选中时调用(点击子菜单标题不触发） inline
// TODO: onClick 点击 MenuItem 调用此函数(点击子菜单标题不触发） horizontal
// TODO: onOpenChange SubMenu 展开/关闭的回调 horizontal
// TODO: onSelect 被选中时调用(点击子菜单标题不触发） horizontal
+// TODO: onDeSelect 被选中时调用(点击子菜单标题不触发） inline
// TODO: 👀 slots expandIcon 展开图标 vertical
// TODO: slots expandIcon 展开图标 horizontal
@@ -158,7 +162,7 @@ export type KMenuItemProps = {
/**
* TODO: 👀 上下文 key
*/
- ctxKey?: string
+ ctxKey?: string;
items: SubMenuType[];
cls: ClassValue;
attrs: Record;
@@ -234,6 +238,3 @@ export type SubMenuType = {
// TODO: 👀 Items Slots slots icon 菜单图标 vertical
// TODO: Items Slots slots icon 菜单图标 horizontal
// TODO: 👀 Items Slots slots icon 菜单图标 inline
-
-// TODO: 🎯 onSelect 选择子菜单时，选择和取消的预期行为是什么
-// TODO: 🎯 onOpenChange 选择和取消的预期行为是什么
diff --git a/components/Menu/src/utils.ts b/components/Menu/src/utils.ts
index 46eef5c6..892c8d5d 100644
--- a/components/Menu/src/utils.ts
+++ b/components/Menu/src/utils.ts
@@ -4,7 +4,8 @@ export const createKMenu = (
options: KMenuInstanceOption,
onOpenChange: KMenuInstance['onOpenChange'],
onSelect: KMenuInstance['onSelect'],
- onClick: KMenuInstance['onClick']
+ onClick: KMenuInstance['onClick'],
+ onDeSelect: KMenuInstance['onDeSelect']
): KMenuInstance => {
return {
/**
@@ -40,7 +41,8 @@ export const createKMenu = (
},
onOpenChange,
onSelect,
- onClick
+ onClick,
+ onDeSelect
};
};
From c5f8bcc67547843c776a6f124fe8adda07317421 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 22 Apr 2024 17:47:37 +0800
Subject: [PATCH 29/39] wip: KMenu component vertical mode openUids props temp
commit
---
components/Menu/src/item.svelte | 41 ++++++++++++++++++++++++++++-
components/Menu/src/types.d.ts | 4 +++
components/Popover/src/index.svelte | 21 ++++++++++-----
3 files changed, 59 insertions(+), 7 deletions(-)
diff --git a/components/Menu/src/item.svelte b/components/Menu/src/item.svelte
index 6a2f30ca..d0077bea 100644
--- a/components/Menu/src/item.svelte
+++ b/components/Menu/src/item.svelte
@@ -1,5 +1,5 @@
{#each itemsList as it, index (it.uid)}
@@ -461,4 +489,85 @@
{/if}
+
+ {#if ctxProps.mode === 'horizontal'}
+
+
+ {#if it.type !== 'divider'}
+ handleSelect(it, e)}
+ aria-hidden="true"
+ style:padding-left={`${getIndent(it)}`}
+ class={cnames(it)}
+ {...$$restProps}
+ {...attrs}
+ >
+
+
+
+ {#if it.icon}
+
+ {/if}
+
+ {it.label}
+
+
+ {#if hasSub(it) && !isGroup(it) && level !== 1}
+
+
+
+ {/if}
+
+
+ {:else}
+
+ {/if}
+
+
+
+ handleSelectedRecursion(e, index)}
+ items={it.children}
+ level={getLevel(it, level) + 1}
+ >
+
+
+
+
+ {#if item.icon}
+
+ {/if}
+
+ {item.label}
+
+ {#if hasSub(item)}
+
+
+
+ {/if}
+
+
+
+
+
+
+ {/if}
{/each}
diff --git a/components/Menu/src/types.d.ts b/components/Menu/src/types.d.ts
index 96f1f89c..16afd36e 100644
--- a/components/Menu/src/types.d.ts
+++ b/components/Menu/src/types.d.ts
@@ -60,6 +60,7 @@ export type KMenuProps = {
ctxKey?: string;
/**
* TODO: 👀 展开图标
+ * TODO: 展开图标 horizontal(more menu 展示)
* @default 'i-carbon-chevron-down'
*/
expandIcon?: string;
@@ -233,8 +234,11 @@ export type SubMenuType = {
// TODO: onTitleClick 点击子菜单标题
// TODO: 🎯Items Slots slots label 分组标题 vertical
-// TODO: Items Slots slots label 分组标题 horizontal
+// TODO: 🎯Items Slots slots label 分组标题 horizontal
// TODO: 🎯Items Slots slots label 分组标题 inline
// TODO: 👀 Items Slots slots icon 菜单图标 vertical
// TODO: Items Slots slots icon 菜单图标 horizontal
// TODO: 👀 Items Slots slots icon 菜单图标 inline
+
+// 🎯 TODO horizontal 缩略适配
+// 🎯 TODO 所有 👀 功能
diff --git a/preset/src/shortcuts/src/common.ts b/preset/src/shortcuts/src/common.ts
index 44f00c14..f8dc7fe4 100644
--- a/preset/src/shortcuts/src/common.ts
+++ b/preset/src/shortcuts/src/common.ts
@@ -40,6 +40,7 @@ export const commonShortcuts: UserShortcuts = {
'n-bdl-1': 'border-l-0 border-t-1 border-b-1 border-r-1',
'bd-2': 'border-t-2 border-l-2 border-b-2 border-r-2',
'bdl-2': 'border-l-2 border-t-0 border-b-0 border-r-0',
+ 'bdb-2': 'border-l-0 border-t-0 border-b-2 border-r-0',
'bdtr-2': 'border-l-0 border-t-2 border-b-0 border-r-2',
'bd-3': 'border-t-3 border-l-3 border-b-3 border-r-3'
};
diff --git a/preset/src/shortcuts/src/menu.ts b/preset/src/shortcuts/src/menu.ts
index e4a8a809..2cc9ddcb 100644
--- a/preset/src/shortcuts/src/menu.ts
+++ b/preset/src/shortcuts/src/menu.ts
@@ -12,24 +12,40 @@ export const menuShortcuts: Record = {
'k-menu-sub': 'border-none bg-transparent',
'k-menu-sub-bg': 'ikun:2:bg-black',
- '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-selected-ih': 'text-ikun-main',
- 'k-menu-item-hover-ih': 'hover:(ikun:6:bg-ikun-black)',
- 'k-menu-item-vh-child': 'justify-between',
+ 'k-menu-item-selected-group': 'text-ikun-main',
+ 'k-menu-item-hover': 'hover:(ikun:6:bg-ikun-black)',
- '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-selected-after':
+ 'after:(content-empty pa bottom-0 bdb-2 border-solid b-b-ikun-main w-full left-0 animate-ikun-scale)',
+ 'k-menu-item-selected-h': 'text-ikun-main k-menu-item-selected-after',
+ 'k-menu-item-selected-group-h': 'text-ikun-main k-menu-item-selected-after',
+ 'k-menu-item-hover-h': 'hover:(k-menu-item-selected-after)',
- 'k-menu-item-popover-trigger-v': 'box-border my-4px',
+ 'k-menu-item-child': 'justify-between',
+
+ 'k-menu-vertical': 'bdr-1 b-e-solid border-ikun-bd-base',
+ 'k-menu-item-popover-trigger-vertical': 'box-border my-4px',
'k-menu-item-vertical': 'k-menu-item-inline my-0',
'k-menu-item-vertical-group':
'k-menu-w k-menu-transition ' +
'flex items-center pr h-40px leading-40px list-inside ps-16px p-ie-16px m-is-4px m-ie-4px ' +
'rounded-8px ikun:50:text-black',
+ 'k-menu-horizontal': 'bdb-1 b-e-solid border-ikun-bd-base flex [&.k-menu-sub-horizontal]:block',
+ 'k-menu-item-popover-trigger-horizontal': 'box-border my-4px',
+ 'k-menu-item-popover-content': 'p-0 box-border',
+ 'k-menu-item-horizontal':
+ 'cursor-pointer k-menu-w k-menu-transition ' +
+ 'flex items-center pr h-40px leading-40px list-inside ps-16px p-ie-16px m-is-4px m-ie-4px my-4px ' +
+ 'rounded-8px my-0',
+ 'k-menu-item-horizontal-not-top': 'k-menu-item-horizontal active:(ikun:20:bg-ikun-main)',
+ 'k-menu-item-horizontal-group':
+ 'k-menu-w k-menu-transition ' +
+ 'flex items-center pr h-40px leading-40px list-inside ps-16px p-ie-16px m-is-4px m-ie-4px ' +
+ 'rounded-8px ikun:50:text-black',
+
+ 'k-menu-inline': 'bdr-1 b-e-solid border-ikun-bd-base',
'k-menu-item-inline':
'cursor-pointer k-menu-w k-menu-transition ' +
'flex items-center pr h-40px leading-40px list-inside ps-16px p-ie-16px m-is-4px m-ie-4px my-4px ' +
diff --git a/preset/src/theme/index.ts b/preset/src/theme/index.ts
index cffdbd44..fea255cb 100644
--- a/preset/src/theme/index.ts
+++ b/preset/src/theme/index.ts
@@ -123,6 +123,16 @@ const getAnimation = (themeColor: string) => {
'ikun-skeleton-loading': `{
0% { background-position: 100% 50%;}
100% { background-position: 0 50%; }
+ }`,
+ 'ikun-scale': `{
+ from {
+ transform: scale(0);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
}`
},
durations: {
@@ -134,7 +144,8 @@ const getAnimation = (themeColor: string) => {
'ikun-checking-main': '.3s',
'ikun-checking': '.3s',
'ikun-switching': '.3s',
- 'ikun-skeleton-loading': '1.4s'
+ 'ikun-skeleton-loading': '1.4s',
+ 'ikun-scale': '.3s'
},
timingFns: {
'ikun-clicking--success': 'linear',
@@ -146,7 +157,8 @@ const getAnimation = (themeColor: string) => {
'ikun-clicking': 'linear',
'ikun-checking': 'linear',
'ikun-switching': 'linear',
- 'ikun-skeleton-loading': 'ease'
+ 'ikun-skeleton-loading': 'ease',
+ 'ikun-scale': 'forwards'
},
counts: {
'ikun-skeleton-loading': 'infinite'
From a1a40a42f731c2159c6e45062ceb8e693770c969 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Tue, 23 Apr 2024 18:00:45 +0800
Subject: [PATCH 32/39] wip: optimization the styling of the KMenu component in
horizontal mode
---
components/Menu/src/index.svelte | 1 -
components/Menu/src/item.svelte | 18 +++++++++++++-----
components/Menu/src/types.d.ts | 8 ++++----
preset/src/shortcuts/src/menu.ts | 10 ++++++----
4 files changed, 23 insertions(+), 14 deletions(-)
diff --git a/components/Menu/src/index.svelte b/components/Menu/src/index.svelte
index 4456d399..040d1bf0 100644
--- a/components/Menu/src/index.svelte
+++ b/components/Menu/src/index.svelte
@@ -87,7 +87,6 @@
{
return clsx(`${menuPrefixCls}-sub`, `${menuPrefixCls}-sub-${ctxProps.mode}`, {
[`${menuPrefixCls}-sub-bg`]: !isGroup
@@ -316,7 +319,12 @@
};
const popoverContentCls = clsx(`${prefixCls}-popover-content`);
- const popoverTriggerCls = clsx(`${prefixCls}-popover-trigger-${ctxProps.mode}`);
+ const popoverTriggerCls = (isDivider: boolean = false) => {
+ return clsx({
+ [`${prefixCls}-popover-trigger-${ctxProps.mode}`]: !isDivider && isNotHorizontalTop(),
+ [`${prefixCls}-popover-trigger-${ctxProps.mode}-divider`]: isDivider && !isNotHorizontalTop()
+ });
+ };
$: getIndent = (it: SubMenuType) => {
if (ctxProps.mode === 'horizontal' && level === 1) return '16px';
if (ctxProps.mode !== 'inline') {
@@ -422,7 +430,7 @@
mouseLeaveDelay={ctxProps.subMenuCloseDelay}
trigger={ctxProps.triggerSubMenuAction}
cls={popoverContentCls}
- clsTrigger={popoverTriggerCls}
+ clsTrigger={popoverTriggerCls(false)}
disabled={!(hasSub(it) || isGroup(it))}
>
@@ -503,7 +511,7 @@
mouseLeaveDelay={ctxProps.subMenuCloseDelay}
trigger={ctxProps.triggerSubMenuAction}
cls={popoverContentCls}
- clsTrigger={popoverTriggerCls}
+ clsTrigger={popoverTriggerCls(it.type === 'divider')}
disabled={!(hasSub(it) || isGroup(it))}
>
@@ -534,7 +542,7 @@