Merge pull request #739 in VISUAL/fineui from ~WINDY/fineui:master to master

* commit 'ea11d755121445b99e8b6e8f878ab893994c0bff':
  update
  BI-34242 弹窗提供可自适应body高度的配置

demo/js/core/popup/demo.popover.js

@@ -7,18 +7,19 @@ Demo.Func = BI.inherit(BI.Widget, {
     },
     render: function () {
         var id = BI.UUID();
+        var body;
         return {
             type: "bi.vertical",
             vgap: 10,
             items: [{
                 type: "bi.text_button",
-                text: "点击弹出Popover(normal size)",
+                text: "点击弹出Popover(normal size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
                     BI.Popovers.create(id, {
                         type: "bi.bar_popover",
-                        size: "big",
+                        size: "normal",
                         header: {
                             type: "bi.label",
                             text: "这个是header"
@@ -31,7 +32,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }, {
                 type: "bi.text_button",
-                text: "点击弹出Popover(small size)",
+                text: "点击弹出Popover(small size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
@@ -50,7 +51,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }, {
                 type: "bi.text_button",
-                text: "点击弹出Popover(big size)",
+                text: "点击弹出Popover(big size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
@@ -67,6 +68,80 @@ Demo.Func = BI.inherit(BI.Widget, {
                         }
                     }).open(id);
                 }
+            }, {
+                type: "bi.text_button",
+                text: "点击弹出Popover(normal size & adapt body区域高度是300)",
+                height: 30,
+                handler: function () {
+                    BI.Popovers.remove(id);
+                    BI.Popovers.create(id, {
+                        type: "bi.bar_popover",
+                        size: "normal",
+                        logic: {
+                            dynamic: true
+                        },
+                        header: {
+                            type: "bi.label",
+                            text: "这个是header"
+                        },
+                        body: {
+                            type: "bi.vertical",
+                            items: [{
+                                type: "bi.button_group",
+                                ref: function () {
+                                    body = this;
+                                },
+                                items: BI.map(BI.range(0, 10), function () {
+                                    return {
+                                        type: "bi.label",
+                                        text: "1",
+                                        height: 30
+                                    };
+                                }),
+                                layouts: [{
+                                    type: "bi.vertical"
+                                }]
+                            }]
+                        }
+                    }).open(id);
+                }
+            }, {
+                type: "bi.text_button",
+                text: "点击弹出Popover(small size & adapt body区域高度是900)",
+                height: 30,
+                handler: function () {
+                    BI.Popovers.remove(id);
+                    BI.Popovers.create(id, {
+                        type: "bi.bar_popover",
+                        size: "small",
+                        logic: {
+                            dynamic: true
+                        },
+                        header: {
+                            type: "bi.label",
+                            text: "这个是header"
+                        },
+                        body: {
+                            type: "bi.vertical",
+                            items: [{
+                                type: "bi.button_group",
+                                ref: function () {
+                                    body = this;
+                                },
+                                items: BI.map(BI.range(0, 30), function () {
+                                    return {
+                                        type: "bi.label",
+                                        text: "1",
+                                        height: 30
+                                    };
+                                }),
+                                layouts: [{
+                                    type: "bi.vertical"
+                                }]
+                            }]
+                        }
+                    }).open(id);
+                }
             }, {
                 type: "bi.text_button",
                 text: "点击弹出Popover(custom)",

dist/base.js

@@ -5708,6 +5708,9 @@ BI.Popover = BI.inherit(BI.Widget, {
             // width: 600,
             // height: 500,
             size: "normal", // small, normal, big
+            logic: {
+                dynamic: false
+            },
             header: null,
             body: null,
             footer: null
@@ -5723,68 +5726,77 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
-                left: BI.clamp(self.startX, 0, W - size.width) + "px",
+                left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - size.height) + "px"
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize();
         }, function () {
             self.tracker.releaseMouseMoves();
         }, _global);
-        var items = {
+        var items = [{
-            north: {
+            el: {
-                el: {
+                type: "bi.htape",
-                    type: "bi.htape",
+                cls: "bi-message-title bi-header-background",
-                    cls: "bi-message-title bi-header-background",
+                ref: function (_ref) {
-                    ref: function (_ref) {
+                    self.dragger = _ref;
-                        self.dragger = _ref;
-                    },
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
-                                extraCls: "bi-font-bold"
-                            }) : {
-                                type: "bi.label",
-                                cls: "bi-font-bold",
-                                height: this._constant.HEADER_HEIGHT,
-                                text: o.header,
-                                textAlign: "left"
-                            },
-                            left: 20,
-                            top: 0,
-                            right: 0,
-                            bottom: 0
-                        }]
-                    }, {
-                        el: {
-                            type: "bi.icon_button",
-                            cls: "bi-message-close close-font",
-                            height: this._constant.HEADER_HEIGHT,
-                            handler: function () {
-                                self.close();
-                            }
-                        },
-                        width: 56
-                    }]
                 },
-                height: this._constant.HEADER_HEIGHT
+                items: [{
-            },
-            center: {
-                el: {
                     type: "bi.absolute",
                     items: [{
-                        el: BI.createWidget(o.body),
+                        el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
+                            extraCls: "bi-font-bold"
+                        }) : {
+                            type: "bi.label",
+                            cls: "bi-font-bold",
+                            height: this._constant.HEADER_HEIGHT,
+                            text: o.header,
+                            textAlign: "left"
+                        },
                         left: 20,
-                        top: 10,
+                        top: 0,
-                        right: 20,
+                        right: 0,
                         bottom: 0
                     }]
-                }
+                }, {
+                    el: {
+                        type: "bi.icon_button",
+                        cls: "bi-message-close close-font",
+                        height: this._constant.HEADER_HEIGHT,
+                        handler: function () {
+                            self.close();
+                        }
+                    },
+                    width: 56
+                }],
+                height: this._constant.HEADER_HEIGHT
+            },
+            height: this._constant.HEADER_HEIGHT
+        }, {
+            el: o.logic.dynamic ? {
+                type: "bi.vertical",
+                cls: "popover-body",
+                ref: function () {
+                    self.body = this;
+                },
+                hgap: 20,
+                tgap: 10,
+                items: [{
+                    el: BI.createWidget(o.body)
+                }]
+            } : {
+                type: "bi.absolute",
+                items: [{
+                    el: BI.createWidget(o.body),
+                    left: 20,
+                    top: 10,
+                    right: 20,
+                    bottom: 0
+                }]
             }
-        };
+        }];
         if (o.footer) {
-            items.south = {
+            items.push({
                 el: {
                     type: "bi.absolute",
                     items: [{
@@ -5793,30 +5805,41 @@ BI.Popover = BI.inherit(BI.Widget, {
                         top: 0,
                         right: 20,
                         bottom: 0
-                    }]
+                    }],
+                    height: 44
                 },
                 height: 44
-            };
+            });
         }
 
         var size = this._calculateSize();
 
