HIsheR
37 lines
1.9 KiB
TypeScript
37 lines
1.9 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
||
import type { ListProps } from './types.js';
|
||
import { empty } from './empty.js';
|
||
|
||
/*** 列表：header/footer 外壳 + 逐条 items（avatar / title / description / extra），传 onItemClick 时条目可点击，无数据回落空状态 ***/
|
||
export function list(props: ListProps): HTMLElement {
|
||
// —— 状态集中声明 ——
|
||
const clickable = typeof props.onItemClick === 'function'; // 仅提供回调时才加可点击样式
|
||
const rootClass = props.bordered ? 'ua-list ua-list-bordered' : 'ua-list'; // 外边框由 bordered 决定
|
||
const root = h('div', { class: rootClass }) as HTMLElement; // 列表根容器
|
||
if (props.header) root.append(h('div', { class: 'ua-list-header' }, props.header));
|
||
if (!props.items.length) {
|
||
root.append(empty({ title: props.emptyText ?? '暂无数据' })); // 空列表复用空状态组件
|
||
return root;
|
||
}
|
||
const body = h('div', { class: 'ua-list-body', role: 'list' }) as HTMLElement; // 条目容器，供读屏识别列表语义
|
||
props.items.forEach((item, index) => {
|
||
const row = h(
|
||
'div',
|
||
{ class: clickable ? 'ua-list-item ua-list-clickable' : 'ua-list-item', role: 'listitem' },
|
||
item.avatar ? h('div', { class: 'ua-list-avatar' }, item.avatar) : null, // 左侧头像/图标，缺省不留位
|
||
h(
|
||
'div',
|
||
{ class: 'ua-list-main' },
|
||
h('div', { class: 'ua-list-title' }, item.title),
|
||
item.description ? h('div', { class: 'ua-list-desc' }, item.description) : null,
|
||
),
|
||
item.extra ? h('div', { class: 'ua-list-extra' }, item.extra) : null, // 右侧附加（时间、标签）
|
||
);
|
||
if (clickable) row.addEventListener('click', () => props.onItemClick?.(item, index)); // 点击回传条目与下标
|
||
body.append(row);
|
||
});
|
||
root.append(body);
|
||
if (props.footer) root.append(h('div', { class: 'ua-list-footer' }, props.footer));
|
||
return root;
|
||
}
|