youki
/
fineui-starter
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

fineui-starter

master
youki 4 years ago
parent
5e38be48ce
commit
128e82103d
29 changed files with 888 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      .eslintignore
  2. 8
      .eslintrc
  3. 53
      .gitignore
  4. 2
      .npmrc
  5. 8
      LICENSE
  6. 16
      README.md
  7. 1
      babel.config.js
  8. 26
      index.html
  9. 47
      package.json
  10. 3
      src/__test__/sum.js
  11. 5
      src/__test__/sum.test.js
  12. 1
      src/core/javascript/decorator.js
  13. 96
      src/core/javascript/ui.js
  14. 3
      src/core/typescript/decorator.ts
  15. 96
      src/core/typescript/ui.ts
  16. 9
      src/index.js
  17. 5
      src/index.less
  18. 63
      src/module/header/header.js
  19. 18
      src/module/header/header.less
  20. 16
      src/module/list/list.less
  21. 96
      src/module/list/list.ts
  22. 107
      src/module/main.js
  23. 6
      src/module/main.less
  24. 10
      src/types/globals.d.ts
  25. 3
      tsconfig.json
  26. 9
      webpack/dirs.js
  27. 63
      webpack/webpack.common.js
  28. 53
      webpack/webpack.dev.js
  29. 60
      webpack/webpack.prod.js

5
.eslintignore
Unescape View File

@ -0,0 +1,5 @@
types
node_modules/
dist/
assets/
docs/

8
.eslintrc
Unescape View File

@ -0,0 +1,8 @@
{
"extends": "plugin:@fui/typescript",
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
}

53
.gitignore vendored
Unescape View File

@ -0,0 +1,53 @@
# ---> JetBrains
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
*.iml
## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:
# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries
# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml
# Gradle:
# .idea/gradle.xml
# .idea/libraries
# Mongo Explorer plugin:
# .idea/mongoSettings.xml
## File-based project format:
*.ipr
*.iws
## Plugin-specific files:
# IntelliJ
/out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
/node_modules/
/dist
package-lock.json
yarn.lock

2
.npmrc
Unescape View File

@ -0,0 +1,2 @@
registry=https://registry.npm.taobao.org
@fui:registry=https://npm.fineres.com/

8
LICENSE
Unescape View File

@ -0,0 +1,8 @@
MIT License
Copyright (c) <year> <copyright holders>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

16
README.md
Unescape View File

@ -0,0 +1,16 @@
# FineUI-Start
## 安装运行
`git clone ssh://git@code.fineres.com:7999/fui/fineui-starter.git`
## 安装依赖
`yarn install`
## 打开dev模式
`yarn start`
## 打包
`yarn build`
## 示例效果
![](./screenshorts/todolist.gif)

1
babel.config.js
Unescape View File

@ -0,0 +1 @@
module.exports = require('@fui/babel-preset-fineui').configs.ie8;

26
index.html
Unescape View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
type="text/css"
href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<style>
#wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<body>
<div id="wrapper"></div>
</body>
</html>

47
package.json
Unescape View File