-        return {
+        return BI.extend({
-            type: "bi.border",
+            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: size.width,
+            width: size.width
+        }, o.logic.dynamic ? {
+            type: "bi.vertical",
+            scrolly: false
+        } : {
+            type: "bi.vtape",
             height: size.height
-        };
+        });
     },
 
     mounted: function () {
-        var self = this;
+        var self = this, o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
             self.startY = pos.top;
             self.tracker.captureMouseMoves(e);
         });
+        if (o.logic.dynamic) {
+            var height = this.element.height();
+            var compareHeight = BI.clamp(height, 200, 600) - (o.footer ? 84 : 44);
+            this.body.element.height(compareHeight);
+        }
     },
 
     _calculateSize: function () {

dist/bundle.js

@@ -19586,7 +19586,7 @@ _.extend(BI, {
         if(!_global.navigator) {
             return false;
         }
-        return /safari/i.test(navigator.userAgent.toLowerCase());
+        return /safari/i.test(navigator.userAgent.toLowerCase()) && !/chrome/i.test(navigator.userAgent.toLowerCase());
     },
 
     isKhtml: function () {
@@ -31244,6 +31244,105 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
+ * 自适应水平和垂直方向都居中容器
+ * @class BI.TableCenterAdaptLayout
+ * @extends BI.Layout
+ */
+BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-table-center-adapt-layout",
+            columnSize: [],
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
+        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+            position: "relative",
+            display: "table",
+            width: "100%",
+            height: "100%",
+            "white-space": "nowrap"
+        });
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+
+        var o = this.options;
+        var td;
+        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+        if (!this.hasWidget(this._getChildName(i))) {
+            var w = BI.createWidget(item);
+            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
+            td = BI.createWidget({
+                type: "bi.default",
+                attributes: {
+                    width: width
+                },
+                items: [w]
+            });
+            this.addWidget(this._getChildName(i), td);
+        } else {
+            td = this.getWidgetByName(this._getChildName(i));
+            td.element.attr("width", width);
+        }
+        td.element.css({"max-width": o.columnSize[i]});
+        if (i === 0) {
+            td.element.addClass("first-element");
+        }
+        td.element.css({
+            position: "relative",
+            display: "table-cell",
+            "vertical-align": "middle",
+            margin: "0",
+            padding: "0",
+            height: "100%"
+        });
+        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        return td;
+    },
+
+    appendFragment: function (frag) {
+        this.$table.append(frag);
+        this.element.append(this.$table);
+    },
+
+    resize: function () {
+        // console.log("center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.TableCenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.table_center_adapt", BI.TableCenterAdaptLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -41143,6 +41242,9 @@ BI.Popover = BI.inherit(BI.Widget, {
             // width: 600,
             // height: 500,
             size: "normal", // small, normal, big
+            logic: {
+                dynamic: false
+            },
             header: null,
             body: null,
             footer: null
@@ -41158,68 +41260,77 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
-                left: BI.clamp(self.startX, 0, W - size.width) + "px",
+                left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - size.height) + "px"
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize();
         }, function () {
             self.tracker.releaseMouseMoves();
         }, _global);
