Pull request #2858: KERNEL-11626 refactor组件宽高自适应的一些布局调整

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '4e11dacf635e71f8cc1c63dbb4a85ddfeba01134':
  DESIGN-4237 feat: 复选树支持添加自定义图标
  KERNEL-11626 refactor组件宽高自适应的一些布局调整
  KERNEL-11626 refactor组件宽高自适应的一些布局调整

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: [{
+            rowSize: [0.5, 0.5],
-                type: "bi.label",
+            items: [
-                height: 50,
+                {
-                text: "可以异步获取数据的树"
+                    type: "bi.vtape",
-            }, {
+                    items: [
-                type: "bi.async_tree",
+                        {
-                ref: function (_ref) {
+                            type: "bi.label",
-                    self.syncTree = _ref;
+                            height: 50,
-                },
+                            text: "可以异步获取数据的树"
-                paras: {
-                    selectedValues: {"1": {}, "2": {"1": {}}}
-                },
-                itemsCreator: function (op, callback) {
-                    callback({
-                        items: [{
-                            id: (op.id || "") + "1",
-                            pId: op.id,
-                            text: 1,
-                            isParent: true
                         }, {
-                            id: (op.id || "") + "2",
+                            type: "bi.async_tree",
-                            pId: op.id,
+                            ref: function (_ref) {
-                            text: 2
+                                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",
+                            type: "bi.async_tree",
-                            pId: op.id,
+                            ref: function (_ref) {
-                            text: 3
+                                self.syncTree2 = _ref;
-                        }],
+                            },
-                        hasNext: BI.isNull(op.id)
+                            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);

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", " ")

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,
             }
         };
 

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;

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);