Merge branch 'master' of ssh://code.fineres.com:7999/~dailer/fineui

3 years ago · 99b13b44f0
41 changed files with 255 additions and 161 deletions
--- a/bi.lessconfig.json
+++ b/bi.lessconfig.json
@ -8,7 +8,7 @@
  "@color-light-gray": "#ECEEF3",
  "@color-light-gray-theme-dark": "#292F45",
  "@border-color-dark-line": "#2E3A4D",
-  "@color-sliver-theme-dark": "363E55",
+  "@color-sliver-theme-dark": "#363E55",
  "@border-color-disabled": "#E7E8EB",

  "@color-bi-background-active-radio": "transparent",
@ -18,6 +18,7 @@
  "@color-bi-background-disabled-active-checkbox-content": "#D0D4DA",
  "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479",
  "@color-bi-background-tooltip-success": "#2E3A4D",
+  "@color-bi-text-header-background": "#647185",
  "@color-bi-border-tooltip-success": "#2E3A4D",
  "@color-bi-background-toast-success": "#FFFFFF",
  "@color-bi-background-toast-warning": "#FFFFFF",
--- a/dist/font/iconfont.eot
+++ b/dist/font/iconfont.eot
--- a/dist/font/iconfont.svg
+++ b/dist/font/iconfont.svg
@ -14,6 +14,10 @@
    />
      <missing-glyph />
      