@ -0,0 +1,47 @@
{
"name": "fineui-starter",
"version": "1.0.0",
"description": "fineui starter",
"scripts": {
"start": "webpack-dev-server -p --progress --host 127.0.0.1 --config=webpack/webpack.dev.js --mode development",
"build": "webpack -p --progress --config=webpack/webpack.prod.js --mode production",
"test": "jest"
},
"dependencies": {
"fineui": "^2.0.0"
},
"devDependencies": {
"@fui/babel-preset-fineui": "^1.0.0",
"@fui/typescript-configs": "^1.0.1",
"@fui/eslint-plugin": "^1.0.7",
"@types/jest": "24.0.11",
"typescript": "3.9.2",
"fork-ts-checker-webpack-plugin": "1.4.3",
"autoprefixer": "9.6.1",
"babel-loader": "8.0.6",
"babel-plugin-transform-runtime": "6.23.0",
"cross-env": "6.0.0",
"css-loader": "3.0.0",
"html-webpack-plugin": "3.2.0",
"jest": "24.7.1",
"jest-css-modules-transform": "2.5.0",
"jest-environment-jsdom": "24.7.1",
"jest-snapshot": "23.6.0",
"less": "^3.11.3",
"less-loader": "5.0.0",
"mini-css-extract-plugin": "0.7.0",
"npm-run-all": "4.1.5",
"optimize-css-assets-webpack-plugin": "5.0.3",
"postcss-loader": "3.0.0",
"postcss-simple-vars": "5.0.2",
"source-map-loader": "0.2.4",
"style-loader": "0.23.1",
"uglifyjs-webpack-plugin": "2.2.0",
"webpack": "4.35.2",
"webpack-cli": "3.3.5",
"webpack-dev-server": "3.7.2",
"webpack-merge": "4.2.1"
},
"author": "",
"license": "MIT"
}

3
src/__test__/sum.js
Unescape View File

@ -0,0 +1,3 @@
export function sum(a, b) {
return a + b;
}

5
src/__test__/sum.test.js
Unescape View File

@ -0,0 +1,5 @@
import { sum } from "./sum";
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});

1
src/core/javascript/decorator.js
Unescape View File

@ -0,0 +1 @@
export const { shortcut, Model, model, store } = BI.Decorators;

96
src/core/javascript/ui.js
Unescape View File

