ui-arch-bot
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
||
import type { AlertProps } from './types.js';
|
||
|
||
/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/
|
||
export function alert(props: AlertProps): HTMLElement {
|
||
const body = h(
|
||
'div',
|
||
{ class: 'ua-alert-body' },
|
||
props.title ? h('div', { class: 'ua-alert-title' }, props.title) : null,
|
||
h('div', { class: 'ua-alert-message' }, props.message),
|
||
);
|
||
const el = h('div', { class: `ua-alert ua-alert-${props.variant ?? 'info'}`, role: 'alert' }, body);
|
||
|
||
if (!props.closable) return el; // 纯展示形态
|
||
el.append(
|
||
h(
|
||
'button',
|
||
{
|
||
type: 'button',
|
||
class: 'ua-alert-close',
|
||
'aria-label': '关闭提示',
|
||
onClick: () => {
|
||
el.classList.add('ua-alert-out'); // 先退场
|
||
window.setTimeout(() => el.isConnected && el.remove(), 200); // 过渡结束再摘除
|
||
props.onClose?.();
|
||
},
|
||
},
|
||
'×',
|
||
),
|
||
);
|
||
return el;
|
||
}
|