HIsheR
26 lines
1.6 KiB
TypeScript
26 lines
1.6 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { DescriptionItem, DescriptionsProps } from './types.js';
|
|
|
|
/*** 单个描述项：字段名 + 字段值，span 控制跨列（超出列数时按整行处理） ***/
|
|
function cell(item: DescriptionItem, column: number): HTMLElement {
|
|
const cellEl = h('div', { class: 'ua-desc-item' },
|
|
h('div', { class: 'ua-desc-label' }, item.label),
|
|
h('div', { class: 'ua-desc-value' }, item.value));
|
|
cellEl.style.gridColumn = `span ${Math.min(item.span ?? 1, column)}`; // 跨列不越界
|
|
return cellEl;
|
|
}
|
|
|
|
/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态，layout=vertical 把字段名挪到值上方 ***/
|
|
export function descriptions(props: DescriptionsProps): HTMLElement {
|
|
const column = props.column ?? 3;
|
|
const vertical = props.layout === 'vertical' ? ' is-vertical' : '';
|
|
const grid = h('div', { class: `ua-desc ua-desc-${props.size ?? 'md'}${props.bordered ? ' is-bordered' : ''}${vertical}` },
|
|
...props.items.map((item) => cell(item, column)));
|
|
grid.style.setProperty('--ua-desc-col', String(column)); // 列数交给 CSS 变量，媒体查询可在窄屏覆盖
|
|
if (!props.title) return grid;
|
|
const head = props.extra // 标题行：给了操作区就左右分栏，否则保持原来的单标题结构
|
|
? h('div', { class: 'ua-desc-head' }, h('div', { class: 'ua-desc-title' }, props.title), h('div', { class: 'ua-desc-extra' }, props.extra))
|
|
: h('div', { class: 'ua-desc-title' }, props.title);
|
|
return h('div', { class: 'ua-desc-wrap' }, head, grid);
|
|
}
|