├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── Makefile ├── README-cn.md ├── README.md ├── build ├── components.json ├── config.js ├── index.html ├── logo.png ├── server.js ├── webpack.base.js ├── webpack.components.js ├── webpack.dev.js ├── webpack.doc.js └── webpack.prod.js ├── example ├── App.html ├── index.js ├── router │ ├── Components │ │ ├── Button │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Card │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Color │ │ │ ├── colors.js │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Icon │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Input │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Loading │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── LoadingBar │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── Message │ │ │ ├── examples.md │ │ │ └── index.html │ │ ├── MessageBox │ │ │ ├── examples.md │ │ │ └── index.html │ │ └── Switch │ │ │ ├── examples.md │ │ │ └── index.html │ ├── Guide │ │ └── Intro │ │ │ ├── examples.md │ │ │ └── index.html │ ├── Main.html │ ├── Root │ │ └── Home.html │ ├── menus.js │ └── routes.js └── styles │ ├── main.css │ ├── reset.css │ └── router │ ├── components │ ├── block.css │ ├── color.css │ └── icon.css │ ├── content.css │ ├── footer.css │ ├── guide │ └── intro.css │ ├── header.css │ ├── layout.css │ ├── menu.css │ └── root │ └── home.css ├── gulpfile.js ├── nodemon.json ├── package-lock.json ├── package.json ├── packages ├── button │ ├── Button.html │ └── index.js ├── card │ ├── Card.html │ └── index.js ├── confirm │ ├── Confirm.html │ └── index.js ├── icon │ ├── Icon.html │ └── index.js ├── input │ ├── Input.html │ └── index.js ├── loading-bar │ ├── LoadingBar.html │ └── index.js ├── loading │ ├── Loading.html │ └── index.js ├── message │ ├── Message.html │ └── index.js ├── switch │ ├── Switch.html │ └── index.js └── theme-default │ ├── button.css │ ├── card.css │ ├── confirm.css │ ├── icon.css │ ├── index.css │ ├── input.css │ ├── loading-bar.css │ ├── loading.css │ ├── message.css │ ├── switch.css │ └── var.css ├── postcss.config.js └── src ├── index.js └── utils ├── singleton.js └── throttle.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": ["Chrome >= 33", "safari >= 7"] 6 | } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | docs 4 | 5 | *.log 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build 2 | example 3 | packages 4 | src 5 | docs 6 | 7 | .babelrc 8 | .gitignore 9 | .gitattributes 10 | nodemon.json 11 | postcss.config.js 12 | gulpfile.js 13 | Makefile 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 - 2017 Jikkai Xiao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .PHONY: release 2 | 3 | release: 4 | @npm run clean 5 | @npm run build:entry 6 | @npm run build:components 7 | @npm run build:css 8 | @npm run build:docs 9 | 10 | dev: 11 | @npm run dev 12 | -------------------------------------------------------------------------------- /README-cn.md: -------------------------------------------------------------------------------- 1 | # Svelte Flat 2 | 3 | > 一套基于 Svelte 开发的 UI 组件库，轻松使用，简单上手，不依赖于任何框架。 4 | 5 |

6 | 7 | Svelte Flat 8 | 9 |

10 | 11 | ## 安装 12 | 13 | ```bash 14 | npm i svelte-flat 15 | ``` 16 | 17 | ## 全局引入 18 | 19 | ```javascript 20 | import Flat from 'svelte-flat' 21 | import 'svelte-flat/lib/theme-default/index.css' 22 | ``` 23 | 24 | ## 单组件引入 25 | 26 | ```javascript 27 | import { Button } from 'svelte-flat' 28 | import 'svelte-flat/lib/theme-default/button.css' 29 | ``` 30 | 31 | ## 按需引入 32 | 33 | 如果使用babel的话，可以安装[`babel-plugin-svelteflat`](https://github.com/jikkai/babel-plugin-svelteflat)插件自动按需引入组件。 34 | 35 | ### 安装依赖 36 | 37 | ```bash 38 | npm i babel-plugin-svelteflat -D 39 | ``` 40 | 41 | ### 配置及使用 42 | 43 | 在`.babelrc`中按下例配置。 44 | 45 | ```json 46 | { 47 | "plugins": [ 48 | ["svelteflat", { 49 | "libraryName": "svelte-flat", 50 | "style": "theme-default" 51 | }] 52 | ] 53 | } 54 | ``` 55 | 56 | 插件会根据引入的组件自动按需引入 css 文件： 57 | 58 | ```bash 59 | import { Button } from 'svelte-flat' 60 | ``` 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Flat 2 | 3 | > A Svelte Flat UI Toolkit for Web. 4 | 5 |

6 | 7 | Svelte Flat 8 | 9 |

