@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
|
@@ -5,31 +5,15 @@ export type NoticeTone = 'info' | 'success' | 'warning' | 'error';
|
|
|
5
5
|
* 说明条 / 警告提示(**自建**,不封装 farris)。
|
|
6
6
|
*
|
|
7
7
|
* ## 为什么自建
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* 三者的判据是**出现方式**(见 `Toast` 的「与 Notice / Notification 的判据」)。
|
|
12
|
-
* 上游没有可复用的形态,故自建并定为本包的一族。
|
|
8
|
+
* 它要的是**嵌在页面里的一行说明**(通栏、语义三件套「底 / 边 / 字」、操作为文字按钮)—— 与 `Notification`(有标题与
|
|
9
|
+
* 头像的卡片)、`Toast`(浮出后自己消失)都不是一回事,三者的判据是**出现方式**(见 `Toast` 的「与 Notice /
|
|
10
|
+
* Notification 的判据」);上游没有可复用的形态,故自建并定为本包的一族。
|
|
13
11
|
*
|
|
14
12
|
* ## 口径(取自主题包 Alert 规范)
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* ## 两种排版(按内容量选)
|
|
21
|
-
*
|
|
22
|
-
* | 内容 | 写法 | 排布 |
|
|
23
|
-
* | --- | --- | --- |
|
|
24
|
-
* | 一行话 | 默认插槽 / `description` | 单行,图标与文字同行 |
|
|
25
|
-
* | 有标题 | `message` + `description`(或插槽) | **标题行 + 描述行**两行 |
|
|
26
|
-
*
|
|
27
|
-
* @example 可关闭的说明条(列表页顶部)
|
|
28
|
-
* <Notice closable onClose={() => (visible = false)} icon>值映射用于将来源向量转换为目标值。</Notice>
|
|
29
|
-
*
|
|
30
|
-
* @example 带标题与操作
|
|
31
|
-
* <Notice tone="warning" icon message="尚未完成实名认证" description="使用该服务前须完成认证"
|
|
32
|
-
* action="立即认证" :on-action="goAuth" />
|
|
13
|
+
* **警示 / 错误须常驻**(不渲染关闭按钮),只有通知类信息才可关闭 —— 故 `closable` 默认 `false`,由消费方显式开启;
|
|
14
|
+
* 位置:页面顶部通栏(页面主体顶部),静态展示、不随滚动消失。
|
|
15
|
+
* **两种排版**(按内容量选):一行话(默认插槽 / `description`)→ 单行,图标与文字同行;有标题(`message` +
|
|
16
|
+
* `description` 或插槽)→ **标题行 + 描述行**两行。
|
|
33
17
|
*/
|
|
34
18
|
export declare const Notice: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
35
19
|
/** 语义类型;决定底/边/字三件套与图标 */
|
|
@@ -48,11 +32,9 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
|
|
|
48
32
|
default: undefined;
|
|
49
33
|
};
|
|
50
34
|
/**
|
|
51
|
-
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone`
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
* 三件三个名字三种默认 —— 已统一)。默认值仍与 `Toast` 不同:`Toast` 是「浮出即走」的
|
|
55
|
-
* 消息条,图标是它的主要语义承载;本件是嵌在页面里的说明条,页面里别处往往已经有图标,故缺省不出。
|
|
35
|
+
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone` 映射;也可直接给字形名。与 `Toast.icon` /
|
|
36
|
+
* `Notification.icon` **同名同型**(0.6.x 本件叫 `showIcon` 且只收布尔,三件三个名字三种默认 —— 已统一)。默认
|
|
37
|
+
* 值仍与 `Toast` 不同:`Toast` 是「浮出即走」的消息条、图标是它的主要语义承载;本件嵌在页面里、别处往往已有图标。
|
|
56
38
|
*/
|
|
57
39
|
icon: {
|
|
58
40
|
type: PropType<boolean | IconName>;
|
|
@@ -100,11 +82,9 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
|
|
|
100
82
|
default: undefined;
|
|
101
83
|
};
|
|
102
84
|
/**
|
|
103
|
-
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone`
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
* 三件三个名字三种默认 —— 已统一)。默认值仍与 `Toast` 不同:`Toast` 是「浮出即走」的
|
|
107
|
-
* 消息条,图标是它的主要语义承载;本件是嵌在页面里的说明条,页面里别处往往已经有图标,故缺省不出。
|
|
85
|
+
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone` 映射;也可直接给字形名。与 `Toast.icon` /
|
|
86
|
+
* `Notification.icon` **同名同型**(0.6.x 本件叫 `showIcon` 且只收布尔,三件三个名字三种默认 —— 已统一)。默认
|
|
87
|
+
* 值仍与 `Toast` 不同:`Toast` 是「浮出即走」的消息条、图标是它的主要语义承载;本件嵌在页面里、别处往往已有图标。
|
|
108
88
|
*/
|
|
109
89
|
icon: {
|
|
110
90
|
type: PropType<boolean | IconName>;
|
|
@@ -26,11 +26,9 @@ const Notice = /* @__PURE__ */ defineComponent({
|
|
|
26
26
|
default: void 0
|
|
27
27
|
},
|
|
28
28
|
/**
|
|
29
|
-
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone`
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* 三件三个名字三种默认 —— 已统一)。默认值仍与 `Toast` 不同:`Toast` 是「浮出即走」的
|
|
33
|
-
* 消息条,图标是它的主要语义承载;本件是嵌在页面里的说明条,页面里别处往往已经有图标,故缺省不出。
|
|
29
|
+
* 前置图标:缺省 `false` 不出图标;`true` 按 `tone` 映射;也可直接给字形名。与 `Toast.icon` /
|
|
30
|
+
* `Notification.icon` **同名同型**(0.6.x 本件叫 `showIcon` 且只收布尔,三件三个名字三种默认 —— 已统一)。默认
|
|
31
|
+
* 值仍与 `Toast` 不同:`Toast` 是「浮出即走」的消息条、图标是它的主要语义承载;本件嵌在页面里、别处往往已有图标。
|
|
34
32
|
*/
|
|
35
33
|
icon: {
|
|
36
34
|
type: [Boolean, String],
|
|
@@ -21,15 +21,6 @@ export type NotificationTone = 'info' | 'success' | 'warning' | 'error' | 'submi
|
|
|
21
21
|
*
|
|
22
22
|
* 关闭是**受控**的:本件只回调 `onClose`,不自己隐藏(可见性归消费方,避免「点了没反应」与
|
|
23
23
|
* 「组件自己消失」两套口径)。`duration` 到点也只回调 —— 与 `Toast` 同一口径。
|
|
24
|
-
*
|
|
25
|
-
* @example 基础
|
|
26
|
-
* <Notification tone="warning" title="待办超期" closable @close="dismiss">3 个任务已超期</Notification>
|
|
27
|
-
*
|
|
28
|
-
* @example 图标 + 自动消失 + 头像 + 标签
|
|
29
|
-
* <Notification icon duration={4000} tone="info" title="审批通知" avatar="张" @close="dismiss">
|
|
30
|
-
* <Badge shape="soft" tone="error">逾期</Badge>
|
|
31
|
-
* {{ actions: () => <Button size="sm" variant="primary">去处理</Button> }}
|
|
32
|
-
* </Notification>
|
|
33
24
|
*/
|
|
34
25
|
export declare const Notification: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
35
26
|
tone: {
|
|
@@ -31,62 +31,28 @@ import { type Padding } from '../part-padding';
|
|
|
31
31
|
* 页头右侧的自由位(搜索框 / 按钮 / 等)是 `Page.Header` 的 `extra` 位(属性或插槽),**没有独立的成员件**:
|
|
32
32
|
* 那个位置只有页头一个承载者,写成成员等于给它加一层没有意义的转发。
|
|
33
33
|
*
|
|
34
|
-
*
|
|
35
|
-
* // 模板 A:列表页(页头 + 表格 + 页脚分页)
|
|
36
|
-
* <Page>
|
|
37
|
-
* <Page.Header title="技能分类" subTitle="共 128 个技能"
|
|
38
|
-
* extra={<搜索框 modelValue={kw} />} />
|
|
39
|
-
* <Page.Body mode="plain">
|
|
40
|
-
* <Table framed rows={rows} columns={columns} rowKey="id" />
|
|
41
|
-
* </Page.Body>
|
|
42
|
-
* <Page.Footer>
|
|
43
|
-
* <Pagination page={page} pageSize={size} total={total} onPageChange={…} />
|
|
44
|
-
* </Page.Footer>
|
|
45
|
-
* </Page>
|
|
46
|
-
*
|
|
47
|
-
* // 模板 B:双栏(Split 提供中间分隔线,栏内滚动由 Panel 承担)
|
|
48
|
-
* <Page.Body mode="plain">
|
|
49
|
-
* <Page.Split sidebar={{ width: 208, content: () => <Panel title="业务域" /> }}>
|
|
50
|
-
* <Panel title="值映射列表"><Table framed rows={rows} columns={cols} rowKey="id" /></Panel>
|
|
51
|
-
* </Page.Split>
|
|
52
|
-
* </Page.Body>
|
|
34
|
+
* 用法见 `docs/demos/page/`(每个维度一份可运行样例;文档页 `docs/components/page.md`)。
|
|
53
35
|
*/
|
|
54
36
|
/** 页面骨架(及其各部件)的内距:与 `Panel` / `Form` 共用一套口径(`number` = 四边同值;`{ y, x }` 分别给) */
|
|
55
37
|
export type PagePadding = Padding;
|
|
56
38
|
export interface PageHeaderProps {
|
|
57
39
|
/** 传入 title 走内置布局;不传则纯 slot 直出(自定义页头出口) */
|
|
58
40
|
title?: string;
|
|
59
|
-
/**
|
|
60
|
-
* 页头副标题:标题**下一行**的次要说明(对象名、统计口径等),随 `title` 一起进内置布局。
|
|
61
|
-
* 不传即不渲染(页头条高度不变);`title` 不传时本项不生效(整块走自定义页头出口)。
|
|
62
|
-
*/
|
|
41
|
+
/** 页头副标题:标题**下一行**的次要说明(对象名、统计口径等),随 `title` 一起进内置布局。不传即不渲染(页头条高度不变);`title` 不传时本项不生效。 */
|
|
63
42
|
subTitle?: string;
|
|
64
|
-
/**
|
|
65
|
-
* 标题左侧图标:**svg 节点或返回节点的函数**皆可。缺省渲染设计稿默认图标
|
|
66
|
-
* (MH后台-0911 node 0:3904:26×26 圆角方块,`currentColor` 随主题)。
|
|
67
|
-
*/
|
|
43
|
+
/** 标题左侧图标:**svg 节点或返回节点的函数**皆可;缺省渲染设计稿默认图标(MH后台-0911 `0:3904`:26×26 圆角方块,`currentColor` 随主题)。 */
|
|
68
44
|
icon?: VNodeChild | (() => VNodeChild);
|
|
69
|
-
/**
|
|
70
|
-
* 页头右侧的自由位(唯一可自定义位):搜索框 / 按钮 / 下拉等,水平排列。
|
|
71
|
-
* 传节点或返回节点的函数。布局(垂直居中 / 间距)由标准样式锁死。
|
|
72
|
-
*/
|
|
45
|
+
/** 页头右侧的自由位(唯一可自定义位):搜索框 / 按钮 / 下拉等,水平排列;传节点或返回节点的函数。布局(垂直居中 / 间距)由标准样式锁死。 */
|
|
73
46
|
extra?: unknown;
|
|
74
47
|
}
|
|
75
48
|
export interface PageBodyProps {
|
|
76
49
|
/** scroll=自身滚(长内容页);plain=不滚(默认,滚动归区域内容区 / 内容件自持的定高容器) */
|
|
77
50
|
mode?: 'scroll' | 'plain';
|
|
78
|
-
/**
|
|
79
|
-
* 内容区内距(px 数字 = 四边同值;`{ y, x }` 分别给)。缺省不落行内样式,沿用 CSS 默认(`0 20px`)——
|
|
80
|
-
* 行内只覆盖**给到的轴**,所以传 `{ y: 16 }` 时左右仍是 CSS 的 20px(与页头左对齐不破)。
|
|
81
|
-
* 典型用法:「表格 / 卡片不贴页头下边线」→ `padding={{ y: 16 }}`。
|
|
82
|
-
*/
|
|
51
|
+
/** 内容区内距(px 数字 = 四边同值;`{ y, x }` 分别给)。缺省不落行内样式,沿用 CSS 默认(`0 20px`)—— 行内只覆盖**给到的轴**,故传 `{ y: 16 }` 时左右仍是 20px(与页头左对齐不破)。典型用法:表格 / 卡片不贴页头下边线 → `padding={{ y: 16 }}`。 */
|
|
83
52
|
padding?: PagePadding;
|
|
84
53
|
}
|
|
85
54
|
export interface PageSplitSidebarProps {
|
|
86
|
-
/**
|
|
87
|
-
* 该侧栏的**初始**内容宽(px 数字,`content-box` 语义):
|
|
88
|
-
* 不传即自适应(不写死宽度);拖拽后以拖出的宽度为准 —— 拖拽结果不持久化,刷新 / 重进回到本值。
|
|
89
|
-
*/
|
|
55
|
+
/** 该侧栏的**初始**内容宽(px,`content-box` 语义):不传即自适应(不写死宽度);拖拽后以拖出的宽度为准 —— 结果不持久化,刷新 / 重进回到本值。 */
|
|
90
56
|
width?: number;
|
|
91
57
|
/** 是否内建拖拽手柄与收起按钮,缺省 `true`;`false` 时该侧不渲染手柄/把手、不挂监听 */
|
|
92
58
|
resizable?: boolean;
|
|
@@ -106,9 +72,8 @@ export interface PageSplitProps {
|
|
|
106
72
|
rightSidebar?: PageSplitSidebarProps;
|
|
107
73
|
}
|
|
108
74
|
/**
|
|
109
|
-
* Object.assign
|
|
110
|
-
*
|
|
111
|
-
* 2. 每个子件必须显式声明 slots(SlotsType),否则 JSX 下 slot 参数类型退化为 any。
|
|
75
|
+
* Object.assign 复合件。两个注意点:① Object.assign 后不要再 defineComponent 二次包装,否则 props 类型丢失;
|
|
76
|
+
* ② 每个子件必须显式声明 slots(`SlotsType`),否则 JSX 下 slot 参数类型退化为 any。
|
|
112
77
|
*/
|
|
113
78
|
export declare const Page: {
|
|
114
79
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, SlotsType<{
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* `Page.Split` 侧栏交互的内部纯函数与常量(**不进对外导出面**:`src/index.ts` 白名单不外扩)。
|
|
3
3
|
*
|
|
4
|
-
* 抽出来的理由:宽度夹取与基准实测是**带分支的纯逻辑**(区间归一化、非有限数容错、
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* 已知取舍:`measureSidebarWidth` 依赖 `clientWidth`,jsdom 没有布局引擎(恒为 0),
|
|
9
|
-
* 走的是「回退到 prop 宽度 → 回退到兜底常量」这条路径;浏览器里才有真实实测值。
|
|
4
|
+
* 抽出来的理由:宽度夹取与基准实测是**带分支的纯逻辑**(区间归一化、非有限数容错、content-box 语义下的内距扣除、无布局
|
|
5
|
+
* 环境下的回退顺序),放一处便于直接单测;组件里只留状态与 DOM 绑定。已知取舍:`measureSidebarWidth` 依赖
|
|
6
|
+
* `clientWidth`,jsdom 没有布局引擎(恒为 0),走的是「回退到 prop 宽度 → 回退到兜底常量」这条路径。
|
|
10
7
|
*/
|
|
11
8
|
/** 侧栏所在侧:`left` = `sidebar` 槽位;`right` = `rightSidebar` 槽位(镜像) */
|
|
12
9
|
export type SplitSide = 'left' | 'right';
|
|
@@ -14,10 +11,7 @@ export type SplitSide = 'left' | 'right';
|
|
|
14
11
|
export declare const SPLIT_MIN_WIDTH = 160;
|
|
15
12
|
/** 拖拽上限缺省值(px) */
|
|
16
13
|
export declare const SPLIT_MAX_WIDTH = 480;
|
|
17
|
-
/**
|
|
18
|
-
* 未传 `width` 且实测不到时的拖拽基准兜底。
|
|
19
|
-
* **只用于拖拽基准**,不参与初始渲染 —— 所以不违背「不传 `width` 就不写死宽度」的口径。
|
|
20
|
-
*/
|
|
14
|
+
/** 未传 `width` 且实测不到时的拖拽基准兜底。**只用于拖拽基准**、不参与初始渲染 —— 故不违背「不传 `width` 就不写死宽度」的口径。 */
|
|
21
15
|
export declare const SPLIT_FALLBACK_WIDTH = 208;
|
|
22
16
|
/** 区间归一化:`max < min` 时按数值大小归位(不抛错),缺省 160 / 480 */
|
|
23
17
|
export declare function splitWidthBounds(min?: number, max?: number): {
|
|
@@ -25,18 +19,15 @@ export declare function splitWidthBounds(min?: number, max?: number): {
|
|
|
25
19
|
max: number;
|
|
26
20
|
};
|
|
27
21
|
/**
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
* 非有限数的口径:`NaN` 无法比较大小 ⇒ 落回下限;`±Infinity` 有明确方向
|
|
31
|
-
* ("拖到无穷远"就是顶到那侧的边界)⇒ 由 `Math.min/max` 自然夹到上限 / 下限。
|
|
22
|
+
* 夹取到区间并取整(防亚像素抖动)。非有限数的口径:`NaN` 无法比较大小 ⇒ 落回下限;`±Infinity` 有明确方向(「拖到无穷
|
|
23
|
+
* 远」就是顶到那侧的边界)⇒ 由 `Math.min/max` 自然夹到上限 / 下限。
|
|
32
24
|
*/
|
|
33
25
|
export declare function clampSplitWidth(value: number, min?: number, max?: number): number;
|
|
34
26
|
/** 拖拽位移投影为宽度:右侧栏镜像(向左拖变宽) */
|
|
35
27
|
export declare function projectSplitWidth(base: number, deltaX: number, side: SplitSide): number;
|
|
36
28
|
/**
|
|
37
|
-
* 实测某侧栏的**内容宽**(与 `box-sizing: content-box` 的 `width`
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* 取不到正值(jsdom 无布局 / 未渲染 / 已收起)时按 `prop 宽度 → 兜底常量` 回退。
|
|
29
|
+
* 实测某侧栏的**内容宽**(与 `box-sizing: content-box` 的 `width` 同语义)。`clientWidth` 天然排除边框、包含内距,
|
|
30
|
+
* 故减去该侧内距即内容宽 —— 不必手工补 1px 边框。取不到正值(jsdom 无布局 / 未渲染 / 已收起)时按「prop 宽度 →
|
|
31
|
+
* 兜底常量」回退。
|
|
41
32
|
*/
|
|
42
33
|
export declare function measureSidebarWidth(el: HTMLElement | null | undefined, side: SplitSide, fallback?: number): number;
|
|
@@ -22,11 +22,7 @@ export type PaginationPageItem = number | 'ellipsis';
|
|
|
22
22
|
* 本件只管"翻到第几页";**列表为空/加载中/出错**由 `QueryState` 承载(本件只在 `total === 0` 时给出一行
|
|
23
23
|
* 兜底文案,因为分页条自己也得说清"没数据"而不是显示 `共 0 条`)。
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
* <Pagination :total="243" v-model="page" v-model:page-size="size" />
|
|
27
|
-
*
|
|
28
|
-
* @example 跳页 + 单页隐藏
|
|
29
|
-
* <Pagination :total="243" show-quick-jumper hide-on-single-page v-model="page" />
|
|
25
|
+
* 用法见 `docs/demos/pagination/`(每个维度一份可运行样例;文档页 `docs/components/pagination.md`)。
|
|
30
26
|
*/
|
|
31
27
|
export declare const Pagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
32
28
|
/** 总条数 */
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
import { type PropType, type SlotsType, type VNodeChild } from 'vue';
|
|
2
2
|
import { type Padding } from '../part-padding';
|
|
3
3
|
/**
|
|
4
|
-
* 区域容器(页面内分区)—— 与 `Page`
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* - `Panel`:**区域级**(可多个)。只管区域内的三件(Header / Body / Footer)与区域内滚动
|
|
8
|
-
* (Header 与 Footer 固定、只有 Body 滚),**不参与页面高度分配**,也不决定页面级滚动归属。
|
|
4
|
+
* 区域容器(页面内分区)—— 与 `Page` 的分工:`Page` 是**页面级**(唯一),管页头规格 / Footer 固定 / 页面级
|
|
5
|
+
* 滚动归属(`Body.mode`);`Panel` 是**区域级**(可多个),只管区域内的三件(Header / Body / Footer)与区域内滚动
|
|
6
|
+
* (Header 与 Footer 固定、只有 Body 滚),**不参与页面高度分配**,也不决定页面级滚动归属。
|
|
9
7
|
*
|
|
10
8
|
* ## 三件结构(与 `Page` 同款复合写法)
|
|
11
9
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* <Panel.Footer><分页器 … /></Panel.Footer>
|
|
17
|
-
* </Panel>
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
-
* 简写仍可用(等价于「内建 Header + 包一层的 Body」):`<Panel title=… toolbar=… actions=…>内容</Panel>`;
|
|
21
|
-
* 两种写法可混用 —— 显式的 `Panel.Header/ Body/ Footer` 会被提到对应位置,其余子节点自动进 Body。
|
|
10
|
+
* `<Panel>` → `<Panel.Header title=… toolbar=… actions=… />` + `<Panel.Body>…内容(表格 / 树 / 表单)…</Panel.Body>`
|
|
11
|
+
* + `<Panel.Footer><分页器 … /></Panel.Footer>`。
|
|
12
|
+
* 简写仍可用(等价于「内建 Header + 包一层的 Body」):`<Panel title=… toolbar=… actions=…>内容</Panel>`;两种
|
|
13
|
+
* 写法可混用 —— 显式的 `Panel.Header/Body/Footer` 会被提到对应位置,其余子节点自动进 Body。
|
|
22
14
|
*
|
|
23
15
|
* ## 分页归属(**跟承载表格的容器走**)
|
|
24
16
|
*
|
|
@@ -36,34 +28,24 @@ import { type Padding } from '../part-padding';
|
|
|
36
28
|
*
|
|
37
29
|
* 面板与它的三件吃**同一套** `padding`(px 数字 / `{ y, x }`),缺省都不吃(贴各自的边):
|
|
38
30
|
*
|
|
39
|
-
* - 根件 = 整块面板的内距:页面里的区域通常不吃(内外距由 `Page`
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* `padding={{ y: 24, x: 100 }}` —— `y` 是上下留白,`x` 开大即充当**限宽**
|
|
44
|
-
* (宽弹窗里不让表单行一路拉到右边缘);这条以前是应用侧的「只写 padding」类。
|
|
31
|
+
* - 根件 = 整块面板的内距:页面里的区域通常不吃(内外距由 `Page` 的各部件给);弹窗内的区域没有别的东西可给内距,
|
|
32
|
+
* 用它自带(`padding={{ y: 12, x: 20 }}`)—— 这样就不必再给面板挂一个「只写 padding」的应用侧类。
|
|
33
|
+
* - `Panel.Body` = 内容区的内距,**弹窗里最常用的一条**:如向导内容区 `padding={{ y: 24, x: 100 }}` —— `y` 是
|
|
34
|
+
* 上下留白,`x` 开大即充当**限宽**(宽弹窗里不让表单行一路拉到右边缘)。
|
|
45
35
|
* - `Panel.Footer` = 常驻控件(分页条等)与内容的距离,如 `padding={{ y: 10 }}`。
|
|
46
|
-
* - `Panel.Header` = 内建头那一行的内距;走 `header`
|
|
47
|
-
*
|
|
36
|
+
* - `Panel.Header` = 内建头那一行的内距;走 `header` 插槽时(整行替换)会把自定义头**包一层**只带内距的 div
|
|
37
|
+
* (自定义头内部的几何仍归消费方)。
|
|
48
38
|
*
|
|
49
39
|
* ## 两位分工(不可互换)
|
|
50
40
|
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
41
|
+
* `toolbar` = **本区域的筛选 / 搜索位**(≤3 个字段,过滤本区域数据);`actions` = **本区域的操作位**(该区域的
|
|
42
|
+
* 新建 / 刷新等)。筛选归属判据:**先问「过滤谁的数据」决定放哪个区域的 toolbar,再问「几个字段」** —— 字段数
|
|
43
|
+
* > 3 时上提为页面级筛选区;把筛选塞进 `actions`、或把操作塞进 `toolbar` 均属违规。
|
|
44
|
+
* 完全自定义的面板头请走 `Panel.Header`(不传 `title`)或 `header` 插槽(需在接入方登记为白名单)。**只给
|
|
45
|
+
* `toolbar` / `actions`、不给 `title` 也是合法形态**:那一行照渲染(标题在容器外层时用,如弹窗内的区域 ——
|
|
46
|
+
* 弹窗标题栏已写了区域名,面板头只剩一行「搜索 + 操作」);三样都不给才不渲染头。
|
|
56
47
|
*
|
|
57
|
-
*
|
|
58
|
-
* **只给 `toolbar` / `actions`、不给 `title` 也是合法形态**:那一行照渲染(标题在容器外层时用,如弹窗内的区域
|
|
59
|
-
* —— 弹窗标题栏已写了区域名,面板头只剩一行「搜索 + 操作」);三样都不给才不渲染头。
|
|
60
|
-
*
|
|
61
|
-
* @example 区域级列表(表格 + 分页都在本区域内)
|
|
62
|
-
* <Panel>
|
|
63
|
-
* <Panel.Header title="值映射列表" toolbar={<搜索框 … />} actions={<Button>新建</Button>} />
|
|
64
|
-
* <Panel.Body><表格 framed rows={rows} columns={columns} rowKey="id" /></Panel.Body>
|
|
65
|
-
* <Panel.Footer><分页器 page={page} pageSize={size} total={total} onPageChange={…} /></Panel.Footer>
|
|
66
|
-
* </Panel>
|
|
48
|
+
* 用法见 `docs/demos/panel/`(每个维度一份可运行样例;文档页 `docs/components/panel.md`)。
|
|
67
49
|
*/
|
|
68
50
|
export interface PanelProps {
|
|
69
51
|
/** 面板标题;缺省时若提供了 `header` 插槽则走完全自定义面板头 */
|
|
@@ -88,10 +70,7 @@ export interface PanelProps {
|
|
|
88
70
|
export type PanelPadding = Padding;
|
|
89
71
|
/** 面板标题行(区域级):标题 + 本区域筛选位(toolbar) + 本区域操作位(actions) */
|
|
90
72
|
export declare const PanelHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
91
|
-
/**
|
|
92
|
-
* 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行
|
|
93
|
-
* (无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。
|
|
94
|
-
*/
|
|
73
|
+
/** 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行(无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。 */
|
|
95
74
|
title: {
|
|
96
75
|
type: StringConstructor;
|
|
97
76
|
default: undefined;
|
|
@@ -112,10 +91,7 @@ export declare const PanelHeader: import("vue").DefineComponent<import("vue").Ex
|
|
|
112
91
|
default: undefined;
|
|
113
92
|
};
|
|
114
93
|
}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
115
|
-
/**
|
|
116
|
-
* 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行
|
|
117
|
-
* (无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。
|
|
118
|
-
*/
|
|
94
|
+
/** 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行(无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。 */
|
|
119
95
|
title: {
|
|
120
96
|
type: StringConstructor;
|
|
121
97
|
default: undefined;
|
|
@@ -174,10 +150,8 @@ export declare const PanelBody: import("vue").DefineComponent<import("vue").Extr
|
|
|
174
150
|
default?: () => VNodeChild;
|
|
175
151
|
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
176
152
|
/**
|
|
177
|
-
*
|
|
178
|
-
*
|
|
179
|
-
* `padding` 用来把常驻控件与上面的内容拉开(如 `padding={{ y: 10 }}`)——
|
|
180
|
-
* 页脚自己没有内距,以前这条距离各弹窗各写一个 `padding-top` 的应用侧类。
|
|
153
|
+
* 面板页脚:区域内**常驻**控件(本区域表格的分页条等),不随内容滚动。`padding` 用来把常驻控件与上面的内容拉开
|
|
154
|
+
* (如 `padding={{ y: 10 }}`)—— 页脚自己没有内距,以前这条距离各弹窗各写一个 `padding-top` 的应用侧类。
|
|
181
155
|
*/
|
|
182
156
|
export declare const PanelFooter: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
183
157
|
/** 页脚内距(与根件同一口径);缺省 0 = 贴面板边 */
|
|
@@ -196,10 +170,7 @@ export declare const PanelFooter: import("vue").DefineComponent<import("vue").Ex
|
|
|
196
170
|
}, SlotsType<{
|
|
197
171
|
default?: () => VNodeChild;
|
|
198
172
|
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
199
|
-
/**
|
|
200
|
-
* 复合件入口:`Panel` + `Panel.Header` / `Panel.Body` / `Panel.Footer`
|
|
201
|
-
* (与 `Page` 同款 Object.assign 复合写法)
|
|
202
|
-
*/
|
|
173
|
+
/** 复合件入口:`Panel` + `Panel.Header` / `Panel.Body` / `Panel.Footer`(与 `Page` 同款 Object.assign 复合写法) */
|
|
203
174
|
export declare const Panel: {
|
|
204
175
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
|
|
205
176
|
/** 简写标题:等价于内建 `Panel.Header` */
|
|
@@ -302,10 +273,7 @@ export declare const Panel: {
|
|
|
302
273
|
actions?: () => VNodeChild;
|
|
303
274
|
}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
|
|
304
275
|
Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
305
|
-
/**
|
|
306
|
-
* 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行
|
|
307
|
-
* (无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。
|
|
308
|
-
*/
|
|
276
|
+
/** 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行(无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。 */
|
|
309
277
|
title: {
|
|
310
278
|
type: StringConstructor;
|
|
311
279
|
default: undefined;
|
|
@@ -326,10 +294,7 @@ export declare const Panel: {
|
|
|
326
294
|
default: undefined;
|
|
327
295
|
};
|
|
328
296
|
}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
329
|
-
/**
|
|
330
|
-
* 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行
|
|
331
|
-
* (无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。
|
|
332
|
-
*/
|
|
297
|
+
/** 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行(无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。 */
|
|
333
298
|
title: {
|
|
334
299
|
type: StringConstructor;
|
|
335
300
|
default: undefined;
|
|
@@ -4,10 +4,7 @@ const PanelHeader = /* @__PURE__ */ defineComponent({
|
|
|
4
4
|
name: "PanelHeader",
|
|
5
5
|
inheritAttrs: false,
|
|
6
6
|
props: {
|
|
7
|
-
/**
|
|
8
|
-
* 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行
|
|
9
|
-
* (无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。
|
|
10
|
-
*/
|
|
7
|
+
/** 面板标题;缺省时**不渲染标题节点**,但仍会渲染 `toolbar` / `actions` 那一行(无标题的区域头,见组件头注释);要给完全自定义的头走 `header` 插槽。 */
|
|
11
8
|
title: {
|
|
12
9
|
type: String,
|
|
13
10
|
default: void 0
|
|
@@ -5,26 +5,18 @@ import type { StyleValue } from 'vue';
|
|
|
5
5
|
* - `number` → 四边同值(`padding={16}`);
|
|
6
6
|
* - `{ y, x }` → 上下 / 左右分别给(`{ y: 12, x: 20 }`,弹窗里的容器常用 —— 与 `Page` 的页面左右内距同档),
|
|
7
7
|
* **缺哪边就不落哪边的声明**(只给 `y` 时不覆盖消费方在 `style` 里写的左右内距);
|
|
8
|
-
* - `string` → **原样下发**(CSS
|
|
8
|
+
* - `string` → **原样下发**(CSS 简写,可非对称)—— **逃生舱**,优先级最低:写它等于自己写 CSS,能不用就不用。
|
|
9
9
|
*
|
|
10
|
-
* 常规用 `number` / `{ y, x }
|
|
11
|
-
* (与 `Form.labelWidth` / `表格.rowHeight` 同口径)。
|
|
12
|
-
* `string` 只为「令牌梯度与 `{ y, x }` 都表达不了的设计要求」留口(典型:**只给一侧**的非对称坐标)——
|
|
13
|
-
* 写它等于自己写 CSS,所以**优先级最低**,能不用就不用。
|
|
10
|
+
* 常规用 `number` / `{ y, x }`:几何值在本仓是**设计基准**,不跟根字号(与 `Form.labelWidth` / `表格.rowHeight` 同口径)。
|
|
14
11
|
*/
|
|
15
12
|
export type Padding = number | {
|
|
16
13
|
y?: number;
|
|
17
14
|
x?: number;
|
|
18
15
|
} | string;
|
|
19
|
-
/**
|
|
20
|
-
* 内距 → 行内样式。缺省(`undefined` / 空串)时返回 `undefined`:**不额外产生 style 属性**,
|
|
21
|
-
* DOM 与「没有这个维度」时完全一致。
|
|
22
|
-
*/
|
|
16
|
+
/** 内距 → 行内样式。缺省(`undefined` / 空串)时返回 `undefined`:**不额外产生 style 属性**,DOM 与「没有这个维度」时一致。 */
|
|
23
17
|
export declare function partPaddingStyle(padding: Padding | undefined): StyleValue | undefined;
|
|
24
18
|
/**
|
|
25
|
-
* 合并「消费方给的 `style
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* 不给 `padding` 时**原样返回消费方的 style**(含 `undefined`)。
|
|
19
|
+
* 合并「消费方给的 `style`」与「内距行内样式」:两者都可能有时内距排在后面 —— 同一属性以组件的 `padding` 为准(消费方
|
|
20
|
+
* 要覆盖就用 `class` 里更具体的规则)。不给 `padding` 时**原样返回消费方的 style**(含 `undefined`)。
|
|
29
21
|
*/
|
|
30
22
|
export declare function mergePartStyle(attrsStyle: unknown, padding: Padding | undefined): StyleValue | undefined;
|
|
@@ -39,41 +39,17 @@ export interface QueryStateProps {
|
|
|
39
39
|
*
|
|
40
40
|
* ## 视觉构成(三态非加载态一致)
|
|
41
41
|
*
|
|
42
|
-
* **插画 → 主文案 → 副文案 → 操作区**,整块垂直居中、留白由令牌给(`.mh-state
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* 文案 props 可覆盖(i18n 由消费方传 t() 结果;本包不内置文案)。
|
|
42
|
+
* **插画 → 主文案 → 副文案 → 操作区**,整块垂直居中、留白由令牌给(`.mh-state`)。插画默认取内建件
|
|
43
|
+
* (设计交付的「空状态」/「错误」两张图,内联在 `utils/state-illustration.ts`),可用 `illustration` 属性
|
|
44
|
+
* 换成图片资源、或用同名插槽整幅自定义;操作区同理有 `actions` 插槽。文案 props 可覆盖(i18n 由消费方传
|
|
45
|
+
* `t()` 结果;本包不内置文案)。
|
|
47
46
|
*
|
|
48
47
|
* ## 两个容易拿不准的点
|
|
49
48
|
*
|
|
50
|
-
* - `empty` 是**触发位**,不是「文案 prop」:`true`
|
|
51
|
-
*
|
|
52
|
-
* -
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
* @example 列表页:三态在外层,表格只管数据(经典写法)
|
|
56
|
-
* <QueryState
|
|
57
|
-
* loading={isLoading}
|
|
58
|
-
* error={loadError}
|
|
59
|
-
* :empty="rows.length === 0"
|
|
60
|
-
* :error-action-text="t('common.retry')"
|
|
61
|
-
* onErrorAction={() => refetch()}>
|
|
62
|
-
* <Table :columns="columns" :data="rows" row-key="id" />
|
|
63
|
-
* </QueryState>
|
|
64
|
-
*
|
|
65
|
-
* @example 三态齐备(空态带 CTA、错误态带重试)
|
|
66
|
-
* <QueryState
|
|
67
|
-
* loading={isLoading}
|
|
68
|
-
* error={loadError.value}
|
|
69
|
-
* errorActionText={t('common.retry')}
|
|
70
|
-
* onErrorAction={() => reload()}
|
|
71
|
-
* empty={t('topic.empty')}
|
|
72
|
-
* emptyDescription={t('topic.emptyDescription')}
|
|
73
|
-
* emptyActionText={t('topic.create')}
|
|
74
|
-
* onEmptyAction={() => openCreate()}>
|
|
75
|
-
* <TopicGrid topics={topics} />
|
|
76
|
-
* </QueryState>
|
|
49
|
+
* - `empty` 是**触发位**,不是「文案 prop」:`true` 触发并用默认文案;给字符串则**既触发、又当空态标题**
|
|
50
|
+
* (副文案仍走 `emptyDescription`);
|
|
51
|
+
* - **本件不自带数据源**:三态都由调用方按自己的请求结果给。`Table` 自带加载与空两态却**没有错误态** ——
|
|
52
|
+
* 要么只把 error 交给本件,要么整块三态由本件在外层表达。
|
|
77
53
|
*/
|
|
78
54
|
export declare const QueryState: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
79
55
|
loading: {
|
|
@@ -17,6 +17,8 @@ import type { ControlSize } from '../control-size';
|
|
|
17
17
|
*
|
|
18
18
|
* 状态表达不统一是**有意的**(各自贴着自己的面):`Radio` 走原生 `input:checked + .mh-radio__box`
|
|
19
19
|
* (故 **input 必须紧邻框体之前**),`Radio.Card` 走卡片上的 `data-state`(卡片就是 label,圆点在卡内)。
|
|
20
|
+
*
|
|
21
|
+
* 用法见 `docs/demos/radio/`(每个维度一份可运行样例;文档页 `docs/components/radio.md`)。
|
|
20
22
|
*/
|
|
21
23
|
export interface RadioProps {
|
|
22
24
|
/** 本项的值(组内唯一) */
|
|
@@ -40,9 +42,6 @@ export interface RadioProps {
|
|
|
40
42
|
* 三源等价的选中态由样式层承担(原生 `:checked` / 组件 `[data-state]` / 静态档 `.is-*`),
|
|
41
43
|
* 本件只负责把原生 input 与自绘框体的顺序摆对(**input 必须在框体之前** —— 样式层靠
|
|
42
44
|
* `input:checked + .mh-radio__box` 选态)。
|
|
43
|
-
*
|
|
44
|
-
* @example 单用(自己管互斥)
|
|
45
|
-
* <Radio name="scope" value="all" label="全部" checked={v === 'all'} onChange={setV} />
|
|
46
45
|
*/
|
|
47
46
|
export declare const Radio: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
48
47
|
value: {
|
|
@@ -38,45 +38,25 @@ export interface SearchProps {
|
|
|
38
38
|
* | 图标按钮 | `action="icon"` | ❌(让给按钮) | 主色图标按钮 |
|
|
39
39
|
* | 文案按钮 | `searchText="搜索"` | ✅ | 主色文案按钮 |
|
|
40
40
|
*
|
|
41
|
-
* **框内放大镜与图标按钮不会同时出现** ——
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
* 缺省形态的提交走**回车**(`Input` 的 `onEnter` 与 `onSearch` 是同一次语义)。
|
|
41
|
+
* **框内放大镜与图标按钮不会同时出现** —— 两者是同一个语义的两种画法,摆在一起就是「一行里两个放大镜,分不
|
|
42
|
+
* 出哪个能点」(0.6.0 的缺陷;0.7.0 起由 `action="icon"` 把「图标按钮」这一档补上,取它时框内自动不再画
|
|
43
|
+
* 装饰)。缺省形态的提交走**回车**(`Input` 的 `onEnter` 与 `onSearch` 是同一次语义)。
|
|
45
44
|
*
|
|
46
45
|
* ## 为什么不是 `Input` 的一个档,而是单独一件
|
|
47
46
|
*
|
|
48
|
-
* 搜索语义有两件 `Input`
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
* (清空只改值、不发触发),每处调用都自己写 watch 兜底。
|
|
53
|
-
* 本件把这两条收进一处:`onChange` 管值、`onSearch` / `onClear` 管动作。
|
|
47
|
+
* 搜索语义有两件 `Input` 不该背的事:① **触发是显式的**(回车与点按钮都算一次「搜索」,与「值变了」不是同一
|
|
48
|
+
* 件事)—— 调用方要的是「提交时查一次」而不是「每敲一个字查一次」;② **清空是一个独立事件**(由非空变空时补
|
|
49
|
+
* 发 `onClear`)—— 上游控件长期的坑是「清空只改值、不发触发」,每处调用都自己写 watch 兜底。本件把这两条收
|
|
50
|
+
* 进一处:`onChange` 管值、`onSearch` / `onClear` 管动作。
|
|
54
51
|
*
|
|
55
52
|
* ## 复用而不是重画
|
|
56
53
|
*
|
|
57
|
-
* 输入框那一段**就是本包的 `Input
|
|
58
|
-
*
|
|
59
|
-
*
|
|
54
|
+
* 输入框那一段**就是本包的 `Input`**(框 / 内距 / 清除位 / 聚焦态 / 禁用态 / `aria-invalid` 全部沿用输入框
|
|
55
|
+
* 面),本件只加「一行里怎么摆」与(可选的)搜索按钮 —— 不另写一份输入框几何(两份几何必然在改令牌时漂开)。
|
|
56
|
+
* **受控口径与全库同款**:传 `modelValue` 即受控(`update:modelValue` 与 `onChange` 双走),不传即非受控
|
|
57
|
+
* (由 `defaultValue` 起)。
|
|
60
58
|
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
* 传 `modelValue` 即受控(`update:modelValue` 与 `onChange` 双走),不传即非受控(由 `defaultValue` 起)。
|
|
64
|
-
*
|
|
65
|
-
* @example 最简(框内放大镜 + 回车触发)
|
|
66
|
-
* <Search modelValue={kw} onChange={setKw} onSearch={apply} />
|
|
67
|
-
*
|
|
68
|
-
* @example 带文案的搜索按钮 + 清空动作
|
|
69
|
-
* <Search
|
|
70
|
-
* modelValue={kw}
|
|
71
|
-
* placeholder="搜索技能名称"
|
|
72
|
-
* search-text="搜索"
|
|
73
|
-
* onChange={setKw}
|
|
74
|
-
* onSearch={apply}
|
|
75
|
-
* onClear={() => apply('')}
|
|
76
|
-
* />
|
|
77
|
-
*
|
|
78
|
-
* @example 纯图标按钮(框内不再画装饰放大镜;`searchText` 退化为无障碍名)
|
|
79
|
-
* <Search modelValue={kw} action="icon" search-text="搜索" onChange={setKw} onSearch={apply} />
|
|
59
|
+
* 用法见 `docs/demos/search/`(每个维度一份可运行样例;文档页 `docs/components/search.md`)。
|
|
80
60
|
*/
|
|
81
61
|
export declare const Search: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
82
62
|
modelValue: {
|