ui-arch-bot
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { h, signal } from '@ui-arch/frame';
|
|
import type { AccordionItem, AccordionProps } from './types.js';
|
|
|
|
/*** 折叠面板：标题按钮 + grid 行高过渡；单开（手风琴）或多开，展开态由 active 信号驱动或内部持有 ***/
|
|
export function accordion(props: AccordionProps): HTMLElement {
|
|
// —— 状态集中声明 ——
|
|
const internal = signal<string[]>([]); // 内部展开集合（未传 active 时使用）
|
|
const opened = (v: string): boolean => (props.active ? props.active() === v : internal().includes(v));
|
|
|
|
const toggle = (item: AccordionItem): void => {
|
|
if (props.active) {
|
|
const next = props.active() === item.value ? '' : item.value; // 单开：再点收起
|
|
props.active(next);
|
|
props.onChange?.(next);
|
|
return;
|
|
}
|
|
const cur = internal();
|
|
const next = cur.includes(item.value)
|
|
? cur.filter((v) => v !== item.value)
|
|
: props.multiple
|
|
? [...cur, item.value]
|
|
: [item.value];
|
|
internal(next);
|
|
props.onChange?.(next[0] ?? '');
|
|
};
|
|
|
|
// —— 面板：标题为原生 button（键盘可达），内容包一层 overflow 容器供过渡裁剪 ——
|
|
const rows = props.items.map((item, i) =>
|
|
h(
|
|
'div',
|
|
{ class: () => `ua-acc-item${opened(item.value) ? ' ua-open' : ''}` },
|
|
h(
|
|
'button',
|
|
{
|
|
type: 'button',
|
|
class: 'ua-acc-head',
|
|
id: `ua-acc-h-${i}`,
|
|
'aria-expanded': () => String(opened(item.value)),
|
|
'aria-controls': `ua-acc-b-${i}`,
|
|
disabled: item.disabled ?? false, // 布尔透传即得禁用态
|
|
onClick: () => toggle(item),
|
|
},
|
|
h('span', { class: 'ua-acc-title' }, item.title),
|
|
h('span', { class: 'ua-acc-caret' }, '▸'),
|
|
),
|
|
h(
|
|
'div',
|
|
{ class: 'ua-acc-body', id: `ua-acc-b-${i}`, role: 'region', 'aria-labelledby': `ua-acc-h-${i}` },
|
|
h('div', { class: 'ua-acc-inner' }, item.content),
|
|
),
|
|
),
|
|
);
|
|
|
|
return h('div', { class: 'ua-accordion' }, ...rows);
|
|
}
|