10 | 11 | ## Installation 12 | 13 | ```bash 14 | npm i svelte-flat --save 15 | ``` 16 | 17 | ## Fully import 18 | 19 | ```javascript 20 | import Flat from 'svelte-flat' 21 | import 'svelte-flat/lib/theme-default/index.css' 22 | ``` 23 | 24 | ## Single import 25 | 26 | ```javascript 27 | import { Button } from 'svelte-flat' 28 | import 'svelte-flat/lib/theme-default/button.css' 29 | ``` 30 | 31 | ## On demand 32 | 33 | Install [`babel-plugin-svelteflat`](https://github.com/jikkai/babel-plugin-svelteflat) 34 | 35 | ```bash 36 | npm i babel-plugin-svelteflat -D 37 | ``` 38 | 39 | ### Config files 40 | 41 | edit `.babelrc`. 42 | 43 | ```json 44 | { 45 | "plugins": [ 46 | ["svelteflat", { 47 | "libraryName": "svelte-flat", 48 | "style": "theme-default" 49 | }] 50 | ] 51 | } 52 | ``` 53 | 54 | Then, if you need Button, you can import it without style, 55 | 56 | ```bash 57 | import { Button } from 'svelte-flat' 58 | ``` 59 | 60 | ## Forked version 61 | 62 | [Here](https://github.com/gCombinator/svelte-flat-ui) is a forked version which named `svelte-flat-ui`. 63 | -------------------------------------------------------------------------------- /build/components.json: -------------------------------------------------------------------------------- 1 | [ 2 | "icon", 3 | "button", 4 | "switch", 5 | "message", 6 | "confirm", 7 | "loading", 8 | "loading-bar", 9 | "card" 10 | ] 11 | -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | port: '8888', 3 | title: 'Svelte Flat', 4 | cssModules: false 5 | } 6 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jikkai/svelte-flat/e391988e85a427b7de20346e27ab5ec1823315cd/build/logo.png -------------------------------------------------------------------------------- /build/server.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const express = require('express') 3 | const webpack = require('webpack') 4 | 5 | const webpackConfig = require('./webpack.dev') 6 | const config = require('./config') 7 | 8 | const app = express() 9 | 10 | webpackConfig.entry.index = [ 11 | 'webpack-hot-middleware/client?reload=true', 12 | webpackConfig.entry.index 13 | ] 14 | 15 | const compiler = webpack(webpackConfig) 16 | 17 | const devMiddleWare = require('webpack-dev-middleware')(compiler, { 18 | publicPath: webpackConfig.output.publicPath, 19 | stats: { 20 | colors: true, 21 | modules: false, 22 | children: false, 23 | chunks: false, 24 | chunkModules: false 25 | } 26 | }) 27 | 28 | app.use(devMiddleWare) 29 | app.use(require('webpack-hot-middleware')(compiler)) 30 | 31 | app.get('*', (req, res) => { 32 | const fs = devMiddleWare.fileSystem 33 | devMiddleWare.waitUntilValid(() => { 34 | const html = fs.readFileSync(path.join(webpackConfig.output.path, './index.html')) 35 | res.end(html) 36 | }) 37 | }) 38 | 39 | app.listen(config.port, () => { 40 | console.log(`Listening at http://localhost:${config.port}`) 41 | }) 42 | -------------------------------------------------------------------------------- /build/webpack.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HappyPack = require('happypack') 3 | 4 | module.exports = { 5 | entry: {}, 6 | output: { 7 | path: path.join(__dirname, '../lib'), 8 | filename: 'index.js', 9 | publicPath: './' 10 | }, 11 | resolve: { 12 | extensions: ['.js', '.html', '.css', '.json'], 13 | alias: { 14 | '~': path.join(__dirname, '../src'), 15 | '~packages': path.join(__dirname, '../packages') 16 | } 17 | }, 18 | performance: {}, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.html$/, 23 | use: ['happypack/loader?id=babel', 'svelte-loader'], 24 | exclude: [/build/] 25 | }, 26 | { 27 | test: /\.js$/, 28 | use: 'happypack/loader?id=babel', 29 | exclude: [/node_modules/] 30 | }, 31 | { 32 | test: /\.md$/, 33 | use: ['html-loader', 'markdown-loader'] 34 | }, 35 | { 36 | test: /\.svg$/, 37 | use: ['html-loader'] 38 | }, 39 | { 40 | test: /\.(ico|jpg|png|gif|eot|otf|ttf|woff|woff2)(\?.*)?$/, 41 | use: 'file-loader?limit=8192' 42 | } 43 | ] 44 | }, 45 | plugins: [ 46 | new HappyPack({ 47 | id: 'babel', 48 | loaders: ['babel-loader'], 49 | threads: 4 50 | }) 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /build/webpack.components.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | const ProgressBarPlugin = require('progress-bar-webpack-plugin') 5 | 6 | const base = require('./webpack.base') 7 | const components = require('./components') 8 | 9 | components.forEach(component => { 10 | base.entry[component] = `./packages/${component}/index.js` 11 | }) 12 | base.output.filename = '[name].js' 13 | base.output.libraryTarget = 'commonjs2' 14 | base.stats = { children: false } 15 | 16 | // Plugins Configuration 17 | base.plugins.push( 18 | new ProgressBarPlugin(), 19 | new webpack.DefinePlugin({ 20 | 'process.env.NODE_ENV': JSON.stringify('production') 21 | }), 22 | new webpack.optimize.UglifyJsPlugin({ 23 | compress: { 24 | warnings: false 25 | }, 26 | output: { 27 | comments: false 28 | } 29 | }) 30 | ) 31 | 32 | module.exports = base 33 | -------------------------------------------------------------------------------- /build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | const base = require('./webpack.base') 6 | const config = require('./config') 7 | 8 | base.entry.index = './example/index.js' 9 | base.devtool = 'eval-source-map' 10 | base.output.publicPath = '/assets/' 11 | base.performance.hints = false 12 | 13 | // Plugins Configuration 14 | base.plugins.push( 15 | new webpack.DefinePlugin({ 16 | 'process.env.NODE_ENV': JSON.stringify('development') 17 | }), 18 | new webpack.HotModuleReplacementPlugin(), 19 | new webpack.NoEmitOnErrorsPlugin(), 20 | new HtmlWebpackPlugin({ 21 | title: config.title, 22 | template: path.resolve(__dirname, './index.html'), 23 | favicon: path.resolve(__dirname, './logo.png'), 24 | filename: './index.html' 25 | }) 26 | ) 27 | 28 | // Rules Configuration 29 | base.module.rules.push({ 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | { loader: 'css-loader', options: { importLoaders: 1 } }, 34 | 'postcss-loader' 35 | ] 36 | }) 37 | 38 | module.exports = base 39 | -------------------------------------------------------------------------------- /build/webpack.doc.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | const ProgressBarPlugin = require('progress-bar-webpack-plugin') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | const base = require('./webpack.base') 8 | const config = require('./config') 9 | 10 | base.output.path = path.join(__dirname, '../docs') 11 | base.entry.index = './example/index.js' 12 | base.entry.vendor = [ 13 | 'highlightjs', 14 | 'svelte-router' 15 | ] 16 | base.stats = { children: false } 17 | 18 | // Plugins Configuration 19 | base.plugins.push( 20 | new ProgressBarPlugin(), 21 | new ExtractTextPlugin('index.css'), 22 | new webpack.DefinePlugin({ 23 | 'process.env.NODE_ENV': JSON.stringify('production') 24 | }), 25 | new webpack.optimize.UglifyJsPlugin({ 26 | compress: { 27 | warnings: false 28 | }, 29 | output: { 30 | comments: false 31 | } 32 | }), 33 | new webpack.optimize.CommonsChunkPlugin({ 34 | name: 'vendor', 35 | filename: 'vendor.[chunkhash:8].js' 36 | }), 37 | new HtmlWebpackPlugin({ 38 | title: config.title, 39 | template: path.resolve(__dirname, './index.html'), 40 | favicon: path.resolve(__dirname, './logo.png'), 41 | filename: './index.html' 42 | }) 43 | ) 44 | 45 | // Rules Configuration 46 | base.module.rules.push({ 47 | test: /\.css$/, 48 | loader: ExtractTextPlugin.extract({ 49 | use: [{ loader: 'css-loader?minimize=true' }, 'postcss-loader'], 50 | fallback: 'style-loader' 51 | }) 52 | }) 53 | 54 | module.exports = base 55 | -------------------------------------------------------------------------------- /build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | const ProgressBarPlugin = require('progress-bar-webpack-plugin') 4 | 5 | const base = require('./webpack.base') 6 | 7 | base.entry.index = './src/index.js' 8 | base.output.libraryTarget = 'umd' 9 | base.output.library = 'SvelteFlat' 10 | base.stats = { children: false } 11 | 12 | // Plugins Configuration 13 | base.plugins.push( 14 | new ProgressBarPlugin(), 15 | new webpack.DefinePlugin({ 16 | 'process.env.NODE_ENV': JSON.stringify('production') 17 | }), 18 | new webpack.optimize.UglifyJsPlugin({ 19 | compress: { 20 | warnings: false 21 | }, 22 | output: { 23 | comments: false 24 | } 25 | }) 26 | ) 27 | 28 | module.exports = base 29 | -------------------------------------------------------------------------------- /example/App.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | import './styles/main.css' 3 | 4 | new App({ 5 | target: document.querySelector('#app') 6 | }) 7 | -------------------------------------------------------------------------------- /example/router/Components/Button/examples.md: -------------------------------------------------------------------------------- 1 | ## 插槽 2 | 3 | | 插槽名称 | 说明 | 4 | | ------ | ------ | 5 | | - | 按钮内容插槽 | 6 | 7 | ## 属性 8 | 9 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 10 | | ------ | ------ | ------ | ------ | ------ | 11 | | type | 设置按钮类型 | string | `primary` `warning` `danger` `success` `info` `inverse` | - | 12 | | size | 设置按钮尺寸 | string | `small` `large` `huge` | - | 13 | | shape | 设置按钮边框形状 | string | `sharp` `round` | - | 14 | | disabled | 设置按钮禁用状态 | boolean | - | false | 15 | | embossed | 设置按钮浮雕样式 | boolean | - | false | 16 | | wide | 设置按钮加宽样式 | boolean | - | false | 17 | 18 | ## 事件 19 | 20 | | 事件名 | 说明 | 回调参数 | 21 | | ------ | ------ | ------ | 22 | | click | 触发点击事件 | Event | 23 | -------------------------------------------------------------------------------- /example/router/Components/Button/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Button 按钮

3 | 4 |
5 |

按钮类型

6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

禁用状态

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 |

浮雕样式

28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 | 37 |
38 |

按钮尺寸

39 | 40 | 41 | 42 | 43 |
44 | 45 |
46 |

加宽按钮

47 | 48 | 49 |
50 | 51 |
52 |

按钮形状

53 | 54 | 55 | 56 |
57 | 58 |
59 | {{{Examples}}} 60 |
61 |
62 | 63 | 80 | -------------------------------------------------------------------------------- /example/router/Components/Card/examples.md: -------------------------------------------------------------------------------- 1 | ## 插槽 2 | 3 | | 插槽名称 | 说明 | 4 | | ------ | ------ | 5 | | header | 卡片标题栏插槽 | 6 | | body | 卡片内容块插槽 | 7 | -------------------------------------------------------------------------------- /example/router/Components/Card/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Card 卡片

3 | 4 |
5 |

基础用法

