Browse Source

Merge branch 'master' of dailer/FineUI-Start into master

pull/1/head
stephenking 5 years ago committed by Gogs
parent
commit
dda55b543e
  1. 2
      .gitmodules
  2. 7
      README.md
  3. 1861
      dist/bundle.css
  4. 222
      dist/bundle.js
  5. 4
      index.html
  6. BIN
      screenshorts/todolist.gif
  7. 3
      src/css/header/header.css
  8. 3
      src/css/list/list.css
  9. 1855
      src/css/main.css
  10. 1
      src/index.js
  11. 23
      src/modules/header/header.js
  12. 4
      src/modules/header/header.less
  13. 57
      src/modules/list/list.js
  14. 4
      src/modules/list/list.less
  15. 97
      src/modules/main.js
  16. 6
      src/modules/main.less
  17. 56
      src/modules/main.model.js

2
.gitmodules vendored

@ -1,3 +1,3 @@
[submodule "fineui"] [submodule "fineui"]
path = fineui path = fineui
url=https://git.coding.net/fanruan/fineui.git url=https://github.com/fanruan/fineui.git

7
README.md

@ -1,8 +1,11 @@
# FineUI-Start # FineUI-Start
## 安装运行 ## 安装运行
`git clone --recursive http://git.fanruan.com/fanruan/FineUI-Start` `git clone --recursive https://git.fanruan.com/dailer/FineUI-Start.git`
`npm install` `npm install`
`npm run grunt` `npm run grunt`
## 示例效果
![](./screenshorts/todolist.gif)

1861
dist/bundle.css vendored

File diff suppressed because it is too large Load Diff

222
dist/bundle.js vendored

