├── .all-contributorsrc ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── Makefile ├── README.md ├── babel.config.js ├── coverage ├── clover.xml ├── coverage-final.json ├── lcov-report │ ├── base.css │ ├── index.html │ ├── index.vue.html │ ├── prettify.css │ ├── prettify.js │ ├── sort-arrow-sprite.png │ └── sorter.js └── lcov.info ├── docs ├── favicon.ico ├── index.html └── js │ ├── app.d09607a1.js │ ├── app.d09607a1.js.map │ ├── chunk-vendors.0387dd60.js │ └── chunk-vendors.0387dd60.js.map ├── jest.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── _index.scss ├── _variable.scss ├── index.js ├── index.vue └── main.js ├── tests └── unit │ ├── .eslintrc.js │ └── example.spec.js └── vue.config.js /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "dreambo8563", 10 | "name": "Vincent Guo", 11 | "avatar_url": "https://avatars2.githubusercontent.com/u/6948318?v=4", 12 | "profile": "https://dreambo8563.github.io/", 13 | "contributions": [ 14 | "code", 15 | "doc", 16 | "infra" 17 | ] 18 | } 19 | ], 20 | "contributorsPerLine": 7, 21 | "projectName": "vue-circular-progress", 22 | "projectOwner": "dreambo8563", 23 | "repoType": "github", 24 | "repoHost": "https://github.com" 25 | } 26 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | install: 5 | - npm i 6 | - npm install -g codecov 7 | before_install: 8 | - npm i -g npm@latest 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | ## [1.0.4](https://github.com/dreambo8563/easy-circular-progress/compare/v1.0.3...v1.0.4) (2019-06-05) 3 | 4 | 5 | ### Features 6 | 7 | * **default slot:** customize the content in the circle ([89ce5a4](https://github.com/dreambo8563/easy-circular-progress/commit/89ce5a4)) 8 | 9 | 10 | 11 | 12 | ## [1.0.3](https://github.com/dreambo8563/easy-circular-progress/compare/v1.0.2...v1.0.3) (2019-05-15) 13 | 14 | 15 | ### Bug Fixes 16 | 17 | * **integer:** fix to support integer ([58f596b](https://github.com/dreambo8563/easy-circular-progress/commit/58f596b)) 18 | 19 | 20 | 21 | 22 | ## [1.0.2](https://github.com/dreambo8563/easy-circular-progress/compare/v1.0.1...v1.0.2) (2019-04-23) 23 | 24 | 25 | ### Bug Fixes 26 | 27 | * **css:** container inline-block ([6ca087b](https://github.com/dreambo8563/easy-circular-progress/commit/6ca087b)) 28 | 29 | 30 | 31 | 32 | ## [1.0.1](https://github.com/dreambo8563/easy-circular-progress/compare/v1.0.0...v1.0.1) (2019-04-23) 33 | 34 | 35 | ### Features 36 | 37 | * **renaming:** name conflict ([5713a86](https://github.com/dreambo8563/easy-circular-progress/commit/5713a86)) 38 | 39 | 40 | 41 | 42 | # [1.0.0](https://github.com/dreambo8563/easy-circular-progress/compare/b79ed35...v1.0.0) (2019-04-23) 43 | 44 | 45 | ### Bug Fixes 46 | 47 | * **package:** rm polyfill ([d0ca37d](https://github.com/dreambo8563/easy-circular-progress/commit/d0ca37d)) 48 | 49 | 50 | ### Features 51 | 52 | * **add sample:** demo code for pages ([d3f5771](https://github.com/dreambo8563/easy-circular-progress/commit/d3f5771)) 53 | * **basic:** basic component ([b79ed35](https://github.com/dreambo8563/easy-circular-progress/commit/b79ed35)) 54 | * **implement:** almost done ([dc2077d](https://github.com/dreambo8563/easy-circular-progress/commit/dc2077d)) 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at dreambo8563@outlook.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Vincent Guo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | lint: 2 | npm run lint 3 | local: 4 | npm run serve 5 | build: 6 | npm run build 7 | pages: 8 | npm run pages 9 | report: 10 | npm run report 11 | test: 12 | npm run testm -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Codacy Badge](https://api.codacy.com/project/badge/Grade/9d5901431eb1423192c2ace8bd5064d3)](https://app.codacy.com/app/dreambo8563/easy-circular-progress?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/easy-circular-progress&utm_campaign=Badge_Grade_Dashboard) 2 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors) 3 | [![codecov](https://codecov.io/gh/dreambo8563/easy-circular-progress/branch/master/graph/badge.svg)](https://codecov.io/gh/dreambo8563/easy-circular-progress) 4 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 5 | ![npm](https://img.shields.io/npm/dt/easy-circular-progress.svg?style=flat) 6 | [![Build Status](https://travis-ci.com/dreambo8563/easy-circular-progress.svg?branch=master)](https://travis-ci.com/dreambo8563/easy-circular-progress) 7 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress?ref=badge_shield) 8 | [![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/easy-circular-progress.svg)](https://greenkeeper.io/) 9 | [![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/easy-circular-progress/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/easy-circular-progress?targetFile=package.json) 10 | 11 | # easy-circular-progress 12 | 13 | ## Install 14 | 15 | ``` 16 | npm install easy-circular-progress --save 17 | ``` 18 | 19 | ### Quick Start 20 | 21 | ```vue 22 | 71 | 72 | 82 | 83 | 101 | 102 | ``` 103 | 104 | ### Prop Types 105 | 106 | | Property | Type | Required? | Description | 107 | | :----------------- | :--------------- | :-------- | :-------------------------------------------------------------------- | 108 | | strokeWidth | Number | | default is 4, the width of the progress circle, the bigger the bolder | 109 | | radius | Number | | the inner circle radius, default is 38 | 110 | | transitionDuration | Number | | default is 1000, transitionDuration for the animation | 111 | | strokeColors | String | | default is "#aaff00" | 112 | | value | Number \| String | | default is 0.0, should be less or equal then 100 | 113 | 114 | ### Slot 115 | 116 | | Slot Name | Description | 117 | | :-------- | ----------------------------------- | 118 | | footer | we can add a footer for the circle | 119 | | default | the content displayed in the circle | 120 | 121 | > if default slot provided, the coutdown effect will be ignored. 122 | 123 | ### Advance Guide 124 | 125 | #### Customized Theme 126 | 127 | - In your customized scss file (demo.scss) 128 | 129 | ```scss 130 | $--circular-progress-int-fz: 28px; 131 | $--circular-progress-dec-fz: 12px; 132 | @import '~easy-circular-progress/src/index'; 133 | ``` 134 | 135 | - import the scss to override the default theme in main.js (entry file) before you import the Draw component 136 | 137 | ```js 138 | import './demo.scss'; 139 | ``` 140 | 141 | > variables 142 | 143 | We split the number into two parts (int, dec) 144 | We can define the font-size for each part 145 | 146 | - \$--circular-progress-int-fz: 28px; 147 | - \$--circular-progress-dec-fz: 12px; 148 | 149 | #### Possibly Polyfill 150 | 151 | ```js 152 | Number.isNaN = 153 | Number.isNaN || 154 | function(value) { 155 | return value !== value; 156 | }; 157 | ``` 158 | 159 | ## License 160 | 161 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress?ref=badge_large) 162 | 163 | ## Contributors 164 | 165 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 166 | 167 | 168 | 169 |
Vincent Guo
Vincent Guo
💻 📖 🚇
170 | 171 | 172 | 173 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 174 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@vue/app", 5 | { 6 | useBuiltIns: false 7 | } 8 | ] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /coverage/clover.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /coverage/coverage-final.json: -------------------------------------------------------------------------------- 1 | {"/Users/vincent/Documents/Vincent/vue-circular-progress/src/index.vue": {"path":"/Users/vincent/Documents/Vincent/vue-circular-progress/src/index.vue","statementMap":{"0":{"start":{"line":51,"column":0},"end":{"line":null,"column":-1}},"1":{"start":{"line":57,"column":0},"end":{"line":null,"column":-1}},"2":{"start":{"line":66,"column":0},"end":{"line":null,"column":-1}},"3":{"start":{"line":69,"column":0},"end":{"line":null,"column":-1}},"4":{"start":{"line":78,"column":0},"end":{"line":null,"column":-1}},"5":{"start":{"line":81,"column":0},"end":{"line":null,"column":-1}},"6":{"start":{"line":86,"column":0},"end":{"line":88,"column":0}},"7":{"start":{"line":87,"column":0},"end":{"line":null,"column":-1}},"8":{"start":{"line":89,"column":0},"end":{"line":null,"column":-1}},"9":{"start":{"line":92,"column":0},"end":{"line":null,"column":-1}},"10":{"start":{"line":94,"column":0},"end":{"line":null,"column":-1}},"11":{"start":{"line":95,"column":0},"end":{"line":null,"column":-1}},"12":{"start":{"line":96,"column":0},"end":{"line":109,"column":0}},"13":{"start":{"line":97,"column":0},"end":{"line":null,"column":-1}},"14":{"start":{"line":98,"column":0},"end":{"line":102,"column":0}},"15":{"start":{"line":99,"column":0},"end":{"line":null,"column":-1}},"16":{"start":{"line":101,"column":0},"end":{"line":null,"column":-1}},"17":{"start":{"line":103,"column":0},"end":{"line":107,"column":0}},"18":{"start":{"line":105,"column":0},"end":{"line":null,"column":-1}},"19":{"start":{"line":106,"column":0},"end":{"line":null,"column":-1}},"20":{"start":{"line":108,"column":0},"end":{"line":null,"column":-1}},"21":{"start":{"line":112,"column":0},"end":{"line":114,"column":0}},"22":{"start":{"line":113,"column":0},"end":{"line":null,"column":-1}},"23":{"start":{"line":115,"column":0},"end":{"line":null,"column":-1}},"24":{"start":{"line":118,"column":0},"end":{"line":null,"column":-1}},"25":{"start":{"line":120,"column":0},"end":{"line":122,"column":0}},"26":{"start":{"line":121,"column":0},"end":{"line":null,"column":-1}},"27":{"start":{"line":123,"column":0},"end":{"line":null,"column":-1}},"28":{"start":{"line":126,"column":0},"end":{"line":null,"column":-1}},"29":{"start":{"line":127,"column":0},"end":{"line":null,"column":-1}},"30":{"start":{"line":128,"column":0},"end":{"line":null,"column":-1}},"31":{"start":{"line":131,"column":0},"end":{"line":133,"column":0}},"32":{"start":{"line":132,"column":0},"end":{"line":null,"column":-1}},"33":{"start":{"line":134,"column":0},"end":{"line":136,"column":0}},"34":{"start":{"line":135,"column":0},"end":{"line":null,"column":-1}},"35":{"start":{"line":137,"column":0},"end":{"line":139,"column":0}},"36":{"start":{"line":138,"column":0},"end":{"line":null,"column":-1}},"37":{"start":{"line":145,"column":0},"end":{"line":null,"column":-1}},"38":{"start":{"line":146,"column":0},"end":{"line":148,"column":0}},"39":{"start":{"line":147,"column":0},"end":{"line":null,"column":-1}},"40":{"start":{"line":149,"column":0},"end":{"line":null,"column":-1}},"41":{"start":{"line":150,"column":0},"end":{"line":null,"column":-1}},"42":{"start":{"line":156,"column":0},"end":{"line":null,"column":-1}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":49,"column":0},"end":{"line":null,"column":-1}},"loc":{"start":{"line":49,"column":0},"end":{"line":52,"column":0}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":96,"column":0},"end":{"line":null,"column":-1}},"loc":{"start":{"line":96,"column":0},"end":{"line":109,"column":0}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":120,"column":0},"end":{"line":null,"column":-1}},"loc":{"start":{"line":120,"column":0},"end":{"line":122,"column":0}}},"3":{"name":"(anonymous_4)","decl":{"start":{"line":144,"column":0},"end":{"line":null,"column":-1}},"loc":{"start":{"line":144,"column":0},"end":{"line":151,"column":0}}}},"branchMap":{"0":{"loc":{"start":{"line":51,"column":0},"end":{"line":null,"column":-1}},"type":"binary-expr","locations":[{"start":{"line":51,"column":0},"end":{"line":null,"column":-1}},{"start":{"line":51,"column":0},"end":{"line":null,"column":-1}}]},"1":{"loc":{"start":{"line":86,"column":0},"end":{"line":88,"column":0}},"type":"if","locations":[{"start":{"line":86,"column":0},"end":{"line":88,"column":0}},{"start":{"line":86,"column":0},"end":{"line":88,"column":0}}]},"2":{"loc":{"start":{"line":98,"column":0},"end":{"line":102,"column":0}},"type":"if","locations":[{"start":{"line":98,"column":0},"end":{"line":102,"column":0}},{"start":{"line":98,"column":0},"end":{"line":102,"column":0}}]},"3":{"loc":{"start":{"line":103,"column":0},"end":{"line":107,"column":0}},"type":"if","locations":[{"start":{"line":103,"column":0},"end":{"line":107,"column":0}},{"start":{"line":103,"column":0},"end":{"line":107,"column":0}}]},"4":{"loc":{"start":{"line":112,"column":0},"end":{"line":114,"column":0}},"type":"if","locations":[{"start":{"line":112,"column":0},"end":{"line":114,"column":0}},{"start":{"line":112,"column":0},"end":{"line":114,"column":0}}]},"5":{"loc":{"start":{"line":131,"column":0},"end":{"line":133,"column":0}},"type":"if","locations":[{"start":{"line":131,"column":0},"end":{"line":133,"column":0}},{"start":{"line":131,"column":0},"end":{"line":133,"column":0}}]},"6":{"loc":{"start":{"line":134,"column":0},"end":{"line":136,"column":0}},"type":"if","locations":[{"start":{"line":134,"column":0},"end":{"line":136,"column":0}},{"start":{"line":134,"column":0},"end":{"line":136,"column":0}}]},"7":{"loc":{"start":{"line":137,"column":0},"end":{"line":139,"column":0}},"type":"if","locations":[{"start":{"line":137,"column":0},"end":{"line":139,"column":0}},{"start":{"line":137,"column":0},"end":{"line":139,"column":0}}]},"8":{"loc":{"start":{"line":146,"column":0},"end":{"line":148,"column":0}},"type":"if","locations":[{"start":{"line":146,"column":0},"end":{"line":148,"column":0}},{"start":{"line":146,"column":0},"end":{"line":148,"column":0}}]},"9":{"loc":{"start":{"line":146,"column":0},"end":{"line":null,"column":-1}},"type":"binary-expr","locations":[{"start":{"line":146,"column":0},"end":{"line":null,"column":-1}},{"start":{"line":146,"column":0},"end":{"line":null,"column":-1}}]}},"s":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":0,"8":2,"9":2,"10":2,"11":2,"12":2,"13":0,"14":0,"15":0,"16":0,"17":0,"18":0,"19":0,"20":0,"21":2,"22":2,"23":0,"24":1,"25":1,"26":0,"27":1,"28":1,"29":1,"30":1,"31":1,"32":0,"33":1,"34":0,"35":1,"36":0,"37":1,"38":1,"39":0,"40":1,"41":1,"42":0},"f":{"0":1,"1":0,"2":0,"3":1},"b":{"0":[1,1],"1":[0,2],"2":[0,0],"3":[0,0],"4":[2,0],"5":[0,1],"6":[0,1],"7":[0,1],"8":[0,1],"9":[1,1]}} 2 | } 3 | -------------------------------------------------------------------------------- /coverage/lcov-report/base.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin:0; padding: 0; 3 | height: 100%; 4 | } 5 | body { 6 | font-family: Helvetica Neue, Helvetica, Arial; 7 | font-size: 14px; 8 | color:#333; 9 | } 10 | .small { font-size: 12px; } 11 | *, *:after, *:before { 12 | -webkit-box-sizing:border-box; 13 | -moz-box-sizing:border-box; 14 | box-sizing:border-box; 15 | } 16 | h1 { font-size: 20px; margin: 0;} 17 | h2 { font-size: 14px; } 18 | pre { 19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; 20 | margin: 0; 21 | padding: 0; 22 | -moz-tab-size: 2; 23 | -o-tab-size: 2; 24 | tab-size: 2; 25 | } 26 | a { color:#0074D9; text-decoration:none; } 27 | a:hover { text-decoration:underline; } 28 | .strong { font-weight: bold; } 29 | .space-top1 { padding: 10px 0 0 0; } 30 | .pad2y { padding: 20px 0; } 31 | .pad1y { padding: 10px 0; } 32 | .pad2x { padding: 0 20px; } 33 | .pad2 { padding: 20px; } 34 | .pad1 { padding: 10px; } 35 | .space-left2 { padding-left:55px; } 36 | .space-right2 { padding-right:20px; } 37 | .center { text-align:center; } 38 | .clearfix { display:block; } 39 | .clearfix:after { 40 | content:''; 41 | display:block; 42 | height:0; 43 | clear:both; 44 | visibility:hidden; 45 | } 46 | .fl { float: left; } 47 | @media only screen and (max-width:640px) { 48 | .col3 { width:100%; max-width:100%; } 49 | .hide-mobile { display:none!important; } 50 | } 51 | 52 | .quiet { 53 | color: #7f7f7f; 54 | color: rgba(0,0,0,0.5); 55 | } 56 | .quiet a { opacity: 0.7; } 57 | 58 | .fraction { 59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 60 | font-size: 10px; 61 | color: #555; 62 | background: #E8E8E8; 63 | padding: 4px 5px; 64 | border-radius: 3px; 65 | vertical-align: middle; 66 | } 67 | 68 | div.path a:link, div.path a:visited { color: #333; } 69 | table.coverage { 70 | border-collapse: collapse; 71 | margin: 10px 0 0 0; 72 | padding: 0; 73 | } 74 | 75 | table.coverage td { 76 | margin: 0; 77 | padding: 0; 78 | vertical-align: top; 79 | } 80 | table.coverage td.line-count { 81 | text-align: right; 82 | padding: 0 5px 0 20px; 83 | } 84 | table.coverage td.line-coverage { 85 | text-align: right; 86 | padding-right: 10px; 87 | min-width:20px; 88 | } 89 | 90 | table.coverage td span.cline-any { 91 | display: inline-block; 92 | padding: 0 5px; 93 | width: 100%; 94 | } 95 | .missing-if-branch { 96 | display: inline-block; 97 | margin-right: 5px; 98 | border-radius: 3px; 99 | position: relative; 100 | padding: 0 4px; 101 | background: #333; 102 | color: yellow; 103 | } 104 | 105 | .skip-if-branch { 106 | display: none; 107 | margin-right: 10px; 108 | position: relative; 109 | padding: 0 4px; 110 | background: #ccc; 111 | color: white; 112 | } 113 | .missing-if-branch .typ, .skip-if-branch .typ { 114 | color: inherit !important; 115 | } 116 | .coverage-summary { 117 | border-collapse: collapse; 118 | width: 100%; 119 | } 120 | .coverage-summary tr { border-bottom: 1px solid #bbb; } 121 | .keyline-all { border: 1px solid #ddd; } 122 | .coverage-summary td, .coverage-summary th { padding: 10px; } 123 | .coverage-summary tbody { border: 1px solid #bbb; } 124 | .coverage-summary td { border-right: 1px solid #bbb; } 125 | .coverage-summary td:last-child { border-right: none; } 126 | .coverage-summary th { 127 | text-align: left; 128 | font-weight: normal; 129 | white-space: nowrap; 130 | } 131 | .coverage-summary th.file { border-right: none !important; } 132 | .coverage-summary th.pct { } 133 | .coverage-summary th.pic, 134 | .coverage-summary th.abs, 135 | .coverage-summary td.pct, 136 | .coverage-summary td.abs { text-align: right; } 137 | .coverage-summary td.file { white-space: nowrap; } 138 | .coverage-summary td.pic { min-width: 120px !important; } 139 | .coverage-summary tfoot td { } 140 | 141 | .coverage-summary .sorter { 142 | height: 10px; 143 | width: 7px; 144 | display: inline-block; 145 | margin-left: 0.5em; 146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; 147 | } 148 | .coverage-summary .sorted .sorter { 149 | background-position: 0 -20px; 150 | } 151 | .coverage-summary .sorted-desc .sorter { 152 | background-position: 0 -10px; 153 | } 154 | .status-line { height: 10px; } 155 | /* dark red */ 156 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } 157 | .low .chart { border:1px solid #C21F39 } 158 | /* medium red */ 159 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } 160 | /* light red */ 161 | .low, .cline-no { background:#FCE1E5 } 162 | /* light green */ 163 | .high, .cline-yes { background:rgb(230,245,208) } 164 | /* medium green */ 165 | .cstat-yes { background:rgb(161,215,106) } 166 | /* dark green */ 167 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) } 168 | .high .chart { border:1px solid rgb(77,146,33) } 169 | 170 | 171 | .medium .chart { border:1px solid #666; } 172 | .medium .cover-fill { background: #666; } 173 | 174 | .cbranch-no { background: yellow !important; color: #111; } 175 | 176 | .cstat-skip { background: #ddd; color: #111; } 177 | .fstat-skip { background: #ddd; color: #111 !important; } 178 | .cbranch-skip { background: #ddd !important; color: #111; } 179 | 180 | span.cline-neutral { background: #eaeaea; } 181 | .medium { background: #eaeaea; } 182 | 183 | .cover-fill, .cover-empty { 184 | display:inline-block; 185 | height: 12px; 186 | } 187 | .chart { 188 | line-height: 0; 189 | } 190 | .cover-empty { 191 | background: white; 192 | } 193 | .cover-full { 194 | border-right: none !important; 195 | } 196 | pre.prettyprint { 197 | border: none !important; 198 | padding: 0 !important; 199 | margin: 0 !important; 200 | } 201 | .com { color: #999 !important; } 202 | .ignore-none { color: #999; font-weight: normal; } 203 | 204 | .wrapper { 205 | min-height: 100%; 206 | height: auto !important; 207 | height: 100%; 208 | margin: 0 auto -48px; 209 | } 210 | .footer, .push { 211 | height: 48px; 212 | } 213 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for All files 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files 20 |

