@manohub/ui 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/components/badge/index.d.ts +24 -46
- package/dist/components/badge/index.js +7 -11
- package/dist/components/button/index.d.ts +11 -31
- package/dist/components/capsule/index.d.ts +13 -27
- package/dist/components/card/index.d.ts +21 -54
- package/dist/components/checkbox/index.d.ts +1 -9
- package/dist/components/code-block/index.d.ts +28 -55
- package/dist/components/collapse/index.d.ts +2 -0
- package/dist/components/dialog/index.d.ts +6 -15
- package/dist/components/divider/index.d.ts +1 -12
- package/dist/components/drawer/index.d.ts +7 -15
- package/dist/components/filter/index.d.ts +27 -69
- package/dist/components/filter/index.js +3 -8
- package/dist/components/form/index.d.ts +52 -132
- package/dist/components/form/index.js +5 -12
- package/dist/components/input/bordered.d.ts +4 -6
- package/dist/components/input/index.d.ts +31 -63
- package/dist/components/input/index.js +5 -7
- package/dist/components/input/number-input.d.ts +11 -23
- package/dist/components/layout/index.d.ts +21 -28
- package/dist/components/layout/index.js +5 -8
- package/dist/components/list-view/index.d.ts +10 -43
- package/dist/components/loading/index.d.ts +8 -19
- package/dist/components/nav/index.d.ts +14 -35
- package/dist/components/nav/index.js +1 -3
- package/dist/components/notice/index.d.ts +13 -33
- package/dist/components/notice/index.js +3 -5
- package/dist/components/notification/index.d.ts +0 -9
- package/dist/components/page/index.d.ts +8 -43
- package/dist/components/page/split-resize.d.ts +9 -18
- package/dist/components/pagination/index.d.ts +1 -5
- package/dist/components/panel/index.d.ts +27 -62
- package/dist/components/panel/index.js +1 -4
- package/dist/components/part-padding.d.ts +5 -13
- package/dist/components/query-state/index.d.ts +8 -32
- package/dist/components/radio/index.d.ts +2 -3
- package/dist/components/search/index.d.ts +12 -32
- package/dist/components/select/index.d.ts +7 -14
- package/dist/components/select/index.js +3 -3
- package/dist/components/select/select-panel.d.ts +23 -35
- package/dist/components/select/select-panel.js +5 -10
- package/dist/components/select/select-shared.d.ts +18 -44
- package/dist/components/select/select-tree.d.ts +11 -16
- package/dist/components/select/select-trigger.d.ts +6 -16
- package/dist/components/select/select-trigger.js +5 -11
- package/dist/components/skeleton/index.d.ts +1 -5
- package/dist/components/steps/index.d.ts +55 -111
- package/dist/components/steps/index.js +8 -16
- package/dist/components/switch/index.d.ts +17 -33
- package/dist/components/switch/index.js +2 -4
- package/dist/components/tabbar/index.d.ts +1 -6
- package/dist/components/table/index.d.ts +11 -63
- package/dist/components/table/index.js +4 -8
- package/dist/components/tabs/index.d.ts +22 -44
- package/dist/components/text/index.d.ts +10 -21
- package/dist/components/toast/index.d.ts +4 -13
- package/dist/components/tooltip/index.d.ts +1 -12
- package/dist/components/tree/index.d.ts +35 -77
- package/dist/components/tree/index.js +17 -33
- package/dist/components/upload/index.d.ts +1 -4
- package/dist/index.d.ts +2 -2
- package/dist/services/base.d.ts +32 -8
- package/dist/services/dialog.d.ts +10 -22
- package/dist/services/index.d.ts +2 -2
- package/dist/services/loading.d.ts +9 -12
- package/dist/services/loading.js +8 -1
- package/dist/services/toast.d.ts +4 -14
- package/dist/styles/components/button.css +2 -0
- package/dist/styles/components/capsule.css +2 -0
- package/dist/styles/components/checkbox.css +2 -0
- package/dist/styles/components/form.css +23 -28
- package/dist/styles/components/input.css +53 -71
- package/dist/styles/components/notice.css +2 -0
- package/dist/styles/components/page.css +25 -31
- package/dist/styles/components/pagination.css +4 -0
- package/dist/styles/components/radio.css +2 -0
- package/dist/styles/components/search.css +8 -10
- package/dist/styles/components/switch.css +2 -0
- package/dist/styles/components/tabbar.css +2 -0
- package/dist/styles/components/table.css +34 -41
- package/dist/styles/components/upload.css +2 -0
- package/package.json +2 -2
|
@@ -6,18 +6,16 @@ export type DrawerSide = 'left' | 'right';
|
|
|
6
6
|
*
|
|
7
7
|
* ## 与 `Dialog` 的关系:同一套行为,只换落位
|
|
8
8
|
*
|
|
9
|
-
* 模态语义、Esc、焦点陷阱、`::backdrop` 遮罩、top layer 渲染都是**原生 `<dialog>`**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* ② 内建底栏的「确定」在 `onOk` 返回 Promise 时自动进加载态并吞重复点击。
|
|
9
|
+
* 模态语义、Esc、焦点陷阱、`::backdrop` 遮罩、top layer 渲染都是**原生 `<dialog>`** 给的,本件因此与
|
|
10
|
+
* `Dialog` 共用同一条「JS 只做原生做不到的那两件」的取舍:① 把受控的 `open` 同步到原生 API(真 →
|
|
11
|
+
* `showModal()`,假 → `close()`);② 内建底栏的「确定」在 `onOk` 返回 Promise 时自动进加载态并吞重复点击。
|
|
13
12
|
* 差异只有一条:本件贴屏幕某一侧、**整屏高**,而不是视口居中。
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* 所以类名同样并列 `.mh-popup`(操作层状态根)+ 本族皮肤,开合、遮罩、UA 装饰归零全部免费继承。
|
|
13
|
+
* **不另开一套浮层机制**:抽屉不是「新的定位体系」,是同一张面板换个落位 —— 故类名同样并列 `.mh-popup`
|
|
14
|
+
* (操作层状态根)+ 本族皮肤,开合 / 遮罩 / UA 装饰归零全部免费继承。
|
|
17
15
|
*
|
|
18
16
|
* ## 关闭是受控的
|
|
19
17
|
*
|
|
20
|
-
* 关闭位、Esc(原生 `cancel`
|
|
18
|
+
* 关闭位、Esc(原生 `cancel` 事件)与点遮罩都只回调(`update:open(false)` + `onClose()` / `onCancel()`);
|
|
21
19
|
* 可见性归消费方 —— 避免「组件自己消失、业务状态还以为开着」两套口径。
|
|
22
20
|
*
|
|
23
21
|
* ## 底栏三态(**由消费方按需选一**,不要混着用)
|
|
@@ -28,13 +26,7 @@ export type DrawerSide = 'left' | 'right';
|
|
|
28
26
|
* | 给 `okText` / `onOk` | 内建底栏:`[取消] [确定]`,按钮就是本包 `Button` |
|
|
29
27
|
* | `:show-footer="false"` | 不渲染底栏(纯展示抽屉) |
|
|
30
28
|
*
|
|
31
|
-
*
|
|
32
|
-
* <Drawer v-model:open="visible" title="MCP 配置" width={640} :on-ok="save" :on-cancel="() => (visible = false)">
|
|
33
|
-
* …抽屉内容…
|
|
34
|
-
* </Drawer>
|
|
35
|
-
*
|
|
36
|
-
* @example 右侧属性面板(窄、无底栏、自绘关闭位)
|
|
37
|
-
* <Drawer v-model:open="visible" title="属性" :width="320" :show-footer="false">…</Drawer>
|
|
29
|
+
* 用法见 `docs/demos/drawer/`(每个维度一份可运行样例;文档页 `docs/components/drawer.md`)。
|
|
38
30
|
*/
|
|
39
31
|
export declare const Drawer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
40
32
|
/** 受控开合 */
|
|
@@ -1,36 +1,29 @@
|
|
|
1
1
|
import { type PropType, type SlotsType, type VNodeChild } from 'vue';
|
|
2
2
|
/**
|
|
3
3
|
* 条件值:单值(文本 / 单选)或数组(多选)。数字与字符串同等对待(取值原样透传)。
|
|
4
|
+
*
|
|
5
|
+
* 用法见 `docs/demos/filter/`(每个维度一份可运行样例;文档页 `docs/components/filter.md`)。
|
|
4
6
|
*/
|
|
5
7
|
export type FilterValue = string | number | Array<string | number>;
|
|
6
8
|
/** 条件快照:`条件名 → 值`(未选条件的值为空串,语义是「不过滤」) */
|
|
7
9
|
export type FilterValues = Record<string, FilterValue>;
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* 自绘场景更推荐直接用 `placeholder="全部"` 表达未选(本包 `Select` 把空串视为未选中,
|
|
13
|
-
* 会显示占位文案)—— 两条路子的最终视觉一致,见 `docs/components/filter.md`。
|
|
11
|
+
* 「全部」哨兵:选项值等于它即「不过滤」。与既有查询方案(骨架层的筛选适配件)同词,便于迁移时**选项表原样搬运**;
|
|
12
|
+
* 自绘场景更推荐直接用 `placeholder="全部"` 表达未选(本包 `Select` 把空串视为未选中 → 显示占位文案)—— 两条路子
|
|
13
|
+
* 的最终视觉一致,见 `docs/components/filter.md`。
|
|
14
14
|
*/
|
|
15
15
|
export declare const FILTER_ALL = "all";
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* - `auto`:值变化即查询(发 `onQuery`)—— 适合「改即查」的轻量条件区。
|
|
22
|
-
* 此时**同一次变化不再发 `onChange`**(一个变化只对应一个事件,消费方两处都接也不会查两遍),
|
|
23
|
-
* 且操作区默认不渲染(见 `showReset`)。
|
|
24
|
-
*
|
|
25
|
-
* 两种时机下**值变化都会发 `update:modelValue`**(`v-model` 落地不受时机影响)。
|
|
17
|
+
* 筛选时机:`manual`(缺省)—— 值变化只回写快照(`onChange`),查询由**回车 / 「筛选」按钮**显式触发
|
|
18
|
+
* (`onQuery`),适合「几个字段填完再查」的条件区;`auto` —— 值变化即查询(发 `onQuery`),适合「改即查」的轻量
|
|
19
|
+
* 条件区,此时**同一次变化不再发 `onChange`**(一个变化只对应一个事件,消费方两处都接也不会查两遍),且操作区
|
|
20
|
+
* 默认不渲染(见 `showReset`)。两种时机下**值变化都会发 `update:modelValue`**(`v-model` 落地不受时机影响)。
|
|
26
21
|
*/
|
|
27
22
|
export type FilterTrigger = 'manual' | 'auto';
|
|
28
23
|
/**
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* (`'all'` 哨兵 / `null` / 空数组都归到空串),于是消费方直接把 `value` 绑给控件即可,
|
|
33
|
-
* 不必自己处理哨兵——这是 `Filter.Item` 相对 `Form.Item` 唯一的增量。
|
|
24
|
+
* 筛选字段的作用域插槽:控件由消费方渲染,本件交出**归一后**的当前值。与 `Form.Item` 的作用域同形,差别只在归一:
|
|
25
|
+
* 筛选语义里「未选」一律是空串(`'all'` 哨兵 / `null` / 空数组都归到空串),故消费方直接把 `value` 绑给控件即可
|
|
26
|
+
* —— 这是 `Filter.Item` 相对 `Form.Item` 唯一的增量。
|
|
34
27
|
*/
|
|
35
28
|
export interface FilterItemSlotScope {
|
|
36
29
|
/** 当前条件值(已归一:空串 = 未选) */
|
|
@@ -41,11 +34,9 @@ export interface FilterItemSlotScope {
|
|
|
41
34
|
clear: () => void;
|
|
42
35
|
}
|
|
43
36
|
/**
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
* - 数字原样(`0` 是有效值,不是「空」);
|
|
48
|
-
* - 其余原样(不做 trim:归一不负责改写用户输入)。
|
|
37
|
+
* 归一(读与写**同一份实现**,两处不各写一套):`'all'`(哨兵)/ `''` / `null` / `undefined` → `''`(= 不过滤);
|
|
38
|
+
* 数组逐项归一后去空、全空 → `''`(**只剩一项仍是数组**,多选值的类型不降级成标量);数字原样(`0` 是有效值,
|
|
39
|
+
* 不是「空」);其余原样(不做 trim:归一不负责改写用户输入)。
|
|
49
40
|
*/
|
|
50
41
|
export declare function normalizeFilterValue(value: FilterValue | null | undefined): FilterValue;
|
|
51
42
|
export interface FilterProps {
|
|
@@ -53,12 +44,7 @@ export interface FilterProps {
|
|
|
53
44
|
title?: string;
|
|
54
45
|
/** 标题下的说明小字(透传给 `Form.Header`) */
|
|
55
46
|
description?: string;
|
|
56
|
-
/**
|
|
57
|
-
* label 列宽(px),透传给 `Form`。
|
|
58
|
-
*
|
|
59
|
-
* **缺省不设**:不传即与 `Form` 一致(取令牌 `--ui-form-label-width`,120)。
|
|
60
|
-
* 想收窄(筛选条的标签多为四字)就显式传,例如 `labelWidth={68}`。
|
|
61
|
-
*/
|
|
47
|
+
/** label 列宽(px),透传给 `Form`;**缺省不设**(不传即与 `Form` 一致,取令牌 `--ui-form-label-width` = 120)。想收窄(筛选条标签多为四字)就显式传,如 `labelWidth={68}`。 */
|
|
62
48
|
labelWidth?: number;
|
|
63
49
|
/** 受控条件快照(`条件名 → 值`);不传即非受控(由 `defaultValue` 起) */
|
|
64
50
|
modelValue?: FilterValues;
|
|
@@ -68,15 +54,9 @@ export interface FilterProps {
|
|
|
68
54
|
queryText?: string;
|
|
69
55
|
/** 「重置」按钮文案 */
|
|
70
56
|
resetText?: string;
|
|
71
|
-
/**
|
|
72
|
-
* 是否渲染「重置」按钮 —— **两档的缺省口径不同**(故本项缺省是 `undefined` 而非 `true`):
|
|
73
|
-
* `manual` 缺省渲染(`:show-reset="false"` 才隐藏);`auto` 缺省**不**渲染(显式传 `true` 才留一颗)。
|
|
74
|
-
*/
|
|
57
|
+
/** 是否渲染「重置」按钮 —— **两档缺省口径不同**(故缺省是 `undefined` 而非 `true`):`manual` 缺省渲染,`auto` 缺省**不**渲染(显式 `true` 才留一颗)。 */
|
|
75
58
|
showReset?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* 筛选时机:`manual`(缺省)值变化只回写、查询靠「筛选」按钮 / 字段区回车;
|
|
78
|
-
* `auto` 值变化**即**查询,且操作区默认不渲染(详见组件说明「筛选时机」一节)。
|
|
79
|
-
*/
|
|
59
|
+
/** 筛选时机:`manual`(缺省)值变化只回写、查询靠「筛选」按钮 / 字段区回车;`auto` 值变化**即**查询,且操作区默认不渲染(详见组件说明「筛选时机」)。 */
|
|
80
60
|
trigger?: FilterTrigger;
|
|
81
61
|
/** 条件值变化(快照已归一)。**`auto` 下不发** —— 同一次变化改走 `onQuery` */
|
|
82
62
|
onChange?: (values: FilterValues) => void;
|
|
@@ -106,13 +86,6 @@ export interface FilterItemProps {
|
|
|
106
86
|
*
|
|
107
87
|
* 字段宽**自适应**:字段区是 `Form` 的多列动态档(`Filter` 传 `columns="auto"`),
|
|
108
88
|
* 故本件只输出 `Form.Item` 自己的类 —— 列宽由那条网格轨道算,换行下来的字段与上一行逐列对齐。
|
|
109
|
-
*
|
|
110
|
-
* @example
|
|
111
|
-
* <Filter.Item code="status" label="授权状态">
|
|
112
|
-
* {{ default: ({ value, setValue }) => (
|
|
113
|
-
* <Select options={statusOptions} modelValue={String(value)} placeholder="全部" onChange={setValue} />
|
|
114
|
-
* ) }}
|
|
115
|
-
* </Filter.Item>
|
|
116
89
|
*/
|
|
117
90
|
export declare const FilterItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
118
91
|
code: {
|
|
@@ -196,14 +169,9 @@ export declare const Filter: {
|
|
|
196
169
|
default: string;
|
|
197
170
|
};
|
|
198
171
|
/**
|
|
199
|
-
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined
|
|
200
|
-
*
|
|
201
|
-
*
|
|
202
|
-
* - `trigger="auto"`:缺省**不渲染** —— 自动模式下操作区整块让位给字段,
|
|
203
|
-
* 要留一颗重置按钮就得**显式**写 `show-reset`。
|
|
204
|
-
*
|
|
205
|
-
* 自动模式下一键清空的另一条路是各字段自带的清除位(控件自己的 `clearable`),
|
|
206
|
-
* 或页面级入口(`Form.Header` 的 `extra` 一侧)。
|
|
172
|
+
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined`、不是 `true`):`manual` 缺省**渲染**
|
|
173
|
+
* (只有显式 `:show-reset="false"` 才隐藏);`auto` 缺省**不渲染**(操作区整块让位给字段,要留一颗就得**显式**写
|
|
174
|
+
* `show-reset`)。自动模式下一键清空的另一条路是各字段自带的清除位,或页面级入口。
|
|
207
175
|
*/
|
|
208
176
|
showReset: {
|
|
209
177
|
type: BooleanConstructor;
|
|
@@ -282,14 +250,9 @@ export declare const Filter: {
|
|
|
282
250
|
default: string;
|
|
283
251
|
};
|
|
284
252
|
/**
|
|
285
|
-
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined
|
|
286
|
-
*
|
|
287
|
-
*
|
|
288
|
-
* - `trigger="auto"`:缺省**不渲染** —— 自动模式下操作区整块让位给字段,
|
|
289
|
-
* 要留一颗重置按钮就得**显式**写 `show-reset`。
|
|
290
|
-
*
|
|
291
|
-
* 自动模式下一键清空的另一条路是各字段自带的清除位(控件自己的 `clearable`),
|
|
292
|
-
* 或页面级入口(`Form.Header` 的 `extra` 一侧)。
|
|
253
|
+
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined`、不是 `true`):`manual` 缺省**渲染**
|
|
254
|
+
* (只有显式 `:show-reset="false"` 才隐藏);`auto` 缺省**不渲染**(操作区整块让位给字段,要留一颗就得**显式**写
|
|
255
|
+
* `show-reset`)。自动模式下一键清空的另一条路是各字段自带的清除位,或页面级入口。
|
|
293
256
|
*/
|
|
294
257
|
showReset: {
|
|
295
258
|
type: BooleanConstructor;
|
|
@@ -361,14 +324,9 @@ export declare const Filter: {
|
|
|
361
324
|
default: string;
|
|
362
325
|
};
|
|
363
326
|
/**
|
|
364
|
-
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
* - `trigger="auto"`:缺省**不渲染** —— 自动模式下操作区整块让位给字段,
|
|
368
|
-
* 要留一颗重置按钮就得**显式**写 `show-reset`。
|
|
369
|
-
*
|
|
370
|
-
* 自动模式下一键清空的另一条路是各字段自带的清除位(控件自己的 `clearable`),
|
|
371
|
-
* 或页面级入口(`Form.Header` 的 `extra` 一侧)。
|
|
327
|
+
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined`、不是 `true`):`manual` 缺省**渲染**
|
|
328
|
+
* (只有显式 `:show-reset="false"` 才隐藏);`auto` 缺省**不渲染**(操作区整块让位给字段,要留一颗就得**显式**写
|
|
329
|
+
* `show-reset`)。自动模式下一键清空的另一条路是各字段自带的清除位,或页面级入口。
|
|
372
330
|
*/
|
|
373
331
|
showReset: {
|
|
374
332
|
type: BooleanConstructor;
|
|
@@ -51,14 +51,9 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
|
|
|
51
51
|
default: "重置"
|
|
52
52
|
},
|
|
53
53
|
/**
|
|
54
|
-
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* - `trigger="auto"`:缺省**不渲染** —— 自动模式下操作区整块让位给字段,
|
|
58
|
-
* 要留一颗重置按钮就得**显式**写 `show-reset`。
|
|
59
|
-
*
|
|
60
|
-
* 自动模式下一键清空的另一条路是各字段自带的清除位(控件自己的 `clearable`),
|
|
61
|
-
* 或页面级入口(`Form.Header` 的 `extra` 一侧)。
|
|
54
|
+
* 是否渲染「重置」按钮。**缺省值随时机而变**(故本 prop 缺省是 `undefined`、不是 `true`):`manual` 缺省**渲染**
|
|
55
|
+
* (只有显式 `:show-reset="false"` 才隐藏);`auto` 缺省**不渲染**(操作区整块让位给字段,要留一颗就得**显式**写
|
|
56
|
+
* `show-reset`)。自动模式下一键清空的另一条路是各字段自带的清除位,或页面级入口。
|
|
62
57
|
*/
|
|
63
58
|
showReset: {
|
|
64
59
|
type: Boolean,
|
|
@@ -5,26 +5,25 @@ export type FormPadding = Padding;
|
|
|
5
5
|
/** label 列的水平对齐:`right`(默认,与 farris / 主流水平表单一致)或 `left` */
|
|
6
6
|
export type FormLabelAlign = 'left' | 'right';
|
|
7
7
|
/**
|
|
8
|
-
* 字段行的排布档:`1`(默认,逐行);`2 ~ 6`(**列数上限** —— 放得下 N
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* —— 要「两个字段必须并肩」就别用它。
|
|
8
|
+
* 字段行的排布档:`1`(默认,逐行);`2 ~ 6`(**列数上限** —— 放得下 N 列就并排、放不下少排一列,不会把控件压成
|
|
9
|
+
* 窄条;5 / 6 给宽屏展示页,默认最小宽 320 下要容器 1632 / 1960px);`'auto'`(**列数随容器宽度动态变化**,每列宽
|
|
10
|
+
* 由 `columnMinWidth` 决定)。
|
|
11
|
+
* 两类的差别是**可预期性**(不是能力高低):数字档承诺「最多 N 列」,够宽时「哪几个字段同排」是确定的;动态档窄了
|
|
12
|
+
* 就减,同一表单在不同容器里列数不同 ⇒ **字段的相对位置会变** —— 要「两个字段必须并肩」就别用它。
|
|
13
|
+
* 用法见 `docs/demos/form/`(每个维度一份可运行样例;文档页 `docs/components/form.md`)。
|
|
15
14
|
*/
|
|
16
15
|
export type FormColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
|
|
17
16
|
/**
|
|
18
|
-
* 行内**垂直**对齐(label 与控件在控件行内怎么对齐):`center
|
|
19
|
-
*
|
|
20
|
-
*
|
|
17
|
+
* 行内**垂直**对齐(label 与控件在控件行内怎么对齐):`center`(默认,与控件**中线**对齐,单行控件用);`start`
|
|
18
|
+
* (与控件**首行文字**对齐,多行控件与整块内容用,否则 label 会落到整块高度中间)。不传即**自动判定**(样式按控件
|
|
19
|
+
* 类型切档),显式传入优先,用于自绘内容(卡片组 / 表格 / 富文本)。
|
|
21
20
|
*/
|
|
22
21
|
export type FormItemAlign = 'center' | 'start';
|
|
23
22
|
/** 表单值:**字段名 → 值**(键就是 `Form.Item` 的 `name`) */
|
|
24
23
|
export type FormValues = Record<string, unknown>;
|
|
25
24
|
/**
|
|
26
|
-
* 带 `name` 的 `Form.Item`
|
|
27
|
-
*
|
|
25
|
+
* 带 `name` 的 `Form.Item` 的默认插槽作用域:控件由消费方渲染,本件只把绑定值交出去;不带 `name` 的项
|
|
26
|
+
* (纯布局 / 只读行)不需要这些,作用域里的值恒为 `undefined`。
|
|
28
27
|
*/
|
|
29
28
|
export interface FormItemSlotScope {
|
|
30
29
|
/** 当前字段值(Form 里的原值,不做任何归一) */
|
|
@@ -37,41 +36,34 @@ export interface FormItemSlotScope {
|
|
|
37
36
|
export interface FormProps {
|
|
38
37
|
/** 表单级 label 列宽(px);缺省取令牌 `--ui-form-label-width`(120)。px 不跟随根字号,见 CONTRACT「已知偏差」 */
|
|
39
38
|
labelWidth?: number;
|
|
40
|
-
/**
|
|
41
|
-
* 表单级 label 对齐:`right`(默认,文本贴着控件列)或 `left`(所有 label 起点一致)。
|
|
42
|
-
* `Form.Item` 上再写则只改那一行。
|
|
43
|
-
*/
|
|
39
|
+
/** 表单级 label 对齐:`right`(默认,文本贴着控件列)或 `left`(所有 label 起点一致);`Form.Item` 上再写则只改那一行。 */
|
|
44
40
|
labelAlign?: FormLabelAlign;
|
|
45
41
|
/**
|
|
46
|
-
* 表单级控件列宽上限(px);缺省**撑满**剩余宽度。宽表单(>600px
|
|
47
|
-
*
|
|
42
|
+
* 表单级控件列宽上限(px);缺省**撑满**剩余宽度。宽表单(>600px)里让输入框一路拉到右边缘很难看,两种收法
|
|
43
|
+
* 二选一:① 收宽度(`controlWidth={360}`,控件列封顶、右侧留白);② 分列(`columns`,见下)。
|
|
48
44
|
*/
|
|
49
45
|
controlWidth?: number;
|
|
50
46
|
/**
|
|
51
|
-
* 列数:`1`(默认,逐行)/ `2 ~ 6
|
|
52
|
-
*
|
|
53
|
-
* 文本域)记得在对应 `Form.Item` 上给 `fullWidth`,否则会被压成一格。
|
|
47
|
+
* 列数:`1`(默认,逐行)/ `2 ~ 6`(**容器够宽才并排**,窄了自动回落一列)/ `'auto'`(列数随容器宽度动态变化)。
|
|
48
|
+
* 多列下「整行内容」(说明行 / 卡片组 / 表格 / 文本域)记得在对应 `Form.Item` 上给 `fullWidth`,否则会被压成一格。
|
|
54
49
|
*/
|
|
55
50
|
columns?: FormColumns;
|
|
56
51
|
/**
|
|
57
|
-
* 一列的**最小宽度**(px);缺省取令牌 `--ui-form-column-min`(320 =「label 120 +
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
* 抽屉 / 弹窗里嫌字段太窄就调小(如 280),宽页面里嫌列太多就调大(如 380)。
|
|
52
|
+
* 一列的**最小宽度**(px);缺省取令牌 `--ui-form-column-min`(320 =「label 120 + 一个还能用的输入框」的下限)。
|
|
53
|
+
* 它同时是**回落阈值**与**动态列数的除数**:数字档下容器窄于 `N × 最小宽 + (N − 1) × 行距` 就少排一列;动态档下
|
|
54
|
+
* 列数 = `floor((容器宽 + 行距) / (最小宽 + 行距))`。抽屉 / 弹窗里嫌字段太窄就调小(如 280),宽页面里嫌列太多就调大。
|
|
61
55
|
*/
|
|
62
56
|
columnMinWidth?: number;
|
|
63
57
|
/**
|
|
64
|
-
* 表单内距(**px 数字**,与 `Panel` 同一口径):`number` = 四边同值;`{ y, x }` = 上下 /
|
|
65
|
-
*
|
|
66
|
-
* (如 `padding={{ y: 16, x: 20 }}`),这样就不必再挂一个「只写 padding」的应用侧类。
|
|
58
|
+
* 表单内距(**px 数字**,与 `Panel` 同一口径):`number` = 四边同值;`{ y, x }` = 上下 / 左右分别给。**缺省 0**
|
|
59
|
+
* (表单贴容器边,内距由所在容器给);弹窗 / 抽屉里没别的容器给内距时用它自带(如 `{ y: 16, x: 20 }`)。
|
|
67
60
|
*/
|
|
68
61
|
padding?: FormPadding;
|
|
69
62
|
/** 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档 */
|
|
70
63
|
gap?: number;
|
|
71
64
|
/**
|
|
72
|
-
* 受控表单值(**字段名 → 值**,键就是 `Form.Item` 的 `name`);不传即非受控(由 `defaultValue`
|
|
73
|
-
*
|
|
74
|
-
* 值变更时 `emit('update:modelValue')` 与 `onChange` **双走**(`v-model` 落地 + 回调)。
|
|
65
|
+
* 受控表单值(**字段名 → 值**,键就是 `Form.Item` 的 `name`);不传即非受控(由 `defaultValue` 起)。值变更时
|
|
66
|
+
* `emit('update:modelValue')` 与 `onChange` **双走**(`v-model` 落地 + 回调)。
|
|
75
67
|
*/
|
|
76
68
|
modelValue?: FormValues;
|
|
77
69
|
/** 非受控初值;其中的键会一并成为快照的键(不必等字段挂载) */
|
|
@@ -79,81 +71,51 @@ export interface FormProps {
|
|
|
79
71
|
/** 值变更(快照含**全部已登记字段**,未设值的字段为 `undefined`) */
|
|
80
72
|
onChange?: (values: FormValues) => void;
|
|
81
73
|
/**
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
* (构造 `Filter` 时因此不必再套一层只为挂事件的壳 —— 那会改变 `class` / `style` 的落点)。
|
|
88
|
-
*
|
|
89
|
-
* **有意只开这一条**:其它监听器(如 `onClick`)不转发;要把某一条也接进来,先当一次公开行为变更裁决。
|
|
90
|
-
* 要不要拦、拦哪些按键(本包 `Filter` 收窄到「`<input>` 上的回车」)由调用方自己判断,本件只转发。
|
|
74
|
+
* 根节点的键盘事件(**转发到表单根**)。本件是 `inheritAttrs: false`,根节点只显式绑 `class` / `style` ——
|
|
75
|
+
* 不声明的监听器会被**静默丢掉**;而根节点就是「全部字段行的容器」,故它是「字段区层面的委托」的落点(`Filter`
|
|
76
|
+
* 的「字段区回车 = 查询」就搭在这条通道上,构造 `Filter` 时因此不必再套一层只为挂事件的壳)。
|
|
77
|
+
* **有意只开这一条**:其它监听器(如 `onClick`)不转发;判据(`Filter` 收窄到「`<input>` 上的回车」)由调用方
|
|
78
|
+
* 自己定,本件只转发。
|
|
91
79
|
*/
|
|
92
80
|
onKeydown?: (event: KeyboardEvent) => void;
|
|
93
81
|
}
|
|
94
82
|
export interface FormItemProps {
|
|
95
83
|
/**
|
|
96
|
-
* **字段名**(绑定的键):带了它,本行就从 `Form`
|
|
97
|
-
*
|
|
98
|
-
* 纯布局行,值由消费方自己在控件上绑定(静态摘要 / 只读行都属这一类)。
|
|
84
|
+
* **字段名**(绑定的键):带了它,本行就从 `Form` 取值并把写值交出去(默认插槽作用域 `{ value, setValue, clear }`);
|
|
85
|
+
* 不带则与从前一样 —— 纯布局行,值由消费方自己在控件上绑定(静态摘要 / 只读行都属这一类)。
|
|
99
86
|
*/
|
|
100
87
|
name?: string;
|
|
101
|
-
/**
|
|
102
|
-
* 字段名(label 文本)。缺省且非必填时**不渲染 label 列**:控件列占满整行
|
|
103
|
-
* —— 用于无字段名的整块内容(如列编辑区)与纯说明行。
|
|
104
|
-
*/
|
|
88
|
+
/** 字段名(label 文本)。缺省且非必填时**不渲染 label 列**(控件列占满整行)—— 用于无字段名的整块内容与纯说明行。 */
|
|
105
89
|
label?: string;
|
|
106
|
-
/**
|
|
107
|
-
* 必填标记:星号渲染在 label 文本**之后**(`服务名称*`)—— 星号是字段名的一部分,
|
|
108
|
-
* 跟着字段名走;与 farris 动态表单「星号在左」的写法**有意不同**(本仓口径)。
|
|
109
|
-
*/
|
|
90
|
+
/** 必填标记:星号渲染在 label 文本**之后**(`服务名称*`)—— 星号是字段名的一部分,跟着字段名走(与 farris「星号在左」有意不同)。 */
|
|
110
91
|
required?: boolean;
|
|
111
92
|
/** 校验错误文案:非空即进入 invalid 态,文案排布在控件**下方**(不遮挡后续行) */
|
|
112
93
|
error?: string;
|
|
113
94
|
/** 字段说明文案(常驻,排在错误之后) */
|
|
114
95
|
hint?: string;
|
|
115
96
|
/**
|
|
116
|
-
* **label 旁的提示**(问号图标 +
|
|
117
|
-
*
|
|
118
|
-
*
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
* 图标排在 label 文本与必填星号**之后**(`服务名称*ⓘ`);只给 `tip` 而不给 `label` 时同样保留
|
|
122
|
-
* label 列(与「只给 required」同一判据)—— 否则图标没有列可落、静默消失。
|
|
123
|
-
*
|
|
124
|
-
* 用的是 `Tooltip` 的 **hover 档**(零 JS):显隐与定位全在 CSS,移入 / 聚焦即显、移开即隐,
|
|
125
|
-
* 因此**不吃点击、不抢焦点**。代价一条:hover 档不进浏览器顶层浮层,会被祖先 `overflow` 裁切
|
|
126
|
-
* —— 弹窗 / 抽屉里贴着裁剪边的字段可能看不全(要顶层浮层就得换 `Tooltip trigger="click"`,
|
|
127
|
-
* 本件有意不暴露该维度,见文件头「label 提示」)。
|
|
97
|
+
* **label 旁的提示**(问号图标 + 悬停气泡,仅文本)。`hint` 是**常驻**在控件下方的说明,`tip` 是**按需展开**的
|
|
98
|
+
* 补充解释(不占版面,悬停 / 键盘聚焦时出现),两者可同时给。图标排在 label 文本与必填星号**之后**
|
|
99
|
+
* (`服务名称*ⓘ`);只给 `tip` 而不给 `label` 时同样保留 label 列(否则图标没有列可落、静默消失)。气泡用
|
|
100
|
+
* `Tooltip` 的 **hover 档**(零 JS、不吃点击、不抢焦点),代价一条:hover 档不进顶层浮层、会被祖先 `overflow` 裁切。
|
|
128
101
|
*/
|
|
129
102
|
tip?: string;
|
|
130
103
|
/** 本行 label 列宽(px);覆盖 `Form` 的表单级设置 */
|
|
131
104
|
labelWidth?: number;
|
|
132
105
|
/** 本行 label 对齐;覆盖 `Form` 的表单级设置 */
|
|
133
106
|
labelAlign?: FormLabelAlign;
|
|
134
|
-
/**
|
|
135
|
-
* 本行控件列宽上限(px);覆盖 `Form` 的表单级设置。
|
|
136
|
-
* 缺省撑满剩余宽度(宽表单里的选型字段用它收敛,避免长条下拉)。
|
|
137
|
-
*/
|
|
107
|
+
/** 本行控件列宽上限(px);覆盖 `Form` 的表单级设置,缺省撑满剩余宽度(宽表单里的选型字段用它收敛,避免长条下拉)。 */
|
|
138
108
|
controlWidth?: number;
|
|
139
109
|
/** 在两列表单里跨满整行(说明行 / 卡片组 / 表格 / 文本域等整块内容) */
|
|
140
110
|
fullWidth?: boolean;
|
|
141
111
|
/**
|
|
142
|
-
*
|
|
143
|
-
*
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
* - **文本值**:控件位放 `<Input model-value={…} readonly bordered={false} />` ——
|
|
147
|
-
* 几何复用输入面(与可编辑输入框**同高、同内距**,值文字落在同一条竖线与中线上),
|
|
148
|
-
* 并且「无框 + 只读」会自动退掉输入框的交互线索(不显悬停底与聚焦框环,仍可选中复制);
|
|
149
|
-
* 空值占位由业务侧自己拼(如 `model-value="v || '—'"`);
|
|
150
|
-
* - **非文本内容**:内容直接从默认插槽进,`readonly` 只负责弱化 label。
|
|
112
|
+
* **只读展示行**(摘要 / 详情):把 label 降一档**次要色**(与值拉开层级),内容仍走默认插槽。文本值放
|
|
113
|
+
* `<Input model-value={…} readonly bordered={false} />` —— 几何复用输入面(与可编辑输入框同高、同内距,值文字落在
|
|
114
|
+
* 同一条竖线与中线上),且「无框 + 只读」自动退掉交互线索(不显悬停底与聚焦框环,仍可选中复制);空值占位由业务
|
|
115
|
+
* 侧自己拼。非文本内容(徽标 / 链接)直接从默认插槽进,`readonly` 只负责弱化 label。
|
|
151
116
|
*/
|
|
152
117
|
readonly?: boolean;
|
|
153
|
-
/**
|
|
154
|
-
* 行内**垂直**对齐:`center`(默认,label 与控件中线对齐)/ `start`(label 与控件首行文字对齐,
|
|
155
|
-
* 用于多行与整块内容)。不传即按控件类型自动判定(文本域自动顶对齐),显式传入优先。
|
|
156
|
-
*/
|
|
118
|
+
/** 行内**垂直**对齐:`center`(默认,与控件中线对齐)/ `start`(与首行文字对齐,用于多行与整块内容)。不传即按控件类型自动判定(文本域自动顶对齐),显式传入优先。 */
|
|
157
119
|
align?: FormItemAlign;
|
|
158
120
|
}
|
|
159
121
|
/**
|
|
@@ -207,19 +169,6 @@ export interface FormItemProps {
|
|
|
207
169
|
* 迟早会漂开)。几何与可编辑行完全一致;没有「可编辑」的线索(不显悬停底色、不给聚焦框与主色环,仍可点
|
|
208
170
|
* 进去选中 / 复制);**空值占位归业务**(组件不替你把 `''` 显示成 `—`);传 `readonly` 把 label 降一档
|
|
209
171
|
* 次要色;控件位是徽标 / 链接这类**非文本**只读内容时同样传 `readonly`,内容直接走默认插槽。
|
|
210
|
-
*
|
|
211
|
-
* @example
|
|
212
|
-
* <Form labelWidth={120} columns={2}>
|
|
213
|
-
* <Form.Item label="编码" required error={errors.code} hint="保存后不可修改">
|
|
214
|
-
* <Input modelValue={form.code} onChange={(v) => (form.code = v)} />
|
|
215
|
-
* </Form.Item>
|
|
216
|
-
* <Form.Item label="缓存策略" controlWidth={360} tip="命中即不请求后端">
|
|
217
|
-
* <Select options={cacheOptions} modelValue={form.cache} onChange={…} />
|
|
218
|
-
* </Form.Item>
|
|
219
|
-
* <Form.Item label="过滤条件" fullWidth>
|
|
220
|
-
* <Textarea modelValue={form.filter} onChange={…} />
|
|
221
|
-
* </Form.Item>
|
|
222
|
-
* </Form>
|
|
223
172
|
*/
|
|
224
173
|
export declare const FormItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
225
174
|
/** 字段名(绑定的键);不传即纯布局行(值由消费方自己在控件上绑定) */
|
|
@@ -344,10 +293,7 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
|
|
|
344
293
|
default?: (scope: FormItemSlotScope) => VNodeChild;
|
|
345
294
|
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
346
295
|
export interface FormHeaderProps {
|
|
347
|
-
/**
|
|
348
|
-
* 表单头标题。不传则该行不渲染标题文本 —— 但给了 `extra` 时这一行**照渲染**
|
|
349
|
-
* (右端操作位不能凭空消失,与 `Panel`「只给 toolbar / actions、不给 title」同一条口径)。
|
|
350
|
-
*/
|
|
296
|
+
/** 表单头标题。不传则该行不渲染标题文本 —— 但给了 `extra` 时这一行**照渲染**(右端操作位不能凭空消失,与 `Panel`「只给 toolbar / actions、不给 title」同口径)。 */
|
|
351
297
|
title?: string;
|
|
352
298
|
/** 标题下的说明小字(一行话,讲清这块表单是做什么的) */
|
|
353
299
|
description?: string;
|
|
@@ -360,17 +306,6 @@ export interface FormHeaderProps {
|
|
|
360
306
|
*
|
|
361
307
|
* 它只做**标题排版**与操作位,不承担区块分组(那是 `Panel` 的职责);三样(`title` /
|
|
362
308
|
* `extra` / `description`)都没有时整组不渲染 —— 空盒子同样占一档 `Form` 的 gap,会凭空多出间距。
|
|
363
|
-
*
|
|
364
|
-
* @example 筛选条的头(标题 + 右侧查询/重置)—— 插槽走 `h()` 的对象形态:
|
|
365
|
-
* TSX 的 `v-slots={{…}}` 在 vitest 的 JSX 管线里会被当**普通属性**丢掉(见 `list-view/index.tsx` 同款记录)
|
|
366
|
-
* {h(Form, {}, {
|
|
367
|
-
* default: () => [
|
|
368
|
-
* h(Form.Header, { title: '高级筛选' }, { extra: () => h(Button, { variant: 'primary' }, '筛选') }),
|
|
369
|
-
* h(Form.Item, { name: 'keyword', label: '技能名称' }, { default: () => h(Input) }),
|
|
370
|
-
* ],
|
|
371
|
-
* })}
|
|
372
|
-
*
|
|
373
|
-
* @example 只要操作位(不要标题):`h(Form.Header, {}, { extra: () => … })`
|
|
374
309
|
*/
|
|
375
310
|
export declare const FormHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
376
311
|
title: {
|
|
@@ -430,19 +365,14 @@ export declare const Form: {
|
|
|
430
365
|
default: undefined;
|
|
431
366
|
};
|
|
432
367
|
/**
|
|
433
|
-
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label
|
|
434
|
-
*
|
|
435
|
-
* 窄容器(抽屉 / 移动端)与「字段名很长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
368
|
+
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label 在控件上方)。窄容器(抽屉 / 移动端)与「字段名很
|
|
369
|
+
* 长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
436
370
|
*/
|
|
437
371
|
layout: {
|
|
438
372
|
type: PropType<"horizontal" | "vertical">;
|
|
439
373
|
default: string;
|
|
440
374
|
};
|
|
441
|
-
/**
|
|
442
|
-
* 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。
|
|
443
|
-
*
|
|
444
|
-
* 筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径);长表单也可以调松。
|
|
445
|
-
*/
|
|
375
|
+
/** 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径),长表单也可以调松。 */
|
|
446
376
|
gap: {
|
|
447
377
|
type: NumberConstructor;
|
|
448
378
|
default: undefined;
|
|
@@ -525,19 +455,14 @@ export declare const Form: {
|
|
|
525
455
|
default: undefined;
|
|
526
456
|
};
|
|
527
457
|
/**
|
|
528
|
-
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label
|
|
529
|
-
*
|
|
530
|
-
* 窄容器(抽屉 / 移动端)与「字段名很长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
458
|
+
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label 在控件上方)。窄容器(抽屉 / 移动端)与「字段名很
|
|
459
|
+
* 长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
531
460
|
*/
|
|
532
461
|
layout: {
|
|
533
462
|
type: PropType<"horizontal" | "vertical">;
|
|
534
463
|
default: string;
|
|
535
464
|
};
|
|
536
|
-
/**
|
|
537
|
-
* 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。
|
|
538
|
-
*
|
|
539
|
-
* 筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径);长表单也可以调松。
|
|
540
|
-
*/
|
|
465
|
+
/** 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径),长表单也可以调松。 */
|
|
541
466
|
gap: {
|
|
542
467
|
type: NumberConstructor;
|
|
543
468
|
default: undefined;
|
|
@@ -613,19 +538,14 @@ export declare const Form: {
|
|
|
613
538
|
default: undefined;
|
|
614
539
|
};
|
|
615
540
|
/**
|
|
616
|
-
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label
|
|
617
|
-
*
|
|
618
|
-
* 窄容器(抽屉 / 移动端)与「字段名很长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
541
|
+
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label 在控件上方)。窄容器(抽屉 / 移动端)与「字段名很
|
|
542
|
+
* 长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
619
543
|
*/
|
|
620
544
|
layout: {
|
|
621
545
|
type: PropType<"horizontal" | "vertical">;
|
|
622
546
|
default: string;
|
|
623
547
|
};
|
|
624
|
-
/**
|
|
625
|
-
* 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。
|
|
626
|
-
*
|
|
627
|
-
* 筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径);长表单也可以调松。
|
|
628
|
-
*/
|
|
548
|
+
/** 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径),长表单也可以调松。 */
|
|
629
549
|
gap: {
|
|
630
550
|
type: NumberConstructor;
|
|
631
551
|
default: undefined;
|
|
@@ -230,19 +230,14 @@ const FormRoot = /* @__PURE__ */ defineComponent({
|
|
|
230
230
|
default: void 0
|
|
231
231
|
},
|
|
232
232
|
/**
|
|
233
|
-
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label
|
|
234
|
-
*
|
|
235
|
-
* 窄容器(抽屉 / 移动端)与「字段名很长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
233
|
+
* 排布:`horizontal`(label 在左,缺省)/ `vertical`(label 在控件上方)。窄容器(抽屉 / 移动端)与「字段名很
|
|
234
|
+
* 长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
|
|
236
235
|
*/
|
|
237
236
|
layout: {
|
|
238
237
|
type: String,
|
|
239
238
|
default: "horizontal"
|
|
240
239
|
},
|
|
241
|
-
/**
|
|
242
|
-
* 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。
|
|
243
|
-
*
|
|
244
|
-
* 筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径);长表单也可以调松。
|
|
245
|
-
*/
|
|
240
|
+
/** 行距(px,字段行之间 / 与 `Form.Header` 之间);缺省沿用样式里的 8px 档。筛选条这类「上行 + 一行字段」的紧凑排布要 16(设计稿口径),长表单也可以调松。 */
|
|
246
241
|
gap: {
|
|
247
242
|
type: Number,
|
|
248
243
|
default: void 0
|
|
@@ -316,10 +311,8 @@ const FormRoot = /* @__PURE__ */ defineComponent({
|
|
|
316
311
|
/** 当前快照(含全部已登记字段) */
|
|
317
312
|
getValues: () => values.value,
|
|
318
313
|
/**
|
|
319
|
-
* 清空全部字段(置 `undefined`;受控模式下同样会发 `update:modelValue
|
|
320
|
-
*
|
|
321
|
-
* **返回清空后的快照**:受控时外部还没回写 `modelValue`,调用方此刻再 `getValues()`
|
|
322
|
-
* 会读到清空前的旧值 —— 直接吃返回值才不依赖回写时序。
|
|
314
|
+
* 清空全部字段(置 `undefined`;受控模式下同样会发 `update:modelValue`)。**返回清空后的快照**:受控时外部
|
|
315
|
+
* 还没回写 `modelValue`,调用方此刻再 `getValues()` 会读到清空前的旧值 —— 直接吃返回值才不依赖回写时序。
|
|
323
316
|
*/
|
|
324
317
|
clear: () => {
|
|
325
318
|
const cleared = {};
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* `bordered` 三档 →
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 那一对的反差是库内既定口径(见 `docs/guide/naming-and-defaults.md` §2.1);
|
|
7
|
-
* `'focus'` 档的类名 `--border-on-focus` 是这套口径下的新成员:它说的就是「聚焦时才有框」。
|
|
2
|
+
* `bordered` 三档 → 控件类名(**唯一来源**):输入族三个件(`Input` / `Textarea` / `NumberInput`)共用同一份面与同一个
|
|
3
|
+
* prop,判定表抄三份必然漂,故收在这里。类名口径:prop 是**肯定式**(`bordered`)、类名是**否定式**(`--borderless`)
|
|
4
|
+
* —— 那对反差是库内既定口径(见 `docs/guide/naming-and-defaults.md` §2.1);`'focus'` 档的
|
|
5
|
+
* `.mh-input--border-on-focus` 是这套口径下的新成员(它说的就是「聚焦时才有框」)。
|
|
8
6
|
*
|
|
9
7
|
* | `bordered` | 类名 | 常态 | 悬停 | 聚焦 |
|
|
10
8
|
* | --- | --- | --- | --- | --- |
|