@manohub/ui 0.8.2 → 0.10.0

package/README.md

@@ -7,7 +7,7 @@ AIHub **自绘组件层**：不依赖 farris 的手写 Vue TSX 组件 + 自带
 | 层 | 入口 | 内容 |
 |---|---|---|
 | ① 主题 | `@manohub/theme/default.css`（兜底）/ `@manohub/theme/farris.css`（Farris 规范） | **全局**令牌（值）—— 随主题包独立发布，换主题只换这一行 |
-| ② 组件面 | `@manohub/ui/styles.css` | **元素级 reset**（盒模型 / 按钮外观 / 列表序号 / 链接下划线 / 标题字阶归零）+ 类与状态协议 + 组件令牌基础值，**无需 JS** 即可使用 |
+| ② 组件面 | `@manohub/ui/styles.css` | **元素级 reset**（只有盒模型 + 容器基座两面，见下）+ 类与状态协议 + 组件令牌基础值，**无需 JS** 即可使用 |
 | ③ Vue 层 | `@manohub/ui` | Vue 组件：渲染 ② 的类 + 行为增强 |
 | ④ 服务层 | `@manohub/ui` | 命令式反馈：`toast()` / `confirm()` / `alert()` / `showLoading()`（宿主 + 队列 + 生命周期，共用 ③ 的组件） |
 
@@ -37,13 +37,19 @@ pnpm add @manohub/ui @manohub/theme
 
 只写静态页（不装 Vue）时引这两行即可 —— 类名与 `data-*` 状态协议直接可用。
 
-**② 的第一条 import 就是元素级 reset**（随包内置，不需要第三行）：盒模型、按钮外观、
-`ul` / `ol` 的序号与缩进、`a` 的下划线、标题的默认字阶一并归零。作用域锚 `[data-manohub-ui]`
-且特异性为 0 —— 应用侧写任何元素选择器都能盖过它，所以**不必再自己写一份全局 reset**。
+**② 的第一条 import 就是元素级 reset**（随包内置，不需要第三行），它只有两面：
 
-唯一需要留意的是**富文本**：reset 之后 `ul` / `li` 没有圆点、`a` 没有下划线也没有链接色，
-需要富文本排版的页面请给自己的富文本容器类补回 `list-style` 与链接样式
-（富文本排版暂无合规归属，见 `@manohub/kit/CONTRACT.md` §10）。
+1. **盒模型**：`box-sizing: border-box` 覆盖容器、全部后代与伪元素（本包所有面的几何前提）；
+2. **容器基座**：`[data-manohub-ui]` 上的字族 / 字号 / 行高 / 字色 / 底色 / 整链高度（令牌的落点）。
+
+作用域锚 `[data-manohub-ui]` 且特异性为 0 —— 应用侧写任何元素选择器都能盖过它。
+**它有意不再归零标题字阶、列表序号、链接下划线、控件外观**：那些规则在 Tailwind 的层外
+（未分层 > 分层），会把消费方的工具类整片压住（`border*`、`img` 上的 `h-*`、`hidden` …）；
+需要归零的元素各自归到渲染它的组件面上（`img` 在 Avatar / Upload、`a` 在 Button、
+`textarea` 的 `resize` 在 `.mh-input--textarea`、`h1`-`h6` 在 `.mh-text`）。
+Tailwind 消费方另有 preflight 兜底，两者不冲突。
+
+所以**不必再自己写一份全局 reset**；也**不要**用元素级选择器去补（那正是被压住的成因）。
 
 本包**可独立发布**：组件与类型一律从 `@manohub/ui` 直接引；下游（如 `@manohub/kit`）若转出口，是下游自己的选择。
 
@@ -63,7 +69,7 @@ import { Card, Form, Tree, Checkbox } from '@manohub/ui'
 | 反馈与三态 | `Notice`（条状提示）、`Notification`（通知卡：标题 + 头像 / 标签 / 操作 / 关闭位）、`QueryState`（三态容器；内建空 / 错误插画取自设计交付的四张 SVG，原样内联在 `src/utils/state-illustration.ts`）、`Loading`（转圈 + 遮罩：行内 / 区域 / 全屏三形态） |
 | 反馈与引导（**自绘**） | `Toast`（消息提示：语义四档 / loading + 可选动作 + 自动消失计时 + `.Stack` 堆叠）、`Steps`（步骤条：节点式 / 燕尾段式 / `.Progress` 进度条） |
 | 数据展示（**自绘**） | `Table`（列 × 数据 + 选择列 + 排序事件 + 固定表头 / 固定列 + 批量栏 / 合计行；排序与列宽拖拽算法归调用方）、`Pagination`（总数 / 每页条数 / 页码窗口 / 简单档 / 外框档）、`TabBar`（下划线页签 + 「更多」收纳） |
