快速搭建fineui开发环境。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

282 lines
9.8 KiB

!(function () {
var ToDoListHeader = BI.inherit(BI.Widget, {
props: {
baseCls: "my-todolist-header"
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.horizontal_auto",
items: [
{
el: {
type: "bi.left_right_vertical_adapt",
width: 600,
height: o.height,
items: {
left: [
{
el: {
type: "bi.label",
cls: "my-todolist-title",
text: "FineUI ToDoList",
height: o.height
}
}
],
right: [
{
el: {
type: "bi.editor",
allowBlank: true,
cls: "my-todolist-header-editor",
watermark: "添加ToDo",
width: 300,
height: 24,
listeners: [
{
eventName: "EVENT_ENTER",
action: function () {
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
this.setValue("");
}
}
]
}
}
]
}
}
}
]
};
}
});
ToDoListHeader.EVENT_ADD = "EVENT_ADD";
BI.shortcut("my.todolist.header", ToDoListHeader);
})();!(function () {
var List = BI.inherit(BI.Widget, {
props: {
baseCls: "my-todolist-list",
text: "正在进行"
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.vertical",
items: [
{
el: {
type: "bi.vertical_adapt",
height: 40,
items: [
{
type: "bi.label",
cls: "my-todolist-list-text",
textAlign: "left",
text: o.text,
width: 580
}, {
type: "bi.center_adapt",
cls: "my-todolist-list-count-container",
width: 20,
height: 20,
items: [
{
el: {
type: "bi.label",
ref: function (_ref) {
self.count = _ref;
},
text: "0"
}
}
]
}
]
}
}, {
type: "bi.button_group",
ref: function (_ref) {
self.list = _ref;
},
layouts: [
{
type: "bi.vertical",
vgap: 10
}
],
items: o.items,
listeners: [
{
eventName: "EVENT_CHANGE",
action: function (v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
}
]
};
},
_createItems: function (items) {
return BI.createItems(items, this.options.el);
},
_setCount: function (count) {
this.count.setText(count);
},
populate: function (items) {
this.list.populate(this._createItems(items));
this._setCount(items.length);
}
});
BI.shortcut("my.todolist.list", List);
})();!(function () {
var ToDoList = BI.inherit(BI.Widget, {
props: {
baseCls: "fine-to-do-list"
},
_store: function () {
return BI.Models.getModel("my.model.todolist");
},
watch: {
todoList: function (items) {
this.todolist.populate(items);
},
doneList: function (items) {
this.donelist.populate(items);
}
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.vtape",
items: [
{
el: {
type: "my.todolist.header",
listeners: [
{
eventName: "EVENT_ADD",
action: function (v) {
self.store.addToDo(v);
}
}
],
height: 40
},
height: 40
}, {
type: "bi.horizontal_auto",
cls: "bi-background",
items: [
{
el: {
type: "my.todolist.list",
ref: function (_ref) {
self.todolist = _ref;
},
text: "正在进行",
listeners: [
{
eventName: "EVENT_CHANGE",
action: function (v) {
self.store.finish(v);
}
}
],
width: 600
}
}, {
el: {
type: "my.todolist.list",
text: "已经完成",
ref: function (_ref) {
self.donelist = _ref;
},
width: 600
}
}
]
}
]
};
}
});
BI.shortcut("my.todolist", ToDoList);
})();
!(function () {
var ToDoListModel = BI.inherit(Fix.Model, {
state: function () {
return {
list: []
};
},
watch: {},
computed: {
todoList: function () {
var items = BI.filter(this.model.list, function (index, item) {
return !item.done;
});
return BI.map(items, function (index, item) {
return BI.extend({
type: "bi.multi_select_item"
}, item);
});
},
doneList: function () {
var items = BI.filter(this.model.list, function (index, item) {
return item.done;
});
return BI.map(items, function (index, item) {
return BI.extend({
type: "bi.multi_select_item",
selected: true,
disabled: true
}, item);
});
}
},
actions: {
addToDo: function (v) {
this.model.list.push({
value: BI.UUID(),
text: v,
done: false
});
},
finish: function (v) {
BI.some(this.model.list, function (index, item) {
if (item.value === v) {
item.done = true;
}
});
}
}
});
BI.model("my.model.todolist", ToDoListModel);
})();
!(function () {
BI.createWidget({
type: "my.todolist",
element: "#wrapper"
});
})();