litui

基于 Lit Web Components 的通用 UI 组件库。

安装

npm install litui

使用

import 'litui';
import 'litui/styles';

<lui-button variant="primary">点击我</lui-button>
<lui-input placeholder="请输入名称"></lui-input>
<lui-dialog open title="提示">这是一个对话框</lui-dialog>

表单校验

lui-form 推荐只使用 validator / validators 定义校验，优先传入 Standard Schema（如 Zod）。

不再推荐使用字段上的旧式校验配置来表达表单校验。

命令式 API

推荐优先使用 controller-first 方式：

• createDialog()
• createForm()
• createDialogForm()
• createPopover()
• createCommandPalette()
• createContextMenu()
• createToastHost()

统一生命周期：

• mount()
• show()
• hide()
• update()
• destroy()

结果型 overlay 统一通过 closed 读取结果：

• dialog.open()
• form.open()
• popover.open()
• commandPalette.open()

全局清理 / 重置也提供了快捷 API：

• dialog.closeAll()
• drawer.closeAll()
• popover.closeAll()
• commandPalette.closeAll()
• contextMenu.hideAll()
• toast.clearAll()

contextMenu.show() / showContextMenu()、toast.show() 这类 API 仍可使用，但更适合作为一次性 sugar。createDialogForm() / form.open() 返回的 controller 也支持直接调用 submit / validate / getValues / setValues / reset，不必总是走 controller.form.xxx()。

开发

pnpm storybook
pnpm typecheck
pnpm build
pnpm build-storybook