@ -0,0 +1,96 @@
export const LabelXtype = "bi.label";
export const ButtonXtype = "bi.button";
export const TextEditorXtype = "bi.text_editor";
export const TextButtonXtype = "bi.text_button";
export const TextValueComboXtype = "bi.text_value_combo";
export const EditorXtype = "bi.editor";
export const BarPopOverXtype = "bi.bar_popover";
export const IconLabelXtype = "bi.icon_label";
export const IconButtonXtype = "bi.icon_button";
export const TabXtype = "bi.tab";
export const DownListComboXtype = "bi.down_list_combo";
export const IconComboXtype = "bi.icon_combo";
export const NumberEditorXtype = "bi.number_editor";
export const DynamicDateComboXtype = "bi.dynamic_date_combo";
export const MultiSelectItemXtype = "bi.multi_select_item";
export const CustomTreeXtype = "bi.custom_tree";
export const ButtonTreeXtype = "bi.button_tree";
export const IconArrowNodeXtype = "bi.icon_arrow_node";
export const MidTreeLeafItemXtype = "bi.mid_tree_leaf_item";
export const FirstTreeLeafItemXtype = "bi.first_tree_leaf_item";
export const LastTreeLeafItemXtype = "bi.last_tree_leaf_item";
export const ButtonGroupXtype = "bi.button_group";
export const SearchEditorXtype = "bi.search_editor";
export const BarPopoverXtype = "bi.bar_popover";
export const TextXtype = "bi.text";
export const MultilayerSingleLevelTreeXtype = "bi.multilayer_single_level_tree";
export const SimpleColorChooser = "bi.simple_color_chooser";
// materials
export const ExpandablePanelXtype = "bi.expandable_panel";
export const ExpandableSearchEditorXtype = "bi.expandable_search_editor";
export const MaterialPreviewTableXtype = "bi.material.preview_table";
export const SearchIconTextValueComboXtype = "bi.material.search_icon_text_value_combo";
export const CodeEditorXtype = "bi.code_editor";
export const FormulaEditorXtype = "bi.formula_editor";
export const RichEditorXtype = "bi.rich_editor";
export const RichEditorTextToolbarXtype = "bi.rich_editor_text_toolbar";
export const RichEditorFontChooserXtype = "bi.rich_editor_font_chooser";
export const RichEditorSizeChooserXtype = "bi.rich_editor_size_chooser";
export const RichEditorBoldButtonXtype = "bi.rich_editor_bold_button";
export const RichEditorItalicButtonXtype = "bi.rich_editor_italic_button";
export const RichEditorUnderlineButtonXtype = "bi.rich_editor_underline_button";
export const RichEditorColorChooserXtype = "bi.rich_editor_color_chooser";
export const RichEditorBackgroundColorChooserXtype = "bi.rich_editor_background_color_chooser";
export const RichEditorAlignLeftButtonXtype = "bi.rich_editor_align_left_button";
export const RichEditorAlignCenterButtonXtype = "bi.rich_editor_align_center_button";
export const RichEditorAlignRightButtonXtype = "bi.rich_editor_align_right_button";
export const RichEditorParamButtonXtype = "bi.rich_editor_param_button";
export const SqlEditorXtype = "bi.sql_editor";
export const SelectColorComboXtype = "bi.select_color_combo";
export const AdaptiveTableXtype = "bi.adaptive_table";
export const ResizableTableXtype = "bi.resizable_table";
export const GridTableXtype = "bi.grid_table";
export const CollectionTableXtype = "bi.collection_table";
export const LayerTreeTableXtype = "bi.layer_tree_table";
export const PreviewTableXtype = "bi.preview_table";
export const ResponsiveTableXtype = "bi.responsive_table";
export const TableViewXtype = "bi.table_view";
export const TreeTableXtype = "bi.tree_table";
export const ClipboardXtype = "bi.clipboard";
export const DraggableXtype = "bi.materials.draggable";
export const FilterXtype = "bi.filter";
export const FilterOperationXtype = "bi.filter_operation";
export const NoTypeItemXtype = "bi.no.type.item";
export const FilterStringItemXtype = "bi.filter.string.item";
export const FilterNumberItemXtype = "bi.filter.number.item";
export const FilterDateItemXtype = "bi.filter.data.item";
export const AndOrFilterExpanderXtype = "bi.and.or.filter.expander";
export const FilterFormulaItemXtype = "bi.filter.formula.item";
export const FilterEmptyFormulaItemXtype = "bi.filter.empty.formula.item";
export const WatermarkXtype = "bi.watermark";
export const WarningLabelXtype = "bi.warning_label";
export const SvgXtype = "bi.svg";
export const StepsXtype = "bi.steps";
export const FormulaInsertXtype = "bi.formula_insert";
export const ResizableContainerXtype = "bi.resizable_container";
export const ResizableContainerHtapeXtype = "bi.resize_container.htape";
export const ResizableContainerVtapeXtype = "bi.resize_container.vtape";
export const GridListXtype = "bi.grid_list";
// layouts
export const VerticalXtype = "bi.vertical";
export const VerticalAdaptXtype = "bi.vertical_adapt";
export const VtapeXtype = "bi.vtape";
export const HtapeXtype = "bi.htape";
export const LeftRightVerticalAdaptLayoutXtype = "bi.left_right_vertical_adapt";
export const LayoutXtype = "bi.layout";
export const AbsoluteXtype = "bi.absolute";
export const CenterAdaptXtype = "bi.center_adapt";
export const CenterXtype = "bi.center";
export const VirtualGroupXtype = "bi.virtual_group";
export const HorizontalAutoXtype = "bi.horizontal_auto";
export const LeftXtype = "bi.left";
export const GridXtype = "bi.grid";
export const DefaultXtype = "bi.default";
export const HorizontalAdaptXtype = "bi.horizontal_adapt";

3
src/core/typescript/decorator.ts
Unescape View File

@ -0,0 +1,3 @@
export const { shortcut, Model, model, store } = BI.Decorators;
export type Constructor<T> = new(...args: any[]) => T;

96
src/core/typescript/ui.ts
Unescape View File