6 | 7 | Card Title 8 |
9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 10 |
11 | 12 |
13 | 14 |
15 | {{{Examples}}} 16 |
17 |
18 | 19 | 36 | -------------------------------------------------------------------------------- /example/router/Components/Color/colors.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { name: 'TURQUOISE', value: '#1ABC9C' }, 3 | { name: 'GREEN SEA', value: '#16A085' }, 4 | { name: 'EMERALD', value: '#2ECC71' }, 5 | { name: 'NEPHRITIS', value: '#27AE60' }, 6 | { name: 'PETER RIVER', value: '#3498DB' }, 7 | { name: 'BELIZE HOLE', value: '#2980B9' }, 8 | { name: 'AMETHYST', value: '#9B59B6' }, 9 | { name: 'WISTERIA', value: '#8E44AD' }, 10 | { name: 'WET ASPHALT', value: '#34495E' }, 11 | { name: 'MIDNIGHT BLUE', value: '#2C3E50' }, 12 | { name: 'SUN FLOWER', value: '#F1C40F' }, 13 | { name: 'ORANGE', value: '#F39C12' }, 14 | { name: 'CARROT', value: '#E67E22' }, 15 | { name: 'PUMPKIN', value: '#D35400' }, 16 | { name: 'ALIZARIN', value: '#E74C3C' }, 17 | { name: 'POMEGRANATE', value: '#C0392B' }, 18 | { name: 'CLOUDS', value: '#ECF0F1' }, 19 | { name: 'SILVER', value: '#BDC3C7' }, 20 | { name: 'CONCRETE', value: '#95A5A6' }, 21 | { name: 'ASBESTOS', value: '#7F8C8D' } 22 | ] 23 | -------------------------------------------------------------------------------- /example/router/Components/Color/examples.md: -------------------------------------------------------------------------------- 1 | # Color 色彩 2 | -------------------------------------------------------------------------------- /example/router/Components/Color/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Color 色彩

