Pull request #1858: 无JIRA任务 left_right_vertical_adapt布局当右边元素出现invisible的时候的情况

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

* commit 'a0897e74f95e44b0a9a44f063d85222d0c8a30b9':
  left_right_vertical_adapt布局当右边元素出现invisible的时候的情况
  left_right_vertical_adapt布局当右边元素出现invisible的时候的情况
  left_right_vertical_adapt布局当右边元素出现invisible的时候的情况

src/core/widget.js

@@ -183,6 +183,7 @@
             if (o.invisible) {
                 // 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性
                 this.element.css("display", "none");
+                this.element.addClass("invisible");
             }
         },
 
@@ -354,9 +355,11 @@
             if (visible === true) {
                 // 用this.element.show()会把display属性改成block
                 this.element.css("display", "");
+                this.element.removeClass("invisible");
                 this._mount();
             } else if (visible === false) {
                 this.element.css("display", "none");
+                this.element.addClass("invisible");
             }
             this.fireEvent(BI.Events.VIEW, visible);
         },

src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@@ -55,14 +55,14 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             return json;
         });
         rightItems = BI.map(rightItems, function (i, item) {
-            if (i === 0) {
-                if (BI.isWidget(item)) {
-                    item.element.addClass("flex-left-auto");
-                } else {
-                    var t = BI.stripEL(item);
-                    t.cls = (t.cls || "") + " flex-left-auto";
-                }
+            // if (i === 0) {
+            if (BI.isWidget(item)) {
+                item.element.addClass("flex-left-auto");
+            } else {
+                var t = BI.stripEL(item);
+                t.cls = (t.cls || "") + " flex-left-auto";
             }
+            // }
             var json = {
                 el: BI.stripEL(item)
             };

src/core/wrapper/layout/layout.td.js

@@ -8,6 +8,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-td",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Middle,
             hgap: 0,
             vgap: 0,
             tgap: 0,
@@ -101,15 +102,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 });
             }
             first(w, this.rows++, i);
+            var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]);
             var td = BI._lazyCreateWidget({
                 type: "bi.default",
-                width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]),
+                width: width,
                 tagName: "td",
                 items: [w]
             });
+            // 对于表现为td的元素设置最大宽度，有几点需要注意
+            // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
+            // 2、不能给多个td设置最大宽度，这样只会平分宽度
+            // 3、多百分比宽度就算了
             td.element.css({
+                "max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width,
                 position: "relative",
-                "vertical-align": "middle",
+                "vertical-align": o.verticalAlign,
                 margin: "0",
                 padding: "0",
                 border: "none"

src/less/core/wrapper/flex.leftrightvertical.center.less

@@ -1,5 +1,16 @@
 .bi-f-lr-v-c {
   > .flex-left-auto {
     margin-left: auto;
+
+    // 当隐藏的元素出现在中间某个元素的情况
+    + .flex-left-auto.invisible {
+      + .flex-left-auto {
+        margin-left: initial;
+      }
+    }
+
+    &:not(.invisible) + .flex-left-auto {
+      margin-left: initial;
+    }
   }
 }