@ -0,0 +1,96 @@
export const LabelXtype = "bi.label";
export const ButtonXtype = "bi.button";
export const TextEditorXtype = "bi.text_editor";
export const TextButtonXtype = "bi.text_button";
export const TextValueComboXtype = "bi.text_value_combo";
export const EditorXtype = "bi.editor";
export const BarPopOverXtype = "bi.bar_popover";
export const IconLabelXtype = "bi.icon_label";
export const IconButtonXtype = "bi.icon_button";
export const TabXtype = "bi.tab";
export const DownListComboXtype = "bi.down_list_combo";
export const IconComboXtype = "bi.icon_combo";
export const NumberEditorXtype = "bi.number_editor";
export const DynamicDateComboXtype = "bi.dynamic_date_combo";
export const MultiSelectItemXtype = "bi.multi_select_item";
export const CustomTreeXtype = "bi.custom_tree";
export const ButtonTreeXtype = "bi.button_tree";
export const IconArrowNodeXtype = "bi.icon_arrow_node";
export const MidTreeLeafItemXtype = "bi.mid_tree_leaf_item";
export const FirstTreeLeafItemXtype = "bi.first_tree_leaf_item";
export const LastTreeLeafItemXtype = "bi.last_tree_leaf_item";
export const ButtonGroupXtype = "bi.button_group";
export const SearchEditorXtype = "bi.search_editor";
export const BarPopoverXtype = "bi.bar_popover";
export const TextXtype = "bi.text";
export const MultilayerSingleLevelTreeXtype = "bi.multilayer_single_level_tree";
export const SimpleColorChooser = "bi.simple_color_chooser";
// materials
export const ExpandablePanelXtype = "bi.expandable_panel";
export const ExpandableSearchEditorXtype = "bi.expandable_search_editor";
export const MaterialPreviewTableXtype = "bi.material.preview_table";
export const SearchIconTextValueComboXtype = "bi.material.search_icon_text_value_combo";
export const CodeEditorXtype = "bi.code_editor";
export const FormulaEditorXtype = "bi.formula_editor";
export const RichEditorXtype = "bi.rich_editor";
export const RichEditorTextToolbarXtype = "bi.rich_editor_text_toolbar";
export const RichEditorFontChooserXtype = "bi.rich_editor_font_chooser";
export const RichEditorSizeChooserXtype = "bi.rich_editor_size_chooser";
export const RichEditorBoldButtonXtype = "bi.rich_editor_bold_button";
export const RichEditorItalicButtonXtype = "bi.rich_editor_italic_button";
export const RichEditorUnderlineButtonXtype = "bi.rich_editor_underline_button";
export const RichEditorColorChooserXtype = "bi.rich_editor_color_chooser";
export const RichEditorBackgroundColorChooserXtype = "bi.rich_editor_background_color_chooser";
export const RichEditorAlignLeftButtonXtype = "bi.rich_editor_align_left_button";
export const RichEditorAlignCenterButtonXtype = "bi.rich_editor_align_center_button";
export const RichEditorAlignRightButtonXtype = "bi.rich_editor_align_right_button";
export const RichEditorParamButtonXtype = "bi.rich_editor_param_button";
export const SqlEditorXtype = "bi.sql_editor";
export const SelectColorComboXtype = "bi.select_color_combo";
export const AdaptiveTableXtype = "bi.adaptive_table";
export const ResizableTableXtype = "bi.resizable_table";
export const GridTableXtype = "bi.grid_table";
export const CollectionTableXtype = "bi.collection_table";
export const LayerTreeTableXtype = "bi.layer_tree_table";
export const PreviewTableXtype = "bi.preview_table";
export const ResponsiveTableXtype = "bi.responsive_table";
export const TableViewXtype = "bi.table_view";
export const TreeTableXtype = "bi.tree_table";
export const ClipboardXtype = "bi.clipboard";
export const DraggableXtype = "bi.materials.draggable";
export const FilterXtype = "bi.filter";
export const FilterOperationXtype = "bi.filter_operation";
export const NoTypeItemXtype = "bi.no.type.item";
export const FilterStringItemXtype = "bi.filter.string.item";
export const FilterNumberItemXtype = "bi.filter.number.item";
export const FilterDateItemXtype = "bi.filter.data.item";
export const AndOrFilterExpanderXtype = "bi.and.or.filter.expander";
export const FilterFormulaItemXtype = "bi.filter.formula.item";
export const FilterEmptyFormulaItemXtype = "bi.filter.empty.formula.item";
export const WatermarkXtype = "bi.watermark";
export const WarningLabelXtype = "bi.warning_label";
export const SvgXtype = "bi.svg";
export const StepsXtype = "bi.steps";
export const FormulaInsertXtype = "bi.formula_insert";
export const ResizableContainerXtype = "bi.resizable_container";
export const ResizableContainerHtapeXtype = "bi.resize_container.htape";
export const ResizableContainerVtapeXtype = "bi.resize_container.vtape";
export const GridListXtype = "bi.grid_list";
// layouts
export const VerticalXtype = "bi.vertical";
export const VerticalAdaptXtype = "bi.vertical_adapt";
export const VtapeXtype = "bi.vtape";
export const HtapeXtype = "bi.htape";
export const LeftRightVerticalAdaptLayoutXtype = "bi.left_right_vertical_adapt";
export const LayoutXtype = "bi.layout";
export const AbsoluteXtype = "bi.absolute";
export const CenterAdaptXtype = "bi.center_adapt";
export const CenterXtype = "bi.center";
export const VirtualGroupXtype = "bi.virtual_group";
export const HorizontalAutoXtype = "bi.horizontal_auto";
export const LeftXtype = "bi.left";
export const GridXtype = "bi.grid";
export const DefaultXtype = "bi.default";
export const HorizontalAdaptXtype = "bi.horizontal_adapt";

