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

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

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" />

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

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
+            }
         } : {
             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 ? {

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

src/case/button/item.multiselect.js

@@ -38,6 +38,7 @@ BI.MultiSelectItem = BI.inherit(BI.BasicButton, {
                 type: "bi.center_adapt",
                 items: [this.checkbox]
             }, {
+                el: {
                     type: "bi.label",
                     ref: function (_ref) {
                         self.text = _ref;
@@ -54,6 +55,7 @@ BI.MultiSelectItem = BI.inherit(BI.BasicButton, {
                     keyword: o.keyword,
                     value: o.value,
                     py: o.py
+                }
             }]
         };
     },

src/case/button/item.singleselect.radio.js

@@ -36,6 +36,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, {
                     },
                 }]
             }, {
+                el: {
                     type: "bi.label",
                     ref: function (_ref) {
                         self.text = _ref;
@@ -52,6 +53,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, {
                     keyword: o.keyword,
                     value: o.value,
                     py: o.py
+                }
             }]
         };
     },

src/case/button/node/node.arrow.js

@@ -32,6 +32,7 @@ BI.ArrowNode = BI.inherit(BI.NodeButton, {
             type: "bi.vertical_adapt",
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
             items: [this.checkbox, {
+                el: {
                     type: "bi.label",
                     ref: function (_ref) {
                         self.text = _ref;
@@ -45,6 +46,7 @@ BI.ArrowNode = BI.inherit(BI.NodeButton, {
                     value: o.value,
                     py: o.py,
                     keyword: o.keyword
+                }
             }]
         };
     },

src/case/button/node/node.plus.js

@@ -37,6 +37,7 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
             type: "bi.vertical_adapt",
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
             items: [this.checkbox, {
+                el: {
                     type: "bi.label",
                     ref: function (_ref) {
                         self.text = _ref;
@@ -50,6 +51,7 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
                     value: o.value,
                     keyword: o.keyword,
                     py: o.py
+                }
             }]
         };
     },

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

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

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 () {

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;

src/core/logic/logic.js

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

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

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

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({

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

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

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

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

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: {

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({

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 () {

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

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,

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 () {

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,

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

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: [{

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

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,

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

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 () {

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[];
+}

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,

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;