@lingxiteam/theme-utils 0.1.7 → 0.1.8

package/README.md

@@ -1,11 +1,11 @@
-# theme-utils
+# @lingxiteam/theme-utils
 
 antd@4 theme class utils, css utils
 
 ```js
-pnpm i theme-utils
+pnpm i @lingxiteam/theme-utils
 
-import {} from 'theme-utils';
+import {} from '@lingxiteam/theme-utils';
 ```
 
 新建场景描述：
@@ -81,3 +81,48 @@ insertRules('12312', css);
 ```js
 insertLink('12312', 'http://xxx.css', true);
 ```
+
+## 关于配置
+
+```ts
+  {
+    type: '类型',
+    variable: {
+      // 允许配置项
+      fontSize: { 
+        // 对应编辑器的类型，px color select marginInput 四种
+        type: 'px', 
+        label: '尺寸', 
+        groupsName: '文字' ,
+        desc: '说明文字'，
+        // 继承其他组件属性时要标记不可编辑
+        canEdit: false,
+        // 编辑从什么地方支撑这个属性
+        extendsKey: 'Form',
+      },
+    },
+    groupsName: '分组名称',
+    icon: '图标名称要和组件库对应上',
+    title: '标题',
+    defaultValue: [
+      {
+        // 上面定义的配置项的默认值
+        fontSize: '14px',
+      },
+    ],
+    // 根据上面的配置项和下面的模版解析得到最终挂在的 css
+    tpl: '.hh { font-size: fontSize}',
+    // 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
+    components: [],
+  };
+```
+
+### 关于继承
+
+因为继承在预览和自定义样式时需要先加载父级的样式，所以需要在工具中写明哪些组件需要先获取。
+
+如： theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
+
+```ts
+const extend: any = { }
+```

package/dist/config/Cascader.js

