@ duskmoon- dev/ 组件
黄昏月回放组件包.
安装
bun add @duskmoon-dev/components @duskmoon-dev/core react react-dom
在您的应用程序中导入样式表一次 :
import "@duskmoon-dev/components/styles.css";
特征
- 反应19准备: 组件和示例针对当前 React 运行时间.
- 先输入脚本:公用道具和助手API有申报.
- 模块导出: 从根包或组件子路径导入.
- 黄昏月亮造型: 组件类别和CSS由
@duskmoon-dev/core。 。 。 .
使用量
import "@duskmoon-dev/components/styles.css";
import { Button } from "@duskmoon-dev/components/button";
export default function MyComponent() {
return <Button>Hello World</Button>;
}
根导入也得到支持:
import { Button, DmTable, theme } from "@duskmoon-dev/components";
公众表面
- 79个标准部件,如
Button, (中文(简体) ),Chat, (中文(简体) ),OtpInput, (中文(简体) ),Swap, (中文(简体) ),Fab, (中文(简体) ),Megamenu, (中文(简体) ),ConsolePage, (中文(简体) ),Table, (中文(简体) ),Modal, (中文(简体) ),Select,以及Typography。 。 。 . - 21 DuskMoon工作流程组件,例如
DmLayout, (中文(简体) ),DmSearch, (中文(简体) ),DmTable, (中文(简体) ),DmProTable,以及DmToolbar。 。 。 . - 13个基础设施出口,包括:
theme, (中文(简体) ),version, (中文(简体) ),unstableSetRender, (中文(简体) ),GetProps, (中文(简体) ),GetRef,以及 DuskMoon 主题助手. - 组件子路径导出如下
@duskmoon-dev/components/{component-id}, (中文(简体) ), 比如说@duskmoon-dev/components/date-picker。 。 。 .
OtpInput 使用一个带有装饰槽的本地输入. Swap 使用本地语言
复选框. Fab, (中文(简体) ), Megamenu移动菜单 ConsolePage 使用该
浏览器的"Popover API"用于开机,"逃生"解职,以及焦点恢复.
这些组成部分要求 @duskmoon-dev/core 1.20.0或较新.
Form.Item 将其标签与单一儿童控制联系起来
现有儿童 id对于复合控制,通过 htmlFor 目标
控制系统 id。 。 。 . Badge appearance="outline" 输出两者 badge-outlined 财务报告和审定财务报表
支持对象 badge-outline 别名.
Chat.Scroll 提供有粘接回放铁路的固定高度记录.
配对助手行和指示按钮,时间档为 1–24;用户行
不需要勾选. Chat.Status 财务报告和审定财务报表 Chat.Actions 接受普通内容和
按钮召回,所以应用程序拥有生成状态和度量. 这个
聊天文件包括RTL、活状态、工具状态、消息动作和核心
1.20.6 代理,队列和长信息合同. 使用 Chat.Agent 与
Chat.Content 用于未装箱的助手回答。 土著群体活动
Chat.Work, (中文(简体) ), Chat.WorkSummary 财务报告和审定财务报表 Chat.WorkBody 披露,保留最终
回答他们。 使用用户信息 Chat placement="end" 财务报告和审定财务报表 Chat.Bubble· ;
选择加入 collapsible 用于自动六行测量、调整大小/文本更新,
无障碍扩展和重点清理。 包裹现在需要核心1.21.1,
提供了共享的编译器编辑器、附件、建议和状态部分.
Chat.InputArea 附加受控 Chat.Queue 改为本地
Chat.ComposerForm, (中文(简体) ), Chat.ComposerInput, (中文(简体) ), Chat.ComposerActions 财务报告和审定财务报表
Chat.ComposerHint 原始的 原始的 原始的 队列项目稳定 id编号 :text 价值和价值
选项 { src, alt } 附录. onSteer 财务报告和审定财务报表 onRemove 请求申请
动作; 元件从不在本地调队。 供应 pendingIds 等待期间
只有在成功后才承认和更新项目。 删除后恢复焦点
一个焦点行,并在申请状态区域中一次宣布队列变化.
应用程序拥有 Enter/Shift+ Enter/stering, IME 守护, 运输, 订购
和失败政策。 互动文件显示了这些实际状态变化.
现有控制 Chat.Composer 保留其参考文献、附件和
完成 API 、 修订安全同步的草稿清除和 Cmd/Ctrl+ 输入
以普通格式提交 Enter for new lines。 使用本地作曲原创
当需要提交表格和参考文献的“从输入到排队”合同时.
供应 scope={{ contextKey, conversationId }} 重用 作曲器时
寄存器或对话框: 逾期接受或错误
范围无法清除当前草案或调用其错误处理器。 待录取
叶可编辑. 主机仍然拥有被控制的草稿和文件.
作曲者动作使用可访问名称的图标按钮和 title 两者中的提示
排布图. attachLabel, (中文(简体) ), sendLabel 财务报告和审定财务报表 stopLabel 自定义这些名称和提示.
附件重试/取消/删除和默认队列动作遵循相同的模式 .
共享作曲作曲编曲为0.5rem.
设定 compact 打开 Chat.Composer, (中文(简体) ), ChatSessionComposer 或者说 RichChatComposer
带有无障碍图标按钮和水平条的紧凑工具栏
简单的现成图像缩略图。 混合文件、准备、错误和自定义
附件渲染器保留整行。 默认的包装布局仍然保留
可用。 通过主机所属设置编译 children,使用 Core 本地语言
popover chat-composer-menu 当需要配置菜单时.
契约 + 打开文件的本地添加菜单, 明确的草稿保存/ 重新装入
和可选 addMenu 内容。 常规保存/接纳状态不发布
添加行数。 它的主按钮发送合格草稿或停止运行回合
当无法提交时;默认布局保留单独的控制.
根状和 /chat 导出还提供独立编辑器 ComposerDocument, (中文(简体) ),
ComposerDraft、提交/接收、提供者、附件和队列类型.
readComposerDocument 财务报告和审定财务报表 readComposerDraft 保存不兼容的输入
复原; snapshotComposerDocument 财务报告和审定财务报表 snapshotComposerSubmission 验证,
复制并冻结便携式JSON. exportComposerText 财务报告和审定财务报表 exportComposerMarkdown
项目参考文献 plainText 并保留引号归属。 无效
快照抛出而不是默默地丢弃未支持的字段 。 可移植
实例公布于 @duskmoon-dev/components/chat/contracts.v1.json。 。 。 .
ChatSessionComposer 使用带有受控制语义文件的合同,
应用程序拥有 ComposerSessionHost、范围和钥匙草稿。 原画
字符串/ 基于文件 Chat.Composer 现有参考文献
召回电话。 可选编辑器单独导入:
import { useState } from "react";
import type {
ComposerDocumentUpdate,
ComposerScope,
ComposerSessionHost,
} from "@duskmoon-dev/components/chat";
import { RichChatComposer } from "@duskmoon-dev/components/chat/rich";
export function PromptBox({
host,
scope,
}: {
host: ComposerSessionHost;
scope: ComposerScope;
}) {
const [value, setValue] = useState<ComposerDocumentUpdate>({
document: { schemaVersion: 1, content: [{ type: "text", text: "" }] },
revision: 0,
origin: "replace",
originId: "initial-draft",
});
return (
<RichChatComposer
value={value}
onDocumentChange={setValue}
scope={scope}
draftKey="main-prompt"
host={host}
/>
);
}
使用 ChatSessionComposer 从根或 /chat 仅限文本的相同道具
语义作稿. RichChatComposer 只能从 /chat/rich保留
消费者中同样直接导入Lexical的单相容的Lexical运行时间;
普通根和 /chat 进口不会初始化.
每一个回声 onDocumentChange 更新情况不变。 丰富的编辑器保留选择
并取消回声; 明确替换、恢复、范围开关和清晰操作
重设其历史. 重载还原语义内容, 而不是取消历史 。 参考文件
插入引用、引用、文本和请求的命令,而不披露Lexical.
引用和引用是原子学. 声称的命令身份与
可编辑技能文本。 丰富的副本/剪接包括便携式语义内容和平面
文本; 丰富的粘贴创建了新的出现 ID, 而外部粘贴则使用纯
语句。 混合文件/文本粘贴通过共享保存文本并验证文件
拾取/粘贴/投放政策。 不支持的内容留作回收之用
如果编辑器无法装入或草稿不兼容,则会静静地平地.
保留 host.recovery = createComposerRecoveryOwner() 编辑器挂载外
一辈子 待决和未知的企图保留了完全不可更改的划界案
快照和身份证 经接受的及时报告实际提交和持续;
一个被接受的命令返回一个结果,而不要求队列的即时或转动.
未知结果保存草稿:使用 host.reconcile 在任何时间之前
明确 host.authorizeRetry 同样的快照。 录取尚未完成
生成。 停车是分开的 onStop 动作,在文件时仍然可用
正在筹备或接收。 主机能力决定哪个活动回合
意图和控制是可用的.
可选 attachmentOptions 校验和准备每个文件发生, 使用
取消、进展、失败和重试。 只允许手柄输入一个
提交; 运行时间 File 对象和预览 URL 远离已保存的文档.
恢复的文件需要重新附加, 除非主机明确确认手柄
复原。 稳定的可选 draftAdapter 装入范围草案并支持明确
保存草稿; 存储耐用性、 保留和与其他作者的协调
属于应用程序。 UI 从未自动覆盖不兼容
存储内容.
providers 提供同步候选人范围、已停用的原因、目录
钻入/启动动作。 在紧凑模式下,结果在本地打开
弹出在作曲家上方,有分组行,键盘导航,过滤和
当地解雇。 可选提供者 icon 财务报告和审定财务报表 sourceLabel 装饰行;
它们从未输入便携式文件或呈件。 使用线索 / 提供者
技能和命令: 技能插入可编辑的指令, 富人声称
命令在提交前保留其身份,以及 invoke 动作呼叫
onProviderInvoke 独立。 纯编辑器支持文本技能和主机
引用;声称的命令需要富人编辑.
主机决定并授权引用,
引用出处、命令和附件控件;便携式有效性不是
授权. ChatAuthoritativeQueue 作出确认的预测和请求
编辑/删除/促进突变。 应用犬类预测
onProjection;乐观的点击不能确认成员或顺序.
ComposerSettings 同样,在主机确认之前,对数值进行控制
并应用请求。 主机拥有运输,模型执行,上传,
专一、坚持和执行政策。 Chat 文档包括
具有真实本地状态过渡的交互式假主机实例; 它们的内存
存储幸存的编辑器只重新挂载,不提出持久交货要求.
设置菜单、上下文和时间表批准
核心 1.21.5或更新 需要时间。 从包根导入这些 API 或
@duskmoon-dev/components/chat; 导入 @duskmoon-dev/components/styles.css
用于完整的 Core 和 React 样式表.
ComposerSettings variant="menu" 使用相同的序列化请求、修订、,
中止并承认协议为默认选择的演示文稿 。 选择
接受元数据 description, (中文(简体) ), tone="warning" 财务报告和审定财务报表 icon。一个 ordered 设置
选择一个范围,并要求更改指针/键释放;
defaultValue 启用重置 . groups 组合 settingIds 在扳机下,
可选 nestedSettingIds 财务报告和审定财务报表 appearance="access" | "model"数值
仍由东道方控制,包括拒绝或陈旧的承认.
菜单在选择后关闭; 状态反馈仍然在它们之外宣布 .
两者 Chat.Composer 财务报告和审定财务报表 ChatSessionComposer 接受 context,第一个
在作曲家内部 编曲 Chat.ComposerContext, (中文(简体) ), Chat.ComposerContextItem, (中文(简体) ),
Chat.ComposerContextEnd 财务报告和审定财务报表 Chat.ComposerConnection 在这里。 项目接受
icon 和可选 action 需要无障碍 label 财务报告和审定财务报表 onClick。 。 。 .
连接 state 实值 connected, (中文(简体) ), connecting 或者说 disconnected· ; label
自定义其可见状态。 Core 加入 栏 默认、 紧凑和 幽灵
使用共享套件的作曲面;不需要额外的消费CSS.
地点 Chat.Request 旁边 Chat.Tool 内部 Chat.Agent供应a title, (中文(简体) ),
细节和命令 actions (单位:千美元)id, (中文(简体) ), label, (中文(简体) ), onSelect选项
tone="primary" | "danger") (中文(简体) ). 主机拥有 pending 决定和决定 state数字 :
pending, (中文(简体) ), approved, (中文(简体) ), approved-for-session, (中文(简体) ), declined, (中文(简体) ), expired 或者说
answer-elsewhere. 只有待决国家采取行动; pending 禁用
当他们决定的时候. explanation 财务报告和审定财务报表 statusLabel 提供主机
环境与本地化状况。 状态更新是礼貌的; 收到的更新永远不会
将焦点移出作曲者。 如果决议删除了重点决定,则焦点
继续按这个要求进行而不滚动.
核心1.21.1仍有已知的月光对比差距,用于中性平面/幽灵 标签(黄昏月桂#78) (中文(简体) ). 在要求完全调色板无障碍之前,需要上游固定.
现有 Chat.Bubble streaming 仍可使用; Chat.Content streaming 这是
首选代理演示文稿。 公共Chat API不被删除或贬值.
常规 Tooltip 按钮/链接触发器使用本地 interestfor,提示弹出器
还有CSS主播 浏览器必须支持这些 API; 没有特性多填充 .
保持必要的帮助内线。 已控制 open 使用本地手动弹出器;
非投票儿童保留旧的必备兼容适配器。 自定义
触发组件必须转发 interestfor, (中文(简体) ), style 财务报告和审定财务报表 aria-describedby
让他们自己控制自己 工具提示内容简短且不互动;设置链接,
按钮和确认表。 现有贬值
arrow 道具仍被接受;原生地表为无箭.
import { Chat } from "@duskmoon-dev/components/chat";
import { useId } from "react";
export function Conversation() {
const replyId = useId();
async function copyReply() {
await navigator.clipboard.writeText("The build passed.");
}
return (
<Chat.Scroll style={{ height: 320 }} aria-label="Conversation">
<Chat.ScrollTrack aria-label="Assistant replies">
<Chat.ScrollIndicator timeline={1} targetId={replyId} />
</Chat.ScrollTrack>
<Chat.ScrollBody>
<Chat.Agent id={replyId} timeline={1}>
<Chat.Content>The build passed.</Chat.Content>
<Chat.Status>
<Chat.StatusItem>Completed</Chat.StatusItem>
<Chat.StatusItem>
<Chat.StatusValue>42</Chat.StatusValue> token/s
</Chat.StatusItem>
</Chat.Status>
<Chat.Actions hover>
<button type="button" onClick={copyReply}>
Copy reply
</button>
</Chat.Actions>
</Chat.Agent>
</Chat.ScrollBody>
</Chat.Scroll>
);
}
Modal 需要一个具有本地特性的现代浏览器 <dialog> 支助。 它打开
关闭通过 showModal() 财务报告和审定财务报表 close(),而其转发的参考和分配道具
留在内模式框中。 受控呼叫者必须更新 open 内
onCancel· ; maskClassName 用于对话框 ::backdrop 发型.
静态 Modal.confirm, (中文(简体) ), info, (中文(简体) ), success, (中文(简体) ), error,以及 warning 手柄
继续出口,但尚未形成服务表面.
发展
# Build the package
bun run build
# Run tests
bun run test
# Typecheck
bun run typecheck
# Check parity manifest coverage
bun run parity:components
JSON 舍马表
@duskmoon-dev/components/json-schema-form 出口 JsonSchemaForm, (中文(简体) ),
compileForm, (中文(简体) ), JsonSchemaWidget,则 RenderableSchema, (中文(简体) ), CompiledForm, (中文(简体) ),
FormValue, (中文(简体) ), JsonValue, (中文(简体) ), FormErrors, (中文(简体) ), FormValidationResult, (中文(简体) ),
JsonSchemaFormProps, (中文(简体) ), JsonSchemaWidgetProps,以及部件合同类型.
Ajv和ajv格式作为软件包运行时的依赖性被安装. 包裹
样式表包括渲染器布局。 从显式导入这些 API
子路径; 计划汇编与根组件捆绑分开 .
import { useState } from "react";
import "@duskmoon-dev/components/styles.css";
import {
JsonSchemaForm,
type FormErrors,
type FormValue,
type RenderableSchema,
} from "@duskmoon-dev/components/json-schema-form";
const schema: RenderableSchema = {
type: "object",
required: ["name"],
properties: {
name: { type: "string", title: "Name", minLength: 1 },
age: { type: "integer", title: "Age", minimum: 0 },
},
};
export function ProfileIsland({ send }: { send: (value: FormValue) => void }) {
const [value, setValue] = useState<FormValue>({ name: "Ada" });
const [errors, setErrors] = useState<FormErrors>({});
return (
<JsonSchemaForm
schema={schema}
value={value}
onChange={setValue}
errors={errors}
onErrorsChange={setErrors}
onSubmit={send}
/>
);
}
在 LiveView 元素内挂载反应根, 使其稳定 id 财务报告和审定财务报表
phx-update="ignore"分析后端的 JSON 计划并呼叫 compileForm
; 在渲染前抓取编译错误.
传回对象为 compiled 改为 schema 编译一次.
从 onSubmit 通过岛上的活维尤钩;
仍然需要后端验证 。 使用新反应 key 替换时
计划并开始新的形式.
value 财务报告和审定财务报表 onChange 控制值。 奥米 value 内部状态,可选
种子来源于 defaultValue重置还原 defaultValue 或计谋不测,
通知 onChange,清除验证错误,并调用 onReset后端
errors 与本地错误合并, 并使用脱逃的 JSON 指针键, 如
/address/email (空密钥表示窗体错误). 清除后端错误
onErrorsChange,在编辑/重置和验证时接收空对象
提交错误. onSubmit 仅运行有效的值并收到
复制带有数字和布林的 JSON 对象.
支持的 schema 是一个严格的 JSON Schema 草稿 2020-12 子集: 对象根,
需要嵌入的物体、同质阵列、原始字段/数字/默认
字段,则, additionalProperties: false,字符串限制/格式,数字
限制,以及阵列/对象大小限制。 参考资料、组合器、,
无效类型和任意关键字被拒绝 。 验证不强迫,
删除或默认提交值 .
使用 x-widget 用于明确的组件选择, x-options 用于输入选项
标签/等级,以及 x-widget-options 指向 长度 计数,
允许 Half, min, max, 并在所支持的位置步入 . widgetNames, (中文(简体) ), WidgetName, (中文(简体) ),
WidgetOption, (中文(简体) ), WidgetConfig,以及 OrientationWidgetConfig 揭开这个
合同; compileForm 检查部件/类型/配置兼容性。 上传部件
提交 JSON 文件元数据( S)name, (中文(简体) ), size, (中文(简体) ), type, (中文(简体) ), lastModified),带有文件
由应用程序拥有的转让.