@vtable-guild/vtable-guild 2.0.4 → 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/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/tokens.css +5 -4
- package/dist/index.d.ts +12 -12
- package/dist/index.mjs +911 -908
- package/package.json +13 -12
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
|
+
}
|
package/dist/css/tokens.css
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
@source '../
|
|
2
|
-
@source '
|
|
3
|
-
@source '../../
|
|
4
|
-
@source '../../
|
|
1
|
+
@source '../index.d.ts';
|
|
2
|
+
@source '../index.mjs';
|
|
3
|
+
@source '../../src';
|
|
4
|
+
@source '../../table/src';
|
|
5
|
+
|
|
5
6
|
|
|
6
7
|
/* @vtable-guild/theme/css — tokens.css */
|
|
7
8
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1557,7 +1557,7 @@ export declare const tableTheme: {
|
|
|
1557
1557
|
readonly loading: string;
|
|
1558
1558
|
readonly headerCellInner: "flex items-center";
|
|
1559
1559
|
readonly bodyCellEllipsis: "block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap";
|
|
1560
|
-
readonly thSortable: "cursor-pointer select-none hover:bg-[var(--vtg-table-header-sort-hover-bg)]";
|
|
1560
|
+
readonly thSortable: "cursor-pointer select-none hover:bg-[color:var(--vtg-table-header-sort-hover-bg)]";
|
|
1561
1561
|
readonly sortButton: "inline-flex flex-col items-center justify-center text-xs leading-none ml-1";
|
|
1562
1562
|
readonly sortIconDown: "-mt-[0.225em]";
|
|
1563
1563
|
readonly sortAreaOuter: "flex flex-auto min-w-0";
|
|
@@ -1591,15 +1591,15 @@ export declare const tableTheme: {
|
|
|
1591
1591
|
readonly emptyIcon: string;
|
|
1592
1592
|
readonly emptyText: "m-0 text-[length:var(--vtg-table-font-size)] leading-[var(--vtg-table-line-height)] text-[color:var(--color-text-disabled)]";
|
|
1593
1593
|
readonly loadingSpinner: "inline-flex items-center justify-center text-[length:20px] leading-none text-[color:var(--color-primary)]";
|
|
1594
|
-
readonly tdSelected: "bg-[var(--vtg-table-row-selected-bg)]";
|
|
1595
|
-
readonly tdSelectedHover: "group-hover/row:bg-[var(--vtg-table-row-selected-hover-bg)]";
|
|
1594
|
+
readonly tdSelected: "bg-[color:var(--vtg-table-row-selected-bg)]";
|
|
1595
|
+
readonly tdSelectedHover: "group-hover/row:bg-[color:var(--vtg-table-row-selected-hover-bg)]";
|
|
1596
1596
|
readonly selectionDropdown: string;
|
|
1597
1597
|
readonly selectionDropdownItem: "flex items-center cursor-pointer px-3 py-[5px] rounded-sm hover:bg-[color:var(--color-control-item-hover-bg)]";
|
|
1598
1598
|
readonly selectionExtra: "inline-flex items-center justify-center cursor-pointer ml-0.5 text-[10px] text-[color:var(--color-sorter-icon)] hover:text-[color:var(--color-primary)] transition-colors";
|
|
1599
1599
|
readonly title: string;
|
|
1600
1600
|
readonly footer: string;
|
|
1601
1601
|
readonly summary: "";
|
|
1602
|
-
readonly summaryRow: "bg-[var(--vtg-table-header-bg)]";
|
|
1602
|
+
readonly summaryRow: "bg-[color:var(--vtg-table-header-bg)]";
|
|
1603
1603
|
readonly summaryCell: string;
|
|
1604
1604
|
readonly headerWrapper: "overflow-hidden";
|
|
1605
1605
|
readonly bodyWrapper: "overflow-auto";
|
|
@@ -1627,7 +1627,7 @@ export declare const tableTheme: {
|
|
|
1627
1627
|
readonly treeExpandIconSymbolExpanded: "";
|
|
1628
1628
|
readonly treeExpandIconSymbolCollapsed: "";
|
|
1629
1629
|
readonly expandedRow: "";
|
|
1630
|
-
readonly expandedRowCell: "bg-[var(--vtg-table-expanded-row-bg,#fafafa)]";
|
|
1630
|
+
readonly expandedRowCell: "bg-[color:var(--vtg-table-expanded-row-bg,#fafafa)]";
|
|
1631
1631
|
readonly resizeHandle: "";
|
|
1632
1632
|
};
|
|
1633
1633
|
readonly variants: {
|
|
@@ -1638,14 +1638,14 @@ export declare const tableTheme: {
|
|
|
1638
1638
|
};
|
|
1639
1639
|
readonly bordered: {
|
|
1640
1640
|
readonly true: {
|
|
1641
|
-
readonly root: "border border-[var(--vtg-table-border-color)] rounded-[8px] overflow-hidden";
|
|
1641
|
+
readonly root: "border border-[color:var(--vtg-table-border-color)] rounded-[8px] overflow-hidden";
|
|
1642
1642
|
readonly table: "";
|
|
1643
|
-
readonly th: "border-r border-[var(--vtg-table-border-color)] last:border-r-0 before:hidden";
|
|
1644
|
-
readonly td: "border-r border-[var(--vtg-table-border-color)] last:border-r-0";
|
|
1643
|
+
readonly th: "border-r border-[color:var(--vtg-table-border-color)] last:border-r-0 before:hidden";
|
|
1644
|
+
readonly td: "border-r border-[color:var(--vtg-table-border-color)] last:border-r-0";
|
|
1645
1645
|
readonly tbody: "[&>tr:last-child>td]:border-b-0";
|
|
1646
|
-
readonly title: "border-b border-[var(--vtg-table-border-color)]";
|
|
1647
|
-
readonly footer: "border-t border-[var(--vtg-table-border-color)]";
|
|
1648
|
-
readonly summaryCell: "border-r border-[var(--vtg-table-border-color)] last:border-r-0";
|
|
1646
|
+
readonly title: "border-b border-[color:var(--vtg-table-border-color)]";
|
|
1647
|
+
readonly footer: "border-t border-[color:var(--vtg-table-border-color)]";
|
|
1648
|
+
readonly summaryCell: "border-r border-[color:var(--vtg-table-border-color)] last:border-r-0";
|
|
1649
1649
|
};
|
|
1650
1650
|
};
|
|
1651
1651
|
readonly striped: {
|
|
@@ -1655,7 +1655,7 @@ export declare const tableTheme: {
|
|
|
1655
1655
|
};
|
|
1656
1656
|
readonly hoverable: {
|
|
1657
1657
|
readonly true: {
|
|
1658
|
-
readonly td: "group-hover/row:bg-[var(--vtg-table-row-hover-bg)]";
|
|
1658
|
+
readonly td: "group-hover/row:bg-[color:var(--vtg-table-row-hover-bg)]";
|
|
1659
1659
|
};
|
|
1660
1660
|
};
|
|
1661
1661
|
readonly loading: {
|