-        var items = {
+        var items = [{
-            north: {
+            el: {
-                el: {
+                type: "bi.htape",
-                    type: "bi.htape",
+                cls: "bi-message-title bi-header-background",
-                    cls: "bi-message-title bi-header-background",
+                ref: function (_ref) {
-                    ref: function (_ref) {
+                    self.dragger = _ref;
-                        self.dragger = _ref;
-                    },
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
-                                extraCls: "bi-font-bold"
-                            }) : {
-                                type: "bi.label",
-                                cls: "bi-font-bold",
-                                height: this._constant.HEADER_HEIGHT,
-                                text: o.header,
-                                textAlign: "left"
-                            },
-                            left: 20,
-                            top: 0,
-                            right: 0,
-                            bottom: 0
-                        }]
-                    }, {
-                        el: {
-                            type: "bi.icon_button",
-                            cls: "bi-message-close close-font",
-                            height: this._constant.HEADER_HEIGHT,
-                            handler: function () {
-                                self.close();
-                            }
-                        },
-                        width: 56
-                    }]
                 },
-                height: this._constant.HEADER_HEIGHT
+                items: [{
-            },
-            center: {
-                el: {
                     type: "bi.absolute",
                     items: [{
-                        el: BI.createWidget(o.body),
+                        el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
+                            extraCls: "bi-font-bold"
+                        }) : {
+                            type: "bi.label",
+                            cls: "bi-font-bold",
+                            height: this._constant.HEADER_HEIGHT,
+                            text: o.header,
+                            textAlign: "left"
+                        },
                         left: 20,
-                        top: 10,
+                        top: 0,
-                        right: 20,
+                        right: 0,
                         bottom: 0
                     }]
-                }
+                }, {
+                    el: {
+                        type: "bi.icon_button",
+                        cls: "bi-message-close close-font",
+                        height: this._constant.HEADER_HEIGHT,
+                        handler: function () {
+                            self.close();
+                        }
+                    },
+                    width: 56
+                }],
+                height: this._constant.HEADER_HEIGHT
+            },
+            height: this._constant.HEADER_HEIGHT
+        }, {
+            el: o.logic.dynamic ? {
+                type: "bi.vertical",
+                cls: "popover-body",
+                ref: function () {
+                    self.body = this;
+                },
+                hgap: 20,
+                tgap: 10,
+                items: [{
+                    el: BI.createWidget(o.body)
+                }]
+            } : {
+                type: "bi.absolute",
+                items: [{
+                    el: BI.createWidget(o.body),
+                    left: 20,
+                    top: 10,
+                    right: 20,
+                    bottom: 0
+                }]
             }
-        };
+        }];
         if (o.footer) {
-            items.south = {
+            items.push({
                 el: {
                     type: "bi.absolute",
                     items: [{
@@ -41228,30 +41339,41 @@ BI.Popover = BI.inherit(BI.Widget, {
                         top: 0,
                         right: 20,
                         bottom: 0
-                    }]
+                    }],
+                    height: 44
                 },
                 height: 44
-            };
+            });
         }
 
         var size = this._calculateSize();
 
