@manohub/ui 1.0.0 → 1.0.1

package/dist/index.js

@@ -38,6 +38,7 @@ import { Upload, formatFileSize } from "./components/upload/index.js";
 import { QueryState } from "./components/query-state/index.js";
 import { Loading } from "./components/loading/index.js";
 import { mergePartStyle, partPaddingStyle } from "./components/part-padding.js";
+import { NumberInput } from "./components/input/number-input.js";
 import { SelectTree } from "./components/select/select-tree.js";
 import { alert, closeAllDialogs, confirm } from "./services/dialog.js";
 import { clearToasts, toast } from "./services/toast.js";
@@ -66,6 +67,7 @@ export {
   Nav,
   Notice,
   Notification,
+  NumberInput,
   Page,
   Pagination,
   Panel,

package/dist/styles/components/form.css

@@ -415,6 +415,20 @@
   color: var(--ui-base-content);
 }
 
+/* 标题左端的品牌色竖标（主色胶囊，值与文档站示例标题同一套：见 `form.tokens.css`）。
+ * **只在有标题文本时出现**：这一行也会在「只给 `extra`」时渲染（筛选条那种），
+ * 那时凭空多一条竖标就成了坏的排版 —— 用 `:has()` 守住真正有标题的那一种。
+ * `flex: none`：标题换行时竖标不许被挤扁。竖标与文本之间的间距由标题行既有的 `gap` 给，
+ * 本句不另写间距（两处各写一遍必然漂）。 */
+.mh-form__title:has(> .mh-form__title-text)::before {
+  content: '';
+  flex: none;
+  width: var(--ui-form-title-bar-width);
+  height: var(--ui-form-title-bar-height);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+}
+
 /* 标题文本允许被挤窄（右端操作位不参与收缩）；长标题**换行**而不是截断
    —— 截断会让这一块读不出是什么。 */
 

package/dist/styles/components/form.tokens.css

@@ -12,4 +12,8 @@
 [data-manohub-ui] {
   --ui-form-label-width: 120px;
   --ui-form-column-min: 320px;
+  /* 标题行左端的品牌色竖标（3×12 胶囊）。与文档站示例标题（`.mh-demo__title::before`）
+     是同一套值：「页面里的一块标题」这一语言在库内与文档站只留一份规格。 */
+  --ui-form-title-bar-width: 3px;
+  --ui-form-title-bar-height: 12px;
 }

package/dist/styles/components/input.css

@@ -188,34 +188,45 @@
   inset: 0;
 }
 
-/* ===== 无边框档（表格内编辑 / 行内编辑：没有框也没有底，靠悬停给反馈） ===== */
+/* ===== 无边框档（`bordered={false}`：框与底全退，**任何状态都不再出现**） =====
+ * 本档的效果**只有一种**：无框。悬停不亮底、聚焦不显框也不留环 —— 「常态无框、聚焦才显框」
+ * 是**另一档** `bordered="focus"`（见下一节），不要把两种效果叠在同一档上。
+ *
+ * **只读值档**（`readonly` + `bordered={false}`）：几何与可编辑输入框**完全一致**（同高 / 同内距 /
+ * 值文字同左缘），仍可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制），
+ * 但「可编辑」的线索本来就一条都没有 —— 它是摘要 / 详情里值回显的推荐写法，
+ * 也是 `Form.Item` 的 `readonly` 行配的那一档。
+ *
+ * 中和句与通用状态规则**同为 0-2-0**（`.mh-input:hover` / `.mh-input:focus`），靠写在它们之后取胜。 */
 .mh-input--borderless {
   border-color: transparent;
   background: transparent;
   border-radius: 0;
 }
 .mh-input--borderless:hover,
-.mh-input--borderless.is-hover {
-  border-color: transparent;
-  background: var(--ui-base-200);
-}
+.mh-input--borderless.is-hover,
 .mh-input--borderless:focus,
 .mh-input--borderless.is-focus {
-  border-color: var(--ui-input-line-hover);
-  background: var(--ui-base-100);
-  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
 }