21 |
22 |
23 | 62.79% 24 | Statements 25 | 27/43 26 |
27 |
28 | 50% 29 | Branches 30 | 10/20 31 |
32 |
33 | 50% 34 | Functions 35 | 2/4 36 |
37 |
38 | 62.79% 39 | Lines 40 | 27/43 41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
FileStatementsBranchesFunctionsLines
index.vue
62.79%27/4350%10/2050%2/462.79%27/43
76 |
77 |
78 |
79 | Code coverage 80 | generated by istanbul at Tue Apr 23 2019 21:19:19 GMT+0800 (China Standard Time) 81 |
82 | 83 | 84 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for index.vue 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files index.vue 20 |

21 |
22 |
23 | 62.79% 24 | Statements 25 | 27/43 26 |
27 |
28 | 50% 29 | Branches 30 | 10/20 31 |
32 |
33 | 50% 34 | Functions 35 | 2/4 36 |
37 |
38 | 62.79% 39 | Lines 40 | 27/43 41 |
42 |
43 |
44 |
45 | 

 46 | 
533 | 
1
 47 | 2
 48 | 3
 49 | 4
 50 | 5
 51 | 6
 52 | 7
 53 | 8
 54 | 9
 55 | 10
 56 | 11
 57 | 12
 58 | 13
 59 | 14
 60 | 15
 61 | 16
 62 | 17
 63 | 18
 64 | 19
 65 | 20
 66 | 21
 67 | 22
 68 | 23
 69 | 24
 70 | 25
 71 | 26
 72 | 27
 73 | 28
 74 | 29
 75 | 30
 76 | 31
 77 | 32
 78 | 33
 79 | 34
 80 | 35
 81 | 36
 82 | 37
 83 | 38
 84 | 39
 85 | 40
 86 | 41
 87 | 42
 88 | 43
 89 | 44
 90 | 45
 91 | 46
 92 | 47
 93 | 48
 94 | 49
 95 | 50
 96 | 51
 97 | 52
 98 | 53
 99 | 54