-        return {
+        return BI.extend({
-            type: "bi.border",
+            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: size.width,
+            width: size.width
+        }, o.logic.dynamic ? {
+            type: "bi.vertical",
+            scrolly: false
+        } : {
+            type: "bi.vtape",
             height: size.height
-        };
+        });
     },
 
     mounted: function () {
-        var self = this;
+        var self = this, o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
             self.startY = pos.top;
             self.tracker.captureMouseMoves(e);
         });
+        if (o.logic.dynamic) {
+            var height = this.element.height();
+            var compareHeight = BI.clamp(height, 200, 600) - (o.footer ? 84 : 44);
+            this.body.element.height(compareHeight);
+        }
     },
 
     _calculateSize: function () {

dist/core.js

@@ -31244,6 +31244,105 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
+ * 自适应水平和垂直方向都居中容器
+ * @class BI.TableCenterAdaptLayout
+ * @extends BI.Layout
+ */
+BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-table-center-adapt-layout",
+            columnSize: [],
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
+        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+            position: "relative",
+            display: "table",
+            width: "100%",
+            height: "100%",
+            "white-space": "nowrap"
+        });
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+
+        var o = this.options;
+        var td;
+        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+        if (!this.hasWidget(this._getChildName(i))) {
+            var w = BI.createWidget(item);
+            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
+            td = BI.createWidget({
+                type: "bi.default",
+                attributes: {
+                    width: width
+                },
+                items: [w]
+            });
+            this.addWidget(this._getChildName(i), td);
+        } else {
+            td = this.getWidgetByName(this._getChildName(i));
+            td.element.attr("width", width);
+        }
+        td.element.css({"max-width": o.columnSize[i]});
+        if (i === 0) {
+            td.element.addClass("first-element");
+        }
+        td.element.css({
+            position: "relative",
+            display: "table-cell",
+            "vertical-align": "middle",
+            margin: "0",
+            padding: "0",
+            height: "100%"
+        });
+        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        return td;
+    },
+
+    appendFragment: function (frag) {
+        this.$table.append(frag);
+        this.element.append(this.$table);
+    },
+
+    resize: function () {
+        // console.log("center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.TableCenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.table_center_adapt", BI.TableCenterAdaptLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *

dist/demo.js

@@ -6508,18 +6508,19 @@ Demo.Func = BI.inherit(BI.Widget, {
     },
     render: function () {
         var id = BI.UUID();
+        var body;
         return {
             type: "bi.vertical",
             vgap: 10,
             items: [{
                 type: "bi.text_button",
-                text: "点击弹出Popover(normal size)",
+                text: "点击弹出Popover(normal size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
                     BI.Popovers.create(id, {
                         type: "bi.bar_popover",
-                        size: "big",
+                        size: "normal",
                         header: {
                             type: "bi.label",
                             text: "这个是header"
@@ -6532,7 +6533,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }, {
                 type: "bi.text_button",
-                text: "点击弹出Popover(small size)",
+                text: "点击弹出Popover(small size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
@@ -6551,7 +6552,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }, {
                 type: "bi.text_button",
-                text: "点击弹出Popover(big size)",
+                text: "点击弹出Popover(big size & fixed)",
                 height: 30,
                 handler: function () {
                     BI.Popovers.remove(id);
@@ -6568,6 +6569,80 @@ Demo.Func = BI.inherit(BI.Widget, {
                         }
                     }).open(id);
                 }
+            }, {
+                type: "bi.text_button",
+                text: "点击弹出Popover(normal size & adapt body区域高度是300)",
+                height: 30,
+                handler: function () {
+                    BI.Popovers.remove(id);
+                    BI.Popovers.create(id, {
+                        type: "bi.bar_popover",
+                        size: "normal",
+                        logic: {
+                            dynamic: true
+                        },
+                        header: {
+                            type: "bi.label",
+                            text: "这个是header"
+                        },
+                        body: {
+                            type: "bi.vertical",
+                            items: [{
+                                type: "bi.button_group",
+                                ref: function () {
+                                    body = this;
+                                },
+                                items: BI.map(BI.range(0, 10), function () {
+                                    return {
+                                        type: "bi.label",
+                                        text: "1",
+                                        height: 30
+                                    };
+                                }),
+                                layouts: [{
+                                    type: "bi.vertical"
+                                }]
+                            }]
+                        }
+                    }).open(id);
+                }
+            }, {
+                type: "bi.text_button",
+                text: "点击弹出Popover(small size & adapt body区域高度是900)",
+                height: 30,
+                handler: function () {
+                    BI.Popovers.remove(id);
+                    BI.Popovers.create(id, {
+                        type: "bi.bar_popover",
+                        size: "small",
+                        logic: {
+                            dynamic: true
+                        },
+                        header: {
+                            type: "bi.label",
+                            text: "这个是header"
+                        },
+                        body: {
+                            type: "bi.vertical",
+                            items: [{
+                                type: "bi.button_group",
+                                ref: function () {
+                                    body = this;
+                                },
+                                items: BI.map(BI.range(0, 30), function () {
+                                    return {
+                                        type: "bi.label",
+                                        text: "1",
+                                        height: 30
+                                    };
+                                }),
+                                layouts: [{
+                                    type: "bi.vertical"
+                                }]
+                            }]
+                        }
+                    }).open(id);
+                }
             }, {
                 type: "bi.text_button",
                 text: "点击弹出Popover(custom)",

dist/fineui.js

@@ -31486,6 +31486,105 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
+ * 自适应水平和垂直方向都居中容器
+ * @class BI.TableCenterAdaptLayout
+ * @extends BI.Layout
+ */
+BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-table-center-adapt-layout",
+            columnSize: [],
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
+        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+            position: "relative",
+            display: "table",
+            width: "100%",
+            height: "100%",
+            "white-space": "nowrap"
+        });
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+
+        var o = this.options;
+        var td;
+        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+        if (!this.hasWidget(this._getChildName(i))) {
+            var w = BI.createWidget(item);
+            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
+            td = BI.createWidget({
+                type: "bi.default",
+                attributes: {
+                    width: width
+                },
+                items: [w]
+            });
+            this.addWidget(this._getChildName(i), td);
+        } else {
+            td = this.getWidgetByName(this._getChildName(i));
+            td.element.attr("width", width);
+        }
+        td.element.css({"max-width": o.columnSize[i]});
+        if (i === 0) {
+            td.element.addClass("first-element");
+        }
+        td.element.css({
+            position: "relative",
+            display: "table-cell",
+            "vertical-align": "middle",
+            margin: "0",
+            padding: "0",
+            height: "100%"
+        });
+        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        return td;
+    },
+
+    appendFragment: function (frag) {
+        this.$table.append(frag);
+        this.element.append(this.$table);
+    },
+
+    resize: function () {
+        // console.log("center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.TableCenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.table_center_adapt", BI.TableCenterAdaptLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -41385,6 +41484,9 @@ BI.Popover = BI.inherit(BI.Widget, {
             // width: 600,
             // height: 500,
             size: "normal", // small, normal, big
+            logic: {
+                dynamic: false
+            },
             header: null,
             body: null,
             footer: null
@@ -41400,68 +41502,77 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
-                left: BI.clamp(self.startX, 0, W - size.width) + "px",
+                left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - size.height) + "px"
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize();
         }, function () {
             self.tracker.releaseMouseMoves();
         }, _global);
-        var items = {
+        var items = [{
-            north: {
+            el: {
-                el: {
+                type: "bi.htape",
-                    type: "bi.htape",
+                cls: "bi-message-title bi-header-background",
-                    cls: "bi-message-title bi-header-background",
+                ref: function (_ref) {
-                    ref: function (_ref) {
+                    self.dragger = _ref;
-                        self.dragger = _ref;
-                    },
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
-                                extraCls: "bi-font-bold"
-                            }) : {
-                                type: "bi.label",
-                                cls: "bi-font-bold",
-                                height: this._constant.HEADER_HEIGHT,
-                                text: o.header,
-                                textAlign: "left"
-                            },
-                            left: 20,
-                            top: 0,
-                            right: 0,
-                            bottom: 0
-                        }]
-                    }, {
-                        el: {
-                            type: "bi.icon_button",
-                            cls: "bi-message-close close-font",
-                            height: this._constant.HEADER_HEIGHT,
-                            handler: function () {
-                                self.close();
-                            }
-                        },
-                        width: 56
-                    }]
                 },
-                height: this._constant.HEADER_HEIGHT
+                items: [{
-            },
-            center: {
-                el: {
                     type: "bi.absolute",
                     items: [{
-                        el: BI.createWidget(o.body),
+                        el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
+                            extraCls: "bi-font-bold"
+                        }) : {
+                            type: "bi.label",
+                            cls: "bi-font-bold",
+                            height: this._constant.HEADER_HEIGHT,
+                            text: o.header,
+                            textAlign: "left"
+                        },
                         left: 20,
-                        top: 10,
+                        top: 0,
-                        right: 20,
+                        right: 0,
                         bottom: 0
                     }]
-                }
+                }, {
+                    el: {
+                        type: "bi.icon_button",
+                        cls: "bi-message-close close-font",
+                        height: this._constant.HEADER_HEIGHT,
+                        handler: function () {
+                            self.close();
+                        }
+                    },
+                    width: 56
+                }],
+                height: this._constant.HEADER_HEIGHT
+            },
+            height: this._constant.HEADER_HEIGHT
+        }, {
+            el: o.logic.dynamic ? {
+                type: "bi.vertical",
+                cls: "popover-body",
+                ref: function () {
+                    self.body = this;
+                },
+                hgap: 20,
+                tgap: 10,
+                items: [{
+                    el: BI.createWidget(o.body)
+                }]
+            } : {
+                type: "bi.absolute",
+                items: [{
+                    el: BI.createWidget(o.body),
+                    left: 20,
+                    top: 10,
+                    right: 20,
+                    bottom: 0
+                }]
             }
-        };
+        }];
         if (o.footer) {
-            items.south = {
+            items.push({
                 el: {
                     type: "bi.absolute",
                     items: [{
@@ -41470,30 +41581,41 @@ BI.Popover = BI.inherit(BI.Widget, {
                         top: 0,
                         right: 20,
                         bottom: 0
-                    }]
+                    }],
+                    height: 44
                 },
                 height: 44
-            };
+            });
         }
 
         var size = this._calculateSize();
 
-        return {
+        return BI.extend({
-            type: "bi.border",
+            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: size.width,
+            width: size.width
+        }, o.logic.dynamic ? {
+            type: "bi.vertical",
+            scrolly: false
+        } : {
+            type: "bi.vtape",
             height: size.height
-        };
+        });
     },
 
     mounted: function () {
-        var self = this;
+        var self = this, o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
             self.startY = pos.top;
             self.tracker.captureMouseMoves(e);
         });
+        if (o.logic.dynamic) {
+            var height = this.element.height();
+            var compareHeight = BI.clamp(height, 200, 600) - (o.footer ? 84 : 44);
+            this.body.element.height(compareHeight);
+        }
     },
 
     _calculateSize: function () {

dist/fineui_without_jquery_polyfill.js

@@ -20255,6 +20255,105 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
+ * 自适应水平和垂直方向都居中容器
+ * @class BI.TableCenterAdaptLayout
+ * @extends BI.Layout
+ */
+BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-table-center-adapt-layout",
+            columnSize: [],
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0
+        });
+    },
+    render: function () {
+        BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
+        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+            position: "relative",
+            display: "table",
+            width: "100%",
+            height: "100%",
+            "white-space": "nowrap"
+        });
+        this.populate(this.options.items);
+    },
+
+    _addElement: function (i, item) {
+
+        var o = this.options;
+        var td;
+        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+        if (!this.hasWidget(this._getChildName(i))) {
+            var w = BI.createWidget(item);
+            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
+            td = BI.createWidget({
+                type: "bi.default",
+                attributes: {
+                    width: width
+                },
+                items: [w]
+            });
+            this.addWidget(this._getChildName(i), td);
+        } else {
+            td = this.getWidgetByName(this._getChildName(i));
+            td.element.attr("width", width);
+        }
+        td.element.css({"max-width": o.columnSize[i]});
+        if (i === 0) {
+            td.element.addClass("first-element");
+        }
+        td.element.css({
+            position: "relative",
+            display: "table-cell",
+            "vertical-align": "middle",
+            margin: "0",
+            padding: "0",
+            height: "100%"
+        });
+        if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
+            w.element.css({
+                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
+            });
+        }
+        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
+            w.element.css({
+                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
+            });
+        }
+        return td;
+    },
+
+    appendFragment: function (frag) {
+        this.$table.append(frag);
+        this.element.append(this.$table);
+    },
+
+    resize: function () {
+        // console.log("center_adapt布局不需要resize");
+    },
+
+    populate: function (items) {
+        BI.TableCenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this._mount();
+    }
+});
+BI.shortcut("bi.table_center_adapt", BI.TableCenterAdaptLayout);/**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
@@ -29052,6 +29151,9 @@ BI.Popover = BI.inherit(BI.Widget, {
             // width: 600,
             // height: 500,
             size: "normal", // small, normal, big
+            logic: {
+                dynamic: false
+            },
             header: null,
             body: null,
             footer: null
@@ -29067,68 +29169,77 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
-                left: BI.clamp(self.startX, 0, W - size.width) + "px",
+                left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - size.height) + "px"
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize();
         }, function () {
             self.tracker.releaseMouseMoves();
         }, _global);
-        var items = {
+        var items = [{
-            north: {
+            el: {
-                el: {
+                type: "bi.htape",
-                    type: "bi.htape",
+                cls: "bi-message-title bi-header-background",
-                    cls: "bi-message-title bi-header-background",
+                ref: function (_ref) {
-                    ref: function (_ref) {
+                    self.dragger = _ref;
-                        self.dragger = _ref;
-                    },
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
-                                extraCls: "bi-font-bold"
-                            }) : {
-                                type: "bi.label",
-                                cls: "bi-font-bold",
-                                height: this._constant.HEADER_HEIGHT,
-                                text: o.header,
-                                textAlign: "left"
-                            },
-                            left: 20,
-                            top: 0,
-                            right: 0,
-                            bottom: 0
-                        }]
-                    }, {
-                        el: {
-                            type: "bi.icon_button",
-                            cls: "bi-message-close close-font",
-                            height: this._constant.HEADER_HEIGHT,
-                            handler: function () {
-                                self.close();
-                            }
-                        },
-                        width: 56
-                    }]
                 },
-                height: this._constant.HEADER_HEIGHT
+                items: [{
-            },
-            center: {
-                el: {
                     type: "bi.absolute",
                     items: [{
-                        el: BI.createWidget(o.body),
+                        el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
+                            extraCls: "bi-font-bold"
+                        }) : {
+                            type: "bi.label",
+                            cls: "bi-font-bold",
+                            height: this._constant.HEADER_HEIGHT,
+                            text: o.header,
+                            textAlign: "left"
+                        },
                         left: 20,
-                        top: 10,
+                        top: 0,
-                        right: 20,
+                        right: 0,
                         bottom: 0
                     }]
-                }
+                }, {
+                    el: {
+                        type: "bi.icon_button",
+                        cls: "bi-message-close close-font",
+                        height: this._constant.HEADER_HEIGHT,
+                        handler: function () {
+                            self.close();
+                        }
+                    },
+                    width: 56
+                }],
+                height: this._constant.HEADER_HEIGHT
+            },
+            height: this._constant.HEADER_HEIGHT
+        }, {
+            el: o.logic.dynamic ? {
+                type: "bi.vertical",
+                cls: "popover-body",
+                ref: function () {
+                    self.body = this;
+                },
+                hgap: 20,
+                tgap: 10,
+                items: [{
+                    el: BI.createWidget(o.body)
+                }]
+            } : {
+                type: "bi.absolute",
+                items: [{
+                    el: BI.createWidget(o.body),
+                    left: 20,
+                    top: 10,
+                    right: 20,
+                    bottom: 0
+                }]
             }
-        };
+        }];
         if (o.footer) {
-            items.south = {
+            items.push({
                 el: {
                     type: "bi.absolute",
                     items: [{
@@ -29137,30 +29248,41 @@ BI.Popover = BI.inherit(BI.Widget, {
                         top: 0,
                         right: 20,
                         bottom: 0
-                    }]
+                    }],
+                    height: 44
                 },
                 height: 44
-            };
+            });
         }
 
         var size = this._calculateSize();
 
-        return {
+        return BI.extend({
-            type: "bi.border",
+            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: size.width,
+            width: size.width
+        }, o.logic.dynamic ? {
+            type: "bi.vertical",
+            scrolly: false
+        } : {
+            type: "bi.vtape",
             height: size.height
-        };
+        });
     },
 
     mounted: function () {
-        var self = this;
+        var self = this, o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
             self.startY = pos.top;
             self.tracker.captureMouseMoves(e);
         });
+        if (o.logic.dynamic) {
+            var height = this.element.height();
+            var compareHeight = BI.clamp(height, 200, 600) - (o.footer ? 84 : 44);
+            this.body.element.height(compareHeight);
+        }
     },
 
     _calculateSize: function () {

src/base/layer/layer.popover.js

@@ -19,6 +19,9 @@ BI.Popover = BI.inherit(BI.Widget, {
             // width: 600,
             // height: 500,
             size: "normal", // small, normal, big
+            logic: {
+                dynamic: false
+            },
             header: null,
             body: null,
             footer: null
@@ -34,68 +37,77 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
-                left: BI.clamp(self.startX, 0, W - size.width) + "px",
+                left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - size.height) + "px"
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize();
         }, function () {
             self.tracker.releaseMouseMoves();
         }, _global);
-        var items = {
+        var items = [{
-            north: {
+            el: {
-                el: {
+                type: "bi.htape",
-                    type: "bi.htape",
+                cls: "bi-message-title bi-header-background",
-                    cls: "bi-message-title bi-header-background",
+                ref: function (_ref) {
-                    ref: function (_ref) {
+                    self.dragger = _ref;
-                        self.dragger = _ref;
-                    },
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
-                                extraCls: "bi-font-bold"
-                            }) : {
-                                type: "bi.label",
-                                cls: "bi-font-bold",
-                                height: this._constant.HEADER_HEIGHT,
-                                text: o.header,
-                                textAlign: "left"
-                            },
-                            left: 20,
-                            top: 0,
-                            right: 0,
-                            bottom: 0
-                        }]
-                    }, {
-                        el: {
-                            type: "bi.icon_button",
-                            cls: "bi-message-close close-font",
-                            height: this._constant.HEADER_HEIGHT,
-                            handler: function () {
-                                self.close();
-                            }
-                        },
-                        width: 56
-                    }]
                 },
-                height: this._constant.HEADER_HEIGHT
+                items: [{
-            },
-            center: {
-                el: {
                     type: "bi.absolute",
                     items: [{
-                        el: BI.createWidget(o.body),
+                        el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
+                            extraCls: "bi-font-bold"
+                        }) : {
+                            type: "bi.label",
+                            cls: "bi-font-bold",
+                            height: this._constant.HEADER_HEIGHT,
+                            text: o.header,
+                            textAlign: "left"
+                        },
                         left: 20,
-                        top: 10,
+                        top: 0,
-                        right: 20,
+                        right: 0,
                         bottom: 0
                     }]
-                }
+                }, {
+                    el: {
+                        type: "bi.icon_button",
+                        cls: "bi-message-close close-font",
+                        height: this._constant.HEADER_HEIGHT,
+                        handler: function () {
+                            self.close();
+                        }
+                    },
+                    width: 56
+                }],
+                height: this._constant.HEADER_HEIGHT
+            },
+            height: this._constant.HEADER_HEIGHT
+        }, {
+            el: o.logic.dynamic ? {
+                type: "bi.vertical",
+                cls: "popover-body",
+                ref: function () {
+                    self.body = this;
+                },
+                hgap: 20,
+                tgap: 10,
+                items: [{
+                    el: BI.createWidget(o.body)
+                }]
+            } : {
+                type: "bi.absolute",
+                items: [{
+                    el: BI.createWidget(o.body),
+                    left: 20,
+                    top: 10,
+                    right: 20,
+                    bottom: 0
+                }]
             }
-        };
+        }];
         if (o.footer) {
-            items.south = {
+            items.push({
                 el: {
                     type: "bi.absolute",
                     items: [{
@@ -104,30 +116,41 @@ BI.Popover = BI.inherit(BI.Widget, {
                         top: 0,
                         right: 20,
                         bottom: 0
-                    }]
+                    }],
+                    height: 44
                 },
                 height: 44
-            };
+            });
         }
 
         var size = this._calculateSize();
 
-        return {
+        return BI.extend({
-            type: "bi.border",
+            type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: size.width,
+            width: size.width
+        }, o.logic.dynamic ? {
+            type: "bi.vertical",
+            scrolly: false
+        } : {
+            type: "bi.vtape",
             height: size.height
-        };
+        });
     },
 
     mounted: function () {
-        var self = this;
+        var self = this, o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
             self.startY = pos.top;
             self.tracker.captureMouseMoves(e);
         });
+        if (o.logic.dynamic) {
+            var height = this.element.height();
+            var compareHeight = BI.clamp(height, 200, 600) - (o.footer ? 84 : 44);
+            this.body.element.height(compareHeight);
+        }
     },
 
     _calculateSize: function () {