@ -1,18 +1,23 @@
!(function () { !(function() {
/**
* 顶部组件,提供输入框添加todo项目
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
*/
var ToDoListHeader = BI.inherit(BI.Widget, { var ToDoListHeader = BI.inherit(BI.Widget, {
props: { props: {
// 指定组件的className
baseCls: "my-todolist-header" baseCls: "my-todolist-header"
}, },
render: function () { render: function() {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.horizontal_auto", type: "bi.horizontal_auto", // 水平居中布局
items: [ items: [
{ {
el: { el: {
type: "bi.left_right_vertical_adapt", type: "bi.left_right_vertical_adapt", // 左右垂直居中布局
width: 600, width: 600,
height: o.height, height: o.height,
items: { items: {
@ -30,17 +35,21 @@
{ {
el: { el: {
type: "bi.editor", type: "bi.editor",
ref: function(_ref) {
self.editor = _ref;
},
allowBlank: true, allowBlank: true,
cls: "my-todolist-header-editor", cls: "my-todolist-header-editor",
watermark: "添加ToDo", watermark: "添加ToDo",
width: 300, width: 300,
height: 24, height: 24,
listeners: [ listeners: [
{ { // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
eventName: "EVENT_ENTER", eventName: "EVENT_ENTER",
action: function () { action: function() {
// 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
this.setValue(""); self.editor.setValue("");
} }
} }
] ]
@ -58,15 +67,20 @@
ToDoListHeader.EVENT_ADD = "EVENT_ADD"; ToDoListHeader.EVENT_ADD = "EVENT_ADD";
BI.shortcut("my.todolist.header", ToDoListHeader); BI.shortcut("my.todolist.header", ToDoListHeader);
})();!(function () { })();!(function() {
/**
* todo项列表
*
*/
var List = BI.inherit(BI.Widget, { var List = BI.inherit(BI.Widget, {
props: { props: {
// 指定组件的className
baseCls: "my-todolist-list", baseCls: "my-todolist-list",
text: "正在进行" text: "正在进行"
}, },
render: function () { render: function() {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.vertical", type: "bi.vertical",
@ -91,7 +105,7 @@
{ {
el: { el: {
type: "bi.label", type: "bi.label",
ref: function (_ref) { ref: function(_ref) {
self.count = _ref; self.count = _ref;
}, },
text: "0" text: "0"
@ -101,78 +115,76 @@
} }
] ]
} }
}, { }, { // 用bi.vertical布局作为列表项的容器.
type: "bi.button_group", type: "bi.vertical",
ref: function (_ref) { vgap: 10,
ref: function(_ref) {
self.list = _ref; self.list = _ref;
}, },
layouts: [ items: this._createItems(o.items)
{
type: "bi.vertical",
vgap: 10
}
],
items: o.items,
listeners: [
{
eventName: "EVENT_CHANGE",
action: function (v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
} }
] ]
}; };
}, },
_createItems: function (items) { _createItems: function(items) {
return BI.createItems(items, this.options.el); var self = this;
return BI.map(items, function(index, item) {
return BI.extend(item, {
type: "bi.multi_select_item", // 节点采用复选节点展示
selected: item.done, // 已完成的todo项置为选中状态
disabled: item.done, // 已完成的todo项置为灰化状态
listeners: [
{ // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
eventName: "EVENT_CHANGE",
action: function(v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
});
});
}, },
_setCount: function (count) { _setCount: function(count) {
this.count.setText(count); this.count.setText(count);
}, },
populate: function (items) { populate: function(items) {
this.list.populate(this._createItems(items)); this.list.populate(this._createItems(items));
this._setCount(items.length); this._setCount(items.length);
} }
}); });
BI.shortcut("my.todolist.list", List); BI.shortcut("my.todolist.list", List);
})();!(function () { })();!(function() {
/**
* todolist 组件
*/
var ToDoList = BI.inherit(BI.Widget, { var ToDoList = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "fine-to-do-list" baseCls: "fine-to-do-list"
}, },
_store: function () { // 生命周期函数,在组件创建前
return BI.Models.getModel("my.model.todolist"); beforeCreate: function() {
}, // 初始化存储数据
this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
watch: {
todoList: function (items) {
this.todolist.populate(items);
},
doneList: function (items) {
this.donelist.populate(items);
}
}, },
render: function () { render: function() {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.vtape", type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度
items: [ items: [
{ {
el: { el: {
type: "my.todolist.header", type: "my.todolist.header", // 顶部组件
listeners: [ listeners: [
{ { // 监听组件的EVENT_ADD事件,新建todo项
eventName: "EVENT_ADD", eventName: "EVENT_ADD",
action: function (v) { action: function(v) {
self.store.addToDo(v); self.addToDo(v);
} }
} }
], ],
@ -180,21 +192,22 @@
}, },
height: 40 height: 40
}, { }, {
type: "bi.horizontal_auto", type: "bi.horizontal_auto", // 水平居中布局
cls: "bi-background", cls: "my-todolist-background", // 添加className
items: [ items: [
{ {
el: { el: {
type: "my.todolist.list", type: "my.todolist.list", // need todo项列表
ref: function (_ref) { ref: function(_ref) {
self.todolist = _ref; self.todolist = _ref;
}, },
items: this._getNeedTodoList(),
text: "正在进行", text: "正在进行",
listeners: [ listeners: [
{ { // 监听EVENT_CHANGE事件,完成某一项todo
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: function (v) { action: function(v) {
self.store.finish(v); self.finishTodo(v);
} }
} }
], ],
@ -202,9 +215,10 @@
} }
}, { }, {
el: { el: {
type: "my.todolist.list", type: "my.todolist.list", // 已经完成的todo项列表
text: "已经完成", text: "已经完成",
ref: function (_ref) { items: this._getAlreadyDoneList(),
ref: function(_ref) {
self.donelist = _ref; self.donelist = _ref;
}, },
width: 600 width: 600
@ -214,67 +228,57 @@
} }
] ]
}; };
} },
});
BI.shortcut("my.todolist", ToDoList);
})();
!(function () {
var ToDoListModel = BI.inherit(Fix.Model, { _updateLocalStorage: function() {
localStorage.setItem("fine-todolist", JSON.stringify(this.list));
},
state: function () { _getNeedTodoList: function() {
return { return BI.filter(this.list, function(index, item) {
list: [] return !item.done;
}; });
}, },
watch: {},
computed: { _getAlreadyDoneList: function() {
todoList: function () { return BI.filter(this.list, function(index, item) {
var items = BI.filter(this.model.list, function (index, item) { return item.done;
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) { * 添加todo项
this.model.list.push({ * @param text todo项的内容
value: BI.UUID(), */
text: v, addToDo: function(text) {
done: false this.list.push({
}); value: BI.UUID(),
}, text: text,
done: false
});
this.todolist.populate(this._getNeedTodoList());
this._updateLocalStorage();
},
finish: function (v) { /**
BI.some(this.model.list, function (index, item) { * 完成某一项todo
if (item.value === v) { * @param v todo项的value
item.done = true; */
} finishTodo: function(v) {
}); BI.some(this.list, function(index, item) {
} if (item.value === v) {
item.done = true;
}
});
this.todolist.populate(this._getNeedTodoList());
this.donelist.populate(this._getAlreadyDoneList());
this._updateLocalStorage();
} }
}); });
BI.model("my.model.todolist", ToDoListModel); BI.shortcut("my.todolist", ToDoList);
})(); })();
!(function () { !(function () {
// 将todolist组件挂载到#wrapper上.
BI.createWidget({ BI.createWidget({
type: "my.todolist", type: "my.todolist",
element: "#wrapper" element: "#wrapper"

4
index.html

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>FineUI Admin</title> <title>FineUI-Start</title>
<!--核心css文件--> <!--核心css文件-->
<link rel="stylesheet" type="text/css" href="fineui/dist/core.css"/> <link rel="stylesheet" type="text/css" href="fineui/dist/core.css"/>
<!--基础css文件, 包含一些最基本控件的样式--> <!--基础css文件, 包含一些最基本控件的样式-->
@ -11,7 +11,7 @@
<!--BI控件样式--> <!--BI控件样式-->
<link rel="stylesheet" type="text/css" href="fineui/dist/widget.css"/> <link rel="stylesheet" type="text/css" href="fineui/dist/widget.css"/>
<!--资源样式, 包括font、icon、background、app--> <!--资源样式, 包括font、icon、background、app-->
<!--<link rel="stylesheet" type="text/css" href="fineui/dist/resource.css"/>--> <link rel="stylesheet" type="text/css" href="fineui/dist/resource.css"/>
<link rel="stylesheet" type="text/css" href="dist/bundle.css"/> <link rel="stylesheet" type="text/css" href="dist/bundle.css"/>

BIN
screenshorts/todolist.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

3
src/css/header/header.css

@ -1,3 +1,6 @@
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
*/
.my-todolist-header { .my-todolist-header {
background-color: #3d4d66; background-color: #3d4d66;
} }

3
src/css/list/list.css

@ -1,3 +1,6 @@
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
*/
.my-todolist-list .my-todolist-list-text { .my-todolist-list .my-todolist-list-text {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;

1855
src/css/main.css

File diff suppressed because it is too large Load Diff

1
src/index.js

@ -1,4 +1,5 @@
!(function () { !(function () {
// 将todolist组件挂载到#wrapper上.
BI.createWidget({ BI.createWidget({
type: "my.todolist", type: "my.todolist",
element: "#wrapper" element: "#wrapper"

23
src/modules/header/header.js

@ -1,18 +1,23 @@
!(function () { !(function() {
/**
* 顶部组件,提供输入框添加todo项目
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
*/
var ToDoListHeader = BI.inherit(BI.Widget, { var ToDoListHeader = BI.inherit(BI.Widget, {
props: { props: {
// 指定组件的className
baseCls: "my-todolist-header" baseCls: "my-todolist-header"
}, },
render: function () { render: function() {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.horizontal_auto", type: "bi.horizontal_auto", // 水平居中布局
items: [ items: [
{ {
el: { el: {
type: "bi.left_right_vertical_adapt", type: "bi.left_right_vertical_adapt", // 左右垂直居中布局
width: 600, width: 600,
height: o.height, height: o.height,
items: { items: {
@ -30,17 +35,21 @@
{ {
el: { el: {
type: "bi.editor", type: "bi.editor",
ref: function(_ref) {
self.editor = _ref;
},
allowBlank: true, allowBlank: true,
cls: "my-todolist-header-editor", cls: "my-todolist-header-editor",
watermark: "添加ToDo", watermark: "添加ToDo",
width: 300, width: 300,
height: 24, height: 24,
listeners: [ listeners: [
{ { // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
eventName: "EVENT_ENTER", eventName: "EVENT_ENTER",
action: function () { action: function() {
// 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
this.setValue(""); self.editor.setValue("");
} }
} }
] ]

4
src/modules/header/header.less

@ -1,5 +1,7 @@
@import "../../index.less"; @import "../../index.less";
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
*/
.my-todolist-header { .my-todolist-header {
background-color: #3d4d66; background-color: #3d4d66;

57
src/modules/list/list.js

@ -1,12 +1,17 @@
!(function () { !(function() {
/**
* todo项列表
*
*/
var List = BI.inherit(BI.Widget, { var List = BI.inherit(BI.Widget, {
props: { props: {
// 指定组件的className
baseCls: "my-todolist-list", baseCls: "my-todolist-list",
text: "正在进行" text: "正在进行"
}, },
render: function () { render: function() {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.vertical", type: "bi.vertical",
@ -31,7 +36,7 @@
{ {
el: { el: {
type: "bi.label", type: "bi.label",
ref: function (_ref) { ref: function(_ref) {
self.count = _ref; self.count = _ref;
}, },
text: "0" text: "0"
@ -41,40 +46,42 @@
} }
] ]
} }
}, { }, { // 用bi.vertical布局作为列表项的容器.
type: "bi.button_group", type: "bi.vertical",
ref: function (_ref) { vgap: 10,
ref: function(_ref) {
self.list = _ref; self.list = _ref;
}, },
layouts: [ items: this._createItems(o.items)
{
type: "bi.vertical",
vgap: 10
}
],
items: o.items,
listeners: [
{
eventName: "EVENT_CHANGE",
action: function (v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
} }
] ]
}; };
}, },
_createItems: function (items) { _createItems: function(items) {
return BI.createItems(items, this.options.el); var self = this;
return BI.map(items, function(index, item) {
return BI.extend(item, {
type: "bi.multi_select_item", // 节点采用复选节点展示
selected: item.done, // 已完成的todo项置为选中状态
disabled: item.done, // 已完成的todo项置为灰化状态
listeners: [
{ // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
eventName: "EVENT_CHANGE",
action: function(v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
});
});
}, },
_setCount: function (count) { _setCount: function(count) {
this.count.setText(count); this.count.setText(count);
}, },
populate: function (items) { populate: function(items) {
this.list.populate(this._createItems(items)); this.list.populate(this._createItems(items));
this._setCount(items.length); this._setCount(items.length);
} }

4
src/modules/list/list.less

@ -1,5 +1,7 @@
@import "../../index.less"; @import "../../index.less";
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
*/
.my-todolist-list { .my-todolist-list {
.my-todolist-list-text { .my-todolist-list-text {
font-size: @font-size-16; font-size: @font-size-16;

97
src/modules/main.js

@ -1,36 +1,32 @@
!(function () { !(function() {
/**
* todolist 组件
*/
var ToDoList = BI.inherit(BI.Widget, { var ToDoList = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "fine-to-do-list" baseCls: "fine-to-do-list"
}, },
_store: function () { // 生命周期函数,在组件创建前
return BI.Models.getModel("my.model.todolist"); beforeCreate: function() {
// 初始化存储数据
this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
}, },
watch: { render: function() {
todoList: function (items) {
this.todolist.populate(items);
},
doneList: function (items) {
this.donelist.populate(items);
}
},
render: function () {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: "bi.vtape", type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度
items: [ items: [
{ {
el: { el: {
type: "my.todolist.header", type: "my.todolist.header", // 顶部组件
listeners: [ listeners: [
{ { // 监听组件的EVENT_ADD事件,新建todo项
eventName: "EVENT_ADD", eventName: "EVENT_ADD",
action: function (v) { action: function(v) {
self.store.addToDo(v); self.addToDo(v);
} }
} }
], ],
@ -38,21 +34,22 @@
}, },
height: 40 height: 40
}, { }, {
type: "bi.horizontal_auto", type: "bi.horizontal_auto", // 水平居中布局
cls: "bi-background", cls: "my-todolist-background", // 添加className
items: [ items: [
{ {
el: { el: {
type: "my.todolist.list", type: "my.todolist.list", // need todo项列表
ref: function (_ref) { ref: function(_ref) {
self.todolist = _ref; self.todolist = _ref;
}, },
items: this._getNeedTodoList(),
text: "正在进行", text: "正在进行",
listeners: [ listeners: [
{ { // 监听EVENT_CHANGE事件,完成某一项todo
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: function (v) { action: function(v) {
self.store.finish(v); self.finishTodo(v);
} }
} }
], ],
@ -60,9 +57,10 @@
} }
}, { }, {
el: { el: {
type: "my.todolist.list", type: "my.todolist.list", // 已经完成的todo项列表
text: "已经完成", text: "已经完成",
ref: function (_ref) { items: this._getAlreadyDoneList(),
ref: function(_ref) {
self.donelist = _ref; self.donelist = _ref;
}, },
width: 600 width: 600
@ -72,6 +70,51 @@
} }
] ]
}; };
},
_updateLocalStorage: function() {
localStorage.setItem("fine-todolist", JSON.stringify(this.list));
},
_getNeedTodoList: function() {
return BI.filter(this.list, function(index, item) {
return !item.done;
});
},
_getAlreadyDoneList: function() {
return BI.filter(this.list, function(index, item) {
return item.done;
});
},
/**
* 添加todo项
* @param text todo项的内容
*/
addToDo: function(text) {
this.list.push({
value: BI.UUID(),
text: text,
done: false
});
this.todolist.populate(this._getNeedTodoList());
this._updateLocalStorage();
},
/**
* 完成某一项todo
* @param v todo项的value
*/
finishTodo: function(v) {
BI.some(this.list, function(index, item) {
if (item.value === v) {
item.done = true;
}
});
this.todolist.populate(this._getNeedTodoList());
this.donelist.populate(this._getAlreadyDoneList());
this._updateLocalStorage();
} }
}); });
BI.shortcut("my.todolist", ToDoList); BI.shortcut("my.todolist", ToDoList);

6
src/modules/main.less

@ -0,0 +1,6 @@
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
*/
.my-todolist-background {
background-color: #f7f8fa;
}

56
src/modules/main.model.js

@ -1,56 +0,0 @@
!(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);
})();
Loading…
Cancel
Save