@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 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;
@@ -333,7 +333,8 @@ export var Container = {
333
333
  customStyle: 'default'
334
334
  },
335
335
  customNum: 3,
336
- rowKey: '11'
336
+ rowKey: '11',
337
+ headIconType: 'styleOne'
337
338
  },
338
339
  style: {},
339
340
  isContainer: false,
@@ -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;
@@ -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,
@@ -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;
@@ -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.0",
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
+ }