fanruan
/
fineui-start
2
1
Fork 8
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

pull/1/head
stephenking 5 years ago committed by Gogs
parent
0442505093 b982d938ea
commit
dda55b543e
17 changed files with 274 additions and 3931 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
View File

File diff suppressed because it is too large Load Diff

222
dist/bundle.js vendored
Unescape View File

@ -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
Unescape View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

3
src/css/header/header.css
Unescape View File

@ -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
Unescape View File

@ -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
View File

File diff suppressed because it is too large Load Diff

1
src/index.js
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

56
src/modules/main.model.js
Unescape View File

@ -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);
})();
Write Preview
Loading…
Cancel
Save