Merge branch 'master' of ssh://cloud.finedevelop.com:7999/~kira/fineui

dist/fix/fix.compact.js

@@ -105,6 +105,10 @@
         if (workerMode && this._worker) {
             return;
         }
+        if (this.store) {
+            pushTarget(this.store);
+            return true;
+        }
         if (this._store) {
             var store = findStore(this.options.context || this._parent || this.options.element || this._context);
             if (store) {
@@ -150,8 +154,8 @@
         }
     };
 
-    var unMount = BI.Widget.prototype.__d;
-    BI.Widget.prototype.__d = function () {
+    var unMount = BI.Widget.prototype.__destroy;
+    BI.Widget.prototype.__destroy = function () {
         try {
             unMount.apply(this, arguments);
         } catch (e) {

dist/fix/fix.js

@@ -579,7 +579,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
                 // remove self from vm's watcher list
                 // this is a somewhat expensive operation so we skip it
                 // if the vm is being destroyed.
-                remove(this.vm._watchers, this);
+                remove(this.vm && this.vm._watchers, this);
                 var i = this.deps.length;
                 while (i--) {
                     this.deps[i].removeSub(this);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fineui",
-  "version": "2.0.20220302141337",
+  "version": "2.0.20220311145317",
   "description": "fineui",
   "main": "dist/fineui.min.js",
   "types": "dist/lib/index.d.ts",

src/base/collection/collection.js

@@ -11,6 +11,9 @@ BI.CollectionView = BI.inherit(BI.Widget, {
             baseCls: "bi-collection",
             // width: 400, //必设
             // height: 300, //必设
+            scrollable: true,
+            scrollx: false,
+            scrolly: false,
             overflowX: true,
             overflowY: true,
             cellSizeAndPositionGetter: BI.emptyFn,
@@ -49,14 +52,30 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                 scrollTop: o.scrollTop
             });
         });
+        // 兼容一下
+        var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
+        if (o.overflowX === false) {
+            if (o.overflowY === false) {
+                scrollable = false;
+            } else {
+                scrollable = "y"
+            }
+        } else {
+            if (o.overflowY === false) {
+                scrollable = "x";
+            }
+        }
         BI._lazyCreateWidget({
             type: "bi.vertical",
             element: this,
-            scrollable: o.overflowX === true && o.overflowY === true,
-            scrolly: o.overflowX === false && o.overflowY === true,
-            scrollx: o.overflowX === true && o.overflowY === false,
+            scrollable: scrollable,
+            scrolly: scrolly,
+            scrollx: scrollx,
             items: [this.container]
         });
+        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
         if (o.items.length > 0) {
             this._calculateSizeAndPositionData();
             this._populate();

src/base/combination/group.button.js

@@ -21,7 +21,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
     },
 
     render: function () {
-        var o = this.options;
+        var self = this, o = this.options;
         var behaviors = {};
         BI.each(o.behaviors, function (key, rule) {
             behaviors[key] = BI.BehaviorFactory.createBehavior(key, {
@@ -29,7 +29,15 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
             });
         });
         this.behaviors = behaviors;
-        this.populate(o.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
+        if (BI.isFunction(o.value)) {
+            this.__watch(o.value, function (context, newValue) {
+                self.setValue(newValue);
+            })
+        }
         if (BI.isKey(o.value) || BI.isNotEmptyArray(o.value)) {
             this.setValue(o.value);
         }

src/base/combination/group.virtual.js

@@ -12,8 +12,16 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
     },
 
     render: function () {
-        var o = this.options;
-        this.populate(o.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
+        if (BI.isFunction(o.value)) {
+            this.__watch(o.value, function (context, newValue) {
+                self.setValue(newValue);
+            })
+        }
         if (BI.isKey(o.value)) {
             this.setValue(o.value);
         }

src/base/combination/loader.js

@@ -109,8 +109,11 @@ BI.Loader = BI.inherit(BI.Widget, {
         o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
             o.isDefaultInit && BI.isEmpty(o.items) && this._populate();
         }, this));
-        if (BI.isNotEmptyArray(o.items)) {
-            this._populate(o.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        if (BI.isNotEmptyArray(items)) {
+            this._populate(items);
         }
     },
 
@@ -162,7 +165,6 @@ BI.Loader = BI.inherit(BI.Widget, {
         this.button_group.addItems.apply(this.button_group, arguments);
     },
 
-
     _populate: function (items) {
         var self = this, o = this.options;
         if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {

src/base/combination/navigation.js

@@ -50,6 +50,12 @@ BI.Navigation = BI.inherit(BI.Widget, {
             afterCardCreated: BI.bind(this.afterCardCreated, this),
             afterCardShow: BI.bind(this.afterCardShow, this)
         });
+
+        if (BI.isFunction(o.showIndex)) {
+            this.__watch(o.showIndex, function (context, newValue) {
+                self.setSelect(newValue);
+            })
+        }
     },
 
     created: function () {

src/base/combination/searcher.js

@@ -315,6 +315,10 @@ BI.Searcher = BI.inherit(BI.Widget, {
 
     blur: function () {
         this.editor.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.editor.setWaterMark(v);
     }
 });
 BI.Searcher.EVENT_CHANGE = "EVENT_CHANGE";

src/base/combination/tab.js

@@ -15,7 +15,8 @@ BI.Tab = BI.inherit(BI.Widget, {
             tab: false,
             cardCreator: function (v) {
                 return BI.createWidget();
-            }
+            },
+            keepAlives: []
         });
     },
 
@@ -54,13 +55,19 @@ BI.Tab = BI.inherit(BI.Widget, {
         listener.on(BI.ShowListener.EVENT_CHANGE, function (value) {
             self.fireEvent(BI.Tab.EVENT_CHANGE, value, self);
         });
+
+        if (BI.isFunction(o.showIndex)) {
+            this.__watch(o.showIndex, function (context, newValue) {
+                self.setSelect(newValue);
+            })
+        }
     },
 
     _deleteOtherCards: function (currCardName) {
         var self = this, o = this.options;
         if (o.single === true) {
             BI.each(this.cardMap, function (name, card) {
-                if (name !== (currCardName + "")) {
+                if (name !== (currCardName + "") && self._keepAlive(name) !== true) {
                     self.layout.deleteCardByName(name);
                     delete self.cardMap[name];
                 }
@@ -76,6 +83,12 @@ BI.Tab = BI.inherit(BI.Widget, {
         }
     },
 
+    _keepAlive: function (v) {
+        var o = this.options;
+        return BI.isFunction(o.keepAlives) ? o.keepAlives(v) : BI.contains(o.keepAlives, v);
+
+    },
+
     created: function () {
         var o = this.options;
         if (o.showIndex !== false) {

src/base/grid/grid.js

@@ -11,6 +11,9 @@ BI.GridView = BI.inherit(BI.Widget, {
             baseCls: "bi-grid-view",
             // width: 400, //必设
             // height: 300, //必设
+            scrollable: true,
+            scrollx: false,
+            scrolly: false,
             overflowX: true,
             overflowY: true,
             overscanColumnCount: 0,
@@ -52,14 +55,30 @@ BI.GridView = BI.inherit(BI.Widget, {
                 scrollTop: o.scrollTop
             });
         });
+        // 兼容一下
+        var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
+        if (o.overflowX === false) {
+            if (o.overflowY === false) {
+                scrollable = false;
+            } else {
+                scrollable = "y"
+            }
+        } else {
+            if (o.overflowY === false) {
+                scrollable = "x";
+            }
+        }
         BI._lazyCreateWidget({
             type: "bi.vertical",
             element: this,
-            scrollable: o.overflowX === true && o.overflowY === true,
-            scrolly: o.overflowX === false && o.overflowY === true,
-            scrollx: o.overflowX === true && o.overflowY === false,
+            scrollable: scrollable,
+            scrolly: scrolly,
+            scrollx: scrollx,
             items: [this.container]
         });
+        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
         if (o.items.length > 0) {
             this._calculateSizeAndPositionData();
             this._populate();

src/base/list/listview.js

@@ -44,6 +44,9 @@ BI.ListView = BI.inherit(BI.Widget, {
     // mounted之后绑定事件
     mounted: function () {
         var self = this, o = this.options;
+        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
         this._populate();
         this.element.scroll(function (e) {
             o.scrollTop = self.element.scrollTop();

src/base/list/virtualgrouplist.js

@@ -57,11 +57,21 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
     // mounted之后绑定事件
     mounted: function () {
         var self = this, o = this.options;
+        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
         this._populate();
-        this.element.scroll(BI.debounce(function (e) {
+        this.ticking = false;
+        this.element.scroll(function() {
             o.scrollTop = self.element.scrollTop();
-            self._calculateBlocksToRender();
-        }, 30));
+            if (!self.ticking) {
+                requestAnimationFrame(function () {
+                    self._calculateBlocksToRender();
+                    self.ticking = false;
+                });
+                self.ticking = true;
+            }
+        });
         BI.ResizeDetector.addResizeListener(this, function () {
             self._calculateBlocksToRender();
         });

src/base/list/virtuallist.js

@@ -53,6 +53,9 @@ BI.VirtualList = BI.inherit(BI.Widget, {
     // mounted之后绑定事件
     mounted: function () {
         var self = this, o = this.options;
+        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
         this._populate();
         this.element.scroll(function (e) {
             o.scrollTop = self.element.scrollTop();

src/base/single/0.single.js

@@ -46,8 +46,11 @@ BI.Single = BI.inherit(BI.Widget, {
     },
 
     _init: function () {
-        BI.Single.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
+        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
+            self.setValue(newValue);
+        }) : o.value;
+        BI.Single.superclass._init.apply(this, arguments);
         if (BI.isKey(o.title) || BI.isKey(o.warningTitle)
             || BI.isFunction(o.title) || BI.isFunction(o.warningTitle)) {
             this.enableHover({

src/base/single/1.text.js

@@ -76,7 +76,9 @@
                 this.text = this;
             }
 
-            var text = this._getShowText();
+            var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) {
+                self.setText(newValue);
+            }) : o.text;
             // 只要不是undefined就可以显示text值，否则显示value
             if (!BI.isUndefined(text)) {
                 this.setText(text);

src/base/single/button/button.basic.js

@@ -29,8 +29,12 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     _init: function () {
-        BI.BasicButton.superclass._init.apply(this, arguments);
+        var self = this;
         var opts = this.options;
+        opts.selected = BI.isFunction(opts.selected) ? this.__watch(opts.selected, function (context, newValue) {
+            self.setSelected(newValue);
+        }) : opts.selected;
+        BI.BasicButton.superclass._init.apply(this, arguments);
 
         if (opts.shadow) {
             this._createShadow();

src/base/single/text.pure.js

@@ -10,7 +10,9 @@
 
         render: function () {
             var self = this, o = this.options;
-            var text = this._getShowText();
+            var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) {
+                self.setText(newValue);
+            }) : o.text;
             if (BI.isKey(text)) {
                 this.setText(text);
             } else if (BI.isKey(o.value)) {

src/case/trigger/trigger.text.js

@@ -11,11 +11,15 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
     },
 
     _defaultConfig: function () {
+        var self = this;
         var conf = BI.TextTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
             baseCls: (conf.baseCls || "") + " bi-text-trigger",
             height: 24,
-            textCls: ""
+            textCls: "",
+            title: function () {
+                return self.text.getText();
+            }
         });
     },
 
@@ -28,9 +32,6 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
             textAlign: "left",
             height: o.height,
             text: o.text,
-            title: function () {
-                return self.text.getText();
-            },
             tipType: o.tipType,
             warningTitle: o.warningTitle,
             hgap: c.hgap,

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/component/treevaluechooser/combo.listtreevaluechooser.js

@@ -110,6 +110,10 @@ BI.ListTreeValueChooserInsertCombo = BI.inherit(BI.AbstractListTreeValueChooser,
 
     blur: function () {
         this.combo.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.combo.setWaterMark(v);
     }
 });
 

src/component/treevaluechooser/combo.treevaluechooser.insert.js

@@ -109,6 +109,10 @@ BI.TreeValueChooserInsertCombo = BI.inherit(BI.AbstractTreeValueChooser, {
 
     blur: function () {
         this.combo.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.combo.setWaterMark(v);
     }
 });
 

src/component/treevaluechooser/combo.treevaluechooser.js

@@ -113,6 +113,10 @@ BI.TreeValueChooserCombo = BI.inherit(BI.AbstractTreeValueChooser, {
 
     blur: function () {
         this.combo.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.combo.setWaterMark(v);
     }
 });
 

src/core/4.widget.js

@@ -147,7 +147,10 @@
                     self.__async = true;
                     var beforeRenderResult = (self.options.beforeRender || self.beforeRender).call(self, render);
                     if (beforeRenderResult instanceof Promise) {
-                        beforeRenderResult.then(render);
+                        beforeRenderResult.then(render).catch(function (e) {
+                            _global.console && console.error(e);
+                            render();
+                        });
                     }
                 } else {
                     self._render();
@@ -159,7 +162,10 @@
                 this.__asking = true;
                 var beforeInitResult = (this.options.beforeInit || this.beforeInit).call(this, init);
                 if (beforeInitResult instanceof Promise) {
-                    beforeInitResult.then(init);
+                    beforeInitResult.then(init).catch(function (e) {
+                        _global.console && console.error(e);
+                        init();
+                    });
                 }
             } else {
                 init();
@@ -224,8 +230,6 @@
                             }
                         }
                         self.element.css(css = newValue);
-                    }, {
-                        deep: true
                     });
                     this.element.css(css);
                 } else {
@@ -242,8 +246,10 @@
                     return getter.call(self, self);
                 }, (handler && function (v) {
                     handler.call(self, self, v);
-                }) || BI.emptyFn, options);
-                this._watchers.push(watcher);
+                }) || BI.emptyFn, BI.extend({deep: true}, options));
+                this._watchers.push(function unwatchFn () {
+                    watcher.teardown();
+                });
                 return watcher.value;
             } else {
                 return getter();
@@ -291,10 +297,15 @@
         },
 
         _initVisual: function () {
-            var o = this.options;
+            var self = this, o = this.options;
             if (o.invisible) {
-                // 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性
-                this.element.css("display", "none");
+                var invisible = BI.isFunction(o.invisible) ? this.__watch(o.invisible, function (context, newValue) {
+                    self.setVisible(!newValue);
+                }) : o.invisible;
+                if (invisible) {
+                    // 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性
+                    this.element.css("display", "none");
+                }
             }
         },
 
@@ -302,24 +313,30 @@
             var self = this, o = this.options;
             if (o.disabled || o.invalid) {
                 if (this.options.disabled) {
-                    this.setEnable(false);
+                    var disabled = BI.isFunction(o.disabled) ? this.__watch(o.disabled, function (context, newValue) {
+                        self.setEnable(!newValue);
+                    }) : o.disabled;
+                    if (disabled) {
+                        this.setEnable(false);
+                    }
                 }
                 if (this.options.invalid) {
-                    this.setValid(false);
+                    var invalid = BI.isFunction(o.invalid) ? this.__watch(o.invalid, function (context, newValue) {
+                        self.setEnable(!newValue);
+                    }) : o.invalid;
+                    if (invalid) {
+                        this.setValid(false);
+                    }
                 }
             }
             if (o.effect) {
                 if (BI.isArray(o.effect)) {
                     if (BI.isArray(o.effect[0])) {
                         BI.each(o.effect, function (i, effect) {
-                            self.__watch(effect[0], effect[1], {
-                                deep: true
-                            });
+                            self.__watch(effect[0], effect[1]);
                         });
                     } else {
-                        self.__watch(o.effect[0], o.effect[1], {
-                            deep: true
-                        });
+                        self.__watch(o.effect[0], o.effect[1]);
                     }
                 } else {
                     this.__watch(o.effect);
@@ -574,6 +591,12 @@
                 throw new Error("组件：组件名已存在，不能进行添加");
             }
             widget._setParent && widget._setParent(this);
+            if (this.options.disabled) {
+                widget.options && (widget.options.disabled = true);
+            }
+            if (this.options.invalid) {
+                widget.options && (widget.options.invalid = true);
+            }
             widget.on(BI.Events.DESTROY, function () {
                 BI.remove(self._children, this);
             });
@@ -692,12 +715,17 @@
         },
 
         __d: function () {
-            callLifeHook(this, "beforeDestroy");
-            this.beforeDestroy = null;
             BI.each(this._children, function (i, widget) {
                 widget && widget._unMount && widget._unMount();
             });
             this._children = {};
+        },
+
+        // 主要是因为_destroy已经提供了protected方法
+        __destroy: function () {
+            callLifeHook(this, "beforeDestroy");
+            this.beforeDestroy = null;
+            this.__d();
             this._parent = null;
             this._isMounted = false;
             callLifeHook(this, "destroyed");
@@ -705,7 +733,7 @@
         },
 
         _unMount: function () {
-            this.__d();
+            this.__destroy();
             this.fireEvent(BI.Events.UNMOUNT);
             this.purgeListeners();
         },
@@ -743,23 +771,32 @@
             // }
             // this._isMounted = false;
             // this.purgeListeners();
-            this._empty();
+
+            // 去掉组件绑定的watcher
+            BI.each(this._watchers, function (i, unwatches) {
+                unwatches = BI.isArray(unwatches) ? unwatches : [unwatches];
+                BI.each(unwatches, function (j, unwatch) {
+                    unwatch();
+                });
+            });
+            this._watchers && (this._watchers = []);
+            this.__d();
+            this.element.empty();
             this.element.unbind();
             this._initCurrent();
             this._init();
-            this._mount();
             // this._initRef();
         },
 
         _destroy: function () {
-            this.__d();
+            this.__destroy();
             this.element.destroy();
             this.purgeListeners();
         },
 
         destroy: function () {
             var self = this, o = this.options;
-            this.__d();
+            this.__destroy();
             if (o.animation) {
                 this._innerSetVisible(false);
                 setTimeout(function () {

src/core/func/alias.js

@@ -417,16 +417,17 @@
         "\"": """,
         "<": "&lt;",
         ">": "&gt;",
-        " ": "&nbsp;"
+        "\x20": "&nbsp;",
+        "\n": "&#10;"
     };
     BI.htmlEncode = function (text) {
-        return BI.isNull(text) ? "" : BI.replaceAll(text + "", "&|\"|<|>|\\s", function (v) {
-            return SPECIAL_TAGS[v] ? SPECIAL_TAGS[v] : "&nbsp;";
+        return BI.isNull(text) ? "" : BI.replaceAll(text + "", BI.keys(SPECIAL_TAGS).join("|"), function (v) {
+            return SPECIAL_TAGS[v] ? SPECIAL_TAGS[v] : v;
         });
     };
     // html decode
     BI.htmlDecode = function (text) {
-        return BI.isNull(text) ? "" : BI.replaceAll(text + "", "&amp;|&quot;|&lt;|&gt;|&nbsp;", function (v) {
+        return BI.isNull(text) ? "" : BI.replaceAll(text + "", BI.values(SPECIAL_TAGS).join("|"), function (v) {
             switch (v) {
                 case "&amp;":
                     return "&";
@@ -437,8 +438,11 @@
                 case "&gt;":
                     return ">";
                 case "&nbsp;":
-                default:
                     return " ";
+                case "&#10;":
+                    return "\n";
+                default:
+                    return v;
             }
         });
     };

src/core/h.js

@@ -39,10 +39,17 @@ BI.h = function (type, props, children) {
             right: children
         }, props);
     }
-    if (children.length === 1 && BI.isKey(children[0])) {
-        return BI.extend({
-            type: type
-        }, { text: children[0] }, props);
+    if (children.length === 1) {
+        if (BI.isKey(children[0])) {
+            return BI.extend({
+                type: type
+            }, { text: children[0] }, props);
+        }
+        if (BI.isFunction(children[0])) {
+            return BI.extend({
+                type: type
+            }, { items: children[0] }, props);
+        }
     }
 
     return BI.extend({

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

@@ -29,8 +29,6 @@ BI.Layout = BI.inherit(BI.Widget, {
             o.columnSize = this.__watch(columnSizeFn, function (context, newValue) {
                 o.columnSize = newValue;
                 self.resize();
-            }, {
-                deep: true
             });
         }
         if (BI.isFunction(o.rowSize)) {
@@ -38,8 +36,6 @@ BI.Layout = BI.inherit(BI.Widget, {
             o.rowSize = this.__watch(rowSizeFn, function (context, newValue) {
                 o.rowSize = newValue;
                 self.resize();
-            }, {
-                deep: true
             });
         }
     },
@@ -62,11 +58,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 +84,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/adapt/absolute.center.js

@@ -18,7 +18,11 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/adapt/adapt.table.js

@@ -19,8 +19,8 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        var o = this.options;
         BI.TableAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
@@ -28,7 +28,10 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
             height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
             "white-space": "nowrap"
         });
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/adapt/auto.horizontal.js

@@ -18,7 +18,11 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/fill/float.fill.horizontal.js

@@ -16,7 +16,11 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/flex/flex.horizontal.js

@@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -31,7 +31,10 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/flex.vertical.js

@@ -22,7 +22,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -30,7 +30,10 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@@ -24,10 +24,13 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@@ -24,10 +24,13 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/float/float.absolute.center.js

@@ -12,7 +12,11 @@ BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.absolute.js

@@ -17,28 +17,54 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AbsoluteLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
         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/core/wrapper/layout/layout.adaptive.js

@@ -12,7 +12,11 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AdaptiveLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.border.js

@@ -13,7 +13,11 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.BorderLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/layout.card.js

@@ -16,7 +16,11 @@ BI.CardLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.CardLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     stroke: function (items) {

src/core/wrapper/layout/layout.default.js

@@ -18,7 +18,11 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DefaultLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.division.js

@@ -15,7 +15,11 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DivisionLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/layout.flow.js

@@ -21,7 +21,7 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatLeftLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
@@ -34,7 +34,10 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
                 paddingBottom: this._optimiseGap(o.innerVgap)
             })
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
@@ -110,8 +113,23 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatRightLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        if (o.innerHgap !== 0) {
+            this.element.css({
+                paddingLeft: this._optimiseGap(o.innerHgap),
+                paddingRight: this._optimiseGap(o.innerHgap)
+            })
+        }
+        if (o.innerVgap !== 0) {
+            this.element.css({
+                paddingTop: this._optimiseGap(o.innerVgap),
+                paddingBottom: this._optimiseGap(o.innerVgap)
+            })
+        }
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.grid.js

@@ -15,7 +15,11 @@ BI.GridLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.GridLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function () {

src/core/wrapper/layout/layout.inline.js

@@ -27,11 +27,14 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.InlineLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             textAlign: o.horizontalAlign
         });
-        this.populate(o.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.lattice.js

@@ -16,7 +16,11 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.LatticeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.table.js

@@ -19,7 +19,11 @@ BI.TableLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.TableLayout.superclass.render.apply(this, arguments);
         this.rows = 0;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {

src/core/wrapper/layout/layout.tape.js

@@ -20,7 +20,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HTapeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

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

@@ -32,7 +32,10 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             "border-collapse": "separate"
         });
         this.rows = 0;
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {

src/core/wrapper/layout/layout.vertical.js

@@ -19,7 +19,11 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.VerticalLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.window.js

@@ -22,7 +22,11 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.WindowLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/less/base/tree/tree.expander.less

@@ -13,6 +13,9 @@
 }
 
 .bi-theme-dark {
+  .bi-tree-expander-popup.line:before {
+    border-left: 1px dashed @color-bi-border-tree-expander-popup-line-theme-dark;
+  }
   .bi-tree-expander-popup.line.solid:before {
     border-left: 1px solid @color-bi-border-tree-expander-popup-line-theme-dark;
   }

src/less/lib/font.less

@@ -1,57 +1,57 @@
 //字体库
 
-@font-cross: "e6d0";
+@font-cross: "e1ab";
 
-@font-circle-close: "e6d5";
+@font-circle-close: "e1a9";
 
-@font-search: "e6dc";
+@font-search: "e1c3";
 
-@font-date: "e733";
-@font-time: "e6b1";
-@font-change: "e72f";
+@font-date: "e1d3";
+@font-time: "e1ae";
+@font-change: "e1cd";
 
-@font-dot: "e762";
+@font-dot: "e1aa";
 
-@font-plus: "e75b";
-@font-minus: "e75a";
+@font-plus: "e1a0";
+@font-minus: "e19e";
 
-@font-right-triangle: "e70c";
+@font-right-triangle: "e1bd";
 
-@font-copy: "e6bd";
-@font-check-mark: "e6cf";
+@font-copy: "e1ad";
+@font-check-mark: "e1b0";
 
-@font-arrow-left: "e70d";
-@font-arrow-right: "e70c";
+@font-arrow-left: "e1bc";
+@font-arrow-right: "e1bd";
 
-@font-up-triangle: "e70a";
-@font-down-triangle: "e70b";
+@font-up-triangle: "e1c6";
+@font-down-triangle: "e1c9";
 
-@font-solid-left: "e6d9";
-@font-solid-right: "e6d8";
-@font-solid-top: "e6d6";
-@font-solid-bottom: "e6d7";
+@font-solid-left: "e1c4";
+@font-solid-right: "e1a5";
+@font-solid-top: "e1ac";
+@font-solid-bottom: "e1c0";
 
-@font-trigger-triangle: "e64e";
+@font-trigger-triangle: "e1d5";
 
 
-@font-less: "e75e";
-@font-less-equal: "e761";
+@font-less: "e1d1";
+@font-less-equal: "e1d2";
 
-@font-bold: "e697";
-@font-italic: "e69d";
-@font-underline: "e69c";
-@font-color: "e698";
-@font-background: "e699";
-@font-color-underline: "e69a";
-@font-align-left: "e6ca";
-@font-align-center: "e6bf";
-@font-align-right: "e6c8";
+@font-bold: "e19b";
+@font-italic: "e199";
+@font-underline: "e1d6";
+@font-color: "e198";
+@font-background: "e19a";
+@font-color-underline: "e19c";
+@font-align-left: "e1a7";
+@font-align-center: "e1a2";
+@font-align-right: "e1af";
 
-@font-tip-error: "e757";
-@font-tip-success: "e756";
-@font-tip-warning: "e755";
-@font-tip-message: "e74b";
+@font-tip-error: "e1da";
+@font-tip-success: "e1db";
+@font-tip-warning: "e1d7";
+@font-tip-message: "e1d9";
 
-@font-key: "e740";
+@font-key: "e1d0";
 
-@font-add: "e6dd";
+@font-add: "e1c7";

src/router/router.js

@@ -3179,7 +3179,8 @@
           ref: function (_ref) {
             self.tab = _ref;
           },
-          single: false, // 是不是单页面
+          single: o.single, // 是不是单页面
+          keepAlives: o.keepAlives,
           logic: {
             dynamic: false
           },
@@ -3190,7 +3191,7 @@
         };
       },
       destroyed: function () {
-        cbs.remove(this._callbackListener);
+        BI.remove(cbs, this._callbackListener);
       }
     });
     BI.shortcut("bi.router_view", BI.RouterView);

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/editor/editor.text.js

@@ -50,7 +50,9 @@ BI.TextEditor = BI.inherit(BI.Widget, {
             quitChecker: o.quitChecker,
             allowBlank: o.allowBlank,
             watermark: o.watermark,
-            errorText: o.errorText
+            errorText: o.errorText,
+            inputType: o.inputType,
+            autocomplete: o.autocomplete
         });
         this.editor.on(BI.Controller.EVENT_CHANGE, function () {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);

src/widget/multilayerselecttree/multilayerselecttree.combo.js

@@ -250,6 +250,10 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
 
     showView: function () {
         this.combo.showView();
+    },
+
+    setWaterMark: function (v) {
+        this.trigger.setWaterMark(v);
     }
 });
 

src/widget/multilayerselecttree/multilayerselecttree.trigger.js

@@ -245,6 +245,10 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
 
     blur: function () {
         this.searcher.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.searcher.setWaterMark(v);
     }
 });
 

src/widget/multilayersingletree/multilayersingletree.combo.js

@@ -251,6 +251,10 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
 
     showView: function () {
         this.combo.showView();
+    },
+
+    setWaterMark: function (v) {
+        this.trigger.setWaterMark(v);
     }
 });
 

src/widget/multilayersingletree/multilayersingletree.trigger.js

@@ -247,6 +247,10 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
 
     blur: function () {
         this.searcher.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.searcher.setWaterMark(v);
     }
 });
 BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS";

src/widget/multiselect/multiselect.trigger.js

@@ -144,6 +144,10 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, {
 
     blur: function () {
         this.searcher.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.searcher.setWaterMark(v);
     }
 });
 

src/widget/multiselect/trigger/editor.multiselect.js

@@ -93,6 +93,10 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, {
 
     populate: function (items) {
 
+    },
+
+    setWaterMark: function (v) {
+        this.editor.setWaterMark(v);
     }
 });
 

src/widget/multitree/multi.tree.combo.js

@@ -352,6 +352,10 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
 
     blur: function () {
         this.trigger.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.trigger.setWaterMark(v);
     }
 });
 

src/widget/multitree/multi.tree.insert.combo.js

@@ -368,6 +368,10 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
 
     blur: function () {
         this.trigger.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.trigger.setWaterMark(v);
     }
 });
 

src/widget/multitree/multi.tree.list.combo.js

@@ -386,6 +386,10 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
 
     blur: function () {
         this.trigger.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.trigger.setWaterMark(v);
     }
 });
 

src/widget/multitree/trigger/searcher.list.multi.tree.js

@@ -172,6 +172,10 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, {
 
     blur: function () {
         this.editor.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.editor.setWaterMark(v);
     }
 });
 

src/widget/multitree/trigger/searcher.multi.tree.js

@@ -192,6 +192,10 @@ BI.MultiTreeSearcher = BI.inherit(BI.Widget, {
 
     blur: function () {
         this.editor.blur();
+    },
+
+    setWaterMark: function (v) {
+        this.editor.setWaterMark(v);
     }
 });
 

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/base/combination/tab.ts

@@ -15,6 +15,7 @@ export declare class Tab extends Widget {
             dynamic: boolean;
         };
         tab?: Obj;
+        keepAlives?: string[] | ((cardName: string) => boolean)
     }
 
     setSelect(v: string | number, action?: Action, callback?: Function): void;

typescript/case/segment/segment.ts

@@ -0,0 +1,8 @@
+import { Widget } from "../../core/widget";
+
+export declare class Segment extends Widget {
+    static xtype: string;
+    static EVENT_CHANGE: string;
+
+    setEnabledValue(v: any): void;
+}

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/component/treevaluechooser/combo.listtreevaluechooser.ts

@@ -27,4 +27,6 @@ export declare class ListTreeValueChooserInsertCombo extends AbstractListTreeVal
     focus(): void;
 
     blur(): void;
+
+    setWaterMark(v: string): void;
 }

typescript/component/treevaluechooser/combo.treevaluechooser.insert.ts

@@ -26,4 +26,6 @@ export declare class TreeValueChooserInsertCombo extends AbstractTreeValueChoose
     focus(): void;
 
     blur(): void;
+
+    setWaterMark(v: string): void;
 }

typescript/component/treevaluechooser/combo.treevaluechooser.ts

@@ -28,4 +28,6 @@ export declare class TreeValueChooserCombo extends AbstractTreeValueChooser {
     focus(): void;
 
     blur(): void;
+    
+    setWaterMark(v: string): void;
 }

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";
@@ -145,6 +146,7 @@ import { MultiSelectInsertList } from "./widget/multiselectlist/multiselectlist.
 import { YearMonthInterval } from "./widget/yearmonthinterval/yearmonthinterval";
 import { NumberEditor } from "./widget/numbereditor/numbereditor";
 import { TextValueCheckCombo } from "./case/combo/textvaluecheckcombo/combo.textvaluecheck";
+import { Segment } from "./case/segment/segment";
 import { LinearSegment } from "./case/linersegment/linear.segment";
 import { Img } from "./base/single/img/img";
 import { EditorIconCheckCombo } from "./case/combo/editoriconcheckcombo/combo.editiconcheck";
@@ -218,6 +220,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;
@@ -343,6 +346,7 @@ export interface BI extends _func, _i18n, _base, _inject, _var, _web, _utils {
     YearMonthInterval: typeof YearMonthInterval;
     TextValueCheckCombo: typeof TextValueCheckCombo;
     NumberEditor: typeof NumberEditor;
+    Segment: typeof Segment;
     LinearSegment: typeof LinearSegment;
     Img: typeof Img;
     EditorIconCheckCombo: typeof EditorIconCheckCombo;
@@ -512,6 +516,7 @@ export {
     Switch,
     HorizontalLayout,
     ShelterEditor,
+    Form,
     TextTrigger,
     SelectTextTrigger,
     DateInterval,
@@ -531,6 +536,7 @@ export {
     YearMonthInterval,
     TextValueCheckCombo,
     NumberEditor,
+    Segment,
     LinearSegment,
     Img,
     EditorIconCheckCombo,

typescript/shims-tsx.ts

@@ -13,6 +13,7 @@ interface UIProps {
     bgap: number;
     vgap: number;
     hgap: number;
+    inset: number | string;
 }
 
 // 一些布局的附加属性

typescript/widget/multitree/multi.tree.combo.ts

@@ -19,4 +19,6 @@ export declare class MultiTreeCombo extends Single {
     focus(): void;
 
     blur(): void;
+
+    setWaterMark(v: string): void;
 }

typescript/widget/multitree/multi.tree.insert.combo.ts

@@ -27,4 +27,6 @@ export declare class MultiTreeInsertCombo extends Single {
     focus(): void;
 
     blur(): void;
+
+    setWaterMark(v: string): void;
 }

typescript/widget/multitree/multi.tree.list.combo.ts

@@ -26,4 +26,6 @@ export declare class MultiTreeListCombo extends Single {
     focus(): void;
 
     blur(): void;
+
+    setWaterMark(v: string): void;
 }