@lingxiteam/theme-utils 0.5.7 → 0.5.9
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.js +2 -2
- package/dist/h5config/Accordion.js +1 -1
- package/dist/h5config/Card.js +1 -1
- package/dist/h5config/Description.d.ts +98 -0
- package/dist/h5config/Description.js +118 -0
- package/dist/lx-mobile.js +2 -0
- 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
|
+
```
|
package/dist/config/Container.js
CHANGED
|
@@ -14,7 +14,7 @@ export var Container = {
|
|
|
14
14
|
label: '标题尺寸',
|
|
15
15
|
groupsName: '标题',
|
|
16
16
|
desc: '对卡片标题、折叠面板标题、表格头部标题生效',
|
|
17
|
-
followTheme: '@font-size-
|
|
17
|
+
followTheme: '@font-size-base'
|
|
18
18
|
},
|
|
19
19
|
lineHeight: {
|
|
20
20
|
type: 'px',
|
|
@@ -132,7 +132,7 @@ export var Container = {
|
|
|
132
132
|
'@font-size-base': []
|
|
133
133
|
},
|
|
134
134
|
// TODO：布局容器、普通容器
|
|
135
|
-
tpl: "\n .ued-card .ued-card-title {\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n }\n .ued-card-sub-title {\n color: subTextColor;\n line-height: subLineHeight;\n font-size: subFontSize;\n font-weight: subFontWeight;\n }\n .ued-card .pcfactory-card-head > .pcfactory-card-head-wrapper > .pcfactory-card-head-title{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n }\n .ued-collapse-
|
|
135
|
+
tpl: "\n .ued-card .ued-card-title {\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n }\n .ued-card-sub-title {\n color: subTextColor;\n line-height: subLineHeight;\n font-size: subFontSize;\n font-weight: subFontWeight;\n }\n .ued-card .pcfactory-card-head > .pcfactory-card-head-wrapper > .pcfactory-card-head-title{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n }\n .ued-collapse-panel-header {\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n } \n .ued-collapse-panel-header-default {\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n } \n .ued-collapse-panel-header-sub {\n color: subTextColor;\n line-height: subLineHeight;\n font-size: subFontSize;\n font-weight: subFontWeight;\n }\n .ued-table-filters .table-head-default{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n padding: 12px 0 0 0;\n }\n .ued-table-filters .table-head-middle{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n padding: 12px 0 0 0;\n }\n .ued-table-wrap .table-head-default{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n padding: 12px 0 0 0;\n }\n .ued-table-wrap .table-head-middle .title{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n padding: 0 0 0 18px ;\n }\n .ued-table-wrap .table-head .title{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n font-weight: fontWeight;\n }",
|
|
136
136
|
components: [{
|
|
137
137
|
id: 'Card_872926',
|
|
138
138
|
label: '卡片',
|
|
@@ -176,7 +176,7 @@ export var Accordion = {
|
|
|
176
176
|
'@color-text-base': [],
|
|
177
177
|
'@border-color-base': []
|
|
178
178
|
},
|
|
179
|
-
tpl: ".lcdp-accordion {\n .lcdp-accordion-header{\n color: textColor;\n font-weight: fontWeight;\n font-size: fontSize;\n line-height: lineHeight;\n background: backgroundColor;\n > div {\n margin: tagMargin !important;\n }\n }\n .lcdp-accordion-header-icon-left{\n background: titleColor;\n }\n .lcdp-accordion-header-default-icon{\n height: tagSize;\n background: titleColor;\n margin-right: -4px;\n }\n .adm-collapse-arrow svg{\n color: arrowColor;\n width: arrowSize;\n height: arrowSize;\n }\n .adm-list-item-content-main{\n background: bodyBgColor;\n }\n .adm-collapse{\n border-radius: borderRadius;\n border-color: borderColor !important;\n }\n }\n ",
|
|
179
|
+
tpl: ".lcdp-accordion {\n .lcdp-accordion-header{\n color: textColor;\n font-weight: fontWeight;\n font-size: fontSize;\n line-height: lineHeight;\n background: backgroundColor;\n > div {\n margin: tagMargin !important;\n }\n }\n .lcdp-accordion-header .title-content {\n main {\n color: textColor;\n font-weight: fontWeight;\n font-size: fontSize;\n line-height: lineHeight;\n }\n .sub {\n color: subTextColor;\n font-weight: subFontWeight;\n font-size: subFontSize;\n line-height: subLineHeight;\n }\n }\n .lcdp-accordion-header-icon-left{\n background: titleColor;\n }\n .lcdp-accordion-header-default-icon{\n height: tagSize;\n background: titleColor;\n margin-right: -4px;\n }\n .adm-collapse-arrow svg{\n color: arrowColor;\n width: arrowSize;\n height: arrowSize;\n }\n .adm-list-item-content-main{\n background: bodyBgColor;\n }\n .adm-collapse{\n border-radius: borderRadius;\n border-color: borderColor !important;\n }\n }\n ",
|
|
180
180
|
components: [{
|
|
181
181
|
id: 'Accordion_960849',
|
|
182
182
|
label: '折叠面板',
|
package/dist/h5config/Card.js
CHANGED
|
@@ -200,7 +200,7 @@ export var Card = {
|
|
|
200
200
|
'@color-text-base': [],
|
|
201
201
|
'@border-color-base': ['lineColor', 'bodyLineColor']
|
|
202
202
|
},
|
|
203
|
-
tpl: ".lcdp-h5-card {\n border-radius: borderRadius;\n border: 1PX solid borderColor;\n\n .adm-card-header:not(:last-child){\n border-color: lineColor !important;\n }\n .adm-card-header{\n border-color: lineColor !important;\n background: backgroundColor;\n }\n .adm-card-body{\n background: bodyBgColor;\n }\n\n .
|
|
203
|
+
tpl: ".lcdp-h5-card {\n border-radius: borderRadius;\n border: 1PX solid borderColor;\n\n .adm-card-header:not(:last-child){\n border-color: lineColor !important;\n }\n .adm-card-header{\n border-color: lineColor !important;\n background: backgroundColor;\n }\n .adm-card-body{\n background: bodyBgColor;\n }\n\n .lcdp-h5-card-title .title-content {\n main {\n color: textColor;\n font-weight: fontWeight;\n font-size: fontSize;\n line-height: lineHeight;\n }\n .sub {\n color: subTextColor;\n font-weight: subFontWeight;\n font-size: subFontSize;\n line-height: subLineHeight;\n }\n }\n \n .lcdp-h5-card-hStyle{\n background: titleColor;\n margin: tagMargin;\n position: static;\n width: tagSize;\n }\n .lcdp-h5-card-vStyle{\n height: tagSize;\n background: titleColor;\n margin: tagMargin;\n }\n .lcdp-h5-card-icon{\n width: tagSize;\n height: tagSize;\n margin: tagMargin;\n margin-top: -1px;\n display: grid;\n }\n .lcdp-h5-card-icon svg{\n color: titleColor;\n width: tagSize;\n height: tagSize;\n }\n .lcdp-h5-card-extra-icon{\n width: arrowSize;\n height: arrowSize;\n }\n .lcdp-h5-card-extra-icon svg{\n color: arrowColor;\n width: arrowSize;\n height: arrowSize;\n }\n .lcdp-card-footer-draw-box-border{\n border-color: bodyLineColor;\n background: footBgColor;\n }\n }\n \n ",
|
|
204
204
|
components: [{
|
|
205
205
|
id: 'Card_194419',
|
|
206
206
|
label: '卡片',
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
export declare const Description: {
|
|
2
|
+
type: string;
|
|
3
|
+
variable: {
|
|
4
|
+
backgroundColor: {
|
|
5
|
+
type: string;
|
|
6
|
+
label: string;
|
|
7
|
+
groupsName: string;
|
|
8
|
+
};
|
|
9
|
+
textBgColor: {
|
|
10
|
+
type: string;
|
|
11
|
+
label: string;
|
|
12
|
+
groupsName: string;
|
|
13
|
+
};
|
|
14
|
+
labelColor: {
|
|
15
|
+
type: string;
|
|
16
|
+
label: string;
|
|
17
|
+
groupsName: string;
|
|
18
|
+
followTheme: string;
|
|
19
|
+
};
|
|
20
|
+
textColor: {
|
|
21
|
+
type: string;
|
|
22
|
+
label: string;
|
|
23
|
+
groupsName: string;
|
|
24
|
+
followTheme: string;
|
|
25
|
+
};
|
|
26
|
+
textPadding: {
|
|
27
|
+
type: string;
|
|
28
|
+
label: string;
|
|
29
|
+
groupsName: string;
|
|
30
|
+
};
|
|
31
|
+
borderColor: {
|
|
32
|
+
type: string;
|
|
33
|
+
label: string;
|
|
34
|
+
groupsName: string;
|
|
35
|
+
followTheme: string;
|
|
36
|
+
};
|
|
37
|
+
borderWidth: {
|
|
38
|
+
type: string;
|
|
39
|
+
label: string;
|
|
40
|
+
groupsName: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
groupsName: string;
|
|
44
|
+
icon: string;
|
|
45
|
+
title: string;
|
|
46
|
+
defaultValue: {
|
|
47
|
+
backgroundColor: string;
|
|
48
|
+
textBgColor: string;
|
|
49
|
+
labelColor: string;
|
|
50
|
+
textColor: string;
|
|
51
|
+
textPadding: string;
|
|
52
|
+
borderColor: string;
|
|
53
|
+
borderWidth: string;
|
|
54
|
+
}[];
|
|
55
|
+
followThemes: {
|
|
56
|
+
'@color-text-base': never[];
|
|
57
|
+
'@border-color-base': never[];
|
|
58
|
+
};
|
|
59
|
+
tpl: string;
|
|
60
|
+
components: {
|
|
61
|
+
id: string;
|
|
62
|
+
label: string;
|
|
63
|
+
compName: string;
|
|
64
|
+
type: string;
|
|
65
|
+
compType: number;
|
|
66
|
+
compLib: string;
|
|
67
|
+
props: {
|
|
68
|
+
name: string;
|
|
69
|
+
layout: string;
|
|
70
|
+
basicStatus: number;
|
|
71
|
+
dataSource: string;
|
|
72
|
+
columns: {
|
|
73
|
+
label: string;
|
|
74
|
+
dataIndex: string;
|
|
75
|
+
key: string;
|
|
76
|
+
}[];
|
|
77
|
+
bordered: boolean;
|
|
78
|
+
labelSize: string;
|
|
79
|
+
colSpan: number;
|
|
80
|
+
colon: boolean;
|
|
81
|
+
labelAlign: string;
|
|
82
|
+
};
|
|
83
|
+
style: {};
|
|
84
|
+
isContainer: boolean;
|
|
85
|
+
isBusiObjContainer: boolean;
|
|
86
|
+
cmdgroup: string[];
|
|
87
|
+
platform: string;
|
|
88
|
+
icon: string;
|
|
89
|
+
description: string;
|
|
90
|
+
image: string;
|
|
91
|
+
groupsName: string;
|
|
92
|
+
engineApi: string[];
|
|
93
|
+
setEvents: never[];
|
|
94
|
+
isLabelDropBoxChild: boolean;
|
|
95
|
+
components: never[];
|
|
96
|
+
path: string[];
|
|
97
|
+
}[];
|
|
98
|
+
};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
export var Description = {
|
|
2
|
+
type: 'Description',
|
|
3
|
+
variable: {
|
|
4
|
+
backgroundColor: {
|
|
5
|
+
type: 'color',
|
|
6
|
+
label: '标题背景颜色',
|
|
7
|
+
groupsName: '背景'
|
|
8
|
+
},
|
|
9
|
+
textBgColor: {
|
|
10
|
+
type: 'color',
|
|
11
|
+
label: '正文背景颜色',
|
|
12
|
+
groupsName: '背景'
|
|
13
|
+
},
|
|
14
|
+
labelColor: {
|
|
15
|
+
type: 'color',
|
|
16
|
+
label: '标题文本颜色',
|
|
17
|
+
groupsName: '文字',
|
|
18
|
+
followTheme: '@color-text-base'
|
|
19
|
+
},
|
|
20
|
+
textColor: {
|
|
21
|
+
type: 'color',
|
|
22
|
+
label: '正文文本颜色',
|
|
23
|
+
groupsName: '文字',
|
|
24
|
+
followTheme: '@color-text-base'
|
|
25
|
+
},
|
|
26
|
+
textPadding: {
|
|
27
|
+
type: 'marginInput',
|
|
28
|
+
label: '正文内边距',
|
|
29
|
+
groupsName: '布局'
|
|
30
|
+
},
|
|
31
|
+
borderColor: {
|
|
32
|
+
type: 'color',
|
|
33
|
+
label: '颜色',
|
|
34
|
+
groupsName: '边框',
|
|
35
|
+
followTheme: '@border-color-base'
|
|
36
|
+
},
|
|
37
|
+
borderWidth: {
|
|
38
|
+
type: 'px',
|
|
39
|
+
label: '宽度',
|
|
40
|
+
groupsName: '边框'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
groupsName: '高级',
|
|
44
|
+
icon: 'icon-ico-comp-descriptions',
|
|
45
|
+
title: '描述列表',
|
|
46
|
+
defaultValue: [{
|
|
47
|
+
backgroundColor: '#fafafa',
|
|
48
|
+
textBgColor: 'rgba(0,0,0,0)',
|
|
49
|
+
labelColor: '#1C242E',
|
|
50
|
+
textColor: '#1C242E',
|
|
51
|
+
textPadding: '8px 8px 8px 8px',
|
|
52
|
+
borderColor: '#e5e5e5',
|
|
53
|
+
borderWidth: '1px'
|
|
54
|
+
}],
|
|
55
|
+
followThemes: {
|
|
56
|
+
'@color-text-base': [],
|
|
57
|
+
'@border-color-base': []
|
|
58
|
+
},
|
|
59
|
+
tpl: ".lcdp-description {\n .lcdp-description-wrap {\n --des-text-padding: textPadding;\n --des-border-color: borderColor;\n --des-border-width: borderWidth;\n }\n .lcdp-description-wrap .lcdp-description-cell .lcdp-description-label.bg {\n background: backgroundColor;\n color: labelColor;\n }\n .lcdp-description-wrap .lcdp-description-cell .lcdp-description-text {\n background: textBgColor;\n color: textColor;\n }\n }",
|
|
60
|
+
components: [{
|
|
61
|
+
id: 'Description_180191',
|
|
62
|
+
label: '描述列表',
|
|
63
|
+
compName: 'Description',
|
|
64
|
+
type: 'Description',
|
|
65
|
+
compType: 3,
|
|
66
|
+
compLib: 'comm',
|
|
67
|
+
props: {
|
|
68
|
+
name: '描述列表1',
|
|
69
|
+
layout: 'horizontal',
|
|
70
|
+
basicStatus: 1,
|
|
71
|
+
dataSource: "$[{\t'id': 1,\t'name': '王女士-月嫂服务订单',\t'code': '24475411512',\t'statusText': '服务成功',\t'status': 'success',\t'sales': '18779.70'}, ]$",
|
|
72
|
+
columns: [{
|
|
73
|
+
label: '姓名',
|
|
74
|
+
dataIndex: 'name',
|
|
75
|
+
key: 'column1'
|
|
76
|
+
}, {
|
|
77
|
+
label: '状态',
|
|
78
|
+
dataIndex: 'statusText',
|
|
79
|
+
key: 'column2'
|
|
80
|
+
}, {
|
|
81
|
+
label: '价格',
|
|
82
|
+
dataIndex: 'sales',
|
|
83
|
+
key: 'column3'
|
|
84
|
+
}, {
|
|
85
|
+
label: '价格',
|
|
86
|
+
dataIndex: 'sales',
|
|
87
|
+
key: 'column4'
|
|
88
|
+
}, {
|
|
89
|
+
label: '价格',
|
|
90
|
+
dataIndex: 'sales',
|
|
91
|
+
key: 'column5'
|
|
92
|
+
}, {
|
|
93
|
+
label: '价格',
|
|
94
|
+
dataIndex: 'sales',
|
|
95
|
+
key: 'column6'
|
|
96
|
+
}],
|
|
97
|
+
bordered: true,
|
|
98
|
+
labelSize: '120px',
|
|
99
|
+
colSpan: 24,
|
|
100
|
+
colon: true,
|
|
101
|
+
labelAlign: 'left'
|
|
102
|
+
},
|
|
103
|
+
style: {},
|
|
104
|
+
isContainer: false,
|
|
105
|
+
isBusiObjContainer: true,
|
|
106
|
+
cmdgroup: ['basic'],
|
|
107
|
+
platform: 'h5',
|
|
108
|
+
icon: 'Description',
|
|
109
|
+
description: '',
|
|
110
|
+
image: '',
|
|
111
|
+
groupsName: '数据展示',
|
|
112
|
+
engineApi: ['sandBoxSafeRun', 'renderPopover'],
|
|
113
|
+
setEvents: [],
|
|
114
|
+
isLabelDropBoxChild: false,
|
|
115
|
+
components: [],
|
|
116
|
+
path: ['3602564', 'View_3602564_1']
|
|
117
|
+
}]
|
|
118
|
+
};
|
package/dist/lx-mobile.js
CHANGED
|
@@ -32,6 +32,7 @@ import { Icon } from "./h5config/Icon";
|
|
|
32
32
|
import { ALink } from "./h5config/Link";
|
|
33
33
|
import { Card } from "./h5config/Card";
|
|
34
34
|
import { Accordion } from "./h5config/Accordion";
|
|
35
|
+
import { Description } from "./h5config/Description";
|
|
35
36
|
export var THEME_KEYS_MOBILE_TITLE = {
|
|
36
37
|
'@brand-primary': '主题色',
|
|
37
38
|
'@border-color-base': '边框色',
|
|
@@ -57,6 +58,7 @@ export var MOBILE_ASSETS_CSS_TPL = {
|
|
|
57
58
|
StaticTabs: StaticTabs,
|
|
58
59
|
Grid: Grid,
|
|
59
60
|
SearchView: SearchView,
|
|
61
|
+
Description: Description,
|
|
60
62
|
// TODO: 动态列表自己并没有样式才对
|
|
61
63
|
// LoadMore,
|
|
62
64
|
DForm: DForm,
|
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.5.
|
|
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.5.9",
|
|
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
|
+
}
|