niuma-ui 1.3.0 → 1.3.2
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/CHANGELOG.md +25 -0
- package/dist/components/RsButton.css +119 -61
- package/dist/components/RsButton.d.ts +3 -3
- package/dist/components/RsButton.impl.js +4 -12
- package/dist/components/RsButton.js +1 -1
- package/dist/components/RsDialog.css +1 -0
- package/dist/components/RsDialog.d.ts +5 -0
- package/dist/components/RsDialog.impl.js +4 -0
- package/dist/components/RsDrawer.css +1 -0
- package/dist/components/RsFieldset.css +92 -0
- package/dist/components/RsFieldset.d.ts +61 -0
- package/dist/components/RsFieldset.impl.js +78 -0
- package/dist/components/RsFieldset.js +8 -0
- package/dist/components/RsFormItem.css +19 -19
- package/dist/components/RsFormItem.d.ts +6 -4
- package/dist/components/RsFormItem.impl.js +12 -2
- package/dist/components/RsFormItem.js +1 -1
- package/dist/components/RsInput.css +78 -69
- package/dist/components/RsInput.js +1 -1
- package/dist/components/RsLog.css +198 -0
- package/dist/components/RsLog.d.ts +126 -0
- package/dist/components/RsLog.impl.js +619 -0
- package/dist/components/RsLog.js +8 -0
- package/dist/components/RsTable.impl.js +2 -1
- package/dist/components/RsTextarea.css +126 -0
- package/dist/components/RsTextarea.d.ts +114 -0
- package/dist/components/RsTextarea.impl.js +385 -0
- package/dist/components/RsTextarea.js +8 -0
- package/dist/components/RsTooltip.css +4 -3
- package/dist/components/RsTooltip.d.ts +2 -0
- package/dist/components/RsTooltip.impl.js +5 -2
- package/dist/components/RsVirtualList.css +6 -6
- package/dist/components/RsVirtualList.d.ts +1 -1
- package/dist/components/RsVirtualList.impl.js +9 -4
- package/dist/components/RsVirtualList.js +1 -1
- package/dist/components/button-utils.d.ts +19 -10
- package/dist/components/button-utils.js +22 -7
- package/dist/components/dialog-window.d.ts +2 -0
- package/dist/components/dialog-window.js +2 -1
- package/dist/components/fieldset-utils.d.ts +29 -0
- package/dist/components/fieldset-utils.js +12 -0
- package/dist/components/log-utils.d.ts +105 -0
- package/dist/components/log-utils.js +354 -0
- package/dist/components/table/rs-table-props.d.ts +8 -0
- package/dist/components/table/rs-table-props.js +1 -0
- package/dist/components/table/rs-table.css +7 -0
- package/dist/index.d.ts +10 -2
- package/dist/index.js +24 -0
- package/dist/lib/rs-dayjs.js +1 -1
- package/dist/locale/messages.js +42 -0
- package/dist/styles.css +37 -0
- package/dist/vite-plugins/niuma-ui-host.d.ts +8 -0
- package/dist/vite-plugins/niuma-ui-host.js +47 -9
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,31 @@
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [1.3.2] - 2026-09-09
|
|
10
|
+
|
|
11
|
+
### 修复
|
|
12
|
+
|
|
13
|
+
- `rs-dayjs`:插件改从 `dayjs/esm` 引入。宿主 `optimizeDeps.exclude` `@niuma/ui` 时,Vite 不再把 CJS UMD 插件当成缺少 `default` 的 ESM。
|
|
14
|
+
|
|
15
|
+
## [1.3.1] - 2026-09-09
|
|
16
|
+
|
|
17
|
+
### 修复
|
|
18
|
+
|
|
19
|
+
- `RsLog` 工具栏复制改为复制全文(有选区仍只复制选区),不再只拷当前行或搜索匹配行。
|
|
20
|
+
- `RsInput`:`type="search"` 且 `clearable` 时隐藏浏览器自带取消钮,避免和组件清除 x 叠成两个(`RsLog` 过滤框同此)。
|
|
21
|
+
- `inferLogLevel`:只认方括号级别、行首级别词,以及 `BUILD SUCCESS` / `BUILD FAILURE` / `Exception in thread` / `panic:`。不再用正文里的「失败 / 成功 / error」上色;摘要句写 `RsLogLine.level`。
|
|
22
|
+
|
|
23
|
+
### 新增
|
|
24
|
+
|
|
25
|
+
- `RsFieldset`:表单分区。原生 `fieldset` / `legend`(WHATWG / WCAG 组名)。说明走标题旁 `tooltip`(locale `fieldset.help`);`borderStyle` / `borderTone`(含 faded 虚化);`titleWeight` / `titleTone` / `titleSize` 调标题清晰度。`description` 仍映射到 tip。Playground `/fieldset`。
|
|
26
|
+
- `RsButton`:`tone` 与 `variant` 正交(对齐 Ant `color` / Element `type`)。`variant="default" tone="warning"` 为描边 + 浅底语义色;`variant="primary" tone="success"` 为实心语义色。`variant="danger"` 仍保留。
|
|
27
|
+
- `RsTable`:`cellFocus`(`fill` / `outline` / `none`)。只读表可关掉焦点格内部底色,避免自定义插槽再套一块高亮;键盘漫游不受影响。
|
|
28
|
+
- `RsTextarea`:多行输入,边框 / 焦点 / 校验与 `RsInput` 同一套 token,可放在 `RsFormItem` 里。对齐 Ant `Input.TextArea` / Element textarea:`autosize`、`showCount`(无 `maxlength` 也可)、`clearable`、`pressEnter`、`focus()` / `blur()`。Playground `/textarea` 作为官方用法与参数说明。
|
|
29
|
+
- `RsFormItem`:`tooltip` 在标签同行显示帮助图标(对齐 Ant Design Form.Item),不再把说明单独占一行。
|
|
30
|
+
- `RsDialog`:window 布局支持 `height`(与 `width` 相同单位,`%` 相对视口扣除 inset),打开时作为初始高度。
|
|
31
|
+
- `RsLog`:只读日志查看器。按行虚拟滚动;级别对齐 RFC 5424 / OpenTelemetry(另保留 UI `success`);默认带搜索与复制(选区 > 当前行 > 可见/匹配行,Ctrl/⌘+F / Ctrl/⌘+C);过滤 / 行插槽;键盘漫游;级别不只靠颜色(色条 + 读屏名称);`live` 默认 `off` 以免虚拟回收刷读屏。折行默认关闭虚拟(无变高虚拟)。作业与发版日志用这个,PTY 仍走 `RsTerminal`。Playground `/log`。
|
|
32
|
+
- `RsLog` / `inferLogLevel`:`inferMarkers` 供调用方传入成功 / 失败等标识(字符串按拉丁词边界,中日韩按子串;或 RegExp)。内置仍只扫 `[ERROR]`、行首级别词、工具链行首;多条标识同时命中取更严重档。行上已有 `level` 时不扫描。
|
|
33
|
+
|
|
9
34
|
## [1.3.0] - 2026-09-07
|
|
10
35
|
|
|
11
36
|
### 新增
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.rs-btn[data-v-
|
|
2
|
+
.rs-btn[data-v-0e2890e6] {
|
|
3
3
|
position: relative;
|
|
4
4
|
display: inline-flex;
|
|
5
5
|
align-items: center;
|
|
@@ -23,119 +23,124 @@
|
|
|
23
23
|
padding var(--rs-transition-normal),
|
|
24
24
|
gap var(--rs-transition-normal);
|
|
25
25
|
}
|
|
26
|
-
.rs-btn--ssm[data-v-
|
|
26
|
+
.rs-btn--ssm[data-v-0e2890e6] {
|
|
27
27
|
min-height: var(--rs-control-height-ssm);
|
|
28
28
|
padding: 0 var(--rs-space-xs);
|
|
29
29
|
font-size: var(--rs-font-size-xs);
|
|
30
30
|
gap: var(--rs-space-xs);
|
|
31
31
|
}
|
|
32
|
-
.rs-btn--sm[data-v-
|
|
32
|
+
.rs-btn--sm[data-v-0e2890e6] {
|
|
33
33
|
min-height: var(--rs-control-height-sm);
|
|
34
34
|
padding: 0 var(--rs-space-sm);
|
|
35
35
|
font-size: var(--rs-font-size-xs);
|
|
36
36
|
gap: var(--rs-space-xs);
|
|
37
37
|
}
|
|
38
|
-
.rs-btn--lg[data-v-
|
|
38
|
+
.rs-btn--lg[data-v-0e2890e6] {
|
|
39
39
|
min-height: var(--rs-control-height-lg);
|
|
40
40
|
padding: 0 var(--rs-space-xl);
|
|
41
41
|
font-size: var(--rs-font-size-base);
|
|
42
42
|
}
|
|
43
|
-
.rs-btn[data-v-
|
|
43
|
+
.rs-btn[data-v-0e2890e6]:disabled {
|
|
44
44
|
opacity: 0.38;
|
|
45
45
|
cursor: not-allowed;
|
|
46
46
|
}
|
|
47
|
-
.rs-btn--loading[data-v-
|
|
47
|
+
.rs-btn--loading[data-v-0e2890e6] {
|
|
48
48
|
pointer-events: none;
|
|
49
49
|
cursor: wait;
|
|
50
50
|
transition: none;
|
|
51
51
|
}
|
|
52
52
|
/* loading 时不使用 disabled,避免部分浏览器暂停子元素 CSS 动画 */
|
|
53
|
-
.rs-btn--loading[data-v-
|
|
53
|
+
.rs-btn--loading[data-v-0e2890e6]:disabled {
|
|
54
54
|
opacity: 1;
|
|
55
55
|
cursor: wait;
|
|
56
56
|
}
|
|
57
|
-
.rs-btn--loading.rs-btn--default[data-v-
|
|
57
|
+
.rs-btn--loading.rs-btn--default[data-v-0e2890e6] {
|
|
58
58
|
color: var(--rs-text);
|
|
59
59
|
border-color: var(--rs-border);
|
|
60
60
|
background: var(--rs-surface);
|
|
61
61
|
}
|
|
62
|
-
.rs-btn--loading.rs-btn--
|
|
63
|
-
|
|
62
|
+
.rs-btn--loading.rs-btn--default[data-v-0e2890e6]:not(.rs-btn--tone-neutral) {
|
|
63
|
+
color: var(--rs-btn-tone-on-container);
|
|
64
|
+
border-color: color-mix(in srgb, var(--rs-btn-tone) 42%, var(--rs-border));
|
|
65
|
+
background: var(--rs-btn-tone-container);
|
|
66
|
+
}
|
|
67
|
+
.rs-btn--loading.rs-btn--ghost[data-v-0e2890e6],
|
|
68
|
+
.rs-btn--loading.rs-btn--text[data-v-0e2890e6] {
|
|
64
69
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
65
70
|
background: var(--rs-surface-hover);
|
|
66
71
|
}
|
|
67
|
-
.rs-btn[data-v-
|
|
72
|
+
.rs-btn[data-v-0e2890e6]:focus-visible {
|
|
68
73
|
outline: none;
|
|
69
74
|
box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
|
|
70
75
|
}
|
|
71
|
-
.rs-btn--icon-only[data-v-
|
|
76
|
+
.rs-btn--icon-only[data-v-0e2890e6] {
|
|
72
77
|
padding: 0;
|
|
73
78
|
min-width: var(--rs-control-height-md);
|
|
74
79
|
}
|
|
75
|
-
.rs-btn--icon-only.rs-btn--ssm[data-v-
|
|
80
|
+
.rs-btn--icon-only.rs-btn--ssm[data-v-0e2890e6] {
|
|
76
81
|
min-width: var(--rs-control-height-ssm);
|
|
77
82
|
}
|
|
78
|
-
.rs-btn--icon-only.rs-btn--sm[data-v-
|
|
83
|
+
.rs-btn--icon-only.rs-btn--sm[data-v-0e2890e6] {
|
|
79
84
|
min-width: var(--rs-control-height-sm);
|
|
80
85
|
}
|
|
81
|
-
.rs-btn--icon-only.rs-btn--lg[data-v-
|
|
86
|
+
.rs-btn--icon-only.rs-btn--lg[data-v-0e2890e6] {
|
|
82
87
|
min-width: var(--rs-control-height-lg);
|
|
83
88
|
}
|
|
84
|
-
.rs-btn--primary[data-v-
|
|
89
|
+
.rs-btn--primary[data-v-0e2890e6] {
|
|
85
90
|
background: var(--rs-primary);
|
|
86
91
|
color: var(--rs-primary-foreground);
|
|
87
92
|
box-shadow: var(--rs-shadow-sm);
|
|
88
93
|
}
|
|
89
|
-
.rs-btn--primary[data-v-
|
|
94
|
+
.rs-btn--primary[data-v-0e2890e6]:hover:not(:disabled) {
|
|
90
95
|
background: var(--rs-primary-hover);
|
|
91
96
|
box-shadow: var(--rs-shadow);
|
|
92
97
|
}
|
|
93
|
-
.rs-btn--primary[data-v-
|
|
98
|
+
.rs-btn--primary[data-v-0e2890e6]:active:not(:disabled) {
|
|
94
99
|
box-shadow: none;
|
|
95
100
|
}
|
|
96
|
-
.rs-btn--default[data-v-
|
|
101
|
+
.rs-btn--default[data-v-0e2890e6] {
|
|
97
102
|
border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
|
|
98
103
|
background: var(--rs-btn-secondary-bg, var(--rs-surface-hover));
|
|
99
104
|
color: var(--rs-text);
|
|
100
105
|
box-shadow: none;
|
|
101
106
|
}
|
|
102
|
-
.rs-btn--default[data-v-
|
|
107
|
+
.rs-btn--default[data-v-0e2890e6]:hover:not(:disabled) {
|
|
103
108
|
color: var(--rs-primary);
|
|
104
109
|
border-color: var(--rs-primary);
|
|
105
110
|
background: var(--rs-btn-secondary-bg-hover, var(--rs-primary-container));
|
|
106
111
|
}
|
|
107
|
-
.rs-btn--default[data-v-
|
|
112
|
+
.rs-btn--default[data-v-0e2890e6]:active:not(:disabled) {
|
|
108
113
|
color: var(--rs-primary-hover);
|
|
109
114
|
border-color: var(--rs-primary-hover);
|
|
110
115
|
background: var(--rs-btn-secondary-bg-active, var(--rs-primary-container));
|
|
111
116
|
}
|
|
112
|
-
.rs-btn--ghost[data-v-
|
|
117
|
+
.rs-btn--ghost[data-v-0e2890e6] {
|
|
113
118
|
background: transparent;
|
|
114
119
|
border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
|
|
115
120
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
116
121
|
}
|
|
117
|
-
.rs-btn--ghost[data-v-
|
|
122
|
+
.rs-btn--ghost[data-v-0e2890e6]:hover:not(:disabled) {
|
|
118
123
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 8%, transparent);
|
|
119
124
|
border-color: var(--rs-btn-outline-border, var(--rs-border));
|
|
120
125
|
color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
|
|
121
126
|
}
|
|
122
|
-
.rs-btn--borderless[data-v-
|
|
123
|
-
.rs-btn--borderless[data-v-
|
|
124
|
-
.rs-btn--borderless[data-v-
|
|
127
|
+
.rs-btn--borderless[data-v-0e2890e6],
|
|
128
|
+
.rs-btn--borderless[data-v-0e2890e6]:hover:not(:disabled),
|
|
129
|
+
.rs-btn--borderless[data-v-0e2890e6]:active:not(:disabled) {
|
|
125
130
|
border-color: transparent;
|
|
126
131
|
}
|
|
127
|
-
.rs-btn--danger[data-v-
|
|
132
|
+
.rs-btn--danger[data-v-0e2890e6] {
|
|
128
133
|
background: var(--rs-danger-container);
|
|
129
134
|
border-color: color-mix(in srgb, var(--rs-danger) 30%, transparent);
|
|
130
135
|
color: var(--rs-on-danger-container);
|
|
131
136
|
}
|
|
132
|
-
.rs-btn--danger[data-v-
|
|
137
|
+
.rs-btn--danger[data-v-0e2890e6]:hover:not(:disabled) {
|
|
133
138
|
border-color: var(--rs-danger);
|
|
134
139
|
background: color-mix(in srgb, var(--rs-danger) 20%, var(--rs-danger-container));
|
|
135
140
|
}
|
|
136
141
|
|
|
137
142
|
/* 行内链接:可下划线;色调由 tone 控制(默认 primary) */
|
|
138
|
-
.rs-btn--link[data-v-
|
|
143
|
+
.rs-btn--link[data-v-0e2890e6] {
|
|
139
144
|
min-height: auto;
|
|
140
145
|
padding: 0;
|
|
141
146
|
border-color: transparent;
|
|
@@ -145,7 +150,7 @@
|
|
|
145
150
|
box-shadow: none;
|
|
146
151
|
font-weight: var(--rs-font-weight-medium);
|
|
147
152
|
}
|
|
148
|
-
.rs-btn--link[data-v-
|
|
153
|
+
.rs-btn--link[data-v-0e2890e6]:hover:not(:disabled) {
|
|
149
154
|
color: var(--rs-btn-tone-hover, var(--rs-primary-hover));
|
|
150
155
|
text-decoration: underline;
|
|
151
156
|
}
|
|
@@ -154,7 +159,7 @@
|
|
|
154
159
|
* text:工具栏 / 表格操作 quaternary
|
|
155
160
|
* 无底无边,靠 tone 着色;hover 使用同色浅底
|
|
156
161
|
*/
|
|
157
|
-
.rs-btn--text[data-v-
|
|
162
|
+
.rs-btn--text[data-v-0e2890e6] {
|
|
158
163
|
min-height: var(--rs-control-height-sm);
|
|
159
164
|
padding: 0 var(--rs-space-sm);
|
|
160
165
|
border-color: transparent;
|
|
@@ -163,50 +168,103 @@
|
|
|
163
168
|
font-weight: var(--rs-font-weight-regular);
|
|
164
169
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
165
170
|
}
|
|
166
|
-
.rs-btn--text.rs-btn--ssm[data-v-
|
|
171
|
+
.rs-btn--text.rs-btn--ssm[data-v-0e2890e6] {
|
|
167
172
|
min-height: var(--rs-control-height-ssm);
|
|
168
173
|
}
|
|
169
|
-
.rs-btn--text.rs-btn--md[data-v-
|
|
174
|
+
.rs-btn--text.rs-btn--md[data-v-0e2890e6] {
|
|
170
175
|
min-height: var(--rs-control-height-md);
|
|
171
176
|
}
|
|
172
|
-
.rs-btn--text.rs-btn--lg[data-v-
|
|
177
|
+
.rs-btn--text.rs-btn--lg[data-v-0e2890e6] {
|
|
173
178
|
min-height: var(--rs-control-height-lg);
|
|
174
179
|
}
|
|
175
|
-
.rs-btn--text[data-v-
|
|
180
|
+
.rs-btn--text[data-v-0e2890e6]:hover:not(:disabled) {
|
|
176
181
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 8%, transparent);
|
|
177
182
|
border-color: transparent;
|
|
178
183
|
color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
|
|
179
184
|
}
|
|
180
|
-
.rs-btn--text[data-v-
|
|
185
|
+
.rs-btn--text[data-v-0e2890e6]:active:not(:disabled) {
|
|
181
186
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 12%, transparent);
|
|
182
187
|
}
|
|
183
188
|
|
|
184
|
-
/* tone
|
|
185
|
-
.rs-btn--tone-neutral[data-v-
|
|
189
|
+
/* tone:色相 token,供所有变体消费(形态 × 色相) */
|
|
190
|
+
.rs-btn--tone-neutral[data-v-0e2890e6] {
|
|
186
191
|
--rs-btn-tone: var(--rs-text);
|
|
187
192
|
--rs-btn-tone-hover: var(--rs-text);
|
|
193
|
+
--rs-btn-tone-fg: var(--rs-text);
|
|
194
|
+
--rs-btn-tone-container: var(--rs-btn-secondary-bg, var(--rs-surface-hover));
|
|
195
|
+
--rs-btn-tone-on-container: var(--rs-text);
|
|
188
196
|
}
|
|
189
|
-
.rs-btn--tone-primary[data-v-
|
|
197
|
+
.rs-btn--tone-primary[data-v-0e2890e6] {
|
|
190
198
|
--rs-btn-tone: var(--rs-primary);
|
|
191
199
|
--rs-btn-tone-hover: var(--rs-primary-hover);
|
|
200
|
+
--rs-btn-tone-fg: var(--rs-primary-foreground);
|
|
201
|
+
--rs-btn-tone-container: var(--rs-primary-container);
|
|
202
|
+
--rs-btn-tone-on-container: var(--rs-on-primary-container);
|
|
192
203
|
}
|
|
193
|
-
.rs-btn--tone-danger[data-v-
|
|
204
|
+
.rs-btn--tone-danger[data-v-0e2890e6] {
|
|
194
205
|
--rs-btn-tone: var(--rs-danger);
|
|
195
206
|
--rs-btn-tone-hover: var(--rs-danger);
|
|
207
|
+
--rs-btn-tone-fg: #fff;
|
|
208
|
+
--rs-btn-tone-container: var(--rs-danger-container);
|
|
209
|
+
--rs-btn-tone-on-container: var(--rs-on-danger-container);
|
|
196
210
|
}
|
|
197
|
-
.rs-btn--tone-success[data-v-
|
|
211
|
+
.rs-btn--tone-success[data-v-0e2890e6] {
|
|
198
212
|
--rs-btn-tone: var(--rs-success, #18a058);
|
|
199
213
|
--rs-btn-tone-hover: var(--rs-success, #18a058);
|
|
214
|
+
--rs-btn-tone-fg: #fff;
|
|
215
|
+
--rs-btn-tone-container: var(--rs-success-container, color-mix(in srgb, var(--rs-success, #18a058) 14%, var(--rs-surface)));
|
|
216
|
+
--rs-btn-tone-on-container: var(--rs-on-success-container, var(--rs-success, #18a058));
|
|
200
217
|
}
|
|
201
|
-
.rs-btn--tone-warning[data-v-
|
|
218
|
+
.rs-btn--tone-warning[data-v-0e2890e6] {
|
|
202
219
|
--rs-btn-tone: var(--rs-warning, #f0a020);
|
|
203
220
|
--rs-btn-tone-hover: var(--rs-warning, #f0a020);
|
|
221
|
+
--rs-btn-tone-fg: #fff;
|
|
222
|
+
--rs-btn-tone-container: var(--rs-warning-container, color-mix(in srgb, var(--rs-warning, #f0a020) 14%, var(--rs-surface)));
|
|
223
|
+
--rs-btn-tone-on-container: var(--rs-on-warning-container, var(--rs-warning, #f0a020));
|
|
204
224
|
}
|
|
205
|
-
.rs-btn--tone-info[data-v-
|
|
225
|
+
.rs-btn--tone-info[data-v-0e2890e6] {
|
|
206
226
|
--rs-btn-tone: var(--rs-info, #2080f0);
|
|
207
227
|
--rs-btn-tone-hover: var(--rs-info, #2080f0);
|
|
228
|
+
--rs-btn-tone-fg: #fff;
|
|
229
|
+
--rs-btn-tone-container: var(--rs-info-container, color-mix(in srgb, var(--rs-info, #2080f0) 14%, var(--rs-surface)));
|
|
230
|
+
--rs-btn-tone-on-container: var(--rs-on-info-container, var(--rs-info, #2080f0));
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* default + 语义色:轮廓 + 浅底(Ant outlined / Element plain) */
|
|
234
|
+
.rs-btn--default[data-v-0e2890e6]:not(.rs-btn--tone-neutral) {
|
|
235
|
+
color: var(--rs-btn-tone-on-container);
|
|
236
|
+
border-color: color-mix(in srgb, var(--rs-btn-tone) 42%, var(--rs-border));
|
|
237
|
+
background: var(--rs-btn-tone-container);
|
|
238
|
+
}
|
|
239
|
+
.rs-btn--default[data-v-0e2890e6]:not(.rs-btn--tone-neutral):hover:not(:disabled) {
|
|
240
|
+
color: var(--rs-btn-tone);
|
|
241
|
+
border-color: var(--rs-btn-tone);
|
|
242
|
+
background: color-mix(in srgb, var(--rs-btn-tone) 14%, var(--rs-btn-tone-container));
|
|
243
|
+
}
|
|
244
|
+
.rs-btn--default[data-v-0e2890e6]:not(.rs-btn--tone-neutral):active:not(:disabled) {
|
|
245
|
+
color: var(--rs-btn-tone-hover);
|
|
246
|
+
border-color: var(--rs-btn-tone-hover);
|
|
247
|
+
background: color-mix(in srgb, var(--rs-btn-tone) 20%, var(--rs-btn-tone-container));
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* primary + 非主色:实心语义色 */
|
|
251
|
+
.rs-btn--primary[data-v-0e2890e6]:not(.rs-btn--tone-primary) {
|
|
252
|
+
background: var(--rs-btn-tone);
|
|
253
|
+
color: var(--rs-btn-tone-fg);
|
|
254
|
+
border-color: transparent;
|
|
255
|
+
}
|
|
256
|
+
.rs-btn--primary[data-v-0e2890e6]:not(.rs-btn--tone-primary):hover:not(:disabled) {
|
|
257
|
+
background: var(--rs-btn-tone-hover);
|
|
208
258
|
}
|
|
209
|
-
|
|
259
|
+
|
|
260
|
+
/* ghost + 语义色:描边跟色相 */
|
|
261
|
+
.rs-btn--ghost[data-v-0e2890e6]:not(.rs-btn--tone-neutral) {
|
|
262
|
+
border-color: color-mix(in srgb, var(--rs-btn-tone) 45%, var(--rs-border));
|
|
263
|
+
}
|
|
264
|
+
.rs-btn--ghost[data-v-0e2890e6]:not(.rs-btn--tone-neutral):hover:not(:disabled) {
|
|
265
|
+
border-color: var(--rs-btn-tone);
|
|
266
|
+
}
|
|
267
|
+
.rs-btn__spinner[data-v-0e2890e6] {
|
|
210
268
|
display: inline-flex;
|
|
211
269
|
align-items: center;
|
|
212
270
|
justify-content: center;
|
|
@@ -215,7 +273,7 @@
|
|
|
215
273
|
flex-shrink: 0;
|
|
216
274
|
pointer-events: none;
|
|
217
275
|
}
|
|
218
|
-
.rs-btn__spinner-ring[data-v-
|
|
276
|
+
.rs-btn__spinner-ring[data-v-0e2890e6] {
|
|
219
277
|
display: block;
|
|
220
278
|
width: 100%;
|
|
221
279
|
height: 100%;
|
|
@@ -223,27 +281,27 @@
|
|
|
223
281
|
border-top-color: var(--rs-primary);
|
|
224
282
|
border-radius: var(--rs-radius-full);
|
|
225
283
|
transform-origin: center center;
|
|
226
|
-
animation: rs-spin-
|
|
284
|
+
animation: rs-spin-0e2890e6 0.75s linear infinite;
|
|
227
285
|
}
|
|
228
|
-
.rs-btn--default .rs-btn__spinner-ring[data-v-
|
|
229
|
-
.rs-btn--ghost .rs-btn__spinner-ring[data-v-
|
|
230
|
-
border-color: color-mix(in srgb, var(--rs-primary) 28%, transparent);
|
|
231
|
-
border-top-color: var(--rs-primary);
|
|
286
|
+
.rs-btn--default .rs-btn__spinner-ring[data-v-0e2890e6],
|
|
287
|
+
.rs-btn--ghost .rs-btn__spinner-ring[data-v-0e2890e6] {
|
|
288
|
+
border-color: color-mix(in srgb, var(--rs-btn-tone, var(--rs-primary)) 28%, transparent);
|
|
289
|
+
border-top-color: var(--rs-btn-tone, var(--rs-primary));
|
|
232
290
|
}
|
|
233
|
-
.rs-btn--text .rs-btn__spinner-ring[data-v-
|
|
234
|
-
.rs-btn--link .rs-btn__spinner-ring[data-v-
|
|
291
|
+
.rs-btn--text .rs-btn__spinner-ring[data-v-0e2890e6],
|
|
292
|
+
.rs-btn--link .rs-btn__spinner-ring[data-v-0e2890e6] {
|
|
235
293
|
border-color: color-mix(in srgb, var(--rs-btn-tone, var(--rs-primary)) 28%, transparent);
|
|
236
294
|
border-top-color: var(--rs-btn-tone, var(--rs-primary));
|
|
237
295
|
}
|
|
238
|
-
.rs-btn--primary .rs-btn__spinner-ring[data-v-
|
|
296
|
+
.rs-btn--primary .rs-btn__spinner-ring[data-v-0e2890e6] {
|
|
239
297
|
border-color: color-mix(in srgb, currentcolor 35%, transparent);
|
|
240
298
|
border-top-color: currentcolor;
|
|
241
299
|
}
|
|
242
|
-
.rs-btn--danger .rs-btn__spinner-ring[data-v-
|
|
300
|
+
.rs-btn--danger .rs-btn__spinner-ring[data-v-0e2890e6] {
|
|
243
301
|
border-color: color-mix(in srgb, var(--rs-danger) 28%, transparent);
|
|
244
302
|
border-top-color: var(--rs-danger);
|
|
245
303
|
}
|
|
246
|
-
.rs-btn__icon[data-v-
|
|
304
|
+
.rs-btn__icon[data-v-0e2890e6] {
|
|
247
305
|
display: inline-flex;
|
|
248
306
|
flex-shrink: 0;
|
|
249
307
|
align-items: center;
|
|
@@ -252,7 +310,7 @@
|
|
|
252
310
|
color: inherit;
|
|
253
311
|
}
|
|
254
312
|
/* 插槽内自定义图标+文案时也能水平对齐 */
|
|
255
|
-
.rs-btn__label[data-v-
|
|
313
|
+
.rs-btn__label[data-v-0e2890e6] {
|
|
256
314
|
display: inline-flex;
|
|
257
315
|
align-items: center;
|
|
258
316
|
gap: inherit;
|
|
@@ -260,7 +318,7 @@
|
|
|
260
318
|
line-height: 1;
|
|
261
319
|
white-space: nowrap;
|
|
262
320
|
}
|
|
263
|
-
.rs-btn__label--reveal[data-v-
|
|
321
|
+
.rs-btn__label--reveal[data-v-0e2890e6] {
|
|
264
322
|
display: inline-block;
|
|
265
323
|
max-width: 0;
|
|
266
324
|
opacity: 0;
|
|
@@ -271,12 +329,12 @@
|
|
|
271
329
|
max-width 0.2s ease,
|
|
272
330
|
opacity 0.15s ease;
|
|
273
331
|
}
|
|
274
|
-
.rs-btn--reveal-label:hover:not(:disabled) .rs-btn__label--reveal[data-v-
|
|
275
|
-
.rs-btn--reveal-label:focus-visible .rs-btn__label--reveal[data-v-
|
|
332
|
+
.rs-btn--reveal-label:hover:not(:disabled) .rs-btn__label--reveal[data-v-0e2890e6],
|
|
333
|
+
.rs-btn--reveal-label:focus-visible .rs-btn__label--reveal[data-v-0e2890e6] {
|
|
276
334
|
max-width: 12rem;
|
|
277
335
|
opacity: 1;
|
|
278
336
|
}
|
|
279
|
-
.rs-btn__tooltip[data-v-
|
|
337
|
+
.rs-btn__tooltip[data-v-0e2890e6] {
|
|
280
338
|
position: fixed;
|
|
281
339
|
z-index: calc(var(--rs-z-modal) + 2);
|
|
282
340
|
padding: 0.25rem 0.5rem;
|
|
@@ -291,7 +349,7 @@
|
|
|
291
349
|
box-shadow: var(--rs-shadow-sm);
|
|
292
350
|
pointer-events: none;
|
|
293
351
|
}
|
|
294
|
-
@keyframes rs-spin-
|
|
352
|
+
@keyframes rs-spin-0e2890e6 {
|
|
295
353
|
to {
|
|
296
354
|
transform: rotate(360deg);
|
|
297
355
|
}
|
|
@@ -4,9 +4,9 @@ export type { RsButtonTone, RsButtonVariant } from './button-utils';
|
|
|
4
4
|
type __VLS_Props = {
|
|
5
5
|
variant?: RsButtonVariant;
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
* 例:variant="
|
|
9
|
-
*
|
|
7
|
+
* 语义色,与 variant 正交(Ant color / Element type)。
|
|
8
|
+
* 例:variant="default" tone="warning" → 描边 + 浅底警告色。
|
|
9
|
+
* 未传时:primary/link 为 primary,danger 变体为 danger,其余 neutral。
|
|
10
10
|
*/
|
|
11
11
|
tone?: RsButtonTone;
|
|
12
12
|
size?: RsComponentSize;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import RsIcon_default from "./RsIcon.js";
|
|
2
2
|
import { RS_COMPONENT_SIZE_ICON_PX } from "../theme/types.js";
|
|
3
|
-
import {
|
|
3
|
+
import { resolveRsButtonTone, resolveRsButtonVariant } from "./button-utils.js";
|
|
4
4
|
import { useResolvedRsComponentSize } from "./resolve-size.js";
|
|
5
5
|
import { rsRadiusCss, useResolvedRsRadius } from "./resolve-radius.js";
|
|
6
6
|
import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useSlots, watch } from "vue";
|
|
@@ -59,22 +59,14 @@ var RsButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
59
59
|
const resolvedIconSize = computed(() => props.iconSize ?? RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
|
|
60
60
|
const rootStyle = computed(() => ({ "--rs-btn-radius": rsRadiusCss(resolvedRadius.value) }));
|
|
61
61
|
const hasLabel = computed(() => Boolean(slots.default));
|
|
62
|
-
const resolvedVariant = computed(() => props.variant
|
|
62
|
+
const resolvedVariant = computed(() => resolveRsButtonVariant(props.variant ?? "primary"));
|
|
63
63
|
/** text 默认无边框;其它变体默认有边框(可由 bordered 覆盖) */
|
|
64
64
|
const resolvedBordered = computed(() => {
|
|
65
65
|
if (props.bordered !== void 0) return props.bordered;
|
|
66
66
|
return resolvedVariant.value !== "text" && resolvedVariant.value !== "link";
|
|
67
67
|
});
|
|
68
|
-
/**
|
|
69
|
-
|
|
70
|
-
* link 未显式传 tone 时视为 primary,保持历史链接主色。
|
|
71
|
-
*/
|
|
72
|
-
const resolvedTone = computed(() => {
|
|
73
|
-
if (!supportsRsButtonTone(resolvedVariant.value)) return null;
|
|
74
|
-
if (props.tone) return props.tone;
|
|
75
|
-
if (resolvedVariant.value === "link") return "primary";
|
|
76
|
-
return "neutral";
|
|
77
|
-
});
|
|
68
|
+
/** 形态 × 色相:所有变体都带 tone class,由 CSS 决定如何上色。 */
|
|
69
|
+
const resolvedTone = computed(() => resolveRsButtonTone(props.variant ?? "primary", props.tone));
|
|
78
70
|
const rootClass = computed(() => ({
|
|
79
71
|
[`rs-btn--${resolvedVariant.value}`]: true,
|
|
80
72
|
[`rs-btn--${resolvedSize.value}`]: true,
|
|
@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
|
|
|
3
3
|
import RsButton_vue_vue_type_script_setup_true_lang_default from "./RsButton.impl.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/RsButton.vue
|
|
6
|
-
var RsButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
6
|
+
var RsButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0e2890e6"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { RsButton_default as default };
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
border-radius: var(--rs-radius-lg);
|
|
35
35
|
border: 1px solid var(--rs-dialog-border);
|
|
36
36
|
background: var(--rs-dialog-bg);
|
|
37
|
+
--rs-fieldset-legend-bg: var(--rs-dialog-bg);
|
|
37
38
|
box-shadow: var(--rs-dialog-shadow);
|
|
38
39
|
outline: none;
|
|
39
40
|
color: var(--rs-dialog-title-fg);
|
|
@@ -10,6 +10,11 @@ type __VLS_Props = {
|
|
|
10
10
|
* form / confirm:自定义宽度按 CSS 写入。
|
|
11
11
|
*/
|
|
12
12
|
width?: RsDialogWidth;
|
|
13
|
+
/**
|
|
14
|
+
* 高度:与 width 相同单位。仅 window 在打开时折成像素作为初始高度
|
|
15
|
+
*(`%` 相对视口扣除 inset);form / confirm 忽略。
|
|
16
|
+
*/
|
|
17
|
+
height?: RsDialogWidth;
|
|
13
18
|
tone?: RsFeedbackTone;
|
|
14
19
|
/**
|
|
15
20
|
* window:可拖拽/缩放工作窗。
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useRsI18n } from "../composables/useRsI18n.js";
|
|
2
2
|
import RsButton_default from "./RsButton.js";
|
|
3
3
|
import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "./reka.js";
|
|
4
|
+
import { dialogViewportSize } from "./dialog-viewport.js";
|
|
4
5
|
import { isRsDialogWidthPreset, resolveDialogOverlayStyle, resolveRsDialogCssWidth, resolveRsDialogWidthPx, runRsDialogBeforeClose } from "./dialog-utils.js";
|
|
5
6
|
import { useRsDialogWindow } from "./dialog-window.js";
|
|
6
7
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, useModel, useSlots, watch, withCtx, withModifiers } from "vue";
|
|
@@ -24,6 +25,7 @@ var RsDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
24
25
|
title: { default: "" },
|
|
25
26
|
description: {},
|
|
26
27
|
width: { default: "md" },
|
|
28
|
+
height: {},
|
|
27
29
|
tone: { default: "default" },
|
|
28
30
|
layout: { default: "window" },
|
|
29
31
|
draggable: {
|
|
@@ -122,6 +124,7 @@ var RsDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
122
124
|
}));
|
|
123
125
|
const widthPreset = computed(() => isRsDialogWidthPreset(props.width) ? props.width : "md");
|
|
124
126
|
const initialWidthPx = computed(() => resolveRsDialogWidthPx(props.width));
|
|
127
|
+
const initialHeightPx = computed(() => props.height == null || props.height === "" ? void 0 : resolveRsDialogWidthPx(props.height, dialogViewportSize().height));
|
|
125
128
|
const customCssWidth = computed(() => resolveRsDialogCssWidth(props.width));
|
|
126
129
|
const bodyReady = ref(false);
|
|
127
130
|
const closing = ref(false);
|
|
@@ -275,6 +278,7 @@ var RsDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
275
278
|
open,
|
|
276
279
|
widthPreset,
|
|
277
280
|
initialWidth: initialWidthPx,
|
|
281
|
+
initialHeight: initialHeightPx,
|
|
278
282
|
draggable: enableDraggable,
|
|
279
283
|
resizable: enableResizable,
|
|
280
284
|
compact: isCompactLayout,
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
box-sizing: border-box;
|
|
27
27
|
border: 1px solid var(--rs-drawer-border, var(--rs-border));
|
|
28
28
|
background: var(--rs-drawer-body-bg, var(--rs-surface-elevated));
|
|
29
|
+
--rs-fieldset-legend-bg: var(--rs-drawer-body-bg, var(--rs-surface-elevated));
|
|
29
30
|
color: var(--rs-text);
|
|
30
31
|
box-shadow: var(--rs-shadow-lg);
|
|
31
32
|
outline: none;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
|
|
2
|
+
.rs-fieldset[data-v-4d65b83d] {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: var(--rs-fieldset-gap, var(--rs-space-md));
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
min-width: 0;
|
|
8
|
+
min-inline-size: 0;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: var(--rs-space-md) var(--rs-space-lg) var(--rs-space-lg);
|
|
11
|
+
border-width: 1px;
|
|
12
|
+
border-style: solid;
|
|
13
|
+
border-color: var(--rs-fieldset-border, var(--rs-border));
|
|
14
|
+
border-radius: var(--rs-fieldset-radius, var(--rs-radius-sm));
|
|
15
|
+
background: transparent;
|
|
16
|
+
}
|
|
17
|
+
.rs-fieldset--sm[data-v-4d65b83d] {
|
|
18
|
+
gap: var(--rs-space-sm);
|
|
19
|
+
padding: var(--rs-space-sm) var(--rs-space-md) var(--rs-space-md);
|
|
20
|
+
}
|
|
21
|
+
.rs-fieldset--dashed[data-v-4d65b83d] {
|
|
22
|
+
border-style: dashed;
|
|
23
|
+
}
|
|
24
|
+
.rs-fieldset--dotted[data-v-4d65b83d] {
|
|
25
|
+
border-style: dotted;
|
|
26
|
+
}
|
|
27
|
+
.rs-fieldset--tone-subtle[data-v-4d65b83d] {
|
|
28
|
+
border-color: var(--rs-fieldset-border, var(--rs-border-subtle));
|
|
29
|
+
}
|
|
30
|
+
.rs-fieldset--tone-faded[data-v-4d65b83d] {
|
|
31
|
+
border-color: color-mix(
|
|
32
|
+
in srgb,
|
|
33
|
+
var(--rs-fieldset-border, var(--rs-border)) 42%,
|
|
34
|
+
transparent
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
.rs-fieldset__legend[data-v-4d65b83d] {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
gap: var(--rs-space-sm);
|
|
41
|
+
float: none;
|
|
42
|
+
padding: 0 var(--rs-space-xs);
|
|
43
|
+
margin: 0;
|
|
44
|
+
font-size: var(--rs-fieldset-title-size, var(--rs-font-size-sm));
|
|
45
|
+
font-weight: var(--rs-fieldset-title-weight, var(--rs-font-weight-semibold));
|
|
46
|
+
line-height: var(--rs-line-height-tight);
|
|
47
|
+
color: var(--rs-text);
|
|
48
|
+
background: var(--rs-fieldset-legend-bg, var(--rs-surface));
|
|
49
|
+
}
|
|
50
|
+
.rs-fieldset__heading[data-v-4d65b83d] {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: var(--rs-space-xs);
|
|
54
|
+
min-width: 0;
|
|
55
|
+
}
|
|
56
|
+
.rs-fieldset__title[data-v-4d65b83d] {
|
|
57
|
+
min-width: 0;
|
|
58
|
+
font-size: inherit;
|
|
59
|
+
font-weight: inherit;
|
|
60
|
+
color: inherit;
|
|
61
|
+
}
|
|
62
|
+
.rs-fieldset--title-strong .rs-fieldset__legend[data-v-4d65b83d] {
|
|
63
|
+
color: var(--rs-text);
|
|
64
|
+
}
|
|
65
|
+
.rs-fieldset--title-default .rs-fieldset__legend[data-v-4d65b83d] {
|
|
66
|
+
color: var(--rs-text);
|
|
67
|
+
}
|
|
68
|
+
.rs-fieldset--title-muted .rs-fieldset__legend[data-v-4d65b83d] {
|
|
69
|
+
color: var(--rs-muted);
|
|
70
|
+
}
|
|
71
|
+
.rs-fieldset__extra[data-v-4d65b83d] {
|
|
72
|
+
display: inline-flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: var(--rs-space-xs);
|
|
75
|
+
font-size: var(--rs-font-size-xs);
|
|
76
|
+
font-weight: var(--rs-font-weight-regular);
|
|
77
|
+
color: var(--rs-muted);
|
|
78
|
+
}
|
|
79
|
+
.rs-fieldset__body[data-v-4d65b83d] {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
gap: inherit;
|
|
84
|
+
}
|
|
85
|
+
.rs-fieldset[data-v-4d65b83d]:disabled,
|
|
86
|
+
.rs-fieldset--disabled[data-v-4d65b83d] {
|
|
87
|
+
border-color: var(--rs-border-subtle);
|
|
88
|
+
}
|
|
89
|
+
.rs-fieldset:disabled .rs-fieldset__legend[data-v-4d65b83d],
|
|
90
|
+
.rs-fieldset--disabled .rs-fieldset__legend[data-v-4d65b83d] {
|
|
91
|
+
color: var(--rs-muted);
|
|
92
|
+
}
|