+      <glyph glyph-name="hangliezhuanhuan1" unicode="&#59542;" d="M398.208 839.104c31.424 0 56.96-25.472 56.96-56.896l-0.064-455.04h455.104c31.424 0 56.96-25.536 56.96-56.96v-284.416c0-31.424-25.536-56.96-56.96-56.96H113.792a56.896 56.896 0 0 0-56.96 56.96V782.208c0 31.424 25.536 56.96 56.96 56.96h284.416z m512-568.896l-455.104 0.064v-284.48h455.104V270.208zM592.448 805.76a28.48 28.48 0 0 0 3.328-36.288l-3.328-3.968-11.84-11.712h73.6c121.6 0 220.992-95.424 227.2-215.488l0.384-12.096v-81.024l9.728 9.728a28.48 28.48 0 0 0 36.288 3.328l3.968-3.328a28.48 28.48 0 0 0 3.264-36.288l-3.264-3.904-53.888-53.952a37.504 37.504 0 0 0-48.448-3.904l-4.672 3.904-53.888 53.952a28.416 28.416 0 0 0 36.288 43.52l3.904-3.328 13.76-13.696V526.208a170.688 170.688 0 0 1-159.808 170.368l-10.816 0.32h-73.6l11.84-11.84a28.48 28.48 0 0 0 3.328-36.288l-3.328-3.904a28.48 28.48 0 0 0-36.288-3.328l-3.904 3.328-53.952 53.888a37.504 37.504 0 0 0-3.968 48.448l3.968 4.608 53.952 53.952a28.416 28.416 0 0 0 40.192 0z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="JSONjiexi" unicode="&#59541;" d="M796.864 839.104l170.24-171.392v-681.92c0-31.424-25.472-56.96-56.896-56.96H227.584a56.896 56.896 0 0 0-56.96 56.96V71.04h-56.832A56.896 56.896 0 0 0 56.832 128V469.312c0 31.424 25.536 56.96 56.96 56.96h56.832v256c0 31.36 25.536 56.832 56.96 56.832h569.28z m-57.472-56.832H227.584l-0.064-256h568.96c31.36 0 56.832-25.536 56.832-56.96V128c0-31.36-25.472-56.896-56.896-56.896h-568.96l0.128-85.312h682.624v624.64h-85.504c-45.44 0-82.56 35.52-85.12 80.256l-0.192 5.056V782.272z m-217.088-384c-26.368 0-46.464-7.232-60.416-21.568-18.624-16.896-27.968-42.24-27.968-75.968 0-33.088 9.344-58.432 27.968-76.032 13.952-14.336 34.048-21.504 60.416-21.504 26.304 0 46.464 7.168 60.352 21.504 18.56 17.6 27.84 42.88 27.84 76.032 0 33.728-9.28 59.072-27.84 75.968-13.888 14.336-34.048 21.504-60.352 21.504z m-187.264-0.32c-23.232 0-40.896-5.44-52.864-16.384a53.248 53.248 0 0 1-18.048-41.088c0-18.112 6.208-31.36 18.624-39.872 7.36-5.12 20.608-9.792 39.744-14.08l19.52-4.48c11.456-2.432 19.84-5.312 25.152-8.576a15.744 15.744 0 0 0 8-14.08c0-10.432-5.376-17.6-16.128-21.44a67.84 67.84 0 0 0-22.144-3.008c-15.168 0-25.856 3.84-32.128 11.392a37.824 37.824 0 0 0-6.848 18.88H261.12c0-19.2 6.848-34.24 20.608-45.184 13.76-10.944 32.64-16.448 56.64-16.448 23.488 0 41.6 5.568 54.528 16.64a53.12 53.12 0 0 1 19.328 41.984c0 16.448-5.504 28.992-16.512 37.632-7.04 5.568-17.6 10.048-31.488 13.44l-31.744 7.552a107.136 107.136 0 0 0-24 7.68 15.872 15.872 0 0 0-8.768 14.72c0 7.168 2.944 12.8 8.896 16.768a41.792 41.792 0 0 0 23.68 5.952 48.64 48.64 0 0 0 22.4-4.608c9.024-4.672 13.888-12.544 14.528-23.68h36.992c-0.64 19.648-7.872 34.56-21.568 44.864a80.384 80.384 0 0 1-49.664 15.424z m-103.168-5.376h-38.464v-128.832c0-8.96-0.896-15.296-2.624-19.008-2.944-6.4-8.96-9.536-17.984-9.536-9.216 0-15.168 2.944-17.92 8.704-2.816 5.76-4.416 15.808-4.736 30.08v4.224h-36.352v-4.224c0-21.696 4.096-38.784 12.224-51.328 8.192-12.544 24.192-18.816 48.128-18.816s40.448 7.744 49.664 23.232c5.376 9.216 8.064 21.632 8.064 37.248V392.576z m447.808 0h-40.384v-184.256h35.84V339.2l75.264-130.88h38.528v184.32h-35.84v-128.64l-73.408 128.64z m-157.44-27.008c15.296 0 27.392-5.632 36.352-16.896 8.96-11.328 13.44-27.264 13.44-48 0-20.672-4.48-36.672-13.44-48a43.968 43.968 0 0 0-36.288-16.832 44.48 44.48 0 0 0-36.48 16.896c-9.152 11.264-13.696 27.264-13.696 48s4.544 36.736 13.632 48a44.48 44.48 0 0 0 36.48 16.832z"  horiz-adv-x="1024" />
+      
      <glyph glyph-name="niantie" unicode="&#59540;" d="M128 608a32 32 0 0 0 32-32v-512a32 32 0 0 1 32-32h512a32 32 0 1 0 0-64H192A96 96 0 0 0 96 64V576a32 32 0 0 0 32 32z m704 192A96 96 0 0 0 928 704v-512a96 96 0 0 0-96-96H320A96 96 0 0 0 224 192V704A96 96 0 0 0 320 800z m0-64H320a32 32 0 0 1-32-32v-512a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32V704a32 32 0 0 1-32 32z m-256-64c17.664 0 32-16.384 32-36.608L607.936 480h155.456c20.224 0 36.608-14.336 36.608-32s-16.384-32-36.608-32H607.936v-155.52c0-20.16-14.272-36.48-32-36.48-17.6 0-32 16.32-32 36.48V416H388.48c-20.16 0-36.48 14.336-36.48 32s16.32 32 36.48 32H544V635.392c0 20.224 14.4 36.608 32 36.608z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="kaiqishoushi" unicode="&#59538;" d="M878.592-5.312l25.088 450.88a96.192 96.192 0 0 1-90.752 101.76L587.264 559.36V736a128 128 0 0 1-128 128l-9.536-0.32A128 128 0 0 1 331.328 736l-0.064-336.832-7.232 4.928a128 128 0 0 1-172.864-181.888l183.552-262.144 6.272-8.32 6.976-7.68 4.864-4.544-1.92 2.304c18.048-23.68 46.08-37.824 76.416-37.824h355.456a96 96 0 0 1 95.808 90.688z m-38.784 455.104l-25.088-451.584a32 32 0 0 0-32-30.208H427.392a31.808 31.808 0 0 0-21.504 8.32l-8.448 9.088a62.848 62.848 0 0 0-10.24 11.392L203.52 258.944a64 64 0 0 0 104.832 73.408l86.848-124.16V736a64 64 0 1 0 128 0v-176.64a64 64 0 0 1 60.608-63.936l225.664-11.968a32 32 0 0 0 30.272-33.664z"  horiz-adv-x="1024" />
--- a/dist/font/iconfont.ttf
+++ b/dist/font/iconfont.ttf
--- a/dist/font/iconfont.woff
+++ b/dist/font/iconfont.woff
--- a/dist/font/iconfont.woff2
+++ b/dist/font/iconfont.woff2
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "fineui",
-  "version": "2.0.20220225184322",
+  "version": "2.0.20220305232243",
  "description": "fineui",
  "main": "dist/fineui.min.js",
  "types": "dist/lib/index.d.ts",
--- a/src/base/layer/layer.popover.js
+++ b/src/base/layer/layer.popover.js
@ -27,7 +27,7 @@ BI.Popover = BI.inherit(BI.Widget, {
            footerHeight: 44,
            closable: true, // BI-40839 是否显示右上角的关闭按钮
            bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
-            bodyTgap: 10
+            bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE
        };
    },

