29 changed files with 888 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||||||
|
{ |
||||||
|
"extends": "plugin:@fui/typescript", |
||||||
|
"parserOptions": { |
||||||
|
"ecmaFeatures": { |
||||||
|
"legacyDecorators": true |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -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 |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
registry=https://registry.npm.taobao.org |
||||||
|
@fui:registry=https://npm.fineres.com/ |
||||||
@ -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. |
||||||
@ -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` |
||||||
|
|
||||||
|
## 示例效果 |
||||||
|
 |
||||||
@ -0,0 +1 @@ |
|||||||
|
module.exports = require('@fui/babel-preset-fineui').configs.ie8; |
||||||
@ -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> |
||||||
@ -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" |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import { sum } from "./sum"; |
||||||
|
|
||||||
|
test("adds 1 + 2 to equal 3", () => { |
||||||
|
expect(sum(1, 2)).toBe(3); |
||||||
|
}); |
||||||
@ -0,0 +1 @@ |
|||||||
|
export const { shortcut, Model, model, store } = BI.Decorators; |
||||||
@ -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"; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export const { shortcut, Model, model, store } = BI.Decorators; |
||||||
|
|
||||||
|
export type Constructor<T> = new(...args: any[]) => T; |
||||||
@ -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"; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import { ToDoList } from "./module/main"; |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: ToDoList.xtype, |
||||||
|
|
||||||
|
element: "#wrapper", |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@import "../node_modules/fineui/src/less/index.less"; |
||||||
|
|
||||||
|
@fontUrl: 'font/'; //字体存放路径 |
||||||
|
@imageUrl: 'images/1x/'; //图片的基本地址 |
||||||
|
@image2xUrl: 'images/2x/'; //2x图片的基本地址 |
||||||
@ -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(""); |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}], |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
@ -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) |
||||||
|
} |
||||||
|
} |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
@ -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, |
||||||
|
} |
||||||
@ -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(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
/** |
||||||
|
列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 |
||||||
|
*/ |
||||||
|
.my-todolist-background { |
||||||
|
background-color: #f7f8fa; |
||||||
|
} |
||||||
@ -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; |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"extends": "@fui/typescript-configs/application.json", |
||||||
|
} |
||||||
@ -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"), |
||||||
|
}; |
||||||
@ -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, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
@ -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, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
@ -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, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
Loading…
Reference in new issue