9
src/index.js
Unescape View File

@ -0,0 +1,9 @@
import { ToDoList } from "./module/main";
BI.createWidget({
type: ToDoList.xtype,
element: "#wrapper",
});

5
src/index.less
Unescape View File

@ -0,0 +1,5 @@
@import "../node_modules/fineui/src/less/index.less";
@fontUrl: 'font/'; //字体存放路径
@imageUrl: 'images/1x/'; //图片的基本地址
@image2xUrl: 'images/2x/'; //2x图片的基本地址

63
src/module/header/header.js
Unescape View File

@ -0,0 +1,63 @@
import { shortcut } from "../../core/javascript/decorator";
import { HorizontalAutoXtype, LeftRightVerticalAdaptLayoutXtype, LabelXtype, EditorXtype } from "../../core/javascript/ui";
import "./header.less";
@shortcut()
export class ToDoListHeader extends BI.Widget {
static xtype = "my.todolist.header";
props = {
baseCls: "my-todolist-header",
}
render() {
const { height } = this.options;
return {
type: HorizontalAutoXtype,
items: [{
el: {
type: LeftRightVerticalAdaptLayoutXtype,
width: 600,
height: 40,
items: {
left: [
{
el: {
type: LabelXtype,
cls: "my-todolist-title",
text: "FineUI ToDoList",
height,
},
},
],
right: [
{
el: {
type: EditorXtype,
ref: _ref => {
this.editor = _ref;
},
allowBlank: true,
cls: "my-todolist-header-editor",
watermark: "添加ToDo",
width: 300,
height: 24,
listeners: [
{
eventName: "EVENT_ENTER",
action: () => {
this.fireEvent("EVENT_ADD", this.editor.getValue());
this.editor.setValue("");
},
},
],
},
},
],
},
},
}],
};
}
}

18
src/module/header/header.less
Unescape View File

@ -0,0 +1,18 @@
@import "../../index.less";
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
*/
.my-todolist-header {
background-color: #3d4d66;
.my-todolist-title {
font-size: @font-size-22;
color: #FFF;
}
.my-todolist-header-editor {
background-color: #FFF;
.border-radius(5px);
.box-shadow(0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset)
}
}

16
src/module/list/list.less
Unescape View File