@ -109,10 +109,10 @@ BI.Popover = BI.inherit(BI.Widget, {
                },
                items: [{
                    el: o.body
-                }]
-            },
-            hgap: o.bodyHgap,
-            tgap: o.bodyTgap
+                }],
+                hgap: o.bodyHgap,
+                tgap: o.bodyTgap
+            }
        } : {
            el: {
                type: "bi.absolute",
@ -143,7 +143,6 @@ BI.Popover = BI.inherit(BI.Widget, {
        }

        return BI.extend({
-            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
            items: items,
            width: this._getSuitableWidth(size.width)
        }, o.logic.dynamic ? {
--- a/src/base/single/1.text.js
+++ b/src/base/single/1.text.js
@ -76,7 +76,11 @@
                this.text = this;
            }

-            var text = this._getShowText();
+            var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) {
+                self.setText(newValue);
+            }, {
+                deep: true
+            }) : o.text;
            // 只要不是undefined就可以显示text值，否则显示value
            if (!BI.isUndefined(text)) {
                this.setText(text);
--- a/src/case/button/item.multiselect.js
+++ b/src/case/button/item.multiselect.js
@ -38,22 +38,24 @@ BI.MultiSelectItem = BI.inherit(BI.BasicButton, {
                type: "bi.center_adapt",
                items: [this.checkbox]
            }, {
-                type: "bi.label",
-                ref: function (_ref) {
-                    self.text = _ref;
-                },
-                cls: "list-item-text",
-                textAlign: "left",
-                whiteSpace: "nowrap",
-                textHeight: o.height,
-                height: o.height,
-                hgap: o.hgap,
-                rgap: o.rgap,
-                lgap: o.textLgap,
-                text: o.text,
-                keyword: o.keyword,
-                value: o.value,
-                py: o.py
+                el: {
+                    type: "bi.label",
+                    ref: function (_ref) {
+                        self.text = _ref;
+                    },
+                    cls: "list-item-text",
+                    textAlign: "left",
+                    whiteSpace: "nowrap",
+                    textHeight: o.height,
+                    height: o.height,
+                    hgap: o.hgap,
+                    rgap: o.rgap,
+                    lgap: o.textLgap,
+                    text: o.text,
+                    keyword: o.keyword,
+                    value: o.value,
+                    py: o.py
+                }
            }]
        };
    },
--- a/src/case/button/item.singleselect.radio.js
+++ b/src/case/button/item.singleselect.radio.js
@ -36,22 +36,24 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, {
                    },
                }]
            }, {
-                type: "bi.label",
-                ref: function (_ref) {
-                    self.text = _ref;
-                },
-                cls: "list-item-text",
-                textAlign: "left",
-                whiteSpace: "nowrap",
-                textHeight: o.height,
-                height: o.height,
-                hgap: o.hgap,
-                rgap: o.textRgap,
-                lgap: o.textLgap,
-                text: o.text,
-                keyword: o.keyword,
-                value: o.value,
-                py: o.py
+                el: {
+                    type: "bi.label",
+                    ref: function (_ref) {
+                        self.text = _ref;
+                    },
+                    cls: "list-item-text",
+                    textAlign: "left",
+                    whiteSpace: "nowrap",
+                    textHeight: o.height,
+                    height: o.height,
+                    hgap: o.hgap,
+                    rgap: o.textRgap,
+                    lgap: o.textLgap,
+                    text: o.text,
+                    keyword: o.keyword,
+                    value: o.value,
+                    py: o.py
+                }
            }]
        };
    },
--- a/src/case/button/node/node.arrow.js
+++ b/src/case/button/node/node.arrow.js
@ -32,19 +32,21 @@ BI.ArrowNode = BI.inherit(BI.NodeButton, {
            type: "bi.vertical_adapt",
            columnSize: [o.iconWrapperWidth || o.height, "fill"],
            items: [this.checkbox, {
-                type: "bi.label",
-                ref: function (_ref) {
-                    self.text = _ref;
-                },
-                textAlign: "left",
-                whiteSpace: "nowrap",
-                textHeight: o.height,
-                height: o.height,
-                hgap: o.hgap,
-                text: o.text,
-                value: o.value,
-                py: o.py,
-                keyword: o.keyword
+                el: {
+                    type: "bi.label",
+                    ref: function (_ref) {
+                        self.text = _ref;
+                    },
+                    textAlign: "left",
+                    whiteSpace: "nowrap",
+                    textHeight: o.height,
+                    height: o.height,
+                    hgap: o.hgap,
+                    text: o.text,
+                    value: o.value,
+                    py: o.py,
+                    keyword: o.keyword
+                }
            }]
        };
    },
