├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .stylelintrc ├── .travis.yml ├── CNAME ├── README.md ├── appveyor.yml ├── build ├── dev.server.js ├── genSubpackageConfig.js ├── vueLoaderConfig.js ├── webpack.base.js ├── webpack.dev.js ├── webpack.doc.js └── webpack.prod.js ├── deploy └── deploy.sh ├── example ├── components.vue ├── components │ ├── avatar.vue │ ├── button.vue │ ├── cascader.vue │ ├── checkbox.vue │ ├── components.vue │ ├── datetimepicker.vue │ ├── form.vue │ ├── grid.vue │ ├── home.vue │ ├── input.vue │ ├── inputNumber.vue │ ├── loading.vue │ ├── message.vue │ ├── modal.vue │ ├── navbar.vue │ ├── pagination.vue │ ├── popup.vue │ ├── previewImg.vue │ ├── progress.vue │ ├── radio.vue │ ├── rahmen.vue │ ├── scrollBox.vue │ ├── select.vue │ ├── switchbox.vue │ ├── table.vue │ └── upload.vue ├── home.vue ├── index.docs.html ├── index.docs.js ├── index.html ├── index.js ├── navbar.vue ├── router.js ├── style │ └── example.css └── tab.vue ├── gulpfile.js ├── icon ├── bg.svg ├── favicon.png ├── icon.svg └── name.svg ├── lerna.json ├── package.json ├── packages ├── alert │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ └── src │ │ └── alert.vue ├── avatar │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── avatarGroup.vue │ │ └── index.vue ├── avatarGroup │ ├── index.js │ └── lib │ │ ├── index.min.js │ │ └── index.min.js.map ├── button │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── buttonGroup.vue │ │ └── index.vue ├── candidate │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── cascader │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ └── menu.vue ├── checkbox │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── checkboxGroup.vue │ │ └── index.vue ├── checkboxGroup │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ └── package.json ├── datePicker │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── datePicker.vue │ │ ├── dayPicker.vue │ │ ├── index.vue │ │ ├── monthPicker.vue │ │ └── yearPicker.vue ├── dateRangePicker │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── dateTimePicker │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── form │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── formGroup.vue │ │ └── formItem.vue ├── grid │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── Col.vue │ │ └── Row.vue ├── img │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── img.vue ├── input │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── inputNumber │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── loading │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── message │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── modal │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── modalBox │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── alert.vue │ │ ├── confirm.vue │ │ └── prompt.vue ├── nav │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ ├── navGroup.vue │ │ ├── navItem.vue │ │ ├── sideNav.vue │ │ └── subNav.vue ├── oasis │ ├── README.md │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ ├── index.min.js.map │ │ └── theme │ │ │ ├── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.svg │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ └── iconfont.woff2 │ │ │ └── index.css │ └── package.json ├── pagination │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package-lock.json │ ├── package.json │ └── src │ │ ├── index.vue │ │ └── link.vue ├── popup │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.js ├── previewImg │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── progress │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── circle.vue │ │ ├── index.vue │ │ └── line.vue ├── radio │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ ├── radioBtn.vue │ │ └── radioGroup.vue ├── radioBtn │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ └── package.json ├── radioGroup │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ └── package.json ├── rahmen │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package-lock.json │ ├── package.json │ └── src │ │ └── index.vue ├── scrollBox │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ └── scrollBar.js ├── select │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── switchbox │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ └── index.vue ├── table │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ ├── store.js │ │ ├── tableBody.vue │ │ ├── tableColumn.vue │ │ ├── tableFooter.vue │ │ └── tableHead.vue ├── theme │ ├── common │ │ ├── _animation.css │ │ ├── _base.css │ │ ├── _var.css │ │ └── transition.css │ ├── font │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── iconfont │ │ └── iconfont.css │ ├── index.css │ ├── package.json │ ├── src │ │ ├── avatar.css │ │ ├── button.css │ │ ├── cascader.css │ │ ├── checkbox.css │ │ ├── datePicker.css │ │ ├── dateRangePicker.css │ │ ├── dateTimePicker.css │ │ ├── form.css │ │ ├── grid.css │ │ ├── img.css │ │ ├── input.css │ │ ├── inputNumber.css │ │ ├── loading.css │ │ ├── message.css │ │ ├── modal.css │ │ ├── nav.css │ │ ├── pagination.css │ │ ├── popup.css │ │ ├── previewImg.css │ │ ├── progress.css │ │ ├── radio.css │ │ ├── rahmen.css │ │ ├── scrollBox.css │ │ ├── select.css │ │ ├── switchbox.css │ │ ├── table.css │ │ ├── timePicker.css │ │ └── upload.css │ └── theme.css ├── timePicker │ ├── index.js │ ├── lib │ │ ├── index.min.js │ │ └── index.min.js.map │ ├── package.json │ └── src │ │ ├── index.vue │ │ ├── spinner.vue │ │ └── timePicker.vue └── upload │ ├── index.js │ ├── lib │ ├── index.min.js │ └── index.min.js.map │ ├── package.json │ └── src │ ├── fileList.vue │ ├── index.vue │ ├── inputImage.vue │ ├── upload.vue │ └── uploader.js ├── postcss.config.js ├── test ├── helper.js ├── setup.js └── unit │ ├── Avatar.spec.js │ ├── Btn.spec.js │ ├── Candidate.spec.js │ ├── Cascader.spec.js │ ├── Checkbox.spec.js │ ├── DatePicker.spec.js │ ├── DateRangePicker.spec.js │ ├── DateTimePicker.spec.js │ ├── Input.spec.js │ ├── InputNumber.spec.js │ ├── Loading.spec.js │ ├── Message.spec.js │ ├── Modal.spec.js │ ├── Nav.spec.js │ ├── Pagination.spec.js │ ├── PreviewImg.spec.js │ ├── Radio.spec.js │ ├── RadioBtn.spec.js │ ├── RadioGroup.spec.js │ ├── Rahmen.spec.js │ ├── Select.spec.js │ ├── Switchbox.spec.js │ ├── Table.spec.js │ └── TimePicker.spec.js ├── utils ├── date.js ├── draggable.js ├── http.js ├── index.js ├── loadImage.js ├── resizing.js └── scrollbarWidth.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": "umd", 7 | "targets": { 8 | "browsers": [ 9 | "> 1%", 10 | "last 2 versions", 11 | "ie >= 10" 12 | ] 13 | }, 14 | "useBuiltIns": "usage", 15 | "debug": false 16 | } 17 | ], 18 | "stage-3" 19 | ], 20 | "plugins": [ 21 | "jsx-v-model", 22 | "transform-runtime", 23 | "transform-vue-jsx", 24 | "transform-object-rest-spread" 25 | ], 26 | "env": { 27 | "test": { 28 | "presets": [ 29 | "env", 30 | "stage-2" 31 | ], 32 | "plugins": [ 33 | "istanbul" 34 | ] 35 | } 36 | }, 37 | "comments": false 38 | } 39 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | indent_size = 4 8 | indent_style = tab 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/lib/index.min.js 2 | test/** 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "ecmaVersion": 2017, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "impliedStrict": true 8 | }, 9 | "allowImportExportEverywhere": false 10 | }, 11 | "env": { 12 | "browser": true, 13 | "node": true 14 | }, 15 | "extends": "standard", 16 | "rules": { 17 | "semi": ["error", "never"], 18 | "semi-style": ["error", "first"], 19 | "quotes": ["error", "single"], 20 | "indent": ["error", "tab"], 21 | "no-tabs": 0, 22 | "no-new": 0, 23 | "no-unused-vars": 1, 24 | "one-var": 0, 25 | "spaced-comment": ["error", "always", { 26 | "line": { 27 | "markers": ["/"], 28 | "exceptions": ["-", "+"] 29 | }, 30 | "block": { 31 | "markers": ["!"], 32 | "exceptions": ["*"], 33 | "balanced": true 34 | } 35 | }] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | .vscode 3 | .idea 4 | *.log 5 | .DS_Store 6 | package-lock.json 7 | /docs 8 | /web 9 | /coverage 10 | .nyc_output 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-selector-bem-pattern" 4 | ], 5 | "rules": { 6 | "block-no-empty": null, 7 | "color-no-invalid-hex": true, 8 | "comment-empty-line-before": [ "always", { 9 | "ignore": ["stylelint-commands", "after-comment"] 10 | } ], 11 | "declaration-colon-space-after": "always", 12 | "indentation": ["tab", { 13 | "except": ["value"] 14 | }], 15 | "max-empty-lines": 2, 16 | "rule-empty-line-before": [ "always", { 17 | "except": ["first-nested"], 18 | "ignore": ["after-comment"] 19 | } ], 20 | "unit-whitelist": ["em", "rem", "%", "px", "ms", "s", "deg"] 21 | }, 22 | "ignoreFiles": [ 23 | "./packages/theme/iconfont/iconfont.css", 24 | "lib/*.css" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - 10 7 | 8 | script: 9 | - npm install yarn -g 10 | - yarn install 11 | - yarn run bootstrap 12 | - yarn run test:coverage 13 | - yarn run test:report 14 | - sh deploy/deploy.sh 15 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | www.oasisui.org 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |

🍃 Elegant UI framework for building prototype.

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 | ## Installation 33 | 34 | Oasis is available in [npm](https://npmjs.com/oasis-ui). 35 | 36 | ```shell 37 | $ npm install oasis-ui 38 | $ yarn add oasis-ui 39 | ``` 40 | ## Usage 41 | 42 | ```javascript 43 | import Vue from 'vue' 44 | import Oasis from 'oasis-ui' 45 | import 'oasis-ui/lib/theme/index.css' 46 | 47 | Vue.use(Oasis) 48 | ``` 49 | or use specified component: 50 | 51 | ```javascript 52 | import Vue from 'vue' 53 | import PreviewImg from '@oasis-ui/preview-img' 54 | import '@oasis-ui/theme/theme.css' 55 | 56 | Vue.use(PreviewImg) 57 | ``` 58 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | environment: 2 | nodejs_version: "10" 3 | 4 | install: 5 | - ps: Install-Product node $env:nodejs_version 6 | 7 | - npm install yarn -g 8 | - yarn install 9 | - yarn run bootstrap 10 | 11 | test_script: 12 | - node --version 13 | - yarn run test:coverage 14 | 15 | build: off 16 | -------------------------------------------------------------------------------- /build/dev.server.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/build/dev.server.js -------------------------------------------------------------------------------- /build/genSubpackageConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const base = require('./webpack.base') 4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 5 | 6 | module.exports = function (moduleName, devMode = false) { 7 | return merge(base, { 8 | entry: path.join(__dirname, `../packages/${moduleName}/index.js`), 9 | output: { 10 | path: path.join(__dirname, `../packages/${moduleName}/lib`), 11 | filename: 'index.min.js', 12 | library: moduleName, 13 | libraryTarget: 'umd', 14 | umdNamedDefine: true 15 | }, 16 | watch: devMode, 17 | externals: [ 18 | { 19 | vue: { 20 | amd: 'vue', 21 | root: 'Vue', 22 | commonjs: 'vue', 23 | commonjs2: 'vue' 24 | }, 25 | moment: 'moment' 26 | }, 27 | /^@oasis-ui/ 28 | ], 29 | devtool: '#source-map', 30 | resolve: { 31 | modules: ['node_modules'], 32 | extensions: ['.vue', '.js', '.json'] 33 | }, 34 | plugins: devMode ? [] : [ 35 | new UglifyJSPlugin() 36 | ] 37 | }) 38 | } 39 | -------------------------------------------------------------------------------- /build/vueLoaderConfig.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | loaders: { 3 | docs: 'vue2-doc-loader' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /build/webpack.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 6 | module.exports = { 7 | resolve: { 8 | modules: ['node_modules'], 9 | extensions: ['.vue', '.js', '.json'], 10 | alias: { 11 | utils: path.resolve(__dirname, '../utils'), 12 | // vue: 'vue' 13 | vue: 'vue/dist/vue.esm.js', 14 | '@': path.resolve(__dirname, '../packages') 15 | } 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.docs$/i, 21 | use: ['vue2-doc-loader'] 22 | }, 23 | { 24 | test: /\.css|postcss$/i, 25 | use: ExtractTextPlugin.extract({ 26 | fallback: { loader: 'style-loader', options: { sourceMap: process.env.NODE_ENV !== 'prod' } }, 27 | use: [ 28 | 29 | { loader: 'css-loader', options: { sourceMap: process.env.NODE_ENV !== 'prod' } }, 30 | { loader: 'postcss-loader', options: { sourceMap: process.env.NODE_ENV !== 'prod' } } 31 | ] 32 | }), 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.js$/i, 37 | use: ['babel-loader', 'eslint-loader'], 38 | exclude: [ 39 | /node_modules/, 40 | /lib\/index\.min\.js/ 41 | ] 42 | }, 43 | { 44 | test: /\.vue$/i, 45 | use: [ 46 | { 47 | loader: 'vue-loader' 48 | } 49 | ] 50 | }, 51 | { 52 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 53 | use: [ 54 | { 55 | loader: 'url-loader', 56 | options: { 57 | limit: 10000 58 | } 59 | } 60 | ] 61 | }, 62 | { 63 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 64 | use: [ 65 | { 66 | loader: 'url-loader', 67 | options: { 68 | limit: 6000 69 | } 70 | } 71 | ] 72 | } 73 | ] 74 | }, 75 | plugins: [ 76 | new ExtractTextPlugin('style.css'), 77 | new webpack.NoEmitOnErrorsPlugin(), 78 | new FriendlyErrorsPlugin(), 79 | new VueLoaderPlugin() 80 | ] 81 | } 82 | -------------------------------------------------------------------------------- /build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const base = require('./webpack.base') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | module.exports = merge(base, { 7 | entry: path.join(__dirname, '../example/index.js'), 8 | output: { 9 | path: path.join(__dirname, '../dist'), 10 | filename: 'index.js', 11 | publicPath: '/' 12 | }, 13 | devtool: 'source-map', 14 | plugins: [ 15 | new HtmlWebpackPlugin({ 16 | template: path.join(__dirname, '../example/index.html') 17 | }) 18 | ], 19 | devServer: { 20 | contentBase: path.resolve(__dirname, '../dist'), 21 | stats: 'errors-only' 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /build/webpack.doc.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const base = require('./webpack.base') 4 | const webpack = require('webpack') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 7 | const pkgVersion = require('../packages/oasis/package').version 8 | 9 | module.exports = merge(base, { 10 | entry: { 11 | app: path.join(__dirname, '../example/index.docs.js'), 12 | vendor: ['vue', 'vue-router'] 13 | }, 14 | output: { 15 | path: path.join(__dirname, '../docs/', pkgVersion), 16 | filename: '[name].js' 17 | }, 18 | devtool: '#source-map', 19 | resolve: { 20 | modules: ['node_modules'], 21 | extensions: ['.vue', '.js', '.json'] 22 | }, 23 | plugins: [ 24 | new HtmlWebpackPlugin({ 25 | template: path.join(__dirname, '../example/index.docs.html'), 26 | filename: path.join(__dirname, '../docs/index.html') 27 | }), 28 | new webpack.DefinePlugin({ 29 | 'process.env': { 30 | NODE_ENV: '"production"' 31 | } 32 | }), 33 | new webpack.optimize.CommonsChunkPlugin({ 34 | name: 'vendor' 35 | }), 36 | new UglifyJSPlugin() 37 | ] 38 | }) 39 | -------------------------------------------------------------------------------- /build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const base = require('./webpack.base') 4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 5 | 6 | module.exports = merge(base, { 7 | entry: path.join(__dirname, '../packages/oasis/index.js'), 8 | output: { 9 | path: path.join(__dirname, '../packages/oasis/lib'), 10 | filename: 'index.min.js', 11 | library: 'Oasis', 12 | libraryTarget: 'umd', 13 | umdNamedDefine: true 14 | }, 15 | externals: [ 16 | { 17 | vue: { 18 | // TODO 19 | amd: 'vue', 20 | root: 'Vue', 21 | commonjs: 'vue', 22 | commonjs2: 'vue' 23 | }, 24 | moment: 'moment' 25 | } 26 | ], 27 | devtool: '#source-map', 28 | resolve: { 29 | modules: ['node_modules'], 30 | extensions: ['.vue', '.js', '.json'] 31 | }, 32 | plugins: [ 33 | new UglifyJSPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /deploy/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | rm -rf web Oasis 4 | mkdir web 5 | 6 | git clone -b master https://$CI_TOKEN@github.com/OasisUI/Oasis.git web 7 | 8 | cd web 9 | 10 | pwd 11 | 12 | VERSION=$(node -p "require('./packages/oasis/package.json').version") 13 | 14 | if [ -z "$VERSION" ] 15 | then 16 | echo 'no version info' 17 | exit 1 18 | fi 19 | 20 | echo 'VERSION:' $VERSION 21 | 22 | npm install || exit 1 23 | npm run bootstrap || exit 1 24 | npm run build || exit 1 25 | npm run build:doc || exit 1 26 | 27 | cd .. 28 | git clone -b gh-pages https://$CI_TOKEN@github.com/OasisUI/Oasis.git 29 | 30 | cp -rf web/docs/* ./Oasis 31 | cp icon/favicon.png ./Oasis 32 | cd Oasis 33 | 34 | echo 'https://www.oasisui.org' > CNAME 35 | 36 | echo '\r\nstart deploying...' 37 | 38 | git add . 39 | git commit -m "Build $VERSION" 40 | 41 | git push origin gh-pages 42 | -------------------------------------------------------------------------------- /example/components.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /example/components/avatar.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 57 | -------------------------------------------------------------------------------- /example/components/cascader.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 122 | 123 | 128 | 129 | -------------------------------------------------------------------------------- /example/components/checkbox.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 63 | 64 | 69 | -------------------------------------------------------------------------------- /example/components/components.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | 31 | 45 | -------------------------------------------------------------------------------- /example/components/grid.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 84 | -------------------------------------------------------------------------------- /example/components/home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/components/inputNumber.vue: -------------------------------------------------------------------------------- 1 | 71 | 72 | 84 | 85 | 94 | 95 | -------------------------------------------------------------------------------- /example/components/loading.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 57 | -------------------------------------------------------------------------------- /example/components/message.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 86 | -------------------------------------------------------------------------------- /example/components/navbar.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 92 | 93 | 96 | -------------------------------------------------------------------------------- /example/components/pagination.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 93 | 94 | 99 | -------------------------------------------------------------------------------- /example/components/popup.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /example/components/previewImg.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 59 | -------------------------------------------------------------------------------- /example/components/progress.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 62 | -------------------------------------------------------------------------------- /example/components/rahmen.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 49 | 50 | 53 | -------------------------------------------------------------------------------- /example/components/scrollBox.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 19 | 28 | -------------------------------------------------------------------------------- /example/components/select.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 74 | 75 | 84 | -------------------------------------------------------------------------------- /example/components/switchbox.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 60 | 61 | 66 | -------------------------------------------------------------------------------- /example/home.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 34 | 35 | 82 | -------------------------------------------------------------------------------- /example/index.docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Oasis 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /example/index.docs.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Oasis from '../packages/oasis/lib/index.min.js' 3 | import { router } from './router' 4 | 5 | import '../packages/theme/index.css' 6 | import './style/example.css' 7 | 8 | Vue.use(Oasis) 9 | 10 | new Vue({ 11 | router, 12 | render () { 13 | return () 14 | } 15 | }).$mount('#app') 16 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Oasis 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Oasis from '../packages/oasis/index.js' 3 | import { router } from './router' 4 | 5 | import '../packages/theme/index.css' 6 | import './style/example.css' 7 | 8 | Vue.use(Oasis) 9 | 10 | new Vue({ 11 | router, 12 | render () { 13 | return () 14 | } 15 | }).$mount('#app') 16 | -------------------------------------------------------------------------------- /example/navbar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 65 | -------------------------------------------------------------------------------- /example/style/example.css: -------------------------------------------------------------------------------- 1 | @import "../../packages/theme/common/_var.css"; 2 | 3 | :root { 4 | --font-color: #39464e; 5 | } 6 | 7 | html, 8 | body { 9 | width: 100%; 10 | height: 100%; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | body { 15 | padding-top: 60px; 16 | padding-left: calc(100vw - 100%); 17 | color: var(--font-color); 18 | } 19 | 20 | .container { 21 | max-width: 780px; 22 | margin: 0 auto; 23 | padding: 0 10px; 24 | } 25 | 26 | .document { 27 | padding: 0 10px 40px 10px; 28 | } 29 | 30 | h1 { 31 | margin: 0 0 1.2rem 0; 32 | } 33 | h2 { 34 | padding-top: 1.2rem; 35 | } 36 | h3 { 37 | padding-top: 0.8rem; 38 | } 39 | 40 | pre, code { 41 | font-family: "Roboto Mono", Monaco, courier, monospace; 42 | font-size: 0.8rem; 43 | line-height: 1.4rem; 44 | background: #f8f8f8; 45 | overflow: auto; 46 | } 47 | 48 | pre.hljs { 49 | border-radius: 8px; 50 | padding: 1rem 0.5rem; 51 | } 52 | 53 | code { 54 | padding: 0 0.4rem; 55 | border-radius: 4px; 56 | } 57 | 58 | table { 59 | width: 100%; 60 | text-align: center; 61 | border-collapse: collapse; 62 | 63 | th, 64 | td { 65 | padding: 12px 8px; 66 | border: 1px solid #e8e8e8; 67 | } 68 | } 69 | 70 | a:active { 71 | } 72 | 73 | a:any-link { 74 | text-decoration: none; 75 | color: var(--color-primary); 76 | } 77 | 78 | a:visited { 79 | color: var(--color-primary-dark); 80 | } 81 | 82 | @media screen and (max-width: 1140px) { 83 | .container { 84 | margin-left: 260px; 85 | } 86 | } 87 | 88 | /*home page*/ 89 | -------------------------------------------------------------------------------- /example/tab.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | 33 | 62 | -------------------------------------------------------------------------------- /icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/icon/favicon.png -------------------------------------------------------------------------------- /icon/name.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oasis 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | Oasis 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.9.0", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "version": "independent" 7 | } 8 | -------------------------------------------------------------------------------- /packages/alert/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/alert/index.js -------------------------------------------------------------------------------- /packages/alert/lib/index.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("alert",[],t):"object"==typeof exports?exports.alert=t():e.alert=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){var o,r,f;!function(n,u){r=[],void 0===(f="function"==typeof(o=u)?o.apply(t,r):o)||(e.exports=f)}(0,function(){"use strict"})}])}); -------------------------------------------------------------------------------- /packages/alert/src/alert.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/alert/src/alert.vue -------------------------------------------------------------------------------- /packages/avatar/index.js: -------------------------------------------------------------------------------- 1 | import Avatar from './src' 2 | 3 | Avatar.install = function (Vue) { 4 | Vue.component(Avatar.name, Avatar) 5 | } 6 | 7 | export default Avatar 8 | -------------------------------------------------------------------------------- /packages/avatar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/avatar", 3 | "version": "0.3.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@oasis-ui/rahmen": "^0.2.1" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/avatar/src/avatarGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /packages/avatarGroup/index.js: -------------------------------------------------------------------------------- 1 | import AvatarGroup from '../avatar/src/avatarGroup' 2 | 3 | AvatarGroup.install = function (Vue) { 4 | Vue.component(AvatarGroup.name, AvatarGroup) 5 | } 6 | 7 | export default AvatarGroup 8 | -------------------------------------------------------------------------------- /packages/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/index.vue' 2 | import ButtonGroup from './src/buttonGroup.vue' 3 | 4 | Button.install = function (Vue) { 5 | Vue.component(Button.name, Button) 6 | Vue.component(ButtonGroup.name, ButtonGroup) 7 | } 8 | 9 | export default Button 10 | -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/button", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/button/src/buttonGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /packages/button/src/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 94 | -------------------------------------------------------------------------------- /packages/candidate/index.js: -------------------------------------------------------------------------------- 1 | import Candidate from './src' 2 | 3 | Candidate.install = function (Vue) { 4 | Vue.component(Candidate.name, Candidate) 5 | } 6 | 7 | export default Candidate 8 | -------------------------------------------------------------------------------- /packages/candidate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/candidate", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/button": "^0.1.1", 16 | "@oasis-ui/input": "^0.1.2", 17 | "@oasis-ui/popup": "^0.1.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/cascader/index.js: -------------------------------------------------------------------------------- 1 | import Cascader from './src' 2 | 3 | Cascader.install = function (Vue) { 4 | Vue.component(Cascader.name, Cascader) 5 | } 6 | 7 | export default Cascader 8 | -------------------------------------------------------------------------------- /packages/cascader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/cascader", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@oasis-ui/input": "^0.1.2", 13 | "@oasis-ui/popup": "^0.1.2" 14 | }, 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/cascader/src/menu.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 57 | -------------------------------------------------------------------------------- /packages/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './src/index' 2 | 3 | Checkbox.install = function (Vue) { 4 | Vue.component(Checkbox.name, Checkbox) 5 | } 6 | 7 | export default Checkbox 8 | -------------------------------------------------------------------------------- /packages/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/checkbox", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/checkbox/src/checkboxGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /packages/checkbox/src/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 74 | -------------------------------------------------------------------------------- /packages/checkboxGroup/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from '../checkbox/src/checkboxGroup' 2 | 3 | CheckboxGroup.install = function (Vue) { 4 | Vue.component(CheckboxGroup.name, CheckboxGroup) 5 | } 6 | 7 | export default CheckboxGroup 8 | -------------------------------------------------------------------------------- /packages/checkboxGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/checkbox-group", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/datePicker/index.js: -------------------------------------------------------------------------------- 1 | import InputDatePicker from './src' 2 | 3 | InputDatePicker.install = function (Vue) { 4 | Vue.component(InputDatePicker.name, InputDatePicker) 5 | } 6 | 7 | export default InputDatePicker 8 | -------------------------------------------------------------------------------- /packages/datePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/datepicker", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "dependencies": { 7 | "@oasis-ui/input": "^0.1.2", 8 | "@oasis-ui/modal": "^0.1.2" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "oasis", 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/datePicker/src/dayPicker.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 100 | -------------------------------------------------------------------------------- /packages/datePicker/src/monthPicker.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 82 | -------------------------------------------------------------------------------- /packages/datePicker/src/yearPicker.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 85 | -------------------------------------------------------------------------------- /packages/dateRangePicker/index.js: -------------------------------------------------------------------------------- 1 | import InputDateRange from './src' 2 | 3 | InputDateRange.install = function (Vue) { 4 | Vue.component(InputDateRange.name, InputDateRange) 5 | } 6 | 7 | export default InputDateRange 8 | -------------------------------------------------------------------------------- /packages/dateRangePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/daterangepicker", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "dependencies": { 7 | "@oasis-ui/datepicker": "^0.1.2" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "oasis", 13 | "license": "MIT", 14 | "publishConfig": { 15 | "access": "public" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/dateTimePicker/index.js: -------------------------------------------------------------------------------- 1 | import InputDateTime from './src' 2 | 3 | InputDateTime.install = function (Vue) { 4 | Vue.component(InputDateTime.name, InputDateTime) 5 | } 6 | export default InputDateTime 7 | -------------------------------------------------------------------------------- /packages/dateTimePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/datetimepicker", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "dependencies": { 7 | "@oasis-ui/datepicker": "^0.1.2", 8 | "@oasis-ui/timepicker": "^0.1.2" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "oasis", 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/form/index.js: -------------------------------------------------------------------------------- 1 | import FormGroup from './src/formGroup' 2 | import FormItem from './src/formItem' 3 | 4 | export default { 5 | install (Vue) { 6 | Vue.component(FormGroup.name, FormGroup) 7 | Vue.component(FormItem.name, FormItem) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/form", 3 | "version": "0.1.4", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/form/src/formGroup.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | -------------------------------------------------------------------------------- /packages/form/src/formItem.vue: -------------------------------------------------------------------------------- 1 | 98 | -------------------------------------------------------------------------------- /packages/grid/index.js: -------------------------------------------------------------------------------- 1 | import Col from './src/Col' 2 | import Row from './src/Row' 3 | 4 | const components = [ 5 | Col, 6 | Row 7 | ] 8 | 9 | export default { 10 | install (Vue) { 11 | components.map(component => { 12 | Vue.component(component.name, component) 13 | }) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/grid", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/grid/src/Col.vue: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /packages/grid/src/Row.vue: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /packages/img/index.js: -------------------------------------------------------------------------------- 1 | import Img from './src/img.vue' 2 | 3 | Img.install = function (Vue) { 4 | Vue.component(Img.name, Img) 5 | } 6 | 7 | export default Img 8 | -------------------------------------------------------------------------------- /packages/img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/img", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/img/src/img.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 69 | -------------------------------------------------------------------------------- /packages/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './src' 2 | 3 | Input.install = function (Vue) { 4 | Vue.component(Input.name, Input) 5 | } 6 | 7 | export default Input 8 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/input", 3 | "version": "0.1.2", 4 | "main": "lib/index.min.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "oasis", 9 | "license": "MIT", 10 | "description": "", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/inputNumber/index.js: -------------------------------------------------------------------------------- 1 | import InputNumber from './src' 2 | 3 | export default { 4 | install (Vue) { 5 | Vue.component(InputNumber.name, InputNumber) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/inputNumber/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/inputnumber", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/input": "^0.1.2", 16 | "@oasis-ui/popup": "^0.1.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/loading/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Loading from './src' 3 | 4 | const LoadingClass = Vue.extend(Loading) 5 | 6 | Loading.install = function (Vue) { 7 | Vue.component(Loading.name, Loading) 8 | 9 | Vue.prototype.$loading = function (visiable) { 10 | if (Vue.prototype.$loadingInstance === void (0)) { 11 | Vue.prototype.$loadingInstance = new LoadingClass({ 12 | el: document.createElement('div'), 13 | propsData: { 14 | global: true 15 | } 16 | }) 17 | } 18 | if (Vue.$isServer) return 19 | document.body.appendChild(Vue.prototype.$loadingInstance.$el) 20 | Vue.prototype.$loadingInstance.loading(visiable) 21 | } 22 | 23 | Vue.directive('loading', { 24 | bind (el, binding, vnode) { 25 | const loading = new LoadingClass({ 26 | el: document.createElement('div') 27 | }) 28 | el.__loading = loading 29 | loading.loading(binding.value) 30 | el.append(loading.$el) 31 | }, 32 | 33 | update (el, binding) { 34 | if (binding.value !== binding.oldValue) { 35 | el.__loading.loading(binding.value) 36 | } 37 | } 38 | }) 39 | } 40 | 41 | export default Loading 42 | -------------------------------------------------------------------------------- /packages/loading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/loading", 3 | "version": "0.2.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/loading/src/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 39 | -------------------------------------------------------------------------------- /packages/message/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Message from './src' 3 | 4 | const Msg = Vue.extend(Message) 5 | const maxQueueLength = 3 6 | 7 | export default { 8 | install (Vue) { 9 | if (Vue.prototype.$isServer) return 10 | 11 | const messageBox = document.createElement('div') 12 | messageBox.setAttribute('class', 'o-MessageBox') 13 | document.body.appendChild(messageBox) 14 | Vue.prototype.$messageBox = messageBox 15 | Vue.prototype.$messageQueue = [] 16 | 17 | Vue.prototype.$message = function (config) { 18 | const queue = Vue.prototype.$messageQueue 19 | const $messageBox = Vue.prototype.$messageBox 20 | 21 | if (typeof $messageBox === 'undefined') return 22 | 23 | const el = document.createElement('div') 24 | if ($messageBox.children.length) { 25 | $messageBox.insertBefore(el, $messageBox.children[0]) 26 | } else { 27 | $messageBox.appendChild(el) 28 | } 29 | const instance = new Msg({ 30 | propsData: config 31 | }).$mount(el) 32 | queue.unshift(instance) 33 | 34 | if (queue.length > maxQueueLength) { 35 | queue[queue.length - 1].close(queue) 36 | } 37 | config.duration !== 0 && setTimeout(() => { 38 | instance.close(queue) 39 | }, config.duration || 3000) 40 | 41 | return instance 42 | } 43 | 44 | ;['info', 'success', 'danger', 'warning'].forEach(type => { 45 | Vue.prototype.$message[type] = function (text = '', config = {}) { 46 | Vue.prototype.$message({ 47 | type, 48 | text, 49 | ...config 50 | }) 51 | } 52 | }) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/message/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/message", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/message/src/index.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 100 | -------------------------------------------------------------------------------- /packages/modal/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './src/index' 2 | 3 | Modal.install = function (Vue) { 4 | Vue.component(Modal.name, Modal) 5 | } 6 | 7 | export default Modal 8 | -------------------------------------------------------------------------------- /packages/modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/modal", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/modal/src/index.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 108 | -------------------------------------------------------------------------------- /packages/modalBox/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './src/alert' 2 | import Confirm from './src/confirm' 3 | import Prompt from './src/prompt' 4 | import Vue from 'vue' 5 | 6 | const AlertClass = Vue.extend(Alert) 7 | const ConfirmClass = Vue.extend(Confirm) 8 | const PromptClass = Vue.extend(Prompt) 9 | 10 | export default { 11 | install (Vue) { 12 | ;[ 13 | ['$alert', AlertClass], 14 | ['$prompt', PromptClass], 15 | ['$confirm', ConfirmClass] 16 | ].forEach(type => { 17 | Vue.prototype[type[0]] = function (config) { 18 | if (Vue.prototype.$isServer) return 19 | 20 | return new Promise((resolve, reject) => { 21 | const el = document.createElement('div') 22 | document.body.appendChild(el) 23 | const instance = new type[1]({ 24 | propsData: { 25 | ...config, 26 | onConfirm: (e) => { 27 | config.onConfirm && config.onConfirm(e) 28 | instance.__confirmed__ = true 29 | resolve(e) 30 | }, 31 | onClose: (e) => { 32 | setTimeout(() => { 33 | instance.$destroy() 34 | }, 400) 35 | if (instance.__confirmed__) return 36 | config.onClose && config.onClose(e) 37 | config.onCancel && config.onCancel(e) 38 | reject(e) 39 | } 40 | } 41 | }).$mount(el) 42 | }) 43 | } 44 | }) 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/modalBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/modalbox", 3 | "version": "0.1.4", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/button": "^0.1.1", 16 | "@oasis-ui/input": "^0.1.2", 17 | "@oasis-ui/modal": "^0.1.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/modalBox/src/alert.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 106 | -------------------------------------------------------------------------------- /packages/modalBox/src/confirm.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 96 | -------------------------------------------------------------------------------- /packages/nav/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from './src' 2 | import NavGroup from './src/navGroup' 3 | import SideNav from './src/sideNav' 4 | import SubNav from './src/subNav' 5 | import NavItem from './src/navItem' 6 | 7 | const components = [ 8 | Navbar, 9 | NavGroup, 10 | SideNav, 11 | SubNav, 12 | NavItem 13 | ] 14 | 15 | export default { 16 | install (Vue) { 17 | components.map(component => { 18 | Vue.component(component.name, component) 19 | }) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/nav/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/nav", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/scrollbox": "^0.1.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/nav/src/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 47 | -------------------------------------------------------------------------------- /packages/nav/src/navGroup.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | -------------------------------------------------------------------------------- /packages/nav/src/navItem.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | -------------------------------------------------------------------------------- /packages/nav/src/sideNav.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 55 | -------------------------------------------------------------------------------- /packages/nav/src/subNav.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 87 | -------------------------------------------------------------------------------- /packages/oasis/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |

🍃 Elegant UI framework for building prototype.

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 | ## Installation 33 | 34 | Oasis is available in [npm](https://npmjs.com/oasis-ui). 35 | 36 | ```shell 37 | $ npm install oasis-ui 38 | $ yarn add oasis-ui 39 | ``` 40 | ## Usage 41 | 42 | ```javascript 43 | import Vue from 'vue' 44 | import Oasis from 'oasis-ui' 45 | import 'oasis-ui/lib/theme/index.css' 46 | 47 | Vue.use(Oasis) 48 | ``` 49 | or use specified component: 50 | 51 | ```javascript 52 | import Vue from 'vue' 53 | import PreviewImg from '@oasis-ui/preview-img' 54 | import '@oasis-ui/theme/theme.css' 55 | 56 | Vue.use(PreviewImg) 57 | ``` 58 | -------------------------------------------------------------------------------- /packages/oasis/index.js: -------------------------------------------------------------------------------- 1 | // components 2 | import Img from '../img' 3 | import Loading from '../loading' 4 | import Form from '../form' 5 | import Button from '../button' 6 | import Grid from '../grid' 7 | import Checkbox from '../checkbox' 8 | import CheckboxGroup from '../checkboxGroup' 9 | import Input from '../input' 10 | import Candidate from '../candidate' 11 | import InputNumber from '../inputNumber' 12 | import Select from '../select' 13 | import Radio from '../radio' 14 | import RadioBtn from '../radioBtn' 15 | import RadioGroup from '../radioGroup' 16 | import Message from '../message' 17 | import Modal from '../modal' 18 | import ModalBox from '../modalBox' 19 | import DatePicker from '../datePicker' 20 | import TimePicker from '../timePicker' 21 | import DateTimePicker from '../dateTimePicker' 22 | import DateRangePicker from '../dateRangePicker' 23 | import Upload from '../upload' 24 | import Progress from '../progress' 25 | import Popup from '../popup' 26 | import ScrollBox from '../scrollBox' 27 | import Pagination from '../pagination' 28 | import Nav from '../nav' 29 | import Rahmen from '../rahmen' 30 | import Avatar from '../avatar' 31 | import AvatarGroup from '../avatarGroup' 32 | import PreviewImg from '../previewImg' 33 | import Table from '../table' 34 | import Cascader from '../cascader' 35 | import Switchbox from '../switchbox' 36 | 37 | // tools 38 | // TODO 39 | 40 | const components = [ 41 | Img, 42 | Loading, 43 | Form, 44 | Button, 45 | Grid, 46 | Checkbox, 47 | CheckboxGroup, 48 | Input, 49 | Candidate, 50 | InputNumber, 51 | Select, 52 | Radio, 53 | RadioBtn, 54 | RadioGroup, 55 | Message, 56 | Modal, 57 | ModalBox, 58 | DatePicker, 59 | TimePicker, 60 | DateTimePicker, 61 | DateRangePicker, 62 | Upload, 63 | Progress, 64 | Popup, 65 | ScrollBox, 66 | Pagination, 67 | Nav, 68 | Rahmen, 69 | Avatar, 70 | AvatarGroup, 71 | PreviewImg, 72 | Table, 73 | Cascader, 74 | Switchbox 75 | ] 76 | 77 | const Oasis = { 78 | components, 79 | install (Vue) { 80 | components.map(component => { 81 | Vue.use(component) 82 | }) 83 | } 84 | } 85 | 86 | export default Oasis 87 | -------------------------------------------------------------------------------- /packages/oasis/lib/theme/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/oasis/lib/theme/font/iconfont.eot -------------------------------------------------------------------------------- /packages/oasis/lib/theme/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/oasis/lib/theme/font/iconfont.ttf -------------------------------------------------------------------------------- /packages/oasis/lib/theme/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/oasis/lib/theme/font/iconfont.woff -------------------------------------------------------------------------------- /packages/oasis/lib/theme/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/oasis/lib/theme/font/iconfont.woff2 -------------------------------------------------------------------------------- /packages/oasis/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "oasis-ui", 3 | "version": "0.7.0", 4 | "description": "🍃 Elegant UI framework.", 5 | "main": "lib/index.min.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/oasisui/oasis.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/oasisui/oasis/issues" 12 | }, 13 | "homepage": "http://www.oasisui.org/", 14 | "author": "oasis", 15 | "license": "MIT", 16 | "publishConfig": { 17 | "access": "public" 18 | }, 19 | "keywords": [ 20 | "vue", 21 | "oasis", 22 | "components" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './src' 2 | 3 | Pagination.install = function (Vue) { 4 | Vue.component(Pagination.name, Pagination) 5 | } 6 | 7 | export default Pagination 8 | -------------------------------------------------------------------------------- /packages/pagination/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "vue": { 6 | "version": "2.5.16", 7 | "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz", 8 | "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/pagination", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "dependencies": { 12 | "vue": "^2.5.13" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/pagination/src/link.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 42 | -------------------------------------------------------------------------------- /packages/popup/index.js: -------------------------------------------------------------------------------- 1 | import Popup from './src' 2 | 3 | Popup.install = function (Vue) { 4 | Vue.directive('popup', { 5 | bind (el, binding, vnode) { 6 | vnode.context.$refs[binding.arg].$refs.trigger = el 7 | } 8 | }) 9 | Vue.component(Popup.name, Popup) 10 | } 11 | 12 | export default Popup 13 | -------------------------------------------------------------------------------- /packages/popup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/popup", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/previewImg/index.js: -------------------------------------------------------------------------------- 1 | import PreviewImg from './src' 2 | 3 | PreviewImg.install = function (Vue) { 4 | const PreviewImgClass = Vue.extend(PreviewImg) 5 | 6 | Vue.prototype.$previewImg = function (material) { 7 | if (Vue.prototype.$isServer) return 8 | 9 | const el = document.createElement('div') 10 | 11 | document.body.appendChild(el) 12 | return new PreviewImgClass({ 13 | propsData: { 14 | material 15 | } 16 | }).$mount(el) 17 | } 18 | } 19 | 20 | export default PreviewImg 21 | -------------------------------------------------------------------------------- /packages/previewImg/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/preview-img", 3 | "version": "0.2.0", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/loading": "^0.2.1", 16 | "@oasis-ui/modal": "^0.1.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/progress/index.js: -------------------------------------------------------------------------------- 1 | import Progress from './src' 2 | 3 | export default { 4 | install (Vue) { 5 | Vue.component(Progress.name, Progress) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/progress", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/progress/src/circle.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 79 | -------------------------------------------------------------------------------- /packages/progress/src/index.vue: -------------------------------------------------------------------------------- 1 | 68 | -------------------------------------------------------------------------------- /packages/progress/src/line.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 62 | -------------------------------------------------------------------------------- /packages/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/index' 2 | 3 | Radio.install = function (Vue) { 4 | Vue.component(Radio.name, Radio) 5 | } 6 | 7 | export default Radio 8 | -------------------------------------------------------------------------------- /packages/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/radio", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/radio/src/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 73 | -------------------------------------------------------------------------------- /packages/radio/src/radioBtn.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 87 | -------------------------------------------------------------------------------- /packages/radio/src/radioGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 19 | -------------------------------------------------------------------------------- /packages/radioBtn/index.js: -------------------------------------------------------------------------------- 1 | import RadioBtn from '../radio/src/radioBtn' 2 | 3 | RadioBtn.install = function (Vue) { 4 | Vue.component(RadioBtn.name, RadioBtn) 5 | } 6 | 7 | export default RadioBtn 8 | -------------------------------------------------------------------------------- /packages/radioBtn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/radio-btn", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/radioGroup/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from '../radio/src/radioGroup' 2 | 3 | RadioGroup.install = function (Vue) { 4 | Vue.component(RadioGroup.name, RadioGroup) 5 | } 6 | 7 | export default RadioGroup 8 | -------------------------------------------------------------------------------- /packages/radioGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/radio-group", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/rahmen/index.js: -------------------------------------------------------------------------------- 1 | import Rahmen from './src' 2 | 3 | Rahmen.install = function (Vue) { 4 | Vue.component(Rahmen.name, Rahmen) 5 | } 6 | 7 | export default Rahmen 8 | -------------------------------------------------------------------------------- /packages/rahmen/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "rahmen": { 6 | "version": "0.0.0", 7 | "resolved": "https://registry.npmjs.org/rahmen/-/rahmen-0.0.0.tgz", 8 | "integrity": "sha1-Fqu4+BcxFrdVaskB6JrR98B+brY=" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/rahmen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/rahmen", 3 | "version": "0.2.1", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/rahmen/src/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 62 | -------------------------------------------------------------------------------- /packages/scrollBox/index.js: -------------------------------------------------------------------------------- 1 | import ScrollBox from './src' 2 | 3 | ScrollBox.install = function (Vue) { 4 | Vue.component(ScrollBox.name, ScrollBox) 5 | } 6 | 7 | export default ScrollBox 8 | -------------------------------------------------------------------------------- /packages/scrollBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/scrollbox", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './src/index' 2 | 3 | Select.install = function (Vue) { 4 | Vue.component(Select.name, Select) 5 | } 6 | 7 | export default Select 8 | -------------------------------------------------------------------------------- /packages/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/select", 3 | "version": "0.1.3", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/input": "^0.1.2", 16 | "@oasis-ui/popup": "^0.1.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/switchbox/index.js: -------------------------------------------------------------------------------- 1 | import Switchbox from './src/index' 2 | 3 | Switchbox.install = function (Vue) { 4 | Vue.component(Switchbox.name, Switchbox) 5 | } 6 | 7 | export default Switchbox 8 | -------------------------------------------------------------------------------- /packages/switchbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/switchbox", 3 | "version": "0.0.4", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "author": "oasis", 13 | "license": "MIT" 14 | } 15 | -------------------------------------------------------------------------------- /packages/switchbox/src/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 56 | -------------------------------------------------------------------------------- /packages/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './src' 2 | import TableHead from './src/tableHead' 3 | import TableBody from './src/tableBody' 4 | import TableColumn from './src/tableColumn' 5 | 6 | Table.install = function (Vue) { 7 | Vue.component(Table.name, Table) 8 | Vue.component(TableHead.name, TableHead) 9 | Vue.component(TableBody.name, TableBody) 10 | Vue.component(TableColumn.name, TableColumn) 11 | } 12 | Table.Head = TableHead 13 | Table.Body = TableBody 14 | Table.Column = TableColumn 15 | 16 | export default Table 17 | -------------------------------------------------------------------------------- /packages/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/table", 3 | "version": "0.3.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/checkbox": "^0.1.3", 16 | "@oasis-ui/pagination": "^0.1.3", 17 | "@oasis-ui/scrollbox": "^0.1.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/table/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from '../../../node_modules/vue' 2 | 3 | export default function () { 4 | return new Vue({ 5 | data () { 6 | return { 7 | columns: [] 8 | } 9 | }, 10 | methods: { 11 | insertColumn (index, columnConfig) { 12 | this.columns.splice(index, 0, columnConfig) 13 | }, 14 | removeColumn (index) { 15 | this.columns.splice(index, 1) 16 | } 17 | } 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /packages/table/src/tableBody.vue: -------------------------------------------------------------------------------- 1 | 61 | -------------------------------------------------------------------------------- /packages/table/src/tableFooter.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/table/src/tableFooter.vue -------------------------------------------------------------------------------- /packages/table/src/tableHead.vue: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /packages/theme/common/_animation.css: -------------------------------------------------------------------------------- 1 | @keyframes loading-spin { 2 | 0% { 3 | stroke-dasharray: 100, 140; 4 | stroke-dashoffset: 265; 5 | } 6 | 7 | 50% { 8 | stroke-dasharray: 100, 200; 9 | stroke-dashoffset: 300; 10 | } 11 | 12 | 100% { 13 | stroke-dasharray: 100, 140; 14 | stroke-dashoffset: 265; 15 | } 16 | } 17 | 18 | 19 | @keyframes loading-rotate { 20 | 0% { 21 | transform: rotate(0); 22 | } 23 | 24 | 100% { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @keyframes message-enter {} 30 | 31 | @keyframes loading-left { 32 | 0%, 50% { 33 | transform: translateX(0) scale(0.9); 34 | } 35 | 36 | 100% { 37 | transform: translateX(calc(-1 * 20px)) scale(0.8); 38 | } 39 | } 40 | 41 | @keyframes loading-right { 42 | 0%, 50% { 43 | transform: translateX(0) scale(0.9); 44 | } 45 | 46 | 100% { 47 | transform: translateX(calc(1 * 20px)) scale(0.8); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/theme/common/_base.css: -------------------------------------------------------------------------------- 1 | @import './_var.css'; 2 | 3 | /*default*/ 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | /*layout*/ 9 | @u center{ 10 | position: absolute; 11 | top: 0; 12 | right: 0; 13 | bottom: 0; 14 | left: 0; 15 | margin: auto; 16 | } 17 | 18 | @u invisible { 19 | z-index: -9999; 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | width: 0; 24 | height: 0; 25 | margin: 0; 26 | padding: 0; 27 | opacity: 0; 28 | } 29 | 30 | /* scrollbar */ 31 | ::-webkit-scrollbar { 32 | width: var(--ScrollBox-scrollbar-width); 33 | height: var(--ScrollBox-scrollbar-width); 34 | } 35 | 36 | *:hover { 37 | &::-webkit-scrollbar-track { 38 | border-radius: calc(var(--ScrollBox-scrollbar-width) / 2); 39 | } 40 | 41 | &::-webkit-scrollbar-thumb { 42 | background: var(--ScrollBox-thumb-bg); 43 | border-radius: calc(var(--ScrollBox-scrollbar-width) / 2); 44 | } 45 | } 46 | 47 | ::-webkit-scrollbar-thumb:hover { 48 | background: var(--ScrollBox-thumb-hover-bg); 49 | } 50 | 51 | /*reset style*/ 52 | body { 53 | color: var(--fontColor-default); 54 | font-size: var(--fontSize-default); 55 | font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; 56 | -webkit-font-smoothing: antialiased; 57 | -moz-osx-font-smoothing: grayscale; 58 | 59 | /*https://davidwalsh.name/font-smoothing*/ 60 | } 61 | 62 | button { 63 | cursor: pointer; 64 | } 65 | 66 | .iconfont { 67 | font-size: inherit; 68 | } 69 | 70 | .clearfix { 71 | &:before, 72 | &:after { 73 | display: table; 74 | content: " "; 75 | clear: both; 76 | } 77 | } 78 | 79 | .float-left { 80 | float: left; 81 | } 82 | 83 | .float-right { 84 | float: right; 85 | } 86 | 87 | .block { 88 | display: block; 89 | } 90 | -------------------------------------------------------------------------------- /packages/theme/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/theme/font/iconfont.eot -------------------------------------------------------------------------------- /packages/theme/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/theme/font/iconfont.ttf -------------------------------------------------------------------------------- /packages/theme/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/theme/font/iconfont.woff -------------------------------------------------------------------------------- /packages/theme/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OasisUI/Oasis/c44a4ab744b019d29a1715cc130821334a238a43/packages/theme/font/iconfont.woff2 -------------------------------------------------------------------------------- /packages/theme/index.css: -------------------------------------------------------------------------------- 1 | @import './common/_base.css'; 2 | @import './common/_animation.css'; 3 | @import './iconfont/iconfont.css'; 4 | @import './common/transition.css'; 5 | 6 | @import './src/img.css'; 7 | @import './src/loading.css'; 8 | @import './src/form.css'; 9 | @import './src/button.css'; 10 | @import './src/input.css'; 11 | @import './src/inputNumber.css'; 12 | @import './src/select.css'; 13 | @import './src/cascader.css'; 14 | @import './src/radio.css'; 15 | @import './src/checkbox.css'; 16 | @import './src/switchbox.css'; 17 | @import './src/grid.css'; 18 | @import './src/message.css'; 19 | @import './src/modal.css'; 20 | @import './src/datePicker.css'; 21 | @import './src/timePicker.css'; 22 | @import './src/upload.css'; 23 | @import './src/progress.css'; 24 | @import './src/popup.css'; 25 | @import './src/scrollBox.css'; 26 | @import './src/pagination.css'; 27 | @import './src/nav.css'; 28 | @import './src/rahmen.css'; 29 | @import './src/avatar.css'; 30 | @import './src/previewImg.css'; 31 | @import './src/dateTimePicker.css'; 32 | @import './src/dateRangePicker.css'; 33 | @import './src/table.css'; 34 | -------------------------------------------------------------------------------- /packages/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/theme", 3 | "version": "0.4.2", 4 | "description": "", 5 | "main": "theme.css", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "license": "MIT", 14 | "keywords": [ 15 | "vue", 16 | "oasis", 17 | "theme", 18 | "components" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/theme/src/avatar.css: -------------------------------------------------------------------------------- 1 | @component Avatar { 2 | display: inline-flex; 3 | flex: auto 0; 4 | 5 | @m round { 6 | & .o-Avatar__imgWrapper { 7 | border-radius: 50%; 8 | overflow: hidden; 9 | } 10 | } 11 | 12 | @m rect { 13 | border-radius: 0; 14 | } 15 | 16 | @m sm { 17 | height: var(--Avatar-sm-width); 18 | line-height: var(--Avatar-sm-width); 19 | 20 | & .o-Avatar__imgWrapper { 21 | width: var(--Avatar-sm-width); 22 | font-size: var(--Avatar-sm-fontSize); 23 | } 24 | } 25 | 26 | @m md { 27 | height: var(--Avatar-md-width); 28 | line-height: var(--Avatar-md-width); 29 | 30 | & .o-Avatar__imgWrapper { 31 | width: var(--Avatar-md-width); 32 | font-size: var(--Avatar-md-fontSize); 33 | } 34 | } 35 | 36 | @m lg { 37 | height: var(--Avatar-lg-width); 38 | line-height: var(--Avatar-lg-width); 39 | 40 | & .o-Avatar__imgWrapper { 41 | width: var(--Avatar-lg-width); 42 | font-size: var(--Avatar-lg-fontSize); 43 | } 44 | } 45 | 46 | @d imgWrapper { 47 | position: relative; 48 | height: 100%; 49 | border-radius: 50%; 50 | border: 1px solid #F5F5F5; 51 | } 52 | 53 | @d name { 54 | display: block; 55 | position: absolute; 56 | top: 0; 57 | left: 0; 58 | width: 100%; 59 | height: 100%; 60 | color: var(--Avatar-color); 61 | font-weight: 700; 62 | text-align: center; 63 | white-space: nowrap; 64 | } 65 | 66 | @d addon { 67 | height: 100%; 68 | margin-left: 0.5rem; 69 | font-weight: bold; 70 | } 71 | } 72 | 73 | @component AvatarGroup { 74 | display: inline-block; 75 | white-space: nowrap; 76 | font-size: 0; 77 | 78 | & .o-Avatar:not(:first-of-type) { 79 | margin-left: -8%; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /packages/theme/src/cascader.css: -------------------------------------------------------------------------------- 1 | @component Cascader { 2 | &:hover { 3 | & .o-Cascader__trigger { 4 | color: var(--color-black-3); 5 | } 6 | } 7 | 8 | & * { 9 | cursor: pointer; 10 | } 11 | 12 | @d popup { 13 | top: 100% !important; 14 | } 15 | 16 | @d options { 17 | display: flex; 18 | flex-wrap: nowrap; 19 | margin: -var(--Popup-inner-padding); 20 | } 21 | 22 | @d trigger { 23 | pointer-events: none; 24 | padding: 0; 25 | background: transparent; 26 | color: var(--Input-hoverColor); 27 | font-size: 12px; 28 | } 29 | } 30 | 31 | @component CascaderMenu { 32 | margin: 0; 33 | padding: 4px 0; 34 | list-style: none; 35 | color: var(--fontColor-default); 36 | max-height: 500px; 37 | overflow: auto; 38 | 39 | &:not(:last-of-type) { 40 | border-right: 1px solid var(--Input-borderColor); 41 | } 42 | 43 | @d item { 44 | display: flex; 45 | justify-content: space-between; 46 | min-width: 150px; 47 | padding: 0 0.4rem; 48 | cursor: pointer; 49 | 50 | &.is-selected { 51 | background: var(--color-primary); 52 | color: #fff; 53 | 54 | & .o-CascaderMenu__trigger { 55 | color: var(--color-white); 56 | } 57 | } 58 | 59 | &:hover:not(.is-selected) { 60 | background: var(--color-gray-4); 61 | } 62 | 63 | &.is-disabled { 64 | cursor: not-allowed; 65 | } 66 | } 67 | 68 | @d label { 69 | flex: 1; 70 | width: 0; 71 | overflow: hidden; 72 | text-overflow: ellipsis; 73 | padding-left: 0.3rem; 74 | } 75 | 76 | @d trigger { 77 | font-size: 12px; 78 | color: var(--Input-hoverColor); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/theme/src/checkbox.css: -------------------------------------------------------------------------------- 1 | @component Checkbox { 2 | width: auto; 3 | cursor: pointer; 4 | 5 | @d inner { 6 | position: relative; 7 | flex-shrink: 0; 8 | display: inline-block; 9 | margin-right: calc(var(--Input-checkbox-size) / 2); 10 | width: var(--Input-checkbox-size); 11 | height: var(--Input-checkbox-size); 12 | vertical-align: middle; 13 | border: 1px solid var(--Input-borderColor); 14 | border-radius: 3px; 15 | transition: var(--transition-default); 16 | 17 | &:after { 18 | display: block; 19 | position: absolute; 20 | content: ''; 21 | top: 0; 22 | left: 0; 23 | width: 7px; 24 | height: 3px; 25 | border: 2px solid white; 26 | border-top-width: 0; 27 | border-right-width: 0; 28 | transform: scale(0) rotate(-45deg); 29 | transform-origin: 10px 1px; 30 | background: transparent; 31 | transition: var(--transition-checkbox); 32 | } 33 | } 34 | 35 | @when disabled { 36 | background: inherit; 37 | 38 | & .o-Checkbox__inner { 39 | cursor: not-allowed; 40 | border-color: var(--color-gray-2) !important; 41 | background: var(--Input-disabled-bg) !important; 42 | 43 | &:after { 44 | border-color: var(--color-gray-2); 45 | } 46 | } 47 | } 48 | 49 | @when focused { 50 | background: inherit; 51 | 52 | & .o-Radio__inner { 53 | border-color: var(--color-primary) !important; 54 | } 55 | } 56 | 57 | & input[type="checkbox"] { 58 | &:checked + .o-Checkbox__inner { 59 | border-color: var(--color-primary); 60 | background: var(--color-primary); 61 | 62 | &:after { 63 | transform: scale(1) rotate(-45deg); 64 | } 65 | } 66 | } 67 | 68 | & + .o-Checkbox { 69 | margin-left: 20px; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /packages/theme/src/dateRangePicker.css: -------------------------------------------------------------------------------- 1 | @component DateRangePicker { 2 | text-align: center; 3 | color: var(--fontColor-default); 4 | 5 | & .o-DatePicker, 6 | & .o-TimePicker { 7 | display: inline-block; 8 | vertical-align: top; 9 | } 10 | 11 | @d currentValue { 12 | 13 | color: var(--fontColor-default); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/theme/src/dateTimePicker.css: -------------------------------------------------------------------------------- 1 | @component DateTimePicker { 2 | text-align: center; 3 | color: var(--fontColor-default); 4 | 5 | & .o-DatePicker, 6 | & .o-TimePicker { 7 | display: inline-block; 8 | } 9 | 10 | & .o-DateTimePicker__date, 11 | & .o-DateTimePicker__time { 12 | .o-Input__wrapper { 13 | display: none; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/theme/src/form.css: -------------------------------------------------------------------------------- 1 | @component FormGroup { 2 | display: block; 3 | 4 | @m inline { 5 | & .o-FormItem{ 6 | display: inline-block; 7 | margin-right: 1rem; 8 | vertical-align: middle; 9 | } 10 | 11 | & .o-FormItem__wrapper { 12 | display: inline-block; 13 | } 14 | } 15 | 16 | @m blockLabel { 17 | & .o-FormItem__label { 18 | display: block; 19 | height: 12px; 20 | width: 100%; 21 | line-height: 12px; 22 | margin-bottom: 10px; 23 | text-align: left; 24 | color: #878F94; 25 | font-size: 12px; 26 | } 27 | } 28 | } 29 | 30 | @component FormItem { 31 | position: relative; 32 | margin-bottom: var(--FormItem-marginBottom); 33 | text-align: left; 34 | 35 | @d label { 36 | float: left; 37 | display: inline-block; 38 | padding-right: 12px; 39 | text-align: right; 40 | line-height: var(--Input-lg-height); 41 | white-space: nowrap; 42 | overflow: hidden; 43 | text-overflow: ellipsis; 44 | 45 | &:before { 46 | content: ' * '; 47 | display: none; 48 | color: var(--color-danger); 49 | } 50 | } 51 | 52 | @d wrapper { 53 | position: relative; 54 | line-height: var(--Input-lg-height); 55 | } 56 | 57 | @d tip { 58 | padding-top: 4px; 59 | height: var(--FormItem-errMsg-height); 60 | line-height: var(--FormItem-errMsg-height); 61 | font-size: var(--FormItem--info-fontSize); 62 | color: var(--color-black-5); 63 | } 64 | 65 | @d errMsg { 66 | padding-top: 4px; 67 | height: var(--FormItem-errMsg-height); 68 | line-height: var(--FormItem-errMsg-height); 69 | font-size: var(--FormItem--info-fontSize); 70 | color: var(--color-danger); 71 | } 72 | 73 | @when required { 74 | & .o-FormItem__label:before { 75 | display: inline; 76 | } 77 | } 78 | 79 | @when error { 80 | & .o-Input__wrapper { 81 | border-color: var(--color-danger) !important; 82 | 83 | &.is-focused { 84 | box-shadow: 0 0 0 2px color(var(--color-danger) alpha(30%)) !important; 85 | } 86 | } 87 | 88 | & i[class*="__trigger"], 89 | & button[class*="__trigger"] i { 90 | color: var(--color-danger) !important; 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /packages/theme/src/grid.css: -------------------------------------------------------------------------------- 1 | @component Row { 2 | display: block; 3 | 4 | &:after, 5 | &:before { 6 | display: table; 7 | content: ' '; 8 | clear: both; 9 | } 10 | } 11 | @for $i from 1 to 24 { 12 | .o-Col-$i { 13 | width: calc($i / 0.24)%; 14 | } 15 | 16 | .o-Col-offset-$i { 17 | margin-left: calc($i / 0.24)%; 18 | } 19 | } 20 | 21 | .o-Col-1, .o-Col-2, .o-Col-3, .o-Col-4, .o-Col-5, .o-Col-6, .o-Col-7, .o-Col-8, .o-Col-9, .o-Col-10, .o-Col-11, .o-Col-12, .o-Col-13, .o-Col-14, .o-Col-15, .o-Col-16, .o-Col-17, .o-Col-18, .o-Col-19, .o-Col-20, .o-Col-21, .o-Col-22, .o-Col-23, .o-Col-24 { 22 | float: left; 23 | } 24 | -------------------------------------------------------------------------------- /packages/theme/src/img.css: -------------------------------------------------------------------------------- 1 | @c Img { 2 | position: relative; 3 | display: inline-block; 4 | font-size: 0; 5 | 6 | @d loading, backup { 7 | font-size: var(--fontSize-default) 8 | } 9 | 10 | @when failed { 11 | color: red; 12 | } 13 | 14 | & img { 15 | display: block; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/theme/src/inputNumber.css: -------------------------------------------------------------------------------- 1 | @component InputNumber { 2 | & .o-Input__addonWrapper { 3 | background: transparent; 4 | } 5 | 6 | @d actions { 7 | display: flex; 8 | height: 100%; 9 | flex-direction: column; 10 | justify-content: center; 11 | padding: 0 0 0 calc(var(--Input-padding) / 2); 12 | line-height: normal; 13 | color: var(--Input-hoverColor); 14 | 15 | & i { 16 | font-size: 12px; 17 | } 18 | } 19 | 20 | & .o-InputNumber__add, 21 | & .o-InputNumber__sub { 22 | height: 50%; 23 | cursor: pointer; 24 | 25 | &:hover:not(.is-disabled) { 26 | color: var(--color-black-3); 27 | } 28 | 29 | &.is-disabled { 30 | cursor: not-allowed; 31 | } 32 | } 33 | 34 | &.o-Input--sm { 35 | & .o-InputNumber__add, 36 | & .o-InputNumber__sub { 37 | line-height: calc(var(--Input-sm-height) / 2); 38 | } 39 | } 40 | 41 | &.o-Input--md { 42 | & .o-InputNumber__add, 43 | & .o-InputNumber__sub { 44 | line-height: calc(var(--Input-md-height) / 2); 45 | } 46 | } 47 | 48 | &.o-Input--lg { 49 | & .o-InputNumber__add, 50 | & .o-InputNumber__sub { 51 | line-height: calc(var(--Input-lg-height) / 2); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/theme/src/loading.css: -------------------------------------------------------------------------------- 1 | @c Loading { 2 | position: absolute; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | top: 0; 7 | left: 0; 8 | width: 100%; 9 | height: 100%; 10 | background: var(--Loading-bg); 11 | 12 | @when global { 13 | position: fixed; 14 | z-index: var(--zIndex-tooltip); 15 | } 16 | 17 | @d inner { 18 | position: relative; 19 | background: var(--color-primary-light); 20 | 21 | &, 22 | &::before, 23 | &::after { 24 | display: block; 25 | border-radius: 50%; 26 | width: var(--Loading-inner-width); 27 | height: var(--Loading-inner-height); 28 | } 29 | 30 | &::before, 31 | &::after { 32 | position: absolute; 33 | top: 0; 34 | content: ""; 35 | animation-timing-function: cubic-bezier(0.18, 0.46, 0.55, 0.95) !important; 36 | } 37 | 38 | &::before { 39 | right: 100%; 40 | background: var(--color-warning-light); 41 | animation: loading-left 0.7s 0s infinite alternate; 42 | } 43 | 44 | &::after { 45 | left: 100%; 46 | background: var(--color-danger-light); 47 | animation: loading-right 0.7s 0s infinite alternate-reverse; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/theme/src/message.css: -------------------------------------------------------------------------------- 1 | @component MessageBox { 2 | z-index: var(--zIndex-message); 3 | position: fixed; 4 | top: 0; 5 | height: 0; 6 | width: 100%; 7 | overflow: visible; 8 | } 9 | 10 | @component Message { 11 | pointer-events: none; 12 | position: relative; 13 | display: flex; 14 | height: 0; 15 | justify-content: center; 16 | align-items: flex-start; 17 | transition: all linear var(--Message-transition-duration); 18 | 19 | @d wrapper { 20 | pointer-events: all; 21 | display: flex; 22 | flex: 0 0 auto; 23 | justify-content: center; 24 | align-items: center; 25 | padding-top: var(--Message-padding); 26 | min-width: var(--Message-minWidth); 27 | } 28 | 29 | @d inner { 30 | display: flex; 31 | width: 100%; 32 | justify-content: space-between; 33 | align-items: flex-start; 34 | padding: var(--Message-padding); 35 | border-radius: var(--Message-borderRadius); 36 | background: var(--Message-bg); 37 | box-shadow: var(--Message-shadow); 38 | } 39 | 40 | @d type { 41 | margin: 0 var(--Message-statusBlock) 0 0; 42 | width: var(--Message-statusBlock); 43 | height: var(--Message-statusBlock); 44 | text-align: center; 45 | line-height: var(--Message-statusBlock); 46 | 47 | &.is-danger { 48 | color: var(--color-danger); 49 | } 50 | 51 | &.is-info { 52 | color: var(--color-info); 53 | } 54 | 55 | &.is-success { 56 | color: var(--color-success); 57 | } 58 | 59 | &.is-warning { 60 | color: var(--color-warning); 61 | } 62 | } 63 | 64 | @d content { 65 | font-size: 14px; 66 | color: var(--color-black-2); 67 | } 68 | 69 | @d text { 70 | margin: 0; 71 | height: var(--Message-statusBlock); 72 | white-space: nowrap; 73 | overflow: hidden; 74 | text-overflow: ellipsis; 75 | font-weight: 700; 76 | max-width: var(--Message-maxWidth); 77 | } 78 | 79 | @d desc { 80 | margin: 0; 81 | line-height: 20px; 82 | word-wrap: break-word; 83 | width: var(--Message-maxWidth); 84 | } 85 | 86 | @d closeBtn { 87 | margin: 0 0 0 var(--Message-statusBlock); 88 | width: var(--Message-statusBlock); 89 | height: var(--Message-statusBlock); 90 | padding: 0; 91 | text-align: center; 92 | line-height: var(--Message-statusBlock); 93 | border-radius: var(--Message-borderRadius); 94 | border: none; 95 | background: transparent; 96 | 97 | &:hover { 98 | background: rgba(0,0,0,0.1); 99 | } 100 | } 101 | } 102 | 103 | -------------------------------------------------------------------------------- /packages/theme/src/modal.css: -------------------------------------------------------------------------------- 1 | @component Modal { 2 | z-index: var(--zIndex-modal); 3 | position: fixed; 4 | text-align: center; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | background: rgba(0, 0, 0, 0.64); 10 | 11 | &:after { 12 | display: inline-block; 13 | width: 0; 14 | height: 100%; 15 | content: ''; 16 | vertical-align: middle; 17 | } 18 | 19 | @d content { 20 | display: inline-flex; 21 | position: relative; 22 | vertical-align: middle; 23 | flex-direction: column; 24 | justify-content: space-between; 25 | width: 420px; 26 | border-radius: var(--Input-borderRadius); 27 | background: white; 28 | overflow: hidden; 29 | box-shadow: var(--shadow-card); 30 | } 31 | 32 | @d close { 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | padding: 10px; 37 | color: #8A8A8A; 38 | cursor: pointer; 39 | transition: color linear 0.24s; 40 | border: none; 41 | background: transparent; 42 | 43 | &:hover { 44 | color: #4C4C4C; 45 | } 46 | } 47 | 48 | @d header { 49 | padding: var(--Modal-padding) var(--Modal-padding) 20px var(--Modal-padding); 50 | font-size: 20px; 51 | font-style: normal; 52 | font-weight: 400; 53 | text-align: center; 54 | } 55 | 56 | @d body { 57 | flex: 1 0; 58 | padding: 0 var(--Modal-padding); 59 | } 60 | 61 | @d footer { 62 | width: 100%; 63 | padding: var(--Modal-padding); 64 | text-align: right; 65 | } 66 | } 67 | 68 | 69 | @component ModalBox { 70 | & .o-Modal__body, 71 | 72 | & .o-Modal__footer { 73 | text-align: center; 74 | } 75 | 76 | @d alert { 77 | text-align: center; 78 | } 79 | 80 | @when success { 81 | & .o-ModalBox__icon { 82 | color: var(--color-primary); 83 | } 84 | } 85 | 86 | @when info { 87 | 88 | } 89 | 90 | @when danger { 91 | & .o-ModalBox__icon { 92 | color: var(--color-danger); 93 | } 94 | } 95 | 96 | @when warning { 97 | & .o-ModalBox__icon { 98 | color: var(--color-warning); 99 | } 100 | } 101 | 102 | @d confirmBtn { 103 | min-width: var(--ModalBox-btn-minWidth); 104 | } 105 | 106 | @d cancelBtn { 107 | min-width: var(--ModalBox-btn-minWidth); 108 | } 109 | 110 | @d icon { 111 | margin: 0 auto 14px auto; 112 | width: 40px; 113 | height: 40px; 114 | font-size: 40px; 115 | display: block; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /packages/theme/src/pagination.css: -------------------------------------------------------------------------------- 1 | @component Pagination { 2 | padding: 0; 3 | } 4 | 5 | @component Page { 6 | display: inline-block; 7 | margin: 0 2px; 8 | padding: 0; 9 | height: var(--Pagination-height); 10 | line-height: var(--Pagination-height); 11 | border-radius: var(--Pagination-radius); 12 | transition: var(--transition-default); 13 | 14 | &:hover { 15 | background: var(--color-gray-4); 16 | } 17 | 18 | @d link { 19 | display: block; 20 | min-width: var(--Pagination-height); 21 | padding: 0 6px; 22 | color: inherit !important; 23 | font-size: 14px; 24 | text-decoration: none; 25 | text-align: center; 26 | cursor: pointer; 27 | } 28 | 29 | @when active { 30 | color: white; 31 | font-weight: 700; 32 | background: var(--color-primary); 33 | } 34 | 35 | @when disabled { 36 | color: var(--color-gray-2); 37 | 38 | & a { 39 | cursor: not-allowed; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme/src/popup.css: -------------------------------------------------------------------------------- 1 | @component Popup { 2 | z-index: var(--zIndex-popover); 3 | position: absolute; 4 | top: 0; 5 | padding-top: 2px; 6 | 7 | @m arrow { 8 | padding-top: calc(var(--Popup-arrow-height) + 2px); 9 | } 10 | 11 | @d inner { 12 | position: relative; 13 | min-width: 100px; 14 | padding: var(--Popup-inner-padding); 15 | background: white; 16 | box-shadow: var(--shadow-popup); 17 | border-radius: var(--Popup-borderRadius); 18 | } 19 | 20 | @d title { 21 | display: block; 22 | width: 100%; 23 | } 24 | 25 | @d content { 26 | 27 | } 28 | 29 | @d arrow { 30 | position: absolute; 31 | left: 50%; 32 | top: -var(--Popup-arrow-height); 33 | width: var(--Popup-arrow-width); 34 | height: var(--Popup-arrow-height); 35 | 36 | &:before, 37 | &:after { 38 | display: block; 39 | content: ''; 40 | position: absolute; 41 | left: 1px; 42 | bottom: 0; 43 | margin-left: -50%; 44 | width: 0; 45 | height: 0; 46 | border-width: 0; 47 | border: calc(var(--Popup-arrow-width) / 2 - 1px) solid transparent; 48 | border-top-width: 0; 49 | border-bottom: var(--Popup-arrow-height) solid white; 50 | } 51 | 52 | &:before { 53 | left: 0; 54 | border: calc(var(--Popup-arrow-width) / 2) solid transparent; 55 | border-top-width: 0; 56 | border-bottom: calc(var(--Popup-arrow-height) + 1px) dashed rgba(0,0,0,0.112); 57 | } 58 | 59 | } 60 | } 61 | 62 | @component PopupList { 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 0; 68 | } 69 | -------------------------------------------------------------------------------- /packages/theme/src/previewImg.css: -------------------------------------------------------------------------------- 1 | @component PreviewImg { 2 | width: 100%; 3 | height: 100%; 4 | pointer-events: none; 5 | background: transparent; 6 | 7 | & .o-Modal__content { 8 | max-height: 100%; 9 | min-width: 0; 10 | min-height: 0; 11 | overflow: visible; 12 | background: transparent; 13 | } 14 | 15 | & .o-Modal__body { 16 | height: 100%; 17 | padding: 0; 18 | } 19 | 20 | & .o-Modal__header, 21 | & .o-Modal__footer { 22 | display: none; 23 | } 24 | 25 | @d list { 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | width: 100%; 31 | height: 100%; 32 | padding: 30px 140px; 33 | white-space: nowrap; 34 | font-size: 0; 35 | transition: all 0.24s linear; 36 | background: rgba(0, 0, 0, 0.64); 37 | } 38 | 39 | @d actionbar { 40 | pointer-events: auto; 41 | display: flex; 42 | flex-direction: row; 43 | position: absolute; 44 | top: 0; 45 | right: 0; 46 | padding: 10px; 47 | font-size: 20px; 48 | 49 | @d action { 50 | display: inline-block; 51 | width: 40px; 52 | height: 40px; 53 | text-align: center; 54 | line-height: 40px; 55 | border: none; 56 | background: transparent; 57 | color: #FFFFFF; 58 | } 59 | } 60 | 61 | @d img { 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | overflow: auto; 66 | max-width: 100%; 67 | min-height: 100px; 68 | max-height: 100%; 69 | 70 | & > img { 71 | pointer-events: auto; 72 | } 73 | } 74 | 75 | @d prev { 76 | left: 100px; 77 | top: 50%; 78 | } 79 | 80 | @d next { 81 | right: 100px; 82 | } 83 | 84 | @d prev, next { 85 | top: 50%; 86 | pointer-events: auto; 87 | position: fixed; 88 | transform: translateY(-50%); 89 | width: 50px; 90 | height: 50px; 91 | line-height: 50px; 92 | border: none; 93 | outline: none; 94 | border-radius: 4px; 95 | transition: all 0.24s linear; 96 | background: transparent; 97 | 98 | &:hover { 99 | background: rgba(255,255,255,.1); 100 | } 101 | 102 | & .iconfont { 103 | font-size: 40px; 104 | color: #FFFFFF; 105 | } 106 | } 107 | 108 | @d index { 109 | position: absolute; 110 | bottom: 0; 111 | left: 0; 112 | width: 100%; 113 | height: 30px; 114 | line-height: 30px; 115 | font-size: 20px; 116 | font-weight: bold; 117 | color: #FFFFFF; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /packages/theme/src/rahmen.css: -------------------------------------------------------------------------------- 1 | @component Rahmen { 2 | height: 100%; 3 | 4 | @d image { 5 | display: block; 6 | box-sizing: content-box; 7 | height: 0; 8 | background-color: #F7FBF9; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/theme/src/scrollBox.css: -------------------------------------------------------------------------------- 1 | @component Scroll{ 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | 7 | @d box { 8 | position: relative; 9 | box-sizing: content-box; 10 | height: 100%; 11 | padding: 0; 12 | overflow-x: hidden; 13 | overflow-y: hidden; 14 | 15 | &.is-scrollX { 16 | overflow-x: scroll; 17 | } 18 | 19 | &.is-scrollY { 20 | overflow-y: scroll; 21 | } 22 | } 23 | 24 | @d content { 25 | box-sizing: content-box; 26 | overflow-x: scroll; 27 | overflow-y: hidden; 28 | min-height: 100%; 29 | } 30 | } 31 | 32 | @component ScrollBar { 33 | position: absolute; 34 | cursor: pointer; 35 | transition: var(--transition-scrollBox); 36 | 37 | @when active { 38 | background: rgba(0,0,0,0.1) !important; 39 | border-radius: calc(var(--ScrollBox-scrollbar-width) / 2); 40 | } 41 | 42 | @d thumb { 43 | position: absolute; 44 | left: 0; 45 | top: 0; 46 | width: var(--ScrollBox-scrollbar-width); 47 | height: var(--ScrollBox-scrollbar-width); 48 | border-radius: calc(var(--ScrollBox-scrollbar-width) / 2); 49 | background: var(--ScrollBox-thumb-bg); 50 | transition: var(--transition-scrollBox); 51 | 52 | &.is-active { 53 | background: var(--ScrollBox-thumb-hover-bg); 54 | } 55 | } 56 | 57 | @m horizontal { 58 | left: 0; 59 | bottom: 0; 60 | width: calc(100% - var(--ScrollBox-scrollbar-width)); 61 | height: var(--ScrollBox-scrollbar-width); 62 | } 63 | 64 | @m vertical { 65 | top: 0; 66 | right: 0; 67 | height: calc(100% - var(--ScrollBox-scrollbar-width)); 68 | width: var(--ScrollBox-scrollbar-width); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /packages/theme/src/select.css: -------------------------------------------------------------------------------- 1 | @component Select { 2 | &:hover { 3 | & .o-Select__trigger { 4 | color: var(--color-black-3); 5 | } 6 | } 7 | 8 | & .o-Input__native { 9 | background: inherit; 10 | } 11 | 12 | & * { 13 | cursor: pointer; 14 | } 15 | 16 | @d options { 17 | margin: -var(--Popup-inner-padding); 18 | padding: 4px 0; 19 | min-height: 38px; 20 | max-height: 300px; 21 | overflow: auto; 22 | list-style: none; 23 | color: var(--fontColor-default); 24 | 25 | & li { 26 | margin: 0; 27 | padding: 0 var(--Input-padding); 28 | height: var(--Input-md-height); 29 | width: 100%; 30 | white-space: nowrap; 31 | overflow: hidden; 32 | text-overflow: ellipsis; 33 | line-height: var(--Input-md-height); 34 | transition: ease all 0.2s; 35 | cursor: pointer; 36 | 37 | &.is-selected { 38 | background: var(--color-primary); 39 | color: #fff; 40 | } 41 | 42 | &:hover:not(.is-selected) { 43 | background: var(--color-gray-4); 44 | } 45 | } 46 | } 47 | 48 | @d trigger { 49 | padding: 0; 50 | background: transparent; 51 | color: var(--Input-hoverColor); 52 | font-size: 12px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/theme/src/switchbox.css: -------------------------------------------------------------------------------- 1 | @import "../common/_var.css"; 2 | 3 | @component Switchbox { 4 | position: relative; 5 | display: inline-block; 6 | width: calc(var(--Input-switchbox-size) * 2); 7 | height: var(--Input-switchbox-size); 8 | border-radius: calc(var(--Input-switchbox-size) / 2); 9 | overflow: hidden; 10 | 11 | & ::selection { 12 | background: transparent; 13 | } 14 | 15 | @when disabled { 16 | & .o-Switchbox__status { 17 | opacity: 0.48; 18 | } 19 | } 20 | 21 | @d status { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 100%; 27 | padding: 0 var(--Input-switchbox-gap); 28 | text-align: right; 29 | line-height: var(--Input-switchbox-size); 30 | font-size: 12px; 31 | color: #FFFFFF; 32 | background: #AAAAAA; 33 | transition: ease 0.2s; 34 | cursor: pointer; 35 | 36 | &::after { 37 | display: block; 38 | content: ''; 39 | position: absolute; 40 | left: calc(var(--Input-switchbox-gap) / 2); 41 | top: calc(var(--Input-switchbox-gap) / 2); 42 | background: #fff; 43 | width: calc(var(--Input-switchbox-size) - var(--Input-switchbox-gap)); 44 | height: calc(var(--Input-switchbox-size) - var(--Input-switchbox-gap)); 45 | border-radius: 50%; 46 | transition: ease 0.2s; 47 | } 48 | } 49 | 50 | @d native { 51 | &:checked { 52 | & + span.o-Switchbox__status { 53 | text-align: left; 54 | background: var(--color-primary); 55 | 56 | &::after { 57 | transform: translateX(var(--Input-switchbox-size)); 58 | will-change: transform; 59 | } 60 | } 61 | } 62 | } 63 | 64 | @d slot { 65 | display: inline-block; 66 | margin-left: 0.5rem; 67 | vertical-align: middle; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/theme/src/timePicker.css: -------------------------------------------------------------------------------- 1 | @component InputTime { 2 | text-align: center; 3 | 4 | & .o-TimePicker { 5 | display: inline-block; 6 | } 7 | } 8 | 9 | @component TimePicker { 10 | width: calc(var(--TimeSpinner-width) * 3); 11 | height: calc(var(--TimeSpinnerItem-height) * 7); 12 | text-align: center; 13 | overflow: hidden; 14 | font-size: 0; 15 | color: var(--fontColor-default); 16 | 17 | 18 | &:after { 19 | width: 0; 20 | height: 100%; 21 | display: inline-block; 22 | vertical-align: middle; 23 | content: ''; 24 | } 25 | 26 | @d currentValue { 27 | position: relative; 28 | display: inline-block; 29 | text-align: center; 30 | vertical-align: middle; 31 | width: var(--TimeSpinner-width); 32 | height: 100%; 33 | } 34 | 35 | @d spinnerList { 36 | display: inline-block; 37 | overflow: auto; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | margin-top: 70px; 42 | width: 100%; 43 | transition: top linear 0.2s; 44 | } 45 | 46 | @d spinnerItem { 47 | display: block; 48 | height: 30px; 49 | line-height: 30px; 50 | text-align: center; 51 | cursor: pointer; 52 | 53 | &:hover:not(.is-selected) { 54 | color: var(--color-black-4); 55 | font-weight: 700; 56 | } 57 | } 58 | 59 | & .is-selected { 60 | color: var(--color-primary); 61 | font-weight: 700; 62 | } 63 | } 64 | 65 | 66 | @component TimeSpinner { 67 | height: 100%; 68 | width: var(--TimeSpinner-width); 69 | list-style: none; 70 | margin: 0; 71 | padding: 0; 72 | overflow-y: hidden; 73 | overflow-x: hidden; 74 | 75 | &:hover { 76 | overflow-y: auto; 77 | } 78 | 79 | &:before, 80 | &:after { 81 | display: block; 82 | content: ''; 83 | height: calc(var(--TimeSpinnerItem-height) * 3); 84 | } 85 | 86 | @d Item { 87 | display: block; 88 | margin: 0; 89 | padding: 0; 90 | width: var(--TimeSpinner-width); 91 | height: var(--TimeSpinnerItem-height); 92 | line-height: var(--TimeSpinnerItem-height); 93 | text-align: center; 94 | font-size: 16px; 95 | cursor: pointer; 96 | transition: all ease 0.2s; 97 | 98 | &:hover:not(.is-selected) { 99 | color: var(--color-black-4); 100 | font-weight: 700; 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /packages/theme/src/upload.css: -------------------------------------------------------------------------------- 1 | @component Upload { 2 | @d input { 3 | display: none; 4 | } 5 | 6 | @d picker { 7 | display: inline-block; 8 | } 9 | } 10 | 11 | @component UploadFiles { 12 | list-style: none; 13 | padding: 0; 14 | 15 | @d item { 16 | margin: 0.6rem 0 0 0; 17 | border-radius: 3px; 18 | 19 | &:hover { 20 | background: var(--color-gray-6); 21 | } 22 | } 23 | @d info { 24 | overflow: hidden; 25 | position: relative; 26 | padding-right: 56px; 27 | white-space: nowrap; 28 | text-overflow: ellipsis; 29 | font-size: 14px; 30 | color: var(--color-black-4); 31 | } 32 | @d progress { 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/timePicker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from './src' 2 | 3 | TimePicker.install = function (Vue) { 4 | Vue.component(TimePicker.name, TimePicker) 5 | } 6 | 7 | export default TimePicker 8 | -------------------------------------------------------------------------------- /packages/timePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/timepicker", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "dependencies": { 7 | "@oasis-ui/input": "^0.1.2", 8 | "@oasis-ui/modal": "^0.1.2" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "oasis", 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/timePicker/src/spinner.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 81 | -------------------------------------------------------------------------------- /packages/upload/index.js: -------------------------------------------------------------------------------- 1 | import Upload from './src/index' 2 | import UploadFile from './src/upload' 3 | import InputImage from './src/inputImage' 4 | 5 | const components = [ 6 | Upload, 7 | UploadFile, 8 | InputImage 9 | ] 10 | 11 | export default { 12 | install (Vue) { 13 | components.map(component => { 14 | Vue.component(component.name, component) 15 | }) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/upload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oasis-ui/upload", 3 | "version": "0.1.2", 4 | "description": "", 5 | "main": "lib/index.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "oasis", 10 | "license": "MIT", 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "dependencies": { 15 | "@oasis-ui/progress": "^0.1.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/upload/src/fileList.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 42 | -------------------------------------------------------------------------------- /packages/upload/src/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 94 | -------------------------------------------------------------------------------- /packages/upload/src/inputImage.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /packages/upload/src/uploader.js: -------------------------------------------------------------------------------- 1 | export default function uploader (options) { 2 | const { 3 | url, 4 | filename, 5 | file 6 | } = options 7 | 8 | const xhr = new XMLHttpRequest() 9 | const data = new FormData() 10 | const headers = options.headers || {} 11 | 12 | data.append(filename, file) 13 | 14 | xhr.open('POST', url, true) 15 | 16 | xhr.upload.onprogress = function (e) { 17 | options.onProgress(e) 18 | } 19 | 20 | xhr.onload = function (e) { 21 | if (xhr.status < 200 || xhr.status >= 300) { 22 | return options.onError(e) 23 | } 24 | return options.onSuccess(e) 25 | } 26 | 27 | xhr.onerror = function (err) { 28 | options.onError(err) 29 | } 30 | 31 | xhr.ontimeout = function (e) { 32 | options.onTimeout(e) 33 | } 34 | 35 | for (let key in headers) { 36 | headers.hasOwnProperty(key) && headers[key] !== null && xhr.setRequestHeader(key, headers[key]) 37 | } 38 | 39 | xhr.send(data) 40 | 41 | return xhr 42 | } 43 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import')({ 4 | plugins: [ 5 | require('stylelint')({}) 6 | ] 7 | }), 8 | require('postcss-nested'), 9 | require('postcss-for'), 10 | require('saladcss-bem')({ 11 | defaultNamespace: 'o', 12 | style: 'suit', 13 | separators: { 14 | descendent: '__', 15 | modifier: '--' 16 | }, 17 | shortcuts: { 18 | utility: 'u', 19 | component: 'c', 20 | descendent: 'd', 21 | modifier: 'm', 22 | state: 's' 23 | } 24 | }), 25 | require('postcss-cssnext')({ 26 | browsers: ['ie > 8', 'last 2 versions'], 27 | cascade: false 28 | }), 29 | require('postcss-reporter')({ clearReportedMessages: true }), 30 | process.env.NODE_ENV === 'prod' ? require('cssnano')( 31 | { 32 | discardComments: { 33 | removeAll: true 34 | }, 35 | autoprefixer: false 36 | } 37 | ) : null 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /test/helper.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { wrap } from 'module'; 3 | import Oasis from '@/oasis/index.js' 4 | 5 | Vue.use(Oasis) 6 | Vue.component('transition', { 7 | template: '
' 8 | }) 9 | 10 | export function createInstance (co) { 11 | return new Vue(co).$mount(createEl()) 12 | } 13 | 14 | export function destroyInstance (wrapper) { 15 | document.body.removeChild(wrapper.$el) 16 | wrapper.$destroy() 17 | } 18 | 19 | export function createEl () { 20 | const $el = document.createElement('div') 21 | document.body.appendChild($el) 22 | return $el 23 | } 24 | 25 | export function querySelector (scheme, root = document.body) { 26 | return root.querySelectorAll(scheme) 27 | } 28 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | require('jsdom-global')() 2 | global.expect = require('expect') 3 | 4 | -------------------------------------------------------------------------------- /test/unit/Avatar.spec.js: -------------------------------------------------------------------------------- 1 | import Avatar from '@/avatar' 2 | import Rahmen from '@/rahmen' 3 | import { 4 | mount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | localVue.use(Rahmen) 10 | 11 | describe('Avatar', () => { 12 | it('render', () => { 13 | const wrapper = mount(Avatar) 14 | expect(wrapper.isVueInstance()).toBe(true) 15 | expect(wrapper.classes()).toContain('o-Avatar') 16 | }) 17 | 18 | it('src', () => { 19 | const wrapper = mount(Avatar, { 20 | propsData: { 21 | src: 'src' 22 | }, 23 | localVue 24 | }) 25 | expect(wrapper.find('.o-Rahmen').exists()).toBeTruthy() 26 | }) 27 | 28 | it('name', () => { 29 | const wrapper = mount(Avatar, { 30 | propsData: { 31 | name: 'name' 32 | }, 33 | }) 34 | expect(wrapper.vm.name).toEqual('name') 35 | }) 36 | 37 | it('invalid name', () => { 38 | const wrapper = mount(Avatar, { 39 | propsData: { 40 | name: null, 41 | defaultName: 'default' 42 | }, 43 | }) 44 | expect(wrapper.find('.o-Avatar__name').text()).toEqual('DE') 45 | }) 46 | }) 47 | -------------------------------------------------------------------------------- /test/unit/Btn.spec.js: -------------------------------------------------------------------------------- 1 | import Button from '@/button/src' 2 | import { shallowMount } from '@vue/test-utils' 3 | 4 | describe('Button', () => { 5 | it('render', () => { 6 | const wrapper = shallowMount(Button) 7 | expect(wrapper.isVueInstance()).toBeTruthy() 8 | expect(wrapper.classes()).toContain('o-Btn--default') 9 | }) 10 | 11 | it('disabled', () => { 12 | const wrapper = shallowMount(Button, { 13 | propsData: { 14 | disabled: true 15 | } 16 | }) 17 | expect(wrapper.classes()).toContain('is-disabled') 18 | }) 19 | 20 | it('loading', () => { 21 | const wrapper = shallowMount(Button, { 22 | propsData: { 23 | loading: true 24 | } 25 | }) 26 | expect(wrapper.classes()).toContain('is-loading') 27 | }) 28 | 29 | it('round', () => { 30 | const wrapper = shallowMount(Button, { 31 | propsData: { 32 | round: true 33 | } 34 | }) 35 | expect(wrapper.classes()).toContain('o-Btn--round') 36 | }) 37 | 38 | it('block', () => { 39 | const wrapper = shallowMount(Button, { 40 | propsData: { 41 | block: true 42 | } 43 | }) 44 | expect(wrapper.classes()).toContain('o-Btn--block') 45 | }) 46 | 47 | it('gradient', () => { 48 | const wrapper = shallowMount(Button, { 49 | propsData: { 50 | gradient: true 51 | } 52 | }) 53 | expect(wrapper.classes()).toContain('o-Btn--gradient') 54 | }) 55 | 56 | it('ghost', () => { 57 | const wrapper = shallowMount(Button, { 58 | propsData: { 59 | ghost: true 60 | } 61 | }) 62 | expect(wrapper.classes()).toContain('o-Btn--ghost') 63 | }) 64 | }) 65 | -------------------------------------------------------------------------------- /test/unit/Candidate.spec.js: -------------------------------------------------------------------------------- 1 | import Candidate from '@/candidate/src' 2 | import Popup from '@/popup/src' 3 | import { 4 | mount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | localVue.use(Popup) 10 | 11 | describe('Candidate', () => { 12 | it('render', () => { 13 | const wrapper = mount(Candidate, { 14 | localVue 15 | }) 16 | expect(wrapper.isVueInstance()).toBeTruthy() 17 | expect(wrapper.classes()).toContain('o-Input') 18 | }) 19 | 20 | it('disabled', () => { 21 | const wrapper = mount(Candidate, { 22 | localVue, 23 | propsData: { 24 | disabled: true 25 | } 26 | }) 27 | expect(wrapper.classes()).toContain('is-disabled') 28 | }) 29 | 30 | it('select option without key => value', () => { 31 | const wrapper = mount(Candidate, { 32 | localVue, 33 | propsData: { 34 | options: ['Alice', 'Bob', 'Eve'] 35 | } 36 | }) 37 | wrapper.find('.o-Input .o-Input__trigger').trigger('click') 38 | expect(wrapper.find('.o-Popup__inner').isVisible()).toBe(true) 39 | wrapper.findAll('.o-Input__options li').at(2).element.click() 40 | expect(wrapper.emitted().input).toEqual([['Eve']]) 41 | expect(wrapper.emitted().change).toEqual([['Eve']]) 42 | }) 43 | }) 44 | -------------------------------------------------------------------------------- /test/unit/Cascader.spec.js: -------------------------------------------------------------------------------- 1 | import Cascader from '@/cascader' 2 | import Popup from '@/popup/src' 3 | import { 4 | mount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | localVue.use(Popup) 10 | 11 | describe('Cascader', () => { 12 | it('render', () => { 13 | const wrapper = mount(Cascader, { 14 | localVue, 15 | propsData: { 16 | value: [] 17 | } 18 | }) 19 | expect(wrapper.isVueInstance()).toBeTruthy() 20 | expect(wrapper.classes()).toContain('o-Input') 21 | expect(wrapper.find('.o-Popup.o-Cascader__popup').exists()).toBeTruthy() 22 | wrapper.destroy() 23 | }) 24 | 25 | it('disabled', () => { 26 | const wrapper = mount(Cascader, { 27 | localVue, 28 | propsData: { 29 | value: [], 30 | disabled: true 31 | } 32 | }) 33 | expect(wrapper.classes()).toContain('is-disabled') 34 | wrapper.destroy() 35 | }) 36 | 37 | it('select options', done => { 38 | const wrapper = mount(Cascader, { 39 | localVue, 40 | propsData: { 41 | value: [1, 12], 42 | options: [ 43 | { 44 | label: 'Beijing', 45 | value: 1, 46 | children: [ 47 | { 48 | label: 'Shijingshan', 49 | value: 11 50 | }, 51 | { 52 | label: 'Fengtai', 53 | value: 12 54 | }, 55 | ] 56 | }, 57 | { 58 | label: 'Shanghai', 59 | value: 2, 60 | children: [ 61 | { 62 | label: 'Yangpu', 63 | value: 21 64 | }, 65 | { 66 | label: 'Xujiahui', 67 | value: 22 68 | }, 69 | ] 70 | }, 71 | { 72 | label: 'Shenzhen', 73 | value: 3 74 | } 75 | ] 76 | } 77 | }) 78 | wrapper.find('.o-Input input').element.focus() 79 | wrapper.find('.o-Input').trigger('click') 80 | expect(wrapper.find('.o-Popup__inner').isVisible()).toBe(true) 81 | setTimeout(() => { 82 | wrapper.findAll('.o-CascaderMenu__item').at(3).element.click() 83 | expect(wrapper.emitted().input).toEqual([[[1, 11]]]) 84 | expect(wrapper.emitted().change).toEqual([[[1, 11]]]) 85 | wrapper.destroy() 86 | done() 87 | }, 10) 88 | }) 89 | }) 90 | -------------------------------------------------------------------------------- /test/unit/DatePicker.spec.js: -------------------------------------------------------------------------------- 1 | import DatePicker from '@/datePicker' 2 | import { 3 | querySelector as $, 4 | createInstance, 5 | destroyInstance 6 | } from '../helper' 7 | 8 | describe('DatePicker', () => { 9 | it('render', () => { 10 | const wrapper = renderDatePicker() 11 | expect(wrapper._isVue).toBeTruthy() 12 | destroyInstance(wrapper) 13 | }) 14 | 15 | it('focus', () => { 16 | 17 | const wrapper = renderDatePicker({ 18 | data: { 19 | time: 0, 20 | format: 'x' 21 | } 22 | }) 23 | const $input = $('input', wrapper.$el)[0] 24 | 25 | $input.focus() 26 | 27 | setTimeout(() => { 28 | const $selected = $('.o-DayPicker__day.is-selected', wrapper.$el)[0] 29 | expect($('.o-DatePicker', wrapper.$el)[0]).toBeDefined() 30 | expect($('label', $selected)[0].innerHTML).toEqual('1') 31 | destroyInstance(wrapper) 32 | }, 10) 33 | 34 | }) 35 | 36 | it('input', () => { 37 | 38 | const wrapper = renderDatePicker({ 39 | data: { 40 | time: 0, 41 | format: 'YYYY-MM-DD', 42 | } 43 | }) 44 | const $input = $('input', wrapper.$el)[0] 45 | 46 | $input.focus() 47 | 48 | setTimeout(() => { 49 | const $selected = $('.o-DayPicker__day.is-selected', wrapper.$el)[0] 50 | 51 | expect($('.o-DatePicker', wrapper.$el)[0]).toBeDefined() 52 | expect($('label', $selected)[0].innerHTML).toEqual('1') 53 | $selected.nextElementSibling.click() 54 | 55 | setTimeout(() => { 56 | const $selected = $('.o-DayPicker__day.is-selected', wrapper.$el)[0] 57 | expect($('label', $selected)[0].innerHTML).toEqual('2') 58 | 59 | $('.o-Modal__footer .o-Btn--primary', wrapper.$el)[1].click() 60 | expect(wrapper.time).toEqual('0000-01-02') 61 | destroyInstance(wrapper) 62 | }, 10) 63 | }, 10) 64 | 65 | 66 | }) 67 | 68 | }) 69 | 70 | function renderDatePicker (option = {}) { 71 | return createInstance({ 72 | data () { 73 | return { 74 | time: '2019/11/11', 75 | format: 'YYYY/MM/DD', 76 | ...option.data 77 | } 78 | }, 79 | render () { 80 | return ( 81 | 85 | ) 86 | } 87 | }) 88 | } 89 | -------------------------------------------------------------------------------- /test/unit/DateRangePicker.spec.js: -------------------------------------------------------------------------------- 1 | import DateRangePicker from '@/dateRangePicker' 2 | import { 3 | querySelector as $, 4 | createInstance, 5 | destroyInstance 6 | } from '../helper' 7 | 8 | describe('DateRangePicker', () => { 9 | it('render', () => { 10 | const wrapper = renderDateRangePicker() 11 | expect(wrapper._isVue).toBeTruthy() 12 | destroyInstance(wrapper) 13 | }) 14 | 15 | it('input', () => { 16 | 17 | const wrapper = renderDateRangePicker({ 18 | date: { 19 | time: ['2018-12-12', '2018-12-22'], 20 | startFormat: 'YYYY/MM/DD 00:00', 21 | endFormat: 'YYYY/MM/DD 23:59' 22 | } 23 | }) 24 | const $input = $('input', wrapper.$el)[0] 25 | 26 | $input.focus() 27 | 28 | setTimeout(() => { 29 | const $selected = $('.o-DayPicker__day.is-selected', wrapper.$el) 30 | 31 | $selected[0].nextElementSibling.click() 32 | $selected[1].nextElementSibling.click() 33 | 34 | setTimeout(() => { 35 | $('.o-Modal__footer .o-Btn--primary', wrapper.$el)[1].click() 36 | setTimeout(() => { 37 | expect(wrapper.time).toEqual(['2018/12/13 00:00', '2018/12/23 23:59']) 38 | destroyInstance(wrapper) 39 | }, 10) 40 | }, 10) 41 | }, 10) 42 | 43 | 44 | }) 45 | 46 | it('Select range', () => { 47 | 48 | const wrapper = renderDateRangePicker({ 49 | date: { 50 | time: ['2018-12-12', '2018-12-22'], 51 | startFormat: 'YYYY/MM/DD 00:00', 52 | endFormat: 'YYYY/MM/DD 23:59' 53 | } 54 | }) 55 | const $input = $('input', wrapper.$el)[0] 56 | 57 | $input.focus() 58 | 59 | setTimeout(() => { 60 | const $selected = $('.o-DayPicker__day.is-selected', wrapper.$el) 61 | 62 | $selected[0].nextElementSibling.click() 63 | 64 | setTimeout(() => { 65 | expect($(`[data-date="${$selected[0].getAttribute('data-date')}"]`, wrapper.$el)[1].classList.contains('is-disabled')).toBeTruthy() 66 | destroyInstance(wrapper) 67 | }, 10) 68 | }, 10) 69 | 70 | 71 | }) 72 | }) 73 | 74 | function renderDateRangePicker (option = {}) { 75 | return createInstance({ 76 | data () { 77 | return { 78 | time: ['2018-12-12', '2018-12-22'], 79 | startFormat: 'YYYY/MM/DD 00:00', 80 | endFormat: 'YYYY/MM/DD 23:59', 81 | ...option.data 82 | } 83 | }, 84 | render () { 85 | return ( 86 | 91 | ) 92 | } 93 | }) 94 | } 95 | -------------------------------------------------------------------------------- /test/unit/Input.spec.js: -------------------------------------------------------------------------------- 1 | import Input from '@/input/src' 2 | import { 3 | mount, 4 | shallowMount 5 | } from '@vue/test-utils' 6 | 7 | describe('Input', () => { 8 | it('render', () => { 9 | const wrapper = shallowMount(Input) 10 | expect(wrapper.isVueInstance()).toBeTruthy() 11 | expect(wrapper.classes()).toContain('o-Input') 12 | expect(wrapper.classes()).toContain('o-Input--lg') 13 | }) 14 | 15 | it('type', () => { 16 | const passwordInputWrapper = shallowMount(Input, { 17 | propsData: { 18 | type: 'password' 19 | } 20 | }).find('.o-Input__native') 21 | 22 | const textareaInputWrapper = shallowMount(Input, { 23 | propsData: { 24 | type: 'textarea', 25 | rows: 10, 26 | cols: 20 27 | } 28 | }).find('.o-Input__native') 29 | 30 | expect(passwordInputWrapper.attributes().type).toEqual('password') 31 | expect(textareaInputWrapper.attributes().type).toEqual('textarea') 32 | expect(textareaInputWrapper.attributes().rows).toEqual('10') 33 | expect(textareaInputWrapper.attributes().cols).toEqual('20') 34 | }) 35 | 36 | it('disabled', () => { 37 | const wrapper = shallowMount(Input, { 38 | propsData: { 39 | disabled: true 40 | } 41 | }) 42 | expect(wrapper.classes()).toContain('is-disabled') 43 | expect(wrapper.find('input').attributes().disabled).toEqual('disabled') 44 | }) 45 | 46 | it('readonly', () => { 47 | const wrapper = shallowMount(Input, { 48 | propsData: { 49 | readonly: true 50 | } 51 | }) 52 | expect(wrapper.classes()).toContain('is-readonly') 53 | expect(wrapper.find('input').attributes().readonly).toEqual('readonly') 54 | }) 55 | 56 | it('prefix & suffix', () => { 57 | const wrapper = shallowMount(Input, { 58 | slots: { 59 | prefix: ['$'], 60 | suffix: ['px'] 61 | } 62 | }) 63 | 64 | expect(wrapper.find('.o-Input__prefix').text()).toEqual('$') 65 | expect(wrapper.find('.o-Input__suffix').text()).toEqual('px') 66 | }) 67 | 68 | it('addonBefore addonAfter', () => { 69 | const wrapper = shallowMount(Input, { 70 | slots: { 71 | addonBefore: [''], 72 | addonAfter: [''] 73 | } 74 | }).findAll('.o-Input__addonWrapper') 75 | 76 | expect(wrapper.at(0).find('button').html()).toEqual('') 77 | expect(wrapper.at(1).find('button').html()).toEqual('') 78 | }) 79 | }) 80 | -------------------------------------------------------------------------------- /test/unit/InputNumber.spec.js: -------------------------------------------------------------------------------- 1 | import InputNumber from '@/inputNumber/src' 2 | import { 3 | mount 4 | } from '@vue/test-utils' 5 | 6 | describe('InputNumber', () => { 7 | it('render', () => { 8 | const wrapper = mount(InputNumber) 9 | expect(wrapper.isVueInstance()).toBeTruthy() 10 | expect(wrapper.classes()).toContain('o-InputNumber') 11 | }) 12 | 13 | it('disabled', () => { 14 | const wrapper = mount(InputNumber, { 15 | propsData: { 16 | disabled: true 17 | } 18 | }) 19 | expect(wrapper.classes()).toContain('is-disabled') 20 | }) 21 | 22 | it('input', () => { 23 | const wrapper = mount(InputNumber, { 24 | propsData: { 25 | value: 2, 26 | max: 3, 27 | min: 1 28 | } 29 | }) 30 | const input = wrapper.find('input') 31 | input.setValue('4') 32 | input.trigger('change') 33 | input.setValue('5') 34 | input.trigger('change') 35 | expect(wrapper.emitted().input).toEqual([[3]]) 36 | expect(wrapper.emitted().change).toEqual([[3]]) 37 | // Fix: #8 38 | expect(input.element.value).toEqual('3') 39 | }) 40 | 41 | it('increase and decrease', () => { 42 | const wrapper = mount(InputNumber, { 43 | propsData: { 44 | value: 2, 45 | step: 0.1 46 | } 47 | }) 48 | const increaseBtn = wrapper.find('.o-InputNumber__add') 49 | const decreaseBtn = wrapper.find('.o-InputNumber__sub') 50 | increaseBtn.trigger('click') 51 | decreaseBtn.trigger('click') 52 | expect(wrapper.emitted().input).toEqual([[2.1], [2]]) 53 | }) 54 | 55 | it('max', () => { 56 | const wrapper = mount(InputNumber, { 57 | propsData: { 58 | value: 2, 59 | step: 1, 60 | max: 3 61 | } 62 | }) 63 | const increaseBtn = wrapper.find('.o-InputNumber__add') 64 | increaseBtn.trigger('click') 65 | // Fix: #8 66 | increaseBtn.trigger('click') 67 | expect(wrapper.emitted().input).toEqual([[3]]) 68 | }) 69 | }) 70 | -------------------------------------------------------------------------------- /test/unit/Loading.spec.js: -------------------------------------------------------------------------------- 1 | import Loading from '@/loading' 2 | import { 3 | createInstance, 4 | destroyInstance 5 | } from '../helper' 6 | import { 7 | createLocalVue 8 | } from '@vue/test-utils' 9 | 10 | const localVue = createLocalVue() 11 | localVue.use(Loading) 12 | 13 | describe('Loading', () => { 14 | it('render', () => { 15 | const wrapper = renderLoading(false) 16 | expect(wrapper._isVue).toBeTruthy() 17 | destroyInstance(wrapper) 18 | }) 19 | 20 | it('show', () => { 21 | const wrapper = renderLoading(true) 22 | wrapper.$loading(true) 23 | expect(document.body.querySelector('.o-Loading.is-global')).toBeDefined() 24 | }) 25 | }) 26 | 27 | 28 | function renderLoading (global = false) { 29 | return createInstance({ 30 | data () { 31 | return { 32 | global 33 | } 34 | }, 35 | render () { 36 | return ( 37 | 38 | ) 39 | } 40 | }) 41 | } 42 | -------------------------------------------------------------------------------- /test/unit/Message.spec.js: -------------------------------------------------------------------------------- 1 | import MessageComponent from '@/message/src' 2 | import Message from '@/message' 3 | import { 4 | shallowMount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | localVue.use(Message) 10 | 11 | describe('Message', () => { 12 | it('render', () => { 13 | const wrapper = shallowMount(MessageComponent) 14 | expect(wrapper.isVueInstance()).toBe(true) 15 | expect(wrapper.classes()).toContain('o-Message') 16 | }) 17 | 18 | it('text', () => { 19 | localVue.prototype.$message({ 20 | text: 'message', 21 | description: 'description' 22 | }) 23 | 24 | expect(document.body.querySelector('.o-MessageBox .o-Message')).toBeDefined() 25 | expect(document.body.querySelector('.o-MessageBox .o-Message__text').innerHTML).toEqual('message') 26 | expect(document.body.querySelector('.o-MessageBox .o-Message__desc').innerHTML).toEqual('description') 27 | }) 28 | 29 | // TODO 30 | // it('duration', (done) => { 31 | // localVue.prototype.$message({ 32 | // text: 'message', 33 | // duration: 0 34 | // }) 35 | // setTimeout(() => { 36 | // expect(document.body.querySelector('.o-MessageBox .o-Message')).toBe(1) 37 | // done() 38 | // }, 100) 39 | // }) 40 | 41 | it('type', () => { 42 | localVue.prototype.$message({ 43 | type: 'danger', 44 | text: 'message', 45 | }) 46 | expect(document.body.querySelector('.o-Message__content.o-Message--danger')).toBeDefined() 47 | }) 48 | 49 | it('close', () => { 50 | const $instance = localVue.prototype.$message({ 51 | type: 'danger', 52 | text: 'message', 53 | }) 54 | $instance.close(localVue.prototype.$messageQueue) 55 | expect(document.body.querySelector('.o-Message')).toBeDefined() 56 | }) 57 | }) 58 | -------------------------------------------------------------------------------- /test/unit/PreviewImg.spec.js: -------------------------------------------------------------------------------- 1 | import PreviewImg from '@/previewImg/index.js' 2 | import { 3 | mount, 4 | shallowMount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | 10 | localVue.use(PreviewImg) 11 | 12 | describe('PreviewImg', () => { 13 | it('render', () => { 14 | const wrapper = shallowMount(PreviewImg) 15 | 16 | expect(wrapper.isVueInstance()).toBe(true) 17 | expect(wrapper.find('.o-PreviewImg__list').exists()).toBeTruthy() 18 | }) 19 | 20 | it('display image', done => { 21 | const images = [ 22 | 'https://camo.githubusercontent.com/87882cd6c816edb053cfb6e3c7f0d8ab0af4aae3/68747470733a2f2f63646e2e7261776769742e636f6d2f6a6f653232332f4f617369732f6465762f69636f6e2f69636f6e2e7376673f73616e6974697a653d74727565', 23 | 'https://cloud.githubusercontent.com/assets/848515/21667899/c46e1fba-d337-11e6-9f9b-62a28deb6d32.png' 24 | ] 25 | const instance = localVue.prototype.$previewImg({ 26 | current: 1, 27 | images 28 | }) 29 | 30 | setTimeout(() => { 31 | const el = document.body.querySelector('.o-PreviewImg') 32 | 33 | expect(el).toBeDefined() 34 | expect(el.querySelector('.o-PreviewImg__img img').src).toEqual(images[1]) 35 | document.body.removeChild(instance.$el) 36 | done() 37 | }, 10) 38 | }) 39 | 40 | it('change image', done => { 41 | const images = [ 42 | 'https://camo.githubusercontent.com/87882cd6c816edb053cfb6e3c7f0d8ab0af4aae3/68747470733a2f2f63646e2e7261776769742e636f6d2f6a6f653232332f4f617369732f6465762f69636f6e2f69636f6e2e7376673f73616e6974697a653d74727565', 43 | 'https://cloud.githubusercontent.com/assets/848515/21667899/c46e1fba-d337-11e6-9f9b-62a28deb6d32.png' 44 | ] 45 | const instance = localVue.prototype.$previewImg({ 46 | current: 1, 47 | images 48 | }) 49 | 50 | setTimeout(() => { 51 | const el = document.body.querySelector('.o-PreviewImg') 52 | 53 | el.querySelector('.o-PreviewImg__next').click() 54 | setTimeout(() => { 55 | expect(el.querySelector('.o-PreviewImg__img img').src).toEqual(images[0]) 56 | document.body.removeChild(instance.$el) 57 | done() 58 | }, 10) 59 | }, 10) 60 | }) 61 | }) 62 | -------------------------------------------------------------------------------- /test/unit/Radio.spec.js: -------------------------------------------------------------------------------- 1 | import Radio from '@/radio' 2 | import { 3 | mount 4 | } from '@vue/test-utils' 5 | import { 6 | createInstance, 7 | destroyInstance 8 | } from '../helper' 9 | 10 | describe('Radio', () => { 11 | it('render', () => { 12 | const wrapper = mount(Radio) 13 | expect(wrapper.isVueInstance()).toBe(true) 14 | expect(wrapper.classes()).toContain('o-Radio') 15 | }) 16 | 17 | it('disabled', () => { 18 | const wrapper = mount(Radio, { 19 | propsData: { 20 | disabled: true 21 | } 22 | }) 23 | expect(wrapper.classes()).toContain('is-disabled') 24 | }) 25 | 26 | it('change event', (done) => { 27 | const wrapper = createInstance({ 28 | render () { 29 | return () 34 | }, 35 | data () { 36 | return { 37 | label: 1, 38 | value: '', 39 | changed: false 40 | } 41 | }, 42 | methods: { 43 | onChange () { 44 | this.changed = true 45 | } 46 | } 47 | }) 48 | expect(wrapper.value).toEqual('') 49 | wrapper.$el.click() 50 | setTimeout(() => { 51 | expect(wrapper.value).toEqual(1) 52 | expect(wrapper.changed).toBeTruthy() 53 | destroyInstance(wrapper) 54 | done() 55 | }) 56 | }) 57 | }) 58 | -------------------------------------------------------------------------------- /test/unit/RadioBtn.spec.js: -------------------------------------------------------------------------------- 1 | import RadioBtn from '@/radioBtn' 2 | import { 3 | mount 4 | } from '@vue/test-utils' 5 | import { 6 | createInstance, 7 | destroyInstance, 8 | } from '../helper' 9 | 10 | describe('RadioBtn', () => { 11 | it('render', () => { 12 | const wrapper = mount(RadioBtn) 13 | expect(wrapper.isVueInstance()).toBe(true) 14 | expect(wrapper.classes()).toContain('o-RadioBtn') 15 | }) 16 | 17 | it('disabled', () => { 18 | const wrapper = mount(RadioBtn, { 19 | propsData: { 20 | disabled: true 21 | } 22 | }) 23 | expect(wrapper.classes()).toContain('is-disabled') 24 | }) 25 | 26 | it('change event', (done) => { 27 | const wrapper = createInstance({ 28 | render () { 29 | return () 34 | }, 35 | data () { 36 | return { 37 | label: 1, 38 | value: '', 39 | changed: false 40 | } 41 | }, 42 | methods: { 43 | onChange () { 44 | this.changed = true 45 | } 46 | } 47 | }) 48 | expect(wrapper.value).toEqual('') 49 | wrapper.$el.click() 50 | setTimeout(() => { 51 | expect(wrapper.value).toEqual(1) 52 | expect(wrapper.changed).toBeTruthy() 53 | destroyInstance(wrapper) 54 | done() 55 | }) 56 | }) 57 | }) 58 | -------------------------------------------------------------------------------- /test/unit/RadioGroup.spec.js: -------------------------------------------------------------------------------- 1 | import Radio from '@/radio' 2 | import RadioBtn from '@/radioBtn' 3 | import RadioGroup from '@/radioGroup' 4 | import { 5 | mount 6 | } from '@vue/test-utils' 7 | import { 8 | createInstance, 9 | destroyInstance 10 | } from '../helper' 11 | 12 | describe ('RadioGroup', () => { 13 | it('render', () => { 14 | const wrapper = mount(RadioGroup) 15 | expect(wrapper.isVueInstance()).toBe(true) 16 | expect(wrapper.classes()).toContain('o-RadioGroup') 17 | }) 18 | 19 | it('disabled', () => { 20 | const wrapper = createInstance({ 21 | data () { 22 | return { 23 | value: '' 24 | } 25 | }, 26 | render () { 27 | return ( 31 | 32 | 33 | 34 | ) 35 | } 36 | }) 37 | expect(wrapper.$el.querySelectorAll('.o-Radio.is-disabled').length).toEqual(3) 38 | destroyInstance(wrapper) 39 | }) 40 | 41 | it('change event', (done) => { 42 | const wrapper = createInstance({ 43 | render () { 44 | return ( 49 | 50 | 51 | 52 | ) 53 | }, 54 | data () { 55 | return { 56 | value: '', 57 | changed: false 58 | } 59 | }, 60 | methods: { 61 | onChange () { 62 | this.changed = true 63 | } 64 | } 65 | }) 66 | expect(wrapper.value).toEqual('') 67 | wrapper.$el.querySelectorAll('.o-Radio')[0].click() 68 | setTimeout(() => { 69 | expect(wrapper.value).toEqual(1) 70 | expect(wrapper.changed).toBeTruthy() 71 | destroyInstance(wrapper) 72 | done() 73 | }) 74 | }) 75 | }) 76 | -------------------------------------------------------------------------------- /test/unit/Rahmen.spec.js: -------------------------------------------------------------------------------- 1 | import Rahmen from '@/rahmen/src' 2 | import { 3 | shallowMount 4 | } from '@vue/test-utils' 5 | 6 | describe('Rahmen', () => { 7 | it('render', () => { 8 | const wrapper = shallowMount(Rahmen) 9 | expect(wrapper.isVueInstance()).toBeTruthy() 10 | expect(wrapper.classes()).toContain('o-Rahmen') 11 | }) 12 | 13 | it('src', () => { 14 | const wrapper = shallowMount(Rahmen, { 15 | propsData: { 16 | src: 'src' 17 | } 18 | }) 19 | 20 | // TODO: 21 | // expect(wrapper.find('.o-Rahmen__image').attributes().style).toBe('padding-top: 100%; background: url("src") center center / 100% 100% no-repeat;') 22 | 23 | expect(wrapper.vm.imageStyle).toEqual({ 24 | paddingTop: '100%', 25 | background: 'center center / contain no-repeat url("src")' 26 | }) 27 | }) 28 | 29 | it('ratio', () => { 30 | const wrapper = shallowMount(Rahmen, { 31 | propsData: { 32 | src: 'src', 33 | ratio: 0.5 34 | } 35 | }) 36 | 37 | expect(wrapper.vm.imageStyle).toEqual({ 38 | paddingTop: '50%', 39 | background: 'center center / contain no-repeat url("src")' 40 | }) 41 | }) 42 | 43 | it('type', () => { 44 | const wrapper = shallowMount(Rahmen, { 45 | propsData: { 46 | src: 'src', 47 | type: 'fill' 48 | } 49 | }) 50 | 51 | expect(wrapper.vm.imageStyle).toEqual({ 52 | paddingTop: '100%', 53 | background: 'center center / 100% 100% no-repeat url("src")' 54 | }) 55 | }) 56 | 57 | it('width', () => { 58 | const wrapper = shallowMount(Rahmen, { 59 | propsData: { 60 | src: 'src', 61 | width: '300px' 62 | } 63 | }) 64 | 65 | expect(wrapper.attributes().style).toBe('width: 300px;') 66 | }) 67 | }) 68 | -------------------------------------------------------------------------------- /test/unit/Select.spec.js: -------------------------------------------------------------------------------- 1 | import Select from '@/select/src' 2 | import Popup from '@/popup/src' 3 | import { 4 | mount, 5 | createLocalVue 6 | } from '@vue/test-utils' 7 | 8 | const localVue = createLocalVue() 9 | localVue.use(Popup) 10 | 11 | describe('Select', () => { 12 | it('render', () => { 13 | const wrapper = mount(Select, { 14 | localVue 15 | }) 16 | expect(wrapper.isVueInstance()).toBeTruthy() 17 | expect(wrapper.classes()).toContain('o-Select') 18 | }) 19 | 20 | it('disabled', () => { 21 | const wrapper = mount(Select, { 22 | localVue, 23 | propsData: { 24 | disabled: true 25 | } 26 | }) 27 | expect(wrapper.classes()).toContain('is-disabled') 28 | }) 29 | 30 | it('select option without key => value', () => { 31 | const wrapper = mount(Select, { 32 | localVue, 33 | propsData: { 34 | options: ['a', 'b', 'c'] 35 | } 36 | }) 37 | wrapper.find('.o-Select').trigger('click') 38 | expect(wrapper.find('.o-Popup__inner').isVisible()).toBe(true) 39 | wrapper.findAll('.o-Select__options li').at(2).element.click() 40 | expect(wrapper.emitted().input).toEqual([['c']]) 41 | expect(wrapper.emitted().change).toEqual([['c']]) 42 | expect(wrapper.find('input').element.value).toEqual('c') 43 | }) 44 | 45 | 46 | it('select option with key => value', () => { 47 | const wrapper = mount(Select, { 48 | localVue, 49 | propsData: { 50 | options: [{ 51 | key: 'a', 52 | value: 1 53 | },{ 54 | key: 'b', 55 | value: 2 56 | },{ 57 | key: 'c', 58 | value: 3 59 | }] 60 | } 61 | }) 62 | wrapper.find('.o-Select').trigger('click') 63 | expect(wrapper.find('.o-Popup__inner').isVisible()).toBe(true) 64 | wrapper.findAll('.o-Select__options li').at(2).element.click() 65 | expect(wrapper.emitted().input).toEqual([[3]]) 66 | expect(wrapper.emitted().change).toEqual([[3]]) 67 | expect(wrapper.find('input').element.value).toEqual('c') 68 | }) 69 | }) 70 | -------------------------------------------------------------------------------- /test/unit/Switchbox.spec.js: -------------------------------------------------------------------------------- 1 | import Switchbox from '@/switchbox/src' 2 | import { 3 | shallowMount 4 | } from '@vue/test-utils' 5 | import { 6 | querySelector as $, 7 | createInstance, 8 | destroyInstance, 9 | } from '../helper' 10 | 11 | describe('Switchbox', () => { 12 | it('render', () => { 13 | const wrapper = shallowMount(Switchbox) 14 | expect(wrapper.isVueInstance()).toBeTruthy() 15 | expect(wrapper.classes()).toContain('o-Switchbox') 16 | }) 17 | 18 | it('disabled', () => { 19 | const wrapper = shallowMount(Switchbox, { 20 | propsData: { 21 | disabled: true 22 | } 23 | }) 24 | expect(wrapper.classes()).toContain('is-disabled') 25 | expect(wrapper.find('input').attributes().disabled).toEqual('disabled') 26 | }) 27 | 28 | it('input/change event', (done) => { 29 | const wrapper = createInstance({ 30 | render () { 31 | return ({this.slotContent}) 35 | }, 36 | data () { 37 | return { 38 | slotContent: 'content', 39 | value: false, 40 | changed: false 41 | } 42 | }, 43 | methods: { 44 | onChange () { 45 | this.changed = true 46 | } 47 | } 48 | }) 49 | wrapper.$el.click() 50 | setTimeout(() => { 51 | expect(wrapper.value).toEqual(true) 52 | expect(wrapper.changed).toBeTruthy() 53 | destroyInstance(wrapper) 54 | done() 55 | }) 56 | }) 57 | 58 | it('label', (done) => { 59 | const wrapper = createInstance({ 60 | render () { 61 | return ({this.slotContent}) 65 | }, 66 | data () { 67 | return { 68 | value: false, 69 | label: ['on', 'off'] 70 | } 71 | } 72 | }) 73 | const $label = $('.o-Switchbox__status', wrapper.$el)[0] 74 | 75 | expect($label.innerHTML).toEqual('off') 76 | wrapper.$el.click() 77 | setTimeout(() => { 78 | expect(wrapper.value).toEqual(true) 79 | expect($label.innerHTML).toEqual('on') 80 | destroyInstance(wrapper) 81 | done() 82 | }) 83 | }) 84 | }) 85 | -------------------------------------------------------------------------------- /test/unit/Table.spec.js: -------------------------------------------------------------------------------- 1 | import Table from '@/table' 2 | import { 3 | querySelector as $, 4 | createInstance, 5 | destroyInstance 6 | } from '../helper' 7 | 8 | describe('Table', () => { 9 | it('render', done => { 10 | const wrapper = renderTable() 11 | 12 | process.nextTick(() => { 13 | expect(wrapper._isVue).toBeTruthy() 14 | expect($('tr', wrapper.$el).length).toEqual(11) 15 | expect($('.o-Checkbox', wrapper.$el)[0]).toBeDefined() 16 | expect($('.o-Pagination', wrapper.$el)[0]).toBeDefined() 17 | expect($('td.o-Table--stickyLeft', wrapper.$el)[1].innerHTML).toEqual('value1') 18 | destroyInstance(wrapper) 19 | done() 20 | }) 21 | }) 22 | }) 23 | 24 | function renderTable (option = {}) { 25 | return createInstance({ 26 | data () { 27 | return { 28 | columns: [ 29 | { 30 | prop: 'column1', 31 | fixed: 'left', 32 | }, 33 | { 34 | prop: 'column2', 35 | }, 36 | { 37 | prop: 'column3', 38 | } 39 | ], 40 | data: new Array(10).fill({ 41 | column1: 'value1', 42 | column2: 'value2', 43 | column3: 'value3' 44 | }), 45 | pagination: true, 46 | summary: true, 47 | selectable: true, 48 | total: 100, 49 | pageSize: 10, 50 | currentPage: 1, 51 | ...option.data, 52 | pages: [] 53 | } 54 | }, 55 | render () { 56 | return ( 57 | 67 | {this.columns.map(column => )} 71 |
72 | ) 73 | }, 74 | 75 | methods: { 76 | handlePageChange (page) { 77 | this.pages.push(page) 78 | } 79 | } 80 | }) 81 | } 82 | -------------------------------------------------------------------------------- /test/unit/TimePicker.spec.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '@/timePicker' 2 | import { 3 | querySelector as $, 4 | createInstance, 5 | destroyInstance 6 | } from '../helper' 7 | 8 | describe('TimePicker', () => { 9 | it('render', () => { 10 | const wrapper = renderTimePicker() 11 | expect(wrapper._isVue).toBeTruthy() 12 | destroyInstance(wrapper) 13 | }) 14 | 15 | it('focus', () => { 16 | 17 | const wrapper = renderTimePicker({ 18 | data: { 19 | time: '12:13:14', 20 | format: 'HH:mm:ss' 21 | } 22 | }) 23 | const $input = $('input', wrapper.$el)[0] 24 | 25 | $input.focus() 26 | 27 | setTimeout(() => { 28 | const $selected = $('.o-TimeSpinner__Item.is-selected', wrapper.$el) 29 | expect($('.o-TimePicker', wrapper.$el)[0]).toBeDefined() 30 | expect($selected[0].innerHTML).toEqual('12') 31 | expect($selected[1].innerHTML).toEqual('13') 32 | expect($selected[2].innerHTML).toEqual('14') 33 | destroyInstance(wrapper) 34 | }, 10) 35 | 36 | }) 37 | 38 | it('input', () => { 39 | 40 | const wrapper = renderTimePicker({ 41 | data: { 42 | time: '01:00:00', 43 | format: 'HH:mm:ss', 44 | } 45 | }) 46 | const $input = $('input', wrapper.$el)[0] 47 | 48 | $input.focus() 49 | 50 | setTimeout(() => { 51 | const $selected = $('.o-TimeSpinner__Item.is-selected', wrapper.$el) 52 | 53 | expect($('.o-TimePicker', wrapper.$el)[0]).toBeDefined() 54 | expect($selected[0].innerHTML).toEqual('01') 55 | $selected[0].nextElementSibling.click() 56 | 57 | setTimeout(() => { 58 | const $selected = $('.o-TimeSpinner__Item.is-selected', wrapper.$el) 59 | expect($selected[0].innerHTML).toEqual('02') 60 | 61 | $('.o-Modal__footer .o-Btn--primary', wrapper.$el)[1].click() 62 | expect(wrapper.time).toEqual('02:00:00') 63 | destroyInstance(wrapper) 64 | }, 10) 65 | }, 10) 66 | 67 | 68 | }) 69 | 70 | }) 71 | 72 | function renderTimePicker (option = {}) { 73 | return createInstance({ 74 | data () { 75 | return { 76 | time: '12:13:14', 77 | format: 'HH:mm:ss', 78 | ...option.data 79 | } 80 | }, 81 | render () { 82 | return ( 83 | 87 | ) 88 | } 89 | }) 90 | } 91 | -------------------------------------------------------------------------------- /utils/http.js: -------------------------------------------------------------------------------- 1 | // TODO 2 | -------------------------------------------------------------------------------- /utils/loadImage.js: -------------------------------------------------------------------------------- 1 | export default function loadImage (src) { 2 | return new Promise((resolve, reject) => { 3 | const img = new Image() 4 | img.onload = res => { 5 | resolve([res, img]) 6 | } 7 | img.onerror = reject 8 | img.src = src 9 | }) 10 | } 11 | -------------------------------------------------------------------------------- /utils/resizing.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create by joe223 3 | * https://github.com/joe223/resizing 4 | */ 5 | export default class Resizing { 6 | constructor (el) { 7 | this.el = el 8 | this.listeners = [] 9 | this.load = false 10 | this.box = document.createElement('iframe') 11 | this.box.setAttribute('style', 'position: absolute; overflow: hidden; opacity: 0; pointer-events: none; left: 0; top: 0; z-index: -9999; width: 100%; height: 100%; border: none;') 12 | this.box.onload = e => { 13 | this.load = true 14 | this.bindListener() 15 | } 16 | this.el.appendChild(this.box) 17 | } 18 | bindListener () { 19 | const len = this.listeners.length 20 | for (let i = 0; i < len; i++) { 21 | this.box.contentDocument.defaultView.addEventListener('resize', this.listeners.shift()) 22 | } 23 | } 24 | on (cb) { 25 | if (this.load) { 26 | this.box.contentDocument.defaultView.addEventListener('resize', cb) 27 | } else { 28 | this.listeners.push(cb) 29 | } 30 | } 31 | off (cb) { 32 | this.box.contentDocument.defaultView.removeEventListener('resize', cb) 33 | } 34 | destroy () { 35 | this.el.removeChild(this.box) 36 | // TODO: remove eventListener ? 37 | this.el = null 38 | this.box = null 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /utils/scrollbarWidth.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable */ 2 | /*! scrollbarWidth.js v0.1.3 | felixexter | MIT | https://github.com/felixexter/scrollbarWidth */ 3 | 4 | export default function scrollbarWidth() { 5 | let width = 0 6 | 7 | if (typeof document === 'undefined') { 8 | return width 9 | } 10 | 11 | let 12 | body = document.body, 13 | box = document.createElement('div'), 14 | boxStyle = box.style 15 | 16 | boxStyle.position = 'absolute'; 17 | boxStyle.top = boxStyle.left = '-9999px'; 18 | boxStyle.width = boxStyle.height = '100px'; 19 | boxStyle.overflow = 'scroll'; 20 | 21 | body.appendChild(box); 22 | 23 | width = box.offsetWidth - box.clientWidth; 24 | 25 | body.removeChild(box); 26 | 27 | return width; 28 | } 29 | --------------------------------------------------------------------------------