@lingxiteam/theme-utils 0.1.9 → 0.1.10
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 +4 -0
- package/dist/config/Container.d.ts +1 -0
- package/dist/config/Container.js +1 -0
- package/dist/css.d.ts +1 -1
- package/dist/css.js +2 -1
- package/dist/h5config/Accordion.d.ts +1 -0
- package/dist/h5config/Accordion.js +1 -0
- package/dist/h5config/Card.d.ts +1 -0
- package/dist/h5config/Card.js +1 -0
- package/dist/h5config/DForm.d.ts +2 -0
- package/dist/h5config/DForm.js +3 -1
- package/dist/h5config/DformFile.d.ts +1 -0
- package/dist/h5config/DformFile.js +2 -1
- package/dist/h5config/DformSwitch.d.ts +1 -0
- package/dist/h5config/DformSwitch.js +2 -1
- package/dist/lx-mobile.d.ts +1 -0
- package/dist/lx-mobile.js +11 -1
- package/dist/lx.d.ts +1 -0
- package/dist/lx.js +11 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,6 +87,8 @@ insertLink('12312', 'http://xxx.css', true);
|
|
|
87
87
|
```ts
|
|
88
88
|
{
|
|
89
89
|
type: '类型',
|
|
90
|
+
// 所有的 css 有一个父级类名
|
|
91
|
+
hasPrefixClass: true,
|
|
90
92
|
variable: {
|
|
91
93
|
// 允许配置项
|
|
92
94
|
fontSize: {
|
|
@@ -112,6 +114,8 @@ insertLink('12312', 'http://xxx.css', true);
|
|
|
112
114
|
],
|
|
113
115
|
// 根据上面的配置项和下面的模版解析得到最终挂在的 css
|
|
114
116
|
tpl: '.hh { font-size: fontSize}',
|
|
117
|
+
// 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
|
|
118
|
+
itemCustomTpl: '',
|
|
115
119
|
// 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
|
|
116
120
|
components: [],
|
|
117
121
|
};
|
package/dist/config/Container.js
CHANGED
package/dist/css.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare function stringifyCss(tpl: string, values: any): string;
|
|
2
2
|
export declare function parseCss(tpl: string, a: string): any;
|
|
3
3
|
export declare function normalizeCSS(css: string, selector?: string): string;
|
|
4
|
-
export declare function
|
|
4
|
+
export declare function prefixAnyCSS(css: string, prefix?: string, hasPrefix?: boolean): string;
|
|
5
5
|
export declare function insertRules(id: string, rules: string, selector?: HTMLHeadElement): void;
|
|
6
6
|
export declare function insertLink(id: string, href: string, insertBefore?: boolean): void;
|
package/dist/css.js
CHANGED
|
@@ -84,10 +84,11 @@ export function normalizeCSS(css, selector) {
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
// 这个解法不是特别好，但是组件有些是有嵌套的 div 有些是没有嵌套，所以给可用的 class 添加一个 &. 的样式前缀
|
|
87
|
-
export function
|
|
87
|
+
export function prefixAnyCSS(css, prefix, hasPrefix) {
|
|
88
88
|
if (prefix) {
|
|
89
89
|
var hasD = prefix.startsWith('.') || prefix.startsWith('#');
|
|
90
90
|
var prefixCss = "".concat(hasD ? '' : '.').concat(prefix);
|
|
91
|
+
if (hasPrefix) return "".concat(prefixCss).concat(css);
|
|
91
92
|
return css.split('\n').map(function (i) {
|
|
92
93
|
if (i.trimStart().startsWith('.')) {
|
|
93
94
|
return "".concat(prefixCss).concat(i.trimStart());
|
package/dist/h5config/Card.d.ts
CHANGED
package/dist/h5config/Card.js
CHANGED
package/dist/h5config/DForm.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const DForm: {
|
|
2
2
|
type: string;
|
|
3
|
+
hasPrefixClass: boolean;
|
|
3
4
|
variable: {
|
|
4
5
|
backgroundColor: {
|
|
5
6
|
type: string;
|
|
@@ -110,6 +111,7 @@ export declare const DForm: {
|
|
|
110
111
|
iconSize: string;
|
|
111
112
|
}[];
|
|
112
113
|
tpl: string;
|
|
114
|
+
itemCustomTpl: string;
|
|
113
115
|
components: {
|
|
114
116
|
id: string;
|
|
115
117
|
label: string;
|
package/dist/h5config/DForm.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export var DForm = {
|
|
2
2
|
type: 'DForm',
|
|
3
|
+
hasPrefixClass: true,
|
|
3
4
|
variable: {
|
|
4
5
|
backgroundColor: {
|
|
5
6
|
type: 'color',
|
|
@@ -151,7 +152,8 @@ export var DForm = {
|
|
|
151
152
|
iconColor: 'rgba(0, 0, 0, 0.45)',
|
|
152
153
|
iconSize: '16px'
|
|
153
154
|
}],
|
|
154
|
-
tpl: "
|
|
155
|
+
tpl: ".dynamic-form-wrapper {\n background-color: backgroundColor;\n .lcdp-form-item {\n --color: textColor;\n --font-size: fontSize;\n .adm-text-area{\n --color: textColor;\n --font-size: fontSize;\n }\n .lingxiteam-dform-title {\n color: labelTextColor;\n font-size: labelFontSize !important;\n line-height: labelLineHeight;\n font-weight: labelFontWeight;\n text-align: headTextAlign;\n }\n .lingxiteam-dform-input-item-value input{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n padding: paddingValue;\n text-align: headTextAlign;\n font-size: fontSize;\n }\n \n .lingxiteam-dform-radio-label{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n padding: paddingValue;\n text-align: headTextAlign;\n font-size: fontSize;\n \n }\n .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-label{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n text-align: headTextAlign;\n font-size: fontSize;\n \n }\n .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-text{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n text-align: headTextAlign;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-date-text{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n text-align: headTextAlign;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-rangdate-h-value{\n color: textColor;\n line-height: lineHeight;\n text-align: headTextAlign;\n font-size: fontSize;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-area-group-value-area textarea{\n line-height: lineHeight;\n padding: paddingValue;\n font-weight: fontWeight;\n font-size: fontSize;\n color: textColor;\n text-align: headTextAlign;\n \n }\n .cust-icon{\n width: iconSize;\n height: iconSize;\n }\n .cust-icon svg{\n color: iconColor;\n fill: iconColor;\n width: iconSize;\n height: iconSize;\n }\n .lingxiteam-dform-right-content{\n width: iconSize;\n height: iconSize;\n overflow: hidden;\n }\n .lingxiteam-dform-arrow-horizontal{\n background-image: none;\n width: iconSize;\n height: iconSize;\n position: relative;\n }\n .lingxiteam-dform-arrow-horizontal::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: iconSize;\n height: iconSize;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate%28-5809.000000%2C%20-8482.000000%29%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n background-repeat: round;\n transform: translateX(-100%);\n background-size: 100%;\n filter: drop-shadow(iconSize 0 iconColor);\n }\n }\n }\n ",
|
|
156
|
+
itemCustomTpl: ".lcdp-form-item {\n --color: textColor;\n --font-size: fontSize;\n .adm-text-area{\n --color: textColor;\n --font-size: fontSize;\n }\n .lingxiteam-dform-title {\n color: labelTextColor;\n font-size: labelFontSize !important;\n line-height: labelLineHeight;\n font-weight: labelFontWeight;\n text-align: headTextAlign;\n }\n .lingxiteam-dform-input-item-value input{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n padding: paddingValue;\n text-align: headTextAlign;\n font-size: fontSize;\n }\n \n .lingxiteam-dform-radio-label{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n padding: paddingValue;\n text-align: headTextAlign;\n font-size: fontSize;\n \n }\n .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-label{\n color: textColor;\n line-height: lineHeight;\n font-weight: fontWeight;\n text-align: headTextAlign;\n font-size: fontSize;\n \n }\n .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-text{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n text-align: headTextAlign;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-date-text{\n color: textColor;\n line-height: lineHeight;\n font-size: fontSize;\n text-align: headTextAlign;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-rangdate-h-value{\n color: textColor;\n line-height: lineHeight;\n text-align: headTextAlign;\n font-size: fontSize;\n padding: paddingValue;\n font-weight: fontWeight;\n }\n .lingxiteam-dform-area-group-value-area textarea{\n line-height: lineHeight;\n padding: paddingValue;\n font-weight: fontWeight;\n font-size: fontSize;\n color: textColor;\n text-align: headTextAlign;\n \n }\n .cust-icon{\n width: iconSize;\n height: iconSize;\n }\n .cust-icon svg{\n color: iconColor;\n fill: iconColor;\n width: iconSize;\n height: iconSize;\n }\n .lingxiteam-dform-right-content{\n width: iconSize;\n height: iconSize;\n overflow: hidden;\n }\n .lingxiteam-dform-arrow-horizontal{\n background-image: none;\n width: iconSize;\n height: iconSize;\n position: relative;\n }\n .lingxiteam-dform-arrow-horizontal::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: iconSize;\n height: iconSize;\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate%28-5809.000000%2C%20-8482.000000%29%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n background-repeat: round;\n transform: translateX(-100%);\n background-size: 100%;\n filter: drop-shadow(iconSize 0 iconColor);\n }\n }",
|
|
155
157
|
components: [{
|
|
156
158
|
id: 'DForm_458695',
|
|
157
159
|
label: '表单',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export var DformFile = {
|
|
2
2
|
type: 'DformFile',
|
|
3
|
+
hasPrefixClass: true,
|
|
3
4
|
variable: {
|
|
4
5
|
btnBgColor: {
|
|
5
6
|
type: 'color',
|
|
@@ -73,7 +74,7 @@ export var DformFile = {
|
|
|
73
74
|
btnIconColor: '#108ee9',
|
|
74
75
|
btnBorderRadius: '100px'
|
|
75
76
|
}],
|
|
76
|
-
tpl: "
|
|
77
|
+
tpl: ".lcdp-form-item {\n .lingxiteam-dform-file-extra-btn{\n border-radius: btnBorderRadius;\n background: btnBgColor;\n > span {\n color: btnIconColor;\n }\n }\n }",
|
|
77
78
|
components: [{
|
|
78
79
|
id: 'DForm_333712',
|
|
79
80
|
label: '表单',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export var DformSwitch = {
|
|
2
2
|
type: 'DformSwitch',
|
|
3
|
+
hasPrefixClass: true,
|
|
3
4
|
variable: {
|
|
4
5
|
openColor: {
|
|
5
6
|
type: 'color',
|
|
@@ -75,7 +76,7 @@ export var DformSwitch = {
|
|
|
75
76
|
openColor: '#108ee9',
|
|
76
77
|
closeColor: '#ddd'
|
|
77
78
|
}],
|
|
78
|
-
tpl: "
|
|
79
|
+
tpl: ".lcdp-form-item {\n .adm-switch.adm-switch-checked .adm-switch-checkbox{\n background: openColor;\n }\n .lingxiteam-dform-switch .adm-switch-checkbox{\n background: closeColor;\n }\n .lingxiteam-dform-switch .adm-switch-checkbox::before{\n background: closeColor;\n }\n }\n ",
|
|
79
80
|
components: [{
|
|
80
81
|
id: 'DForm_333712',
|
|
81
82
|
label: '表单',
|
package/dist/lx-mobile.d.ts
CHANGED
|
@@ -7,3 +7,4 @@ export declare function parseValueRem(values: any): any;
|
|
|
7
7
|
export declare function stringifyMobileCssByTypePreview(type: string, values: any): string;
|
|
8
8
|
export declare function stringifyMobileCssByType(type: string, values: any): string;
|
|
9
9
|
export declare function parseMobileCssByType(type: string, css: string): any;
|
|
10
|
+
export declare function prefixMobileCSS(type: string, values: any, prefix: string): string;
|
package/dist/lx-mobile.js
CHANGED
|
@@ -4,7 +4,7 @@ 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
|
-
import { stringifyCss, parseCss } from "./css";
|
|
7
|
+
import { stringifyCss, parseCss, prefixAnyCSS } from "./css";
|
|
8
8
|
import { objToListByGroupsName } from "./utils";
|
|
9
9
|
import { Button } from "./h5config/Button";
|
|
10
10
|
import { DynamicTable } from "./h5config/Table";
|
|
@@ -146,4 +146,14 @@ export function stringifyMobileCssByType(type, values) {
|
|
|
146
146
|
export function parseMobileCssByType(type, css) {
|
|
147
147
|
var item = getMobileItemByType(type);
|
|
148
148
|
return parseValueRem(parseCss(item.tpl, css));
|
|
149
|
+
}
|
|
150
|
+
export function prefixMobileCSS(type, values, prefix) {
|
|
151
|
+
if (extend[type]) {
|
|
152
|
+
var _cfg$itemCustomTpl;
|
|
153
|
+
var cfg = getMobileItemByType(extend[type]);
|
|
154
|
+
var _item2 = getMobileItemByType(type);
|
|
155
|
+
return prefixAnyCSS(stringifyCss((_cfg$itemCustomTpl = cfg === null || cfg === void 0 ? void 0 : cfg.itemCustomTpl) !== null && _cfg$itemCustomTpl !== void 0 ? _cfg$itemCustomTpl : cfg === null || cfg === void 0 ? void 0 : cfg.tpl, px2rem(_objectSpread(_objectSpread({}, cfg.defaultValue[0]), values))), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass) + prefixAnyCSS(stringifyCss(_item2.tpl, px2rem(values)), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass);
|
|
156
|
+
}
|
|
157
|
+
var item = getMobileItemByType(type);
|
|
158
|
+
return prefixAnyCSS(stringifyCss(item.tpl, px2rem(values)), prefix, item === null || item === void 0 ? void 0 : item.hasPrefixClass);
|
|
149
159
|
}
|
package/dist/lx.d.ts
CHANGED
|
@@ -4,3 +4,4 @@ export declare function getItemByType(type: string): any;
|
|
|
4
4
|
export declare function stringifyCssByType(type: string, values: any): string;
|
|
5
5
|
export declare function stringifyCssByTypePreview(type: string, values: any): string;
|
|
6
6
|
export declare function parseCssByType(type: string, css: string): any;
|
|
7
|
+
export declare function prefixCSS(type: string, values: any, prefix: string): string;
|
package/dist/lx.js
CHANGED
|
@@ -4,7 +4,7 @@ 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
|
-
import { stringifyCss, parseCss } from "./css";
|
|
7
|
+
import { stringifyCss, parseCss, prefixAnyCSS } from "./css";
|
|
8
8
|
import { objToListByGroupsName } from "./utils";
|
|
9
9
|
import { Button } from "./config/Button";
|
|
10
10
|
// 文本放在不同的组件下，会有不同的效果，暂不支持配置
|
|
@@ -108,4 +108,14 @@ export function stringifyCssByTypePreview(type, values) {
|
|
|
108
108
|
export function parseCssByType(type, css) {
|
|
109
109
|
var item = getItemByType(type);
|
|
110
110
|
return parseCss(item.tpl, css);
|
|
111
|
+
}
|
|
112
|
+
export function prefixCSS(type, values, prefix) {
|
|
113
|
+
if (extend[type]) {
|
|
114
|
+
var _cfg$itemCustomTpl;
|
|
115
|
+
var cfg = getItemByType(extend[type]);
|
|
116
|
+
var _item2 = getItemByType(type);
|
|
117
|
+
return prefixAnyCSS(stringifyCss((_cfg$itemCustomTpl = cfg === null || cfg === void 0 ? void 0 : cfg.itemCustomTpl) !== null && _cfg$itemCustomTpl !== void 0 ? _cfg$itemCustomTpl : cfg === null || cfg === void 0 ? void 0 : cfg.tpl, _objectSpread(_objectSpread({}, cfg.defaultValue[0]), values)), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass) + prefixAnyCSS(stringifyCss(_item2.tpl, values), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass);
|
|
118
|
+
}
|
|
119
|
+
var item = getItemByType(type);
|
|
120
|
+
return prefixAnyCSS(stringifyCss(item.tpl, values), prefix, item === null || item === void 0 ? void 0 : item.hasPrefixClass);
|
|
111
121
|
}
|