-/* **只读值档**（`readonly` + `bordered={false}`）：几何照旧（与可编辑输入框同高、同内距），
-   但把「可编辑」的线索全退掉 —— 只读值不该在滑过时亮起浅底、被点中时亮出边框与主色环。
-   仍然可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制）。
-   它是摘要 / 详情里值回显的推荐写法，也是 `Form.Item` 的 `readonly` 行配的那一档。
-   特异性 0-3-0，压过上面两条（0-2-0）；带壳时框主是壳，同款规则见文件下半部分。 */
-.mh-input--borderless[readonly]:hover,
-.mh-input--borderless[readonly].is-hover,
-.mh-input--borderless[readonly]:focus,
-.mh-input--borderless[readonly].is-focus {
+
+/* ===== 聚焦显框档（`bordered="focus"`：行内编辑那档）=====
+ * 常态无框无底；**悬停与聚焦复用有框档那两条**（`.mh-input:hover` / `.mh-input:focus`：框转 hover
+ * 线色、聚焦再加主色弱底环）—— 本档**不另写任何状态描写**，于是「聚焦 = 有框档的样子」这句话
+ * 在面上只有一份。
+ * 那两条是 0-2-0、本档常态是 0-1-0 ⇒ 悬停 / 聚焦必定压过常态，**与顺序无关**（裸控件这一层）。
+ * 配 `readonly`：把复用的线索中和掉（只读值不许看起来能编辑；推荐写法是 `readonly` + `false`）。 */
+.mh-input--border-on-focus {
   border-color: transparent;
   background: transparent;
+}
+.mh-input--border-on-focus[readonly]:hover,
+.mh-input--border-on-focus[readonly].is-hover,
+.mh-input--border-on-focus[readonly]:focus,
+.mh-input--border-on-focus[readonly].is-focus {
+  border-color: transparent;
   box-shadow: none;
 }
 
@@ -262,13 +273,17 @@
  * **裸 `.mh-input`（不带壳）仍由控件自己画框**（Select 的搜索行就靠它），见上一节。
  */
 .mh-input__wrap {
+  /* 左右内距走**内部变量**再吃令牌：壳是框与内距的主，而档位类挂在控件上（壳是它的父），
+     档位规则要能改到壳的内距 —— 见下面两条 `:has()`。写成 `--mh-*` 是刻意的（内部中转），
+     消费方要改内距请重设 `--ui-input-padding-x*` 那三个令牌。 */
+  --mh-input-padding-x: var(--ui-input-padding-x);
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--ui-input-affix-gap);
   width: 100%;
   height: var(--ui-input-height);
-  padding: 0 var(--ui-input-padding-x);
+  padding: 0 var(--mh-input-padding-x);
   border: 1px solid var(--ui-input-line);
   border-radius: var(--ui-input-radius);
   background: var(--ui-base-100);
@@ -276,16 +291,21 @@
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }
+/* ⚠️ 档位**必须连内距一起换**，不能只换高度：壳内控件的内距被归零（见 `.mh-input__wrap > .mh-input`），
+   壳的 12px 若原样留着，sm（24 高）就成了「矮框里塞着标准档的内距」—— 左右各 12 对 13 号字太挤，
+   看起来像内距坏了。2026-10-08 修：三档的高度与左右内距成对下发。 */
 .mh-input__wrap:has(> .mh-input--sm) {
+  --mh-input-padding-x: var(--ui-input-padding-x-sm);
   height: var(--ui-input-height-sm);
 }
 .mh-input__wrap:has(> .mh-input--lg) {
+  --mh-input-padding-x: var(--ui-input-padding-x-lg);
   height: var(--ui-input-height-lg);
 }