@@ -79,7 +79,7 @@ export var Cascader = {
   title: '级联选择',
   defaultValue: [{
     iconFontSize: '12px',
-    iconTop: '12px',
+    iconTop: '16px',
     iconColor: 'rgba(28,36,46,.25)'
   }],
   tpl: ".ued-cascader-wrap .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-cascader-wrap .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }",

package/dist/config/Input.js

@@ -62,7 +62,7 @@ export var Input = {
   icon: 'icon-ico-comp-ipt',
   title: '输入框',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/InputNumber.js

@@ -62,7 +62,7 @@ export var InputNumber = {
   icon: 'icon-ico-comp-inputnumber',
   title: '数字输入框',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/MultipleSelect.js

@@ -62,7 +62,7 @@ export var MultipleSelect = {
   icon: 'icon-ico-comp-multipleselect',
   title: '下拉复选',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Select.js

@@ -79,7 +79,7 @@ export var Select = {
   title: '下拉单选',
   defaultValue: [{
     iconFontSize: '12px',
-    iconTop: '12px',
+    iconTop: '16px',
     iconColor: 'rgba(28,36,46,.25)'
   }],
   tpl: ".ued-select-wrap .pcfactory-select-arrow{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    top: iconTop;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }\n  .ued-select-wrap .pcfactory-select-clear{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    top: iconTop;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }",

package/dist/config/Text.js

@@ -25,6 +25,6 @@ export var Text = {
     lineHeight: '0px',
     fontSize: '14px'
   }],
-  tpl: "",
+  tpl: '',
   components: []
 };

package/dist/config/TextArea.js

@@ -62,7 +62,7 @@ export var TextArea = {
   icon: 'icon-ico-comp-textarea',
   title: '多行输入',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/TreeSelect.js

@@ -80,7 +80,7 @@ export var TreeSelect = {
   defaultValue: [{
     iconFontSize: '12px',
     iconColor: 'rgba(28,36,46,.25)',
-    iconTop: '12px'
+    iconTop: '16px'
   }],
   tpl: ".ued-treeSelect-wrap .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-treeSelect-wrap .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }",
   components: [{

package/dist/css.js

@@ -12,6 +12,8 @@ import { compile, stringify, serialize } from 'stylis';
 export function stringifyCss(tpl, values) {
   if (!tpl) return '';
   var result = tpl;
+
+  // eslint-disable-next-line guard-for-in
   for (var key in values) {
     var value = values[key];
     var regex = new RegExp("".concat(key, "\\b"), 'g');
@@ -26,6 +28,7 @@ export function parseCss(tpl, a) {
   var aRegex = /\.(\w+)\s*{\s*(.*?)\s*}/g;
   var aMatches = _toConsumableArray(a.matchAll(aRegex));
   var result = {};
+  // eslint-disable-next-line
   var _loop = function _loop() {
     var tplMatch = tplMatches[i];
     var tplSelector = tplMatch[1];
@@ -39,6 +42,7 @@ export function parseCss(tpl, a) {
       var aStyles = aMatch[2].split(';').map(function (style) {
         return style.trim();
       }).filter(Boolean);
+      // eslint-disable-next-line
       var _loop2 = function _loop2() {
         var tplStyle = tplStyles[j];
         var _tplStyle$split$map = tplStyle.split(':').map(function (item) {
@@ -97,10 +101,10 @@ export function insertRules(id, rules) {
   var selector = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.head;
   var style = document.getElementById(id);
   if (!style) {
-    var _style = document.createElement('style');
-    _style.id = id;
-    (selector !== null && selector !== void 0 ? selector : document.head).appendChild(_style);
-    _style.innerHTML = rules;
+    style = document.createElement('style');
+    style.id = id;
+    (selector !== null && selector !== void 0 ? selector : document.head).appendChild(style);
+    style.innerHTML = rules;
   } else {
     style.innerHTML = rules;
   }

package/dist/h5config/Accordion.js

@@ -107,7 +107,7 @@ export var Accordion = {
     borderColor: '#DDD',
     borderRadius: '4px'
   }],
-  tpl: "\n  .lcdp-accordion .lcdp-accordion-header{\n    color: textColor;\n    font-weight: fontWeight;\n    font-size: fontSize;\n    line-height: lineHeight;\n    background: backgroundColor;\n  }\n  .lcdp-accordion-header-default-icon{\n    height: tagSize;\n    background: titleColor;\n    margin-right: tagMargin;\n  }\n  .adm-list-item-content{\n    border-color: lineColor;\n  }\n\n  .lcdp-accordion .adm-collapse-arrow  svg{\n    color: arrowColor;\n    width:  arrowSize;\n    height: arrowSize;\n  }\n  .lcdp-accordion .adm-list-item-content-main{\n    background: bodyBgColor;\n  }\n  .lcdp-accordion{\n    .adm-collapse{\n      border-radius: borderRadius;\n      border-color: borderColor !important;\n    }\n  }",
+  tpl: "\n  .lcdp-accordion .lcdp-accordion-header{\n    color: textColor;\n    font-weight: fontWeight;\n    font-size: fontSize;\n    line-height: lineHeight;\n    background: backgroundColor;\n  }\n  .lcdp-accordion .lcdp-accordion-header-default-icon{\n    height: tagSize;\n    background: titleColor;\n    margin-right: tagMargin;\n  }\n  .adm-list-item-content{\n    border-color: lineColor;\n  }\n\n  .lcdp-accordion .adm-collapse-arrow  svg{\n    color: arrowColor;\n    width:  arrowSize;\n    height: arrowSize;\n  }\n  .lcdp-accordion .adm-list-item-content-main{\n    background: bodyBgColor;\n  }\n  .lcdp-accordion{\n    .adm-collapse{\n      border-radius: borderRadius;\n      border-color: borderColor !important;\n    }\n  }",
   components: [{
     id: 'Accordion_960849',
     label: '折叠面板',

package/dist/h5config/DAddressPicker.js

@@ -144,7 +144,7 @@ export var DAddressPicker = {
   icon: 'icon-ico-comp-app-DAddressPicker',
   title: '地址',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DMultiplePicker.js

@@ -144,7 +144,7 @@ export var DMultiplePicker = {
   icon: 'icon-ico-comp-app-DMultiplePicker',
   title: '多项选择',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DformDate.js

@@ -144,7 +144,7 @@ export var DformDate = {
   icon: 'icon-ico-comp-app-DformDate',
   title: '时间选择',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DformInputNumber.js

@@ -128,7 +128,7 @@ export var DformInputNumber = {
   icon: 'icon-ico-comp-app-inputnumber',
   title: '数字输入',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DformPicker.js

@@ -144,7 +144,7 @@ export var DformPicker = {
   icon: 'icon-ico-comp-app-DformPicker',
   title: '单项选择',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DformSelect.js

@@ -144,7 +144,7 @@ export var DformSelect = {
   icon: 'icon-ico-comp-app-DformSelect',
   title: '多列选择',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/Divider.js

@@ -11,7 +11,7 @@ export var Divider = {
   icon: 'icon-ico-comp-divider',
   title: '分割线',
   defaultValue: [{}],
-  tpl: "",
+  tpl: '',
   components: [{
     id: 'Divider_0510467',
     label: '分割线',

package/dist/h5config/Grid.js

@@ -77,7 +77,7 @@ export var Grid = {
     fontSize: '12px',
     fontWeight: '400'
   }],
-  tpl: "\n    .use-app-grid{\n      background-color: backgroundColor;\n    }\n    .am-grid {\n      border-radius: borderRadius;\n      --adm-font-size-4: fontSize;\n      --adm-color-text: textColor\n    }\n    .am-grid.am-grid-line:not(.am-grid-carousel){\n      border:1PX solid borderColor;\n      border-bottom:none;\n    }\n    .am-grid.am-grid-line .am-grid-flex:last-child{\n      border-color: borderColor;\n      border-bottom-right-radius: borderRadius;\n      border-bottom-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex:first-child{\n      border-top-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex .am-grid-flex-item:first-child{\n      border: none;\n    }\n    .am-grid.am-grid-line .am-grid-flex{\n      border-color: lineColor;\n    }\n    .am-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .am-grid-icon{\n      width: iconSize;\n    }\n    .am-grid .am-grid-flex .am-grid-flex-item .am-grid-item-content .am-grid-item-inner-content .am-grid-text{\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }",
+  tpl: "\n    .use-app-grid{\n      background-color: backgroundColor;\n      border-radius: borderRadius;\n    }\n    .am-grid {\n      background-color: backgroundColor;\n      border-radius: borderRadius;\n      --adm-font-size-4: fontSize;\n      --adm-color-text: textColor\n    }\n    .am-grid.am-grid-line:not(.am-grid-carousel){\n      border:1PX solid borderColor;\n      border-bottom:none;\n    }\n    .am-grid.am-grid-line .am-grid-flex:last-child{\n      border-color: borderColor;\n      border-bottom-right-radius: borderRadius;\n      border-bottom-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex:first-child{\n      border-top-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex .am-grid-flex-item:first-child{\n      border: none;\n    }\n    .am-grid.am-grid-line .am-grid-flex{\n      border-color: lineColor;\n    }\n    .am-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .am-grid-icon{\n      width: iconSize;\n    }\n    .am-grid .am-grid-flex .am-grid-flex-item .am-grid-item-content .am-grid-item-inner-content .am-grid-text{\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }",
   components: [{
     id: 'Grid_842271',
     label: '宫格',

package/dist/h5config/SearchView.js

@@ -97,7 +97,7 @@ export var SearchView = {
     sBorderColor: 'rgba(0,0,0,0)',
     sBorderRadius: '18px'
   }],
-  tpl: "\n    .alita-search-view-wrap{\n      --adm-color-background: backgroundColor;\n      padding: paddingValue;\n      border: 1PX solid borderColor;\n      border-radius: borderRadius;\n    }\n    .alita-search-bar-input{\n      background-color: sBackgroundColor;\ncolor: textColor;\nfont-size: fontSize;\nfont-weight: fontWeight;\npadding: sPaddingValue;\nborder-radius: sBorderRadius;\nborder: 1PX solid sBorderColor;\n    }\n    .alita-search-bar-search{\n      width: iconSize;\n    height: iconSize;\n    }",
+  tpl: "\n    .alita-search-view-wrap{\n      --adm-color-background: backgroundColor;\n      padding: paddingValue;\n      border: 1PX solid borderColor;\n      border-radius: borderRadius;\n    }\n    .alita-search-view-wrap .alita-search-bar-input{\n      background-color: sBackgroundColor;\ncolor: textColor;\nfont-size: fontSize;\nfont-weight: fontWeight;\npadding: sPaddingValue;\nborder-radius: sBorderRadius;\nborder: 1PX solid sBorderColor;\n    }\n    .alita-search-view-wrap .alita-search-bar-search{\n      width: iconSize;\n    height: iconSize;\n    }",
   components: [{
     id: 'SearchView_197467',
     label: '搜索',

package/dist/h5config/StaticTabs.js

@@ -117,13 +117,13 @@ export var StaticTabs = {
     fontWeight: '400',
     fontSize: '15px',
     lineHeight: '100%',
-    selectBorderRadius: '0',
+    selectBorderRadius: '12px',
     // paddingValue:'8px 0 8px 0',
     bodyBgColor: 'rgba(0,0,0,0)',
     borderColor: 'rgba(0,0,0,0)',
     lineColor: '#108ee9'
   }],
-  tpl: "\n\n  .am-tabs-default-bar-tab{\nfont-weight: fontWeight;\nborder-top-left-radius: selectBorderRadius;\n  border-top-right-radius: selectBorderRadius;\n    color: textColor;\nfont-size: fontSize;\nborder: 1px solid borderColor;\nbackground-color: backgroundColor;\n  }\n  .am-tabs-default-bar-tab-active {\n    background-color: selectBgColor;\n   color: selectTextColor;\nfont-weight: selectFontWeight;\n  }\n  .am-tabs-pane-wrap{\n    background-color: bodyBgColor;\n  }\n  .am-tabs-default-bar-underline{\n    border-color: lineColor;\n  }",
+  tpl: "\n  .am-tabs-default-bar-top .am-tabs-default-bar-tab{\nfont-weight: fontWeight;\nborder-top-left-radius: selectBorderRadius;\n  border-top-right-radius: selectBorderRadius;\n    color: textColor;\nfont-size: fontSize;\nborder: 1px solid borderColor;\nbackground-color: backgroundColor;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before, .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::after{\n    background: selectBgColor;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before{\n    left: 0;\n  }\n  .am-tabs-bottom, .am-tabs-top{\n    border-radius:  selectBorderRadius;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active {\n    background-color: selectBgColor;\n   color: selectTextColor;\nfont-weight: selectFontWeight;\n  }\n  .am-tabs-pane-wrap{\n    background-color: bodyBgColor;\n  }\n  .am-tabs-default-bar-animated .am-tabs-default-bar-underline{\n    border-color: lineColor;\n  }",
   components: [{
     id: 'StaticTabs_828878',
     label: '静态标签页',

package/dist/h5config/Table.d.ts

@@ -1,4 +1,4 @@
-export declare const Table: {
+export declare const DynamicTable: {
     type: string;
     variable: {
         textColor: {

package/dist/h5config/Table.js

@@ -1,5 +1,5 @@
-export var Table = {
-  type: 'Table',
+export var DynamicTable = {
+  type: 'DynamicTable',
   variable: {
     textColor: {
       type: 'color',

package/dist/lx-mobile.js

@@ -7,7 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { stringifyCss, parseCss } from "./css";
 import { objToListByGroupsName } from "./utils";
 import { Button } from "./h5config/Button";
-import { Table } from "./h5config/Table";
+import { DynamicTable } from "./h5config/Table";
 import { FilterItems } from "./h5config/FilterItems";
 import { NoticeBarPlus } from "./h5config/NoticeBarPlus";
 import { StaticTabs } from "./h5config/StaticTabs";
@@ -39,7 +39,7 @@ export var MOBILE_ASSETS_CSS_TPL = {
   // TODO: 分割线 style 写死，最后修改方案
   // Divider,
   Card: Card,
-  Table: Table,
+  DynamicTable: DynamicTable,
   FilterItems: FilterItems,
   NoticeBarPlus: NoticeBarPlus,
   StaticTabs: StaticTabs,
@@ -98,18 +98,14 @@ export function px2rem(obj) {
         var remValues = values.map(function (val) {
           if (val.includes('px')) {
             var parsedValue = parseFloat(val);
-            return parsedValue / 50 + 'rem';
+            return "".concat(parsedValue / 50, "rem");
           }
           return val;
         });
         value = remValues.join(' ');
-      }
-      // 处理其他属性的值
-      else {
-        if (value.includes('px')) {
-          var parsedValue = parseFloat(value);
-          value = parsedValue / 50 + 'rem';
-        }
+      } else if (value.includes('px')) {
+        var parsedValue = parseFloat(value);
+        value = "".concat(parsedValue / 50, "rem");
       }
       remObj[key] = value;
     }
@@ -128,6 +124,7 @@ export function parseValueRem(values) {
     if ((_values$key = values[key]) !== null && _values$key !== void 0 && _values$key.includes('rem')) {
       values[key] = rem2px(values[key]);
     }
+    return key;
   });
   return values;
 }
@@ -136,12 +133,11 @@ export function parseValueRem(values) {
 export function stringifyMobileCssByTypePreview(type, values) {
   if (extend[type]) {
     var cfg = getMobileItemByType(extend[type]);
-    var item = getMobileItemByType(type);
-    return stringifyCss(cfg.tpl, px2rem(_objectSpread(_objectSpread({}, cfg.defaultValue[0]), values))) + stringifyCss(item.tpl, px2rem(values));
-  } else {
     var _item = getMobileItemByType(type);
-    return stringifyCss(_item.tpl, px2rem(values));
+    return stringifyCss(cfg.tpl, px2rem(_objectSpread(_objectSpread({}, cfg.defaultValue[0]), values))) + stringifyCss(_item.tpl, px2rem(values));
   }
+  var item = getMobileItemByType(type);
+  return stringifyCss(item.tpl, px2rem(values));
 }
 export function stringifyMobileCssByType(type, values) {
   var item = getMobileItemByType(type);

package/dist/lx.js

@@ -99,12 +99,11 @@ export function stringifyCssByType(type, values) {
 export function stringifyCssByTypePreview(type, values) {
   if (extend[type]) {
     var cfg = getItemByType(extend[type]);
-    var item = getItemByType(type);
-    return stringifyCss(cfg.tpl, _objectSpread(_objectSpread({}, cfg.defaultValue[0]), values)) + stringifyCss(item.tpl, values);
-  } else {
     var _item = getItemByType(type);
-    return stringifyCss(_item.tpl, values);
+    return stringifyCss(cfg.tpl, _objectSpread(_objectSpread({}, cfg.defaultValue[0]), values)) + stringifyCss(_item.tpl, values);
   }
+  var item = getItemByType(type);
+  return stringifyCss(item.tpl, values);
 }
 export function parseCssByType(type, css) {
   var item = getItemByType(type);

package/dist/utils.js

@@ -13,6 +13,7 @@ export function objToListByGroupsName(obj) {
   var groups = {};
 
   // 遍历对象，根据groupsName属性进行分组
+  // eslint-disable-next-line guard-for-in
   for (var key in obj) {
     var item = obj[key];
     var groupName = item.groupsName;
@@ -42,6 +43,7 @@ export function __objToListByGroupsName(obj) {
   var groups = {};
 
   // 遍历对象，根据groupsName属性进行分组
+  // eslint-disable-next-line guard-for-in
   for (var key in obj) {
     var item = obj[key];
     var groupName = item.groupsName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/theme-utils",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "",
   "keywords": [],
   "license": "MIT",