Merge pull request #81933 in DEC/fineui from master to feature/x

* commit '49669e51978f60923088edeea78d0414b5fcbe4f': auto upgrade version to 2.0.20220623154535 DESIGN-4237 feat: 复选树支持添加自定义图标 REPORT-74080 fix: 修复自定义图标无法居中，调整了撑开的公式 KERNEL-11626 refactor组件宽高自适应的一些布局调整 KERNEL-11626 refactor组件宽高自适应的一些布局调整
2 years ago · cf7db9eed2
9 changed files with 2118 additions and 1729 deletions
--- a/demo/js/base/button/demo.button.js
+++ b/demo/js/base/button/demo.button.js
@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, {
                iconGap: 24,
                iconPosition: "top"
            }
+        },{
+            el: {
+                type: "bi.button",
+                text: "自动撑开高度",
+                iconCls: "close-font",
+                textHeight: 32,
+                iconGap: 24,
+                vgap: 16,
+                hgap: 100,
+                iconPosition: "top"
+            }
        }, {
            el: {
                type: "bi.button",
--- a/demo/js/base/tree/demo.sync_tree.js
+++ b/demo/js/base/tree/demo.sync_tree.js
@ -4,7 +4,10 @@ Demo.Func = BI.inherit(BI.Widget, {
    },

    mounted: function () {
-        this.syncTree.stroke({
+        this.syncTree1.stroke({
+            keyword: "1"
+        });
+        this.syncTree2.stroke({
            keyword: "1"
        });
    },
@ -13,40 +16,92 @@ Demo.Func = BI.inherit(BI.Widget, {
        var self = this;
        return {
            type: "bi.vtape",
-            items: [{
-                type: "bi.label",
-                height: 50,
-                text: "可以异步获取数据的树"
-            }, {
-                type: "bi.async_tree",
-                ref: function (_ref) {
-                    self.syncTree = _ref;
-                },
-                paras: {
-                    selectedValues: {"1": {}, "2": {"1": {}}}
-                },
-                itemsCreator: function (op, callback) {
-                    callback({
-                        items: [{
-                            id: (op.id || "") + "1",
-                            pId: op.id,
-                            text: 1,
-                            isParent: true
+            rowSize: [0.5, 0.5],
+            items: [
+                {
+                    type: "bi.vtape",
+                    items: [
+                        {
+                            type: "bi.label",
+                            height: 50,
+                            text: "可以异步获取数据的树"
                        }, {
-                            id: (op.id || "") + "2",
-                            pId: op.id,
-                            text: 2
+                            type: "bi.async_tree",
+                            ref: function (_ref) {
+                                self.syncTree1 = _ref;
+                            },
+                            paras: {
+                                selectedValues: { "1": {}, "2": { "1": {} } }
+                            },
+                            itemsCreator: function (op, callback) {
+                                callback({
+                                    items: [{
+                                        id: (op.id || "") + "1",
+                                        pId: op.id,
+                                        text: (op.id || "") + "1",
+                                        isParent: true,
+                                        iconCls: "close-h-font"
+                                    }, {
+                                        id: (op.id || "") + "2",
+                                        pId: op.id,
+                                        text: (op.id || "") + "2",
+                                        iconCls: "search-font"
+                                    }, {
+                                        id: (op.id || "") + "3",
+                                        pId: op.id,
+                                        text: (op.id || "") + "3",
+                                        iconCls: "date-font"
+                                    }],
+                                    hasNext: BI.isNull(op.id)
+                                });
+                            }
+                        },
+                    ]
+                },
+                {
+                    type: "bi.vtape",
+                    items: [
+                        {
+                            type: "bi.label",
+                            height: 50,
+                            text: "showIcon属性搭配节点iconCls,可以显示图标"
                        }, {
-                            id: (op.id || "") + "3",
-                            pId: op.id,
-                            text: 3
-                        }],
-                        hasNext: BI.isNull(op.id)
-                    });
+                            type: "bi.async_tree",
+                            ref: function (_ref) {
+                                self.syncTree2 = _ref;
+                            },
+                            paras: {
+                                selectedValues: { "1": {}, "2": { "1": {} } }
+                            },
+                            showIcon: true,
+                            itemsCreator: function (op, callback) {
+                                callback({
+                                    items: [{
+                                        id: (op.id || "") + "1",
+                                        pId: op.id,
+                                        text: (op.id || "") + "1",
+                                        isParent: true,
+                                        iconCls: "close-h-font"
+                                    }, {
+                                        id: (op.id || "") + "2",
+                                        pId: op.id,
+                                        text: (op.id || "") + "2",
+                                        iconCls: "search-font"
+                                    }, {
+                                        id: (op.id || "") + "3",
+                                        pId: op.id,
+                                        text: (op.id || "") + "3",
+                                        iconCls: "date-font"
+                                    }],
+                                    hasNext: BI.isNull(op.id)
+                                });
+                            }
+                        },
+                    ]
                }
-            }]
+            ]
        };

    }
 });
-BI.shortcut("demo.sync_tree", Demo.Func);
+BI.shortcut("demo.sync_tree", Demo.Func);
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "fineui",
-  "version": "2.0.20220622110506",
+  "version": "2.0.20220623154535",
  "description": "fineui",
  "main": "dist/fineui.min.js",
  "types": "dist/lib/index.d.ts",
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@ -14,20 +14,29 @@
    BI.Button = BI.inherit(BI.BasicButton, {

        _const: {
-            iconWidth: 16
+            iconWidth: 18
        },

        _defaultConfig: function (props) {
            var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);

+            var adaptiveHeight = 0;
+            if (isVertical(props.iconPosition)) {
+                // 图标高度和文字高度默认相等
+                adaptiveHeight += (props.textHeight || 16) * 2;
+                adaptiveHeight += props.iconGap || 4;
+                var tGap = props.tgap || props.vgap || 2;
+                var bGap = props.bgap || props.vgap || 2;
+                adaptiveHeight += (tGap + bGap);
+            }
+
            return BI.extend(conf, {
                baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
                attributes: {
                    tabIndex: 1
                },
                minWidth: (props.block === true || props.clear === true) ? 0 : 80,
-                // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
-                height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
+                height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
                shadow: props.clear !== true,
                isShadowShowingOnSelected: true,
                readonly: true,
@ -49,7 +58,7 @@
                bgap: 0,
                lgap: 0,
                rgap: 0,
-                iconGap: 8,
+                iconGap: 4,
                iconPosition: "left"
            });
        },
@ -81,7 +90,10 @@
                    cls: o.iconCls,
                    width: this._const.iconWidth,
                    height: lineHeight,
-                    lineHeight: lineHeight
+                    lineHeight: lineHeight,
+                    // 不设置，自定义按钮无法居中
+                    iconWidth: o.iconWidth,
+                    iconHeight: o.iconHeight
                });
                this.text = BI.createWidget({
                    type: "bi.label",
@ -197,7 +209,7 @@

        setIcon: function (cls) {
            var o = this.options;
-            if(this.icon && o.iconCls !== cls) {
+            if (this.icon && o.iconCls !== cls) {
                this.icon.element.removeClass(o.iconCls).addClass(cls);
                o.iconCls = cls;
            }
--- a/src/case/ztree/0.treeview.js
+++ b/src/case/ztree/0.treeview.js
@ -95,7 +95,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
                expandSpeed: "",
                nameIsHTML: true,   // 节点可以用html标签代替
                dblClickExpand: false,
-                showLine: o.showLine
+                showLine: o.showLine,
            },
            callback: {
                beforeExpand: beforeExpand,
@ -360,7 +360,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
                tagName: "span",
                whiteSpace: "nowrap",
                root: true,
-                keyword: o.paras.keyword
+                keyword: o.paras.keyword,
            }, newNode, {
                type: "bi.text",
                text: BI.replaceAll(newNode.text, "\n", " ")
--- a/src/case/ztree/1.asynctree.js
+++ b/src/case/ztree/1.asynctree.js
@ -6,7 +6,10 @@
 */
 BI.AsyncTree = BI.inherit(BI.TreeView, {
    _defaultConfig: function () {
-        return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {});
+        return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {
+            showIcon: false,
+            showLine: true,
+        });
    },
    _init: function () {
        BI.AsyncTree.superclass._init.apply(this, arguments);
@ -42,11 +45,14 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
                }
            },
            view: {
-                showIcon: false,
+                showIcon: o.showIcon,
                expandSpeed: "",
                nameIsHTML: true,
                dblClickExpand: false,
-                showLine: o.showLine
+                showLine: o.showLine,
+                nodeClasses: function (treeId, treeNode) {
+                    return { add: [treeNode.iconCls || ""] };
+                }
            },
            callback: {
                beforeCheck: beforeCheck,
@ -54,7 +60,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
                beforeExpand: beforeExpand,
                onExpand: onExpand,
                onCollapse: onCollapse,
-                onClick: onClick
+                onClick: onClick,
            }
        };

--- a/src/case/ztree/jquery.ztree.core-3.5.js
+++ b/src/case/ztree/jquery.ztree.core-3.5.js
--- a/src/less/base/tree/ztree.less
+++ b/src/less/base/tree/ztree.less
@ -35,6 +35,7 @@
 // 使用1倍图太模糊，这边就使用css自己画了，calc属性支持IE9, IE8反正会走hack, 不影响
 .ztree li ul.line {
  position: relative;
+
  &:before {
    position: absolute;
    content: '';
@ -60,6 +61,7 @@
      border-left: 1px dashed @border-color-dark-gray-line;
    }
  }
+
  .ztree.solid li ul.line {
    &:before {
      border-left: 1px solid @border-color-dark-gray-line-theme-dark;
@ -68,7 +70,7 @@
 }

 .ztree li a {
-  padding: 1px 3px 0 0;
+  padding: 0 3px 0 0;
  margin: 0;
  cursor: pointer;
  height: 23px;
@ -76,11 +78,13 @@
  text-decoration: none;
  vertical-align: top;
  display: inline-block;
+
  .tree-node-text {
    &:not(.disabled) {
      &:hover {
        .background-color(@color-bi-background-highlight, 10%);
      }
+
      &:active {
        color: @color-bi-text-highlight;
        .background-color(@color-bi-background-highlight, 15%);
@ -147,8 +151,6 @@
 .ztree li span.button {
  line-height: 0;
  margin: 0;
-  width: 16px;
-  height: 16px;
  display: inline-block;
  vertical-align: middle;
  border: 0 none;
@ -163,18 +165,22 @@
  &.bi-checkbox {
    border: 1px solid @color-bi-border-dark-line;
    box-sizing: border-box;
+
    &.active {
      background-color: @color-bi-background-highlight;
      border-color: @color-bi-border-highlight;
    }
+
    &.disabled {
      border: 1px solid @color-bi-border-disabled;
      background-color: @color-bi-background-disabled;
+
      &.active {
        border-color: @color-bi-border-disabled;
      }
    }
  }
+
  &.bi-half-button {
    border: 1px solid @color-bi-border-highlight;
    box-sizing: border-box;
--- a/src/widget/editor/editor.text.js
+++ b/src/widget/editor/editor.text.js
@ -28,15 +28,15 @@ BI.TextEditor = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        var border = o.simple ? 1 : 2;
        if (BI.isNumber(o.height)) {
-            this.element.css({height: o.height - border});
+            this.element.css({ height: o.height - border });
        }
        if (BI.isNumber(o.width)) {
-            this.element.css({width: o.width - border});
+            this.element.css({ width: o.width - border });
        }
        this.editor = BI.createWidget({
            type: "bi.editor",
+            element: this,
            simple: o.simple,
-            height: o.height - border,
            hgap: o.hgap,
            vgap: o.vgap,
            lgap: o.lgap,
@ -116,12 +116,6 @@ BI.TextEditor = BI.inherit(BI.Widget, {
        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
            self.fireEvent(BI.TextEditor.EVENT_EMPTY);
        });
-        BI.createWidget({
-            type: "bi.vertical",
-            scrolly: false,
-            element: this,
-            items: [this.editor]
-        });
    },

    setWaterMark: function (v) {
@ -177,4 +171,4 @@ BI.TextEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
 BI.TextEditor.EVENT_REMOVE = "EVENT_REMOVE";
 BI.TextEditor.EVENT_EMPTY = "EVENT_EMPTY";

-BI.shortcut("bi.text_editor", BI.TextEditor);
+BI.shortcut("bi.text_editor", BI.TextEditor);