HIsheR
18 lines
932 B
TypeScript
18 lines
932 B
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { BadgeProps } from './types.js';
|
|
|
|
/*** 徽标：文字 / 数字角标 / 纯红点三种形态，variant 决定语义色，纯展示不持有状态 ***/
|
|
export function badge(props: BadgeProps): HTMLElement {
|
|
const tone = `ua-badge ua-badge-${props.variant ?? 'default'}`;
|
|
if (props.dot) {
|
|
// 红点：无可见文字，靠 aria-label 给出含义（如「有未读」）
|
|
return h('span', { class: `${tone} ua-badge-dot`, role: 'img', 'aria-label': props.label ?? '有更新' });
|
|
}
|
|
if (props.count != null) {
|
|
const max = props.max ?? 99; // 缺省上限 99
|
|
const shown = props.count > max ? `${max}+` : String(Math.max(0, props.count)); // 负数归零，超限折成 N+
|
|
return h('span', { class: `${tone} ua-badge-count`, 'aria-label': props.label ? `${props.label} ${shown}` : undefined }, shown);
|
|
}
|
|
return h('span', { class: tone }, props.label);
|
|
}
|