@ -0,0 +1,16 @@
@import "../../index.less";
/**
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
*/
.my-todolist-list {
.my-todolist-list-text {
font-size: @font-size-16;
font-weight: bold;
}
.my-todolist-list-count-container {
.border-radius(10px);
background-color: #3d4d66;
color: @font-color-white;
}
}

96
src/module/list/list.ts
Unescape View File

@ -0,0 +1,96 @@
import { shortcut } from "../../core/typescript/decorator";
import { VerticalXtype, LabelXtype, CenterAdaptXtype, MultiSelectItemXtype, VerticalAdaptXtype } from "../../core/typescript/ui";
import "./list.less";
@shortcut()
export class List extends BI.Widget {
static xtype = "my.todolist.list";
private count: any;
private list: any;
props = {
baseCls: "my-todolist-list",
text: "正在进行",
items: [],
}
render() {
const { text, items } = this.options;
return {
type: VerticalXtype,
items: [
{
el: {
type: VerticalAdaptXtype,
height: 40,
items: [
{
type: LabelXtype,
cls: "my-todolist-list-text",
textAlign: "left",
text,
width: 580,
}, {
type: CenterAdaptXtype,
cls: "my-todolist-list-count-container",
width: 20,
height: 20,
items: [
{
el: {
type: LabelXtype,
ref: (_ref: any) => {
this.count = _ref;
},
text: 0,
},
},
],
},
],
},
}, {
type: VerticalXtype,
vgap: 10,
ref: (_ref: any) => {
this.list = _ref;
},
items: this.createItems(items),
},
],
};
}
private createItems(items: Item[]) {
return items.map(item => {
return BI.extend(item, {
type: MultiSelectItemXtype,
selected: item.done,
disabled: item.done,
listeners: [
{
eventName: "EVENT_CHANGE",
action: (v: any) => {
this.fireEvent("EVENT_CHANGE", v);
},
},
],
});
})
}
private setCount(count: number) {
this.count.setText(count);
}
populate(items: []) {
this.list.populate(this.createItems(items));
this.setCount(items.length);
}
}
interface Item {
done: boolean,
}

107
src/module/main.js
Unescape View File

@ -0,0 +1,107 @@
import { shortcut } from "../core/javascript/decorator";
import { VtapeXtype, HorizontalAutoXtype } from "../core/javascript/ui";
import { ToDoListHeader } from "./header/header";
import { List } from "./list/list";
import "./main.less";
@shortcut()
export class ToDoList extends BI.Widget {
static xtype = "my.todolist";
props = {
baseCls: "fine-to-do-list",
}
beforeCreate() {
this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
}
render() {
return {
type: VtapeXtype,
items: [
{
el: {
type: ToDoListHeader.xtype,
listeners: [
{
eventName: "EVENT_ADD",
action: v => {
this.addToDo(v);
},
},
],
height: 40,
},
height: 40,
}, {
type: HorizontalAutoXtype,
cls: "my-todolist-background",
items: [
{
el: {
type: List.xtype,
ref: _ref => {
this.todolist = _ref;
},
items: this._getNeedTodoList(),
text: "正在进行",
listeners: [
{
eventName: "EVENT_CHANGE",
action: v => {
this.finishTodo(v);
},
},
],
width: 600,
},
}, {
el: {
type: List.xtype,
text: "已经完成",
items: this._getAlreadyDoneList(),
ref: _ref => {
this.donelist = _ref;
},
width: 600,
},
},
],
}],
};
}
_updateLocalStorage() {
localStorage.setItem("fine-todolist", JSON.stringify(this.list));
}
_getNeedTodoList() {
return BI.filter(this.list, (index, item) => !item.done);
}
_getAlreadyDoneList() {
return BI.filter(this.list, (index, item) => item.done);
}
addToDo(text) {
this.list.push({
value: BI.UUID(),
text,
done: false,
});
this.todolist.populate(this._getNeedTodoList());
this._updateLocalStorage();
}
finishTodo(v) {
BI.some(this.list, (index, item) => {
if (item.value === v) {
item.done = true;
}
});
this.todolist.populate(this._getNeedTodoList());
this.donelist.populate(this._getAlreadyDoneList());
this._updateLocalStorage();
}
}

