-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
feat(admin/components/tree/menu): 添加新组件 menu
Showing
14 changed files
with
257 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# tree | ||
|
||
当前目录提供了一些树形结构的组件 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// SPDX-FileCopyrightText: 2024 caixw | ||
// | ||
// SPDX-License-Identifier: MIT | ||
|
||
export type { Item } from './item'; | ||
|
||
export * from './list'; | ||
export * from './menu'; | ||
|
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
// SPDX-FileCopyrightText: 2024 caixw | ||
// | ||
// SPDX-License-Identifier: MIT | ||
|
||
import { createSignal } from 'solid-js'; | ||
|
||
import { paletteSelector } from '@/components/base/demo'; | ||
import { Item } from '@/components/tree/item'; | ||
import { default as Menu } from './menu'; | ||
|
||
export default function() { | ||
const [paletteS,palette] = paletteSelector('primary'); | ||
const items: Array<Item> = [ | ||
{type: 'item', value: 'v1', label: 'v1'}, | ||
{type: 'item', value: 'v2', label: 'v2'}, | ||
{type: 'item', value: 'v3', label: 'v3'}, | ||
{type: 'divider'}, | ||
{type: 'group', label: 'group', items: [ | ||
{type: 'item', value: 'v22', label: 'v22'}, | ||
{type: 'divider'}, | ||
{type: 'item', value: 'v23', label: 'v23', items:[ | ||
{type: 'item', value: 'v233', label: 'v233'}, | ||
{type: 'item', value: 'v234', label: 'v234', items: [ | ||
{type: 'item', value: 'v2341', label: 'v2341'}, | ||
{type: 'item', value: 'v2342', label: 'v2342'}, | ||
{type: 'divider'}, | ||
{type: 'item', value: 'v2343', label: 'v2343'}, | ||
]}, | ||
]}, | ||
]}, | ||
]; | ||
|
||
const [selected, setSelected] = createSignal<string>(); | ||
return <div class="flex flex-col gap-2"> | ||
{paletteS} | ||
|
||
<div class="w-80 mt-4"> | ||
<Menu palette={palette()} onChange={(v,old)=>setSelected(v.toString()+' '+old?.toString())}> | ||
{items} | ||
</Menu> | ||
<div>{ selected() }</div> | ||
</div> | ||
</div>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
// SPDX-FileCopyrightText: 2024 caixw | ||
// | ||
// SPDX-License-Identifier: MIT | ||
|
||
export { default as Menu } from './menu'; | ||
export type { Props as MenuProps } from './menu'; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
// SPDX-FileCopyrightText: 2024 caixw | ||
// | ||
// SPDX-License-Identifier: MIT | ||
|
||
import { createSignal, For, JSX, Match, mergeProps, Show, Switch } from 'solid-js'; | ||
|
||
import { BaseProps, renderElementProp } from '@/components/base'; | ||
import { Divider } from '@/components/divider'; | ||
import type { Item, Value } from '@/components/tree/item'; | ||
|
||
export interface Props extends BaseProps { | ||
/** | ||
* 子项 | ||
*/ | ||
children: Array<Item>; | ||
|
||
/** | ||
* 当选择项发生变化时触发的事件 | ||
*/ | ||
onChange?: { (selected: Value, old?: Value): void }; | ||
|
||
/** | ||
* 右侧展开子菜单的图标,默认为 chevron_right | ||
*/ | ||
expandIcon?: string | ||
} | ||
|
||
const defaultProps: Readonly<Partial<Props>> = { | ||
expandIcon: 'chevron_right' | ||
}; | ||
|
||
export default function (props: Props): JSX.Element { | ||
props = mergeProps(defaultProps, props); | ||
|
||
const [selected, setSelected] = createSignal<Value>(); | ||
|
||
const Items = (p: { items: Array<Item> }): JSX.Element => { | ||
return <For each={p.items}> | ||
{(item) => ( | ||
<Switch> | ||
<Match when={item.type === 'divider'}> | ||
<Divider /> | ||
</Match> | ||
<Match when={item.type === 'group'}> | ||
<Group item={item} /> | ||
</Match> | ||
<Match when={item.type === 'item'}> | ||
<I item={item} /> | ||
</Match> | ||
</Switch> | ||
)} | ||
</For>; | ||
}; | ||
|
||
// 渲染 type==item 的元素 | ||
const I = (p: { item: Item }) => { | ||
if (p.item.type !== 'item') { | ||
throw 'item.type 只能是 item'; | ||
} | ||
|
||
return <Switch> | ||
<Match when={p.item.items && p.item.items.length > 0}> | ||
<li class="item"> | ||
{renderElementProp(p.item.label)} | ||
<span class="tail material-symbols-outlined">{ props.expandIcon }</span> | ||
<Show when={p.item.items}> | ||
<menu class="c--menu hidden"> | ||
<Items items={p.item.items as Array<Item>} /> | ||
</menu> | ||
</Show> | ||
</li> | ||
</Match> | ||
<Match when={!p.item.items}> | ||
<li onClick={()=>{ | ||
if (p.item.type !== 'item') { throw 'p.item.type 必须为 item'; } | ||
|
||
const old = selected(); | ||
if (!props.onChange || old === p.item.value) { return; } | ||
|
||
setSelected(p.item.value); | ||
props.onChange(p.item.value, old); | ||
}} classList={{ | ||
'item': true, | ||
'selected': selected() === p.item.value | ||
}}> | ||
{renderElementProp(p.item.label)} | ||
</li> | ||
</Match> | ||
</Switch>; | ||
}; | ||
|
||
// 渲染 type==group 的元素 | ||
const Group = (p: { item: Item }): JSX.Element => { | ||
if (p.item.type !== 'group') { | ||
throw 'item.type 只能是 group'; | ||
} | ||
|
||
return <> | ||
<p class="group">{renderElementProp(p.item.label)}</p> | ||
<Items items={p.item.items} /> | ||
</>; | ||
}; | ||
|
||
return <menu role="menu" classList={{ | ||
'c--menu': true, | ||
[`palette--${props.palette}`]: !!props.palette | ||
}}> | ||
<Items items={props.children} /> | ||
</menu>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/* | ||
* SPDX-FileCopyrightText: 2024 caixw | ||
* | ||
* SPDX-License-Identifier: MIT | ||
*/ | ||
|
||
@layer components { | ||
.c--menu { | ||
@apply text-[var(--fg)] bg-[var(--bg)] flex flex-col gap-y-1 min-w-[200px] rounded-md; | ||
|
||
:first-child { | ||
@apply rounded-t-md; | ||
} | ||
|
||
:last-child { | ||
@apply rounded-b-md; | ||
} | ||
|
||
.item { | ||
@apply p-2 hover:bg-[var(--bg-low)] cursor-pointer relative flex; | ||
|
||
.tail { | ||
margin-left: auto | ||
} | ||
|
||
>.c--menu { | ||
@apply absolute left-[100%] top-0; | ||
} | ||
} | ||
|
||
.item:hover { | ||
>.c--menu { | ||
display: flex; | ||
} | ||
} | ||
|
||
.group { | ||
@apply text-[var(--fg-low)] cursor-default px-2; | ||
} | ||
|
||
.item.selected { | ||
@apply bg-[var(--bg-high)] text-[var(--fg-high)]; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters