From e9da414072e2b425a3179ee90853cf7604ca29f9 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 7 Mar 2022 10:47:49 +0800 Subject: [PATCH] =?UTF-8?q?feature=EF=BC=9A=20items=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/h.js | 15 ++++++++--- .../wrapper/layout/adapt/absolute.center.js | 6 ++++- src/core/wrapper/layout/adapt/adapt.table.js | 7 +++-- .../wrapper/layout/adapt/auto.horizontal.js | 6 ++++- .../layout/fill/float.fill.horizontal.js | 6 ++++- .../wrapper/layout/flex/flex.horizontal.js | 7 +++-- src/core/wrapper/layout/flex/flex.vertical.js | 7 +++-- .../flex/wrapper/flex.wrapper.horizontal.js | 7 +++-- .../flex/wrapper/flex.wrapper.vertical.js | 7 +++-- .../layout/float/float.absolute.center.js | 6 ++++- src/core/wrapper/layout/layout.absolute.js | 6 ++++- src/core/wrapper/layout/layout.adaptive.js | 6 ++++- src/core/wrapper/layout/layout.border.js | 6 ++++- src/core/wrapper/layout/layout.card.js | 6 ++++- src/core/wrapper/layout/layout.default.js | 6 ++++- src/core/wrapper/layout/layout.division.js | 6 ++++- src/core/wrapper/layout/layout.flow.js | 26 ++++++++++++++++--- src/core/wrapper/layout/layout.grid.js | 6 ++++- src/core/wrapper/layout/layout.inline.js | 7 +++-- src/core/wrapper/layout/layout.lattice.js | 6 ++++- src/core/wrapper/layout/layout.table.js | 6 ++++- src/core/wrapper/layout/layout.tape.js | 6 ++++- src/core/wrapper/layout/layout.td.js | 5 +++- src/core/wrapper/layout/layout.vertical.js | 6 ++++- src/core/wrapper/layout/layout.window.js | 6 ++++- 25 files changed, 147 insertions(+), 37 deletions(-) diff --git a/src/core/h.js b/src/core/h.js index 5ec9f5112..22326288a 100644 --- a/src/core/h.js +++ b/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 + }, { text: children[0], items: children[0] }, props); + } } return BI.extend({ diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js index fd4881975..67d37c4bc 100644 --- a/src/core/wrapper/layout/adapt/absolute.center.js +++ b/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) { diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js index 8c0b82590..9af2aa8cc 100644 --- a/src/core/wrapper/layout/adapt/adapt.table.js +++ b/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("
").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 () { diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js index 197b2badc..ed0f5e29c 100644 --- a/src/core/wrapper/layout/adapt/auto.horizontal.js +++ b/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) { diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js index 988b8c061..d6607703b 100644 --- a/src/core/wrapper/layout/fill/float.fill.horizontal.js +++ b/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) { diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index f1390b1f0..1d921c89f 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/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 () { diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index f2b9aa19f..e885f5b9e 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/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 () { diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 2a4c9706f..94e10fb14 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/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("
").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 () { diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 621dee46d..f9d85948f 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/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("
").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 () { diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js index afe3e77b7..08cc5b326 100644 --- a/src/core/wrapper/layout/float/float.absolute.center.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js index 86c7e94e1..6333b38a8 100644 --- a/src/core/wrapper/layout/layout.absolute.js +++ b/src/core/wrapper/layout/layout.absolute.js @@ -17,7 +17,11 @@ 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) { diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js index fe1c6292e..20b758ef4 100644 --- a/src/core/wrapper/layout/layout.adaptive.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js index eda061892..15d3877af 100644 --- a/src/core/wrapper/layout/layout.border.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js index dd50a7b17..97034efba 100644 --- a/src/core/wrapper/layout/layout.card.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js index a35f99a07..90e4bf569 100644 --- a/src/core/wrapper/layout/layout.default.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js index 54fe3dbcc..988d118be 100644 --- a/src/core/wrapper/layout/layout.division.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js index b3304e8c3..4efc35123 100644 --- a/src/core/wrapper/layout/layout.flow.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js index dac59e74a..a81c31681 100644 --- a/src/core/wrapper/layout/layout.grid.js +++ b/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 () { diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index e90aba44d..a1d889337 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.lattice.js b/src/core/wrapper/layout/layout.lattice.js index 9b5731815..34845aa7b 100644 --- a/src/core/wrapper/layout/layout.lattice.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js index e577f822d..50f9a39f5 100644 --- a/src/core/wrapper/layout/layout.table.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js index 3eb2acf89..27075f6e7 100644 --- a/src/core/wrapper/layout/layout.tape.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index 340b347bf..8c9c5df73 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js index 90c78e1b7..b181b1d41 100644 --- a/src/core/wrapper/layout/layout.vertical.js +++ b/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) { diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js index 95a87ba97..c7d14623c 100644 --- a/src/core/wrapper/layout/layout.window.js +++ b/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) {