6
src/module/main.less
Unescape View File

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

10
src/types/globals.d.ts vendored
Unescape View File

@ -0,0 +1,10 @@
interface Obj {
[key: string]: any;
}
declare let BI: Obj & import('fineui').BI;
declare const Fix: Obj;
declare interface String {
replaceAll(regx: string | RegExp, callback: (str: string) => void): string;
}

3
tsconfig.json
Unescape View File

@ -0,0 +1,3 @@
{
"extends": "@fui/typescript-configs/application.json",
}

9
webpack/dirs.js
Unescape View File

@ -0,0 +1,9 @@
const path = require("path");
module.exports = {
DEST: path.resolve(__dirname, "../dist"),
NODE_MODULES: path.resolve(__dirname, "../node_modules"),
PRIVATE: path.resolve(__dirname, "../private"),
BABEL_CONFIG: path.resolve(__dirname, "../babel.config.js"),
IE8_BABEL_CONFIG: path.resolve(__dirname, "../babel.config.ie8.js"),
SRC: path.resolve(__dirname, "../src"),
};

63
webpack/webpack.common.js
Unescape View File

@ -0,0 +1,63 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const dirs = require("./dirs");
module.exports = {
entry: {
bundle: [
"./src/index.js",
],
},
resolve: {
mainFields: ["module", "main"],
extensions: [".js", ".ts"],
},
stats: {
children: false,
modules: false,
},
module: {
rules: [
{
test: /\.(js|ts)$/,
include: [dirs.NODE_MODULES, dirs.SRC],
use: [{
loader: "babel-loader",
options: {
configFile: dirs.BABEL_CONFIG,
},
}, {
loader: "source-map-loader",
options: {
enforce: "pre",
},
}],
},
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
{
loader: "postcss-loader",
options: {
plugins: [autoprefixer],
},
},
{
loader: "less-loader",
options: {
relativeUrls: false,
},
},
],
},
],
},
};

53
webpack/webpack.dev.js
Unescape View File

@ -0,0 +1,53 @@
const merge = require("webpack-merge");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const dirs = require("./dirs");
const common = require("./webpack.common.js");
module.exports = merge(common, {
devtool: "eval-source-map",
entry: {
},
output: {
path: dirs.DEST,
filename: "[name].[contenthash].js",
},
devServer: {
open: true,
contentBase: path.join(__dirname, ".."),
port: 9002,
liveReload: true,
},
plugins: [
new ForkTsCheckerWebpackPlugin({
}),
new MiniCssExtractPlugin({
path: dirs.DEST,
filename: "[contenthash].css",
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../index.html"),
chunks: ["bundle"],
chunksSortMode: "manual",
nodeModules: path.resolve(__dirname, "../node_modules"),
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require("cssnano"),
cssProcessorPluginOptions: {
preset: ["default", {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
],
});

60
webpack/webpack.prod.js
Unescape View File

@ -0,0 +1,60 @@
const webpack = require("webpack");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const dirs = require("./dirs");
const common = require("./webpack.common.js");
module.exports = merge.smart(common, {
mode: "production",
optimization: {
minimizer: [
new UglifyJsPlugin({
parallel: true,
sourceMap: true,
uglifyOptions: {
ie8: true,
output: {
comments: false,
},
},
}),
],
},
devtool: "hidden-source-map",
output: {
path: dirs.DEST,
filename: "bundle.js",
},
plugins: [
new ForkTsCheckerWebpackPlugin({
}),
new MiniCssExtractPlugin({
path: dirs.DEST,
filename: "bundle.css",
}),
new webpack.BannerPlugin({
banner: `time: ${new Date().toLocaleString()}`,
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require("cssnano"),
cssProcessorPluginOptions: {
preset: ["default", {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
],
});
Write Preview
Loading…
Cancel
Save