@vtable-guild/vtable-guild 2.0.3 → 2.0.5
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 +2 -2
- package/css/index.css +97 -0
- package/css/presets/antdv.css +179 -0
- package/css/presets/element-plus.css +191 -0
- package/css/tokens.css +34 -0
- package/css/transitions.css +21 -0
- package/dist/css/index.css +97 -0
- package/dist/css/presets/antdv.css +179 -0
- package/dist/css/presets/element-plus.css +191 -0
- package/dist/css/tokens.css +34 -0
- package/dist/css/transitions.css +21 -0
- package/dist/index.d.ts +2427 -4
- package/dist/index.mjs +9865 -3
- package/package.json +25 -10
- package/dist/index.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @vtable-guild/vtable-guild
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Single public package for vtable-guild. Install one package, import one runtime entry, and use one CSS entry.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -12,7 +12,7 @@ pnpm add @vtable-guild/vtable-guild
|
|
|
12
12
|
|
|
13
13
|
```ts
|
|
14
14
|
import { createVTableGuild } from '@vtable-guild/vtable-guild'
|
|
15
|
-
import '@vtable-guild/
|
|
15
|
+
import '@vtable-guild/vtable-guild/css'
|
|
16
16
|
|
|
17
17
|
const app = createApp(App)
|
|
18
18
|
app.use(createVTableGuild())
|
package/css/index.css
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/* @vtable-guild/theme/css — 默认入口 */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* 引入顺序：
|
|
5
|
+
* 1. tokens.css — 注册 Tailwind 主题色（@theme），不含值定义
|
|
6
|
+
* 2. presets/*.css — 所有主题预设（antdv 为默认回退，其余通过 data-vtg-preset 属性激活）
|
|
7
|
+
*
|
|
8
|
+
* 使用方只需 `@import '@vtable-guild/theme/css'`，
|
|
9
|
+
* 然后在 JS 侧通过 createVTableGuild({ themePreset: 'element-plus' }) 切换预设。
|
|
10
|
+
* 新增主题只需在此添加一行 @import 即可。
|
|
11
|
+
*/
|
|
12
|
+
@import './tokens.css';
|
|
13
|
+
@import './presets/antdv.css';
|
|
14
|
+
@import './presets/element-plus.css';
|
|
15
|
+
@import './transitions.css';
|
|
16
|
+
|
|
17
|
+
/* Hide native scrollbar — used by Scrollbar component */
|
|
18
|
+
.scrollbar-none {
|
|
19
|
+
scrollbar-width: none;
|
|
20
|
+
-ms-overflow-style: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.scrollbar-none::-webkit-scrollbar {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* ---- antdv Spin Dot indicator ---- */
|
|
28
|
+
@keyframes vtg-spin-rotate {
|
|
29
|
+
to {
|
|
30
|
+
transform: rotate(405deg);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes vtg-spin-move {
|
|
35
|
+
to {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.vtg-spin-dot {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
width: 20px;
|
|
44
|
+
height: 20px;
|
|
45
|
+
transform: rotate(45deg);
|
|
46
|
+
animation: vtg-spin-rotate 1.2s infinite linear;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.vtg-spin-dot-item {
|
|
50
|
+
position: absolute;
|
|
51
|
+
display: block;
|
|
52
|
+
width: 9px;
|
|
53
|
+
height: 9px;
|
|
54
|
+
background-color: currentcolor;
|
|
55
|
+
border-radius: 100%;
|
|
56
|
+
transform: scale(0.75);
|
|
57
|
+
transform-origin: 50% 50%;
|
|
58
|
+
opacity: 0.3;
|
|
59
|
+
animation: vtg-spin-move 1s infinite linear alternate;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.vtg-spin-dot-item:nth-child(1) {
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.vtg-spin-dot-item:nth-child(2) {
|
|
68
|
+
top: 0;
|
|
69
|
+
right: 0;
|
|
70
|
+
animation-delay: 0.4s;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.vtg-spin-dot-item:nth-child(3) {
|
|
74
|
+
right: 0;
|
|
75
|
+
bottom: 0;
|
|
76
|
+
animation-delay: 0.8s;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.vtg-spin-dot-item:nth-child(4) {
|
|
80
|
+
bottom: 0;
|
|
81
|
+
left: 0;
|
|
82
|
+
animation-delay: 1.2s;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Tooltip transition */
|
|
86
|
+
.vtg-tooltip-enter-active,
|
|
87
|
+
.vtg-tooltip-leave-active {
|
|
88
|
+
transition:
|
|
89
|
+
opacity 0.15s ease,
|
|
90
|
+
transform 0.15s ease;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.vtg-tooltip-enter-from,
|
|
94
|
+
.vtg-tooltip-leave-to {
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: scale(0.8);
|
|
97
|
+
}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
/* @vtable-guild/theme/css/presets — Ant Design Vue 预设 */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* antdv preset 自包含：
|
|
5
|
+
* 1. 语义 token — antdv 设计体系的精确值
|
|
6
|
+
* 2. 组件 token — 100% 引用语义 token，无硬编码颜色
|
|
7
|
+
* 3. .dark — 只覆盖语义 token，组件 token 自动跟随
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:where(:root),
|
|
11
|
+
[data-vtg-preset='antdv'] {
|
|
12
|
+
/* ===== 语义 token — antdv 设计体系值 ===== */
|
|
13
|
+
|
|
14
|
+
/* 排版 */
|
|
15
|
+
--font-family-base:
|
|
16
|
+
-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial',
|
|
17
|
+
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
18
|
+
'Noto Color Emoji';
|
|
19
|
+
|
|
20
|
+
/* 表面/背景 */
|
|
21
|
+
--color-surface: #ffffff;
|
|
22
|
+
--color-surface-hover: #fafafa;
|
|
23
|
+
--color-elevated: #f5f5f5;
|
|
24
|
+
|
|
25
|
+
/* 文本 */
|
|
26
|
+
--color-on-surface: rgb(0 0 0 / 88%);
|
|
27
|
+
--color-muted: rgb(0 0 0 / 45%);
|
|
28
|
+
|
|
29
|
+
/* 边框 */
|
|
30
|
+
--color-default: #f0f0f0;
|
|
31
|
+
--color-border: #d9d9d9;
|
|
32
|
+
|
|
33
|
+
/* 主题色 */
|
|
34
|
+
--color-primary: #1677ff;
|
|
35
|
+
--color-primary-hover: #4096ff;
|
|
36
|
+
--color-primary-active: #0958d9;
|
|
37
|
+
|
|
38
|
+
/* ===== 组件 token — 100% 引用语义 token ===== */
|
|
39
|
+
--vtg-table-font-family: var(--font-family-base);
|
|
40
|
+
--vtg-table-bg: var(--color-surface);
|
|
41
|
+
--vtg-table-header-bg: var(--color-surface-hover);
|
|
42
|
+
--vtg-table-header-color: var(--color-on-surface);
|
|
43
|
+
--vtg-table-text-color: var(--color-on-surface);
|
|
44
|
+
--vtg-table-border-color: var(--color-default);
|
|
45
|
+
--vtg-table-row-hover-bg: var(--color-surface-hover);
|
|
46
|
+
--vtg-table-row-selected-bg: #e6f4ff;
|
|
47
|
+
--vtg-table-row-selected-hover-bg: #bae0ff;
|
|
48
|
+
--vtg-table-loading-overlay-bg: rgb(255 255 255 / 40%);
|
|
49
|
+
--vtg-table-empty-margin-block: 32px;
|
|
50
|
+
--vtg-table-empty-image-height: 40px;
|
|
51
|
+
--vtg-table-empty-image-margin-bottom: 8px;
|
|
52
|
+
--vtg-table-empty-image-opacity: 1;
|
|
53
|
+
--vtg-table-empty-border-color: #d9d9d9;
|
|
54
|
+
--vtg-table-empty-shadow-color: #f0f0f0;
|
|
55
|
+
--vtg-table-empty-content-color: #f5f5f5;
|
|
56
|
+
|
|
57
|
+
/* 尺寸类 token（亮暗一致，不映射语义 token） */
|
|
58
|
+
--vtg-table-font-size: 14px;
|
|
59
|
+
--vtg-table-line-height: 1.5715;
|
|
60
|
+
|
|
61
|
+
/* 三档 size 对应 antdv 的 large/middle/small */
|
|
62
|
+
--vtg-table-cell-padding-inline-lg: 16px;
|
|
63
|
+
--vtg-table-cell-padding-block-lg: 16px;
|
|
64
|
+
--vtg-table-cell-padding-inline-md: 8px;
|
|
65
|
+
--vtg-table-cell-padding-block-md: 12px;
|
|
66
|
+
--vtg-table-cell-padding-inline-sm: 8px;
|
|
67
|
+
--vtg-table-cell-padding-block-sm: 8px;
|
|
68
|
+
|
|
69
|
+
/* 排序 hover 背景 */
|
|
70
|
+
--vtg-table-header-sort-hover-bg: rgb(0 0 0 / 4%);
|
|
71
|
+
|
|
72
|
+
/* 排序图标不活跃色 */
|
|
73
|
+
--color-sorter-icon: rgb(0 0 0 / 29%);
|
|
74
|
+
|
|
75
|
+
/* 筛选图标不活跃色（antdv 中与排序同色） */
|
|
76
|
+
--color-filter-icon: var(--color-sorter-icon);
|
|
77
|
+
|
|
78
|
+
/* 表头 cell 间分割线 */
|
|
79
|
+
--vtg-table-header-split-color: rgb(0 0 0 / 6%);
|
|
80
|
+
|
|
81
|
+
/* 禁用态文字色 */
|
|
82
|
+
--color-text-disabled: rgb(0 0 0 / 25%);
|
|
83
|
+
|
|
84
|
+
/* 禁用态背景 */
|
|
85
|
+
--color-bg-disabled: rgb(0 0 0 / 4%);
|
|
86
|
+
|
|
87
|
+
/* placeholder 色 */
|
|
88
|
+
--color-text-placeholder: rgb(0 0 0 / 25%);
|
|
89
|
+
|
|
90
|
+
/* 筛选下拉选项 hover 背景 */
|
|
91
|
+
--color-control-item-hover-bg: rgb(0 0 0 / 4%);
|
|
92
|
+
|
|
93
|
+
/* 筛选下拉选项选中态背景 */
|
|
94
|
+
--color-control-item-active-bg: #e6f4ff;
|
|
95
|
+
--color-control-item-active-hover-bg: #bae0ff;
|
|
96
|
+
|
|
97
|
+
/* ===== 基础组件 token — Button / Checkbox / Tooltip ===== */
|
|
98
|
+
--vtg-btn-border-radius: 6px;
|
|
99
|
+
--vtg-btn-border-radius-sm: 4px;
|
|
100
|
+
--vtg-btn-height-sm: 24px;
|
|
101
|
+
--vtg-btn-height-md: 32px;
|
|
102
|
+
--vtg-btn-padding-sm: 7px;
|
|
103
|
+
--vtg-btn-padding-md: 15px;
|
|
104
|
+
--vtg-checkbox-size: 16px;
|
|
105
|
+
--vtg-checkbox-border-radius: 4px;
|
|
106
|
+
--vtg-checkbox-check-color: #ffffff;
|
|
107
|
+
--vtg-checkbox-indeterminate-color: var(--color-primary);
|
|
108
|
+
--vtg-radio-size: 16px;
|
|
109
|
+
--vtg-radio-dot-size: 8px;
|
|
110
|
+
--vtg-radio-border-width: 1px;
|
|
111
|
+
--vtg-tooltip-bg: rgb(0 0 0 / 85%);
|
|
112
|
+
--vtg-tooltip-arrow-outer-color: rgb(0 0 0 / 85%);
|
|
113
|
+
--vtg-tooltip-border-radius: 6px;
|
|
114
|
+
--vtg-tooltip-padding: 6px 8px;
|
|
115
|
+
--vtg-tooltip-font-size: 14px;
|
|
116
|
+
|
|
117
|
+
/* Input */
|
|
118
|
+
--vtg-input-border-radius: 6px;
|
|
119
|
+
--vtg-input-height: 24px;
|
|
120
|
+
--vtg-input-padding-inline: 7px;
|
|
121
|
+
--vtg-input-font-size: 14px;
|
|
122
|
+
|
|
123
|
+
/* Scrollbar */
|
|
124
|
+
--vtg-scrollbar-thumb-bg: rgb(0 0 0 / 15%);
|
|
125
|
+
--vtg-scrollbar-thumb-hover-bg: rgb(0 0 0 / 25%);
|
|
126
|
+
--vtg-scrollbar-thumb-width: 6px;
|
|
127
|
+
--vtg-scrollbar-thumb-radius: 3px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
:where(.dark),
|
|
131
|
+
.dark [data-vtg-preset='antdv'],
|
|
132
|
+
[data-vtg-preset='antdv'].dark {
|
|
133
|
+
/* ===== 语义 token 暗色值 — 只改语义 token，组件 token 自动跟随 ===== */
|
|
134
|
+
--color-surface: #141414;
|
|
135
|
+
--color-surface-hover: #1d1d1d;
|
|
136
|
+
--color-elevated: #262626;
|
|
137
|
+
--color-on-surface: rgb(255 255 255 / 85%);
|
|
138
|
+
--color-muted: rgb(255 255 255 / 45%);
|
|
139
|
+
--color-default: #303030;
|
|
140
|
+
--color-border: #424242;
|
|
141
|
+
--color-primary: #1668dc;
|
|
142
|
+
--color-primary-hover: #15417e;
|
|
143
|
+
--color-primary-active: #1554ad;
|
|
144
|
+
|
|
145
|
+
/* 排序 hover 背景 */
|
|
146
|
+
--vtg-table-header-sort-hover-bg: rgb(255 255 255 / 4%);
|
|
147
|
+
|
|
148
|
+
/* 排序图标不活跃色 */
|
|
149
|
+
--color-sorter-icon: rgb(255 255 255 / 29%);
|
|
150
|
+
|
|
151
|
+
/* 筛选图标不活跃色 */
|
|
152
|
+
--color-filter-icon: var(--color-sorter-icon);
|
|
153
|
+
|
|
154
|
+
/* 表头 cell 间分割线 */
|
|
155
|
+
--vtg-table-header-split-color: rgb(255 255 255 / 6%);
|
|
156
|
+
|
|
157
|
+
/* 禁用态文字色 */
|
|
158
|
+
--color-text-disabled: rgb(255 255 255 / 25%);
|
|
159
|
+
|
|
160
|
+
/* 禁用态背景 */
|
|
161
|
+
--color-bg-disabled: rgb(255 255 255 / 8%);
|
|
162
|
+
|
|
163
|
+
/* placeholder 色 */
|
|
164
|
+
--color-text-placeholder: rgb(255 255 255 / 25%);
|
|
165
|
+
|
|
166
|
+
/* 筛选下拉选项 hover 背景 */
|
|
167
|
+
--color-control-item-hover-bg: rgb(255 255 255 / 8%);
|
|
168
|
+
|
|
169
|
+
/* 筛选下拉选项选中态背景 */
|
|
170
|
+
--color-control-item-active-bg: #111a2c;
|
|
171
|
+
--color-control-item-active-hover-bg: #112545;
|
|
172
|
+
--vtg-table-row-selected-bg: #111a2c;
|
|
173
|
+
--vtg-table-row-selected-hover-bg: #112545;
|
|
174
|
+
--vtg-table-loading-overlay-bg: rgb(20 20 20 / 40%);
|
|
175
|
+
--vtg-table-empty-image-opacity: 0.65;
|
|
176
|
+
--vtg-table-empty-border-color: #434343;
|
|
177
|
+
--vtg-table-empty-shadow-color: #303030;
|
|
178
|
+
--vtg-table-empty-content-color: #262626;
|
|
179
|
+
}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/* @vtable-guild/theme/css/presets — Element Plus 预设 */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* element-plus preset 自包含：
|
|
5
|
+
* 1. 语义 token — element-plus 设计体系的精确值
|
|
6
|
+
* 2. 组件 token — 100% 引用语义 token，无硬编码颜色
|
|
7
|
+
* 3. .dark — 只覆盖语义 token，组件 token 自动跟随
|
|
8
|
+
*
|
|
9
|
+
* 注意：不使用 :where(:root) 兜底选择器，
|
|
10
|
+
* 仅通过 [data-vtg-preset='element-plus'] 属性激活。
|
|
11
|
+
* antdv 是唯一的默认回退预设。
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
[data-vtg-preset='element-plus'] {
|
|
15
|
+
/* ===== 语义 token — element-plus 设计体系值 ===== */
|
|
16
|
+
|
|
17
|
+
/* 排版 */
|
|
18
|
+
--font-family-base:
|
|
19
|
+
'Helvetica Neue', helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
|
|
20
|
+
arial, sans-serif;
|
|
21
|
+
|
|
22
|
+
/* 表面/背景 */
|
|
23
|
+
--color-surface: #ffffff;
|
|
24
|
+
--color-surface-hover: #f5f7fa;
|
|
25
|
+
--color-elevated: #f5f7fa;
|
|
26
|
+
|
|
27
|
+
/* 文本 */
|
|
28
|
+
--color-on-surface: #303133;
|
|
29
|
+
--color-text-regular: #606266;
|
|
30
|
+
--color-muted: #909399;
|
|
31
|
+
|
|
32
|
+
/* 边框 */
|
|
33
|
+
--color-default: #ebeef5;
|
|
34
|
+
--color-border: #dcdfe6;
|
|
35
|
+
--color-border-hover: #c0c4cc;
|
|
36
|
+
|
|
37
|
+
/* 主题色 */
|
|
38
|
+
--color-primary: #409eff;
|
|
39
|
+
--color-primary-hover: #66b1ff;
|
|
40
|
+
--color-primary-active: #337ecc;
|
|
41
|
+
--color-primary-light-3: #79bbff;
|
|
42
|
+
--color-primary-light-7: #c6e2ff;
|
|
43
|
+
--color-primary-light-9: #ecf5ff;
|
|
44
|
+
|
|
45
|
+
/* ===== 组件 token — 100% 引用语义 token ===== */
|
|
46
|
+
--vtg-table-font-family: var(--font-family-base);
|
|
47
|
+
--vtg-table-bg: var(--color-surface);
|
|
48
|
+
--vtg-table-header-bg: var(--color-surface);
|
|
49
|
+
--vtg-table-header-color: var(--color-muted);
|
|
50
|
+
--vtg-table-text-color: var(--color-text-regular);
|
|
51
|
+
--vtg-table-border-color: var(--color-default);
|
|
52
|
+
--vtg-table-row-hover-bg: var(--color-surface-hover);
|
|
53
|
+
--vtg-table-row-selected-bg: #ecf5ff;
|
|
54
|
+
--vtg-table-row-selected-hover-bg: #d9ecff;
|
|
55
|
+
|
|
56
|
+
/* 尺寸类 token */
|
|
57
|
+
--vtg-table-font-size: 14px;
|
|
58
|
+
--vtg-table-line-height: 23px;
|
|
59
|
+
|
|
60
|
+
/* 三档 size 对应 element-plus 的 large/default/small */
|
|
61
|
+
--vtg-table-cell-padding-inline-lg: 12px;
|
|
62
|
+
--vtg-table-cell-padding-block-lg: 12px;
|
|
63
|
+
--vtg-table-cell-padding-inline-md: 12px;
|
|
64
|
+
--vtg-table-cell-padding-block-md: 8px;
|
|
65
|
+
--vtg-table-cell-padding-inline-sm: 12px;
|
|
66
|
+
--vtg-table-cell-padding-block-sm: 4px;
|
|
67
|
+
|
|
68
|
+
/* 排序 hover 背景 */
|
|
69
|
+
--vtg-table-header-sort-hover-bg: var(--color-surface-hover);
|
|
70
|
+
|
|
71
|
+
/* 排序图标不活跃色（--el-text-color-placeholder） */
|
|
72
|
+
--color-sorter-icon: #a8abb2;
|
|
73
|
+
|
|
74
|
+
/* 筛选图标不活跃色（--el-color-info） */
|
|
75
|
+
--color-filter-icon: #909399;
|
|
76
|
+
|
|
77
|
+
/* 表头 cell 间分割线 — element-plus 无分割线 */
|
|
78
|
+
--vtg-table-header-split-color: transparent;
|
|
79
|
+
|
|
80
|
+
/* 禁用态文字色 */
|
|
81
|
+
--color-text-disabled: #c0c4cc;
|
|
82
|
+
|
|
83
|
+
/* 禁用态背景 */
|
|
84
|
+
--color-bg-disabled: #f5f7fa;
|
|
85
|
+
|
|
86
|
+
/* placeholder 色 */
|
|
87
|
+
--color-text-placeholder: #a8abb2;
|
|
88
|
+
|
|
89
|
+
/* 筛选下拉选项 hover 背景 */
|
|
90
|
+
--color-control-item-hover-bg: #f5f7fa;
|
|
91
|
+
|
|
92
|
+
/* 筛选下拉选项选中态背景 — element-plus 用文字高亮而非背景 */
|
|
93
|
+
--color-control-item-active-bg: #ecf5ff;
|
|
94
|
+
--color-control-item-active-hover-bg: #f5f7fa;
|
|
95
|
+
|
|
96
|
+
/* ===== 基础组件 token — Button / Checkbox / Tooltip ===== */
|
|
97
|
+
--vtg-btn-border-radius: 4px;
|
|
98
|
+
--vtg-btn-border-radius-sm: 3px;
|
|
99
|
+
--vtg-btn-height-sm: 24px;
|
|
100
|
+
--vtg-btn-height-md: 32px;
|
|
101
|
+
--vtg-btn-padding-sm: 7px;
|
|
102
|
+
--vtg-btn-padding-md: 15px;
|
|
103
|
+
--vtg-checkbox-size: 14px;
|
|
104
|
+
--vtg-checkbox-border-radius: 2px;
|
|
105
|
+
--vtg-checkbox-check-color: #ffffff;
|
|
106
|
+
--vtg-checkbox-indeterminate-color: #ffffff;
|
|
107
|
+
--vtg-radio-size: 14px;
|
|
108
|
+
--vtg-radio-dot-size: 6px;
|
|
109
|
+
--vtg-radio-border-width: 1px;
|
|
110
|
+
--vtg-tooltip-bg: #303133;
|
|
111
|
+
--vtg-tooltip-arrow-outer-color: #414243;
|
|
112
|
+
--vtg-tooltip-border-radius: 4px;
|
|
113
|
+
--vtg-tooltip-padding: 5px 11px;
|
|
114
|
+
--vtg-tooltip-font-size: 12px;
|
|
115
|
+
--vtg-tooltip-shadow: 0 0 12px rgb(0 0 0 / 12%);
|
|
116
|
+
|
|
117
|
+
/* Input */
|
|
118
|
+
--vtg-input-border-radius: 4px;
|
|
119
|
+
--vtg-input-height: 24px;
|
|
120
|
+
--vtg-input-padding-inline: 8px;
|
|
121
|
+
--vtg-input-font-size: 12px;
|
|
122
|
+
|
|
123
|
+
/* Loading overlay */
|
|
124
|
+
--vtg-table-loading-overlay-bg: rgb(255 255 255 / 90%);
|
|
125
|
+
|
|
126
|
+
/* Striped 行背景（区别于 hover） */
|
|
127
|
+
--vtg-table-row-striped-bg: #fafafa;
|
|
128
|
+
|
|
129
|
+
/* Scrollbar */
|
|
130
|
+
--vtg-scrollbar-thumb-bg: rgb(144 147 153 / 30%);
|
|
131
|
+
--vtg-scrollbar-thumb-hover-bg: rgb(144 147 153 / 50%);
|
|
132
|
+
--vtg-scrollbar-thumb-width: 6px;
|
|
133
|
+
--vtg-scrollbar-thumb-radius: 4px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.dark [data-vtg-preset='element-plus'],
|
|
137
|
+
[data-vtg-preset='element-plus'].dark {
|
|
138
|
+
/* ===== 语义 token 暗色值 ===== */
|
|
139
|
+
--color-surface: #141414;
|
|
140
|
+
--color-surface-hover: #1a1a1a;
|
|
141
|
+
--color-elevated: #262626;
|
|
142
|
+
--color-on-surface: #e5eaf3;
|
|
143
|
+
--color-text-regular: #cfd3dc;
|
|
144
|
+
--color-muted: #a3a6ad;
|
|
145
|
+
--color-default: #363637;
|
|
146
|
+
--color-border: #4c4d4f;
|
|
147
|
+
--color-border-hover: #636466;
|
|
148
|
+
--color-primary: #409eff;
|
|
149
|
+
--color-primary-hover: #66b1ff;
|
|
150
|
+
--color-primary-active: #337ecc;
|
|
151
|
+
--color-primary-light-3: #3375b9;
|
|
152
|
+
--color-primary-light-7: #1d3043;
|
|
153
|
+
--color-primary-light-9: #18222c;
|
|
154
|
+
|
|
155
|
+
/* 排序 hover 背景 */
|
|
156
|
+
--vtg-table-header-sort-hover-bg: rgb(255 255 255 / 4%);
|
|
157
|
+
|
|
158
|
+
/* 排序图标不活跃色 */
|
|
159
|
+
--color-sorter-icon: #636466;
|
|
160
|
+
|
|
161
|
+
/* 筛选图标不活跃色 */
|
|
162
|
+
--color-filter-icon: #a3a6ad;
|
|
163
|
+
|
|
164
|
+
/* 禁用态文字色 */
|
|
165
|
+
--color-text-disabled: #636466;
|
|
166
|
+
|
|
167
|
+
/* 禁用态背景 */
|
|
168
|
+
--color-bg-disabled: rgb(255 255 255 / 4%);
|
|
169
|
+
|
|
170
|
+
/* placeholder 色 */
|
|
171
|
+
--color-text-placeholder: #636466;
|
|
172
|
+
|
|
173
|
+
/* 筛选下拉选项 hover 背景 */
|
|
174
|
+
--color-control-item-hover-bg: rgb(255 255 255 / 6%);
|
|
175
|
+
|
|
176
|
+
/* 筛选下拉选项选中态 */
|
|
177
|
+
--color-control-item-active-bg: rgb(64 158 255 / 14%);
|
|
178
|
+
--color-control-item-active-hover-bg: rgb(255 255 255 / 6%);
|
|
179
|
+
|
|
180
|
+
/* tooltip */
|
|
181
|
+
--vtg-tooltip-bg: #303133;
|
|
182
|
+
--vtg-tooltip-arrow-outer-color: #4c4d4f;
|
|
183
|
+
--vtg-table-row-selected-bg: #18222c;
|
|
184
|
+
--vtg-table-row-selected-hover-bg: #1d3043;
|
|
185
|
+
|
|
186
|
+
/* Loading overlay */
|
|
187
|
+
--vtg-table-loading-overlay-bg: rgb(20 20 20 / 90%);
|
|
188
|
+
|
|
189
|
+
/* Striped 行背景 */
|
|
190
|
+
--vtg-table-row-striped-bg: #1d1d1d;
|
|
191
|
+
}
|
package/css/tokens.css
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@source '../dist/index.d.ts';
|
|
2
|
+
@source '../dist/index.mjs';
|
|
3
|
+
@source '../src';
|
|
4
|
+
@source '../../table/src';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* @vtable-guild/theme/css — tokens.css */
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* 仅负责 Tailwind CSS 4 主题注册。
|
|
11
|
+
*
|
|
12
|
+
* ⚠️ 不在此文件定义任何 CSS 变量值！
|
|
13
|
+
* 所有值由 preset CSS 提供（如 presets/antdv.css）。
|
|
14
|
+
*
|
|
15
|
+
* 职责：
|
|
16
|
+
* 1. @source — 扫描 dist 目录中的 class 名
|
|
17
|
+
* 2. @theme — 将语义 token 注册为 Tailwind 主题色
|
|
18
|
+
* 使得 bg-surface、text-on-surface 等 utility class 可用
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
@theme {
|
|
22
|
+
--color-surface: var(--color-surface);
|
|
23
|
+
--color-surface-hover: var(--color-surface-hover);
|
|
24
|
+
--color-elevated: var(--color-elevated);
|
|
25
|
+
--color-on-surface: var(--color-on-surface);
|
|
26
|
+
--color-muted: var(--color-muted);
|
|
27
|
+
--color-default: var(--color-default);
|
|
28
|
+
--color-primary: var(--color-primary);
|
|
29
|
+
--color-primary-hover: var(--color-primary-hover);
|
|
30
|
+
--color-text-disabled: var(--color-text-disabled);
|
|
31
|
+
--color-control-item-hover-bg: var(--color-control-item-hover-bg);
|
|
32
|
+
--color-control-item-active-bg: var(--color-control-item-active-bg);
|
|
33
|
+
--color-control-item-active-hover-bg: var(--color-control-item-active-hover-bg);
|
|
34
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* ===== 下拉菜单过渡（FilterDropdown / SelectionDropdown） ===== */
|
|
2
|
+
|
|
3
|
+
.vtg-dropdown-enter-active,
|
|
4
|
+
.vtg-dropdown-leave-active {
|
|
5
|
+
transition:
|
|
6
|
+
opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
7
|
+
transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
8
|
+
transform-origin: top center;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.vtg-dropdown-enter-from,
|
|
12
|
+
.vtg-dropdown-leave-to {
|
|
13
|
+
opacity: 0;
|
|
14
|
+
transform: scaleY(0.8);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.vtg-dropdown-enter-to,
|
|
18
|
+
.vtg-dropdown-leave-from {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
transform: scaleY(1);
|
|
21
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/* @vtable-guild/theme/css — 默认入口 */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* 引入顺序：
|
|
5
|
+
* 1. tokens.css — 注册 Tailwind 主题色（@theme），不含值定义
|
|
6
|
+
* 2. presets/*.css — 所有主题预设（antdv 为默认回退，其余通过 data-vtg-preset 属性激活）
|
|
7
|
+
*
|
|
8
|
+
* 使用方只需 `@import '@vtable-guild/theme/css'`，
|
|
9
|
+
* 然后在 JS 侧通过 createVTableGuild({ themePreset: 'element-plus' }) 切换预设。
|
|
10
|
+
* 新增主题只需在此添加一行 @import 即可。
|
|
11
|
+
*/
|
|
12
|
+
@import './tokens.css';
|
|
13
|
+
@import './presets/antdv.css';
|
|
14
|
+
@import './presets/element-plus.css';
|
|
15
|
+
@import './transitions.css';
|
|
16
|
+
|
|
17
|
+
/* Hide native scrollbar — used by Scrollbar component */
|
|
18
|
+
.scrollbar-none {
|
|
19
|
+
scrollbar-width: none;
|
|
20
|
+
-ms-overflow-style: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.scrollbar-none::-webkit-scrollbar {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* ---- antdv Spin Dot indicator ---- */
|
|
28
|
+
@keyframes vtg-spin-rotate {
|
|
29
|
+
to {
|
|
30
|
+
transform: rotate(405deg);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes vtg-spin-move {
|
|
35
|
+
to {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.vtg-spin-dot {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
width: 20px;
|
|
44
|
+
height: 20px;
|
|
45
|
+
transform: rotate(45deg);
|
|
46
|
+
animation: vtg-spin-rotate 1.2s infinite linear;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.vtg-spin-dot-item {
|
|
50
|
+
position: absolute;
|
|
51
|
+
display: block;
|
|
52
|
+
width: 9px;
|
|
53
|
+
height: 9px;
|
|
54
|
+
background-color: currentcolor;
|
|
55
|
+
border-radius: 100%;
|
|
56
|
+
transform: scale(0.75);
|
|
57
|
+
transform-origin: 50% 50%;
|
|
58
|
+
opacity: 0.3;
|
|
59
|
+
animation: vtg-spin-move 1s infinite linear alternate;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.vtg-spin-dot-item:nth-child(1) {
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.vtg-spin-dot-item:nth-child(2) {
|
|
68
|
+
top: 0;
|
|
69
|
+
right: 0;
|
|
70
|
+
animation-delay: 0.4s;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.vtg-spin-dot-item:nth-child(3) {
|
|
74
|
+
right: 0;
|
|
75
|
+
bottom: 0;
|
|
76
|
+
animation-delay: 0.8s;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.vtg-spin-dot-item:nth-child(4) {
|
|
80
|
+
bottom: 0;
|
|
81
|
+
left: 0;
|
|
82
|
+
animation-delay: 1.2s;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Tooltip transition */
|
|
86
|
+
.vtg-tooltip-enter-active,
|
|
87
|
+
.vtg-tooltip-leave-active {
|
|
88
|
+
transition:
|
|
89
|
+
opacity 0.15s ease,
|
|
90
|
+
transform 0.15s ease;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.vtg-tooltip-enter-from,
|
|
94
|
+
.vtg-tooltip-leave-to {
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: scale(0.8);
|
|
97
|
+
}
|