Pull request #1870: 无JIRA任务生命周期严格按照beforemount render mounted的顺序执行

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit 'e47da52d7b1f05073229600bb88a42840fdfd3b6': 布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统布局大一统生命周期严格按照beforemount render mounted的顺序执行
4 years ago · 937be63b0b
14 changed files with 151 additions and 91 deletions
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@ -83,7 +83,7 @@
                    });
                    return;
                }
-                if (o.whiteSpace == "normal") { // 1.3
+                if (o.whiteSpace === "normal") { // 1.3
                    BI.extend(json, {
                        hgap: o.hgap,
                        vgap: o.vgap,
@ -152,7 +152,7 @@
                });
                return;
            }
-            if (o.whiteSpace == "normal") { // 1.7
+            if (o.whiteSpace === "normal") { // 1.7
                BI.extend(json, {
                    hgap: o.hgap,
                    vgap: o.vgap,
--- a/src/core/4.widget.js
+++ b/src/core/4.widget.js
@ -221,7 +221,10 @@
            }
            this._mount();

-            this.__async === true && isMounted && callLifeHook(this, "mounted");
+            if (this.__async === true && isMounted) {
+                callLifeHook(this, "mounted");
+                this.fireEvent(BI.Events.MOUNT);
+            }
        },

        _setParent: function (parent) {
--- a/src/core/platform/web/config.js
+++ b/src/core/platform/web/config.js
@ -14,13 +14,9 @@ BI.prepares.push(function () {
        return _isSupportFlex;
    };
    BI.Plugin.configWidget("bi.horizontal", function (ob) {
-        var isIE = BI.isIE(), supportFlex = isSupportFlex(), isLessIE8 = isIE && BI.getIEVersion() < 8;
-        if (isLessIE8) {
-            return ob;
-        }
        // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
        // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
-        if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
+        // if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
            // 虽然有两个元素以上的时候，有场景是控制一个显示一个隐藏的效果，还无法通过flex来实现
            // var justOneItem = (ob.items && ob.items.length <= 1);
            // // 在这种情况下，也可以通过flex支持该布局
@ -42,9 +38,9 @@ BI.prepares.push(function () {
            //             ? BI.HorizontalAlign.Left : ob.horizontalAlign
            //     });
            // }
-            return BI.extend({}, ob, {type: "bi.table_adapt"});
-        }
-        if (supportFlex) {
+            // return BI.extend({}, ob, {type: "bi.table_adapt"});
+        // }
+        if (isSupportFlex()) {
            // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
            // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
            return BI.extend({}, ob, {type: "bi.flex_horizontal"});
@ -56,41 +52,42 @@ BI.prepares.push(function () {
        //         type: "bi.inline"
        //     });
        // }
+        return BI.extend({}, ob, {type: "bi.inline"});
        // 否则采用table，不过horizontalAlign的right就不支持了。
-        return BI.extend({}, ob, {type: "bi.table_adapt"});
+        // return BI.extend({}, ob, {type: "bi.table_adapt"});
    });
-    BI.Plugin.configWidget("bi.center_adapt", function (ob) {
-        var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
-        var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
-        if (!isAdapt || justOneItem) {
-            if (supportFlex) {
-                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
-                // if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) {
-                return BI.extend({}, ob, {type: "bi.flex_center_adapt"});
+    // BI.Plugin.configWidget("bi.center_adapt", function (ob) {
+    //     var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
+    //     var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
+    //     if (!isAdapt || justOneItem) {
+    //         if (supportFlex) {
+    //             // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+    //             // if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) {
+    //             return BI.extend({}, ob, {type: "bi.flex_center_adapt"});
+    //             // }
    //         }
-            }
-            if (!BI.isIE() || BI.getIEVersion() >= 8) {
-                return BI.extend({}, ob, {type: "bi.inline_center_adapt"});
-            }
-        }
-        return ob;
-    });
-    BI.Plugin.configWidget("bi.vertical_adapt", function (ob) {
-        var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
-        var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
-        if (!isAdapt || justOneItem) {
-            if (supportFlex) {
-                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
-                // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
-                return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"});
+    //         if (!BI.isIE() || BI.getIEVersion() >= 8) {
+    //             return BI.extend({}, ob, {type: "bi.inline_center_adapt"});
    //         }
-            }
-            if (!BI.isIE() || BI.getIEVersion() > 8) {
-                return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"});
-            }
-        }
-        return ob;
-    });
+    //     }
+    //     return ob;
+    // });
+    // BI.Plugin.configWidget("bi.vertical_adapt", function (ob) {
+    //     var supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
+    //     var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
+    //     if (!isAdapt || justOneItem) {
+    //         if (supportFlex) {
+    //             // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+    //             // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
+    //             return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"});
+    //             // }
+    //         }
+    //         if (!BI.isIE() || BI.getIEVersion() > 8) {
+    //             return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"});
+    //         }
+    //     }
+    //     return ob;
+    // });
    BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) {
        var justOneItem = (ob.items && ob.items.length <= 1);
        if (!ob.verticalAlign || ob.verticalAlign === BI.VerticalAlign.TOP) {
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@ -41,9 +41,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
            position: "relative"
        });
        if (o.columnSize[i] !== "auto") {
-            if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] === "fill") {
-                w.element.addClass("f-f");
-            } else {
+            if (!(o.horizontalAlign === BI.HorizontalAlign.Stretch && (o.columnSize[i] === "fill" || o.columnSize[i] === ""))) {
                w.element.addClass("f-s-n");
            }
        }
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@ -40,9 +40,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
            position: "relative"
        });
        if (o.rowSize[i] !== "auto") {
-            if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] === "fill") {
-                w.element.addClass("f-f");
-            } else {
+            if (!(o.verticalAlign === BI.VerticalAlign.Stretch && (o.rowSize[i] === "fill" || o.rowSize[i] === ""))) {
                w.element.addClass("f-s-n");
            }
        }
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@ -37,9 +37,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
            position: "relative"
        });
        if (o.columnSize[i] !== "auto") {
-            if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") {
-                w.element.addClass("f-f");
-            } else {
+            if (!(o.horizontalAlign === BI.HorizontalAlign.Stretch && (o.columnSize[i] === "fill" || o.columnSize[i] === ""))) {
                w.element.addClass("f-s-n");
            }
        }
@ -48,6 +46,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
        }
        if (o.columnSize[i] === "fill") {
            w.element.addClass("f-f");
+            this.element.addClass("f-f");
        }
        w.element.addClass("c-e");
        if (i === 0) {
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@ -37,9 +37,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
            position: "relative"
        });
        if (o.rowSize[i] !== "auto") {
-            if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") {
-                w.element.addClass("f-f");
-            } else {
+            if (!(o.verticalAlign === BI.VerticalAlign.Stretch && (o.rowSize[i] === "fill" && o.rowSize[i] === ""))) {
                w.element.addClass("f-s-n");
            }
        }
@ -48,6 +46,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
        }
        if (o.rowSize[i] === "fill") {
            w.element.addClass("f-f");
+            this.element.addClass("f-f");
        }
        w.element.addClass("c-e");
        if (i === 0) {
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@ -42,7 +42,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
            "vertical-align": o.verticalAlign
        });
        w.element.addClass("i-item");
