Browse Source

feature: items支持响应式

es6
guy 3 years ago
parent
commit
e9da414072
  1. 15
      src/core/h.js
  2. 6
      src/core/wrapper/layout/adapt/absolute.center.js
  3. 7
      src/core/wrapper/layout/adapt/adapt.table.js
  4. 6
      src/core/wrapper/layout/adapt/auto.horizontal.js
  5. 6
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  6. 7
      src/core/wrapper/layout/flex/flex.horizontal.js
  7. 7
      src/core/wrapper/layout/flex/flex.vertical.js
  8. 7
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  9. 7
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  10. 6
      src/core/wrapper/layout/float/float.absolute.center.js
  11. 6
      src/core/wrapper/layout/layout.absolute.js
  12. 6
      src/core/wrapper/layout/layout.adaptive.js
  13. 6
      src/core/wrapper/layout/layout.border.js
  14. 6
      src/core/wrapper/layout/layout.card.js
  15. 6
      src/core/wrapper/layout/layout.default.js
  16. 6
      src/core/wrapper/layout/layout.division.js
  17. 26
      src/core/wrapper/layout/layout.flow.js
  18. 6
      src/core/wrapper/layout/layout.grid.js
  19. 7
      src/core/wrapper/layout/layout.inline.js
  20. 6
      src/core/wrapper/layout/layout.lattice.js
  21. 6
      src/core/wrapper/layout/layout.table.js
  22. 6
      src/core/wrapper/layout/layout.tape.js
  23. 5
      src/core/wrapper/layout/layout.td.js
  24. 6
      src/core/wrapper/layout/layout.vertical.js
  25. 6
      src/core/wrapper/layout/layout.window.js

15
src/core/h.js

@ -39,10 +39,17 @@ BI.h = function (type, props, children) {
right: children right: children
}, props); }, props);
} }
if (children.length === 1 && BI.isKey(children[0])) { if (children.length === 1) {
return BI.extend({ if (BI.isKey(children[0])) {
type: type return BI.extend({
}, { text: children[0] }, props); 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({ return BI.extend({

6
src/core/wrapper/layout/adapt/absolute.center.js

@ -18,7 +18,11 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

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

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

@ -18,7 +18,11 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.HorizontalAutoLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -16,7 +16,11 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments); 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) { addItem: function (item) {

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

@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); 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); this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
@ -31,7 +31,10 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); 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 () { _hasFill: function () {

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

@ -22,7 +22,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments); 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); this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
@ -30,7 +30,10 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); 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 () { _hasFill: function () {

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

@ -24,10 +24,13 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments); 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.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.$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 () { _hasFill: function () {

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

@ -24,10 +24,13 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments); 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.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.$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 () { _hasFill: function () {

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

@ -12,7 +12,11 @@ BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -17,7 +17,11 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.AbsoluteLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

6
src/core/wrapper/layout/layout.adaptive.js

@ -12,7 +12,11 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.AdaptiveLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -13,7 +13,11 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.BorderLayout.superclass.render.apply(this, arguments); 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) { addItem: function (item) {

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

@ -16,7 +16,11 @@ BI.CardLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.CardLayout.superclass.render.apply(this, arguments); 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) { stroke: function (items) {

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

@ -18,7 +18,11 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.DefaultLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -15,7 +15,11 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.DivisionLayout.superclass.render.apply(this, arguments); 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) { addItem: function (item) {

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

@ -21,7 +21,7 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FloatLeftLayout.superclass.render.apply(this, arguments); BI.FloatLeftLayout.superclass.render.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
if (o.innerHgap !== 0) { if (o.innerHgap !== 0) {
this.element.css({ this.element.css({
paddingLeft: this._optimiseGap(o.innerHgap), paddingLeft: this._optimiseGap(o.innerHgap),
@ -34,7 +34,10 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
paddingBottom: this._optimiseGap(o.innerVgap) 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) { _addElement: function (i, item) {
@ -110,8 +113,23 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FloatRightLayout.superclass.render.apply(this, arguments); BI.FloatRightLayout.superclass.render.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.populate(this.options.items); 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) { _addElement: function (i, item) {

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

@ -15,7 +15,11 @@ BI.GridLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.GridLayout.superclass.render.apply(this, arguments); 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 () { addItem: function () {

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

@ -27,11 +27,14 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments); BI.InlineLayout.superclass.render.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.element.css({ this.element.css({
textAlign: o.horizontalAlign 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) { _addElement: function (i, item) {

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

@ -16,7 +16,11 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.LatticeLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -19,7 +19,11 @@ BI.TableLayout = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.TableLayout.superclass.render.apply(this, arguments); BI.TableLayout.superclass.render.apply(this, arguments);
this.rows = 0; 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) { _addElement: function (idx, arr) {

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

@ -20,7 +20,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.HTapeLayout.superclass.render.apply(this, arguments); 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) { addItem: function (item) {

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

@ -32,7 +32,10 @@ BI.TdLayout = BI.inherit(BI.Layout, {
"border-collapse": "separate" "border-collapse": "separate"
}); });
this.rows = 0; 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) { _addElement: function (idx, arr) {

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

@ -19,7 +19,11 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.VerticalLayout.superclass.render.apply(this, arguments); 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) { _addElement: function (i, item) {

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

@ -22,7 +22,11 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.WindowLayout.superclass.render.apply(this, arguments); 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) { addItem: function (item) {

Loading…
Cancel
Save