├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── circle.yml ├── lerna.json ├── package.json ├── packages ├── _entry │ ├── package.json │ └── src │ │ └── index.js ├── _example │ ├── index.html │ ├── package.json │ └── src │ │ └── index.js ├── _functions │ ├── package.json │ └── src │ │ ├── index.js │ │ ├── loading.js │ │ ├── message.js │ │ └── notification.js ├── _helpers │ ├── index.js │ ├── nextTick.js │ ├── package.json │ ├── request.js │ └── type.js ├── _install │ ├── index.js │ └── package.json ├── _site │ ├── docs │ │ ├── Badge │ │ │ ├── basic.md │ │ │ ├── count.md │ │ │ ├── overflow.md │ │ │ └── show.md │ │ ├── Box │ │ │ └── basic.md │ │ ├── Breadcrumb │ │ │ └── basic.md │ │ ├── Button │ │ │ ├── basic.md │ │ │ ├── disabled.md │ │ │ ├── event.md │ │ │ ├── loading.md │ │ │ └── size.md │ │ ├── Card │ │ │ └── basic.md │ │ ├── Checkbox │ │ │ ├── basic.md │ │ │ ├── event.md │ │ │ └── group.md │ │ ├── Countdown │ │ │ ├── basic.md │ │ │ ├── event.md │ │ │ ├── format.md │ │ │ └── locale.md │ │ ├── ElementTree │ │ │ └── basic.md │ │ ├── Form │ │ │ ├── horizontal.md │ │ │ ├── intro.md │ │ │ └── stacked.md │ │ ├── Icon │ │ │ ├── basic.md │ │ │ └── fontclass.md │ │ ├── Input │ │ │ ├── basic.md │ │ │ ├── block.md │ │ │ ├── disabled.md │ │ │ ├── error-with-message.md │ │ │ ├── error.md │ │ │ ├── event.md │ │ │ └── transparent.md │ │ ├── Loading │ │ │ └── basic.md │ │ ├── Message │ │ │ ├── basic.md │ │ │ └── programtic.md │ │ ├── Modal │ │ │ ├── basic.md │ │ │ └── closable.md │ │ ├── Notification │ │ │ ├── basic.md │ │ │ └── type.md │ │ ├── NumberInput │ │ │ ├── basic.md │ │ │ ├── disabled.md │ │ │ ├── event.md │ │ │ ├── min-max.md │ │ │ ├── size.md │ │ │ └── step.md │ │ ├── Pagination │ │ │ ├── basic.md │ │ │ └── text.md │ │ ├── ProgressBar │ │ │ ├── basic.md │ │ │ └── text-inside.md │ │ ├── ProgressCircle │ │ │ ├── basic.md │ │ │ ├── custom-text.md │ │ │ ├── show-percentage-text.md │ │ │ └── size.md │ │ ├── Radio │ │ │ ├── basic.md │ │ │ ├── button.md │ │ │ ├── event.md │ │ │ └── group.md │ │ ├── Rate │ │ │ ├── basic.md │ │ │ ├── event.md │ │ │ ├── readonly.md │ │ │ └── total.md │ │ ├── Select │ │ │ ├── basic.md │ │ │ ├── event.md │ │ │ ├── style.md │ │ │ └── transparent.md │ │ ├── Spinner │ │ │ ├── basic.md │ │ │ └── block.md │ │ ├── Switch │ │ │ ├── basic.md │ │ │ └── event.md │ │ ├── Table │ │ │ ├── interaction.md │ │ │ └── render.md │ │ ├── Tabs │ │ │ ├── basic.md │ │ │ ├── event.md │ │ │ └── key.md │ │ ├── Tag │ │ │ ├── basic.md │ │ │ ├── checkable.md │ │ │ └── event.md │ │ ├── Textarea │ │ │ ├── autosize.md │ │ │ ├── basic.md │ │ │ └── block.md │ │ ├── Tooltip │ │ │ └── basic.md │ │ └── Upload │ │ │ ├── basic.md │ │ │ └── drop.md │ ├── package.json │ ├── scripts │ │ ├── copy-theme.js │ │ ├── docs.js │ │ ├── gh-pages.js │ │ └── webpack.config.site.js │ └── src │ │ ├── CNAME │ │ ├── _index.html │ │ ├── components │ │ ├── app.rgl │ │ ├── demo.rgl │ │ ├── header.rgl │ │ └── nav.rgl │ │ ├── dispatcher.js │ │ ├── fonts │ │ └── Pacifico-Regular.ttf │ │ ├── highlight.css │ │ ├── index.js │ │ └── site.css ├── _theme │ ├── package.json │ └── src │ │ ├── common │ │ ├── color.less │ │ ├── mixin.less │ │ └── var.less │ │ ├── components │ │ ├── badge.less │ │ ├── breadcrumb-item.less │ │ ├── breadcrumb.less │ │ ├── button.less │ │ ├── card.less │ │ ├── checkbox.less │ │ ├── element-tree-node.less │ │ ├── element-tree.less │ │ ├── form-control.less │ │ ├── form-item.less │ │ ├── form-label.less │ │ ├── form.less │ │ ├── icon.less │ │ ├── input.less │ │ ├── loading.less │ │ ├── message.less │ │ ├── modal.less │ │ ├── notification.less │ │ ├── number-input.less │ │ ├── option.less │ │ ├── pagination.less │ │ ├── progress-bar.less │ │ ├── progress-circle.less │ │ ├── radio-button.less │ │ ├── radio-group.less │ │ ├── radio.less │ │ ├── rate.less │ │ ├── select.less │ │ ├── spinner.less │ │ ├── switch.less │ │ ├── table-row.less │ │ ├── table.less │ │ ├── tabs.less │ │ ├── tag.less │ │ ├── td.less │ │ ├── text-spinner.less │ │ ├── textarea.less │ │ ├── tooltip.less │ │ ├── tr.less │ │ └── upload.less │ │ ├── fonts │ │ ├── demo.css │ │ ├── demo_fontclass.html │ │ ├── demo_symbol.html │ │ ├── demo_unicode.html │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ │ └── index.js ├── badge │ ├── package.json │ └── src │ │ ├── badge.rgl │ │ └── index.js ├── box │ ├── package.json │ └── src │ │ ├── box.rgl │ │ └── index.js ├── breadcrumb-item │ ├── package.json │ └── src │ │ ├── breadcrumb-item.rgl │ │ └── index.js ├── breadcrumb │ ├── package.json │ └── src │ │ ├── breadcrumb.rgl │ │ └── index.js ├── button │ ├── package.json │ └── src │ │ ├── button.rgl │ │ └── index.js ├── card │ ├── package.json │ └── src │ │ ├── card.rgl │ │ └── index.js ├── checkbox-group │ ├── package.json │ └── src │ │ ├── checkbox-group.rgl │ │ └── index.js ├── checkbox │ ├── package.json │ └── src │ │ ├── checkbox.rgl │ │ └── index.js ├── countdown │ ├── package.json │ └── src │ │ ├── countdown.rgl │ │ ├── duration.js │ │ └── index.js ├── element-tree │ ├── package.json │ └── src │ │ ├── element-tree-node.rgl │ │ ├── element-tree.rgl │ │ └── index.js ├── form-control │ ├── package.json │ └── src │ │ ├── form-control.rgl │ │ └── index.js ├── form-item │ ├── package.json │ └── src │ │ ├── form-item.rgl │ │ └── index.js ├── form-label │ ├── package.json │ └── src │ │ ├── form-label.rgl │ │ └── index.js ├── form │ ├── package.json │ └── src │ │ ├── form.rgl │ │ └── index.js ├── icon │ ├── package.json │ └── src │ │ ├── icon.rgl │ │ └── index.js ├── input │ ├── package.json │ └── src │ │ ├── index.js │ │ └── input.rgl ├── loading │ ├── package.json │ └── src │ │ ├── index.js │ │ └── loading.rgl ├── message │ ├── package.json │ └── src │ │ ├── index.js │ │ └── message.rgl ├── modal │ ├── package.json │ └── src │ │ ├── index.js │ │ └── modal.rgl ├── notification │ ├── package.json │ └── src │ │ ├── index.js │ │ └── notification.rgl ├── number-input │ ├── package.json │ └── src │ │ ├── index.js │ │ └── number-input.rgl ├── option │ ├── package.json │ └── src │ │ ├── index.js │ │ └── option.rgl ├── pagination │ ├── package.json │ └── src │ │ ├── index.js │ │ └── pagination.rgl ├── progress-bar │ ├── package.json │ └── src │ │ ├── index.js │ │ └── progress-bar.rgl ├── progress-circle │ ├── package.json │ └── src │ │ ├── index.js │ │ └── progress-circle.rgl ├── radio-button │ ├── package.json │ └── src │ │ ├── index.js │ │ └── radio-button.rgl ├── radio-group │ ├── package.json │ └── src │ │ ├── index.js │ │ └── radio-group.rgl ├── radio │ ├── package.json │ └── src │ │ ├── index.js │ │ └── radio.rgl ├── rate │ ├── package.json │ └── src │ │ ├── index.js │ │ └── rate.rgl ├── select │ ├── package.json │ └── src │ │ ├── index.js │ │ └── select.rgl ├── spinner │ ├── package.json │ └── src │ │ ├── index.js │ │ └── spinner.rgl ├── switch │ ├── package.json │ └── src │ │ ├── index.js │ │ └── switch.rgl ├── tab-pane │ ├── package.json │ └── src │ │ ├── index.js │ │ └── tab-pane.rgl ├── table │ ├── package.json │ └── src │ │ ├── index.js │ │ ├── table-row.rgl │ │ └── table.rgl ├── tabs │ ├── package.json │ └── src │ │ ├── index.js │ │ └── tabs.rgl ├── tag │ ├── package.json │ └── src │ │ ├── index.js │ │ └── tag.rgl ├── td │ ├── package.json │ └── src │ │ ├── index.js │ │ └── td.rgl ├── text-spinner │ ├── package.json │ └── src │ │ ├── index.js │ │ └── text-spinner.rgl ├── textarea │ ├── package.json │ └── src │ │ ├── index.js │ │ └── textarea.rgl ├── tooltip │ ├── package.json │ └── src │ │ ├── index.js │ │ └── tooltip.rgl ├── tr │ ├── package.json │ └── src │ │ ├── index.js │ │ └── tr.rgl └── upload │ ├── package.json │ └── src │ ├── compontents │ └── fileList.rgl │ ├── index.js │ └── upload.rgl ├── play ├── badge.play.js ├── button.play.js ├── card.play.js ├── index.js ├── loading.play.js ├── notification.play.js ├── number-input.play.js ├── package.json ├── progress-bar.play.js ├── progress-circle.play.js ├── rate.play.js ├── select.play.js ├── tag.play.js ├── template.html ├── text-spinner.play.js ├── tooltip.play.js └── upload.play.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | lerna-debug.log 4 | /debug.log 5 | /packages/_site/public 6 | /todo 7 | /packages/*/lib 8 | /packages/_example/dist 9 | /packages/_site/src/docs.json 10 | /packages/_site/src/docs-js.js 11 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | access = public 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for your interest in this project! 4 | 5 | Please spend serveral minutes reading the following guidelines and tips before contrubuting to this project : ) 6 | 7 | ## Tips about Pull Request 8 | 9 | **Working on your first Pull Request?** You can learn how from this *free* series 10 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 11 | 12 | ## Project Setup 13 | 14 | Make sure nodejs has been installed before starting your work 15 | 16 | ```bash 17 | # Install dependencies 18 | $ npm install 19 | # bootstrap packages 20 | $ npm run boot 21 | ``` 22 | 23 | ```bash 24 | # Develop with regular-play 25 | $ npm run play 26 | # Build for production 27 | $ npm run build 28 | ``` 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2017 fengzilong and all contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pure 2 | 3 | [![build status][build-status-image]][build-status-url] 4 | [![npm package][npm-package-image]][npm-package-url] 5 | [![license][license-image]][license-url] 6 | 7 | > elegant and lovely components 8 | 9 | | [:book: Docs](https://pure.js.org) | [:snowboarder: Playground](https://jsfiddle.net/7krkLg5g/) | 10 | | :---: | :---: | 11 | 12 | ## Installation 13 | 14 | ```bash 15 | $ npm install pure-ui --save 16 | ``` 17 | 18 | ## Usage 19 | 20 | **Option 1**: with webpack ( Recommended ) 21 | 22 | ```js 23 | import Regular from 'regularjs'; 24 | import Pure from 'pure-ui'; 25 | // import css 26 | import 'pure-ui/lib/index.css'; 27 | 28 | Regular.use( Pure ); 29 | ``` 30 | 31 | **Option 2**: hot-link 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ```html 38 | 39 | 40 | ``` 41 | 42 | ```js 43 | Regular.use( Pure ); 44 | ``` 45 | 46 | Alternatively, you can also register pure-ui in another namespace 47 | 48 | ```js 49 | var Another = Regular.extend( {} ); 50 | Another.use( Pure ); 51 | ``` 52 | 53 | ## CDN 54 | 55 | | [pure.js](https://unpkg.com/pure-ui/lib/index.js) | [pure.css](https://unpkg.com/pure-ui/lib/index.css) | 56 | | :---: | :---: | 57 | 58 | ## Contributing 59 | 60 | Every contribution is appreciated! But before you start working on your pull request, please read [CONTRIBUTING.md](CONTRIBUTING.md) first. There are some guidelines and tips you may want to know :) 61 | 62 | ## License 63 | 64 | MIT 65 | 66 | [build-status-image]: https://img.shields.io/circleci/project/fengzilong/pure/master.svg?style=flat-square 67 | [build-status-url]: https://circleci.com/gh/fengzilong/pure 68 | 69 | [npm-package-image]: https://img.shields.io/npm/v/pure-ui.svg?style=flat-square 70 | [npm-package-url]: https://www.npmjs.org/package/pure-ui 71 | 72 | [license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square 73 | [license-url]: LICENSE 74 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | pre: 3 | - mkdir ~/.yarn-cache 4 | node: 5 | version: 7 6 | 7 | dependencies: 8 | pre: 9 | - curl -o- -L https://yarnpkg.com/install.sh | bash 10 | cache_directories: 11 | - "~/.yarn-cache" 12 | override: 13 | - yarn install -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.1.2", 3 | "packages": [ 4 | "packages/*", 5 | "play" 6 | ], 7 | "hoist": true, 8 | "version": "independent", 9 | "npmClient": "cnpm" 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "author": "fengzilong", 4 | "license": "MIT", 5 | "scripts": { 6 | "site": "npm run boot && lerna run theme && lerna run entry && node packages/_site/scripts/copy-theme && node packages/_site/scripts/docs && webpack --config packages/_site/scripts/webpack.config.site.js", 7 | "site:watch": "webpack --config packages/_site/scripts/webpack.config.site.js -w", 8 | "serve": "anywhere -d packages/_site/public -l", 9 | "gh-pages": "node packages/_site/scripts/gh-pages", 10 | "deploy": "npm run site && npm run gh-pages", 11 | "clean": "lerna clean", 12 | "lint": "eslint packages/**/*.rgl --quiet", 13 | "lintcss": "stylelint packages/_theme/**/*.less", 14 | "boot": "lerna bootstrap", 15 | "build": "npm run boot && lerna run build --concurrency 10 && lerna run theme && lerna run entry", 16 | "play": "npm run boot && lerna run theme && play --resolve-fallback play/node_modules --preview-template play/template.html", 17 | "test": "npm run lint && npm run lintcss", 18 | "precommit": "lint-staged" 19 | }, 20 | "lint-staged": { 21 | "packages/**/*.rgl": "eslint --quiet", 22 | "packages/_theme/**/*.less": "stylelint" 23 | }, 24 | "eslintConfig": { 25 | "extends": "mo/browser", 26 | "plugins": [ 27 | "rgl" 28 | ] 29 | }, 30 | "stylelint": { 31 | "extends": "stylelint-config-standard", 32 | "rules": { 33 | "indentation": "tab", 34 | "number-leading-zero": "never", 35 | "function-comma-space-after": "never" 36 | } 37 | }, 38 | "devDependencies": { 39 | "anywhere": "^1.4.0", 40 | "autoprefixer": "^6.3.7", 41 | "autosize": "^3.0.20", 42 | "babel-core": "^6.10.4", 43 | "babel-plugin-transform-runtime": "^6.9.0", 44 | "babel-preset-es2015": "^6.9.0", 45 | "babel-runtime": "^6.9.2", 46 | "copy-webpack-plugin": "^3.0.1", 47 | "css-loader": "^0.23.1", 48 | "de-indent": "^1.0.2", 49 | "director": "^1.2.8", 50 | "eslint": "^3.15.0", 51 | "eslint-config-mo": "^0.2.0", 52 | "eslint-plugin-rgl": "0.0.1", 53 | "eventemitter2": "^2.0.0", 54 | "extract-text-webpack-plugin": "^1.0.1", 55 | "file-loader": "^0.9.0", 56 | "front-matter": "^2.1.0", 57 | "gh-pages": "^0.11.0", 58 | "glob": "^7.0.5", 59 | "html-webpack-plugin": "^2.22.0", 60 | "husky": "^0.13.2", 61 | "is-obj": "^1.0.1", 62 | "json-loader": "^0.5.4", 63 | "kopy": "^5.0.5", 64 | "lerna": "^2.1.2", 65 | "less": "^2.7.2", 66 | "less-loader": "^2.2.3", 67 | "lint-staged": "^3.3.1", 68 | "lodash": "^4.13.1", 69 | "marked": "^0.3.5", 70 | "opn-cli": "^3.1.0", 71 | "postcss-loader": "^0.9.1", 72 | "pure-cli": "latest", 73 | "pure-loader": "^1.0.2", 74 | "regular-loader": "^0.1.4", 75 | "regular-play-cli": "^1.0.12", 76 | "regularjs": "0.4.4", 77 | "style-loader": "^0.13.1", 78 | "stylelint": "^7.8.0", 79 | "stylelint-config-standard": "^16.0.0", 80 | "url-loader": "^0.5.7", 81 | "webpack": "^1.13.1" 82 | }, 83 | "peerDependencies": {}, 84 | "dependencies": {} 85 | } 86 | -------------------------------------------------------------------------------- /packages/_entry/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pure-ui", 3 | "version": "0.3.0", 4 | "description": "elegant and lovely components, built with regularjs", 5 | "main": "lib/index.js", 6 | "style": "lib/index.css", 7 | "files": [ 8 | "lib" 9 | ], 10 | "scripts": { 11 | "entry": "pure --name=Pure --bundle --prefer-source" 12 | }, 13 | "author": "fengzilong ", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "@pure/theme": "^0.1.0", 17 | "@pure/helpers": "^0.1.0", 18 | "@pure/install": "^0.1.0", 19 | "@pure/functions": "^0.1.0", 20 | "@pure/box": "^0.1.0", 21 | "@pure/breadcrumb": "^0.1.0", 22 | "@pure/breadcrumb-item": "^0.1.0", 23 | "@pure/button": "^0.1.0", 24 | "@pure/checkbox": "^0.1.0", 25 | "@pure/checkbox-group": "^0.1.0", 26 | "@pure/countdown": "^0.1.0", 27 | "@pure/element-tree": "^0.1.0", 28 | "@pure/form": "^0.1.0", 29 | "@pure/form-control": "^0.1.0", 30 | "@pure/form-item": "^0.1.0", 31 | "@pure/form-label": "^0.1.0", 32 | "@pure/icon": "^0.1.0", 33 | "@pure/input": "^0.1.0", 34 | "@pure/modal": "^0.1.0", 35 | "@pure/message": "^0.1.0", 36 | "@pure/option": "^0.1.0", 37 | "@pure/pagination": "^0.1.0", 38 | "@pure/radio": "^0.1.0", 39 | "@pure/radio-button": "^0.1.0", 40 | "@pure/radio-group": "^0.1.0", 41 | "@pure/select": "^0.1.0", 42 | "@pure/spinner": "^0.1.0", 43 | "@pure/switch": "^0.1.0", 44 | "@pure/tab-pane": "^0.1.0", 45 | "@pure/table": "^0.1.0", 46 | "@pure/tabs": "^0.1.0", 47 | "@pure/td": "^0.1.0", 48 | "@pure/textarea": "^0.1.0", 49 | "@pure/tr": "^0.1.0", 50 | "@pure/rate": "^0.1.0", 51 | "@pure/notification": "^0.1.0", 52 | "@pure/badge": "^0.1.0", 53 | "@pure/number-input": "^0.1.0", 54 | "@pure/tooltip": "^0.1.0", 55 | "@pure/progress-bar": "^0.1.0", 56 | "@pure/progress-circle": "^0.1.0", 57 | "@pure/tag": "^0.1.0", 58 | "@pure/loading": "^0.1.0", 59 | "@pure/upload": "^0.1.0", 60 | "@pure/text-spinner": "^0.1.0", 61 | "@pure/card": "^0.1.0", 62 | "pure-cli": "latest" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/_example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | demo 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/_example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "example", 4 | "scripts": { 5 | "example": "pure --bundle" 6 | }, 7 | "author": "fengzilong ", 8 | "license": "MIT", 9 | "devDependencies": { 10 | "@pure/helpers": "^0.1.0", 11 | "@pure/icon": "^0.1.0", 12 | "@pure/button": "^0.1.0", 13 | "@pure/input": "^0.1.0", 14 | "@pure/spinner": "^0.1.0", 15 | "@pure/breadcrumb": "^0.1.0", 16 | "@pure/breadcrumb-item": "^0.1.0", 17 | "@pure/checkbox": "^0.1.0", 18 | "@pure/checkbox-group": "^0.1.0", 19 | "@pure/textarea": "^0.1.0", 20 | "@pure/radio-group": "^0.1.0", 21 | "@pure/radio": "^0.1.0", 22 | "@pure/radio-button": "^0.1.0", 23 | "@pure/switch": "^0.1.0", 24 | "@pure/box": "^0.1.0", 25 | "@pure/countdown": "^0.1.0", 26 | "@pure/tabs": "^0.1.0", 27 | "@pure/tab-pane": "^0.1.0", 28 | "@pure/form": "^0.1.0", 29 | "@pure/form-item": "^0.1.0", 30 | "@pure/form-label": "^0.1.0", 31 | "@pure/form-control": "^0.1.0", 32 | "@pure/select": "^0.1.0", 33 | "@pure/option": "^0.1.0", 34 | "@pure/pagination": "^0.1.0", 35 | "@pure/message": "^0.1.0", 36 | "@pure/modal": "^0.1.0", 37 | "@pure/table": "^0.1.0", 38 | "@pure/tr": "^0.1.0", 39 | "@pure/td": "^0.1.0", 40 | "@pure/element-tree": "^0.1.0", 41 | "@pure/install": "^0.1.0", 42 | "@pure/theme": "^0.1.0", 43 | "@pure/functions": "^0.1.0", 44 | "@pure/rate": "^0.1.0", 45 | "@pure/notification": "^0.1.0", 46 | "@pure/badge": "^0.1.0", 47 | "@pure/number-input": "^0.1.0", 48 | "@pure/tooltip": "^0.1.0", 49 | "@pure/progress-bar": "^0.1.0", 50 | "@pure/progress-circle": "^0.1.0", 51 | "@pure/upload": "^0.1.0", 52 | "@pure/card": "^0.1.0", 53 | "pure-cli": "latest" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/_functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/functions", 3 | "version": "0.1.0", 4 | "main": "lib/index.js", 5 | "play:main": "src/index.js", 6 | "scripts": { 7 | "build": "pure --name pureFunctions" 8 | }, 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | }, 14 | "dependencies": { 15 | "@pure/install": "^0.1.0", 16 | "@pure/message": "^0.1.0", 17 | "@pure/notification": "^0.1.0", 18 | "@pure/loading": "^0.1.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/_functions/src/index.js: -------------------------------------------------------------------------------- 1 | import message from './message'; 2 | import notification from './notification'; 3 | import loading from './loading'; 4 | 5 | export default function ( Component, target = {} ) { 6 | Component.use( function ( Component, Regular ) { 7 | Object.assign( target, { 8 | message: message( Regular ), 9 | notify: notification( Regular ), 10 | notification: notification( Regular ), 11 | loading: loading( Regular ), 12 | } ); 13 | } ); 14 | }; 15 | -------------------------------------------------------------------------------- /packages/_functions/src/loading.js: -------------------------------------------------------------------------------- 1 | import install from '@pure/install'; 2 | import Loading from '@pure/loading'; 3 | 4 | export default function ( Regular ) { 5 | let $container; 6 | let instance; 7 | let tid; 8 | 9 | const LoadingCtor = Regular.extend( Loading ); 10 | 11 | function ensureLoadingEnv() { 12 | if ( !$container ) { 13 | $container = document.createElement( 'div' ); 14 | $container.className = 'pure-loading__container'; 15 | document.body.appendChild( $container ); 16 | } 17 | if ( !instance ) { 18 | instance = new LoadingCtor(); 19 | instance.$inject( $container ); 20 | } 21 | } 22 | 23 | return { 24 | start() { 25 | ensureLoadingEnv(); 26 | 27 | if ( instance.current() > 0 ) { 28 | instance.finish(); 29 | } 30 | 31 | if ( tid ) { 32 | clearInterval( tid ); 33 | } 34 | 35 | tid = setInterval( () => instance.incLittle(), 500 ); 36 | }, 37 | inc() { 38 | ensureLoadingEnv(); 39 | instance.inc(); 40 | }, 41 | update( percentage ) { 42 | ensureLoadingEnv(); 43 | instance.update( percentage ); 44 | }, 45 | finish() { 46 | ensureLoadingEnv(); 47 | if ( tid ) { 48 | clearInterval( tid ); 49 | } 50 | instance.finish(); 51 | } 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /packages/_functions/src/message.js: -------------------------------------------------------------------------------- 1 | import install from '@pure/install'; 2 | import Message from '@pure/message'; 3 | 4 | export default function ( Regular ) { 5 | const AnimMessage = Regular.extend( { 6 | template: ` 7 |
11 | { content } 12 |
13 | `, 14 | config() { 15 | this.data.duration = this.data.duration || 2000; 16 | this.$on( 'remove', () => { 17 | this.destroy(); 18 | } ); 19 | }, 20 | } ); 21 | 22 | AnimMessage.use( install( 'Message', Message ) ); 23 | 24 | return function ( { content, type, duration } ) { 25 | new AnimMessage( { 26 | data: { content, type, duration }, 27 | } ).$inject( document.body ); 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/_functions/src/notification.js: -------------------------------------------------------------------------------- 1 | import Notification from '@pure/notification'; 2 | import install from '@pure/install'; 3 | 4 | export default function ( Regular ) { 5 | const AnimNotification = Regular.extend( { 6 | template: ` 7 |
8 | 17 |
18 | `, 19 | config() { 20 | if ( typeof this.data.duration === 'undefined' ) { 21 | this.data.duration = 4000; 22 | } 23 | 24 | this.$on( 'in', () => { 25 | if ( this.data.duration > 0 ) { 26 | setTimeout( () => { 27 | this.$emit( 'c' ); 28 | }, this.data.duration ); 29 | } 30 | } ); 31 | 32 | this.$on( 'remove', () => { 33 | this.destroy(); 34 | } ); 35 | }, 36 | onClose() { 37 | this.$emit( 'c' ); 38 | }, 39 | } ); 40 | 41 | AnimNotification.use( install( 'Notification', Notification ) ); 42 | 43 | let $container; 44 | return function ( { 45 | type, 46 | title, 47 | description, 48 | duration, 49 | closable, 50 | icon, 51 | iconColor 52 | } ) { 53 | if ( !$container ) { 54 | $container = document.createElement( 'div' ); 55 | $container.className = 'pure-notification-container'; 56 | document.body.appendChild( $container ); 57 | } 58 | return new AnimNotification( { 59 | data: { 60 | type, 61 | title, 62 | description, 63 | duration, 64 | closable, 65 | icon, 66 | iconColor 67 | } 68 | } ).$inject( $container ); 69 | }; 70 | }; 71 | -------------------------------------------------------------------------------- /packages/_helpers/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pure-UI/pure/50ac32eab65a25c1d4f52073c596f2572c4bdc9c/packages/_helpers/index.js -------------------------------------------------------------------------------- /packages/_helpers/nextTick.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MIT license 3 | * https://github.com/vuejs/vue 4 | */ 5 | 6 | const noop = () => {} 7 | const UA = window.navigator.userAgent.toLowerCase() 8 | const isIOS = /iphone|ipad|ipod|ios/.test(UA) 9 | const isNative = Ctor => /native code/.test(Ctor.toString()) 10 | 11 | const nextTick = (function () { 12 | const callbacks = [] 13 | let pending = false 14 | let timerFunc 15 | 16 | function nextTickHandler() { 17 | pending = false; 18 | const copies = callbacks.slice(0); 19 | callbacks.length = 0; 20 | for (let i = 0; i < copies.length; i++) { 21 | copies[i](); 22 | } 23 | } 24 | 25 | // the nextTick behavior leverages the microtask queue, which can be accessed 26 | // via either native Promise.then or MutationObserver. 27 | // MutationObserver has wider support, however it is seriously bugged in 28 | // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It 29 | // completely stops working after triggering a few times... so, if native 30 | // Promise is available, we will use it: 31 | if (typeof Promise !== 'undefined' && isNative(Promise)) { 32 | var p = Promise.resolve() 33 | timerFunc = () => { 34 | p.then(nextTickHandler) 35 | // in problematic UIWebViews, Promise.then doesn't completely break, but 36 | // it can get stuck in a weird state where callbacks are pushed into the 37 | // microtask queue but the queue isn't being flushed, until the browser 38 | // needs to do some other work, e.g. handle a timer. Therefore we can 39 | // "force" the microtask queue to be flushed by adding an empty timer. 40 | if (isIOS) setTimeout(noop) 41 | } 42 | } else if (typeof MutationObserver !== 'undefined' && ( 43 | isNative(MutationObserver) || 44 | // PhantomJS and iOS 7.x 45 | MutationObserver.toString() === '[object MutationObserverConstructor]' 46 | )) { 47 | // use MutationObserver where native Promise is not available, 48 | // e.g. PhantomJS IE11, iOS7, Android 4.4 49 | var counter = 1 50 | var observer = new MutationObserver(nextTickHandler) 51 | var textNode = document.createTextNode(String(counter)) 52 | observer.observe(textNode, { 53 | characterData: true 54 | }) 55 | timerFunc = () => { 56 | counter = (counter + 1) % 2 57 | textNode.data = String(counter) 58 | } 59 | } else { 60 | // fallback to setTimeout 61 | /* istanbul ignore next */ 62 | timerFunc = setTimeout 63 | } 64 | 65 | return function queueNextTick (cb, ctx) { 66 | const func = ctx 67 | ? function () { cb.call(ctx) } 68 | : cb 69 | callbacks.push(func) 70 | if (!pending) { 71 | pending = true 72 | timerFunc(nextTickHandler, 0) 73 | } 74 | } 75 | })(); 76 | 77 | export default nextTick; 78 | -------------------------------------------------------------------------------- /packages/_helpers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/helpers", 3 | "main": "index.js", 4 | "version": "0.1.0", 5 | "author": "fengzilong ", 6 | "license": "MIT" 7 | } 8 | -------------------------------------------------------------------------------- /packages/_helpers/type.js: -------------------------------------------------------------------------------- 1 | export default v => { 2 | const t = typeof v; 3 | let tmp = ''; 4 | switch( t ) { 5 | case 'string': 6 | case 'boolean': 7 | case 'number': 8 | tmp = t; 9 | break; 10 | default: 11 | if( Array.isArray( v ) ) { 12 | tmp = 'array'; 13 | } else if( t === 'object' ) { 14 | // TODO: isPlainObject 15 | tmp = 'object'; 16 | } 17 | } 18 | return tmp; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/_install/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function install( name, definition ) { 2 | return function ( Parent, Regular ) { 3 | const { Ctor, components } = construct( definition, Regular ); 4 | 5 | Object.keys( components || {} ).forEach( function ( key ) { 6 | install( key, components[ key ] )( Ctor, Regular ); 7 | } ); 8 | 9 | Parent.component( name, Ctor ); 10 | }; 11 | }; 12 | 13 | function construct( definition, Regular ) { 14 | const { components } = definition; 15 | 16 | delete definition.components; 17 | 18 | let Ctor; 19 | if ( definition.Ctor ) { 20 | Ctor = definition.Ctor; 21 | } else { 22 | Ctor = Regular.extend( definition ); 23 | definition.Ctor = Ctor; 24 | } 25 | 26 | return { 27 | Ctor: Ctor, 28 | components: components, 29 | }; 30 | } 31 | -------------------------------------------------------------------------------- /packages/_install/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/install", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "fengzilong ", 6 | "license": "MIT" 7 | } 8 | -------------------------------------------------------------------------------- /packages/_site/docs/Badge/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | abcde 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Badge/count.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Count 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Badge/overflow.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Overflow 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Badge/show.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Show 6 | 7 | ```html 8 | abcde 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Box/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Breadcrumb/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | 11 | Home 12 | 13 | 14 | 15 | 16 | Category 17 | 18 | 19 | 20 | Page 21 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/_site/docs/Button/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Button/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Disabled 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Button/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/_site/docs/Button/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Loading 6 | 7 | ```html 8 | 15 | ``` 16 | 17 | 18 | ```js 19 | { 20 | config() { 21 | this.data.loading = false 22 | }, 23 | onLoading() { 24 | this.data.loading = true 25 | setTimeout( () => { 26 | this.data.loading = false 27 | this.$update() 28 | }, 5000 ) 29 | } 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /packages/_site/docs/Button/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Size 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Card/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | Some Content... 10 | 11 | 12 | 13 | Some Content... 14 | 15 | 16 | 17 | Some Content... 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/_site/docs/Checkbox/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | Option 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Checkbox/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 | Option 1 10 | Option 2 11 | Option 3 12 | 13 |

14 | Checked：{ ( v && v.length > 0 ) ? v : 'none' } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/_site/docs/Checkbox/group.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Group 6 | 7 | ```html 8 | 9 | Option 1 10 | Option 2 11 | Option 3 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/Countdown/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Countdown/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | {#if !isTimeEnd} 9 | 10 | {#else} 11 | 12 | {/if} 13 |

14 | isTimeEnd: { isTimeEnd ? 'true' : 'false' } 15 |

16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/_site/docs/Countdown/format.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Format 6 | 7 | ```html 8 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/_site/docs/Countdown/locale.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Locale 6 | 7 | ```html 8 | 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/_site/docs/ElementTree/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | ```html 6 | 7 |
8 | Selected: { JSON.stringify( selected ) } 9 | ``` 10 | 11 | ```js 12 | { 13 | config: function() { 14 | this.data.source = [ 15 | { 16 | name: 'head', 17 | children: [ 18 | { 19 | name: 'meta', 20 | attrs: { 21 | charset: 'utf-8' 22 | } 23 | } 24 | ] 25 | }, 26 | { 27 | name: 'body', 28 | children: [ 29 | { 30 | name: 'div', 31 | attrs: { 32 | id: 'app', 33 | class: 'app' 34 | }, 35 | children: [ 36 | { 37 | name: 'h1', 38 | attrs: { 39 | class: 'title' 40 | } 41 | }, 42 | { 43 | name: 'div', 44 | attrs: { 45 | class: 'content' 46 | } 47 | } 48 | ] 49 | }, 50 | { 51 | name: 'script', 52 | attrs: { 53 | type: 'text/javascript', 54 | src: "../app.js" 55 | } 56 | } 57 | ] 58 | } 59 | ]; 60 | }, 61 | onSelect: function( node ) { 62 | this.data.selected = node; 63 | this.$update(); 64 | } 65 | } 66 | ``` 67 | -------------------------------------------------------------------------------- /packages/_site/docs/Form/horizontal.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Horizontal 6 | 7 | ```html 8 |
9 | 10 | Nickname 11 | 12 | 13 | 14 | 15 | 16 | 17 | Email 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Agree something 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | ``` 38 | -------------------------------------------------------------------------------- /packages/_site/docs/Form/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | ### Pure provides two common form layout 6 | -------------------------------------------------------------------------------- /packages/_site/docs/Form/stacked.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Stacked 6 | 7 | ```html 8 |
9 | 10 | Nickname 11 | 12 | 13 | 14 | 15 | 16 | 17 | Email 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Agree something 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | ``` 38 | -------------------------------------------------------------------------------- /packages/_site/docs/Icon/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | With unicode 6 | 7 | ```html 8 |
9 | 10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Icon/fontclass.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | With type ( Recommended ) 6 | 7 | ```html 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | ``` 25 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/block.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Block 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Disabled 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/error-with-message.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | --- 4 | 5 | Error Status With Error Message 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/error.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Error Status 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 | 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/_site/docs/Input/transparent.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Transparent 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Loading/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | ``` 13 | 14 | ```js 15 | { 16 | onStart() { 17 | Pure.loading.start(); 18 | }, 19 | onInc() { 20 | Pure.loading.inc(); 21 | }, 22 | onUpdate() { 23 | Pure.loading.update( 90 ); 24 | }, 25 | onFinish() { 26 | Pure.loading.finish(); 27 | } 28 | } 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/_site/docs/Message/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | info 9 | success 10 | warning 11 | error 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/_site/docs/Message/programtic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | in programtic way 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | ``` 13 | 14 | ```js 15 | { 16 | onMessage: function( type ) { 17 | Pure.message( { 18 | type: type, 19 | content: 'Hey there ;)', 20 | } ); 21 | } 22 | } 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/_site/docs/Modal/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ProTip: Modal has no z-index by default 8 | 9 | ```html 10 | 11 | {#if showModal} 12 | 19 |
20 | 21 |
22 | 23 | {/if} 24 | ``` 25 | -------------------------------------------------------------------------------- /packages/_site/docs/Modal/closable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Closable 6 | 7 | ```html 8 | 9 | {#if showModal} 10 | 19 |
20 | 21 |
22 | 23 | {/if} 24 | ``` 25 | -------------------------------------------------------------------------------- /packages/_site/docs/Notification/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | ```js 12 | { 13 | onNotify: function () { 14 | Pure.notify( { 15 | title: 'title', 16 | description: 'description', 17 | closable: true, 18 | } ) 19 | }, 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /packages/_site/docs/Notification/type.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Type 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | ``` 13 | 14 | ```js 15 | { 16 | onNotify: function ( type ) { 17 | Pure.notify( { 18 | type: type, 19 | title: 'title', 20 | description: 'description', 21 | closable: true, 22 | } ) 23 | }, 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | --- 4 | 5 | Disabled 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 |

10 | { v } 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/min-max.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Min and Max 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Size 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/NumberInput/step.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Step 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Pagination/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 14 |
15 | Current: { current || 50 } 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/_site/docs/Pagination/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | PrevText and NextText 6 | 7 | ```html 8 | 16 |
17 | Current: { current || 50 } 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressBar/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 |
10 | 11 |
12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressBar/text-inside.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Text Inside 6 | 7 | ```html 8 | 9 |
10 | 11 |
12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressCircle/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 |
10 | 11 | ``` 12 | 13 | ```js 14 | { 15 | config: function() { 16 | this.data.percentage = 0; 17 | }, 18 | onChange: function( newValue ) { 19 | this.data.percentage = newValue; 20 | } 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressCircle/custom-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Custom Text 6 | 7 | ```html 8 | 9 |
Hello World
10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressCircle/show-percentage-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Show Percentage Text 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/ProgressCircle/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Size 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Radio/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | Option 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Radio/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | button 6 | 7 | ```html 8 | 9 | Option 1 10 | Option 2 11 | Option 3 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/Radio/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 | Option 1 10 | Option 2 11 | Option 3 12 | 13 |

14 | Checked：{ v || 'none' } 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/_site/docs/Radio/group.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Group 6 | 7 | ```html 8 | 9 | Option 1 10 | Option 2 11 | Option 3 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/Rate/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Rate/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 |

10 | { value } 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Rate/readonly.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Readonly 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Rate/total.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Total 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Select/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/Select/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 13 |

14 | Selected: { selected || 'none' } 15 | ``` 16 | 17 | ```js 18 | { 19 | onChange: function( value ) { 20 | this.data.selected = value; 21 | } 22 | } 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/_site/docs/Select/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Style your Option 6 | 7 | ```html 8 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/_site/docs/Select/transparent.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Transparent 6 | 7 | ```html 8 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/_site/docs/Spinner/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Spinner/block.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Block 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Switch/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Switch/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 |

10 | Checked: { v !== undefined ? v : 'none' } 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Table/interaction.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Wanna handle events in table? use raw TR and TD instead 6 | 7 | ```html 8 | 9 | {#list dataSource as ds} 10 | 11 | 12 | 13 | 16 | 17 | {/list} 18 |
{ ds.name }{ ds.email } 14 | 15 |
19 | ``` 20 | 21 | ```js 22 | { 23 | config: function() { 24 | this.data.fields = [ 25 | { 26 | label: 'Name' 27 | }, 28 | { 29 | label: 'Email' 30 | }, 31 | { 32 | label: 'Operation' 33 | } 34 | ]; 35 | 36 | this.data.dataSource = [ 37 | { 38 | name: 'Jim', 39 | email: 'jim@example.com' 40 | }, 41 | { 42 | name: 'Mike', 43 | email: 'mike@example.com' 44 | }, 45 | { 46 | name: 'Sam', 47 | email: 'sam@example.com' 48 | } 49 | ] 50 | }, 51 | onClick: function( v ) { 52 | Pure.message( { 53 | type: 'info', 54 | content: 'you clicked ' + v.name, 55 | duration: 1000, 56 | } ); 57 | } 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /packages/_site/docs/Tabs/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | Content in first tab 11 | 12 | 13 | Content in second tab 14 | 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/_site/docs/Tabs/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | 9 | 10 | Content in first tab 11 | 12 | 13 | Content in second tab 14 | 15 | 16 | 17 | selected: { currentTabKey || 'first' } 18 | ``` 19 | 20 | ```js 21 | { 22 | onChange: function( key ) { 23 | this.data.currentTabKey = key; 24 | this.$update(); 25 | } 26 | } 27 | ``` 28 | -------------------------------------------------------------------------------- /packages/_site/docs/Tabs/key.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Use key 6 | 7 | ```html 8 | 9 | 10 | Content in first tab 11 | 12 | 13 | Content in second tab 14 | 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /packages/_site/docs/Tag/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | tag 9 | closable 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/_site/docs/Tag/checkable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Checkable 6 | 7 | ```html 8 | checkable 9 | checked 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/_site/docs/Tag/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Event 6 | 7 | ```html 8 | click 9 | 10 | {#if showTag} 11 | close 12 | {/if} 13 | 14 | check 15 | ``` 16 | 17 | ```js 18 | { 19 | config: function () { 20 | this.data.showTag = true; 21 | }, 22 | onClick: function() { 23 | Pure.message( { 24 | content: 'clicked' 25 | } ); 26 | }, 27 | onClose: function () { 28 | this.data.showTag = false; 29 | }, 30 | onCheck: function ( isChecked ) { 31 | Pure.message( { 32 | content: isChecked ? 'checked' : 'unchecked' 33 | } ); 34 | }, 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /packages/_site/docs/Textarea/autosize.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | --- 4 | 5 | Autosize 6 | 7 | use `auto`, `autosize` or `autoresize` property to make Textarea adjust height automatically to fit its content 8 | 9 | ```html 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/_site/docs/Textarea/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Textarea/block.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Block 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/docs/Tooltip/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/_site/docs/Upload/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | --- 4 | 5 | Basic 6 | 7 | ```html 8 | 9 | ``` -------------------------------------------------------------------------------- /packages/_site/docs/Upload/drop.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | --- 4 | 5 | Drop 6 | 7 | ```html 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/_site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "site", 4 | "author": "fengzilong ", 5 | "license": "MIT", 6 | "devDependencies": { 7 | "kopy": "^5.0.5", 8 | "pure-ui": "^0.3.0", 9 | "@pure/theme": "^0.1.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/_site/scripts/copy-theme.js: -------------------------------------------------------------------------------- 1 | const copy = require( 'kopy' ); 2 | const path = require( 'path' ); 3 | 4 | copy( 5 | path.resolve( __dirname, '../../_theme/lib' ), 6 | path.resolve( __dirname, '../public/theme/default' ), 7 | {} 8 | ); 9 | -------------------------------------------------------------------------------- /packages/_site/scripts/docs.js: -------------------------------------------------------------------------------- 1 | const marked = require( 'marked' ); 2 | const fm = require( 'front-matter' ); 3 | const glob = require( 'glob' ); 4 | const _ = require( 'lodash' ); 5 | const path = require( 'path' ); 6 | const fs = require( 'fs' ); 7 | 8 | process.chdir( path.resolve( __dirname, '../' ) ); 9 | 10 | const cwd = process.cwd(); 11 | const renderer = new marked.Renderer(); 12 | var codes = {}; 13 | 14 | renderer.code = function( code, language ) { 15 | codes[ language ] = code; 16 | return ''; 17 | }; 18 | 19 | const docs = {}; 20 | 21 | glob( '**/*.md', { 22 | cwd: path.resolve( cwd, 'docs' ) 23 | }, function( err, files ) { 24 | if( err ) return; 25 | 26 | files.forEach(function( v, i ) { 27 | var componentName = path.dirname( v ); 28 | var p = path.join( 'docs', v ); 29 | docs[ componentName ] = docs[ componentName ] || []; 30 | docs[ componentName ].push({ 31 | path: v 32 | }); 33 | }); 34 | 35 | // parse 36 | var doc; 37 | var id = 0; 38 | for( var i in docs ) { 39 | doc = docs[ i ]; 40 | for( var j = 0, len = doc.length; j < len; j++ ) { 41 | var content = fs.readFileSync( path.resolve( cwd, 'docs', doc[ j ].path ), 'utf-8' ); 42 | var parsed = fm( content ); 43 | doc[ j ].attrs = parsed.attributes; 44 | doc[ j ].source = parsed.body; 45 | codes = {}; 46 | doc[ j ].html = marked( parsed.body, { renderer: renderer } ); 47 | doc[ j ].code = codes; 48 | doc[ j ].id = id++; 49 | } 50 | 51 | docs[ i ] = _.sortBy( docs[ i ], function( v ) { 52 | return v.attrs.order; 53 | } ); 54 | } 55 | 56 | // extract js 57 | var output = ''; 58 | var assignStr = ''; 59 | _.each( docs, function( doc, name ) { 60 | _.each( doc, function( v, i ) { 61 | if( v.code.js ) { 62 | assignStr += 'var ' + name + i + ' = ' + v.code.js + ';\n'; 63 | } 64 | } ); 65 | } ); 66 | 67 | output += assignStr; 68 | output += 'export default '; 69 | 70 | var jscodes = {}; 71 | _.each( docs, function( doc, name ) { 72 | jscodes[ name ] = []; 73 | _.each( doc, function( v, i ) { 74 | if( v.code.js ) { 75 | jscodes[ name ].push( name + i ); 76 | } else { 77 | // 占位 78 | jscodes[ name ].push( 'void 0' ); 79 | } 80 | } ); 81 | } ); 82 | 83 | jscodes = JSON.stringify( jscodes ); 84 | 85 | // e.g. "Table0" => Table0 86 | var regStr = '"(' + Object.keys( docs ).map(function( doc ) { 87 | return doc + '\\d+?'; 88 | }).join('|') + ')"'; 89 | 90 | jscodes = jscodes.replace(new RegExp( regStr, 'g' ), function(_, match) { 91 | return match; 92 | }); 93 | 94 | jscodes = jscodes.replace(new RegExp( '"(void 0)"', 'g' ), function(_, match) { 95 | return match; 96 | }); 97 | 98 | output += jscodes; 99 | 100 | fs.writeFileSync( 'src/docs.json', JSON.stringify( docs, 0, 4 ), 'utf-8' ); 101 | fs.writeFileSync( 'src/docs-js.js', output, 'utf-8' ); 102 | } ); 103 | -------------------------------------------------------------------------------- /packages/_site/scripts/gh-pages.js: -------------------------------------------------------------------------------- 1 | const ghpages = require( 'gh-pages' ); 2 | const path = require( 'path' ); 3 | 4 | ghpages.clean(); 5 | ghpages.publish( path.resolve( __dirname, '../public' ), { 6 | logger: function( message ) { 7 | console.log( message ); 8 | } 9 | }, function ( err ) { 10 | if ( err ) { 11 | return console.error( '\nghpages publish error:\n\n', err.message ); 12 | } 13 | 14 | console.log( 'ghpages published' ); 15 | } ); 16 | -------------------------------------------------------------------------------- /packages/_site/scripts/webpack.config.site.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' ); 2 | const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); 3 | const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); 4 | const webpack = require( 'webpack' ); 5 | const autoprefixer = require( 'autoprefixer' ); 6 | const path = require( 'path' ); 7 | 8 | process.chdir( path.resolve( __dirname, '../' ) ); 9 | const cwd = process.cwd(); 10 | 11 | module.exports = { 12 | entry: './src/index.js', 13 | cwd: cwd, 14 | output: { 15 | path: './public/dist', 16 | filename: 'app-[hash:8].js', 17 | jsonpFunction: 'Q' 18 | }, 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.rgl$/, 23 | loader: 'regular' 24 | }, 25 | { 26 | test: /\.js$/, 27 | loader: 'babel', 28 | exclude: /node_modules/, 29 | query: { 30 | presets: 'es2015' 31 | } 32 | }, 33 | { 34 | test: /\.(css|less)$/, 35 | loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!postcss-loader!less-loader' ), 36 | exclude: /node_modules/ 37 | }, 38 | { 39 | test: /\.json$/, 40 | loader: 'json', 41 | exclude: /node_modules/ 42 | }, 43 | { 44 | test: /\.(ttf|woff|eot|svg)(\?t=\d+)*$/, 45 | exclude: /node_modules/, 46 | loader: 'url-loader?limit=102400&name=[name].[ext]?[hash:8]' 47 | }, 48 | ], 49 | noParse: [ /regularjs/, /pure-ui/ ] 50 | }, 51 | regular: { 52 | loaders: { 53 | css: ExtractTextPlugin.extract( 'css' ), 54 | less: ExtractTextPlugin.extract( 'css!less' ), 55 | } 56 | }, 57 | postcss: function () { 58 | return [ 59 | autoprefixer(), 60 | ] 61 | }, 62 | resolve: { 63 | extensions: [ '', '.js', 'json', '.css', '.rgl' ], 64 | alias: { 65 | regularjs: path.resolve( '../../node_modules/regularjs/dist/regular.min.js' ), 66 | }, 67 | }, 68 | plugins: [ 69 | new ExtractTextPlugin( 'app-[hash:8].css' ), 70 | new HtmlWebpackPlugin( { 71 | template: 'src/_index.html', 72 | filename: '../index.html', 73 | } ), 74 | new webpack.optimize.UglifyJsPlugin( { 75 | compress: { 76 | warnings: false 77 | } 78 | } ), 79 | new CopyWebpackPlugin( [ 80 | { from: 'src/CNAME', to: '../' }, 81 | ] ), 82 | ] 83 | }; 84 | -------------------------------------------------------------------------------- /packages/_site/src/CNAME: -------------------------------------------------------------------------------- 1 | pure.js.org -------------------------------------------------------------------------------- /packages/_site/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pure Docs 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/_site/src/components/app.rgl: -------------------------------------------------------------------------------- 1 | 15 | 16 | 42 | 43 | 61 | 62 | 84 | -------------------------------------------------------------------------------- /packages/_site/src/components/demo.rgl: -------------------------------------------------------------------------------- 1 | 24 | 25 | 68 | 69 | 103 | 104 | 143 | -------------------------------------------------------------------------------- /packages/_site/src/dispatcher.js: -------------------------------------------------------------------------------- 1 | import { EventEmitter2 } from 'eventemitter2'; 2 | 3 | export default new EventEmitter2(); 4 | -------------------------------------------------------------------------------- /packages/_site/src/fonts/Pacifico-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pure-UI/pure/50ac32eab65a25c1d4f52073c596f2572c4bdc9c/packages/_site/src/fonts/Pacifico-Regular.ttf -------------------------------------------------------------------------------- /packages/_site/src/highlight.css: -------------------------------------------------------------------------------- 1 | .hljs { 2 | display: block; 3 | overflow-x: auto; 4 | padding: 0.5em; 5 | background: #FBFBFB; 6 | color: #44699a; 7 | } 8 | .hljs-tag { 9 | color: #9399b1; 10 | } 11 | .hljs-name { 12 | color: #4c5c77; 13 | } 14 | .hljs-attr, .hljs-keyword { 15 | color: #e550aa; 16 | } 17 | .hljs-string { 18 | color: #311eb7; 19 | } 20 | .hljs-comment { 21 | color: #8cabcf; 22 | } 23 | .hljs-title,.hljs-section,.hljs-built_in,.hljs-literal,.hljs-type,.hljs-addition,.hljs-quote,.hljs-selector-id,.hljs-selector-class { 24 | color: #4c5c77; 25 | } 26 | .hljs-meta,.hljs-subst,.hljs-symbol,.hljs-regexp,.hljs-attribute,.hljs-deletion,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-bullet { 27 | color: #ed55b1; 28 | } 29 | .hljs-emphasis { 30 | font-style: italic; 31 | } 32 | -------------------------------------------------------------------------------- /packages/_site/src/index.js: -------------------------------------------------------------------------------- 1 | import { Router } from 'director'; 2 | import docs from './docs.json'; 3 | import dispatcher from './dispatcher'; 4 | import App from './components/app'; 5 | import Regular from 'regularjs'; 6 | import Pure from 'pure-ui'; 7 | 8 | import './site.css'; 9 | import './highlight.css'; 10 | 11 | Regular.use( Pure ); 12 | window.Pure = Pure; 13 | 14 | new App().$inject( document.getElementById( 'app' ) ); 15 | 16 | const router = new Router(); 17 | router.on( '/:component', component => { 18 | component = component || ''; 19 | document.title = ( component ? component + ' - ' : '' ) + 'Pure Docs'; 20 | dispatcher.emit( 'update', docs[ component ], component ); 21 | } ); 22 | router.init(); 23 | -------------------------------------------------------------------------------- /packages/_site/src/site.css: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background-color: #e8f0f6; 3 | } 4 | 5 | /* vietnamese */ 6 | @font-face { 7 | font-family: 'Pacifico'; 8 | font-style: normal; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | src: url('./fonts/Pacifico-Regular.ttf') format('truetype'); 12 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 13 | } 14 | 15 | /* latin-ext */ 16 | @font-face { 17 | font-family: 'Pacifico'; 18 | font-style: normal; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | src: url('./fonts/Pacifico-Regular.ttf') format('truetype'); 22 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 23 | } 24 | 25 | /* latin */ 26 | @font-face { 27 | font-family: 'Pacifico'; 28 | font-style: normal; 29 | -webkit-font-smoothing: antialiased; 30 | -moz-osx-font-smoothing: grayscale; 31 | src: url('./fonts/Pacifico-Regular.ttf') format('truetype'); 32 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 33 | } 34 | 35 | .pure-modal__mask { 36 | z-index: 1; 37 | } 38 | 39 | .pure-message--fixed { 40 | z-index: 1; 41 | } 42 | 43 | .demo-icons .pure-icon { 44 | font-size: 22px; 45 | margin-right: 5px; 46 | color: #4c5c77; 47 | transition: all ease .4s; 48 | transform-origin: center; 49 | } 50 | 51 | .demo-icons .pure-icon:hover { 52 | transform: scale(1.4); 53 | } 54 | 55 | .pure-notification-container { 56 | z-index: 1; 57 | } 58 | 59 | /* search override start */ 60 | .algolia-autocomplete { 61 | line-height: normal; 62 | } 63 | .algolia-autocomplete .aa-dropdown-menu { 64 | width: 100%; 65 | border-color: #999; 66 | font-size: 0.9rem; 67 | } 68 | .algolia-autocomplete .ds-dropdown-menu { 69 | min-width: 540px; 70 | } 71 | .algolia-autocomplete .algolia-docsearch-suggestion { 72 | border-color: #ddd; 73 | padding: 0; 74 | } 75 | .algolia-autocomplete .algolia-docsearch-suggestion--content { 76 | color: #2c3e50; 77 | } 78 | .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { 79 | border-color: #ddd; 80 | } 81 | .algolia-autocomplete .algolia-docsearch-suggestion--category-header { 82 | background: #567ef4; 83 | color: #fff; 84 | padding: 5px 10px; 85 | margin: 0; 86 | font-size: 1em; 87 | border-bottom: none; 88 | } 89 | .algolia-autocomplete .algolia-docsearch-footer { 90 | border-color: #ddd; 91 | } 92 | .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight { 93 | background: rgba(255,255,255,0.6); 94 | } 95 | .algolia-docsearch-suggestion--highlight { 96 | color: shade(#567ef4,10%); 97 | } 98 | .aa-cursor .algolia-docsearch-suggestion--content { 99 | color: #2c3e50; 100 | } 101 | 102 | /* search override end */ 103 | -------------------------------------------------------------------------------- /packages/_theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/theme", 3 | "version": "0.1.0", 4 | "main": "lib/index.css", 5 | "play:main": "src/index.js", 6 | "scripts": { 7 | "theme": "pure --name=pureTheme" 8 | }, 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/_theme/src/common/color.less: -------------------------------------------------------------------------------- 1 | @primary-color: #567ef4; 2 | @form-color: #333; 3 | @breadcrumb-color: #666; 4 | @breadcrumb-current-color: #5e5e5e; 5 | -------------------------------------------------------------------------------- /packages/_theme/src/common/mixin.less: -------------------------------------------------------------------------------- 1 | .clearfix() { 2 | &::after { 3 | display: block; 4 | content: ""; 5 | clear: both; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/_theme/src/common/var.less: -------------------------------------------------------------------------------- 1 | @pure-prefix: pure; 2 | 3 | // z-index 4 | @loading-zindex: 500; 5 | @message-zindex: 400; 6 | -------------------------------------------------------------------------------- /packages/_theme/src/components/badge.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @badge-prefix-cls: ~"@{pure-prefix}-badge"; 5 | 6 | .@{badge-prefix-cls} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | transform: translate3d(50%,-50%,0); 11 | padding: 0 4px; 12 | border-radius: 10px; 13 | background-color: #e91e63; 14 | font-size: 11px; 15 | color: #fff; 16 | overflow: hidden; 17 | border: solid 3px #fff; 18 | 19 | &.is-dot { 20 | border-radius: 50%; 21 | padding: 0; 22 | width: 7px; 23 | height: 7px; 24 | } 25 | 26 | &__wrapper { 27 | position: relative; 28 | display: inline-block; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/_theme/src/components/breadcrumb-item.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @breadcrumb-item-prefix-cls: ~"@{pure-prefix}-breadcrumb-item"; 5 | 6 | .@{breadcrumb-item-prefix-cls} { 7 | display: inline-block; 8 | color: @breadcrumb-color; 9 | vertical-align: middle; 10 | font-size: 1rem; 11 | 12 | &.is-link { 13 | cursor: pointer; 14 | } 15 | 16 | &:last-child { 17 | color: @breadcrumb-current-color; 18 | font-weight: bold; 19 | 20 | .@{breadcrumb-item-prefix-cls}__sep { 21 | display: none; 22 | } 23 | } 24 | 25 | &__sep { 26 | margin: 0 4px; 27 | color: #ddd; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/_theme/src/components/breadcrumb.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @breadcrumb-prefix-cls: ~"@{pure-prefix}-breadcrumb"; 5 | 6 | .@{breadcrumb-prefix-cls} { 7 | display: inline-block; 8 | user-select: none; 9 | } 10 | -------------------------------------------------------------------------------- /packages/_theme/src/components/card.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @card-prefix-cls: ~"@{pure-prefix}-card"; 5 | 6 | .@{card-prefix-cls} { 7 | border: solid 1px #f5f5f5; 8 | border-radius: 4px; 9 | padding: 15px; 10 | transition: box-shadow .2s ease-in-out; 11 | margin-bottom: 10px; 12 | 13 | &:hover { 14 | box-shadow: 0 1px 4px -1px rgba(0,0,0,.1); 15 | } 16 | 17 | &__title { 18 | font-size: 16px; 19 | font-weight: bold; 20 | margin-bottom: 15px; 21 | color: #333; 22 | line-height: 1; 23 | cursor: default; 24 | } 25 | 26 | &__text { 27 | display: inline-block; 28 | vertical-align: middle; 29 | } 30 | 31 | &__content { 32 | font-size: 14px; 33 | color: #666; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/_theme/src/components/checkbox.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @checkbox-prefix-cls: ~"@{pure-prefix}-checkbox"; 5 | 6 | @checkbox-size: 18px; 7 | @checkbox-border-color: #ddd; 8 | @checkbox-checkmark-width: 10px; 9 | @checkbox-checkmark-height: 5px; 10 | 11 | .@{checkbox-prefix-cls} { 12 | display: inline-block; 13 | position: relative; 14 | margin-right: 5px; 15 | font-size: 13px; 16 | cursor: pointer; 17 | user-select: none; 18 | 19 | &.is-checked { 20 | .@{checkbox-prefix-cls}__inner { 21 | border: solid 1px @primary-color; 22 | } 23 | 24 | .@{checkbox-prefix-cls}__inner::after { 25 | transform: scale(1) rotate(-45deg); 26 | } 27 | } 28 | 29 | &__inner { 30 | width: @checkbox-size; 31 | height: @checkbox-size; 32 | display: inline-block; 33 | border: solid 1px @checkbox-border-color; 34 | vertical-align: middle; 35 | margin-right: 3px; 36 | border-radius: 3px; 37 | 38 | &::after { 39 | content: ''; 40 | display: block; 41 | position: absolute; 42 | top: 5px; 43 | left: 5px; 44 | width: @checkbox-checkmark-width; 45 | height: @checkbox-checkmark-height; 46 | border-left: solid 1px @primary-color; 47 | border-bottom: solid 1px @primary-color; 48 | transform: scale(0) rotate(-45deg); 49 | transition: all .1s cubic-bezier(.78,.14,.15,.86); 50 | } 51 | } 52 | 53 | &__text { 54 | vertical-align: middle; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/_theme/src/components/element-tree-node.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @element-tree-node-prefix-cls: ~"@{pure-prefix}-element-tree-node"; 5 | @hover-color: #f0f0f0; 6 | 7 | .@{element-tree-node-prefix-cls} { 8 | cursor: default; 9 | 10 | &--selected { 11 | .@{element-tree-node-prefix-cls}__arrow { 12 | color: #fff; 13 | } 14 | 15 | .@{element-tree-node-prefix-cls}__attr-key { 16 | color: #bbb; 17 | } 18 | 19 | .@{element-tree-node-prefix-cls}__attr-plain { 20 | color: #bbb; 21 | } 22 | 23 | .@{element-tree-node-prefix-cls}__attr-value { 24 | color: #fff; 25 | } 26 | } 27 | 28 | &__children { 29 | padding-left: 30px; 30 | } 31 | 32 | &__tag { 33 | position: relative; 34 | } 35 | 36 | &__arrow { 37 | display: inline-block; 38 | color: #666; 39 | transform: rotate(-90deg); 40 | user-select: none; 41 | 42 | &&--open { 43 | transform: rotate(0); 44 | } 45 | 46 | &&--invisible { 47 | visibility: hidden; 48 | } 49 | } 50 | 51 | &__open { 52 | box-sizing: border-box; 53 | display: block; 54 | height: 2em; 55 | line-height: 2em; 56 | text-align: left; 57 | color: #c71280; 58 | background-color: transparent; 59 | white-space: nowrap; 60 | 61 | &::before { 62 | display: block; 63 | content: ''; 64 | position: absolute; 65 | background-color: #ddd; 66 | height: 2em; 67 | } 68 | 69 | &.@{element-tree-node-prefix-cls}--hovered { 70 | &::before { 71 | left: 0; 72 | right: 0; 73 | background-color: @hover-color; 74 | } 75 | } 76 | 77 | &.@{element-tree-node-prefix-cls}--selected { 78 | color: #fff; 79 | 80 | &::before { 81 | left: 0; 82 | right: 0; 83 | background-color: #3879d9; 84 | } 85 | } 86 | } 87 | 88 | &__close { 89 | box-sizing: border-box; 90 | display: block; 91 | height: 2em; 92 | line-height: 2em; 93 | text-align: left; 94 | color: #c71280; 95 | background-color: transparent; 96 | text-indent: 1em; 97 | white-space: nowrap; 98 | 99 | &::before { 100 | display: block; 101 | content: ''; 102 | position: absolute; 103 | background-color: #ddd; 104 | height: 2em; 105 | } 106 | 107 | &.@{element-tree-node-prefix-cls}--hovered::before { 108 | left: 0; 109 | right: 0; 110 | background-color: @hover-color; 111 | } 112 | 113 | &.@{element-tree-node-prefix-cls}--selected { 114 | background-color: #3879d9; 115 | color: #fff; 116 | 117 | &::before { 118 | left: 0; 119 | right: 0; 120 | background-color: #3879d9; 121 | } 122 | } 123 | } 124 | 125 | &__attr-key { 126 | color: #9a4500; 127 | } 128 | 129 | &__attr-plain { 130 | color: #a894a6; 131 | } 132 | 133 | &__attr-value { 134 | color: #1a1aa6; 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /packages/_theme/src/components/element-tree.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @element-tree-prefix-cls: ~"@{pure-prefix}-element-tree"; 5 | 6 | .@{element-tree-prefix-cls} { 7 | position: relative; 8 | } 9 | -------------------------------------------------------------------------------- /packages/_theme/src/components/form-control.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @form-control-prefix-cls: ~"@{pure-prefix}-form-control"; 5 | 6 | .@{form-control-prefix-cls} { 7 | display: flex; 8 | align-items: center; 9 | white-space: nowrap; 10 | } 11 | -------------------------------------------------------------------------------- /packages/_theme/src/components/form-item.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @form-item-prefix-cls: ~"@{pure-prefix}-form-item"; 5 | 6 | .@{form-item-prefix-cls} { 7 | display: flex; 8 | margin-bottom: 10px; 9 | align-items: center; 10 | } 11 | -------------------------------------------------------------------------------- /packages/_theme/src/components/form-label.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @form-label-prefix-cls: ~"@{pure-prefix}-form-label"; 5 | 6 | .@{form-label-prefix-cls} { 7 | width: 20%; 8 | margin-right: 20px; 9 | text-align: right; 10 | font-size: 1rem; 11 | } 12 | -------------------------------------------------------------------------------- /packages/_theme/src/components/form.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @form-prefix-cls: ~"@{pure-prefix}-form"; 5 | @form-label-prefix-cls: ~"@{pure-prefix}-form-label"; 6 | @form-control-prefix-cls: ~"@{pure-prefix}-form-control"; 7 | @form-item-prefix-cls: ~"@{pure-prefix}-form-item"; 8 | @input-prefix-cls: ~"@{pure-prefix}-input"; 9 | 10 | .@{form-prefix-cls}--block { 11 | .@{form-control-prefix-cls} { 12 | flex: 1; 13 | 14 | input, 15 | textarea, 16 | select { 17 | flex: 1; 18 | } 19 | 20 | .@{input-prefix-cls}__wrapper { 21 | display: flex; 22 | flex: 1; 23 | flex-wrap: wrap; 24 | } 25 | } 26 | } 27 | 28 | .@{form-prefix-cls}--stacked { 29 | .@{form-label-prefix-cls} { 30 | text-align: left !important; 31 | margin-bottom: 10px; 32 | } 33 | 34 | .@{form-item-prefix-cls} { 35 | display: block !important; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/_theme/src/components/icon.less: -------------------------------------------------------------------------------- 1 | @import "../common/var.less"; 2 | 3 | @icon-prefix-cls: ~"@{pure-prefix}-icon"; 4 | 5 | .@{icon-prefix-cls} { 6 | display: inline-block; 7 | min-width: 1em; 8 | vertical-align: baseline; 9 | 10 | &--rotate { 11 | animation: pureIconSpin 1.4s linear infinite; 12 | } 13 | } 14 | 15 | @keyframes pureIconSpin { 16 | 0% { 17 | transform: rotate(0); 18 | } 19 | 20 | 100% { 21 | transform: rotate(360deg); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/_theme/src/components/input.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @input-prefix-cls: ~"@{pure-prefix}-input"; 5 | 6 | .@{input-prefix-cls} { 7 | display: inline-block; 8 | width: 100%; 9 | background-color: #fff; 10 | color: @form-color; 11 | outline: none; 12 | padding: 0 10px; 13 | font-size: 13px; 14 | vertical-align: middle; 15 | box-sizing: border-box; 16 | border: solid 1px #ddd; 17 | cursor: inherit; 18 | font-family: inherit; 19 | height: 36px; 20 | 21 | &:focus { 22 | border: solid 1px @primary-color; 23 | } 24 | 25 | &--block { 26 | display: block; 27 | width: 100%; 28 | } 29 | 30 | &--round { 31 | border-radius: 3px; 32 | } 33 | 34 | &--readonly { 35 | &:hover { 36 | border: solid 1px shade(#ddd,15%); 37 | } 38 | 39 | &:focus { 40 | border: solid 1px shade(#ddd,15%); 41 | } 42 | } 43 | 44 | &--transparent { 45 | border: solid 1px transparent; 46 | 47 | &:hover { 48 | border: solid 1px shade(#ddd,15%); 49 | } 50 | 51 | &:not(.@{input-prefix-cls}--readonly):focus { 52 | border: solid 1px @primary-color; 53 | } 54 | } 55 | 56 | &--sm { 57 | height: 32px; 58 | } 59 | 60 | &--error { 61 | border: solid 1px #fd8282; 62 | } 63 | 64 | &--disabled { 65 | background-color: #f7f7f7; 66 | border: solid 1px #eaeaea; 67 | cursor: not-allowed; 68 | } 69 | 70 | &__wrapper { 71 | display: inline-block; 72 | vertical-align: middle; 73 | 74 | &--block { 75 | display: block; 76 | width: 100%; 77 | } 78 | } 79 | 80 | &__error-message { 81 | width: 100%; 82 | color: #fd8282; 83 | font-size: 13px; 84 | margin-top: 5px; 85 | box-sizing: border-box; 86 | word-break: break-all; 87 | 88 | > .pure-icon { 89 | margin-right: 5px; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /packages/_theme/src/components/loading.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @loading-prefix-cls: ~"@{pure-prefix}-loading"; 5 | 6 | .@{loading-prefix-cls} { 7 | position: relative; 8 | display: block; 9 | width: 0; 10 | height: 2px; 11 | background-color: @primary-color; 12 | opacity: 1; 13 | 14 | &__container { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | width: 100%; 20 | pointer-events: none; 21 | z-index: @loading-zindex; 22 | } 23 | 24 | &--transition { 25 | transition: width .3s ease-in-out, opacity 1s ease-in-out; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/_theme/src/components/message.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @message-prefix-cls: ~"@{pure-prefix}-message"; 5 | @message-container-prefix-cls: ~"@{pure-prefix}-message__container"; 6 | 7 | .@{message-prefix-cls} { 8 | display: inline-block; 9 | 10 | &__inner { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 32px; 15 | padding: 0 15px; 16 | border-radius: 4px; 17 | background-color: #fff; 18 | border: solid 1px #ddd; 19 | color: #666; 20 | box-shadow: 2px 2px 8px -2px rgba(50,50,50,.14); 21 | font-size: 1rem; 22 | } 23 | 24 | &__icon { 25 | font-size: 16px; 26 | margin-right: 7px; 27 | } 28 | } 29 | 30 | .@{message-container-prefix-cls} { 31 | z-index: @message-zindex; 32 | 33 | &.is-fixed { 34 | position: fixed; 35 | top: 0; 36 | left: 50%; 37 | transform: translate3d(-50%,-40px,0); 38 | } 39 | 40 | &.is-will-transition { 41 | opacity: .8; 42 | transition: transform .3s cubic-bezier(.4,0,0,1), opacity .7s cubic-bezier(.4,0,0,1); 43 | } 44 | 45 | &.is-in { 46 | transform: translate3d(-50%,15px,0); 47 | opacity: 1; 48 | } 49 | 50 | &.is-out { 51 | transform: translate3d(-50%,10px,0); 52 | opacity: 0; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/_theme/src/components/modal.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @modal-prefix-cls: ~"@{pure-prefix}-modal"; 5 | 6 | .@{modal-prefix-cls} { 7 | position: fixed; 8 | top: 10%; 9 | left: 50%; 10 | min-width: 360px; 11 | max-width: 88%; 12 | background-color: #fff; 13 | border-radius: 5px; 14 | box-shadow: 2px 4px 6px 1px rgba(50,50,50,.14); 15 | color: #333; 16 | transition: all .5s cubic-bezier(.4,0,0,1.29); 17 | transform: translate3d(-50%,-50%,0); 18 | opacity: 0; 19 | overflow: hidden; 20 | 21 | &--in { 22 | transform: translate3d(-50%,0,0); 23 | opacity: 1; 24 | } 25 | 26 | &--out { 27 | transform: translate3d(-50%,-50%,0); 28 | opacity: 0; 29 | } 30 | 31 | &__mask { 32 | position: fixed; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | background-color: rgba(0,0,0,.4); 38 | transition: all .5s cubic-bezier(.4,0,0,1.29); 39 | opacity: 1; 40 | 41 | &--out { 42 | opacity: 0; 43 | } 44 | } 45 | 46 | &__close { 47 | position: absolute; 48 | top: 13px; 49 | right: 15px; 50 | color: #999; 51 | cursor: pointer; 52 | padding: 2px; 53 | line-height: 1; 54 | font-size: 16px; 55 | } 56 | 57 | &__head { 58 | text-align: center; 59 | padding: 15px 0; 60 | font-size: 16px; 61 | border-bottom: solid 1px #f1f1f1; 62 | } 63 | 64 | &__body { 65 | padding: 20px 40px; 66 | font-size: 15px; 67 | max-height: 60vh; 68 | overflow-y: auto; 69 | 70 | &::-webkit-scrollbar { 71 | width: 6px; 72 | height: 6px; 73 | } 74 | 75 | &::-webkit-scrollbar-track { 76 | width: 6px; 77 | height: 6px; 78 | } 79 | 80 | &::-webkit-scrollbar-thumb { 81 | width: 6px; 82 | height: 6px; 83 | border-radius: 10px; 84 | background-color: fade(@primary-color,15%); 85 | } 86 | } 87 | 88 | &__actions { 89 | padding: 14px 20px; 90 | text-align: right; 91 | background-color: rgba(241,241,241,.39); 92 | border-top: solid 1px #f1f1f1; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /packages/_theme/src/components/notification.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | @import '../common/mixin.less'; 4 | 5 | @notification-prefix-cls: ~"@{pure-prefix}-notification"; 6 | @notification-title-color: #333; 7 | @notification-description-color: #999; 8 | 9 | .@{notification-prefix-cls} { 10 | position: relative; 11 | padding: 20px 15px; 12 | border-radius: 5px; 13 | box-shadow: 1px 2px 6px 1px rgba(50,50,50,.14); 14 | background-color: #fff; 15 | overflow: hidden; 16 | 17 | .clearfix(); 18 | 19 | &--closable { 20 | .@{notification-prefix-cls}__title { 21 | padding-right: 25px; 22 | } 23 | } 24 | 25 | &--with-icon { 26 | .@{notification-prefix-cls}__content { 27 | margin-left: 44px; 28 | } 29 | } 30 | 31 | &__icon { 32 | float: left; 33 | font-size: 29px; 34 | line-height: 32px; 35 | } 36 | 37 | &__title { 38 | font-size: 14px; 39 | margin-bottom: 5px; 40 | color: @notification-title-color; 41 | } 42 | 43 | &__description { 44 | font-size: 12px; 45 | color: @notification-description-color; 46 | } 47 | 48 | &__close { 49 | position: absolute; 50 | top: 12px; 51 | right: 15px; 52 | cursor: pointer; 53 | padding: 1px 3px; 54 | color: #999; 55 | font-size: 12px; 56 | 57 | &:hover { 58 | background-color: #f2f2f2; 59 | color: #333; 60 | border-radius: 3px; 61 | } 62 | } 63 | } 64 | 65 | .@{notification-prefix-cls}-container { 66 | position: fixed; 67 | top: 20px; 68 | right: 0; 69 | margin-right: 20px; 70 | width: 320px; 71 | 72 | .@{notification-prefix-cls} { 73 | margin-bottom: 10px; 74 | 75 | &--will-transition { 76 | transition: transform .5s cubic-bezier(.79,.05,0,.96), opacity .5s ease; 77 | transform: translate3d(100%,0,0); 78 | opacity: 0; 79 | } 80 | 81 | &--in { 82 | transform: translate3d(0,0,0); 83 | opacity: 1; 84 | } 85 | 86 | &--out { 87 | transform: translate3d(0,-10px,0); 88 | opacity: 0; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /packages/_theme/src/components/number-input.less: -------------------------------------------------------------------------------- 1 | @import '../common/color.less'; 2 | @import '../common/var.less'; 3 | @import '../common/mixin.less'; 4 | 5 | @number-input-prefix-cls: ~"@{pure-prefix}-number-input"; 6 | @number-input-action-size: 36px; 7 | 8 | .@{number-input-prefix-cls} { 9 | position: relative; 10 | display: inline-block; 11 | vertical-align: top; 12 | background-color: #fff; 13 | color: @form-color; 14 | width: 140px; 15 | 16 | &__input { 17 | box-sizing: border-box; 18 | width: 100%; 19 | outline: none; 20 | padding: 0 @number-input-action-size; 21 | height: @number-input-action-size; 22 | font-size: 1rem; 23 | display: inline-block; 24 | vertical-align: middle; 25 | border: solid 1px #ddd; 26 | font-family: inherit; 27 | -webkit-appearance: none; 28 | text-align: center; 29 | 30 | &::-webkit-outer-spin-button, 31 | &::-webkit-inner-spin-button { 32 | -webkit-appearance: none; 33 | margin: 0; 34 | } 35 | 36 | &:focus { 37 | border: solid 1px @primary-color; 38 | } 39 | 40 | &.is-disabled { 41 | color: #999; 42 | cursor: not-allowed; 43 | } 44 | } 45 | 46 | &__action { 47 | box-sizing: border-box; 48 | position: absolute; 49 | top: 0; 50 | width: @number-input-action-size; 51 | height: @number-input-action-size; 52 | line-height: @number-input-action-size - 2; 53 | text-align: center; 54 | color: #666; 55 | cursor: pointer; 56 | user-select: none; 57 | 58 | &:not(.is-disabled):hover { 59 | color: @primary-color; 60 | } 61 | 62 | &.is-increase { 63 | left: 0; 64 | } 65 | 66 | &.is-decrease { 67 | right: 0; 68 | } 69 | 70 | &.is-disabled { 71 | color: #ddd; 72 | cursor: not-allowed; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /packages/_theme/src/components/option.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @option-prefix-cls: ~"@{pure-prefix}-option"; 5 | 6 | .@{option-prefix-cls} { 7 | display: flex; 8 | overflow: hidden; 9 | 10 | &:not(:first-child) { 11 | .@{option-prefix-cls}__content { 12 | border-top: solid 1px #f2f2f2; 13 | } 14 | } 15 | 16 | &:hover { 17 | background-color: #f9f9f9; 18 | } 19 | 20 | &.is-checked { 21 | position: relative; 22 | background-color: fade(@primary-color,6%); 23 | color: @primary-color; 24 | 25 | &:hover { 26 | background-color: fade(@primary-color,10%); 27 | } 28 | } 29 | 30 | &__icon { 31 | padding: 8px 4px; 32 | font-size: 13px; 33 | color: @primary-color; 34 | width: 20px; 35 | text-align: center; 36 | } 37 | 38 | &__content { 39 | flex: 1; 40 | padding: 8px 10px 8px 0; 41 | font-size: 13px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/_theme/src/components/pagination.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @pagination-prefix-cls: ~"@{pure-prefix}-pagination"; 5 | @button-prefix-cls: ~"@{pure-prefix}-button"; 6 | 7 | .@{pagination-prefix-cls} { 8 | > .@{button-prefix-cls}.@{button-prefix-cls}--sm { 9 | padding: 0 10px; 10 | } 11 | 12 | &__dots { 13 | display: inline-block; 14 | margin: 0 10px; 15 | color: #999; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/_theme/src/components/progress-bar.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @progress-bar-prefix-cls: ~"@{pure-prefix}-progress-bar"; 5 | 6 | @progress-bar-track-color: #dee2ea; 7 | @progress-bar-color: @primary-color; 8 | @progress-bar-default-height: 8px; 9 | @progress-bar-text-inside-height: 15px; 10 | 11 | .@{progress-bar-prefix-cls} { 12 | display: inline-block; 13 | width: 100%; 14 | box-sizing: border-box; 15 | padding-right: 43px; 16 | margin-right: -43px; 17 | 18 | &--text-inside { 19 | padding-right: 0; 20 | margin-right: 0; 21 | } 22 | 23 | &__container { 24 | font-size: 0; 25 | } 26 | 27 | &__outer { 28 | position: relative; 29 | border-radius: 10px; 30 | height: @progress-bar-default-height; 31 | background-color: @progress-bar-track-color; 32 | overflow: hidden; 33 | 34 | &--text-inside { 35 | height: @progress-bar-text-inside-height; 36 | } 37 | } 38 | 39 | &__inner { 40 | position: absolute; 41 | background-color: @progress-bar-color; 42 | height: 100%; 43 | transition: width .3s ease-in-out; 44 | border-radius: 10px; 45 | font-size: 11px; 46 | text-align: right; 47 | } 48 | 49 | &__text { 50 | display: inline-block; 51 | font-size: 11px; 52 | color: #333; 53 | margin: 0 5px; 54 | 55 | &--inside { 56 | line-height: @progress-bar-text-inside-height; 57 | color: #fff; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/_theme/src/components/progress-circle.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @progress-circle-prefix-cls: ~"@{pure-prefix}-progress-circle"; 5 | 6 | .@{progress-circle-prefix-cls} { 7 | position: relative; 8 | 9 | &__track { 10 | stroke: #f2f2f2; 11 | } 12 | 13 | &__stroker { 14 | stroke: @primary-color; 15 | } 16 | 17 | &__text { 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | transform: translate3d(-50%,-50%,0); 22 | color: #333; 23 | font-size: 17px; 24 | word-break: break-all; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/_theme/src/components/radio-button.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @radio-button-prefix-cls: ~"@{pure-prefix}-radio-button"; 5 | 6 | @radio-button-border-radius: 4px; 7 | 8 | .@{radio-button-prefix-cls} { 9 | display: block; 10 | box-sizing: border-box; 11 | padding: 8px 10px; 12 | border: solid 1px @primary-color; 13 | cursor: pointer; 14 | font-size: 1rem; 15 | color: @primary-color; 16 | border-left: none; 17 | min-width: 40px; 18 | 19 | &:first-child { 20 | border-top-left-radius: @radio-button-border-radius; 21 | border-bottom-left-radius: @radio-button-border-radius; 22 | border-left: solid 1px @primary-color; 23 | } 24 | 25 | &:last-child { 26 | border-top-right-radius: @radio-button-border-radius; 27 | border-bottom-right-radius: @radio-button-border-radius; 28 | } 29 | 30 | &--checked { 31 | background: @primary-color; 32 | border-color: @primary-color; 33 | color: rgba(255,255,255,.96); 34 | box-shadow: -1px 0 0 0 lighten(@primary-color,5%); 35 | 36 | &:first-child { 37 | box-shadow: none; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/_theme/src/components/radio-group.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @radio-group-prefix-cls: ~"@{pure-prefix}-radio-group"; 5 | 6 | .@{radio-group-prefix-cls} { 7 | display: flex; 8 | } 9 | -------------------------------------------------------------------------------- /packages/_theme/src/components/radio.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @radio-prefix-cls: ~"@{pure-prefix}-radio"; 5 | 6 | @radio-size: 18px; 7 | @radio-dot-size: 10px; 8 | 9 | .@{radio-prefix-cls} { 10 | vertical-align: middle; 11 | display: inline-block; 12 | position: relative; 13 | white-space: nowrap; 14 | margin-right: 10px; 15 | cursor: pointer; 16 | user-select: none; 17 | font-size: 1rem; 18 | 19 | &--checked { 20 | .@{radio-prefix-cls}__inner { 21 | border: solid 1px @primary-color; 22 | 23 | &::after { 24 | transform: translate3d(-50%,-50%,0) scale(1); 25 | opacity: 1; 26 | } 27 | } 28 | } 29 | 30 | &__inner { 31 | position: relative; 32 | top: 0; 33 | left: 0; 34 | display: inline-block; 35 | width: @radio-size; 36 | height: @radio-size; 37 | border-radius: 50%; 38 | border: 1px solid #ddd; 39 | background-color: #fff; 40 | vertical-align: middle; 41 | box-sizing: border-box; 42 | 43 | &::after { 44 | content: ''; 45 | display: block; 46 | position: absolute; 47 | width: @radio-dot-size; 48 | height: @radio-dot-size; 49 | left: 50%; 50 | top: 50%; 51 | border-radius: @radio-dot-size; 52 | border-top: 0; 53 | border-left: 0; 54 | background-color: @primary-color; 55 | opacity: 0; 56 | transform: translate3d(-50%,-50%,0) scale(0); 57 | transition: all .2s cubic-bezier(.78,.14,.15,.86); 58 | } 59 | } 60 | 61 | &__text { 62 | vertical-align: middle; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/_theme/src/components/rate.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @rate-prefix-cls: ~"@{pure-prefix}-rate"; 5 | 6 | @rate-active-color: #fdd83d; 7 | @rate-inactive-color: #e2e2e2; 8 | 9 | .@{rate-prefix-cls} { 10 | display: inline-block; 11 | cursor: pointer; 12 | 13 | &--readonly { 14 | cursor: default; 15 | } 16 | 17 | &__star { 18 | position: relative; 19 | display: inline-block; 20 | line-height: 1; 21 | font-size: 21px; 22 | color: @rate-inactive-color; 23 | 24 | &::before { 25 | content: '\e62f'; 26 | display: block; 27 | } 28 | } 29 | 30 | &__star-highlight { 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | width: 0; 35 | overflow: hidden; 36 | color: @rate-active-color; 37 | 38 | &--full { 39 | width: 100%; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/_theme/src/components/select.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @select-prefix-cls: ~"@{pure-prefix}-select"; 5 | @input-prefix-cls: ~"@{pure-prefix}-input"; 6 | 7 | .@{select-prefix-cls} { 8 | display: inline-block; 9 | position: relative; 10 | cursor: pointer; 11 | 12 | &--transparent { 13 | .@{select-prefix-cls}__icon { 14 | display: none; 15 | } 16 | 17 | &:hover { 18 | .@{select-prefix-cls}__icon { 19 | display: block; 20 | } 21 | } 22 | } 23 | 24 | &--block { 25 | display: block; 26 | width: 100%; 27 | } 28 | 29 | &__icon { 30 | color: #666; 31 | position: absolute; 32 | top: 50%; 33 | right: 5px; 34 | transform: translate3d(0,-50%,0); 35 | font-size: 16px; 36 | pointer-events: none; 37 | } 38 | 39 | &__options { 40 | position: absolute; 41 | width: 100%; 42 | margin-top: 5px; 43 | padding: 5px 0; 44 | background-color: #fff; 45 | border: solid 1px #f2f2f2; 46 | box-shadow: 1px 1px 6px 1px rgba(0,0,0,.03); 47 | z-index: 1; 48 | opacity: 0; 49 | transform: translate3d(0,-20px,0) scale(.9); 50 | transition: all .16s ease; 51 | 52 | &.is-transition-fadeup { 53 | opacity: 1; 54 | transform: translate3d(0,0,0) scale(1); 55 | } 56 | } 57 | 58 | .@{input-prefix-cls}__wrapper { 59 | width: 100%; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/_theme/src/components/spinner.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @spinner-prefix-cls: ~"@{pure-prefix}-spinner"; 5 | @spinner-color: tint(@primary-color,10%); 6 | 7 | .@{spinner-prefix-cls} { 8 | display: inline-block; 9 | font-size: 0; 10 | 11 | &--block { 12 | display: block; 13 | width: 100%; 14 | text-align: center; 15 | } 16 | 17 | &__dot { 18 | display: inline-block; 19 | width: 6px; 20 | height: 6px; 21 | animation: pureSpinnerDotPluse 1.5s infinite ease-in-out; 22 | 23 | &:not(:last-child) { 24 | margin-right: 5px; 25 | } 26 | } 27 | 28 | &__dot-1 { 29 | animation-delay: -1.5s; 30 | background-color: @spinner-color; 31 | } 32 | 33 | &__dot-2 { 34 | animation-delay: -1.35s; 35 | background-color: @spinner-color; 36 | } 37 | 38 | &__dot-3 { 39 | animation-delay: -1.2s; 40 | background-color: @spinner-color; 41 | } 42 | } 43 | 44 | @keyframes pureSpinnerDotPluse { 45 | 0%, 46 | 40%, 47 | 100% { 48 | opacity: 0; 49 | transform: scale(.4); 50 | } 51 | 52 | 20% { 53 | opacity: 1; 54 | transform: scaleY(1); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/_theme/src/components/switch.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @switch-prefix-cls: ~"@{pure-prefix}-switch"; 5 | 6 | @switch-tracker-width: 40px; 7 | @switch-tracker-height: 14px; 8 | @switch-block-size: 20px; 9 | @switch-mask-size: @switch-block-size * 3; 10 | 11 | .@{switch-prefix-cls} { 12 | position: relative; 13 | width: @switch-tracker-width; 14 | height: @switch-tracker-height; 15 | background-color: #eee; 16 | border-radius: 40px; 17 | display: inline-block; 18 | cursor: pointer; 19 | user-select: none; 20 | transition: all .3s ease; 21 | 22 | &--checked { 23 | background-color: tint(@primary-color,50%); 24 | 25 | .@{switch-prefix-cls}__circle-mask { 26 | background-color: @primary-color; 27 | top: -(@switch-mask-size - @switch-tracker-height) / 2; 28 | left: @switch-tracker-width - @switch-mask-size / 2 - @switch-block-size / 2; 29 | } 30 | 31 | .@{switch-prefix-cls}__block { 32 | transform: translate3d(@switch-tracker-width - @switch-block-size,0,0); 33 | background-color: @primary-color; 34 | } 35 | } 36 | 37 | &__circle-mask { 38 | display: block; 39 | background-color: #999; 40 | border-radius: 50%; 41 | position: absolute; 42 | width: @switch-mask-size; 43 | height: @switch-mask-size; 44 | opacity: .1; 45 | transform: scale3d(0,0,0); 46 | transition: background-color .1s ease, left .1s ease, transform .1s ease, -webkit-transform .1s ease; 47 | top: -(@switch-mask-size - @switch-tracker-height) / 2; 48 | left: -@switch-mask-size / 2 + @switch-block-size / 2; 49 | 50 | &&--show { 51 | transform: scale3d(1,1,1); 52 | } 53 | } 54 | 55 | &__block { 56 | display: block; 57 | background-color: #fff; 58 | border-radius: 50%; 59 | position: absolute; 60 | width: @switch-block-size; 61 | height: @switch-block-size; 62 | top: (@switch-tracker-height - @switch-block-size) / 2; 63 | left: 0; 64 | box-shadow: 0 1px 5px 0 rgba(0,0,0,.3); 65 | transition: all .3s ease; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /packages/_theme/src/components/table-row.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @table-row-prefix-cls: ~"@{pure-prefix}-table-row"; 5 | 6 | .@{table-row-prefix-cls} { 7 | &:nth-child(2n), 8 | &:nth-child(2n) { 9 | background-color: rgba(0,0,50,.02); 10 | } 11 | 12 | &:first-child td { 13 | border-top: none; 14 | } 15 | 16 | td { 17 | padding: .78571429em; 18 | border-top: 1px solid rgba(34,36,38,.1); 19 | text-align: inherit; 20 | border-left: 1px solid rgba(34,36,38,.1); 21 | 22 | &:first-child { 23 | border-left: none; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/_theme/src/components/table.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @table-prefix-cls: ~"@{pure-prefix}-table"; 5 | @table-background-color: #f9fafb; 6 | 7 | .@{table-prefix-cls} { 8 | width: 100%; 9 | background: #fff; 10 | margin: 1em 0; 11 | border: 1px solid rgba(34,36,38,.15); 12 | box-shadow: none; 13 | text-align: left; 14 | color: rgba(0,0,0,.87); 15 | border-collapse: separate; 16 | border-spacing: 0; 17 | font-size: 1rem; 18 | 19 | thead tr th { 20 | background: @table-background-color; 21 | text-align: inherit; 22 | color: #666; 23 | padding: 1em .78571429em; 24 | vertical-align: inherit; 25 | font-style: none; 26 | font-weight: 700; 27 | text-transform: none; 28 | border-bottom: 1px solid rgba(34,36,38,.1); 29 | border-left: 1px solid rgba(34,36,38,.1); 30 | } 31 | 32 | tr th:first-child { 33 | border-left: none; 34 | } 35 | 36 | &__head { 37 | background-color: @table-background-color; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/_theme/src/components/tabs.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @tabs-prefix-cls: ~"@{pure-prefix}-tabs"; 5 | 6 | .@{tabs-prefix-cls} { 7 | display: block; 8 | 9 | &__titles, 10 | &__title { 11 | display: block; 12 | list-style: none; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | &__titles { 18 | border-bottom: 1px solid #d7d7d7; 19 | overflow: hidden; 20 | } 21 | 22 | &__title { 23 | float: left; 24 | padding: .9rem .6rem; 25 | color: #333; 26 | cursor: pointer; 27 | transition: color .4s ease; 28 | font-size: 14px; 29 | 30 | &:hover { 31 | color: @primary-color; 32 | } 33 | 34 | &&--active { 35 | color: @primary-color; 36 | } 37 | 38 | &:not(:last-child) { 39 | margin-right: 10px; 40 | } 41 | } 42 | 43 | &__header { 44 | font-size: 1rem; 45 | position: relative; 46 | } 47 | 48 | &__body { 49 | font-size: 1rem; 50 | padding: 1rem .6rem; 51 | } 52 | 53 | &__indicator { 54 | position: absolute; 55 | bottom: 0; 56 | border-bottom: solid 3px @primary-color; 57 | transition: left .3s ease, width .3s ease; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/_theme/src/components/tag.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @tag-prefix-cls: ~"@{pure-prefix}-tag"; 5 | 6 | @tag-success-color: green; 7 | 8 | .@{tag-prefix-cls} { 9 | display: inline-block; 10 | line-height: 20px; 11 | height: 22px; 12 | padding: 0 8px; 13 | border: solid 1px #e9e9e9; 14 | border-radius: 3px; 15 | background: #f7f7f7; 16 | color: #666; 17 | font-size: 13px; 18 | cursor: pointer; 19 | word-break: break-all; 20 | transition: background-color .3s ease, color .4s ease; 21 | user-select: none; 22 | 23 | + .@{tag-prefix-cls} { 24 | margin-left: 5px; 25 | } 26 | 27 | &--checkable:hover { 28 | position: relative; 29 | top: -1px; 30 | box-shadow: 0 1px 0 1px rgba(0,0,0,.05); 31 | } 32 | 33 | &--checkable&--checked:hover { 34 | position: relative; 35 | top: -1px; 36 | box-shadow: 0 1px 0 1px rgba(0,0,0,.16); 37 | } 38 | 39 | &--checked { 40 | color: #fff; 41 | background-color: @primary-color; 42 | border: solid 1px @primary-color; 43 | } 44 | 45 | &__close { 46 | font-size: 11px; 47 | color: #999; 48 | } 49 | 50 | &:hover { 51 | .@{tag-prefix-cls}__close { 52 | color: #333; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/_theme/src/components/td.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @td-prefix-cls: ~"@{pure-prefix}-td"; 5 | 6 | .@{td-prefix-cls} { 7 | padding: .78571429em; 8 | border-top: 1px solid rgba(34,36,38,.1); 9 | text-align: inherit; 10 | border-left: 1px solid rgba(34,36,38,.1); 11 | } 12 | -------------------------------------------------------------------------------- /packages/_theme/src/components/text-spinner.less: -------------------------------------------------------------------------------- 1 | /* is borrow from https://github.com/tawian/text-spinners/blob/master/spinners.css 2 | * thanks for the awesome project! 3 | */ 4 | 5 | @import '../common/var.less'; 6 | @import '../common/color.less'; 7 | 8 | @text-spinner-prefix-cls: ~"@{pure-prefix}-text-spinner"; 9 | 10 | .@{text-spinner-prefix-cls} { 11 | display: inline-block; 12 | overflow: hidden; 13 | height: 1.3em; 14 | margin-top: -.3em; 15 | line-height: 1.5em; 16 | vertical-align: text-bottom; 17 | text-rendering: geometricPrecision; 18 | 19 | &::after { 20 | display: inline-table; 21 | white-space: pre; 22 | text-align: left; 23 | } 24 | 25 | &&--dots::after { 26 | content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏"; 27 | animation: text-spinner-dots-animation 1s steps(10) infinite; 28 | } 29 | } 30 | 31 | @keyframes text-spinner-dots-animation { 32 | to { transform: translateY(-15em); } 33 | } 34 | -------------------------------------------------------------------------------- /packages/_theme/src/components/textarea.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @textarea-prefix-cls: ~"@{pure-prefix}-textarea"; 5 | 6 | .@{textarea-prefix-cls} { 7 | border: solid 1px #ddd; 8 | padding: 10px; 9 | color: @form-color; 10 | font-size: 13px; 11 | font-family: inherit; 12 | vertical-align: middle; 13 | box-sizing: border-box; 14 | outline: none; 15 | min-height: 70px; 16 | 17 | &:focus { 18 | border: solid 1px @primary-color; 19 | } 20 | 21 | &--block { 22 | display: block; 23 | width: 100%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/_theme/src/components/tooltip.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @tooltip-prefix-cls: ~"@{pure-prefix}-tooltip"; 5 | @tooltip-color: fade(#000,78%); 6 | 7 | .@{tooltip-prefix-cls} { 8 | position: absolute; 9 | background-color: @tooltip-color; 10 | border-radius: 4px; 11 | color: #fff; 12 | padding: 4px 10px; 13 | font-size: 13px; 14 | pointer-events: none; 15 | opacity: 0; 16 | transition: opacity .3s ease; 17 | z-index: 1; 18 | 19 | &--enter { 20 | opacity: 1; 21 | } 22 | 23 | &__target { 24 | display: inline-block; 25 | } 26 | 27 | &__arrow { 28 | position: absolute; 29 | width: 0; 30 | height: 0; 31 | border-style: solid; 32 | border-color: transparent; 33 | } 34 | 35 | &--placement-top { 36 | .@{tooltip-prefix-cls}__arrow { 37 | border-width: 5px 5px 0; 38 | border-top-color: @tooltip-color; 39 | left: 50%; 40 | bottom: -5px; 41 | margin-left: -5px; 42 | } 43 | } 44 | 45 | &--placement-right { 46 | .@{tooltip-prefix-cls}__arrow { 47 | border-width: 5px 5px 5px 0; 48 | border-right-color: @tooltip-color; 49 | left: -5px; 50 | top: 50%; 51 | margin-top: -5px; 52 | } 53 | } 54 | 55 | &--placement-bottom { 56 | .@{tooltip-prefix-cls}__arrow { 57 | border-width: 0 5px 5px; 58 | border-bottom-color: @tooltip-color; 59 | top: -5px; 60 | left: 50%; 61 | margin-left: -5px; 62 | } 63 | } 64 | 65 | &--placement-left { 66 | .@{tooltip-prefix-cls}__arrow { 67 | border-width: 5px 0 5px 5px; 68 | border-left-color: @tooltip-color; 69 | right: -5px; 70 | top: 50%; 71 | margin-top: -5px; 72 | } 73 | } 74 | 75 | &__content { 76 | line-height: 1.5; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /packages/_theme/src/components/tr.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @tr-prefix-cls: ~"@{pure-prefix}-tr"; 5 | @td-prefix-cls: ~"@{pure-prefix}-td"; 6 | 7 | .@{tr-prefix-cls} { 8 | &:nth-child(2n), 9 | &:nth-child(2n) { 10 | background-color: rgba(0,0,50,.02); 11 | } 12 | 13 | &:first-child .@{td-prefix-cls} { 14 | border-top: none; 15 | } 16 | 17 | .@{td-prefix-cls}:first-child { 18 | border-left: none; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/_theme/src/components/upload.less: -------------------------------------------------------------------------------- 1 | @import '../common/var.less'; 2 | @import '../common/color.less'; 3 | 4 | @upload-prefix-cls: ~"@{pure-prefix}-upload"; 5 | 6 | .@{upload-prefix-cls} { 7 | width: 360px; 8 | 9 | &__droparea { 10 | position: relative; 11 | box-sizing: border-box; 12 | height: 120px; 13 | border: 1px dashed #d9d9d9; 14 | border-radius: 6px; 15 | text-align: center; 16 | cursor: pointer; 17 | background-color: #fff; 18 | overflow: hidden; 19 | 20 | &:hover { 21 | border: 1px dashed #20a0ff; 22 | } 23 | 24 | &--hover { 25 | border: 1px dashed #20a0ff; 26 | background-color: rgba(152,218,252,.3); 27 | } 28 | } 29 | 30 | &__icon { 31 | display: block; 32 | margin-top: 15px; 33 | font-size: 45px; 34 | pointer-events: none; 35 | color: #20a0ff; 36 | } 37 | 38 | &__text { 39 | margin-top: 5px; 40 | pointer-events: none; 41 | 42 | strong { 43 | font-weight: normal; 44 | color: #20a0ff; 45 | } 46 | } 47 | 48 | &__tip { 49 | font-size: 12px; 50 | color: #8391a5; 51 | margin-top: 7px; 52 | } 53 | 54 | &__list { 55 | list-style: none; 56 | padding: 0; 57 | margin: 1em 0; 58 | } 59 | 60 | &__list-item { 61 | zoom: 1; 62 | position: relative; 63 | width: 100%; 64 | margin: 7px 0; 65 | color: #666; 66 | cursor: pointer; 67 | user-select: none; 68 | 69 | &::after { 70 | content: ""; 71 | display: block; 72 | clear: both; 73 | height: 0; 74 | overflow: hidden; 75 | visibility: hidden; 76 | } 77 | 78 | &:hover { 79 | color: #20a0ff; 80 | background-color: rgba(232,237,250,.6); 81 | box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5); 82 | 83 | .di-success { 84 | display: none; 85 | } 86 | 87 | .di-close { 88 | display: inline-block; 89 | } 90 | } 91 | 92 | &-name { 93 | float: left; 94 | display: block; 95 | margin-right: 40px; 96 | font-size: 14px; 97 | overflow: hidden; 98 | text-overflow: ellipsis; 99 | white-space: nowrap; 100 | } 101 | 102 | &-icon { 103 | position: absolute; 104 | top: 0; 105 | right: 10px; 106 | color: #666; 107 | } 108 | 109 | &-progress { 110 | padding-left: 5px; 111 | 112 | .pure-progress-bar__outer { 113 | height: 3px; 114 | } 115 | } 116 | 117 | .di-success { 118 | display: inline-block; 119 | } 120 | 121 | .di-close { 122 | cursor: pointer; 123 | display: none; 124 | } 125 | } 126 | 127 | &__input { 128 | display: none; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /packages/_theme/src/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "pureicon"; 3 | src: url('iconfont.eot?t=1500809938404'); /* IE9*/ 4 | src: url('iconfont.eot?t=1500809938404#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1500809938404') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1500809938404') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1500809938404#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .pure-icon--di { 11 | font-family:"pureicon" !important; 12 | font-style:normal; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .di-upload:before { content: "\e636"; } 18 | 19 | .di-github:before { content: "\e69f"; } 20 | 21 | .di-close:before { content: "\e603"; } 22 | 23 | .di-category:before { content: "\e601"; } 24 | 25 | .di-star:before { content: "\e62f"; } 26 | 27 | .di-paint:before { content: "\e66e"; } 28 | 29 | .di-home:before { content: "\e629"; } 30 | 31 | .di-category1:before { content: "\e613"; } 32 | 33 | .di-down:before { content: "\e68d"; } 34 | 35 | .di-error:before { content: "\e6a0"; } 36 | 37 | .di-warn:before { content: "\e641"; } 38 | 39 | .di-file:before { content: "\e611"; } 40 | 41 | .di-down2:before { content: "\e60b"; } 42 | 43 | .di-error1:before { content: "\e6b1"; } 44 | 45 | .di-success:before { content: "\e625"; } 46 | 47 | .di-info:before { content: "\e80c"; } 48 | 49 | .di-wenjian:before { content: "\e631"; } 50 | 51 | .di-loading:before { content: "\e602"; } 52 | 53 | .di-right:before { content: "\e63f"; } 54 | 55 | .di-triangle:before { content: "\e6bc"; } 56 | -------------------------------------------------------------------------------- /packages/_theme/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pure-UI/pure/50ac32eab65a25c1d4f52073c596f2572c4bdc9c/packages/_theme/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /packages/_theme/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pure-UI/pure/50ac32eab65a25c1d4f52073c596f2572c4bdc9c/packages/_theme/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /packages/_theme/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pure-UI/pure/50ac32eab65a25c1d4f52073c596f2572c4bdc9c/packages/_theme/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /packages/_theme/src/index.js: -------------------------------------------------------------------------------- 1 | import './fonts/iconfont.css'; 2 | 3 | function load( requireContext ) { 4 | return requireContext.keys().map( requireContext ); 5 | } 6 | 7 | load( require.context( './components', true, /\.less$/ ) ); 8 | -------------------------------------------------------------------------------- /packages/badge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/badge", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Badge" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/badge/src/badge.rgl: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /packages/badge/src/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './badge.rgl'; 2 | 3 | export default Badge; 4 | -------------------------------------------------------------------------------- /packages/box/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/box", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Box" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/box/src/box.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /packages/box/src/index.js: -------------------------------------------------------------------------------- 1 | import Box from './box.rgl'; 2 | 3 | export default Box; 4 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/breadcrumb-item", 3 | "version": "0.1.0", 4 | "main": "lib/index.js", 5 | "play:main": "src/index.js", 6 | "scripts": { 7 | "build": "pure --name=BreadcrumbItem" 8 | }, 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/src/breadcrumb-item.rgl: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/src/index.js: -------------------------------------------------------------------------------- 1 | import BreadcrumbItem from './breadcrumb-item.rgl'; 2 | 3 | export default BreadcrumbItem; 4 | -------------------------------------------------------------------------------- /packages/breadcrumb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/breadcrumb", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Breadcrumb" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './breadcrumb.rgl'; 2 | 3 | export default Breadcrumb; 4 | -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/button", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Button" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/text-spinner": "^0.1.0", 13 | "@pure/helpers": "^0.1.0" 14 | }, 15 | "devDependencies": { 16 | "pure-cli": "latest" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/button/src/button.rgl: -------------------------------------------------------------------------------- 1 | 23 | 24 | 101 | -------------------------------------------------------------------------------- /packages/button/src/index.js: -------------------------------------------------------------------------------- 1 | import Button from './button.rgl'; 2 | 3 | export default Button; 4 | -------------------------------------------------------------------------------- /packages/card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/card", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Card" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/card/src/card.rgl: -------------------------------------------------------------------------------- 1 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /packages/card/src/index.js: -------------------------------------------------------------------------------- 1 | import Card from './card.rgl'; 2 | 3 | export default Card; 4 | -------------------------------------------------------------------------------- /packages/checkbox-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/checkbox-group", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=CheckboxGroup" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/checkbox-group/src/checkbox-group.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 39 | -------------------------------------------------------------------------------- /packages/checkbox-group/src/index.js: -------------------------------------------------------------------------------- 1 | import CheckboxGroup from './checkbox-group.rgl'; 2 | 3 | export default CheckboxGroup; 4 | -------------------------------------------------------------------------------- /packages/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/checkbox", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Checkbox" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/checkbox/src/checkbox.rgl: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | -------------------------------------------------------------------------------- /packages/checkbox/src/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './checkbox.rgl'; 2 | 3 | export default Checkbox; 4 | -------------------------------------------------------------------------------- /packages/countdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/countdown", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Countdown" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/countdown/src/countdown.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 78 | -------------------------------------------------------------------------------- /packages/countdown/src/duration.js: -------------------------------------------------------------------------------- 1 | const SECOND = 1000; 2 | const MINUTE = SECOND * 60; 3 | const HOUR = MINUTE * 60; 4 | const DAY = HOUR * 24; 5 | 6 | const duration = ( s, e ) => { 7 | const delta = Math.abs( e - s ); 8 | 9 | // 不能直接parseInt，因为可能会出现科学计数法，导致parseInt后值不正确 10 | // toFixed(0)会导致进位，比如6.99.toFixed(0)直接变为7，所以改用Math.floor 11 | let day = Math.floor( delta / DAY ); 12 | let hour = Math.floor( ( delta - day * DAY ) / HOUR ); 13 | let minute = Math.floor( ( delta - day * DAY - hour * HOUR ) / MINUTE ); 14 | let second = Math.round( ( delta - day * DAY - hour * HOUR - minute * MINUTE ) / SECOND ); 15 | 16 | // 四舍五入会把second的59.9进位成60，显示会有问题，特殊处理下 17 | if( second === 60 ) { 18 | minute = minute + 1; 19 | second = 0; 20 | } 21 | 22 | return { day, hour, minute, second }; 23 | }; 24 | 25 | export default duration; 26 | -------------------------------------------------------------------------------- /packages/countdown/src/index.js: -------------------------------------------------------------------------------- 1 | import Countdown from './countdown.rgl'; 2 | 3 | export default Countdown; 4 | -------------------------------------------------------------------------------- /packages/element-tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/element-tree", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=ElementTree" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/element-tree/src/element-tree.rgl: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | -------------------------------------------------------------------------------- /packages/element-tree/src/index.js: -------------------------------------------------------------------------------- 1 | import ElementTree from './element-tree.rgl'; 2 | 3 | export default ElementTree; 4 | -------------------------------------------------------------------------------- /packages/form-control/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/form-control", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=FormControl" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/form-control/src/form-control.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /packages/form-control/src/index.js: -------------------------------------------------------------------------------- 1 | import FormControl from './form-control.rgl'; 2 | 3 | export default FormControl; 4 | -------------------------------------------------------------------------------- /packages/form-item/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/form-item", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=FormItem" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/form-item/src/form-item.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /packages/form-item/src/index.js: -------------------------------------------------------------------------------- 1 | import FormItem from './form-item.rgl'; 2 | 3 | export default FormItem; 4 | -------------------------------------------------------------------------------- /packages/form-label/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/form-label", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=FormLabel" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/form-label/src/form-label.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /packages/form-label/src/index.js: -------------------------------------------------------------------------------- 1 | import FormLabel from './form-label.rgl'; 2 | 3 | export default FormLabel; 4 | -------------------------------------------------------------------------------- /packages/form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/form", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Form" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/form/src/form.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /packages/form/src/index.js: -------------------------------------------------------------------------------- 1 | import Form from './form.rgl'; 2 | 3 | export default Form; 4 | -------------------------------------------------------------------------------- /packages/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/icon", 3 | "version": "0.1.0", 4 | "main": "lib/index.js", 5 | "play:main": "src/index.js", 6 | "scripts": { 7 | "build": "pure --name=Icon" 8 | }, 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/icon/src/icon.rgl: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /packages/icon/src/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './icon.rgl'; 2 | 3 | export default Icon; 4 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/input", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Input" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/input/src/index.js: -------------------------------------------------------------------------------- 1 | import Input from './input.rgl'; 2 | 3 | export default Input; 4 | -------------------------------------------------------------------------------- /packages/input/src/input.rgl: -------------------------------------------------------------------------------- 1 | 22 | 23 | 42 | -------------------------------------------------------------------------------- /packages/loading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/loading", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Loading" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/loading/src/index.js: -------------------------------------------------------------------------------- 1 | import Loading from './loading.rgl'; 2 | 3 | export default Loading; 4 | -------------------------------------------------------------------------------- /packages/loading/src/loading.rgl: -------------------------------------------------------------------------------- 1 | 8 | 9 | 62 | -------------------------------------------------------------------------------- /packages/message/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/message", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Message" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/message/src/index.js: -------------------------------------------------------------------------------- 1 | import Message from './message.rgl'; 2 | 3 | export default Message; 4 | -------------------------------------------------------------------------------- /packages/message/src/message.rgl: -------------------------------------------------------------------------------- 1 | 11 | 12 | 53 | -------------------------------------------------------------------------------- /packages/modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/modal", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Modal" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0", 13 | "@pure/button": "^0.1.0" 14 | }, 15 | "devDependencies": { 16 | "pure-cli": "latest" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/modal/src/index.js: -------------------------------------------------------------------------------- 1 | import Modal from './modal.rgl'; 2 | 3 | export default Modal; 4 | -------------------------------------------------------------------------------- /packages/modal/src/modal.rgl: -------------------------------------------------------------------------------- 1 | 41 | 42 | 73 | -------------------------------------------------------------------------------- /packages/notification/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/notification", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Notification" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/notification/src/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './notification.rgl'; 2 | 3 | export default Notification; 4 | -------------------------------------------------------------------------------- /packages/notification/src/notification.rgl: -------------------------------------------------------------------------------- 1 | 26 | 27 | 78 | -------------------------------------------------------------------------------- /packages/number-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/number-input", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=NumberInput" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | }, 13 | "devDependencies": { 14 | "pure-cli": "latest" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/number-input/src/index.js: -------------------------------------------------------------------------------- 1 | import NumberInput from './number-input.rgl'; 2 | 3 | export default NumberInput; 4 | -------------------------------------------------------------------------------- /packages/number-input/src/number-input.rgl: -------------------------------------------------------------------------------- 1 | 25 | 26 | 121 | -------------------------------------------------------------------------------- /packages/option/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/option", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Option" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | }, 14 | "dependencies": { 15 | "@pure/icon": "^0.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/option/src/index.js: -------------------------------------------------------------------------------- 1 | import Option from './option.rgl'; 2 | 3 | export default Option; 4 | -------------------------------------------------------------------------------- /packages/option/src/option.rgl: -------------------------------------------------------------------------------- 1 | 17 | 18 | 39 | -------------------------------------------------------------------------------- /packages/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/pagination", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Pagination" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/button": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/pagination/src/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './pagination.rgl'; 2 | 3 | export default Pagination; 4 | -------------------------------------------------------------------------------- /packages/progress-bar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/progress-bar", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=ProgressBar" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/progress-bar/src/index.js: -------------------------------------------------------------------------------- 1 | import ProgressBar from './progress-bar.rgl'; 2 | 3 | export default ProgressBar; 4 | -------------------------------------------------------------------------------- /packages/progress-bar/src/progress-bar.rgl: -------------------------------------------------------------------------------- 1 | 17 | 18 | 29 | -------------------------------------------------------------------------------- /packages/progress-circle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/progress-circle", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=ProgressCircle" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/progress-circle/src/index.js: -------------------------------------------------------------------------------- 1 | import ProgressCircle from './progress-circle.rgl'; 2 | 3 | export default ProgressCircle; 4 | -------------------------------------------------------------------------------- /packages/progress-circle/src/progress-circle.rgl: -------------------------------------------------------------------------------- 1 | 29 | 30 | 77 | -------------------------------------------------------------------------------- /packages/radio-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/radio-button", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=RadioButton" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/radio-button/src/index.js: -------------------------------------------------------------------------------- 1 | import RadioButton from './radio-button.rgl'; 2 | 3 | export default RadioButton; 4 | -------------------------------------------------------------------------------- /packages/radio-button/src/radio-button.rgl: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /packages/radio-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/radio-group", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=RadioGroup" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/radio-group/src/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from './radio-group.rgl'; 2 | 3 | export default RadioGroup; 4 | -------------------------------------------------------------------------------- /packages/radio-group/src/radio-group.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | -------------------------------------------------------------------------------- /packages/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/radio", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Radio" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/radio/src/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './radio.rgl'; 2 | 3 | export default Radio; 4 | -------------------------------------------------------------------------------- /packages/radio/src/radio.rgl: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | -------------------------------------------------------------------------------- /packages/rate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/rate", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Rate" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/rate/src/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './rate.rgl'; 2 | 3 | export default Rate; 4 | -------------------------------------------------------------------------------- /packages/rate/src/rate.rgl: -------------------------------------------------------------------------------- 1 | 18 | 19 | 54 | -------------------------------------------------------------------------------- /packages/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/select", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Select" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0", 13 | "@pure/input": "^0.1.0" 14 | }, 15 | "devDependencies": { 16 | "pure-cli": "latest" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/select/src/index.js: -------------------------------------------------------------------------------- 1 | import Select from './select.rgl'; 2 | 3 | export default Select; 4 | -------------------------------------------------------------------------------- /packages/select/src/select.rgl: -------------------------------------------------------------------------------- 1 | 20 | 21 | 90 | -------------------------------------------------------------------------------- /packages/spinner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/spinner", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Spinner" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/spinner/src/index.js: -------------------------------------------------------------------------------- 1 | import Spinner from './spinner.rgl'; 2 | 3 | export default Spinner; 4 | -------------------------------------------------------------------------------- /packages/spinner/src/spinner.rgl: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | -------------------------------------------------------------------------------- /packages/switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/switch", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Switch" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/switch/src/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './switch.rgl'; 2 | 3 | export default Switch; 4 | -------------------------------------------------------------------------------- /packages/switch/src/switch.rgl: -------------------------------------------------------------------------------- 1 | 7 | 8 | 26 | -------------------------------------------------------------------------------- /packages/tab-pane/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/tab-pane", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=TabPane" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/tab-pane/src/index.js: -------------------------------------------------------------------------------- 1 | import TabPane from './tab-pane.rgl'; 2 | 3 | export default TabPane; 4 | -------------------------------------------------------------------------------- /packages/tab-pane/src/tab-pane.rgl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/table", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Table" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/table/src/index.js: -------------------------------------------------------------------------------- 1 | import Table from './table.rgl'; 2 | 3 | export default Table; 4 | -------------------------------------------------------------------------------- /packages/table/src/table-row.rgl: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | -------------------------------------------------------------------------------- /packages/table/src/table.rgl: -------------------------------------------------------------------------------- 1 | 20 | 21 | 30 | -------------------------------------------------------------------------------- /packages/tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/tabs", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Tabs" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/helpers": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/tabs/src/index.js: -------------------------------------------------------------------------------- 1 | import Tabs from './tabs.rgl'; 2 | 3 | export default Tabs; 4 | -------------------------------------------------------------------------------- /packages/tabs/src/tabs.rgl: -------------------------------------------------------------------------------- 1 | 17 | 18 | 101 | -------------------------------------------------------------------------------- /packages/tag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/tag", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Tag" 7 | }, 8 | "version": "0.1.0", 9 | "author": "jerryni jerryni2014@gmail.com", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/icon": "^0.1.0", 13 | "@pure/helpers": "^0.1.0" 14 | }, 15 | "devDependencies": { 16 | "pure-cli": "latest" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/tag/src/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './tag.rgl'; 2 | 3 | export default Tag; 4 | -------------------------------------------------------------------------------- /packages/tag/src/tag.rgl: -------------------------------------------------------------------------------- 1 | 25 | 26 | 49 | -------------------------------------------------------------------------------- /packages/td/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/td", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=TD" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/td/src/index.js: -------------------------------------------------------------------------------- 1 | import TD from './td.rgl'; 2 | 3 | export default TD; 4 | -------------------------------------------------------------------------------- /packages/td/src/td.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/text-spinner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/text-spinner", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=TextSpinner" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/text-spinner/src/index.js: -------------------------------------------------------------------------------- 1 | import TextSpinner from './text-spinner'; 2 | 3 | export default TextSpinner; 4 | -------------------------------------------------------------------------------- /packages/text-spinner/src/text-spinner.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/textarea/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/textarea", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Textarea" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "autosize": "^3.0.20" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/textarea/src/index.js: -------------------------------------------------------------------------------- 1 | import Textarea from './textarea.rgl'; 2 | 3 | export default Textarea; 4 | -------------------------------------------------------------------------------- /packages/textarea/src/textarea.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /packages/tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/tooltip", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Tooltip" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "dependencies": { 12 | "dom-align": "^1.5.3" 13 | }, 14 | "devDependencies": { 15 | "pure-cli": "latest" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/tooltip/src/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './tooltip.rgl'; 2 | 3 | export default Tooltip; 4 | -------------------------------------------------------------------------------- /packages/tooltip/src/tooltip.rgl: -------------------------------------------------------------------------------- 1 | 23 | 24 | 65 | -------------------------------------------------------------------------------- /packages/tr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/tr", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=TR" 7 | }, 8 | "version": "0.1.0", 9 | "author": "fengzilong ", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "pure-cli": "latest" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/tr/src/index.js: -------------------------------------------------------------------------------- 1 | import TR from './tr.rgl'; 2 | 3 | export default TR; 4 | -------------------------------------------------------------------------------- /packages/tr/src/tr.rgl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/upload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pure/upload", 3 | "main": "lib/index.js", 4 | "play:main": "src/index.js", 5 | "scripts": { 6 | "build": "pure --name=Upload" 7 | }, 8 | "version": "0.1.0", 9 | "author": "zjx1195688876 <15757116071@163.com>", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@pure/button": "^0.1.0", 13 | "@pure/progress-bar": "^0.1.0", 14 | "@pure/icon": "^0.1.0", 15 | "@pure/helpers": "^0.1.0" 16 | }, 17 | "devDependencies": { 18 | "pure-cli": "latest" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/upload/src/compontents/fileList.rgl: -------------------------------------------------------------------------------- 1 | 34 | 35 | 50 | -------------------------------------------------------------------------------- /packages/upload/src/index.js: -------------------------------------------------------------------------------- 1 | import Upload from './upload.rgl'; 2 | 3 | export default Upload; 4 | -------------------------------------------------------------------------------- /play/badge.play.js: -------------------------------------------------------------------------------- 1 | import Badge from '@pure/badge'; 2 | import Button from '@pure/button'; 3 | 4 | play( Badge, module ) 5 | .name( 'Badge' ) 6 | .component( 'Button', Button ) 7 | .add( 8 | 'basic', 9 | ` 10 | 11 | 12 | 13 | 14 | 12345 15 | 16 | `, 17 | ) 18 | .add( 19 | 'with number', 20 | ` 21 | 22 | 23 | 24 | `, 25 | ) 26 | .add( 27 | 'dot', 28 | ` 29 | 30 | 31 | 32 | `, 33 | ); 34 | -------------------------------------------------------------------------------- /play/button.play.js: -------------------------------------------------------------------------------- 1 | import Button from '@pure/button'; 2 | import '@pure/theme'; 3 | 4 | play( Button, module ) 5 | .name( 'Button' ) 6 | .add( 7 | 'basic', 8 | ` 9 | 10 | 11 | `, 12 | ) 13 | .add( 14 | 'size', 15 | ` 16 | 17 | 18 | 19 | `, 20 | ) 21 | .add( 22 | 'disabled', 23 | ` 24 | 25 | 26 | `, 27 | ) 28 | .add( 29 | 'loading', 30 | { 31 | template: ` 32 | 33 | `, 34 | config() { 35 | this.data.loading = false 36 | }, 37 | onClick() { 38 | this.data.loading = true 39 | 40 | setTimeout( () => { 41 | this.data.loading = false 42 | this.$update() 43 | }, 1000 ) 44 | }, 45 | }, 46 | ); 47 | -------------------------------------------------------------------------------- /play/card.play.js: -------------------------------------------------------------------------------- 1 | import Card from '@pure/card'; 2 | 3 | play( Card, module ) 4 | .name( 'Card' ) 5 | .add( 6 | 'basic', 7 | ` 8 | 9 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 10 | 11 | 12 | 13 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 14 | 15 | 16 | 17 | 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 18 | 19 | `, 20 | ); 21 | -------------------------------------------------------------------------------- /play/index.js: -------------------------------------------------------------------------------- 1 | import { merge } from 'regular-play'; 2 | 3 | import '@pure/theme/src'; 4 | 5 | const load = requireContext => { 6 | return requireContext.keys().map( requireContext ); 7 | }; 8 | 9 | const plays = load( require.context( './', true, /\.play\.js$/ ) ); 10 | 11 | merge( plays, module ); 12 | -------------------------------------------------------------------------------- /play/loading.play.js: -------------------------------------------------------------------------------- 1 | import Loading from '@pure/loading'; 2 | 3 | play( Loading, module ).name( 'Loading' ).add( 'basic', { 4 | template: ` 5 | 6 | `, 7 | config() { 8 | this.data.percentage = 0; 9 | 10 | const t = setInterval( () => { 11 | if ( this.data.percentage >= 100 ) { 12 | clearInterval( t ); 13 | return; 14 | } 15 | this.data.percentage += 10; 16 | this.$update(); 17 | }, 500 ); 18 | }, 19 | } ); 20 | -------------------------------------------------------------------------------- /play/notification.play.js: -------------------------------------------------------------------------------- 1 | import Notification from '@pure/notification'; 2 | import Button from '@pure/button'; 3 | import functions from '@pure/functions'; 4 | 5 | const $ = {}; 6 | 7 | Notification.use( function ( _, Regular ) { 8 | functions( Regular, $ ); 9 | } ); 10 | 11 | console.log( $ ); 12 | 13 | play( Notification, module ) 14 | .name( 'Notification' ) 15 | .component( 'Button', Button ) 16 | .add( 17 | 'basic', 18 | ` 19 | 20 | 21 | 22 | 23 | 24 | 25 | `, 26 | ) 27 | .add( 'function', { 28 | template: ` 29 | 30 | `, 31 | onClick() { 32 | $.notify( { 33 | type: 'success', 34 | title: `title`, 35 | description: `description`, 36 | closable: true, 37 | } ); 38 | }, 39 | } ); 40 | -------------------------------------------------------------------------------- /play/number-input.play.js: -------------------------------------------------------------------------------- 1 | import NumberInput from '@pure/number-input'; 2 | 3 | play( NumberInput, module ).name( 'NumberInput' ).add( 4 | 'basic', 5 | { 6 | template: ` 7 | 8 | `, 9 | onChange( v ) { 10 | this.$log( typeof v ) 11 | this.$log( v ) 12 | this.$log( '-----' ) 13 | } 14 | }, 15 | ); 16 | -------------------------------------------------------------------------------- /play/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "play", 4 | "version": "0.1.0", 5 | "author": "fengzilong ", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "@pure/theme": "^0.1.0", 9 | "@pure/helpers": "^0.1.0", 10 | "@pure/install": "^0.1.0", 11 | "@pure/functions": "^0.1.0", 12 | "@pure/box": "^0.1.0", 13 | "@pure/breadcrumb": "^0.1.0", 14 | "@pure/breadcrumb-item": "^0.1.0", 15 | "@pure/button": "^0.1.0", 16 | "@pure/checkbox": "^0.1.0", 17 | "@pure/checkbox-group": "^0.1.0", 18 | "@pure/countdown": "^0.1.0", 19 | "@pure/element-tree": "^0.1.0", 20 | "@pure/form": "^0.1.0", 21 | "@pure/form-control": "^0.1.0", 22 | "@pure/form-item": "^0.1.0", 23 | "@pure/form-label": "^0.1.0", 24 | "@pure/icon": "^0.1.0", 25 | "@pure/input": "^0.1.0", 26 | "@pure/modal": "^0.1.0", 27 | "@pure/message": "^0.1.0", 28 | "@pure/option": "^0.1.0", 29 | "@pure/pagination": "^0.1.0", 30 | "@pure/radio": "^0.1.0", 31 | "@pure/radio-button": "^0.1.0", 32 | "@pure/radio-group": "^0.1.0", 33 | "@pure/select": "^0.1.0", 34 | "@pure/spinner": "^0.1.0", 35 | "@pure/switch": "^0.1.0", 36 | "@pure/tab-pane": "^0.1.0", 37 | "@pure/table": "^0.1.0", 38 | "@pure/tabs": "^0.1.0", 39 | "@pure/td": "^0.1.0", 40 | "@pure/textarea": "^0.1.0", 41 | "@pure/tr": "^0.1.0", 42 | "@pure/rate": "^0.1.0", 43 | "@pure/notification": "^0.1.0", 44 | "@pure/badge": "^0.1.0", 45 | "@pure/number-input": "^0.1.0", 46 | "@pure/tooltip": "^0.1.0", 47 | "@pure/progress-bar": "^0.1.0", 48 | "@pure/progress-circle": "^0.1.0", 49 | "@pure/tag": "^0.1.0", 50 | "@pure/loading": "^0.1.0", 51 | "@pure/upload": "^0.1.0", 52 | "@pure/text-spinner": "^0.1.0", 53 | "@pure/card": "^0.1.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /play/progress-bar.play.js: -------------------------------------------------------------------------------- 1 | import ProgressBar from '@pure/progress-bar'; 2 | 3 | play( ProgressBar, module ).name( 'ProgressBar' ).add( 4 | 'basic', 5 | ` 6 | 7 |
8 | 9 |
10 | 11 | `, 12 | ); 13 | -------------------------------------------------------------------------------- /play/progress-circle.play.js: -------------------------------------------------------------------------------- 1 | import ProgressCircle from '@pure/progress-circle'; 2 | import NumberInput from '@pure/number-input'; 3 | 4 | play( ProgressCircle, module ) 5 | .name( 'ProgressCircle' ) 6 | .component( 'NumberInput', NumberInput ) 7 | .add( 'basic', { 8 | template: ` 9 | 10 |
some text...
11 | 12 |
13 | 14 | `, 15 | config() { 16 | this.data.v = 10; 17 | }, 18 | } ); 19 | -------------------------------------------------------------------------------- /play/rate.play.js: -------------------------------------------------------------------------------- 1 | import Rate from '@pure/rate'; 2 | 3 | play( Rate, module ).name( 'Rate' ).add( 'basic', { 4 | template: ` 5 | 6 | `, 7 | onChange( v ) { 8 | this.$log( v ); 9 | }, 10 | } ); 11 | -------------------------------------------------------------------------------- /play/select.play.js: -------------------------------------------------------------------------------- 1 | import Select from '@pure/select'; 2 | import Option from '@pure/option'; 3 | 4 | play( Select, module ).name( 'Select' ).component( 'Option', Option ).add( 5 | 'basic', 6 | ` 7 | 12 | `, 13 | ); 14 | -------------------------------------------------------------------------------- /play/tag.play.js: -------------------------------------------------------------------------------- 1 | import Tag from '@pure/tag'; 2 | 3 | play( Tag, module ) 4 | .name( 'Tag' ) 5 | .add( 'basic', { 6 | template: ` 7 | 12 | closable 13 | 14 | 15 | checkable 16 | 17 | 18 | checked 19 | 20 | `, 21 | onClose() { 22 | this.$log( 'closed' ); 23 | }, 24 | onClick() { 25 | this.$log( 'clicked' ); 26 | }, 27 | onCheck( status ) { 28 | this.$log( 'check:' + status ); 29 | }, 30 | } ) 31 | .add( 32 | 'color', 33 | ` 34 | text 35 | `, 36 | ); 37 | -------------------------------------------------------------------------------- /play/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Regular Play 6 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /play/text-spinner.play.js: -------------------------------------------------------------------------------- 1 | import TextSpinner from '@pure/text-spinner'; 2 | 3 | play( TextSpinner, module ) 4 | .name( 'TextSpinner' ) 5 | .add( 6 | 'basic', 7 | ` 8 | 9 | `, 10 | ); 11 | -------------------------------------------------------------------------------- /play/tooltip.play.js: -------------------------------------------------------------------------------- 1 | import Tooltip from '@pure/tooltip'; 2 | import Button from '@pure/button'; 3 | 4 | play( Tooltip, module ).name( 'Tooltip' ).component( 'Button', Button ).add( 5 | 'basic', 6 | ` 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | `, 22 | ); 23 | -------------------------------------------------------------------------------- /play/upload.play.js: -------------------------------------------------------------------------------- 1 | import Upload from '@pure/upload'; 2 | 3 | play( Upload, module ) 4 | .name( 'Upload' ) 5 | .add( 'basic', { 6 | template: ` 7 | 13 | 14 | `, 15 | config() { 16 | this.data.fileList = [ 17 | { 18 | name: 'pic1.jpeg', 19 | url: '', 20 | status: 'success', 21 | }, 22 | { 23 | name: 'pic2.jpeg', 24 | url: '', 25 | status: 'success', 26 | }, 27 | ]; 28 | }, 29 | } ) 30 | .add( 'drag', { 31 | template: ` 32 | 38 | 39 | `, 40 | config() { 41 | this.data.fileList = [ 42 | { 43 | name: 'pic1.jpeg', 44 | url: '', 45 | status: 'success', 46 | }, 47 | { 48 | name: 'pic2.jpeg', 49 | url: '', 50 | status: 'success', 51 | }, 52 | ]; 53 | }, 54 | } ); 55 | --------------------------------------------------------------------------------