-        if (o.columnSize[i] === "fill") {
+        if (o.columnSize[i] === "fill" || o.columnSize[i] === "") {
            var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
                right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
            for (var k = 0; k < i; k++) {
@ -51,9 +51,11 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
            for (var k = i + 1; k < o.columnSize.length; k++) {
                right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
            }
+            if (o.columnSize[i] === "fill") {
                w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
+            }
            if (o.horizontalAlign === BI.HorizontalAlign.Stretch) {
-                w.element.width(0);
+                w.element.css("max-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
            }
        }
        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@ -73,7 +73,7 @@
    -o-align-items: center;
    align-items: center;

-    &.f-scroll-x {
+    &.f-scroll-y {
      /* 09版 */
      -webkit-box-align: flex-start;
      /* 12版 */
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@ -76,6 +76,36 @@
    }
  }

+  &.f-f {
+    > .f-s-h-w {
+      -webkit-flex-shrink: 0;
+      -moz-flex-shrink: 0;
+      -ms-flex-shrink: 0;
+      flex-shrink: 0;
+      -webkit-flex-grow: 1;
+      -moz-flex-grow: 1;
+      -ms-flex-grow: 1;
+      flex-grow: 1;
+
+      &.h-stretch {
+        -webkit-flex-shrink: 1;
+        -moz-flex-shrink: 1;
+        -ms-flex-shrink: 1;
+        flex-shrink: 1;
+      }
+    }
+  }
+
+  &.h-stretch {
+    > .f-s-h-w {
+      -webkit-flex-shrink: 1;
+      -moz-flex-shrink: 1;
+      -ms-flex-shrink: 1;
+      flex-shrink: 1;
+      max-width: 100%;
+    }
+  }
+
  &.h-right {
    /* 09版 */
    -webkit-box-pack: flex-end;
@ -101,6 +131,18 @@
    align-items: flex-end;
  }

+  &.v-stretch {
+    /* 09版 */
+    -webkit-box-align: stretch;
+    /* 12版 */
+    -webkit-align-items: stretch;
+    -moz-align-items: stretch;
+    -ms-align-items: stretch;
+    -ms-flex-align: stretch;
+    -o-align-items: stretch;
+    align-items: stretch;
+  }
+
  & .f-s-h-w, & .flex-scrollable-horizontal-layout-wrapper {
    .flex();
    .horizontal();
@ -138,14 +180,14 @@

    &.v-middle {
      ///* 09版 */
-      //-webkit-box-align: center;
-      ///* 12版 */
-      //-webkit-align-items: center;
-      //-moz-align-items: center;
-      //-ms-align-items: center;
-      //-ms-flex-align: center;
-      //-o-align-items: center;
-      //align-items: center;
+      -webkit-box-align: center;
+      /* 12版 */
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      -ms-align-items: center;
+      -ms-flex-align: center;
+      -o-align-items: center;
+      align-items: center;

      //> .c-e {
      //  margin-top: auto !important;
@ -181,10 +223,6 @@
      align-items: stretch;
    }

-    &.h-stretch {
-      min-width: 100%;
-    }
-
    &.h-center {
      ///* 09版 */
      //-webkit-box-pack: center;
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@ -75,6 +75,36 @@
    }
  }

+  &.f-f {
+    > .f-s-v-w {
+      -webkit-flex-shrink: 0;
+      -moz-flex-shrink: 0;
+      -ms-flex-shrink: 0;
+      flex-shrink: 0;
+      -webkit-flex-grow: 1;
+      -moz-flex-grow: 1;
+      -ms-flex-grow: 1;
+      flex-grow: 1;
+
+      &.v-middle {
+        -webkit-flex-shrink: 1;
+        -moz-flex-shrink: 1;
+        -ms-flex-shrink: 1;
+        flex-shrink: 1;
+      }
+    }
+  }
+
+  &.v-stretch {
+    > .f-s-v-w {
+      -webkit-flex-shrink: 1;
+      -moz-flex-shrink: 1;
+      -ms-flex-shrink: 1;
+      flex-shrink: 1;
+      max-height: 100%;
+    }
+  }
+
  &.h-right {
    /* 09版 */
    -webkit-box-align: flex-end;
@ -147,15 +177,15 @@
    //min-width: 100%;

    &.h-center {
-      ///* 09版 */
-      //-webkit-box-align: center;
-      ///* 12版 */
-      //-webkit-align-items: center;
-      //-moz-align-items: center;
-      //-ms-align-items: center;
-      //-ms-flex-align: center;
-      //-o-align-items: center;
-      //align-items: center;
+      /* 09版 */
+      -webkit-box-align: center;
+      /* 12版 */
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      -ms-align-items: center;
+      -ms-flex-align: center;
+      -o-align-items: center;
+      align-items: center;

      //> .c-e {
      //  margin-left: auto !important;
@ -187,10 +217,6 @@
      align-items: stretch;
    }

-    &.v-stretch {
-      min-height: 100%;
-    }
-
    &.v-middle {
      ///* 09版 */
      //-webkit-box-pack: center;
--- a/src/less/core/wrapper/inline.center.less
+++ b/src/less/core/wrapper/inline.center.less
@ -1,4 +1,4 @@
-.bi-i-c-a, .bi-inline-center-adapt-layout {
+.bi-inline-center-adapt-layout {
  &:after {
    display: inline-block;
    width: 0;
@ -7,7 +7,7 @@
    content: ' ';
  }

-  & > .i-c-a-item, & > .inline-center-adapt-item {
+  & > .inline-center-adapt-item {
    display: inline-block;

    &.x-icon {
--- a/src/less/core/wrapper/inline.horizontal.less
+++ b/src/less/core/wrapper/inline.horizontal.less
@ -1,4 +1,4 @@
-.bi-i-h-a, .bi-inline-horizontal-adapt-layout {
+.bi-inline-horizontal-adapt-layout {
  &:after {
    display: inline-block;
    width: 0;
@ -7,7 +7,7 @@
    content: ' ';
  }

-  & > .i-h-a-item, & > .inline-horizontal-adapt-item {
+  & > .inline-horizontal-adapt-item {
    display: inline-block;

    &.x-icon {
--- a/src/less/core/wrapper/inline.vertical.less
+++ b/src/less/core/wrapper/inline.vertical.less
@ -1,4 +1,4 @@
-.bi-i-v-a, .bi-inline-vertical-adapt-layout {
+.bi-inline-vertical-adapt-layout {
  &:after {
    display: inline-block;
    width: 0;
@ -7,7 +7,7 @@
    content: ' ';
  }

-  & > .i-v-a-item, & > .inline-vertical-adapt-item {
+  & > .inline-vertical-adapt-item {
    display: inline-block;

    &.x-icon {