100 | 55
101 | 56
102 | 57
103 | 58
104 | 59
105 | 60
106 | 61
107 | 62
108 | 63
109 | 64
110 | 65
111 | 66
112 | 67
113 | 68
114 | 69
115 | 70
116 | 71
117 | 72
118 | 73
119 | 74
120 | 75
121 | 76
122 | 77
123 | 78
124 | 79
125 | 80
126 | 81
127 | 82
128 | 83
129 | 84
130 | 85
131 | 86
132 | 87
133 | 88
134 | 89
135 | 90
136 | 91
137 | 92
138 | 93
139 | 94
140 | 95
141 | 96
142 | 97
143 | 98
144 | 99
145 | 100
146 | 101
147 | 102
148 | 103
149 | 104
150 | 105
151 | 106
152 | 107
153 | 108
154 | 109
155 | 110
156 | 111
157 | 112
158 | 113
159 | 114
160 | 115
161 | 116
162 | 117
163 | 118
164 | 119
165 | 120
166 | 121
167 | 122
168 | 123
169 | 124
170 | 125
171 | 126
172 | 127
173 | 128
174 | 129
175 | 130
176 | 131
177 | 132
178 | 133
179 | 134
180 | 135
181 | 136
182 | 137
183 | 138
184 | 139
185 | 140
186 | 141
187 | 142
188 | 143
189 | 144
190 | 145
191 | 146
192 | 147
193 | 148
194 | 149
195 | 150
196 | 151
197 | 152
198 | 153
199 | 154
200 | 155
201 | 156
202 | 157
203 | 158
204 | 159
205 | 160
206 | 161
207 | 162
208 | 163 
209 |  
210 |  
211 |  
212 |  
213 |  
214 |  
215 |  
216 |  
217 |  
218 |  
219 |  
220 |  
221 |  
222 |  
223 |  
224 |  
225 |  
226 |  
227 |  
228 |  
229 |  
230 |  
231 |  
232 |  
233 |  
234 |  
235 |  
236 |  
237 |  
238 |  
239 |  
240 |  
241 |  
242 |  
243 |  
244 |  
245 |  
246 |  
247 |  
248 |  
249 |  
250 |  
251 |  
252 |  
253 |  
254 |  
255 |  
256 |  
257 |  
258 | 1x
259 |  
260 |  
261 |  
262 |  
263 |  
264 | 1x
265 |  
266 |  
267 |  
268 |  
269 |  
270 |  
271 |  
272 |  
273 | 1x
274 |  
275 |  
276 | 1x
277 |  
278 |  
279 |  
280 |  
281 |  
282 |  
283 |  
284 |  
285 | 1x
286 |  
287 |  
288 | 1x
289 |  
290 |  
291 |  
292 |  
293 | 2x
294 |  
295 |  
296 | 2x
297 |  
298 |  
299 | 2x
300 |  
301 | 2x
302 | 2x
303 | 2x
304 |  
305 |  
306 |  
307 |  
308 |  
309 |  
310 |  
311 |  
312 |  
313 |  
314 |  
315 |  
316 |  
317 |  
318 |  
319 | 2x
320 | 2x
321 |  
322 |  
323 |  
324 |  
325 | 1x
326 |  
327 | 1x
328 |  
329 |  
330 | 1x
331 |  
332 |  
333 | 1x
334 | 1x
335 | 1x
336 |  
337 |  
338 | 1x
339 |  
340 |  
341 | 1x
342 |  
343 |  
344 | 1x
345 |  
346 |  
347 |  
348 |  
349 |  
350 |  
351 |  
352 | 1x
353 | 1x
354 |  
355 |  
356 | 1x
357 | 1x
358 |  
359 |  
360 |  
361 |  
362 |  
363 |  
364 |  
365 |  
366 |  
367 |  
368 |  
369 |  
370 |  
<template>
371 |   <div class="vue-circular-progress">
372 |     <div class="circle">
373 |       <svg :width="circleSize" :height="circleSize" class="circle__svg">
374 |         <circle
375 |           :cx="centralP"
376 |           :cy="centralP"
377 |           :r="radius"
378 |           :style="{ 'stroke-width': strokeWidth, stroke: strokeColor }"
379 |           class="circle__progress circle__progress--path"
380 |         ></circle>
381 |         <circle
382 |           :cx="centralP"
383 |           :cy="centralP"
384 |           :r="radius"
385 |           :style="fileStyl"
386 |           class="circle__progress circle__progress--fill"
387 |         ></circle>
388 |       </svg>
389 |  
390 |       <div class="percent">
391 |         <span class="percent__int">{{ int }}.</span>
392 |         <span class="percent__dec">{{ dec }}%</span>
393 |       </div>
394 |     </div>
395 |     <slot name="footer"></slot>
396 |   </div>
397 | </template>
398 | <script>
399 | export default {
400 |   props: {
401 |     strokeWidth: {
402 |       type: Number,
403 |       default: 4
404 |     },
405 |     radius: {
406 |       type: Number,
407 |       default: 38
408 |     },
409 |     transitionDuration: {
410 |       type: Number,
411 |       default: 1000
412 |     },
413 |     strokeColor: {
414 |       type: String,
415 |       default: "#aaff00"
416 |     },
417 |     value: {
418 |       validator: function(value) {
419 |         // should be a number and less or equal than 100
420 |         return !Number.isNaN(Number(value)) && Number(value) <= 100;
421 |       },
422 |       default: "0.0"
423 |     }
424 |   },
425 |   data() {
426 |     return {
427 |       // number: 9.27,
428 |       offset: "",
429 |       int: 0,
430 |       dec: "00"
431 |     };
432 |   },
433 |   computed: {
434 |     circumference() {
435 |       return this.radius * Math.PI * 2;
436 |     },
437 |     fileStyl() {
438 |       return {
439 |         strokeDashoffset: this.offset,
440 |         "--initialStroke": this.circumference,
441 |         "--transitionDuration": `${this.transitionDuration}ms`,
442 |         "stroke-width": this.strokeWidth,
443 |         stroke: this.strokeColor
444 |       };
445 |     },
446 |     circleSize() {
447 |       return (this.radius + this.strokeWidth) * 2;
448 |     },
449 |     centralP() {
450 |       return this.circleSize / 2;
451 |     }
452 |   },
453 |   methods: {
454 |     increaseNumber(number, className) {
455 | I      if (number == 0) {
456 |         return;
457 |       }
458 |       const innerNum = parseInt(
459 |         this.findClosestNumber(this.transitionDuration / 10, number)
460 |       );
461 |       let interval = this.transitionDuration / innerNum;
462 |  
463 |       let counter = 0;
464 |       const handlerName = `${className}Interval`;
465 |       this[handlerName] = setInterval(() => {
466 |         const bitDiff = number.toString().length - innerNum.toString().length;
467 |         if (bitDiff == 0) {
468 |           this[className] = counter;
469 |         } else {
470 |           this[className] = counter * 10 * bitDiff;
471 |         }
472 |         if (counter === innerNum) {
473 |           // back to origin precision
474 |           this[className] = number;
475 |           window.clearInterval(this[handlerName]);
476 |         }
477 |         counter++;
478 |       }, interval);
479 |     },
480 |     findClosestNumber(bound, value) {
481 | E      if (value <= bound) {
482 |         return value;
483 |       }
484 |       return this.findClosestNumber(bound, value / 10);
485 |     },
486 |     countNumber(v) {
487 |       this.offset = "";
488 |  
489 |       this.initTimeoutHandler = setTimeout(() => {
490 |         this.offset = (this.circumference * (100 - v)) / 100;
491 |       }, 100);
492 |       let [int, dec] = v.toString().split(".");
493 |  
494 |       // fallback for NaN
495 |       [int, dec] = [Number(int), Number(dec)];
496 |       this.increaseNumber(int, "int");
497 |       this.increaseNumber(dec, "dec");
498 |     },
499 |     clearHandlers() {
500 | I      if (this.initTimeoutHandler) {
501 |         clearTimeout(this.initTimeoutHandler);
502 |       }
503 | I      if (this.intInterval) {
504 |         clearInterval(this.intInterval);
505 |       }
506 | I      if (this.decInterval) {
507 |         clearInterval(this.decInterval);
508 |       }
509 |     }
510 |   },
511 |   watch: {
512 |     value: {
513 |       handler: function(v) {
514 |         const n = Number(v);
515 | I        if (Number.isNaN(n) || n == 0) {
516 |           return;
517 |         }
518 |         this.clearHandlers();
519 |         this.countNumber(v);
520 |       },
521 |       immediate: true
522 |     }
523 |   },
524 |   beforeDestroy() {
525 |     this.clearHandlers();
526 |   }
527 | };
528 | </script>
529 | <style lang="scss">
530 | @import "index";
531 | </style>
532 |  
534 |
535 |
536 |
537 | Code coverage 538 | generated by istanbul at Tue Apr 23 2019 21:19:19 GMT+0800 (China Standard Time) 539 |
540 | 541 | 542 | 549 | 550 | 551 | 552 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.js: -------------------------------------------------------------------------------- 1 | window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;arat[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^\)\"\']+/]]),["css-str"]); 2 | -------------------------------------------------------------------------------- /coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreambo8563/easy-circular-progress/8e6ea2357856e5c25e87c352db3515abea441827/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /coverage/lcov-report/sorter.js: -------------------------------------------------------------------------------- 1 | var addSorting = (function () { 2 | "use strict"; 3 | var cols, 4 | currentSort = { 5 | index: 0, 6 | desc: false 7 | }; 8 | 9 | // returns the summary table element 10 | function getTable() { return document.querySelector('.coverage-summary'); } 11 | // returns the thead element of the summary table 12 | function getTableHeader() { return getTable().querySelector('thead tr'); } 13 | // returns the tbody element of the summary table 14 | function getTableBody() { return getTable().querySelector('tbody'); } 15 | // returns the th element for nth column 16 | function getNthColumn(n) { return getTableHeader().querySelectorAll('th')[n]; } 17 | 18 | // loads all columns 19 | function loadColumns() { 20 | var colNodes = getTableHeader().querySelectorAll('th'), 21 | colNode, 22 | cols = [], 23 | col, 24 | i; 25 | 26 | for (i = 0; i < colNodes.length; i += 1) { 27 | colNode = colNodes[i]; 28 | col = { 29 | key: colNode.getAttribute('data-col'), 30 | sortable: !colNode.getAttribute('data-nosort'), 31 | type: colNode.getAttribute('data-type') || 'string' 32 | }; 33 | cols.push(col); 34 | if (col.sortable) { 35 | col.defaultDescSort = col.type === 'number'; 36 | colNode.innerHTML = colNode.innerHTML + ''; 37 | } 38 | } 39 | return cols; 40 | } 41 | // attaches a data attribute to every tr element with an object 42 | // of data values keyed by column name 43 | function loadRowData(tableRow) { 44 | var tableCols = tableRow.querySelectorAll('td'), 45 | colNode, 46 | col, 47 | data = {}, 48 | i, 49 | val; 50 | for (i = 0; i < tableCols.length; i += 1) { 51 | colNode = tableCols[i]; 52 | col = cols[i]; 53 | val = colNode.getAttribute('data-value'); 54 | if (col.type === 'number') { 55 | val = Number(val); 56 | } 57 | data[col.key] = val; 58 | } 59 | return data; 60 | } 61 | // loads all row data 62 | function loadData() { 63 | var rows = getTableBody().querySelectorAll('tr'), 64 | i; 65 | 66 | for (i = 0; i < rows.length; i += 1) { 67 | rows[i].data = loadRowData(rows[i]); 68 | } 69 | } 70 | // sorts the table using the data for the ith column 71 | function sortByIndex(index, desc) { 72 | var key = cols[index].key, 73 | sorter = function (a, b) { 74 | a = a.data[key]; 75 | b = b.data[key]; 76 | return a < b ? -1 : a > b ? 1 : 0; 77 | }, 78 | finalSorter = sorter, 79 | tableBody = document.querySelector('.coverage-summary tbody'), 80 | rowNodes = tableBody.querySelectorAll('tr'), 81 | rows = [], 82 | i; 83 | 84 | if (desc) { 85 | finalSorter = function (a, b) { 86 | return -1 * sorter(a, b); 87 | }; 88 | } 89 | 90 | for (i = 0; i < rowNodes.length; i += 1) { 91 | rows.push(rowNodes[i]); 92 | tableBody.removeChild(rowNodes[i]); 93 | } 94 | 95 | rows.sort(finalSorter); 96 | 97 | for (i = 0; i < rows.length; i += 1) { 98 | tableBody.appendChild(rows[i]); 99 | } 100 | } 101 | // removes sort indicators for current column being sorted 102 | function removeSortIndicators() { 103 | var col = getNthColumn(currentSort.index), 104 | cls = col.className; 105 | 106 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); 107 | col.className = cls; 108 | } 109 | // adds sort indicators for current column being sorted 110 | function addSortIndicators() { 111 | getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted'; 112 | } 113 | // adds event listeners for all sorter widgets 114 | function enableUI() { 115 | var i, 116 | el, 117 | ithSorter = function ithSorter(i) { 118 | var col = cols[i]; 119 | 120 | return function () { 121 | var desc = col.defaultDescSort; 122 | 123 | if (currentSort.index === i) { 124 | desc = !currentSort.desc; 125 | } 126 | sortByIndex(i, desc); 127 | removeSortIndicators(); 128 | currentSort.index = i; 129 | currentSort.desc = desc; 130 | addSortIndicators(); 131 | }; 132 | }; 133 | for (i =0 ; i < cols.length; i += 1) { 134 | if (cols[i].sortable) { 135 | // add the click event handler on the th so users 136 | // dont have to click on those tiny arrows 137 | el = getNthColumn(i).querySelector('.sorter').parentElement; 138 | if (el.addEventListener) { 139 | el.addEventListener('click', ithSorter(i)); 140 | } else { 141 | el.attachEvent('onclick', ithSorter(i)); 142 | } 143 | } 144 | } 145 | } 146 | // adds sorting functionality to the UI 147 | return function () { 148 | if (!getTable()) { 149 | return; 150 | } 151 | cols = loadColumns(); 152 | loadData(cols); 153 | addSortIndicators(); 154 | enableUI(); 155 | }; 156 | })(); 157 | 158 | window.addEventListener('load', addSorting); 159 | -------------------------------------------------------------------------------- /coverage/lcov.info: -------------------------------------------------------------------------------- 1 | TN: 2 | SF:/Users/vincent/Documents/Vincent/vue-circular-progress/src/index.vue 3 | FN:49,(anonymous_1) 4 | FN:96,(anonymous_2) 5 | FN:120,(anonymous_3) 6 | FN:144,(anonymous_4) 7 | FNF:4 8 | FNH:2 9 | FNDA:1,(anonymous_1) 10 | FNDA:0,(anonymous_2) 11 | FNDA:0,(anonymous_3) 12 | FNDA:1,(anonymous_4) 13 | DA:51,1 14 | DA:57,1 15 | DA:66,1 16 | DA:69,1 17 | DA:78,1 18 | DA:81,1 19 | DA:86,2 20 | DA:87,0 21 | DA:89,2 22 | DA:92,2 23 | DA:94,2 24 | DA:95,2 25 | DA:96,2 26 | DA:97,0 27 | DA:98,0 28 | DA:99,0 29 | DA:101,0 30 | DA:103,0 31 | DA:105,0 32 | DA:106,0 33 | DA:108,0 34 | DA:112,2 35 | DA:113,2 36 | DA:115,0 37 | DA:118,1 38 | DA:120,1 39 | DA:121,0 40 | DA:123,1 41 | DA:126,1 42 | DA:127,1 43 | DA:128,1 44 | DA:131,1 45 | DA:132,0 46 | DA:134,1 47 | DA:135,0 48 | DA:137,1 49 | DA:138,0 50 | DA:145,1 51 | DA:146,1 52 | DA:147,0 53 | DA:149,1 54 | DA:150,1 55 | DA:156,0 56 | LF:43 57 | LH:27 58 | BRDA:51,0,0,1 59 | BRDA:51,0,1,1 60 | BRDA:86,1,0,0 61 | BRDA:86,1,1,2 62 | BRDA:98,2,0,0 63 | BRDA:98,2,1,0 64 | BRDA:103,3,0,0 65 | BRDA:103,3,1,0 66 | BRDA:112,4,0,2 67 | BRDA:112,4,1,0 68 | BRDA:131,5,0,0 69 | BRDA:131,5,1,1 70 | BRDA:134,6,0,0 71 | BRDA:134,6,1,1 72 | BRDA:137,7,0,0 73 | BRDA:137,7,1,1 74 | BRDA:146,8,0,0 75 | BRDA:146,8,1,1 76 | BRDA:146,9,0,1 77 | BRDA:146,9,1,1 78 | BRF:20 79 | BRH:10 80 | end_of_record 81 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreambo8563/easy-circular-progress/8e6ea2357856e5c25e87c352db3515abea441827/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | easy-circular-progress
-------------------------------------------------------------------------------- /docs/js/app.d09607a1.js: -------------------------------------------------------------------------------- 1 | (function(t){function e(e){for(var n,o,a=e[0],c=e[1],l=e[2],f=0,p=[];f tag\n\n// load the styles\nvar content = require(\"!!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"7f2c023a\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('Progress',{attrs:{\"value\":\"16.88\"}}),_c('Progress',{attrs:{\"strokeColor\":\"#FF00AA\",\"value\":\"16.88\"},scopedSlots:_vm._u([{key:\"footer\",fn:function(){return [_c('b',[_vm._v(\"More Color\")])]},proxy:true}])}),_c('Progress',{attrs:{\"radius\":50,\"strokeWidth\":10,\"value\":\"86.12\"},scopedSlots:_vm._u([{key:\"footer\",fn:function(){return [_c('b',[_vm._v(\"Bolder & Bigger One\")])]},proxy:true}])}),_c('Progress',{attrs:{\"transitionDuration\":5000,\"radius\":50,\"strokeWidth\":10,\"value\":\"86\"},scopedSlots:_vm._u([{key:\"footer\",fn:function(){return [_c('b',[_vm._v(\"Slow One\")])]},proxy:true}])}),_c('Progress',{attrs:{\"transitionDuration\":5000,\"radius\":55,\"strokeWidth\":10,\"value\":\"86.12567\"},scopedSlots:_vm._u([{key:\"footer\",fn:function(){return [_c('b',[_vm._v(\"More Precise\")])]},proxy:true}])}),_c('Progress',{attrs:{\"transitionDuration\":5000,\"radius\":55,\"strokeWidth\":10,\"value\":\"86.12567\"},scopedSlots:_vm._u([{key:\"footer\",fn:function(){return [_c('b',[_vm._v(\"More Precise\")])]},proxy:true}])},[_c('div',{staticClass:\"content\"},[_vm._v(\"hello\")])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-circular-progress\"},[_c('div',{staticClass:\"circle\"},[_c('svg',{staticClass:\"circle__svg\",attrs:{\"width\":_vm.circleSize,\"height\":_vm.circleSize}},[_c('circle',{staticClass:\"circle__progress circle__progress--path\",style:({ 'stroke-width': _vm.strokeWidth, stroke: _vm.strokeColor }),attrs:{\"cx\":_vm.centralP,\"cy\":_vm.centralP,\"r\":_vm.radius}}),_c('circle',{staticClass:\"circle__progress circle__progress--fill\",style:(_vm.fileStyl),attrs:{\"cx\":_vm.centralP,\"cy\":_vm.centralP,\"r\":_vm.radius}})]),_c('div',{staticClass:\"percent\"},[_vm._t(\"default\",[_c('span',{staticClass:\"percent__int\"},[_vm._v(_vm._s(_vm.int))]),_c('span',{staticClass:\"dot\"},[_vm._v(\".\")]),_c('span',{staticClass:\"percent__dec\"},[_vm._v(_vm._s(_vm.dec))]),_c('span',{staticClass:\"percent_sign\"},[_vm._v(\"%\")])])],2)]),_vm._t(\"footer\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=7f50549b&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=66cbbaee&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from \"vue\";\nimport App from \"./App.vue\";\n\nVue.config.productionTip = false;\n\nnew Vue({\n render: h => h(App)\n}).$mount(\"#app\");\n","import mod from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".vue-circular-progress{display:inline-block}.vue-circular-progress .circle{position:relative}.vue-circular-progress .circle__svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.vue-circular-progress .circle__progress{fill:none;stroke-opacity:.3;stroke-linecap:round}.vue-circular-progress .circle__progress--fill{--initialStroke:0;--transitionDuration:0;stroke-opacity:1;stroke-dasharray:var(--initialStroke);stroke-dashoffset:var(--initialStroke);-webkit-transition:stroke-dashoffset var(--transitionDuration) ease;transition:stroke-dashoffset var(--transitionDuration) ease}.vue-circular-progress .percent{width:100%;top:50%;left:50%;position:absolute;font-weight:700;text-align:center;line-height:28px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.vue-circular-progress .percent__int{font-size:28px}.vue-circular-progress .percent__dec,.vue-circular-progress .percent_sign{font-size:12px}.vue-circular-progress .label{font-size:14px;text-transform:uppercase;margin-top:15px}\", \"\"]);\n\n// exports\n","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;height:100vh;color:#fff;background:#3e423a;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}body{margin:0;padding:0}\", \"\"]);\n\n// exports\n","// style-loader: Adds some css to the DOM by adding a 81 | -------------------------------------------------------------------------------- /src/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'variable'; 2 | .vue-circular-progress { 3 | display: inline-block; 4 | .circle { 5 | position: relative; 6 | } 7 | 8 | .circle__svg { 9 | transform: rotate(-90deg); 10 | } 11 | 12 | .circle__progress { 13 | fill: none; 14 | stroke-opacity: 0.3; 15 | stroke-linecap: round; 16 | } 17 | 18 | .circle__progress--fill { 19 | --initialStroke: 0; 20 | --transitionDuration: 0; 21 | stroke-opacity: 1; 22 | stroke-dasharray: var(--initialStroke); 23 | stroke-dashoffset: var(--initialStroke); 24 | transition: stroke-dashoffset var(--transitionDuration) ease; 25 | } 26 | 27 | .percent { 28 | width: 100%; 29 | top: 50%; 30 | left: 50%; 31 | position: absolute; 32 | font-weight: bold; 33 | text-align: center; 34 | line-height: $--circular-progress-int-fz; 35 | transform: translate(-50%, -50%); 36 | } 37 | 38 | .percent__int { 39 | font-size: $--circular-progress-int-fz; 40 | } 41 | .percent__dec, 42 | .percent_sign { 43 | font-size: $--circular-progress-dec-fz; 44 | } 45 | 46 | .label { 47 | font-size: 14px; 48 | text-transform: uppercase; 49 | margin-top: 15px; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/_variable.scss: -------------------------------------------------------------------------------- 1 | $--circular-progress-int-fz: 28px !default; 2 | $--circular-progress-dec-fz: 12px !default; 3 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import easyCircularProgress from "./index.vue"; 2 | 3 | const EasyCircularProgress = { 4 | install ( Vue ) { 5 | Vue.component( easyCircularProgress.name, easyCircularProgress ); 6 | }, 7 | } 8 | 9 | export default EasyCircularProgress 10 | 11 | if ( typeof window !== 'undefined' && window.Vue ) { 12 | window.Vue.use( EasyCircularProgress ); 13 | } 14 | -------------------------------------------------------------------------------- /src/index.vue: -------------------------------------------------------------------------------- 1 | 33 | 165 | 168 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /tests/unit/example.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import Progress from "@/index.vue"; 3 | 4 | describe("Progress.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const wrapper = shallowMount(Progress, { 7 | propsData: { value: 18.77 } 8 | }); 9 | setTimeout(() => { 10 | expect(wrapper.vm.$options.data.int).toBe(18); 11 | expect(wrapper.vm.$options.data.dec).toBe(77); 12 | }, 1000); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: 3 | process.env.NODE_ENV === "production" ? "/easy-circular-progress/" : "/", 4 | css: { 5 | extract: false 6 | } 7 | }; 8 | --------------------------------------------------------------------------------