@lingxiteam/theme-utils 0.6.1 → 0.6.3

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.
Files changed (10) hide show
  1. package/README.md +142 -142
  2. package/dist/config/Button.js +1 -1
  3. package/dist/config/Description.d.ts +6 -0
  4. package/dist/config/Description.js +7 -1
  5. package/dist/config/Table.d.ts +6 -0
  6. package/dist/config/Table.js +7 -1
  7. package/dist/config/Tree.d.ts +6 -0
  8. package/dist/config/Tree.js +7 -1
  9. package/dist/utils.js +8 -8
  10. 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
+ ```
package/dist/config/Button.js CHANGED
@@ -67,7 +67,7 @@ export var Button = {
67
67
  '@border-color-base': ['borderColor'],
68
68
  '@text-color': []
69
69
  },
70
- tpl: "\n.ued-table-wrap .extend .pcfactory-btn {\n border-radius: borderRadius;\n}\n.ued-modal-wrap .pcfactory-modal-footer .pcfactory-btn {\n border-radius: borderRadius;\n}\n.ued-drawer-wrap .pcfactory-drawer-footer .pcfactory-btn {\n border-radius: borderRadius;\n}\n.ued-card-extend .pcfactory-btn {\n border-radius: borderRadius;\n}\n.ued-form-group-head-wrap .pcfactory-btn {\n border-radius: borderRadius;\n}\n.engine-import-busi-obj-modal-customModal .pcfactory-modal-footer .pcfactory-btn {\n border-radius: borderRadius;\n}\n.pcfactory-modal-confirm-btns .pcfactory-btn {\n border-radius: borderRadius;\n}\n.ued-button-wrap.pcfactory-btn {\n line-height: lineHeight;\n font-size: fontSize;\n padding: paddingValue;\n margin: marginValue;\n }\n.ued-button-wrap.pcfactory-btn-primary {\n background-color: backgroundColor;\n border-color: backgroundColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn-default {\n color: textColor;\n border-color: borderColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn-dashed {\n color: textColor;\n border-color: borderColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn.pcfactory-btn-dashed:hover {\n border-color: backgroundColor;\n color: backgroundColor;\n }\n.ued-button-wrap.pcfactory-btn.pcfactory-btn-default:hover {\n border-color: backgroundColor;\n color: backgroundColor;\n }\n.ued-button-wrap.pcfactory-btn-text {\n color: textColor;\n }\n.ued-button-wrap.pcfactory-btn-link {\n color: backgroundColor;\n }\n ",
70
+ tpl: "\n.ued-table-wrap .extend .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.ued-table-wrap .extend .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.ued-modal-wrap .pcfactory-modal-footer .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.ued-modal-wrap .pcfactory-modal-footer .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.ued-drawer-wrap .pcfactory-drawer-footer .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.ued-drawer-wrap .pcfactory-drawer-footer .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.ued-card-extend .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.ued-card-extend .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.ued-form-group-head-wrap .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.ued-form-group-head-wrap .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.engine-import-busi-obj-modal-customModal .pcfactory-modal-footer .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.engine-import-busi-obj-modal-customModal .pcfactory-modal-footer .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.pcfactory-modal-confirm-btns .pcfactory-btn {\n margin: marginValue;\n padding: paddingValue;\n color: textColor;\n font-size: fontSize;\n line-height: lineHeight;\n border-radius: borderRadius;\n border-color: borderColor;\n}\n.pcfactory-modal-confirm-btns .pcfactory-btn-primary {\n background-color: backgroundColor;\n}\n.ued-button-wrap.pcfactory-btn {\n line-height: lineHeight;\n font-size: fontSize;\n padding: paddingValue;\n margin: marginValue;\n }\n.ued-button-wrap.pcfactory-btn-primary {\n background-color: backgroundColor;\n border-color: backgroundColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn-default {\n color: textColor;\n border-color: borderColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn-dashed {\n color: textColor;\n border-color: borderColor;\n border-radius: borderRadius;\n }\n.ued-button-wrap.pcfactory-btn.pcfactory-btn-dashed:hover {\n border-color: backgroundColor;\n color: backgroundColor;\n }\n.ued-button-wrap.pcfactory-btn.pcfactory-btn-default:hover {\n border-color: backgroundColor;\n color: backgroundColor;\n }\n.ued-button-wrap.pcfactory-btn-text {\n color: textColor;\n }\n.ued-button-wrap.pcfactory-btn-link {\n color: backgroundColor;\n }\n ",
71
71
  components: [{
72
72
  id: 'Button_1229334',
73
73
  label: '按钮',
package/dist/config/Description.d.ts CHANGED
@@ -2,6 +2,11 @@ export declare const Description: {
2
2
  type: string;
3
3
  hasPrefixClass: boolean;
4
4
  variable: {
5
+ bgColor: {
6
+ type: string;
7
+ label: string;
8
+ groupsName: string;
9
+ };
5
10
  backgroundColor: {
6
11
  type: string;
7
12
  label: string;
@@ -50,6 +55,7 @@ export declare const Description: {
50
55
  icon: string;
51
56
  title: string;
52
57
  defaultValue: {
58
+ bgColor: string;
53
59
  borderColor: string;
54
60
  borderWidth: string;
55
61
  paddingValue: string;
package/dist/config/Description.js CHANGED
@@ -2,6 +2,11 @@ export var Description = {
2
2
  type: 'Description',
3
3
  hasPrefixClass: true,
4
4
  variable: {
5
+ bgColor: {
6
+ type: 'color',
7
+ label: '背景',
8
+ groupsName: '背景'
9
+ },
5
10
  backgroundColor: {
6
11
  type: 'color',
7
12
  label: '标题背景颜色',
@@ -50,6 +55,7 @@ export var Description = {
50
55
  icon: 'icon-ico-comp-descriptions',
51
56
  title: '描述列表',
52
57
  defaultValue: [{
58
+ bgColor: '#ffffff',
53
59
  borderColor: '#e5e5e5',
54
60
  borderWidth: '1px',
55
61
  paddingValue: '8px 16px 8px 16px',
@@ -64,7 +70,7 @@ export var Description = {
64
70
  '@heading-color': ['textColor'],
65
71
  '@border-color-base': []
66
72
  },
67
- tpl: ".ued-description-wrap{\n .ued-description.border{\n border-left: borderWidth solid borderColor;\n border-top: borderWidth solid borderColor;\n }\n .ued-description .ued-description-cell.border{\n border-bottom: borderWidth solid borderColor;\n border-right: borderWidth solid borderColor;\n }\n .ued-description .ued-description-cell .ued-description-label.bg{\n border-right: borderWidth solid borderColor;\n background: backgroundColor;\n color: textColor;\n }\n .ued-description .ued-description-cell .ued-description-label{\n padding: paddingValue;\n }\n .ued-description .ued-description-cell .ued-description-cont{\n padding: bodyPaddingValue;\n background: bodyBgColor;\n color: bodyTextColor;\n }\n }",
73
+ tpl: "\n .ued-description-wrap{\n background: bgColor;\n\n .ued-description.border{\n border-left: borderWidth solid borderColor;\n border-top: borderWidth solid borderColor;\n }\n .ued-description .ued-description-cell.border{\n border-bottom: borderWidth solid borderColor;\n border-right: borderWidth solid borderColor;\n }\n .ued-description .ued-description-cell .ued-description-label.bg{\n border-right: borderWidth solid borderColor;\n background: backgroundColor;\n color: textColor;\n }\n .ued-description .ued-description-cell .ued-description-label{\n padding: paddingValue;\n }\n .ued-description .ued-description-cell .ued-description-cont{\n padding: bodyPaddingValue;\n background: bodyBgColor;\n color: bodyTextColor;\n }\n }",
68
74
  components: [{
69
75
  id: 'Description_180191',
70
76
  label: '描述列表',
package/dist/config/Table.d.ts CHANGED
@@ -2,6 +2,11 @@ export declare const Table: {
2
2
  type: string;
3
3
  hasPrefixClass: boolean;
4
4
  variable: {
5
+ backgroundColor: {
6
+ type: string;
7
+ label: string;
8
+ groupsName: string;
9
+ };
5
10
  headBgColor: {
6
11
  type: string;
7
12
  label: string;
@@ -169,6 +174,7 @@ export declare const Table: {
169
174
  icon: string;
170
175
  title: string;
171
176
  defaultValue: {
177
+ backgroundColor: string;
172
178
  selectPaginationColor: string;
173
179
  selectPaginationRadius: string;
174
180
  selectPaginationBorder: string;
package/dist/config/Table.js CHANGED
@@ -2,6 +2,11 @@ export var Table = {
2
2
  type: 'Table',
3
3
  hasPrefixClass: true,
4
4
  variable: {
5
+ backgroundColor: {
6
+ type: 'color',
7
+ label: '背景',
8
+ groupsName: '背景'
9
+ },
5
10
  headBgColor: {
6
11
  type: 'color',
7
12
  label: '表头填充颜色',
@@ -246,6 +251,7 @@ export var Table = {
246
251
  icon: 'icon-ico-comp-table',
247
252
  title: '表格',
248
253
  defaultValue: [{
254
+ backgroundColor: '#ffffff',
249
255
  selectPaginationColor: '#47e',
250
256
  selectPaginationRadius: '2px',
251
257
  selectPaginationBorder: '#47e',
@@ -276,7 +282,7 @@ export var Table = {
276
282
  '@border-radius-base': [],
277
283
  '@border-color-base': []
278
284
  },
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",
285
+ tpl: "\n .ued-table-wrap {\n background: backgroundColor;\n\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",
280
286
  components: [{
281
287
  id: 'Table_2740384',
282
288
  label: '表格',
package/dist/config/Tree.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  export declare const Tree: {
2
2
  type: string;
3
3
  variable: {
4
+ backgroundColor: {
5
+ type: string;
6
+ label: string;
7
+ groupsName: string;
8
+ };
4
9
  textColor: {
5
10
  type: string;
6
11
  label: string;
@@ -63,6 +68,7 @@ export declare const Tree: {
63
68
  icon: string;
64
69
  title: string;
65
70
  defaultValue: {
71
+ backgroundColor: string;
66
72
  borderColor: string;
67
73
  borderRadius: string;
68
74
  textColor: string;
package/dist/config/Tree.js CHANGED
@@ -1,6 +1,11 @@
1
1
  export var Tree = {
2
2
  type: 'Tree',
3
3
  variable: {
4
+ backgroundColor: {
5
+ type: 'color',
6
+ label: '背景',
7
+ groupsName: '背景'
8
+ },
4
9
  textColor: {
5
10
  type: 'color',
6
11
  label: '文本颜色',
@@ -64,6 +69,7 @@ export var Tree = {
64
69
  icon: 'icon-ico-comp-tree',
65
70
  title: '树形控件',
66
71
  defaultValue: [{
72
+ backgroundColor: '#ffffff',
67
73
  borderColor: '#e5e5e5',
68
74
  borderRadius: '2px',
69
75
  textColor: '#1c242e',
@@ -83,7 +89,7 @@ export var Tree = {
83
89
  '@border-color-base': ['borderColor'],
84
90
  '@border-radius-base': ['borderRadius']
85
91
  },
86
- tpl: ".ued-tree-wrap .ued-tree-search .pcfactory-input{\n color: textColor;\n border-color: borderColor;\n font-size: fontSize;\n border-bottom-left-radius: borderRadius;\n border-top-left-radius: borderRadius;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button{\n height: calc(1.5715* fontSize + 10px);\n border-color: borderColor;\n border-bottom-right-radius: borderRadius;\n border-top-right-radius: borderRadius;\n }\n .ued-tree .ued-tree-tit{\n color: treeTextColor;\n font-size: treeFontSize;\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode .pcfactory-tree-node-content-wrapper.pcfactory-tree-node-selected{\n background-color: treeBgColor\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode span.pcfactory-tree-switcher{\n color: treeIconColor;\n }\n .ued-tree-wrap .pcfactory-tree-show-line .pcfactory-tree-indent-unit:before{\n border-color: treeLineColor;\n }\n .ued-tree-wrap .pcfactory-tree-switcher-leaf-line:before{\n border-color: treeLineColor;\n }\n .ued-tree-wrap .pcfactory-tree-switcher-leaf-line:after{\n border-color: treeLineColor;\n\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode .pcfactory-tree-node-content-wrapper .pcfactory-tree-iconEle .ued-icon.fill-primary{\n fill: treeIconColor;\n color: treeIconColor;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button{\n width: btnWidth;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button .anticon svg{\n width: fontSize;\n height: fontSize;\n }",
92
+ tpl: "\n .ued-tree-wrap {\n background: backgroundColor;\n }\n .ued-tree-wrap .ued-tree-search .pcfactory-input{\n color: textColor;\n border-color: borderColor;\n font-size: fontSize;\n border-bottom-left-radius: borderRadius;\n border-top-left-radius: borderRadius;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button{\n height: calc(1.5715* fontSize + 10px);\n border-color: borderColor;\n border-bottom-right-radius: borderRadius;\n border-top-right-radius: borderRadius;\n }\n .ued-tree .ued-tree-tit{\n color: treeTextColor;\n font-size: treeFontSize;\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode .pcfactory-tree-node-content-wrapper.pcfactory-tree-node-selected{\n background-color: treeBgColor\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode span.pcfactory-tree-switcher{\n color: treeIconColor;\n }\n .ued-tree-wrap .pcfactory-tree-show-line .pcfactory-tree-indent-unit:before{\n border-color: treeLineColor;\n }\n .ued-tree-wrap .pcfactory-tree-switcher-leaf-line:before{\n border-color: treeLineColor;\n }\n .ued-tree-wrap .pcfactory-tree-switcher-leaf-line:after{\n border-color: treeLineColor;\n\n }\n .ued-tree.pcfactory-tree .pcfactory-tree-treenode .pcfactory-tree-node-content-wrapper .pcfactory-tree-iconEle .ued-icon.fill-primary{\n fill: treeIconColor;\n color: treeIconColor;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button{\n width: btnWidth;\n }\n .ued-tree-wrap .pcfactory-input-search>.pcfactory-input-group>.pcfactory-input-group-addon:last-child .pcfactory-input-search-button .anticon svg{\n width: fontSize;\n height: fontSize;\n }",
87
93
  components: [{
88
94
  id: 'Tree_371619',
89
95
  label: '树形控件',
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.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
- }
1
+ {
2
+ "name": "@lingxiteam/theme-utils",
3
+ "version": "0.6.3",
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
+ }