3 | 4 |
5 | {{#each colors as color}} 6 |
7 |
{{color.value}}
8 |
{{color.name}}
9 |
10 | {{/each}} 11 |
12 |
13 | 14 | 31 | -------------------------------------------------------------------------------- /example/router/Components/Icon/examples.md: -------------------------------------------------------------------------------- 1 | ## 属性 2 | 3 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 4 | | ------ | ------ | ------ | ------ | ------ | 5 | | type | 设置图标类型 | string | 详见上表 | `feather` | 6 | -------------------------------------------------------------------------------- /example/router/Components/Icon/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Icon 图标

3 | 4 |
5 | {{#each icons as icon}} 6 |
7 |
8 | 9 | {{icon}} 10 |
11 |
12 | {{/each}} 13 |
14 | 15 |
16 | {{{Examples}}} 17 |
18 |
19 | 20 | 56 | -------------------------------------------------------------------------------- /example/router/Components/Input/examples.md: -------------------------------------------------------------------------------- 1 | ## 属性 2 | 3 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 4 | | ------ | ------ | ------ | ------ | ------ | 5 | | type | 设置输入框原生类型 | string | `text` `password` | `text` | 6 | | size | 设置输入框尺寸 | string | `small` `large` `huge` | - | 7 | | value | 设置输入框的值 | string | - | - | 8 | | disabled | 设置输入框禁用状态 | boolean | - | false | 9 | 10 | ## 事件 11 | 12 | | 事件名 | 说明 | 回调参数 | 13 | | ------ | ------ | ------ | 14 | -------------------------------------------------------------------------------- /example/router/Components/Input/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Input 输入框

3 | 4 |
5 |

基础用法

6 | 7 | 8 |
9 | 10 |
11 |

禁用状态

12 | 13 |
14 | 15 |
16 |

输入框尺寸

17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | {{{Examples}}} 25 |
26 |
27 | 28 | 45 | -------------------------------------------------------------------------------- /example/router/Components/Loading/examples.md: -------------------------------------------------------------------------------- 1 | ## 实例方法 2 | 3 | 实例可传入 `string` 或 `HTMLElement` 类型的参数，如不传则默认为全局加载 4 | 5 | | 方法名 | 说明 | 回调参数 | | 6 | | ------ | ------ | ------ | 7 | | close | 销毁加载组件 | - | 8 | -------------------------------------------------------------------------------- /example/router/Components/Loading/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Loading 加载

3 | 4 |
5 |

全局加载

6 | 7 |
8 | 9 |
10 |

区域加载

11 |
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 13 |
14 | 15 |
16 | 17 |
18 | {{{Examples}}} 19 |
20 |
21 | 22 | 49 | -------------------------------------------------------------------------------- /example/router/Components/LoadingBar/examples.md: -------------------------------------------------------------------------------- 1 | ## 实例方法 2 | 3 | | 方法名 | 说明 | 回调参数 | | 4 | | ------ | ------ | ------ | 5 | | start | 从 `0` 开始触发进度 | - | 6 | | finish | 触发正常类型的进度条，并结束进度条 | - | 7 | | error | 加载错误类型的进度条，并结束进度 | - | 8 | | update | 加载到指定的进度 | percent | 9 | -------------------------------------------------------------------------------- /example/router/Components/LoadingBar/index.html: -------------------------------------------------------------------------------- 1 |
2 |

LoadingBar 加载进度条

3 | 4 |
5 |

基础用法

6 | 7 | 8 | 9 |
10 | 11 |
12 | {{{Examples}}} 13 |
14 |
15 | 16 | 39 | -------------------------------------------------------------------------------- /example/router/Components/Message/examples.md: -------------------------------------------------------------------------------- 1 | ## 属性 2 | 3 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 4 | | ------ | ------ | ------ | ------ | ------ | 5 | | type | 设置消息类型 | string | `info` `success` `warning` `error` | `info` | 6 | | content | 设置消息文字 | string | - | - | 7 | -------------------------------------------------------------------------------- /example/router/Components/Message/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Message 消息提示

3 | 4 |
5 |

消息类型

6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | {{{Examples}}} 14 |
15 |
16 | 17 | 40 | -------------------------------------------------------------------------------- /example/router/Components/MessageBox/examples.md: -------------------------------------------------------------------------------- 1 | ## 属性 2 | 3 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 4 | | ------ | ------ | ------ | ------ | ------ | 5 | | title | 设置标题文字 | string | - | 提示 | 6 | | content | 设置正文内容 | string | - | - | 7 | | cancelButtonText | 设置取消按钮文字 | string | - | 取消 | 8 | | confirmButtonText | 设置确认按钮文字 | string | - | 确认 | 9 | 10 | ## 回调函数 11 | 12 | 实例返回了一个 `Promise`，通过，点击确认按钮的时候会触发 `then` 内的回调函数，点击取消则会触发 `catch` 内的回调函数。 13 | -------------------------------------------------------------------------------- /example/router/Components/MessageBox/index.html: -------------------------------------------------------------------------------- 1 |
2 |

MessageBox 弹框

3 | 4 |
5 |

确认消息框

6 | 7 |
8 | 9 |
10 | {{{Examples}}} 11 |
12 |
13 | 14 | 44 | -------------------------------------------------------------------------------- /example/router/Components/Switch/examples.md: -------------------------------------------------------------------------------- 1 | ## 属性 2 | 3 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 4 | | ------ | ------ | ------ | ------ | ------ | 5 | | type | 设置按钮类型 | string | `warning` `danger` `success` `info` | - | 6 | | size | 设置按钮尺寸 | string | `small` `large` `huge` | - | 7 | | shape | 设置按钮边框形状 | string | `square` | - | 8 | | checked | 设置按钮选中状态 | boolean | - | false | 9 | | disabled | 设置按钮禁用状态 | boolean | - | false | 10 | 11 | ## 事件 12 | 13 | | 事件名 | 说明 | 回调参数 | 14 | | ------ | ------ | ------ | 15 | | click | 触发点击事件 | Event | 16 | -------------------------------------------------------------------------------- /example/router/Components/Switch/index.html: -------------------------------------------------------------------------------- 1 |
2 |

Switch 开关

3 | 4 |
5 |

开关类型

6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |

禁用状态

15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 |

开关形状

24 | 25 | 26 |
27 | 28 |
29 | {{{Examples}}} 30 |
31 |
32 | 33 | 50 | -------------------------------------------------------------------------------- /example/router/Guide/Intro/examples.md: -------------------------------------------------------------------------------- 1 | # Svelte Flat 2 | 3 | > 一套基于Svelte开发的UI组件库，轻松使用，简单上手，不依赖于任何框架。 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm i svelte-flat 9 | ``` 10 | 11 | ## 全局引入 12 | 13 | ```javascript 14 | import Flat from 'svelte-flat' 15 | import 'svelte-flat/lib/theme-default/index.css' 16 | ``` 17 | 18 | ## 单一组件引入 19 | 20 | ```javascript 21 | import { Button } from 'svelte-flat' 22 | import 'svelte-flat/lib/theme-default/button.css' 23 | ``` 24 | 25 | ## 按需引入 26 | 27 | 如果使用babel的话，可以安装[`babel-plugin-svelteflat`](https://github.com/jikkai/babel-plugin-svelteflat)插件自动按需引入组件。 28 | 29 | ### 安装依赖 30 | 31 | ```bash 32 | npm i babel-plugin-svelteflat -D 33 | ``` 34 | 35 | ### 配置及使用 36 | 37 | 在`.babelrc`中按下例配置。 38 | 39 | ```json 40 | { 41 | "plugins": [ 42 | ["svelteflat", { 43 | "libraryName": "svelte-flat", 44 | "style": "theme-default" 45 | }] 46 | ] 47 | } 48 | ``` 49 | 50 | 然后就可以在代码中使用了 51 | 52 | ```bash 53 | import { Button } from 'svelte-flat' 54 | ``` 55 | -------------------------------------------------------------------------------- /example/router/Guide/Intro/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Svelte Flat 4 | {{{Examples}}} 5 |
6 |
7 | 8 | 25 | -------------------------------------------------------------------------------- /example/router/Main.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Svelte Flat 4 | 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 |
    13 | {{#each menus as menu}} 14 |
  • 15 | {{#if menu.to}} 16 | {{menu.title}} 17 | {{else}} 18 | 19 |
      20 | {{#each menu.submenus as submenu}} 21 |
    • 22 | {{submenu.title}} 23 |
      • 24 | {{/each}} 25 |
    26 | {{/if}} 27 |
    • 28 | {{/each}} 29 |
30 | 31 |
32 | 33 |
34 |
35 |
36 | 37 |
38 | Svelte Flat 39 |

Svelte Flat V0.2.0 Sonne

40 |
41 |
42 | 43 | 61 | -------------------------------------------------------------------------------- /example/router/Root/Home.html: -------------------------------------------------------------------------------- 1 |
2 | Svelte Flat 3 |

Svelte Flat

4 |

Flat UI components built with Svelte.

5 | 中文文档 6 |
7 | 8 | 23 | -------------------------------------------------------------------------------- /example/router/menus.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { title: '首页', to: '/guide/intro' }, 3 | { 4 | title: '基础组件', 5 | submenus: [ 6 | { title: 'Color 色彩', to: '/components/color' }, 7 | { title: 'Icon 图标', to: '/components/icon' }, 8 | { title: 'Button 按钮', to: '/components/button' } 9 | ] 10 | }, 11 | { 12 | title: '表单组件', 13 | submenus: [ 14 | { title: 'Input 输入框', to: '/components/input' }, 15 | { title: 'Switch 开关', to: '/components/switch' } 16 | ] 17 | }, 18 | { 19 | title: '信息提示组件', 20 | submenus: [ 21 | { title: 'Message 消息提示', to: '/components/message' }, 22 | { title: 'MessageBox 弹框', to: '/components/message-box' }, 23 | { title: 'Loading 加载', to: '/components/loading' } 24 | ] 25 | }, 26 | { 27 | title: '导航组件', 28 | submenus: [ 29 | { title: 'LoadingBar 加载进度条', to: '/components/loading-bar' } 30 | ] 31 | }, 32 | { 33 | title: '展示组件', 34 | submenus: [ 35 | { title: 'Card 卡片', to: '/components/card' } 36 | ] 37 | } 38 | ] 39 | -------------------------------------------------------------------------------- /example/router/routes.js: -------------------------------------------------------------------------------- 1 | import Home from './Root/Home' 2 | import Intro from './Guide/Intro' 3 | import Color from './Components/Color' 4 | import Icon from './Components/Icon' 5 | import Button from './Components/Button' 6 | import Input from './Components/Input' 7 | import Switch from './Components/Switch' 8 | import Message from './Components/Message' 9 | import MessageBox from './Components/MessageBox' 10 | import Loading from './Components/Loading' 11 | import LoadingBar from './Components/LoadingBar' 12 | import Card from './Components/Card' 13 | 14 | const routes = { 15 | '/': Home, 16 | '/guide/intro': Intro, 17 | '/components/color': Color, 18 | '/components/icon': Icon, 19 | '/components/button': Button, 20 | '/components/input': Input, 21 | '/components/switch': Switch, 22 | '/components/message': Message, 23 | '/components/message-box': MessageBox, 24 | '/components/loading': Loading, 25 | '/components/loading-bar': LoadingBar, 26 | '/components/card': Card 27 | } 28 | 29 | export default routes 30 | -------------------------------------------------------------------------------- /example/styles/main.css: -------------------------------------------------------------------------------- 1 | @import "./reset.css"; 2 | @import "highlightjs/styles/dracula.css"; 3 | @import "../../packages/theme-default/index.css"; 4 | 5 | @import "./router/root/home.css"; 6 | 7 | @import "./router/layout.css"; 8 | 9 | @import "./router/guide/intro.css"; 10 | 11 | @import "./router/components/color.css"; 12 | @import "./router/components/icon.css"; 13 | @import "./router/components/block.css"; 14 | -------------------------------------------------------------------------------- /example/styles/reset.css: -------------------------------------------------------------------------------- 1 | @reset-global pc; 2 | 3 | html, body, #app { 4 | size: 100%; 5 | color: #34495E #FFF; 6 | font-size: 16px 1.7; 7 | font-family: -apple-system, 8 | "Helvetica Neue", Arial, "Segoe UI", 9 | "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", 10 | "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", 11 | "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", 12 | "WenQuanYi Micro Hei", SimSun, sans-serif; 13 | -webkit-font-smoothing: antialiased; 14 | } 15 | -------------------------------------------------------------------------------- /example/styles/router/components/block.css: -------------------------------------------------------------------------------- 1 | @component-namespace component { 2 | @c block { 3 | margin-bottom: 24px; 4 | } 5 | 6 | @c item { 7 | margin-bottom: 12px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/styles/router/components/color.css: -------------------------------------------------------------------------------- 1 | @component-namespace component { 2 | @c color { 3 | display: flex; 4 | flex-wrap: wrap; 5 | 6 | & dl { 7 | width: 22%; 8 | height: 96px; 9 | margin-bottom: 24px; 10 | font-size: 14px; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | &:nth-child(2n) { 16 | margin-right: 2%; 17 | border-top-right-radius: 4px; 18 | border-bottom-right-radius: 4px; 19 | } 20 | &:nth-child(2n - 1) { 21 | margin-left: 2%; 22 | border-top-left-radius: 4px; 23 | border-bottom-left-radius: 4px; 24 | } 25 | 26 | & dt { 27 | margin: 4px 0; 28 | color: #FFF; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/styles/router/components/icon.css: -------------------------------------------------------------------------------- 1 | @component-namespace component { 2 | @c icon { 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | 7 | & dl { 8 | width: 22%; 9 | height: 64px; 10 | margin-bottom: 24px; 11 | font-size: 14px; 12 | background: #ECF0F1; 13 | border-radius: 4px; 14 | cursor: pointer; 15 | user-select: none; 16 | transition: all .2s; 17 | &:hover { 18 | color: #1ABC9C; 19 | } 20 | 21 | & dt { 22 | size: 100%; 23 | padding: 0 24px; 24 | box-sizing: border-box; 25 | display: flex; 26 | align-items: center; 27 | 28 | & svg { 29 | margin-right: 24px; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /example/styles/router/content.css: -------------------------------------------------------------------------------- 1 | @component-namespace router { 2 | @c content { 3 | padding: 24px 50px; 4 | box-sizing: border-box; 5 | } 6 | 7 | @c container { 8 | padding: 24px 0; 9 | background: #FFF; 10 | border-radius: 4px; 11 | box-sizing: border-box; 12 | display: flex; 13 | } 14 | @media (max-width: 800px) { 15 | @c container { 16 | flex-direction: column; 17 | } 18 | } 19 | 20 | @c main { 21 | width: calc(100% - 190px); 22 | padding: 0 24px; 23 | box-sizing: border-box; 24 | 25 | & h1 { 26 | margin-top: 8px; 27 | margin-bottom: 24px; 28 | font-size: 28px 40px; 29 | font-weight: 500; 30 | } 31 | 32 | & h2 { 33 | margin-top: 36px; 34 | margin-bottom: 12px; 35 | font-size: 22px 40px; 36 | font-weight: 500; 37 | } 38 | 39 | & a { 40 | text-decoration: none; 41 | } 42 | 43 | & pre, 44 | & code { 45 | font-size: 14px; 46 | font-family: Monaco, Menlo, Consolas, Courier, monospace; 47 | font-variant-ligatures: none; 48 | } 49 | 50 | & pre { 51 | padding-left: 12px; 52 | font-weight: bold; 53 | line-height: 1.7; 54 | background: #34495E; 55 | } 56 | 57 | & p code { 58 | margin: 0 1px; 59 | padding: 2px 5px; 60 | color: #2C3E50; 61 | font-size: 13px; 62 | background: #ECF0F1; 63 | border: 1px solid #EEE; 64 | border-radius: 3px; 65 | } 66 | } 67 | @media (max-width: 800px) { 68 | @c main { 69 | width: 100%; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /example/styles/router/footer.css: -------------------------------------------------------------------------------- 1 | @component-namespace router { 2 | @c footer { 3 | height: 64px; 4 | padding: 0 50px; 5 | color: #BAC1C8 #F0F2F5; 6 | box-sizing: border-box; 7 | display: flex; 8 | align-items: center; 9 | 10 | & img { 11 | margin-right: 8px; 12 | size: 20px; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/styles/router/guide/intro.css: -------------------------------------------------------------------------------- 1 | @component-namespace guide { 2 | @c intro { 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | 7 | & img { 8 | margin: auto; 9 | display: block; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example/styles/router/header.css: -------------------------------------------------------------------------------- 1 | @component-namespace router { 2 | @c header { 3 | height: 64px; 4 | padding: 0 50px; 5 | line-height: 64px; 6 | color: #34495E #FFF; 7 | box-sizing: border-box; 8 | display: flex; 9 | justify-content: space-between; 10 | 11 | & a { 12 | color: #A84452; 13 | font-family: Rajdhani, sans-serif; 14 | font-size: 28px; 15 | text-decoration: none; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/styles/router/layout.css: -------------------------------------------------------------------------------- 1 | @import "./menu.css"; 2 | @import "./header.css"; 3 | @import "./content.css"; 4 | @import "./footer.css"; 5 | 6 | @component-namespace router { 7 | @c layout { 8 | min-height: 100%; 9 | background: #F0F2F5; 10 | display: flex; 11 | flex-direction: column; 12 | } 13 | 14 | @c docs { 15 | font-size: 14px; 16 | 17 | & p code, 18 | & table code { 19 | margin: 0 1px; 20 | padding: 2px 5px; 21 | color: #2C3E50; 22 | font-size: 13px; 23 | background: #ECF0F1; 24 | border: 1px solid #EEE; 25 | border-radius: 3px; 26 | } 27 | 28 | & table { 29 | width: 100%; 30 | 31 | & tr { 32 | height: 42px; 33 | border-bottom: 1px solid #ECF0F1; 34 | } 35 | 36 | & th { 37 | text-align: left; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/styles/router/menu.css: -------------------------------------------------------------------------------- 1 | @component-namespace router { 2 | @c menu { 3 | width: 220px; 4 | font-size: 14px; 5 | border-right: 1px solid #ECF0F1; 6 | 7 | & label { 8 | margin: 10px 0; 9 | padding-left: 24px; 10 | font-weight: bold; 11 | display: block; 12 | } 13 | 14 | & a { 15 | padding-left: 24px; 16 | } 17 | 18 | & ul a { 19 | padding-left: 40px; 20 | font-size: 14px; 21 | } 22 | 23 | & a { 24 | position: relative; 25 | size: 100% 42px; 26 | color: #7F8C8D; 27 | line-height: 42px; 28 | text-decoration: none; 29 | box-sizing: border-box; 30 | display: block; 31 | transition: all .2s; 32 | &:hover { 33 | color: #1ABC9C; 34 | } 35 | &.router-link-active { 36 | color: #1ABC9C #ECF0F1; 37 | font-weight: bold; 38 | &::after { 39 | content: ""; 40 | position: absolute; 41 | top: 0; 42 | right: -1px; 43 | size: 2px 100%; 44 | background: #1ABC9C; 45 | } 46 | } 47 | } 48 | } 49 | @media (max-width: 800px) { 50 | @c menu { 51 | width: 100%; 52 | border-right: none; 53 | border-bottom: 1px solid #ECF0F1; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /example/styles/router/root/home.css: -------------------------------------------------------------------------------- 1 | @component-namespace router { 2 | @c home { 3 | size: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | & img { 10 | size: 236px; 11 | display: block; 12 | } 13 | 14 | & h1 { 15 | color: #A84452; 16 | font-family: Rajdhani, sans-serif; 17 | font-size: 64px; 18 | display: block; 19 | } 20 | 21 | & p { 22 | margin-bottom: 36px; 23 | color: #999; 24 | font-size: 18px; 25 | } 26 | 27 | & a { 28 | size: 120px 36px; 29 | color: #FFF #A84452; 30 | text-align: center; 31 | text-decoration: none; 32 | line-height: 36px; 33 | border-radius: 6px; 34 | display: block; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp') 2 | const postcss = require('gulp-postcss') 3 | 4 | const saladrc = require('./postcss.config').plugins['postcss-salad'] 5 | 6 | gulp.task('css', () => gulp 7 | .src('./packages/theme-default/**/*.css') 8 | .pipe(postcss([ 9 | require('postcss-salad')(saladrc), 10 | require('postcss-color-mix') 11 | ])) 12 | .pipe(gulp.dest('./lib/theme-default')) 13 | ) 14 | -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | ".git", 4 | "src/**", 5 | "example/**", 6 | "dist/**", 7 | "lib/**", 8 | "packages/**" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-flat", 3 | "version": "0.2.0-alpha.7", 4 | "description": "Flat UI Components with Svelte", 5 | "main": "lib/index.js", 6 | "author": "Jikkai Xiao ", 7 | "license": "MIT", 8 | "scripts": { 9 | "clean": "rimraf ./lib && rimraf ./docs", 10 | "build:entry": "webpack --config build/webpack.prod.js", 11 | "build:components": "webpack --config build/webpack.components.js", 12 | "build:css": "gulp css", 13 | "build:docs": "webpack --config build/webpack.doc.js", 14 | "dev": "nodemon build/server.js" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/jikkai/svelte-flat.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/jikkai/svelte-flat/issues" 22 | }, 23 | "homepage": "https://jikkai.github.io/svelte-flat", 24 | "keywords": [ 25 | "svelte", 26 | "flat-ui", 27 | "components" 28 | ], 29 | "dependencies": { 30 | "feather-icons": "^3.3.0" 31 | }, 32 | "devDependencies": { 33 | "babel-core": "^7.0.0-beta.3", 34 | "babel-loader": "^7.1.2", 35 | "babel-preset-env": "^7.0.0-beta.3", 36 | "css-loader": "^0.28.7", 37 | "express": "^4.16.2", 38 | "extract-text-webpack-plugin": "^3.0.2", 39 | "file-loader": "^1.1.5", 40 | "gulp": "^3.9.1", 41 | "gulp-postcss": "^7.0.0", 42 | "happypack": "^4.0.0", 43 | "highlightjs": "^9.10.0", 44 | "html-loader": "^0.5.1", 45 | "html-webpack-plugin": "^2.30.1", 46 | "markdown-loader": "^2.0.1", 47 | "nodemon": "^1.12.1", 48 | "postcss-color-mix": "^1.1.0", 49 | "postcss-loader": "^2.0.8", 50 | "postcss-salad": "^2.0.1", 51 | "progress-bar-webpack-plugin": "^1.10.0", 52 | "rimraf": "^2.6.2", 53 | "style-loader": "^0.19.0", 54 | "svelte": "^1.41.3", 55 | "svelte-loader": "^2.1.0", 56 | "svelte-router": "^1.6.0", 57 | "webpack": "^3.8.1", 58 | "webpack-dev-middleware": "^1.12.0", 59 | "webpack-hot-middleware": "^2.20.0" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/button/Button.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /packages/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button.html' 2 | 3 | export default Button 4 | -------------------------------------------------------------------------------- /packages/card/Card.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /packages/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './Card.html' 2 | 3 | export default Card 4 | -------------------------------------------------------------------------------- /packages/confirm/Confirm.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
{{title}}
4 | 5 |

{{content}}

6 | 7 |
8 | 9 | 10 |
11 |
12 |
13 | 14 | 39 | -------------------------------------------------------------------------------- /packages/confirm/index.js: -------------------------------------------------------------------------------- 1 | import Confirm from './Confirm' 2 | import Singleton from '~/utils/singleton' 3 | 4 | export default ({ 5 | title = '提示', 6 | content = '', 7 | cancelButtonText = '取消', 8 | confirmButtonText = '确定' 9 | }) => { 10 | const confirm = new Confirm({ 11 | target: new Singleton(), 12 | data: { 13 | title, 14 | content, 15 | cancelButtonText, 16 | confirmButtonText 17 | } 18 | }) 19 | 20 | return new Promise((resolve, reject) => { 21 | confirm.on('confirm', () => { 22 | confirm.handleClose() 23 | resolve() 24 | }) 25 | confirm.on('cancel', () => { 26 | confirm.handleClose() 27 | reject() 28 | }) 29 | }) 30 | } 31 | -------------------------------------------------------------------------------- /packages/icon/Icon.html: -------------------------------------------------------------------------------- 1 | 12 | {{{Icons[type]}}} 13 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /packages/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon.html' 2 | 3 | export default Icon 4 | -------------------------------------------------------------------------------- /packages/input/Input.html: -------------------------------------------------------------------------------- 1 |
2 | {{#if type === 'password'}} 3 | 10 | {{else}} 11 | 18 | {{/if}} 19 |
20 | 21 | 34 | -------------------------------------------------------------------------------- /packages/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './Input.html' 2 | 3 | export default Input 4 | -------------------------------------------------------------------------------- /packages/loading-bar/LoadingBar.html: -------------------------------------------------------------------------------- 1 |
5 |
6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/loading-bar/index.js: -------------------------------------------------------------------------------- 1 | import LoadingBar from './LoadingBar.html' 2 | import Singleton from '~/utils/singleton' 3 | 4 | let loadingBar 5 | let timer 6 | 7 | const getInstance = _ => { 8 | if (!loadingBar) { 9 | loadingBar = new LoadingBar({ 10 | target: new Singleton() 11 | }) 12 | } 13 | return loadingBar 14 | } 15 | 16 | export default { 17 | update (percent = 0) { 18 | loadingBar.set({ 19 | percent 20 | }) 21 | }, 22 | 23 | destroy () { 24 | setTimeout(_ => { 25 | if (loadingBar) { 26 | loadingBar.set({ visible: false }) 27 | setTimeout(_ => { 28 | loadingBar.destroy() 29 | loadingBar = null 30 | }, 200) 31 | } 32 | }, 600) 33 | }, 34 | 35 | start () { 36 | clearInterval(timer) 37 | const instance = getInstance() 38 | 39 | let percent = 0 40 | timer = setInterval(() => { 41 | percent += Math.floor(Math.random () * 3 + 5) 42 | if (percent > 95) { 43 | clearInterval(timer) 44 | } 45 | this.update(percent) 46 | }, 200) 47 | }, 48 | 49 | finish () { 50 | clearInterval(timer) 51 | 52 | const instance = getInstance() 53 | this.update(100) 54 | this.destroy() 55 | }, 56 | 57 | error () { 58 | clearInterval(timer) 59 | 60 | const instance = getInstance() 61 | instance.set({ type: 'error' }) 62 | this.update(100) 63 | this.destroy() 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/loading/Loading.html: -------------------------------------------------------------------------------- 1 |
5 |
6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 28 | -------------------------------------------------------------------------------- /packages/loading/index.js: -------------------------------------------------------------------------------- 1 | import Loading from './Loading.html' 2 | import Singleton from '~/utils/singleton' 3 | import throttle from '~/utils/throttle' 4 | 5 | const handleSize = ($element, loading) => { 6 | const { width, height } = $element.getBoundingClientRect() 7 | const top = $element.offsetTop 8 | const left = $element.offsetLeft 9 | loading.set({ 10 | style: { 11 | position: $element === document.body ? 'fixed' : 'absolute', 12 | top: `${top}px`, 13 | left: `${left}px`, 14 | width: `${width}px`, 15 | height: `${height}px` 16 | } 17 | }) 18 | } 19 | 20 | export default $element => { 21 | const loading = new Loading({ 22 | target: new Singleton() 23 | }) 24 | 25 | if (typeof $element === 'undefined' || typeof $element === 'null') { 26 | $element = document.body 27 | } else if (typeof $element === 'string') { 28 | $element = document.querySelector($element) 29 | } 30 | 31 | handleSize($element, loading) 32 | 33 | const handleResize = () => { 34 | throttle(handleSize)($element, loading) 35 | } 36 | 37 | window.addEventListener('resize', handleResize, false) 38 | 39 | return { 40 | close () { 41 | loading.destroy() 42 | window.removeEventListener('resize', handleResize, false) 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/message/Message.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | {{{icons[type]}}} 5 | 6 | {{ content }} 7 |
8 |
9 | 10 | 25 | -------------------------------------------------------------------------------- /packages/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './Message.html' 2 | import Singleton from '~/utils/singleton' 3 | 4 | export default ({ content = '', type = 'info', duration = 3 }) => { 5 | const message = new Message({ 6 | target: new Singleton(), 7 | data: { 8 | content, 9 | type 10 | } 11 | }) 12 | 13 | setTimeout(() => { 14 | message.destroy() 15 | }, duration * 1000) 16 | } 17 | -------------------------------------------------------------------------------- /packages/switch/Switch.html: -------------------------------------------------------------------------------- 1 |
5 | 6 |
7 | 8 | 30 | -------------------------------------------------------------------------------- /packages/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch.html' 2 | 3 | export default Switch 4 | -------------------------------------------------------------------------------- /packages/theme-default/button.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c button { 5 | position: relative; 6 | padding: 0 15px; 7 | color: #FFF; 8 | font-weight: 400; 9 | line-height: 1; 10 | text-align: center; 11 | white-space: nowrap; 12 | border: none; 13 | display: inline-block; 14 | cursor: pointer; 15 | user-select: none; 16 | transition: all .3s cubic-bezier(.645, .045, .355, 1); 17 | &:active, 18 | &:focus { 19 | outline: 0; 20 | } 21 | &[disabled] { 22 | opacity: .7; 23 | cursor: not-allowed; 24 | } 25 | 26 | @when small { 27 | height: 28px; 28 | font-size: 12px; 29 | } 30 | @when medium { 31 | height: 32px; 32 | font-size: 14px; 33 | } 34 | @when large { 35 | height: 36px; 36 | font-size: 14px; 37 | } 38 | @when huge { 39 | height: 42px; 40 | font-size: 16px; 41 | } 42 | 43 | @when embossed { 44 | box-shadow: rgba(0, 0, 0, .15) 0px -2px 0px inset; 45 | &:active { 46 | box-shadow: rgba(0, 0, 0, .15) 0px 2px 0px inset; 47 | } 48 | } 49 | 50 | @when wide { 51 | min-width: 140px; 52 | padding-right: 30px; 53 | padding-left: 30px; 54 | } 55 | 56 | @when sharp { 57 | border-radius: 0; 58 | } 59 | @when square { 60 | border-radius: 4px; 61 | } 62 | @when round { 63 | border-radius: 20px; 64 | } 65 | 66 | @when default { 67 | background-color: var(--SILVER); 68 | &:active { 69 | background-color: mix(var(--SILVER), #000, 85%); 70 | } 71 | &:hover { 72 | background-color: mix(var(--SILVER), #FFF, 80%); 73 | } 74 | &[disabled] { 75 | &:active, 76 | &:hover { 77 | background-color: var(--SILVER); 78 | } 79 | } 80 | } 81 | @when primary { 82 | background-color: var(--TURQUOISE); 83 | &:active { 84 | background-color: mix(var(--TURQUOISE), #000, 85%); 85 | } 86 | &:hover { 87 | background-color: mix(var(--TURQUOISE), #FFF, 80%); 88 | } 89 | &[disabled] { 90 | &:active, 91 | &:hover { 92 | background-color: var(--TURQUOISE); 93 | } 94 | } 95 | } 96 | @when warning { 97 | background-color: var(--SUN_FLOWER); 98 | &:active { 99 | background-color: mix(var(--SUN_FLOWER), #000, 85%); 100 | } 101 | &:hover { 102 | background-color: mix(var(--SUN_FLOWER), #FFF, 80%); 103 | } 104 | &[disabled] { 105 | &:active, 106 | &:hover { 107 | background-color: var(--SUN_FLOWER); 108 | } 109 | } 110 | } 111 | @when danger { 112 | background-color: var(--ALIZARIN); 113 | &:active { 114 | background-color: mix(var(--ALIZARIN), #000, 85%); 115 | } 116 | &:hover { 117 | background-color: mix(var(--ALIZARIN), #FFF, 80%); 118 | } 119 | &[disabled] { 120 | &:active, 121 | &:hover { 122 | background-color: var(--ALIZARIN); 123 | } 124 | } 125 | } 126 | @when success { 127 | background-color: var(--EMERALD); 128 | &:active { 129 | background-color: mix(var(--EMERALD), #000, 85%); 130 | } 131 | &:hover { 132 | background-color: mix(var(--EMERALD), #FFF, 80%); 133 | } 134 | &[disabled] { 135 | &:active, 136 | &:hover { 137 | background-color: var(--EMERALD); 138 | } 139 | } 140 | } 141 | @when info { 142 | background-color: var(--PETER_RIVER); 143 | &:active { 144 | background-color: mix(var(--PETER_RIVER), #000, 85%); 145 | } 146 | &:hover { 147 | background-color: mix(var(--PETER_RIVER), #FFF, 80%); 148 | } 149 | &[disabled] { 150 | &:active, 151 | &:hover { 152 | background-color: var(--PETER_RIVER); 153 | } 154 | } 155 | } 156 | @when inverse { 157 | background-color: var(--WET_ASPHALT); 158 | &:active { 159 | background-color: mix(var(--WET_ASPHALT), #000, 85%); 160 | } 161 | &:hover { 162 | background-color: mix(var(--WET_ASPHALT), #FFF, 80%); 163 | } 164 | &[disabled] { 165 | &:active, 166 | &:hover { 167 | background-color: var(--WET_ASPHALT); 168 | } 169 | } 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /packages/theme-default/card.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c card { 5 | position: relative; 6 | color: var(--WET_ASPHALT) #FFF; 7 | font-size: 14px; 8 | border: 1px solid var(--CLOUDS); 9 | border-radius: 4px; 10 | box-sizing: border-box; 11 | transition: all .3s; 12 | &:hover { 13 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, .15); 14 | } 15 | 16 | @d header { 17 | height: 48px; 18 | padding: 0 24px; 19 | line-height: 48px; 20 | border-bottom: 1px solid var(--CLOUDS); 21 | box-sizing: border-box; 22 | display: flex; 23 | } 24 | 25 | @d body { 26 | padding: 12px 24px; 27 | box-sizing: border-box; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/theme-default/confirm.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c confirm { 5 | position: fixed 0; 6 | size: 100%; 7 | color: var(--WET_ASPHALT) rgba(0, 0, 0, .4); 8 | z-index: 500; 9 | @when enter { 10 | animation: fadeIn .2s; 11 | } 12 | @when destroy { 13 | opacity: 0; 14 | animation: fadeOut .2s; 15 | } 16 | 17 | @d container { 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | width: 420px; 22 | padding: 20px; 23 | background: #FFF; 24 | border-radius: 4px; 25 | box-sizing: border-box; 26 | transform: translate(-50%, -50%); 27 | } 28 | 29 | @d title { 30 | font-size: 16px; 31 | } 32 | 33 | @d content { 34 | margin: 12px 0; 35 | font-size: 14px; 36 | } 37 | 38 | @d footer { 39 | text-align: right; 40 | } 41 | } 42 | } 43 | 44 | @keyframes fadeIn { 45 | from { 46 | opacity: 0; 47 | } 48 | to { 49 | opacity: 1; 50 | } 51 | } 52 | 53 | @keyframes fadeOut { 54 | from { 55 | opacity: 1; 56 | } 57 | to { 58 | opacity: 0; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/theme-default/icon.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c icon { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/theme-default/index.css: -------------------------------------------------------------------------------- 1 | @import "./icon.css"; 2 | @import "./button.css"; 3 | @import "./input.css"; 4 | @import "./switch.css"; 5 | @import "./message.css"; 6 | @import "./confirm.css"; 7 | @import "./loading.css"; 8 | @import "./loading-bar.css"; 9 | @import "./card.css"; 10 | -------------------------------------------------------------------------------- /packages/theme-default/input.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c input { 5 | position: relative; 6 | width: 180px; 7 | vertical-align: middle; 8 | display: inline-block; 9 | 10 | & input { 11 | position: relative; 12 | width: 100%; 13 | padding: 4px 12px; 14 | color: var(--WET_ASPHALT) #FFF; 15 | font-size: 14px 1; 16 | font-family: inherit; 17 | background-image: none; 18 | border: 2px solid var(--SILVER); 19 | border-radius: 4px; 20 | appearance: none; 21 | box-sizing: border-box; 22 | display: inline-block; 23 | transition: all .2s; 24 | outline: none; 25 | cursor: text; 26 | &:focus { 27 | border-color: var(--TURQUOISE); 28 | } 29 | &[disabled] { 30 | color: #D5DBDB #F4F6F6; 31 | border-color: #D5DBDB; 32 | cursor: default; 33 | } 34 | } 35 | 36 | @when small { 37 | & input { 38 | height: 32px; 39 | font-size: 12px; 40 | } 41 | } 42 | @when medium { 43 | & input { 44 | height: 36px; 45 | font-size: 14px; 46 | } 47 | } 48 | @when large { 49 | & input { 50 | height: 38px; 51 | font-size: 14px; 52 | } 53 | } 54 | @when huge { 55 | & input { 56 | height: 42px; 57 | font-size: 16px; 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/theme-default/loading-bar.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c loading-bar { 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | height: 2px; 9 | opacity: 1; 10 | transition: all .2s linear; 11 | z-index: 100000; 12 | @when primary { 13 | background-color: var(--TURQUOISE); 14 | } 15 | @when error { 16 | background-color: var(--ALIZARIN); 17 | } 18 | 19 | @when fadeout { 20 | opacity: 0; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/theme-default/loading.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c loading { 5 | background: rgba(255, 255, 255, .6); 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | z-index: 10000; 10 | 11 | @d container { 12 | position: relative; 13 | size: 12px; 14 | transform: rotate(45deg); 15 | animation: loading 3s ease-in-out infinite; 16 | 17 | & i { 18 | position: absolute; 19 | size: 12px; 20 | border-radius: 50%; 21 | display: inline-block; 22 | &:nth-child(1) { 23 | background: var(--ALIZARIN); 24 | transform: translate(0, 16px); 25 | animation: loading-child-1 3s ease-in-out infinite; 26 | } 27 | &:nth-child(2) { 28 | background: var(--WET_ASPHALT); 29 | transform: rotate(90deg) translate(0, 16px); 30 | animation: loading-child-2 3s ease-in-out infinite; 31 | } 32 | &:nth-child(3) { 33 | background: var(--TURQUOISE); 34 | transform: rotate(180deg) translate(0, 16px); 35 | animation: loading-child-3 3s ease-in-out infinite; 36 | } 37 | &:nth-child(4) { 38 | background: var(--SUN_FLOWER); 39 | transform: rotate(270deg) translate(0, 16px); 40 | animation: loading-child-4 3s ease-in-out infinite; 41 | } 42 | } 43 | } 44 | } 45 | } 46 | 47 | @keyframes loading { 48 | 25% { 49 | transform: rotate(135deg); 50 | } 51 | 50% { 52 | transform: rotate(225deg); 53 | } 54 | 75% { 55 | transform: rotate(315deg); 56 | } 57 | 100% { 58 | transform: rotate(405deg); 59 | } 60 | } 61 | @keyframes loading-child-1 { 62 | 17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% { 63 | transform:translate(0, 16px); 64 | } 65 | 12.5%, 37.5%, 62.5%, 87.5% { 66 | transform:translate(0, 12px); 67 | } 68 | } 69 | @keyframes loading-child-2 { 70 | 17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% { 71 | transform:rotate(90deg) translate(0, 16px); 72 | } 73 | 12.5%, 37.5%, 62.5%, 87.5% { 74 | transform:rotate(90deg) translate(0, 12px); 75 | } 76 | } 77 | @keyframes loading-child-3 { 78 | 17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% { 79 | transform:rotate(180deg) translate(0, 16px); 80 | } 81 | 12.5%, 37.5%, 62.5%, 87.5% { 82 | transform:rotate(180deg) translate(0, 12px); 83 | } 84 | } 85 | @keyframes loading-child-4 { 86 | 17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% { 87 | transform:rotate(270deg) translate(0, 16px); 88 | } 89 | 12.5%, 37.5%, 62.5%, 87.5% { 90 | transform:rotate(270deg) translate(0, 12px); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /packages/theme-default/message.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c message { 5 | position: fixed; 6 | top: 0; 7 | left: 50%; 8 | opacity: 0; 9 | transform: translate(-50%, -100%); 10 | z-index: 100000; 11 | animation: messageenter 1.8s ease-in-out; 12 | 13 | @d body { 14 | height: 36px; 15 | min-width: 140px; 16 | text-align: center; 17 | background: #FFF; 18 | border-radius: 4px; 19 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, .15); 20 | display: flex; 21 | align-items: center; 22 | z-index: 1000; 23 | 24 | & i { 25 | width: 36px; 26 | height: 100%; 27 | color: #FFF; 28 | line-height: 42px; 29 | border-top-left-radius: 4px; 30 | border-bottom-left-radius: 4px; 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | } 35 | 36 | & span { 37 | padding: 0 12px; 38 | font-size: 14px; 39 | } 40 | } 41 | 42 | @d icon { 43 | & svg { 44 | size: 20px; 45 | } 46 | 47 | @when info { 48 | background: var(--PETER_RIVER); 49 | } 50 | @when success { 51 | background: var(--TURQUOISE); 52 | } 53 | @when warning { 54 | background: var(--SUN_FLOWER); 55 | } 56 | @when error { 57 | background: var(--ALIZARIN); 58 | } 59 | } 60 | } 61 | } 62 | 63 | @keyframes messageenter { 64 | 0% { transform: translate(-50%, -100%); opacity: 0; } 65 | 30% { transform: translate(-50%, 50%); opacity: 1; } 66 | 70% { transform: translate(-50%, 50%); opacity: 1; } 67 | 100% { transform: translate(-50%, -100%); opacity: 0; } 68 | } 69 | -------------------------------------------------------------------------------- /packages/theme-default/switch.css: -------------------------------------------------------------------------------- 1 | @import "./var.css"; 2 | 3 | @component-namespace flat { 4 | @c switch { 5 | position: relative; 6 | size: 48px 24px; 7 | line-height: 22px; 8 | vertical-align: middle; 9 | background-color: var(--SILVER); 10 | box-sizing: border-box; 11 | display: inline-block; 12 | cursor: pointer; 13 | transition: all .2s ease-in-out; 14 | &::after { 15 | content: ""; 16 | position: absolute; 17 | top: 2px; 18 | size: 20px; 19 | background-color: var(--ASBESTOS); 20 | border-radius: 20px; 21 | cursor: pointer; 22 | transform: translateX(2px); 23 | transition: all .2s ease-in-out; 24 | } 25 | 26 | @when checked { 27 | color: var(--TURQUOISE) var(--WET_ASPHALT); 28 | &::after { 29 | transform: translateX(calc(100% + 5px)); 30 | background-color: var(--TURQUOISE); 31 | } 32 | } 33 | 34 | @when disabled { 35 | opacity: .7; 36 | cursor: not-allowed; 37 | } 38 | 39 | @when square { 40 | border-radius: 4px; 41 | &::after { 42 | top: 0; 43 | size: 24px; 44 | border-radius: 4px 0 0 4px; 45 | transform: translateX(0); 46 | } 47 | @when checked { 48 | &::after { 49 | border-radius: 0 4px 4px 0; 50 | transform: translateX(calc(100%)); 51 | background-color: var(--TURQUOISE); 52 | } 53 | } 54 | } 55 | @when round { 56 | border-radius: 20px; 57 | } 58 | 59 | @when warning { 60 | @when checked { 61 | color: #FFF var(--SUN_FLOWER); 62 | &::after { 63 | background-color: #FFF; 64 | } 65 | } 66 | } 67 | @when danger { 68 | @when checked { 69 | color: #FFF var(--ALIZARIN); 70 | &::after { 71 | background-color: #FFF; 72 | } 73 | } 74 | } 75 | @when success { 76 | @when checked { 77 | color: #FFF var(--EMERALD); 78 | &::after { 79 | background-color: #FFF; 80 | } 81 | } 82 | } 83 | @when info { 84 | @when checked { 85 | color: #FFF var(--PETER_RIVER); 86 | &::after { 87 | background-color: #FFF; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /packages/theme-default/var.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --TURQUOISE: #1ABC9C; 3 | --GREEN_SEA: #16A085; 4 | --EMERALD: #2ECC71; 5 | --NEPHRITIS: #27AE60; 6 | --PETER_RIVER: #3498DB; 7 | --BELIZE HOLE: #2980B9; 8 | --AMETHYST: #9B59B6; 9 | --WISTERIA: #8E44AD; 10 | --WET_ASPHALT: #34495E; 11 | --MIDNIGHT_BLUE: #2C3E50; 12 | --SUN_FLOWER: #F1C40F; 13 | --ORANGE: #F39C12; 14 | --CARROT: #E67E22; 15 | --PUMPKIN: #D35400; 16 | --ALIZARIN: #E74C3C; 17 | --POMEGRANATE: #C0392B; 18 | --CLOUDS: #ECF0F1; 19 | --SILVER: #BDC3C7; 20 | --CONCRETE: #95A5A6; 21 | --ASBESTOS: #7F8C8D; 22 | } 23 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-salad': { 4 | browsers: ['ie > 8', 'last 2 version'], 5 | features: { 6 | bem: { 7 | shortcuts: { component: 'c', modifier: 'm', descendent: 'd' }, 8 | separators: { modifier: '--', descendent: '__' } 9 | } 10 | } 11 | }, 12 | 'postcss-color-mix': {} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import _Icon from '~packages/icon' 2 | import _Button from '~packages/button' 3 | import _Input from '~packages/input' 4 | import _Switch from '~packages/switch' 5 | import _Message from '~packages/message' 6 | import _Confirm from '~packages/confirm' 7 | import _Loading from '~packages/loading' 8 | import _LoadingBar from '~packages/loading-bar' 9 | import _Card from '~packages/card' 10 | 11 | export default { 12 | Icon: _Icon, 13 | Button: _Button, 14 | Input: _Input, 15 | Switch: _Switch, 16 | Message: _Message, 17 | Confirm: _Confirm, 18 | Loading: _Loading, 19 | LoadingBar: _LoadingBar, 20 | Card: _Card 21 | } 22 | 23 | export const Icon = _Icon 24 | export const Button = _Button 25 | export const Input = _Input 26 | export const Switch = _Switch 27 | export const Message = _Message 28 | export const Confirm = _Confirm 29 | export const Loading = _Loading 30 | export const LoadingBar = _LoadingBar 31 | export const Card = _Card 32 | -------------------------------------------------------------------------------- /src/utils/singleton.js: -------------------------------------------------------------------------------- 1 | let instance 2 | 3 | class Singleton { 4 | constructor () { 5 | if (!instance) { 6 | instance = document.createElement('div') 7 | document.body.appendChild(instance) 8 | } 9 | 10 | return instance 11 | } 12 | } 13 | 14 | export default Singleton 15 | -------------------------------------------------------------------------------- /src/utils/throttle.js: -------------------------------------------------------------------------------- 1 | function throttle (func, wait = 100, context = this) { 2 | let timeout = null 3 | let funcArgs = null 4 | 5 | const later = () => { 6 | func.apply(context, funcArgs) 7 | timeout = null 8 | } 9 | 10 | return (...args) => { 11 | if (!timeout) { 12 | funcArgs = args 13 | timeout = setTimeout(later, wait) 14 | } 15 | } 16 | } 17 | 18 | export default throttle 19 | --------------------------------------------------------------------------------