--- a/src/case/button/node/node.plus.js
+++ b/src/case/button/node/node.plus.js
@ -37,19 +37,21 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
            type: "bi.vertical_adapt",
            columnSize: [o.iconWrapperWidth || o.height, "fill"],
            items: [this.checkbox, {
-                type: "bi.label",
-                ref: function (_ref) {
-                    self.text = _ref;
-                },
-                textAlign: "left",
-                whiteSpace: "nowrap",
-                textHeight: o.height,
-                height: o.height,
-                hgap: o.hgap,
-                text: o.text,
-                value: o.value,
-                keyword: o.keyword,
-                py: o.py
+                el: {
+                    type: "bi.label",
+                    ref: function (_ref) {
+                        self.text = _ref;
+                    },
+                    textAlign: "left",
+                    whiteSpace: "nowrap",
+                    textHeight: o.height,
+                    height: o.height,
+                    hgap: o.hgap,
+                    text: o.text,
+                    value: o.value,
+                    keyword: o.keyword,
+                    py: o.py
+                }
            }]
        };
    },
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/src/case/combo/bubblecombo/popup.bubble.js
@ -11,7 +11,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
            baseCls: config.baseCls + " bi-bubble-popup-view",
            minWidth: 70,
            maxWidth: 300,
-            minHeight: 50,
+            // minHeight: 50,
            showArrow: true,
        });
    }
--- a/src/component/form/form.js
+++ b/src/component/form/form.js
@ -35,6 +35,7 @@
    },

    _createItems: function () {
+        var self = this;
        var o = this.options;

        return BI.map(o.items, function (idx, item) {
@ -50,7 +51,7 @@
                listeners: [{
                    eventName: "EVENT_CHANGE",
                    action: function () {
-                        this.validate();
+                        self.fireEvent(BI.Form.EVENT_CHANGE, this.validate());
                    }
                }]
            };
@ -88,4 +89,5 @@
    }
 });

+BI.Form.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.custom_form", BI.Form);
--- a/src/core/3.ob.js
+++ b/src/core/3.ob.js
@ -51,7 +51,9 @@
            if (BI.isFunction(this.props)) {
                props = this.props(config);
            }
-            this.options = extend(this._defaultConfig(config), props, config);
+            var defaultProps = this._defaultConfig(config);
+            var modifiedDefaultProps = (config && config.type && BI.OB.configFunctions[config.type + ".props"]) ? BI.OB.configFunctions[config.type + ".props"](config, defaultProps) : null;
+            this.options = extend(defaultProps, props, modifiedDefaultProps, config);
        },

        _init: function () {
--- a/src/core/5.inject.js
+++ b/src/core/5.inject.js
@ -91,7 +91,7 @@
        };
    };

-    var configFunctions = {};
+    var configFunctions = BI.OB.configFunctions = {};
    var runConfigFunction = function (type) {
        if (!type || !configFunctions[type]) {
            return false;
--- a/src/core/logic/logic.js
+++ b/src/core/logic/logic.js
@ -30,7 +30,7 @@ BI.LogicFactory = {
            case BI.LogicFactory.Type.HorizontalFill:
                logic = BI.HorizontalFillLayoutLogic;
                break;
-            default :
+            default:
                logic = BI.Logic;
                break;
        }
@ -43,7 +43,6 @@ BI.LogicFactory = {
            case BI.Direction.Bottom:
            case BI.Direction.Custom:
                return BI.LogicFactory.Type.Vertical;
-                break;
            case BI.Direction.Left:
            case BI.Direction.Right:
                return BI.LogicFactory.Type.Horizontal;
--- a/src/core/logic/logic.layout.js
+++ b/src/core/logic/logic.layout.js
@ -19,7 +19,9 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, {
            lgap: 0,
            rgap: 0,
            tgap: 0,
-            bgap: 0
+            bgap: 0,
+            innerVgap: 0,
+            innerHgap: 0
        };
    },

@ -41,6 +43,8 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, {
            rgap: o.rgap,
            tgap: o.tgap,
            bgap: o.bgap,
+            innerHgap: o.innerHgap,
+            innerVgap: o.innerVgap,
            items: o.items
        };
    }
@ -68,7 +72,9 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, {
            lgap: 0,
            rgap: 0,
            tgap: 0,
-            bgap: 0
+            bgap: 0,
+            innerVgap: 0,
+            innerHgap: 0
        };
    },

@ -90,6 +96,8 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, {
            rgap: o.rgap,
            tgap: o.tgap,
            bgap: o.bgap,
+            innerHgap: o.innerHgap,
+            innerVgap: o.innerVgap,
            items: o.items
        };
    }
@ -163,7 +171,9 @@ BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, {
            lgap: 0,
            rgap: 0,
            tgap: 0,
-            bgap: 0
+            bgap: 0,
+            innerVgap: 0,
+            innerHgap: 0
        };
    },

@ -190,6 +200,8 @@ BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, {
            rgap: o.rgap,
            tgap: o.tgap,
            bgap: o.bgap,
+            innerHgap: o.innerHgap,
+            innerVgap: o.innerVgap,
            items: o.items
        };
    }
--- a/src/core/system.js
+++ b/src/core/system.js
@ -17,13 +17,13 @@
            TRIGGER_HEIGHT: 24,
            TOAST_TOP: 10,
            H_GAP_SIZE: "M",
