@lingxiteam/theme-utils 0.6.0 → 0.6.1
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 +142 -142
- package/dist/config/Container.d.ts +3 -0
- package/dist/config/Container.js +2 -1
- package/dist/config/Table.d.ts +30 -0
- package/dist/config/Table.js +32 -6
- package/dist/h5config/Table.d.ts +135 -0
- package/dist/h5config/Table.js +33 -7
- package/dist/utils.js +8 -8
- package/package.json +38 -38
package/README.md
CHANGED
|
@@ -1,142 +1,142 @@
|
|
|
1
|
-
# @lingxiteam/theme-utils
|
|
2
|
-
|
|
3
|
-
antd@4 theme class utils, css utils
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
pnpm i @lingxiteam/theme-utils
|
|
7
|
-
|
|
8
|
-
import {} from '@lingxiteam/theme-utils';
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
新建场景描述:
|
|
12
|
-
|
|
13
|
-
1、通过编辑页面 form 得到,theme 的对象 如 { backgroundColor:'red',fontSize:'12px'} 2、根据模版 '.cc{ background-color: backgroundColor; font-size: fontSize;}' 解析 css 3、得到最终 css '.cc{ background-color:red; font-size:12px;bor:123}' 4、将最终 css 提交到服务端
|
|
14
|
-
|
|
15
|
-
编辑场景描述:
|
|
16
|
-
|
|
17
|
-
1、从服务端取得 css 2、根据模版将 css 中的对象取出 { backgroundColor:'red',fontSize:'12px'} 3、将对象赋值到编辑页面 form 4、重复新建场景
|
|
18
|
-
|
|
19
|
-
预览场景描述:
|
|
20
|
-
|
|
21
|
-
1、每次编辑都会实时的生成 css 2、通过 normalizeCSS(css,'#previewId') 将 css 作用到指定 id dom 下 ' #previewId { .cc{ background-color:red; font-size:12px; }}' 3、通过 insertRules('12312', css, document.getElementById('previewId')); 将 style 挂载到预览 dom 上 4、挂载的样式仅会对预览生效
|
|
22
|
-
|
|
23
|
-
使用场景描述:
|
|
24
|
-
|
|
25
|
-
1、通过 insertLink('12312', 'http://xxx.css',true); 在页面上加载所有的生成的 css,将会对所有的场景生效。
|
|
26
|
-
|
|
27
|
-
## stringifyCss
|
|
28
|
-
|
|
29
|
-
根据指定模版,将对象的值解析道模版中,生成最终的 css 字符串
|
|
30
|
-
|
|
31
|
-
```js
|
|
32
|
-
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
|
|
33
|
-
const a = { backgroundColor: 'red', fontSize: '12px' };
|
|
34
|
-
const c = stringifyCss(tpl, a);
|
|
35
|
-
console.log(c); // .cc{ background-color:red; font-size:12px;}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## parseCss
|
|
39
|
-
|
|
40
|
-
根据指定模版,将值从 css 字符串中解析成对象
|
|
41
|
-
|
|
42
|
-
```js
|
|
43
|
-
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
|
|
44
|
-
const a = '.cc{ background-color:red; font-size:12px;}';
|
|
45
|
-
const c = parseCss(tpl, a);
|
|
46
|
-
console.log(c); // { backgroundColor:'red',fontSize:'12px'}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## normalizeCSS
|
|
50
|
-
|
|
51
|
-
编译 css 且支持给 css 提供指定的选择器,如
|
|
52
|
-
|
|
53
|
-
```js
|
|
54
|
-
const a = '.a{ .b{ font-size:12px; } }';
|
|
55
|
-
|
|
56
|
-
const css = normalizeCSS(a);
|
|
57
|
-
|
|
58
|
-
console.log(css);
|
|
59
|
-
|
|
60
|
-
// output: '.a .b{font-size:12px;}'
|
|
61
|
-
|
|
62
|
-
const css1 = normalizeCSS(a, '.cc');
|
|
63
|
-
console.log(css1);
|
|
64
|
-
// output: '.cc .a .b{font-size:12px;}'
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## insertRules
|
|
68
|
-
|
|
69
|
-
将 css 挂载到页面上 `insertRules(id: string, rules: string,selector = document.head,);` 指定 id,会覆盖生产的 style 标签
|
|
70
|
-
|
|
71
|
-
```js
|
|
72
|
-
insertRules('12312', css);
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## insertLink
|
|
76
|
-
|
|
77
|
-
挂载指定的 css link `insertLink(id: string, href: string, insertBefore = false)`
|
|
78
|
-
|
|
79
|
-
可选择指定挂在在 body.firstElementChild 还是 head 中
|
|
80
|
-
|
|
81
|
-
```js
|
|
82
|
-
insertLink('12312', 'http://xxx.css', true);
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
## 关于配置
|
|
86
|
-
|
|
87
|
-
```ts
|
|
88
|
-
{
|
|
89
|
-
type: '类型',
|
|
90
|
-
// 所有的 css 有一个父级类名,理论上每一个都需要这个配置,是为了兼容第一版本的数据,因为组件太多,要全部重写一遍需要工作量,所以只修改了异常的组件
|
|
91
|
-
hasPrefixClass: true,
|
|
92
|
-
// 隐藏自定义类名按钮,当前只有pc端容器
|
|
93
|
-
hiddenCustomCss: true,
|
|
94
|
-
variable: {
|
|
95
|
-
// 允许配置项
|
|
96
|
-
fontSize: {
|
|
97
|
-
// 对应编辑器的类型,px color select marginInput 四种
|
|
98
|
-
type: 'px',
|
|
99
|
-
label: '尺寸',
|
|
100
|
-
groupsName: '文字' ,
|
|
101
|
-
desc: '说明文字',
|
|
102
|
-
// 继承其他组件属性时要标记不可编辑
|
|
103
|
-
canEdit: false,
|
|
104
|
-
// 编辑从什么地方支撑这个属性
|
|
105
|
-
extendsKey: 'Form',
|
|
106
|
-
// 表示这个字段跟随全局主题变量
|
|
107
|
-
followTheme: '@font-size-base',
|
|
108
|
-
// 是否隐藏,用于取全局变量,但是不允许用户修改的情况,如表单边框激活颜色
|
|
109
|
-
hidden: false,
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
|
-
groupsName: '分组名称',
|
|
113
|
-
icon: '图标名称要和组件库对应上',
|
|
114
|
-
title: '标题',
|
|
115
|
-
defaultValue: [
|
|
116
|
-
{
|
|
117
|
-
// 上面定义的配置项的默认值
|
|
118
|
-
fontSize: '14px',
|
|
119
|
-
},
|
|
120
|
-
],
|
|
121
|
-
// 是否跟随主题的开关,存在表示当前为跟随
|
|
122
|
-
followThemes: {
|
|
123
|
-
'@font-size-base': ['fontSize'],
|
|
124
|
-
},
|
|
125
|
-
// 根据上面的配置项和下面的模版解析得到最终挂在的 css
|
|
126
|
-
tpl: '.hh { font-size: fontSize}',
|
|
127
|
-
// 如果它被别人继承,并且自己需要自定义样式,如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
|
|
128
|
-
itemCustomTpl: '',
|
|
129
|
-
// 预览用数据,编辑器中推拽出来的 dsl ,可直接复制,View 下的 components,维护时如预览页面有变更,可直接替换这个数据,无需详细比对
|
|
130
|
-
components: [],
|
|
131
|
-
};
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### 关于继承
|
|
135
|
-
|
|
136
|
-
因为继承在预览和自定义样式时需要先加载父级的样式,所以需要在工具中写明哪些组件需要先获取。
|
|
137
|
-
|
|
138
|
-
如: theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
|
|
139
|
-
|
|
140
|
-
```ts
|
|
141
|
-
const extend: any = {};
|
|
142
|
-
```
|
|
1
|
+
# @lingxiteam/theme-utils
|
|
2
|
+
|
|
3
|
+
antd@4 theme class utils, css utils
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
pnpm i @lingxiteam/theme-utils
|
|
7
|
+
|
|
8
|
+
import {} from '@lingxiteam/theme-utils';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
新建场景描述:
|
|
12
|
+
|
|
13
|
+
1、通过编辑页面 form 得到,theme 的对象 如 { backgroundColor:'red',fontSize:'12px'} 2、根据模版 '.cc{ background-color: backgroundColor; font-size: fontSize;}' 解析 css 3、得到最终 css '.cc{ background-color:red; font-size:12px;bor:123}' 4、将最终 css 提交到服务端
|
|
14
|
+
|
|
15
|
+
编辑场景描述:
|
|
16
|
+
|
|
17
|
+
1、从服务端取得 css 2、根据模版将 css 中的对象取出 { backgroundColor:'red',fontSize:'12px'} 3、将对象赋值到编辑页面 form 4、重复新建场景
|
|
18
|
+
|
|
19
|
+
预览场景描述:
|
|
20
|
+
|
|
21
|
+
1、每次编辑都会实时的生成 css 2、通过 normalizeCSS(css,'#previewId') 将 css 作用到指定 id dom 下 ' #previewId { .cc{ background-color:red; font-size:12px; }}' 3、通过 insertRules('12312', css, document.getElementById('previewId')); 将 style 挂载到预览 dom 上 4、挂载的样式仅会对预览生效
|
|
22
|
+
|
|
23
|
+
使用场景描述:
|
|
24
|
+
|
|
25
|
+
1、通过 insertLink('12312', 'http://xxx.css',true); 在页面上加载所有的生成的 css,将会对所有的场景生效。
|
|
26
|
+
|
|
27
|
+
## stringifyCss
|
|
28
|
+
|
|
29
|
+
根据指定模版,将对象的值解析道模版中,生成最终的 css 字符串
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
|
|
33
|
+
const a = { backgroundColor: 'red', fontSize: '12px' };
|
|
34
|
+
const c = stringifyCss(tpl, a);
|
|
35
|
+
console.log(c); // .cc{ background-color:red; font-size:12px;}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## parseCss
|
|
39
|
+
|
|
40
|
+
根据指定模版,将值从 css 字符串中解析成对象
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
|
|
44
|
+
const a = '.cc{ background-color:red; font-size:12px;}';
|
|
45
|
+
const c = parseCss(tpl, a);
|
|
46
|
+
console.log(c); // { backgroundColor:'red',fontSize:'12px'}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## normalizeCSS
|
|
50
|
+
|
|
51
|
+
编译 css 且支持给 css 提供指定的选择器,如
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
const a = '.a{ .b{ font-size:12px; } }';
|
|
55
|
+
|
|
56
|
+
const css = normalizeCSS(a);
|
|
57
|
+
|
|
58
|
+
console.log(css);
|
|
59
|
+
|
|
60
|
+
// output: '.a .b{font-size:12px;}'
|
|
61
|
+
|
|
62
|
+
const css1 = normalizeCSS(a, '.cc');
|
|
63
|
+
console.log(css1);
|
|
64
|
+
// output: '.cc .a .b{font-size:12px;}'
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## insertRules
|
|
68
|
+
|
|
69
|
+
将 css 挂载到页面上 `insertRules(id: string, rules: string,selector = document.head,);` 指定 id,会覆盖生产的 style 标签
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
insertRules('12312', css);
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## insertLink
|
|
76
|
+
|
|
77
|
+
挂载指定的 css link `insertLink(id: string, href: string, insertBefore = false)`
|
|
78
|
+
|
|
79
|
+
可选择指定挂在在 body.firstElementChild 还是 head 中
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
insertLink('12312', 'http://xxx.css', true);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 关于配置
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
{
|
|
89
|
+
type: '类型',
|
|
90
|
+
// 所有的 css 有一个父级类名,理论上每一个都需要这个配置,是为了兼容第一版本的数据,因为组件太多,要全部重写一遍需要工作量,所以只修改了异常的组件
|
|
91
|
+
hasPrefixClass: true,
|
|
92
|
+
// 隐藏自定义类名按钮,当前只有pc端容器
|
|
93
|
+
hiddenCustomCss: true,
|
|
94
|
+
variable: {
|
|
95
|
+
// 允许配置项
|
|
96
|
+
fontSize: {
|
|
97
|
+
// 对应编辑器的类型,px color select marginInput 四种
|
|
98
|
+
type: 'px',
|
|
99
|
+
label: '尺寸',
|
|
100
|
+
groupsName: '文字' ,
|
|
101
|
+
desc: '说明文字',
|
|
102
|
+
// 继承其他组件属性时要标记不可编辑
|
|
103
|
+
canEdit: false,
|
|
104
|
+
// 编辑从什么地方支撑这个属性
|
|
105
|
+
extendsKey: 'Form',
|
|
106
|
+
// 表示这个字段跟随全局主题变量
|
|
107
|
+
followTheme: '@font-size-base',
|
|
108
|
+
// 是否隐藏,用于取全局变量,但是不允许用户修改的情况,如表单边框激活颜色
|
|
109
|
+
hidden: false,
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
groupsName: '分组名称',
|
|
113
|
+
icon: '图标名称要和组件库对应上',
|
|
114
|
+
title: '标题',
|
|
115
|
+
defaultValue: [
|
|
116
|
+
{
|
|
117
|
+
// 上面定义的配置项的默认值
|
|
118
|
+
fontSize: '14px',
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
// 是否跟随主题的开关,存在表示当前为跟随
|
|
122
|
+
followThemes: {
|
|
123
|
+
'@font-size-base': ['fontSize'],
|
|
124
|
+
},
|
|
125
|
+
// 根据上面的配置项和下面的模版解析得到最终挂在的 css
|
|
126
|
+
tpl: '.hh { font-size: fontSize}',
|
|
127
|
+
// 如果它被别人继承,并且自己需要自定义样式,如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
|
|
128
|
+
itemCustomTpl: '',
|
|
129
|
+
// 预览用数据,编辑器中推拽出来的 dsl ,可直接复制,View 下的 components,维护时如预览页面有变更,可直接替换这个数据,无需详细比对
|
|
130
|
+
components: [],
|
|
131
|
+
};
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### 关于继承
|
|
135
|
+
|
|
136
|
+
因为继承在预览和自定义样式时需要先加载父级的样式,所以需要在工具中写明哪些组件需要先获取。
|
|
137
|
+
|
|
138
|
+
如: theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
const extend: any = {};
|
|
142
|
+
```
|
|
@@ -122,6 +122,7 @@ export declare const Container: {
|
|
|
122
122
|
showCustom?: undefined;
|
|
123
123
|
customNum?: undefined;
|
|
124
124
|
rowKey?: undefined;
|
|
125
|
+
headIconType?: undefined;
|
|
125
126
|
};
|
|
126
127
|
style: {
|
|
127
128
|
padding: string;
|
|
@@ -184,6 +185,7 @@ export declare const Container: {
|
|
|
184
185
|
showCustom?: undefined;
|
|
185
186
|
customNum?: undefined;
|
|
186
187
|
rowKey?: undefined;
|
|
188
|
+
headIconType?: undefined;
|
|
187
189
|
};
|
|
188
190
|
style: {
|
|
189
191
|
width: string;
|
|
@@ -278,6 +280,7 @@ export declare const Container: {
|
|
|
278
280
|
};
|
|
279
281
|
customNum: number;
|
|
280
282
|
rowKey: string;
|
|
283
|
+
headIconType: string;
|
|
281
284
|
cardIconType?: undefined;
|
|
282
285
|
title?: undefined;
|
|
283
286
|
subTitle?: undefined;
|
package/dist/config/Container.js
CHANGED
package/dist/config/Table.d.ts
CHANGED
|
@@ -148,6 +148,22 @@ export declare const Table: {
|
|
|
148
148
|
groupsName: string;
|
|
149
149
|
followTheme: string;
|
|
150
150
|
};
|
|
151
|
+
tagColor: {
|
|
152
|
+
type: string;
|
|
153
|
+
label: string;
|
|
154
|
+
groupsName: string;
|
|
155
|
+
followTheme: string;
|
|
156
|
+
};
|
|
157
|
+
tagSize: {
|
|
158
|
+
type: string;
|
|
159
|
+
label: string;
|
|
160
|
+
groupsName: string;
|
|
161
|
+
};
|
|
162
|
+
tagMargin: {
|
|
163
|
+
type: string;
|
|
164
|
+
label: string;
|
|
165
|
+
groupsName: string;
|
|
166
|
+
};
|
|
151
167
|
};
|
|
152
168
|
groupsName: string;
|
|
153
169
|
icon: string;
|
|
@@ -170,6 +186,9 @@ export declare const Table: {
|
|
|
170
186
|
bodyTextColor: string;
|
|
171
187
|
bodyTextAlign: string;
|
|
172
188
|
zebraBgColor: string;
|
|
189
|
+
tagColor: string;
|
|
190
|
+
tagSize: string;
|
|
191
|
+
tagMargin: string;
|
|
173
192
|
}[];
|
|
174
193
|
followThemes: {
|
|
175
194
|
'@primary-color': string[];
|
|
@@ -227,6 +246,11 @@ export declare const Table: {
|
|
|
227
246
|
dataSource: string;
|
|
228
247
|
basicStatus: number;
|
|
229
248
|
headExtends: never[];
|
|
249
|
+
headIconType: string;
|
|
250
|
+
headPrefixIcon: {
|
|
251
|
+
prefixIconTheme: string;
|
|
252
|
+
prefixIconType: string;
|
|
253
|
+
};
|
|
230
254
|
};
|
|
231
255
|
style: {
|
|
232
256
|
margin: string;
|
|
@@ -306,6 +330,8 @@ export declare const Table: {
|
|
|
306
330
|
dataSource: string;
|
|
307
331
|
basicStatus: number;
|
|
308
332
|
headExtends: never[];
|
|
333
|
+
headIconType: string;
|
|
334
|
+
headPrefixIcon?: undefined;
|
|
309
335
|
};
|
|
310
336
|
style: {
|
|
311
337
|
margin: string;
|
|
@@ -385,6 +411,8 @@ export declare const Table: {
|
|
|
385
411
|
dataSource: string;
|
|
386
412
|
basicStatus: number;
|
|
387
413
|
headExtends: never[];
|
|
414
|
+
headIconType: string;
|
|
415
|
+
headPrefixIcon?: undefined;
|
|
388
416
|
};
|
|
389
417
|
style: {
|
|
390
418
|
margin?: undefined;
|
|
@@ -453,6 +481,8 @@ export declare const Table: {
|
|
|
453
481
|
extend?: undefined;
|
|
454
482
|
dataSource?: undefined;
|
|
455
483
|
headExtends?: undefined;
|
|
484
|
+
headIconType?: undefined;
|
|
485
|
+
headPrefixIcon?: undefined;
|
|
456
486
|
};
|
|
457
487
|
style: {
|
|
458
488
|
textAlign: string;
|
package/dist/config/Table.js
CHANGED
|
@@ -224,6 +224,22 @@ export var Table = {
|
|
|
224
224
|
label: '分页边框颜色',
|
|
225
225
|
groupsName: '其他',
|
|
226
226
|
followTheme: '@primary-color'
|
|
227
|
+
},
|
|
228
|
+
tagColor: {
|
|
229
|
+
type: 'color',
|
|
230
|
+
label: '装饰符颜色',
|
|
231
|
+
groupsName: '其他',
|
|
232
|
+
followTheme: '@primary-color'
|
|
233
|
+
},
|
|
234
|
+
tagSize: {
|
|
235
|
+
type: 'px',
|
|
236
|
+
label: '装饰符尺寸',
|
|
237
|
+
groupsName: '其他'
|
|
238
|
+
},
|
|
239
|
+
tagMargin: {
|
|
240
|
+
type: 'marginInput',
|
|
241
|
+
label: '装饰符外边距',
|
|
242
|
+
groupsName: '其他'
|
|
227
243
|
}
|
|
228
244
|
},
|
|
229
245
|
groupsName: '数据展示',
|
|
@@ -248,16 +264,19 @@ export var Table = {
|
|
|
248
264
|
bodyFontWeight: '400',
|
|
249
265
|
bodyTextColor: '#1c242e',
|
|
250
266
|
bodyTextAlign: 'left',
|
|
251
|
-
zebraBgColor: '#fbfbfb'
|
|
267
|
+
zebraBgColor: '#fbfbfb',
|
|
268
|
+
tagColor: '#47e',
|
|
269
|
+
tagSize: '16px',
|
|
270
|
+
tagMargin: '0px 8px 0px 8px'
|
|
252
271
|
}],
|
|
253
272
|
followThemes: {
|
|
254
|
-
'@primary-color': ['selectPaginationColor', 'selectPaginationBorder'],
|
|
273
|
+
'@primary-color': ['tagColor', 'selectPaginationColor', 'selectPaginationBorder'],
|
|
255
274
|
'@font-size-base': ['tbFontSize'],
|
|
256
275
|
'@text-color': [],
|
|
257
276
|
'@border-radius-base': [],
|
|
258
277
|
'@border-color-base': []
|
|
259
278
|
},
|
|
260
|
-
tpl: ".ued-table-wrap {\n .ued-control-line-number{\n line-height: tbFontSize !important;\n max-height: tbFontSize !important;\n }\n .pcfactory-table{\n font-size: tbFontSize;\n }\n .pcfactory-table-tbody{\n background: bodyBgColor;\n }\n .ued-table .pcfactory-table table {\n border-radius: tbBorderRadius;\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-thead > tr:first-child > th:first-child{\n border-top-left-radius: tbBorderRadius;\n }\n .ued-table .pcfactory-table-thead > tr:first-child > th:last-child{\n border-top-right-radius: tbBorderRadius;\n }\n .ued-table .pcfactory-table table .pcfactory-table-thead th {\n background: headBgColor;\n padding: headPadding;\n color: headTextColor;\n font-weight: headFontWeight;\n }\n .ued-table .pcfactory-table table .pcfactory-table-thead th:not(.pcfactory-table-selection-column) {\n text-align: headTextAlign;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table-filters .ued-table .pcfactory-table-thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table-filters .ued-table .pcfactory-table-tbody>tr>td{\n border-color: tbBorderColor;\n padding: bodyPadding;\n color: bodyTextColor;\n font-weight: bodyFontWeight;\n }\n .ued-table-filters .ued-table .pcfactory-table-tbody>tr>td:not(.pcfactory-table-selection-column){\n text-align: bodyTextAlign;\n }\n .ued-table .pcfactory-table-tbody>tr>td{\n border-color: tbBorderColor;\n padding: bodyPadding;\n color: bodyTextColor;\n font-weight: bodyFontWeight;\n }\n .ued-table .pcfactory-table-tbody>tr>td:not(.pcfactory-table-selection-column){\n text-align: bodyTextAlign;\n }\n .ued-table-filters .ued-table .pcfactory-table-bordered{\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-bordered{\n border-color: tbBorderColor;\n border-radius: tbBorderRadius;\n }\n .ued-table-filters .ued-table-page .pcfactory-pagination-item-active{\n background: selectPaginationColor;\n }\n .ued-table-page .pcfactory-pagination-item-active{\n background: selectPaginationColor;\n border-style: solid;\n border-width: 1px;\n }\n .ued-table-page .pcfactory-pagination-item{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-item-link{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-options .pcfactory-select .pcfactory-select-selector{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-options .pcfactory-pagination-options-quick-jumper input{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-filters .ued-table-zebra-stripe .pcfactory-table-row:nth-child(2n){\n background: zebraBgColor;\n }\n .ued-table-zebra-stripe .pcfactory-table-row:nth-child(2n){\n background: zebraBgColor;\n }\n}",
|
|
279
|
+
tpl: ".ued-table-wrap {\n .ued-control-line-number{\n line-height: tbFontSize !important;\n max-height: tbFontSize !important;\n }\n .pcfactory-table{\n font-size: tbFontSize;\n }\n .pcfactory-table-tbody{\n background: bodyBgColor;\n }\n .ued-table .pcfactory-table table {\n border-radius: tbBorderRadius;\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-thead > tr:first-child > th:first-child{\n border-top-left-radius: tbBorderRadius;\n }\n .ued-table .pcfactory-table-thead > tr:first-child > th:last-child{\n border-top-right-radius: tbBorderRadius;\n }\n .ued-table .pcfactory-table table .pcfactory-table-thead th {\n background: headBgColor;\n padding: headPadding;\n color: headTextColor;\n font-weight: headFontWeight;\n }\n .ued-table .pcfactory-table table .pcfactory-table-thead th:not(.pcfactory-table-selection-column) {\n text-align: headTextAlign;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-body>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-header>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tbody>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tfoot>tr>td{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>tfoot>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-summary>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .pcfactory-table.pcfactory-table-bordered>.pcfactory-table-container>.pcfactory-table-content>table>thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table-filters .ued-table .pcfactory-table-thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-thead>tr>th{\n border-color: tbBorderColor;\n }\n .ued-table-filters .ued-table .pcfactory-table-tbody>tr>td{\n border-color: tbBorderColor;\n padding: bodyPadding;\n color: bodyTextColor;\n font-weight: bodyFontWeight;\n }\n .ued-table-filters .ued-table .pcfactory-table-tbody>tr>td:not(.pcfactory-table-selection-column){\n text-align: bodyTextAlign;\n }\n .ued-table .pcfactory-table-tbody>tr>td{\n border-color: tbBorderColor;\n padding: bodyPadding;\n color: bodyTextColor;\n font-weight: bodyFontWeight;\n }\n .ued-table .pcfactory-table-tbody>tr>td:not(.pcfactory-table-selection-column){\n text-align: bodyTextAlign;\n }\n .ued-table-filters .ued-table .pcfactory-table-bordered{\n border-color: tbBorderColor;\n }\n .ued-table .pcfactory-table-bordered{\n border-color: tbBorderColor;\n border-radius: tbBorderRadius;\n }\n .ued-table-filters .ued-table-page .pcfactory-pagination-item-active{\n background: selectPaginationColor;\n }\n .ued-table-page .pcfactory-pagination-item-active{\n background: selectPaginationColor;\n border-style: solid;\n border-width: 1px;\n }\n .ued-table-page .pcfactory-pagination-item{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-item-link{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-options .pcfactory-select .pcfactory-select-selector{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-page .pcfactory-pagination-options .pcfactory-pagination-options-quick-jumper input{\n border-radius: selectPaginationRadius;\n border-color: selectPaginationBorder;\n }\n .ued-table-filters .ued-table-zebra-stripe .pcfactory-table-row:nth-child(2n){\n background: zebraBgColor;\n }\n .ued-table-zebra-stripe .pcfactory-table-row:nth-child(2n){\n background: zebraBgColor;\n }\n\n .table-head .title .head-style-custom {\n margin: tagMargin;\n color: tagColor;\n font-size: tagSize;\n width: tagSize;\n height: tagSize;\n }\n\n .table-head .title .head-style-one::before {\n background: tagColor;\n }\n \n .table-head .title .head-style-two::before {\n background: tagColor;\n }\n\n}\n",
|
|
261
280
|
components: [{
|
|
262
281
|
id: 'Table_2740384',
|
|
263
282
|
label: '表格',
|
|
@@ -323,7 +342,12 @@ export var Table = {
|
|
|
323
342
|
extend: [],
|
|
324
343
|
dataSource: "$[{\t'id': 1,\t'name': '王女士-月嫂服务订单',\t'code': '24475411512',\t'statusText': '服务成功',\t'status': 'success',\t'sales': '18779.70'}, {\t'id': 2,\t'name': '李女士-开荒保洁套餐',\t'code': '4443503045',\t'statusText': '服务延期',\t'status': 'warning',\t'sales': '1452.79'}, {\t'id': 3,\t'name': '陈先生-油烟机清洗服务',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '142.86'}, {\t'id': 4,\t'name': '陈先生-窗户保洁服务',\t'code': '4443503045',\t'statusText': '待服务',\t'status': 'normal',\t'sales': '560.00'}, {\t'id': 5,\t'name': '秦女士-月嫂服务订单',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '16779.70'}, {\t'id': 6,\t'name': '王先生-油烟机安装服务',\t'code': '4443503045',\t'statusText': '订单取消',\t'status': 'waiting',\t'sales': ''}, ]$",
|
|
325
344
|
basicStatus: 1,
|
|
326
|
-
headExtends: []
|
|
345
|
+
headExtends: [],
|
|
346
|
+
headIconType: 'custom',
|
|
347
|
+
headPrefixIcon: {
|
|
348
|
+
prefixIconTheme: 'filled',
|
|
349
|
+
prefixIconType: 'idcard'
|
|
350
|
+
}
|
|
327
351
|
},
|
|
328
352
|
style: {
|
|
329
353
|
margin: '0px 0px 0px 0px'
|
|
@@ -412,7 +436,8 @@ export var Table = {
|
|
|
412
436
|
extend: [],
|
|
413
437
|
dataSource: "$[{\t'id': 1,\t'name': '王女士-月嫂服务订单',\t'code': '24475411512',\t'statusText': '服务成功',\t'status': 'success',\t'sales': '18779.70'}, {\t'id': 2,\t'name': '李女士-开荒保洁套餐',\t'code': '4443503045',\t'statusText': '服务延期',\t'status': 'warning',\t'sales': '1452.79'}, {\t'id': 3,\t'name': '陈先生-油烟机清洗服务',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '142.86'}, {\t'id': 4,\t'name': '陈先生-窗户保洁服务',\t'code': '4443503045',\t'statusText': '待服务',\t'status': 'normal',\t'sales': '560.00'}, {\t'id': 5,\t'name': '秦女士-月嫂服务订单',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '16779.70'}, {\t'id': 6,\t'name': '王先生-油烟机安装服务',\t'code': '4443503045',\t'statusText': '订单取消',\t'status': 'waiting',\t'sales': ''}, ]$",
|
|
414
438
|
basicStatus: 1,
|
|
415
|
-
headExtends: []
|
|
439
|
+
headExtends: [],
|
|
440
|
+
headIconType: 'styleOne'
|
|
416
441
|
},
|
|
417
442
|
style: {
|
|
418
443
|
margin: '0px 0px 0px 0px'
|
|
@@ -501,7 +526,8 @@ export var Table = {
|
|
|
501
526
|
extend: [],
|
|
502
527
|
dataSource: "$[{\t'id': 1,\t'name': '王女士-月嫂服务订单',\t'code': '24475411512',\t'statusText': '服务成功',\t'status': 'success',\t'sales': '18779.70'}, {\t'id': 2,\t'name': '李女士-开荒保洁套餐',\t'code': '4443503045',\t'statusText': '服务延期',\t'status': 'warning',\t'sales': '1452.79'}, {\t'id': 3,\t'name': '陈先生-油烟机清洗服务',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '142.86'}, {\t'id': 4,\t'name': '陈先生-窗户保洁服务',\t'code': '4443503045',\t'statusText': '待服务',\t'status': 'normal',\t'sales': '560.00'}, {\t'id': 5,\t'name': '秦女士-月嫂服务订单',\t'code': '4443503045',\t'statusText': '服务终止',\t'status': 'fail',\t'sales': '16779.70'}, {\t'id': 6,\t'name': '王先生-油烟机安装服务',\t'code': '4443503045',\t'statusText': '订单取消',\t'status': 'waiting',\t'sales': ''}, ]$",
|
|
503
528
|
basicStatus: 1,
|
|
504
|
-
headExtends: []
|
|
529
|
+
headExtends: [],
|
|
530
|
+
headIconType: 'styleTwo'
|
|
505
531
|
},
|
|
506
532
|
style: {},
|
|
507
533
|
isContainer: false,
|
package/dist/h5config/Table.d.ts
CHANGED
|
@@ -67,6 +67,22 @@ export declare const DynamicTable: {
|
|
|
67
67
|
groupsName: string;
|
|
68
68
|
followTheme: string;
|
|
69
69
|
};
|
|
70
|
+
tagColor: {
|
|
71
|
+
type: string;
|
|
72
|
+
label: string;
|
|
73
|
+
groupsName: string;
|
|
74
|
+
followTheme: string;
|
|
75
|
+
};
|
|
76
|
+
tagSize: {
|
|
77
|
+
type: string;
|
|
78
|
+
label: string;
|
|
79
|
+
groupsName: string;
|
|
80
|
+
};
|
|
81
|
+
tagMargin: {
|
|
82
|
+
type: string;
|
|
83
|
+
label: string;
|
|
84
|
+
groupsName: string;
|
|
85
|
+
};
|
|
70
86
|
};
|
|
71
87
|
groupsName: string;
|
|
72
88
|
icon: string;
|
|
@@ -84,9 +100,13 @@ export declare const DynamicTable: {
|
|
|
84
100
|
zebraBgColor: string;
|
|
85
101
|
borderColor: string;
|
|
86
102
|
borderRadius: string;
|
|
103
|
+
tagColor: string;
|
|
104
|
+
tagSize: string;
|
|
105
|
+
tagMargin: string;
|
|
87
106
|
}[];
|
|
88
107
|
followThemes: {
|
|
89
108
|
'@border-color-base': never[];
|
|
109
|
+
'@brand-primary': string[];
|
|
90
110
|
};
|
|
91
111
|
tpl: string;
|
|
92
112
|
components: ({
|
|
@@ -122,6 +142,11 @@ export declare const DynamicTable: {
|
|
|
122
142
|
dataSourceLoading: boolean;
|
|
123
143
|
showHead: boolean;
|
|
124
144
|
tableTitle: string;
|
|
145
|
+
headIconType: string;
|
|
146
|
+
headPrefixIcon: {
|
|
147
|
+
prefixIconTheme: string;
|
|
148
|
+
prefixIconType: string;
|
|
149
|
+
};
|
|
125
150
|
twoDimension?: undefined;
|
|
126
151
|
};
|
|
127
152
|
style: {
|
|
@@ -175,6 +200,116 @@ export declare const DynamicTable: {
|
|
|
175
200
|
twoDimension: boolean;
|
|
176
201
|
showHead: boolean;
|
|
177
202
|
tableTitle: string;
|
|
203
|
+
headIconType: string;
|
|
204
|
+
headPrefixIcon?: undefined;
|
|
205
|
+
};
|
|
206
|
+
style: {
|
|
207
|
+
width: string;
|
|
208
|
+
height: string;
|
|
209
|
+
borderRadius: string;
|
|
210
|
+
};
|
|
211
|
+
isContainer: boolean;
|
|
212
|
+
isBusiObjContainer: boolean;
|
|
213
|
+
cmdgroup: string[];
|
|
214
|
+
platform: string;
|
|
215
|
+
setEvents: never[];
|
|
216
|
+
icon: string;
|
|
217
|
+
description: string;
|
|
218
|
+
groupsName: string;
|
|
219
|
+
engineApi: never[];
|
|
220
|
+
isLabelDropBoxChild: boolean;
|
|
221
|
+
components: never[];
|
|
222
|
+
path: string[];
|
|
223
|
+
} | {
|
|
224
|
+
id: string;
|
|
225
|
+
label: string;
|
|
226
|
+
compName: string;
|
|
227
|
+
type: string;
|
|
228
|
+
compType: number;
|
|
229
|
+
compLib: string;
|
|
230
|
+
props: {
|
|
231
|
+
name: string;
|
|
232
|
+
pagination: boolean;
|
|
233
|
+
status: string;
|
|
234
|
+
rowKeyType: string;
|
|
235
|
+
bordered: string;
|
|
236
|
+
pageSize: number;
|
|
237
|
+
pageNum: number;
|
|
238
|
+
pagingStyle: string;
|
|
239
|
+
rowLines: number;
|
|
240
|
+
columns: {
|
|
241
|
+
title: string;
|
|
242
|
+
dataIndex: string;
|
|
243
|
+
width: number;
|
|
244
|
+
}[];
|
|
245
|
+
dataSource: {
|
|
246
|
+
name: string;
|
|
247
|
+
sex: string;
|
|
248
|
+
age: string;
|
|
249
|
+
jg: string;
|
|
250
|
+
sf: string;
|
|
251
|
+
dz: string;
|
|
252
|
+
}[];
|
|
253
|
+
dataSourceLoading: boolean;
|
|
254
|
+
showHead: boolean;
|
|
255
|
+
tableTitle: string;
|
|
256
|
+
headIconType: string;
|
|
257
|
+
headPrefixIcon?: undefined;
|
|
258
|
+
twoDimension?: undefined;
|
|
259
|
+
};
|
|
260
|
+
style: {
|
|
261
|
+
width: string;
|
|
262
|
+
height: string;
|
|
263
|
+
borderRadius: string;
|
|
264
|
+
};
|
|
265
|
+
isContainer: boolean;
|
|
266
|
+
isBusiObjContainer: boolean;
|
|
267
|
+
cmdgroup: string[];
|
|
268
|
+
platform: string;
|
|
269
|
+
setEvents: never[];
|
|
270
|
+
icon: string;
|
|
271
|
+
description: string;
|
|
272
|
+
groupsName: string;
|
|
273
|
+
engineApi: never[];
|
|
274
|
+
isLabelDropBoxChild: boolean;
|
|
275
|
+
components: never[];
|
|
276
|
+
path: string[];
|
|
277
|
+
} | {
|
|
278
|
+
id: string;
|
|
279
|
+
label: string;
|
|
280
|
+
compName: string;
|
|
281
|
+
type: string;
|
|
282
|
+
compType: number;
|
|
283
|
+
compLib: string;
|
|
284
|
+
props: {
|
|
285
|
+
name: string;
|
|
286
|
+
pagination: boolean;
|
|
287
|
+
status: string;
|
|
288
|
+
rowKeyType: string;
|
|
289
|
+
bordered: string;
|
|
290
|
+
pageSize: number;
|
|
291
|
+
pageNum: number;
|
|
292
|
+
pagingStyle: string;
|
|
293
|
+
rowLines: number;
|
|
294
|
+
columns: {
|
|
295
|
+
title: string;
|
|
296
|
+
dataIndex: string;
|
|
297
|
+
width: number;
|
|
298
|
+
}[];
|
|
299
|
+
dataSource: {
|
|
300
|
+
name: string;
|
|
301
|
+
sex: string;
|
|
302
|
+
age: string;
|
|
303
|
+
jg: string;
|
|
304
|
+
sf: string;
|
|
305
|
+
dz: string;
|
|
306
|
+
}[];
|
|
307
|
+
dataSourceLoading: boolean;
|
|
308
|
+
showHead: boolean;
|
|
309
|
+
tableTitle: string;
|
|
310
|
+
headIconType?: undefined;
|
|
311
|
+
headPrefixIcon?: undefined;
|
|
312
|
+
twoDimension?: undefined;
|
|
178
313
|
};
|
|
179
314
|
style: {
|
|
180
315
|
width: string;
|
package/dist/h5config/Table.js
CHANGED
|
@@ -84,6 +84,22 @@ export var DynamicTable = {
|
|
|
84
84
|
label: '颜色',
|
|
85
85
|
groupsName: '边框',
|
|
86
86
|
followTheme: '@border-color-base'
|
|
87
|
+
},
|
|
88
|
+
tagColor: {
|
|
89
|
+
type: 'color',
|
|
90
|
+
label: '装饰符颜色',
|
|
91
|
+
groupsName: '其他',
|
|
92
|
+
followTheme: '@brand-primary'
|
|
93
|
+
},
|
|
94
|
+
tagSize: {
|
|
95
|
+
type: 'px',
|
|
96
|
+
label: '装饰符尺寸',
|
|
97
|
+
groupsName: '其他'
|
|
98
|
+
},
|
|
99
|
+
tagMargin: {
|
|
100
|
+
type: 'marginInput',
|
|
101
|
+
label: '装饰符外边距',
|
|
102
|
+
groupsName: '其他'
|
|
87
103
|
}
|
|
88
104
|
// TODO:
|
|
89
105
|
// fTextColor: {
|
|
@@ -130,17 +146,20 @@ export var DynamicTable = {
|
|
|
130
146
|
bodyBgColor: '#FFF',
|
|
131
147
|
zebraBgColor: '#FAFAFA',
|
|
132
148
|
borderColor: '#EFEFEF',
|
|
133
|
-
borderRadius: '2px'
|
|
149
|
+
borderRadius: '2px',
|
|
134
150
|
// fTextColor: 'rgba(28, 36, 46, 0.55)',
|
|
135
151
|
// fFontSize: '12px',
|
|
136
152
|
// fFontWeight: '400',
|
|
137
153
|
// fHeadBgColor: '#FAFAFA',
|
|
154
|
+
tagColor: '#47e',
|
|
155
|
+
tagSize: '16px',
|
|
156
|
+
tagMargin: '0 8px 0 8px'
|
|
138
157
|
}],
|
|
139
|
-
|
|
140
158
|
followThemes: {
|
|
141
|
-
'@border-color-base': []
|
|
159
|
+
'@border-color-base': [],
|
|
160
|
+
'@brand-primary': ['tagColor']
|
|
142
161
|
},
|
|
143
|
-
tpl: ".appDynamicTable {\n border-radius: borderRadius;\n .table-header{\n font-weight: fontWeight;\n font-size: fontSize;\n color: textColor;\n }\n .ag-header-row{\n font-size: headFontSize;\n }\n [class*=ag-theme-] {\n --ag-foreground-color: contentTextColor;\n }\n .table-body{\n --dynamic-table-header-bg-color: headBgColor;\n --ag-odd-row-background-color: bodyBgColor;\n --dynamic-table-header-color: headTextColor;\n }\n .ag-theme-segmentation {\n --ag-background-color: bodyBgColor;\n --ag-borders-critical: borderColor;\n --ag-row-border-color: borderColor;\n --ag-header-border-color: borderColor;\n --ag-font-size: contentFontSize;\n }\n .ag-theme-zebra {\n --ag-background-color: bodyBgColor;\n --ag-odd-row-background-color: zebraBgColor;\n --ag-borders: none;\n --ag-row-border-color: none;\n}\n .ag-theme-border {\n --ag-background-color: bodyBgColor;\n --ag-border-color: borderColor;\n --ag-cell-horizontal-border: solid borderColor;\n}\n }\n",
|
|
162
|
+
tpl: ".appDynamicTable {\n border-radius: borderRadius;\n .table-header{\n font-weight: fontWeight;\n font-size: fontSize;\n color: textColor;\n }\n .ag-header-row{\n font-size: headFontSize;\n }\n [class*=ag-theme-] {\n --ag-foreground-color: contentTextColor;\n }\n .table-body{\n --dynamic-table-header-bg-color: headBgColor;\n --ag-odd-row-background-color: bodyBgColor;\n --dynamic-table-header-color: headTextColor;\n }\n .ag-theme-segmentation {\n --ag-background-color: bodyBgColor;\n --ag-borders-critical: borderColor;\n --ag-row-border-color: borderColor;\n --ag-header-border-color: borderColor;\n --ag-font-size: contentFontSize;\n }\n .ag-theme-zebra {\n --ag-background-color: bodyBgColor;\n --ag-odd-row-background-color: zebraBgColor;\n --ag-borders: none;\n --ag-row-border-color: none;\n}\n .ag-theme-border {\n --ag-background-color: bodyBgColor;\n --ag-border-color: borderColor;\n --ag-cell-horizontal-border: solid borderColor;\n}\n }\n .appDynamicTable .table-header .head-style-custom {\n color: tagColor;\n margin: tagMargin;\n font-size: tagSize;\n width: tagSize;\n height: tagSize;\n }\n .appDynamicTable .table-header .head-style-one {\n background: tagColor;\n }\n .appDynamicTable .table-header .head-style-two {\n background: tagColor;\n }\n",
|
|
144
163
|
// tpl: `
|
|
145
164
|
// .appDynamicTable {
|
|
146
165
|
// .table-body{
|
|
@@ -264,7 +283,12 @@ export var DynamicTable = {
|
|
|
264
283
|
}],
|
|
265
284
|
dataSourceLoading: false,
|
|
266
285
|
showHead: true,
|
|
267
|
-
tableTitle: '分割线表格'
|
|
286
|
+
tableTitle: '分割线表格',
|
|
287
|
+
headIconType: 'custom',
|
|
288
|
+
headPrefixIcon: {
|
|
289
|
+
prefixIconTheme: 'filled',
|
|
290
|
+
prefixIconType: 'reconciliation'
|
|
291
|
+
}
|
|
268
292
|
},
|
|
269
293
|
style: {
|
|
270
294
|
// leftTitleColor: '#1C242E',
|
|
@@ -365,7 +389,8 @@ export var DynamicTable = {
|
|
|
365
389
|
dataSourceLoading: false,
|
|
366
390
|
twoDimension: true,
|
|
367
391
|
showHead: true,
|
|
368
|
-
tableTitle: '二维表格'
|
|
392
|
+
tableTitle: '二维表格',
|
|
393
|
+
headIconType: 'styleTwo'
|
|
369
394
|
},
|
|
370
395
|
style: {
|
|
371
396
|
// leftTitleColor: '#1C242E',
|
|
@@ -465,7 +490,8 @@ export var DynamicTable = {
|
|
|
465
490
|
}],
|
|
466
491
|
dataSourceLoading: false,
|
|
467
492
|
showHead: true,
|
|
468
|
-
tableTitle: '斑马纹表格'
|
|
493
|
+
tableTitle: '斑马纹表格',
|
|
494
|
+
headIconType: 'styleOne'
|
|
469
495
|
},
|
|
470
496
|
style: {
|
|
471
497
|
// leftTitleColor: '#1C242E',
|
package/dist/utils.js
CHANGED
|
@@ -4,10 +4,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
6
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
|
-
/**
|
|
8
|
-
* 根据 groupsName 将对象分成数组
|
|
9
|
-
* @param obj
|
|
10
|
-
* @returns
|
|
7
|
+
/**
|
|
8
|
+
* 根据 groupsName 将对象分成数组
|
|
9
|
+
* @param obj
|
|
10
|
+
* @returns
|
|
11
11
|
*/
|
|
12
12
|
export function objToListByGroupsName(obj) {
|
|
13
13
|
var groups = {};
|
|
@@ -34,10 +34,10 @@ export function objToListByGroupsName(obj) {
|
|
|
34
34
|
return result;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
/**
|
|
38
|
-
* (内部方法) 根据 groupsName 将对象分成数组
|
|
39
|
-
* @param obj
|
|
40
|
-
* @returns
|
|
37
|
+
/**
|
|
38
|
+
* (内部方法) 根据 groupsName 将对象分成数组
|
|
39
|
+
* @param obj
|
|
40
|
+
* @returns
|
|
41
41
|
*/
|
|
42
42
|
export function __objToListByGroupsName(obj) {
|
|
43
43
|
var groups = {};
|
package/package.json
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lingxiteam/theme-utils",
|
|
3
|
-
"version": "0.6.
|
|
4
|
-
"description": "",
|
|
5
|
-
"keywords": [],
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"author": "",
|
|
8
|
-
"main": "dist/index.js",
|
|
9
|
-
"types": "dist/index.d.ts",
|
|
10
|
-
"files": [
|
|
11
|
-
"dist"
|
|
12
|
-
],
|
|
13
|
-
"scripts": {
|
|
14
|
-
"build": "father build",
|
|
15
|
-
"dev": "father dev",
|
|
16
|
-
"format": "prettier --write .",
|
|
17
|
-
"g": "esno scripts/generateConfig",
|
|
18
|
-
"gp": "esno scripts/generatePage",
|
|
19
|
-
"test": "esno a.ts"
|
|
20
|
-
},
|
|
21
|
-
"dependencies": {
|
|
22
|
-
"stylis": "^4.3.0"
|
|
23
|
-
},
|
|
24
|
-
"devDependencies": {
|
|
25
|
-
"@types/stylis": "^4.2.0",
|
|
26
|
-
"esno": "^0.17.0",
|
|
27
|
-
"father": "^4.3.0",
|
|
28
|
-
"prettier": "^2.6.2",
|
|
29
|
-
"prettier-plugin-organize-imports": "^2.3.4",
|
|
30
|
-
"prettier-plugin-packagejson": "^2.2.18"
|
|
31
|
-
},
|
|
32
|
-
"peerDependencies": {
|
|
33
|
-
"antd": "4.18.8"
|
|
34
|
-
},
|
|
35
|
-
"publishConfig": {
|
|
36
|
-
"access": "public"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@lingxiteam/theme-utils",
|
|
3
|
+
"version": "0.6.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "",
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"types": "dist/index.d.ts",
|
|
10
|
+
"files": [
|
|
11
|
+
"dist"
|
|
12
|
+
],
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "father build",
|
|
15
|
+
"dev": "father dev",
|
|
16
|
+
"format": "prettier --write .",
|
|
17
|
+
"g": "esno scripts/generateConfig",
|
|
18
|
+
"gp": "esno scripts/generatePage",
|
|
19
|
+
"test": "esno a.ts"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"stylis": "^4.3.0"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@types/stylis": "^4.2.0",
|
|
26
|
+
"esno": "^0.17.0",
|
|
27
|
+
"father": "^4.3.0",
|
|
28
|
+
"prettier": "^2.6.2",
|
|
29
|
+
"prettier-plugin-organize-imports": "^2.3.4",
|
|
30
|
+
"prettier-plugin-packagejson": "^2.2.18"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"antd": "4.18.8"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
}
|
|
38
|
+
}
|