-| 内容与文件 | `Code`（行内 chip / 代码块 + 语言角标 + 图标复制位，**只读展示**）、`CodeEditor`（等宽多行可编辑代码区：按行自适应 / 限高内滚 / 只读、禁用）、`Upload`（+ `.Thumbs`；拖拽 / 点击上传区 + 已传文件列表） |
+| 内容与文件 | `CodeBlock`（**一族三件**：组合件 `CodeBlock` 按 `editable` 切只读 / 编辑两形态；`.View` 只读展示 —— 行内 chip / 代码块 + 语言角标 + 图标复制位；`.Editor` 可编辑 —— 等宽多行 + 按行自适应 / 限高内滚 / 只读、禁用）、`Upload`（+ `.Thumbs`；拖拽 / 点击上传区 + 已传文件列表） |
 | 浮层（**自绘**） | `Dialog`（原生 `<dialog>` + 模态皮肤；关闭受控）、`Tooltip`（**零 JS**：显隐与定位全走操作层 hover 档） |
 | 操作层（跨件原语） | `Collapse`（+ `.Stack`）、`Tabs`（+ `TabPanel`，面板切换骨架 —— 显隐归组件层，非零 JS 原语）；浮层只提供样式层（`styles/operations/popup.css`，零 JS 可直接用），Vue 浮层仍用 farris 适配件 |
 

package/dist/components/button/index.d.ts

@@ -218,7 +218,7 @@ export declare const Button: import("vue").DefineComponent<import("vue").Extract
 }>> & Readonly<{}>, {
     block: boolean;
     size: ControlSize;
-    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     menu: boolean;
     caret: boolean;
     disabled: boolean;
@@ -229,7 +229,7 @@ export declare const Button: import("vue").DefineComponent<import("vue").Extract
     variant: ButtonVariant;
     danger: boolean;
     shape: ButtonShape;
-    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     href: string;
     target: string;
     popoverTarget: string;
@@ -325,7 +325,7 @@ export declare const ButtonCompound: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         block: boolean;
         size: ControlSize;
-        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         menu: boolean;
         caret: boolean;
         disabled: boolean;
@@ -336,7 +336,7 @@ export declare const ButtonCompound: {
         variant: ButtonVariant;
         danger: boolean;
         shape: ButtonShape;
-        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         href: string;
         target: string;
         popoverTarget: string;
@@ -437,7 +437,7 @@ export declare const ButtonCompound: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         block: boolean;
         size: ControlSize;
-        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         menu: boolean;
         caret: boolean;
         disabled: boolean;
@@ -448,7 +448,7 @@ export declare const ButtonCompound: {
         variant: ButtonVariant;
         danger: boolean;
         shape: ButtonShape;
-        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         href: string;
         target: string;
         popoverTarget: string;
@@ -543,7 +543,7 @@ export declare const ButtonCompound: {
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     block: boolean;
     size: ControlSize;
-    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     menu: boolean;
     caret: boolean;
     disabled: boolean;
@@ -554,7 +554,7 @@ export declare const ButtonCompound: {
     variant: ButtonVariant;
     danger: boolean;
     shape: ButtonShape;
-    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     href: string;
     target: string;
     popoverTarget: string;

package/dist/components/checkbox/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watchEffect, createVNode, mergeProps } from "vue";
+import { defineComponent, ref, computed, watchEffect, createVNode, mergeProps, nextTick } from "vue";
 import { Icon } from "@manohub/icon";
 const Checkbox = /* @__PURE__ */ defineComponent({
   name: "Checkbox",
@@ -58,6 +58,10 @@ const Checkbox = /* @__PURE__ */ defineComponent({
       const next = event.target.checked;
       emit("update:modelValue", next);
       props.onChange?.(next);
+      void nextTick(() => {
+        const el = inputRef.value;
+        if (el && el.checked !== !!props.modelValue) el.checked = !!props.modelValue;
+      });
     };
     return () => {
       const state = props.indeterminate ? "indeterminate" : props.modelValue ? "checked" : "unchecked";