-/* 多行：高归内容（`resize` 要能改高），框仍归壳 */
+/* 多行：高归内容（`resize` 要能改高），框仍归壳；左右内距同样随档（走同一个变量） */
 .mh-input__wrap:has(> .mh-input--textarea) {
   height: auto;
-  padding: var(--ui-space-2) var(--ui-input-padding-x);
+  padding: var(--ui-space-2) var(--mh-input-padding-x);
 }
 /* 壳内控件占满剩余宽度，且允许被压缩（min-width:0）；附加位增减时输入区自动伸缩 */
 .mh-input__wrap > .mh-input {
@@ -309,6 +329,15 @@
 .mh-input__wrap > .mh-input.is-focus {
   box-shadow: none;
 }
+/* **聚焦显框档（`bordered="focus"`）的常态**：框与底全退。
+ * ⚠️ 这个位置是**语义要求**，不是排版偏好：本句与下面「悬停 / 聚焦」两条**同为 0-2-0**
+ * （`:has()` 按参数里最具体的那个算，这里是一个类），同特异性时 CSS 取**后写者** ——
+ * 本句若写在那两条之后，聚焦时框永远显不出来。本档的悬停 / 聚焦表现**完全复用**下面那两条
+ * （框转 hover 线色 + 主色弱底环），故本档在这里只有「常态」这一句，不另写状态描写。 */
+.mh-input__wrap:has(> .mh-input--border-on-focus) {
+  border-color: transparent;
+  background: transparent;
+}
 /* 悬停：反馈画在壳上（壳铺满整件，附加位区域也一起响应） */
 .mh-input__wrap:hover {
   border-color: var(--ui-input-line-hover);
@@ -344,29 +373,23 @@
   background: var(--ui-base-200);
   border-color: var(--ui-base-300);
 }
-/* 无边框档（表格内编辑 / 行内编辑）：框与底全退，悬停给浅底、聚焦才显出框 */
+/* 无边框档（带壳时框主是壳，`bordered={false}`）：框与底全退，**任何状态都不再出现**
+ * —— 口径与裸控件那节完全一致（本档的效果只有一种）。
+ * 中和句 0-3-0 压过通用悬停 / 聚焦（0-2-0），故写在本节（它们之后）也成立；
+ * 配 `readonly` 即**只读值档**，几何照旧、线索全无（说明见裸控件那节）。
+ * 带壳的 `bordered="focus"` 档只有「常态」那一句，在文件上半部分（与通用悬停 / 聚焦同段，位置有讲究）。 */
 .mh-input__wrap:has(> .mh-input--borderless) {
   border-color: transparent;
   border-radius: 0;
   background: transparent;
 }
-.mh-input__wrap:has(> .mh-input--borderless):hover {
-  border-color: transparent;
-  background: var(--ui-base-200);
-}
-.mh-input__wrap:has(> .mh-input--borderless):focus-within {
-  border-color: var(--ui-input-line-hover);
-  background: var(--ui-base-100);
-  box-shadow: 0 0 0 2px var(--ui-primary-weak);
-}
-/* **只读值档**同款（带壳时框主是壳）：退掉悬停底与聚焦的边框 / 底色 / 主色环。
-   特异性 0-4-0，压过上面两条（0-3-0），并且写在它们之后。 */
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):hover,
-.mh-input__wrap:has(> .mh-input--borderless[readonly]).is-hover {
-  border-color: transparent;
-  background: transparent;
-}
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):focus-within {
+.mh-input__wrap:has(> .mh-input--borderless):hover,
+.mh-input__wrap:has(> .mh-input--borderless).is-hover,
+.mh-input__wrap:has(> .mh-input--borderless):focus-within,
+/* 静态档（`.is-hover` / `.is-focus` 挂在**控件**上，与通用的 `:has(> .mh-input.is-focus)` 同源）——
+   漏了这两条，截图 / 单测走静态档时框就冒出来了（`:focus-within` 那条盖不住它，两者都是 0-3-0） */
+.mh-input__wrap:has(> .mh-input--borderless.is-hover),
+.mh-input__wrap:has(> .mh-input--borderless.is-focus) {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -488,6 +511,104 @@
   bottom: var(--ui-space-1);
 }
 
+/* ===== 数字输入（NumberInput；与 Input 同族同面） =====
+ *
+ * 表壳 / 内距 / 状态协议全部复用上面几节 —— 本件只多两样：控件上的 `.mh-input--number`
+ * 与右端的一对步进按钮。故**没有**独立的面文件，也不进 `styles/index.css` 的登记清单
+ * （那是「一组件一面」的清单，本件与 `Input` 共用 `input.css`）。
+ *
+ * 类名**与面文件同根**（`mh-input*`），口径与 `Textarea` 的 `.mh-input--textarea` 一致：
+ * 同族两件共用一份面时，族根就是 `mh-input`，另开 `mh-number-*` 会被
+ * `__tests__/contract-class-surface.spec.ts` 的「与面文件名同根」那条判据拦下 —— 那条判据
+ * 正是为了让「共用一份面」这件事在命名上看得见。
+ *
+ * `.mh-input--number` 只声明 `font-variant-numeric`：数值等宽，编辑时数字不会因字形宽度
+ * 变化而左右跳（比例数字下 `1111` 比 `0000` 窄一截，逐位输入时值区会抖）。它**不承载几何** ——
+ * 框与内距归 `.mh-input__wrap` / `.mh-input`，重复声明就是又开一份会漂的规格。 */
+.mh-input--number {
+  font-variant-numeric: tabular-nums;
+}
+
+/* 步进位：右端的一对上下箭头（列排、整条居中）。
+ * 取值（两条约束一起解出来的）：md 16 / 压 4（32 − 4 = 28 ≤ 30）、lg 16 / 压 0（32 ≤ 38）、
+ * sm 13 / 压 4（26 − 4 = 22 ≤ 22；13 是「放得下 **且** 压不过字形」的最大值 —— 14 的两条约束互相打架）。
+ * 尺寸声明落在**步进位自己**上（基准），两档改写靠表壳的 `:has()` 选到它 —— 档位类挂在控件上
+ * （`.mh-input--sm`），而箭头是控件的**兄弟**：自定义属性只向下继承，把变量声明在控件上，
+ * 箭头取不到值（与 `input.tokens.css` 头注释记的同一个坑）。 */
+.mh-input__step {
+  /* md 基准：箭头盒取**常规图标档 16**（一对 32 比内容高 30 多 2，故两枚之间压 4 → 一对 28 落进 30） */
+  --mh-input-step-icon: 16px;
+  --mh-input-step-overlap: 4px;
+  flex: none;
+  display: inline-flex;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: center;
+  /* **默认隐形且不可点**：步进位是「聚焦后调值」的辅助位，常显会让页面上每个数字框的右端
+     都挂着一对箭头（密集表单里那一列箭头比数字本身还抢眼）。
+     为什么用 `opacity` 而不是 `display`：① 它仍在流中**占位** —— 显隐时值区宽度不变，
+     否则聚焦的一瞬间数字会横向跳一格；② `pointer-events: none` 让隐形时的热区一并失效，
+     避免「点了看不见的箭头、值莫名其妙变了」。读屏仍能读到这两个按钮（不丢可达性）。 */
+  opacity: 0;
+  pointer-events: none;
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+/* 显形：**控件拿到焦点时**（点箭头本身焦点也不会掉出壳 —— 按钮在壳内，`:focus-within` 照旧成立） */
+.mh-input__wrap:focus-within > .mh-input__step {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* sm：控件只 24 高（内容高 22），16 的一对（32）放不下、14 也放不下（压到安全上限 4.67 时还有 23.3 > 22）。
+   13 是**两条约束的唯一交集**：一对 26 − 4 = 22（正好落进），压缩 4 ≤ 13/3（不侵可点区）。 */
+.mh-input__wrap:has(> .mh-input--sm) > .mh-input__step {
+  --mh-input-step-icon: 13px;
+  --mh-input-step-overlap: 4px;
+}
+/* lg：内容高 38 放得下 16 的一对，不必压（上下各留 3，字形离边框 9） */
+.mh-input__wrap:has(> .mh-input--lg) > .mh-input__step {
+  --mh-input-step-icon: 16px;
+  --mh-input-step-overlap: 0px;
+}
+
+/* 步进按钮：**裸按钮必须自带 border / background / padding**（基线 reset 不再代消费方归零，
+   见 `styles/reset.css` 与 `__tests__/contract-reset.spec.ts` 的第三组）。
+   盒宽取附加位档（16）—— 热区比字形大一档；常态同附加位色档，滑过转主色；到界即 `:disabled`（不回绕）。 */
+.mh-input__step-btn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-input-affix-size);
+  min-height: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+.mh-input__step-btn:hover:not(:disabled) {
+  color: var(--ui-primary);
+}
+.mh-input__step-btn:disabled {
+  color: var(--ui-base-content-muted);
+  cursor: not-allowed;
+}
+/* 第二枚往上**压一档**：一对箭头（两个常规图标档的盒）比控件内容高还高，靠负 margin 挤进去
+   （`gap` 不接受负值，故用 `margin-top` 的负值；量由 `--mh-input-step-overlap` 给，改档只动一个数）。
+   ⚠️ 压缩量有上限（**盒 / 3**）：chevron 的笔画含描边占盒高 1/3，压过它，上箭头字形的下半截
+   就落进下箭头的可点区 —— 用户点「增」会被判成「减」。 */
+.mh-input__step-btn + .mh-input__step-btn {
+  margin-top: calc(-1 * var(--mh-input-step-overlap));
+}
+/* 箭头图标：尺寸随档（见上面的 `--mh-input-step-icon`），**不在组件里写死 `size`** */
+.mh-input__step-btn > svg {
+  flex: none;
+  width: var(--mh-input-step-icon);
+  height: var(--mh-input-step-icon);
+}
+
 /* 附加位里下拉件的面板皮肤（与操作层并列组合：`class="mh-popup mh-input__menu"`） */
 .mh-input__menu {
   width: 96px;

package/dist/styles/components/table.css

@@ -313,6 +313,12 @@
   color: var(--ui-error);
 }
 
+/* 单元格里的编辑控件：**表格面不为它写规则**。
+ * 编辑格由调用方在 `#cell` 插槽里自己摆（`Input` / `Select` / `NumberInput`，外层可套 `Form.Item`），
+ * 框、内距、错误档、只读档全部沿用 form / input 两族既有口径 —— 表格侧再写一份就是开第二套会漂的规格。
+ * 唯一要提醒的是**列宽**：`table-layout: auto` 下「输入框的最小内容宽」会把窄列顶开，
+ * 列宽要守得住就开 `layout="fixed"`（列宽由 `<colgroup>` 决定，不再被内容撑破）。 */
+
 /* 状态点（语义四档） */
 .mh-table__status-dot {
   display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "description": "AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层（Farris 规范视觉 · daisyUI 式语义令牌 · shadcn 式 API 词汇）。",
@@ -35,7 +35,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@manohub/icon": "^1.0.0"
+    "@manohub/icon": "^1.0.1"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",