-            V_GAP_SIZE: "M"
+            V_GAP_SIZE: "S"
        }
    };

    // 具体尺寸还没定，先写着
    var sizeMap = {
-        "S": 16,
+        "S": 10,
        "M" : 20,
        "L": 24
    };
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -62,11 +62,24 @@ BI.Layout = BI.inherit(BI.Widget, {
    _init4Scroll: function () {
        switch (this.options.scrollable) {
            case true:
+            case "xy":
                this.element.css("overflow", "auto");
-                break;
+                return;
            case false:
                this.element.css("overflow", "hidden");
-                break;
+                return;
+            case "x":
+                this.element.css({
+                    "overflow-x": "auto",
+                    "overflow-y": "hidden"
+                });
+                return;
+            case "y":
+                this.element.css({
+                    "overflow-x": "hidden",
+                    "overflow-y": "auto"
+                });
+                return;
            default :
                break;
        }
@ -75,6 +88,7 @@ BI.Layout = BI.inherit(BI.Widget, {
                "overflow-x": "auto",
                "overflow-y": "hidden"
            });
+            return;
        }
        if (this.options.scrolly) {
            this.element.css({
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@ -24,21 +24,43 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
        var o = this.options;
        var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
        var left = 0, right = 0, top = 0, bottom = 0;
-        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
-            left += item.left;
+        var offsets = BI.pick(item, ["top", "right", "bottom", "left"]);
+
+        if (BI.isKey(item.inset)) {
+            var insets = BI.map((item.inset + "").split(" "), function (i, str) {
+                return BI.parseFloat(str);
+            });
+            switch (insets.length) {
+                case 1:
+                    offsets = {top: insets[0], bottom: insets[0], left: insets[0], right: insets[0]}
+                    break;
+                case 2:
+                    offsets = {top: insets[0], bottom: insets[0], left: insets[1], right: insets[1]}
+                    break;
+                case 3:
+                    offsets = {top: insets[0], left: insets[1], right: insets[1], bottom: insets[2]}
+                    break
+                case 4:
+                default:
+                    offsets = {top: insets[0], right: insets[1], bottom: insets[2], left: insets[3]}
+                    break;
+            }
+        }
+        if (BI.isNotNull(offsets.left)) {
+            w.element.css({left: BI.isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left});
+            left += offsets.left;
        }
-        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
-            right += item.right;
+        if (BI.isNotNull(offsets.right)) {
+            w.element.css({right: BI.isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right});
+            right += offsets.right;
        }
-        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
-            top += item.top;
+        if (BI.isNotNull(offsets.top)) {
+            w.element.css({top: BI.isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top});
+            top += offsets.top;
        }
-        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
-            bottom += item.bottom;
+        if (BI.isNotNull(offsets.bottom)) {
+            w.element.css({bottom: BI.isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom});
+            bottom += offsets.bottom;
        }

        if (BI.isNotNull(o.hgap)) {
--- a/src/less/resource/font.less
+++ b/src/less/resource/font.less
@ -83,7 +83,7 @@

 //toast
 .font(toast-error-font, @font-tip-error, @color-bi-color-toast-error);
-.font(toast-success-font, @font-tip-success, @color-bi-color-toast-error);
+.font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);
 .font(toast-warning-font, @font-tip-warning, @color-bi-color-toast-warning);
 .font(toast-message-font, @font-tip-message, @color-bi-color-toast-normal);

--- a/src/widget/datetime/datetime.combo.js
+++ b/src/widget/datetime/datetime.combo.js
@ -6,7 +6,8 @@ BI.DateTimeCombo = BI.inherit(BI.Single, {
        popupHeight: 290,
        popupWidth: 270,
        comboAdjustHeight: 1,
-        border: 1
+        border: 1,
+        iconWidth: 24
    },
    _defaultConfig: function () {
        return BI.extend(BI.DateTimeCombo.superclass._defaultConfig.apply(this, arguments), {
@ -83,7 +84,7 @@ BI.DateTimeCombo = BI.inherit(BI.Single, {
        var triggerBtn = BI.createWidget({
            type: "bi.icon_button",
            cls: "bi-trigger-icon-button date-font",
-            width: opts.height,
+            width: this.constants.iconWidth,
            height: opts.height,
        });
        triggerBtn.on(BI.IconButton.EVENT_CHANGE, function () {
@ -96,21 +97,9 @@ BI.DateTimeCombo = BI.inherit(BI.Single, {

        BI.createWidget({
            type: "bi.htape",
+            columnSize: ["", this.constants.iconWidth],
            element: this,
-            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: this.combo,
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0
-                }, {
-                    el: triggerBtn,
-                    top: 0,
-                    right: 0
-                }]
-            }]
+            items: [this.combo, triggerBtn]
        });
    },

--- a/src/widget/datetime/datetime.trigger.js
+++ b/src/widget/datetime/datetime.trigger.js
@ -3,7 +3,8 @@
 */
 BI.DateTimeTrigger = BI.inherit(BI.Trigger, {
    _const: {
-        hgap: 4
+        hgap: 4,
+        iconWidth:24
    },

    _defaultConfig: function () {
@ -33,7 +34,7 @@ BI.DateTimeTrigger = BI.inherit(BI.Trigger, {
                el: this.text
            },{
                el: BI.createWidget(),
-                width: o.height
+                width: this._const.iconWidth
            }]
        });
        this.setValue(o.value);
--- a/src/widget/dynamicdate/dynamicdate.combo.js
+++ b/src/widget/dynamicdate/dynamicdate.combo.js
@ -3,7 +3,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
        popupHeight: 259,
        popupWidth: 270,
        comboAdjustHeight: 1,
-        border: 1
+        border: 1,
+        iconWidth: 24
    },

    props: {
@ -48,7 +49,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                    destroyWhenHide: true,
                    el: {
                        type: "bi.horizontal_fill",
-                        columnSize: [opts.height - border, "fill"],
+                        columnSize: [this.constants.iconWidth, "fill"],
                        height: opts.height - border,
                        items: [{
                            el: {
--- a/src/widget/dynamicdate/dynamicdate.trigger.js
+++ b/src/widget/dynamicdate/dynamicdate.trigger.js
@ -5,7 +5,8 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, {
        yearLength: 4,
        yearMonthLength: 6,
        yearFullMonthLength: 7,
-        compareFormat: "%Y-%X-%d"
+        compareFormat: "%Y-%X-%d",
+        iconWidth: 24
    },

    props: {
@ -120,15 +121,16 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, {
        BI.createWidget({
            type: "bi.htape",
            element: this,
+            columnSize: ["", this._const.iconWidth],
            items: [{
                el: this.editor
            }, {
                el: {
                    type: "bi.icon_button",
                    cls: "bi-trigger-icon-button date-font",
-                    width: o.iconWidth
+                    width: this._const.iconWidth
                },
-                width: o.iconWidth
+                width: this._const.iconWidth
            }]
        });
        !o.allowEdit && BI.createWidget({
--- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
@ -3,7 +3,8 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
        popupHeight: 259,
        popupWidth: 270,
        comboAdjustHeight: 1,
-        border: 1
+        border: 1,
+        iconWidth: 24
    },

    props: {
@ -48,13 +49,13 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                    isNeedAdjustWidth: opts.isNeedAdjustWidth,
                    el: {
                        type: "bi.horizontal_fill",
-                        columnSize: [opts.height - border, "fill"],
+                        columnSize: [this.constants.iconWidth, "fill"],
                        height: opts.height - border,
                        items: [{
                            el: {
                                type: "bi.icon_button",
                                cls: "bi-trigger-icon-button date-change-h-font",
-                                width: opts.height - border,
+                                width: this.constants.iconWidth,
                                height: opts.height - border,
                                ref: function () {
                                    self.changeIcon = this;
@ -68,7 +69,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                            allowEdit: opts.allowEdit,
                            watermark: opts.watermark,
                            format: opts.format,
-                            iconWidth: opts.height - border,
+                            iconWidth: this.constants.iconWidth,
                            height: opts.height - border,
                            value: opts.value,
                            ref: function () {
--- a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js
@ -5,7 +5,8 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, {
        yearLength: 4,
        yearMonthLength: 6,
        yearFullMonthLength: 7,
-        compareFormat: "%Y-%X-%d %H:%M:%S"
+        compareFormat: "%Y-%X-%d %H:%M:%S",
+        iconWidth: 24
    },

    props: {
@ -118,6 +119,7 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, {
        BI.createWidget({
            type: "bi.htape",
            element: this,
+            columnSize: ["", this._const.iconWidth],
            items: [{
                el: this.editor
            }, {
--- a/src/widget/time/time.combo.js
+++ b/src/widget/time/time.combo.js
@ -10,7 +10,8 @@
            popupHeight: 80,
            popupWidth: 240,
            comboAdjustHeight: 1,
-            border: 1
+            border: 1,
+            iconWidth: 24
        },
        props: {
            baseCls: "bi-time-combo",
@ -177,7 +178,7 @@
                        el: {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button time-font icon-size-16",
-                            width: opts.height,
+                            width: this.constants.iconWidth,
                            height: opts.height,
                            listeners: [{
                                eventName: BI.IconButton.EVENT_CHANGE,
--- a/src/widget/timeinterval/timeperiods.js
+++ b/src/widget/timeinterval/timeperiods.js
@ -21,13 +21,13 @@

            return {
                type: "bi.absolute",
-                height: this.constants.height,
+                height: o.height,
                items: [{
                    el: {
                        type: "bi.horizontal_auto",
                        items: [{
                            type: "bi.label",
-                            height: this.constants.height,
+                            height: o.height,
                            width: this.constants.width,
                            text: "-",
                            ref: function (_ref) {
@ -42,7 +42,7 @@
                }, {
                    el: {
                        type: "bi.center",
-                        height: this.constants.height,
+                        height: o.height,
                        hgap: this.constants.hgap,
                        items: [{
                            type: "bi.absolute",
@ -82,9 +82,11 @@

        _createCombo: function (v) {
            var self = this;
+            var o = this.options;
            return {
                type: "bi.time_combo",
                value: v,
+                height: o.height,
                listeners: [{
                    eventName: BI.TimeCombo.EVENT_BEFORE_POPUPVIEW,
                    action: function () {
--- a/src/widget/year/combo.year.js
+++ b/src/widget/year/combo.year.js
@ -1,5 +1,9 @@
 BI.DynamicYearCombo = BI.inherit(BI.Widget, {

+    _const: {
+        iconWidth: 24
+    },
+
    props: {
        baseCls: "bi-year-combo",
        behaviors: {},
@ -136,13 +140,13 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
                        el: {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button",
-                            width: o.height - border,
+                            width: this._const.iconWidth,
                            height: o.height - border,
                            ref: function () {
                                self.changeIcon = this;
                            }
                        },
-                        width: o.height - border
+                        width: this._const.iconWidth
                    }, this.combo]
                },
                top: 0,
--- a/src/widget/year/trigger.year.js
+++ b/src/widget/year/trigger.year.js
@ -1,7 +1,8 @@
 BI.DynamicYearTrigger = BI.inherit(BI.Trigger, {
    _const: {
        hgap: 4,
-        vgap: 2
+        vgap: 2,
+        iconWidth: 24
    },

    _defaultConfig: function () {
@ -90,7 +91,8 @@ BI.DynamicYearTrigger = BI.inherit(BI.Trigger, {
        });
        BI.createWidget({
            element: this,
-            type: "bi.htape",
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", ""],
            items: [{
                el: this.editor
            }, {
@ -98,15 +100,13 @@ BI.DynamicYearTrigger = BI.inherit(BI.Trigger, {
                    type: "bi.text_button",
                    baseCls: "bi-trigger-year-text",
                    text: BI.i18nText("BI-Multi_Date_Year"),
-                    width: o.height
                },
-                width: o.height
            }, {
                el: {
                    type: "bi.trigger_icon_button",
-                    width: o.height
+                    width: this._const.iconWidth
                },
-                width: o.height
+                width: this._const.iconWidth
            }]
        });
        this.setValue(o.value);
--- a/src/widget/yearinterval/yearinterval.js
+++ b/src/widget/yearinterval/yearinterval.js
@ -29,7 +29,7 @@ BI.YearInterval = BI.inherit(BI.Single, {
        return [{
            type: "bi.center",
            hgap: 15,
-            height: this.constants.height,
+            height: o.height,
            items: [{
                type: "bi.absolute",
                items: [{
@ -53,7 +53,7 @@ BI.YearInterval = BI.inherit(BI.Single, {
            type: "bi.horizontal_auto",
            items: [{
                type: "bi.label",
-                height: this.constants.height,
+                height: o.height,
                width: this.constants.width,
                text: "-",
                ref: function (_ref) {
@ -70,6 +70,7 @@ BI.YearInterval = BI.inherit(BI.Single, {
            supportDynamic: o.supportDynamic,
            minDate: o.minDate,
            maxDate: o.maxDate,
+            height: o.height,
            behaviors: o.behaviors,
            value: v,
            listeners: [{
--- a/src/widget/yearmonth/trigger.yearmonth.js
+++ b/src/widget/yearmonth/trigger.yearmonth.js
@ -1,7 +1,8 @@
 BI.DynamicYearMonthTrigger = BI.inherit(BI.Trigger, {
    _const: {
        hgap: 4,
-        vgap: 2
+        vgap: 2,
+        iconWidth: 24
    },

    props: {
@ -20,7 +21,6 @@ BI.DynamicYearMonthTrigger = BI.inherit(BI.Trigger, {
    _init: function () {
        BI.DynamicYearMonthTrigger.superclass._init.apply(this, arguments);
        var o = this.options;
-
        this.yearEditor = this._createEditor(true);
        this.monthEditor = this._createEditor(false);

@ -30,31 +30,30 @@ BI.DynamicYearMonthTrigger = BI.inherit(BI.Trigger, {
            items: [{
                type: "bi.center",
                items: [{
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["fill", ""],
                    items: [this.yearEditor, {
                        el: {
                            type: "bi.text_button",
                            text: BI.i18nText("BI-Multi_Date_Year"),
-                            width: o.height
                        },
-                        width: o.height
                    }]
                }, {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["fill", ""],
                    items: [this.monthEditor, {
                        el: {
                            type: "bi.text_button",
                            text: BI.i18nText("BI-Multi_Date_Month"),
-                            width: o.height
                        },
-                        width: o.height}]
+                    }]
                }]
            }, {
                el: {
                    type: "bi.trigger_icon_button",
-                    width: o.height
+                    width: this._const.iconWidth
                },
-                width: o.height
+                width: this._const.iconWidth
            }]
        });
        this.setValue(o.value);
--- a/src/widget/yearquarter/combo.yearquarter.js
+++ b/src/widget/yearquarter/combo.yearquarter.js
@ -1,5 +1,8 @@
 BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {

+    _consts:{
+        iconWidth: 24
+    },
    props: {
        baseCls: "bi-year-quarter-combo",
        behaviors: {},
@ -140,13 +143,13 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                        el: {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button",
-                            width: o.height - border,
+                            width: this._consts.iconWidth,
                            height: o.height - border,
                            ref: function () {
                                self.changeIcon = this;
                            }
                        },
-                        width: o.height - border
+                        width: this._consts.iconWidth
                    }, this.combo]
                },
                top: 0,
--- a/src/widget/yearquarter/trigger.yearquarter.js
+++ b/src/widget/yearquarter/trigger.yearquarter.js
@ -1,7 +1,8 @@
 BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, {
    _const: {
        hgap: 4,
-        vgap: 2
+        vgap: 2,
+        iconWidth: 24
    },

    props: {
@ -14,7 +15,6 @@ BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, {
    _init: function () {
        BI.DynamicYearQuarterTrigger.superclass._init.apply(this, arguments);
        var o = this.options;
-
        this.yearEditor = this._createEditor(true);
        this.quarterEditor = this._createEditor(false);

@ -27,32 +27,30 @@ BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, {
            items: [{
                type: "bi.center",
                items: [{
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["fill", ""],
                    items: [this.yearEditor, {
                        el: {
                            type: "bi.text_button",
                            text: BI.i18nText("BI-Multi_Date_Year"),
-                            width: height
                        },
-                        width: height
                    }]
                }, {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["fill", ""],
                    items: [this.quarterEditor, {
                        el: {
                            type: "bi.text_button",
                            text: BI.i18nText("BI-Multi_Date_Quarter"),
-                            width: height
                        },
-                        width: height
                    }]
                }]
            }, {
                el: {
                    type: "bi.trigger_icon_button",
-                    width: height
+                    width: this._const.iconWidth,
                },
-                width: height
+                width: this._const.iconWidth,
            }]
        });
        this.setValue(o.value);
--- a/src/widget/yearquarterinterval/yearquarterinterval.js
+++ b/src/widget/yearquarterinterval/yearquarterinterval.js
@ -29,7 +29,7 @@ BI.YearQuarterInterval = BI.inherit(BI.Single, {
        return [{
            type: "bi.center",
            hgap: 15,
-            height: this.constants.height,
+            height: o.height,
            items: [{
                type: "bi.absolute",
                items: [{
@ -53,7 +53,7 @@ BI.YearQuarterInterval = BI.inherit(BI.Single, {
            type: "bi.horizontal_auto",
            items: [{
                type: "bi.label",
-                height: this.constants.height,
+                height: o.height,
                width: this.constants.width,
                text: "-",
                ref: function (_ref) {
@ -72,6 +72,7 @@ BI.YearQuarterInterval = BI.inherit(BI.Single, {
            maxDate: o.maxDate,
            behaviors: o.behaviors,
            value: v,
+            height: o.height,
            listeners: [{
                eventName: BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW,
                action: function () {
--- a/typescript/component/form/form.ts
+++ b/typescript/component/form/form.ts
@ -0,0 +1,14 @@
+import { Widget } from "../../core/widget";
+
+export declare class Form extends Widget {
+    static xtype: string;
+    static EVENT_CHANGE: string;
+
+    isAllValid(): boolean;
+
+    validateWithNoTip(): boolean[];
+
+    validate(): boolean[];
+
+    getValue<T>(): T[];
+}
--- a/typescript/index.ts
+++ b/typescript/index.ts
@ -25,6 +25,7 @@ import { SearchTextValueCombo } from "./case/combo/searchtextvaluecombo/combo.se
 import { SignEditor } from "./case/editor/editor.sign";
 import { StateEditor } from './case/editor/editor.state';
 import { AllValueMultiTextValueCombo } from "./component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo";
+import { Form } from './component/form/form';
 import { AbstractTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser";
 import { AbstractListTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser.list";
 import { Action, ActionFactory } from "./core/action/action";
@ -218,6 +219,7 @@ export interface BI extends _func, _i18n, _base, _inject, _var, _web, _utils {
    SmallTextValueCombo: typeof SmallTextValueCombo;
    BubbleCombo: typeof BubbleCombo;
    AllValueMultiTextValueCombo: typeof AllValueMultiTextValueCombo;
+    Form: typeof Form;
    IconTextItem: typeof IconTextItem;
    MultiSelectItem: typeof MultiSelectItem;
    AbstractLabel: typeof AbstractLabel;
@ -512,6 +514,7 @@ export {
    Switch,
    HorizontalLayout,
    ShelterEditor,
+    Form,
    TextTrigger,
    SelectTextTrigger,
    DateInterval,
--- a/typescript/widget/downlist/item.downlistgroup.ts
+++ b/typescript/widget/downlist/item.downlistgroup.ts
@ -4,6 +4,11 @@ export declare class DownListGroupItem extends BasicButton {
    static xtype: string;
    static EVENT_CHANGE: string;

+    props: {
+        iconCls1: string;
+        iconCls2: string;
+    } & BasicButton['props'];
+
    doRedMark(...args: any[]): void;

    unRedMark(...args: any[]): void;