niuma-ui 2.0.9 → 2.1.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 +28 -0
- package/NOTICE +0 -1
- package/README.md +3 -3
- package/README.zh-CN.md +3 -3
- package/dist/components/auto-complete/src/RsAutoComplete.d.ts +2 -2
- package/dist/components/button/src/RsButton.css +75 -72
- package/dist/components/button/src/RsButton.d.ts +1 -4
- package/dist/components/button/src/RsButton.impl.js +2 -6
- package/dist/components/button/src/RsButton.js +1 -1
- package/dist/components/code-block/src/RsCodeBlock.css +26 -26
- package/dist/components/code-block/src/RsCodeBlock.impl.js +2 -2
- package/dist/components/code-block/src/RsCodeBlock.js +1 -1
- package/dist/components/config-provider/src/RsConfigProvider.css +1 -1
- package/dist/components/config-provider/src/RsConfigProvider.d.ts +2 -2
- package/dist/components/config-provider/src/RsConfigProvider.impl.js +7 -16
- package/dist/components/config-provider/src/RsConfigProvider.js +1 -1
- package/dist/components/context-menu/src/RsContextMenu.css +19 -19
- package/dist/components/date-picker/src/RsDatePicker.d.ts +2 -2
- package/dist/components/date-picker/src/RsDateTimePicker.d.ts +2 -2
- package/dist/components/dialog/src/RsConfirmDialog.css +25 -25
- package/dist/components/dialog/src/RsConfirmDialog.impl.js +4 -4
- package/dist/components/dialog/src/RsConfirmDialog.js +1 -1
- package/dist/components/dialog/src/RsDialog.css +63 -63
- package/dist/components/dialog/src/RsDialog.impl.js +56 -11
- package/dist/components/dialog/src/RsDialog.js +1 -1
- package/dist/components/dialog/src/dialog-window.d.ts +1 -0
- package/dist/components/dialog/src/dialog-window.js +1 -0
- package/dist/components/dynamic-tags/src/RsDynamicTags.d.ts +2 -2
- package/dist/components/icon/src/RsIcon.css +5 -5
- package/dist/components/icon/src/RsIcon.d.ts +1 -1
- package/dist/components/icon/src/RsIcon.impl.js +1 -1
- package/dist/components/icon/src/RsIcon.js +1 -1
- package/dist/components/input/src/RsInput.d.ts +2 -2
- package/dist/components/mentions/src/RsMentions.d.ts +2 -2
- package/dist/components/select/src/RsSelect.d.ts +2 -2
- package/dist/components/table/src/table-body/RsTableCell.impl.js +1 -1
- package/dist/components/table/style/rs-table.css +54 -10
- package/dist/components/tabs/src/RsTabs.d.ts +3 -3
- package/dist/components/tabs/src/RsTabs.impl.js +1 -1
- package/dist/components/textarea/src/RsTextarea.d.ts +2 -2
- package/dist/components/time-picker/src/RsTimePicker.d.ts +2 -2
- package/dist/components/toaster/src/RsToaster.d.ts +1 -1
- package/dist/components/tree/src/RsTree.css +74 -74
- package/dist/components/tree/src/RsTree.js +1 -1
- package/dist/components/tree-select/src/RsTreeSelect.d.ts +2 -2
- package/dist/icons/host.d.ts +11 -0
- package/dist/icons/host.js +30 -0
- package/dist/icons/lucide.js +10 -3
- package/dist/icons/registry.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles.css +34 -24
- package/dist/theme/brand.example.css +1 -1
- package/dist/utils/rs-clipboard.d.ts +1 -1
- package/dist/utils/rs-clipboard.js +17 -7
- package/dist/vite-plugins/niuma-ui-host.d.ts +2 -1
- package/dist/vite-plugins/niuma-ui-host.js +25 -6
- package/package.json +2 -4
- package/dist/components/_shared/src/reka.d.ts +0 -2
- package/dist/components/_shared/src/reka.js +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,34 @@
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [2.1.2] - 2026-09-22
|
|
10
|
+
|
|
11
|
+
### 修复
|
|
12
|
+
|
|
13
|
+
- 对话框里的代码块「复制」没有写入剪贴板。临时输入框原先挂在 `body` 上,打开的 `dialog` 不会把焦点交出去,报文和 Header 点复制没有效果。现在挂在当前对话框内,并在点击当下同步复制。只读代码块改为 `readOnly`,正文仍可选、可复制。
|
|
14
|
+
|
|
15
|
+
## [2.1.1] - 2026-09-22
|
|
16
|
+
|
|
17
|
+
### 修复
|
|
18
|
+
|
|
19
|
+
- `RsDialog` / `RsConfirmDialog`:关闭时不挂 Teleport,打开时再解析 `teleportTo`。1.x 的 Reka 只在打开时传送;2.x 若在组件挂载时就解析,宿主在 `onMounted` 才创建的挂载点会被记成 null,再次打开会在空节点上更新。
|
|
20
|
+
- 开发时宿主插件对纯再导出再跟一层。`isRsBrandIconName` 改写到 `icons/brand.ts`,不再经过 `icons/registry.ts`,具名导入不会把 Lucide 全库一起求值。导出表在进程启动时建立;遇到尚未收录的运行时导出会重读一次,避免长开的 dev server 对新增导出回 500。
|
|
21
|
+
|
|
22
|
+
### 变更
|
|
23
|
+
|
|
24
|
+
- `RsIcon`:业务用 `registerRsIcon(name, component)` 登记自己的 kebab-case 图标。页签、菜单、树、右键的 `icon` 字符串可以引用。内置 Lucide 名和品牌 mark 不能被盖掉。这个登记模块不引入 Lucide。
|
|
25
|
+
- `RsTabs`:`draggable` 仍整项可拖。`showDragHandle` 默认改为 `false`,不再默认画出六点 grip(与 1.x 一致)。要图标时显式传 `showDragHandle`。
|
|
26
|
+
- `RsDialog`:可拖动的窗口对话框改挂到 `body`。业务挂载点常有 `overflow: hidden`,拖出后背景会被裁掉。全屏逻辑不变。KeepAlive 切走页签时卸掉 body 上的浮层,并放开滚动锁、inert 和 document 监听,回到该页再占上。
|
|
27
|
+
|
|
28
|
+
## [2.1.0] - 2026-09-22
|
|
29
|
+
|
|
30
|
+
### 变更
|
|
31
|
+
|
|
32
|
+
- 去掉 `reka-ui`。`RsConfigProvider` 不再包一层 Reka `ConfigProvider`。`theme` / `locale` / `dir` / `controlSize` / `controlRadius` / `themeScope` 语义不变;语言和书写方向仍由 `applyLocale` 写到 `document` 或 Provider 根节点。
|
|
33
|
+
- 文档站版本改为读取 `package.json`。推送 `v*` 标签时与 npm 发布同一提交重新部署 GitHub Pages。
|
|
34
|
+
- `RsButton` 轮廓描边改跟 `--rs-input-border`。亮色不再用 `#6e6e73`,暗色不再用 `#a3a3a3`。
|
|
35
|
+
- `RsButton`:未传 `bordered` 回到 `false`(与 2.0.3 之前一致)。要描边须显式传 `bordered`。
|
|
36
|
+
|
|
9
37
|
## [2.0.9] - 2026-09-22
|
|
10
38
|
|
|
11
39
|
### 变更
|
package/NOTICE
CHANGED
|
@@ -17,7 +17,6 @@ Versions below are typical; the lockfile is authoritative.
|
|
|
17
17
|
| Project / 项目 | Typical license / 常见许可证 | Use / 用途 |
|
|
18
18
|
|----------------|------------------------------|------------|
|
|
19
19
|
| Vue | MIT | peer framework |
|
|
20
|
-
| Reka UI | MIT | accessible primitives |
|
|
21
20
|
| Lucide (@lucide/vue) | ISC | default icons |
|
|
22
21
|
| Monaco Editor | MIT | RsMonacoEditor |
|
|
23
22
|
| CodeMirror | MIT | RsCodeEditor |
|
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Built for ops consoles, database workbenches, and internal admin UIs. Marketing
|
|
|
18
18
|
- **Design tokens** — light / dark / system via `data-rs-theme` and CSS variables; hosts override a brand layer
|
|
19
19
|
- **Rs\* components** — Button, Form, Dialog, Table, Tree, Tabs, Anchor, and more
|
|
20
20
|
- **Tooling** — Monaco, CodeMirror, xterm (import only on routes that need them)
|
|
21
|
-
- **Accessibility** —
|
|
21
|
+
- **Accessibility** — native controls and ARIA; apps depend only on `niuma-ui`
|
|
22
22
|
- **i18n** — omitted `locale` follows the host language (`zh*` → `zh-CN`, `en*` → `en-US`); unknown tags fall back to `zh-CN`. Extra languages: `registerRsLocale` ([guide](./docs/locales.en.md))
|
|
23
23
|
- **Vite** — `import { RsButton } from 'niuma-ui'` is enough to bundle; `niumaUiHost` is local `pnpm dev` HMR only
|
|
24
24
|
|
|
@@ -71,7 +71,7 @@ Omit `locale` to follow the host language. Chinese systems stay on `zh-CN`. Comm
|
|
|
71
71
|
|
|
72
72
|
## Usage
|
|
73
73
|
|
|
74
|
-
1. Named-import from the package root only.
|
|
74
|
+
1. Named-import from the package root only. Do not `import *`.
|
|
75
75
|
2. Import `niuma-ui/styles.css` once, then your brand CSS.
|
|
76
76
|
3. Wrap the app with `RsConfigProvider` (theme, locale, default control size).
|
|
77
77
|
4. Light sites re-export used symbols from their own `ui.ts`. Do not alias the package to this repo’s `src/index.ts`.
|
|
@@ -116,7 +116,7 @@ Stable publishes set npm dist-tag **`latest`**; prereleases use **`next`**. Ther
|
|
|
116
116
|
|
|
117
117
|
[Apache License 2.0](./LICENSE). Attribution: [NOTICE](./NOTICE).
|
|
118
118
|
|
|
119
|
-
|
|
119
|
+
Icons: [Lucide](https://lucide.dev/). Editors: [Monaco](https://microsoft.github.io/monaco-editor/), [CodeMirror](https://codemirror.net/). Terminal: [xterm.js](https://xtermjs.org/).
|
|
120
120
|
|
|
121
121
|
- Docs: https://blair-shang.github.io/niuma-ui/
|
|
122
122
|
- npm: https://www.npmjs.com/package/niuma-ui
|
package/README.zh-CN.md
CHANGED
|
@@ -18,7 +18,7 @@ Vue 3 **工作台**设计系统:一致的 `Rs*` 组件与 `--rs-*` Token,以
|
|
|
18
18
|
- **Design Token**:明暗主题走 `data-rs-theme`(`light` / `dark` / `system`)与 CSS 变量,宿主用品牌层覆盖
|
|
19
19
|
- **Rs\* 组件**:Button、Form、Dialog、Table、Tree、Tabs、Anchor 等
|
|
20
20
|
- **专业工具**:Monaco、CodeMirror、xterm(只在用到的路由引入)
|
|
21
|
-
-
|
|
21
|
+
- **无障碍**:原生控件与 ARIA,应用只依赖 `niuma-ui`
|
|
22
22
|
- **国际化**:未设 `locale` 时跟本机语言(中文系统就是 `zh-CN`);认不出回退中文。第三方语言用 `registerRsLocale`,见 [docs/locales.md](./docs/locales.md)
|
|
23
23
|
- **Vite**:`import { RsButton } from 'niuma-ui'` 即可打包;`niumaUiHost` 仅本机 `pnpm dev` 联调源码
|
|
24
24
|
|
|
@@ -71,7 +71,7 @@ import { RsConfigProvider, RsButton } from 'niuma-ui'
|
|
|
71
71
|
|
|
72
72
|
## 使用约定
|
|
73
73
|
|
|
74
|
-
1. 只从包根具名导入:`import { RsButton } from 'niuma-ui'
|
|
74
|
+
1. 只从包根具名导入:`import { RsButton } from 'niuma-ui'`。不要 `import *`。
|
|
75
75
|
2. 样式只引一次 `niuma-ui/styles.css`,再加载你的品牌 CSS。
|
|
76
76
|
3. 根节点包 `RsConfigProvider`(主题、语言、默认控件尺寸)。
|
|
77
77
|
4. 轻量站点在自己的 `ui.ts` 里再导出用到的符号。不要把包名别名到本仓库的 `src/index.ts`。
|
|
@@ -122,7 +122,7 @@ pnpm build # 库 → dist/
|
|
|
122
122
|
|
|
123
123
|
[Apache License 2.0](./LICENSE)。版权与第三方声明见 [NOTICE](./NOTICE)。
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
图标:[Lucide](https://lucide.dev/)。编辑器:[Monaco](https://microsoft.github.io/monaco-editor/)、[CodeMirror](https://codemirror.net/)。终端:[xterm.js](https://xtermjs.org/)。
|
|
126
126
|
|
|
127
127
|
- 文档站:https://blair-shang.github.io/niuma-ui/
|
|
128
128
|
- npm:https://www.npmjs.com/package/niuma-ui
|
|
@@ -47,17 +47,17 @@ type __VLS_Slots = {} & {
|
|
|
47
47
|
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsAutoCompleteExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
48
48
|
search: (query: string) => any;
|
|
49
49
|
select: (value: string) => any;
|
|
50
|
+
clear: () => any;
|
|
50
51
|
blur: (event: FocusEvent) => any;
|
|
51
52
|
focus: (event: FocusEvent) => any;
|
|
52
|
-
clear: () => any;
|
|
53
53
|
"update:modelValue": (value: string) => any;
|
|
54
54
|
"update:open": (value: boolean) => any;
|
|
55
55
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
56
56
|
onSearch?: ((query: string) => any) | undefined;
|
|
57
57
|
onSelect?: ((value: string) => any) | undefined;
|
|
58
|
+
onClear?: (() => any) | undefined;
|
|
58
59
|
onBlur?: ((event: FocusEvent) => any) | undefined;
|
|
59
60
|
onFocus?: ((event: FocusEvent) => any) | undefined;
|
|
60
|
-
onClear?: (() => any) | undefined;
|
|
61
61
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
62
62
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
63
63
|
}>, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.rs-btn[data-v-
|
|
2
|
+
.rs-btn[data-v-8974aec3] {
|
|
3
3
|
position: relative;
|
|
4
4
|
display: inline-flex;
|
|
5
5
|
align-items: center;
|
|
@@ -23,127 +23,122 @@
|
|
|
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-8974aec3] {
|
|
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-8974aec3] {
|
|
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-8974aec3] {
|
|
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-8974aec3]: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-8974aec3] {
|
|
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-8974aec3]: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-8974aec3] {
|
|
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--default[data-v-
|
|
62
|
+
.rs-btn--loading.rs-btn--default[data-v-8974aec3]:not(.rs-btn--tone-neutral) {
|
|
63
63
|
color: var(--rs-btn-tone-on-container);
|
|
64
64
|
border-color: color-mix(in srgb, var(--rs-btn-tone) 42%, var(--rs-border));
|
|
65
65
|
background: var(--rs-btn-tone-container);
|
|
66
66
|
}
|
|
67
|
-
.rs-btn--loading.rs-btn--ghost[data-v-
|
|
68
|
-
.rs-btn--loading.rs-btn--text[data-v-
|
|
67
|
+
.rs-btn--loading.rs-btn--ghost[data-v-8974aec3],
|
|
68
|
+
.rs-btn--loading.rs-btn--text[data-v-8974aec3] {
|
|
69
69
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
70
70
|
background: var(--rs-surface-hover);
|
|
71
71
|
}
|
|
72
|
-
.rs-btn[data-v-
|
|
72
|
+
.rs-btn[data-v-8974aec3]:focus-visible {
|
|
73
73
|
outline: none;
|
|
74
74
|
box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
|
|
75
75
|
}
|
|
76
|
-
.rs-btn--icon-only[data-v-
|
|
76
|
+
.rs-btn--icon-only[data-v-8974aec3] {
|
|
77
77
|
padding: 0;
|
|
78
78
|
min-width: var(--rs-control-height-md);
|
|
79
79
|
}
|
|
80
|
-
.rs-btn--icon-only.rs-btn--ssm[data-v-
|
|
80
|
+
.rs-btn--icon-only.rs-btn--ssm[data-v-8974aec3] {
|
|
81
81
|
min-width: var(--rs-control-height-ssm);
|
|
82
82
|
}
|
|
83
|
-
.rs-btn--icon-only.rs-btn--sm[data-v-
|
|
83
|
+
.rs-btn--icon-only.rs-btn--sm[data-v-8974aec3] {
|
|
84
84
|
min-width: var(--rs-control-height-sm);
|
|
85
85
|
}
|
|
86
|
-
.rs-btn--icon-only.rs-btn--lg[data-v-
|
|
86
|
+
.rs-btn--icon-only.rs-btn--lg[data-v-8974aec3] {
|
|
87
87
|
min-width: var(--rs-control-height-lg);
|
|
88
88
|
}
|
|
89
|
-
.rs-btn--primary[data-v-
|
|
89
|
+
.rs-btn--primary[data-v-8974aec3] {
|
|
90
90
|
background: var(--rs-primary);
|
|
91
91
|
color: var(--rs-primary-foreground);
|
|
92
92
|
box-shadow: var(--rs-shadow-sm);
|
|
93
93
|
}
|
|
94
|
-
.rs-btn--primary[data-v-
|
|
94
|
+
.rs-btn--primary[data-v-8974aec3]:hover:not(:disabled) {
|
|
95
95
|
background: var(--rs-primary-hover);
|
|
96
96
|
box-shadow: var(--rs-shadow);
|
|
97
97
|
}
|
|
98
|
-
.rs-btn--primary[data-v-
|
|
98
|
+
.rs-btn--primary[data-v-8974aec3]:active:not(:disabled) {
|
|
99
99
|
box-shadow: none;
|
|
100
100
|
}
|
|
101
|
-
.rs-btn--default[data-v-
|
|
101
|
+
.rs-btn--default[data-v-8974aec3] {
|
|
102
102
|
border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
|
|
103
103
|
background: var(--rs-btn-secondary-bg, var(--rs-surface-hover));
|
|
104
104
|
color: var(--rs-text);
|
|
105
105
|
box-shadow: none;
|
|
106
106
|
}
|
|
107
|
-
.rs-btn--default[data-v-
|
|
107
|
+
.rs-btn--default[data-v-8974aec3]:hover:not(:disabled) {
|
|
108
108
|
color: var(--rs-primary);
|
|
109
109
|
border-color: var(--rs-primary);
|
|
110
110
|
background: var(--rs-btn-secondary-bg-hover, var(--rs-primary-container));
|
|
111
111
|
}
|
|
112
|
-
.rs-btn--default[data-v-
|
|
112
|
+
.rs-btn--default[data-v-8974aec3]:active:not(:disabled) {
|
|
113
113
|
color: var(--rs-primary-hover);
|
|
114
114
|
border-color: var(--rs-primary-hover);
|
|
115
115
|
background: var(--rs-btn-secondary-bg-active, var(--rs-primary-container));
|
|
116
116
|
}
|
|
117
|
-
.rs-btn--ghost[data-v-
|
|
117
|
+
.rs-btn--ghost[data-v-8974aec3] {
|
|
118
118
|
background: transparent;
|
|
119
119
|
border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
|
|
120
120
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
121
121
|
}
|
|
122
|
-
.rs-btn--ghost[data-v-
|
|
122
|
+
.rs-btn--ghost[data-v-8974aec3]:hover:not(:disabled) {
|
|
123
123
|
background: var(--rs-surface-hover);
|
|
124
124
|
border-color: var(--rs-btn-outline-border, var(--rs-border));
|
|
125
125
|
color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
|
|
126
126
|
}
|
|
127
|
-
.rs-btn--ghost[data-v-
|
|
127
|
+
.rs-btn--ghost[data-v-8974aec3]:active:not(:disabled) {
|
|
128
128
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 12%, var(--rs-surface-hover));
|
|
129
129
|
}
|
|
130
|
-
.rs-btn--
|
|
131
|
-
.rs-btn--borderless[data-v-423f0a90]:hover:not(:disabled),
|
|
132
|
-
.rs-btn--borderless[data-v-423f0a90]:active:not(:disabled) {
|
|
133
|
-
border-color: transparent;
|
|
134
|
-
}
|
|
135
|
-
.rs-btn--danger[data-v-423f0a90] {
|
|
130
|
+
.rs-btn--danger[data-v-8974aec3] {
|
|
136
131
|
background: var(--rs-danger-container);
|
|
137
132
|
border-color: color-mix(in srgb, var(--rs-danger) 30%, transparent);
|
|
138
133
|
color: var(--rs-on-danger-container);
|
|
139
134
|
}
|
|
140
|
-
.rs-btn--danger[data-v-
|
|
135
|
+
.rs-btn--danger[data-v-8974aec3]:hover:not(:disabled) {
|
|
141
136
|
border-color: var(--rs-danger);
|
|
142
137
|
background: color-mix(in srgb, var(--rs-danger) 20%, var(--rs-danger-container));
|
|
143
138
|
}
|
|
144
139
|
|
|
145
140
|
/* 行内链接:可下划线;色调由 tone 控制(默认 primary) */
|
|
146
|
-
.rs-btn--link[data-v-
|
|
141
|
+
.rs-btn--link[data-v-8974aec3] {
|
|
147
142
|
min-height: auto;
|
|
148
143
|
padding: 0;
|
|
149
144
|
border-color: transparent;
|
|
@@ -153,7 +148,7 @@
|
|
|
153
148
|
box-shadow: none;
|
|
154
149
|
font-weight: var(--rs-font-weight-medium);
|
|
155
150
|
}
|
|
156
|
-
.rs-btn--link[data-v-
|
|
151
|
+
.rs-btn--link[data-v-8974aec3]:hover:not(:disabled) {
|
|
157
152
|
color: var(--rs-btn-tone-hover, var(--rs-primary-hover));
|
|
158
153
|
text-decoration: underline;
|
|
159
154
|
}
|
|
@@ -162,7 +157,7 @@
|
|
|
162
157
|
* text:工具栏 / 表格操作 quaternary
|
|
163
158
|
* 无底无边,靠 tone 着色;hover 使用同色浅底
|
|
164
159
|
*/
|
|
165
|
-
.rs-btn--text[data-v-
|
|
160
|
+
.rs-btn--text[data-v-8974aec3] {
|
|
166
161
|
min-height: var(--rs-control-height-sm);
|
|
167
162
|
padding: 0 var(--rs-space-sm);
|
|
168
163
|
border-color: transparent;
|
|
@@ -171,61 +166,61 @@
|
|
|
171
166
|
font-weight: var(--rs-font-weight-regular);
|
|
172
167
|
color: var(--rs-btn-tone, var(--rs-text));
|
|
173
168
|
}
|
|
174
|
-
.rs-btn--text.rs-btn--ssm[data-v-
|
|
169
|
+
.rs-btn--text.rs-btn--ssm[data-v-8974aec3] {
|
|
175
170
|
min-height: var(--rs-control-height-ssm);
|
|
176
171
|
}
|
|
177
|
-
.rs-btn--text.rs-btn--md[data-v-
|
|
172
|
+
.rs-btn--text.rs-btn--md[data-v-8974aec3] {
|
|
178
173
|
min-height: var(--rs-control-height-md);
|
|
179
174
|
}
|
|
180
|
-
.rs-btn--text.rs-btn--lg[data-v-
|
|
175
|
+
.rs-btn--text.rs-btn--lg[data-v-8974aec3] {
|
|
181
176
|
min-height: var(--rs-control-height-lg);
|
|
182
177
|
}
|
|
183
|
-
.rs-btn--text[data-v-
|
|
178
|
+
.rs-btn--text[data-v-8974aec3]:hover:not(:disabled) {
|
|
184
179
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 8%, transparent);
|
|
185
180
|
border-color: transparent;
|
|
186
181
|
color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
|
|
187
182
|
}
|
|
188
|
-
.rs-btn--text[data-v-
|
|
183
|
+
.rs-btn--text[data-v-8974aec3]:active:not(:disabled) {
|
|
189
184
|
background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 12%, transparent);
|
|
190
185
|
}
|
|
191
186
|
|
|
192
187
|
/* tone:色相 token,供所有变体消费(形态 × 色相) */
|
|
193
|
-
.rs-btn--tone-neutral[data-v-
|
|
188
|
+
.rs-btn--tone-neutral[data-v-8974aec3] {
|
|
194
189
|
--rs-btn-tone: var(--rs-text);
|
|
195
190
|
--rs-btn-tone-hover: var(--rs-text);
|
|
196
191
|
--rs-btn-tone-fg: var(--rs-text);
|
|
197
192
|
--rs-btn-tone-container: var(--rs-btn-secondary-bg, var(--rs-surface-hover));
|
|
198
193
|
--rs-btn-tone-on-container: var(--rs-text);
|
|
199
194
|
}
|
|
200
|
-
.rs-btn--tone-primary[data-v-
|
|
195
|
+
.rs-btn--tone-primary[data-v-8974aec3] {
|
|
201
196
|
--rs-btn-tone: var(--rs-primary);
|
|
202
197
|
--rs-btn-tone-hover: var(--rs-primary-hover);
|
|
203
198
|
--rs-btn-tone-fg: var(--rs-primary-foreground);
|
|
204
199
|
--rs-btn-tone-container: var(--rs-primary-container);
|
|
205
200
|
--rs-btn-tone-on-container: var(--rs-on-primary-container);
|
|
206
201
|
}
|
|
207
|
-
.rs-btn--tone-danger[data-v-
|
|
202
|
+
.rs-btn--tone-danger[data-v-8974aec3] {
|
|
208
203
|
--rs-btn-tone: var(--rs-danger);
|
|
209
204
|
--rs-btn-tone-hover: var(--rs-danger);
|
|
210
205
|
--rs-btn-tone-fg: var(--rs-text-inverse);
|
|
211
206
|
--rs-btn-tone-container: var(--rs-danger-container);
|
|
212
207
|
--rs-btn-tone-on-container: var(--rs-on-danger-container);
|
|
213
208
|
}
|
|
214
|
-
.rs-btn--tone-success[data-v-
|
|
209
|
+
.rs-btn--tone-success[data-v-8974aec3] {
|
|
215
210
|
--rs-btn-tone: var(--rs-success, #18a058);
|
|
216
211
|
--rs-btn-tone-hover: var(--rs-success, #18a058);
|
|
217
212
|
--rs-btn-tone-fg: var(--rs-text-inverse);
|
|
218
213
|
--rs-btn-tone-container: var(--rs-success-container, color-mix(in srgb, var(--rs-success, #18a058) 14%, var(--rs-surface)));
|
|
219
214
|
--rs-btn-tone-on-container: var(--rs-on-success-container, var(--rs-success, #18a058));
|
|
220
215
|
}
|
|
221
|
-
.rs-btn--tone-warning[data-v-
|
|
216
|
+
.rs-btn--tone-warning[data-v-8974aec3] {
|
|
222
217
|
--rs-btn-tone: var(--rs-warning, #f0a020);
|
|
223
218
|
--rs-btn-tone-hover: var(--rs-warning, #f0a020);
|
|
224
219
|
--rs-btn-tone-fg: var(--rs-text-inverse);
|
|
225
220
|
--rs-btn-tone-container: var(--rs-warning-container, color-mix(in srgb, var(--rs-warning, #f0a020) 14%, var(--rs-surface)));
|
|
226
221
|
--rs-btn-tone-on-container: var(--rs-on-warning-container, var(--rs-warning, #f0a020));
|
|
227
222
|
}
|
|
228
|
-
.rs-btn--tone-info[data-v-
|
|
223
|
+
.rs-btn--tone-info[data-v-8974aec3] {
|
|
229
224
|
--rs-btn-tone: var(--rs-info, #2080f0);
|
|
230
225
|
--rs-btn-tone-hover: var(--rs-info, #2080f0);
|
|
231
226
|
--rs-btn-tone-fg: var(--rs-text-inverse);
|
|
@@ -234,42 +229,50 @@
|
|
|
234
229
|
}
|
|
235
230
|
|
|
236
231
|
/* default + 语义色:轮廓 + 浅底(Ant outlined / Element plain) */
|
|
237
|
-
.rs-btn--default[data-v-
|
|
232
|
+
.rs-btn--default[data-v-8974aec3]:not(.rs-btn--tone-neutral) {
|
|
238
233
|
color: var(--rs-btn-tone-on-container);
|
|
239
234
|
border-color: color-mix(in srgb, var(--rs-btn-tone) 42%, var(--rs-border));
|
|
240
235
|
background: var(--rs-btn-tone-container);
|
|
241
236
|
}
|
|
242
|
-
.rs-btn--default[data-v-
|
|
237
|
+
.rs-btn--default[data-v-8974aec3]:not(.rs-btn--tone-neutral):hover:not(:disabled) {
|
|
243
238
|
color: var(--rs-btn-tone);
|
|
244
239
|
border-color: var(--rs-btn-tone);
|
|
245
240
|
background: color-mix(in srgb, var(--rs-btn-tone) 14%, var(--rs-btn-tone-container));
|
|
246
241
|
}
|
|
247
|
-
.rs-btn--default[data-v-
|
|
242
|
+
.rs-btn--default[data-v-8974aec3]:not(.rs-btn--tone-neutral):active:not(:disabled) {
|
|
248
243
|
color: var(--rs-btn-tone-hover);
|
|
249
244
|
border-color: var(--rs-btn-tone-hover);
|
|
250
245
|
background: color-mix(in srgb, var(--rs-btn-tone) 20%, var(--rs-btn-tone-container));
|
|
251
246
|
}
|
|
252
247
|
|
|
253
248
|
/* primary + 非主色:实心语义色 */
|
|
254
|
-
.rs-btn--primary[data-v-
|
|
249
|
+
.rs-btn--primary[data-v-8974aec3]:not(.rs-btn--tone-primary) {
|
|
255
250
|
background: var(--rs-btn-tone);
|
|
256
251
|
color: var(--rs-btn-tone-fg);
|
|
257
252
|
border-color: transparent;
|
|
258
253
|
}
|
|
259
|
-
.rs-btn--primary[data-v-
|
|
254
|
+
.rs-btn--primary[data-v-8974aec3]:not(.rs-btn--tone-primary):hover:not(:disabled) {
|
|
260
255
|
background: var(--rs-btn-tone-hover);
|
|
261
256
|
}
|
|
262
257
|
|
|
263
258
|
/* ghost + 语义色:描边跟色相 */
|
|
264
|
-
.rs-btn--ghost[data-v-
|
|
259
|
+
.rs-btn--ghost[data-v-8974aec3]:not(.rs-btn--tone-neutral) {
|
|
265
260
|
border-color: color-mix(in srgb, var(--rs-btn-tone) 45%, var(--rs-border));
|
|
266
261
|
}
|
|
267
|
-
.rs-btn--ghost[data-v-
|
|
262
|
+
.rs-btn--ghost[data-v-8974aec3]:not(.rs-btn--tone-neutral):hover:not(:disabled) {
|
|
268
263
|
border-color: var(--rs-btn-tone);
|
|
269
264
|
background: color-mix(in srgb, var(--rs-btn-tone) 14%, var(--rs-surface));
|
|
270
265
|
color: var(--rs-btn-tone);
|
|
271
266
|
}
|
|
272
|
-
|
|
267
|
+
|
|
268
|
+
/* 未传 bordered 时压过上面各变体后写的 border-color */
|
|
269
|
+
.rs-btn.rs-btn--borderless[data-v-8974aec3],
|
|
270
|
+
.rs-btn.rs-btn--borderless[data-v-8974aec3]:hover:not(:disabled),
|
|
271
|
+
.rs-btn.rs-btn--borderless[data-v-8974aec3]:active:not(:disabled),
|
|
272
|
+
.rs-btn.rs-btn--borderless.rs-btn--loading[data-v-8974aec3] {
|
|
273
|
+
border-color: transparent;
|
|
274
|
+
}
|
|
275
|
+
.rs-btn__spinner[data-v-8974aec3] {
|
|
273
276
|
display: inline-flex;
|
|
274
277
|
align-items: center;
|
|
275
278
|
justify-content: center;
|
|
@@ -278,7 +281,7 @@
|
|
|
278
281
|
flex-shrink: 0;
|
|
279
282
|
pointer-events: none;
|
|
280
283
|
}
|
|
281
|
-
.rs-btn__spinner-ring[data-v-
|
|
284
|
+
.rs-btn__spinner-ring[data-v-8974aec3] {
|
|
282
285
|
display: block;
|
|
283
286
|
width: 100%;
|
|
284
287
|
height: 100%;
|
|
@@ -286,27 +289,27 @@
|
|
|
286
289
|
border-top-color: var(--rs-primary);
|
|
287
290
|
border-radius: var(--rs-radius-full);
|
|
288
291
|
transform-origin: center center;
|
|
289
|
-
animation: rs-spin-
|
|
292
|
+
animation: rs-spin-8974aec3 0.75s linear infinite;
|
|
290
293
|
}
|
|
291
|
-
.rs-btn--default .rs-btn__spinner-ring[data-v-
|
|
292
|
-
.rs-btn--ghost .rs-btn__spinner-ring[data-v-
|
|
294
|
+
.rs-btn--default .rs-btn__spinner-ring[data-v-8974aec3],
|
|
295
|
+
.rs-btn--ghost .rs-btn__spinner-ring[data-v-8974aec3] {
|
|
293
296
|
border-color: color-mix(in srgb, var(--rs-btn-tone, var(--rs-primary)) 28%, transparent);
|
|
294
297
|
border-top-color: var(--rs-btn-tone, var(--rs-primary));
|
|
295
298
|
}
|
|
296
|
-
.rs-btn--text .rs-btn__spinner-ring[data-v-
|
|
297
|
-
.rs-btn--link .rs-btn__spinner-ring[data-v-
|
|
299
|
+
.rs-btn--text .rs-btn__spinner-ring[data-v-8974aec3],
|
|
300
|
+
.rs-btn--link .rs-btn__spinner-ring[data-v-8974aec3] {
|
|
298
301
|
border-color: color-mix(in srgb, var(--rs-btn-tone, var(--rs-primary)) 28%, transparent);
|
|
299
302
|
border-top-color: var(--rs-btn-tone, var(--rs-primary));
|
|
300
303
|
}
|
|
301
|
-
.rs-btn--primary .rs-btn__spinner-ring[data-v-
|
|
304
|
+
.rs-btn--primary .rs-btn__spinner-ring[data-v-8974aec3] {
|
|
302
305
|
border-color: color-mix(in srgb, currentcolor 35%, transparent);
|
|
303
306
|
border-top-color: currentcolor;
|
|
304
307
|
}
|
|
305
|
-
.rs-btn--danger .rs-btn__spinner-ring[data-v-
|
|
308
|
+
.rs-btn--danger .rs-btn__spinner-ring[data-v-8974aec3] {
|
|
306
309
|
border-color: color-mix(in srgb, var(--rs-danger) 28%, transparent);
|
|
307
310
|
border-top-color: var(--rs-danger);
|
|
308
311
|
}
|
|
309
|
-
.rs-btn__icon[data-v-
|
|
312
|
+
.rs-btn__icon[data-v-8974aec3] {
|
|
310
313
|
display: inline-flex;
|
|
311
314
|
flex-shrink: 0;
|
|
312
315
|
align-items: center;
|
|
@@ -315,7 +318,7 @@
|
|
|
315
318
|
color: inherit;
|
|
316
319
|
}
|
|
317
320
|
/* 插槽内自定义图标+文案时也能水平对齐 */
|
|
318
|
-
.rs-btn__label[data-v-
|
|
321
|
+
.rs-btn__label[data-v-8974aec3] {
|
|
319
322
|
display: inline-flex;
|
|
320
323
|
align-items: center;
|
|
321
324
|
gap: inherit;
|
|
@@ -323,7 +326,7 @@
|
|
|
323
326
|
line-height: 1;
|
|
324
327
|
white-space: nowrap;
|
|
325
328
|
}
|
|
326
|
-
.rs-btn__label--reveal[data-v-
|
|
329
|
+
.rs-btn__label--reveal[data-v-8974aec3] {
|
|
327
330
|
display: inline-block;
|
|
328
331
|
max-width: 0;
|
|
329
332
|
opacity: 0;
|
|
@@ -334,12 +337,12 @@
|
|
|
334
337
|
max-width 0.2s ease,
|
|
335
338
|
opacity 0.15s ease;
|
|
336
339
|
}
|
|
337
|
-
.rs-btn--reveal-label:hover:not(:disabled) .rs-btn__label--reveal[data-v-
|
|
338
|
-
.rs-btn--reveal-label:focus-visible .rs-btn__label--reveal[data-v-
|
|
340
|
+
.rs-btn--reveal-label:hover:not(:disabled) .rs-btn__label--reveal[data-v-8974aec3],
|
|
341
|
+
.rs-btn--reveal-label:focus-visible .rs-btn__label--reveal[data-v-8974aec3] {
|
|
339
342
|
max-width: 12rem;
|
|
340
343
|
opacity: 1;
|
|
341
344
|
}
|
|
342
|
-
.rs-btn__tooltip[data-v-
|
|
345
|
+
.rs-btn__tooltip[data-v-8974aec3] {
|
|
343
346
|
position: fixed;
|
|
344
347
|
/* Portal 挂 body,必须高于 Dialog/Drawer(100/101),与 RsTooltip 同一档 */
|
|
345
348
|
z-index: calc(var(--rs-z-modal) + 2);
|
|
@@ -355,17 +358,17 @@
|
|
|
355
358
|
box-shadow: var(--rs-shadow-sm);
|
|
356
359
|
pointer-events: none;
|
|
357
360
|
}
|
|
358
|
-
@keyframes rs-spin-
|
|
361
|
+
@keyframes rs-spin-8974aec3 {
|
|
359
362
|
to {
|
|
360
363
|
transform: rotate(360deg);
|
|
361
364
|
}
|
|
362
365
|
}
|
|
363
366
|
@media (prefers-reduced-motion: reduce) {
|
|
364
|
-
.rs-btn[data-v-
|
|
365
|
-
.rs-btn__label--reveal[data-v-
|
|
367
|
+
.rs-btn[data-v-8974aec3],
|
|
368
|
+
.rs-btn__label--reveal[data-v-8974aec3] {
|
|
366
369
|
transition: none;
|
|
367
370
|
}
|
|
368
|
-
.rs-btn__spinner-ring[data-v-
|
|
371
|
+
.rs-btn__spinner-ring[data-v-8974aec3] {
|
|
369
372
|
animation: none;
|
|
370
373
|
border-top-color: transparent;
|
|
371
374
|
}
|
|
@@ -15,10 +15,7 @@ type __VLS_Props = {
|
|
|
15
15
|
type?: 'button' | 'submit' | 'reset';
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
loading?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* 是否显示外边框。未传时 text / link 无边,其余有边。
|
|
20
|
-
* 默认必须是 undefined:Vue 会把未传的 Boolean 收成 false。
|
|
21
|
-
*/
|
|
18
|
+
/** 是否绘制外边框。未传为 false,与 2.0.3 之前一致。 */
|
|
22
19
|
bordered?: boolean;
|
|
23
20
|
/** 前缀图标(Lucide kebab-case 名称) */
|
|
24
21
|
icon?: string;
|
|
@@ -39,7 +39,7 @@ var RsButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
39
39
|
},
|
|
40
40
|
bordered: {
|
|
41
41
|
type: Boolean,
|
|
42
|
-
default:
|
|
42
|
+
default: false
|
|
43
43
|
},
|
|
44
44
|
icon: {},
|
|
45
45
|
iconSize: {},
|
|
@@ -64,11 +64,7 @@ var RsButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
64
64
|
const rootStyle = computed(() => ({ "--rs-btn-radius": rsRadiusCss(resolvedRadius.value) }));
|
|
65
65
|
const hasLabel = computed(() => Boolean(slots.default));
|
|
66
66
|
const resolvedVariant = computed(() => resolveRsButtonVariant(props.variant ?? "primary"));
|
|
67
|
-
|
|
68
|
-
const resolvedBordered = computed(() => {
|
|
69
|
-
if (props.bordered !== void 0) return props.bordered;
|
|
70
|
-
return resolvedVariant.value !== "text" && resolvedVariant.value !== "link";
|
|
71
|
-
});
|
|
67
|
+
const resolvedBordered = computed(() => props.bordered);
|
|
72
68
|
/** 形态 × 色相:所有变体都带 tone class,由 CSS 决定如何上色。 */
|
|
73
69
|
const resolvedTone = computed(() => resolveRsButtonTone(props.variant ?? "primary", props.tone));
|
|
74
70
|
const rootClass = computed(() => ({
|
|
@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
|
|
|
3
3
|
import RsButton_vue_vue_type_script_setup_true_lang_default from "./RsButton.impl.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/button/src/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-8974aec3"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { RsButton_default as default };
|