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 }; };