├── .browserslistrc ├── babel.config.js ├── vue.config.js ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── assets │ ├── logo.png │ ├── checkbox-demo.gif │ └── checked.svg ├── main.js ├── App.vue └── components │ └── LoadingCheckbox.vue ├── .editorconfig ├── .npmignore ├── .gitignore ├── .eslintrc.js ├── LICENSE ├── package.json ├── CONTRIBUTING.md └── README.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | baseUrl: './', 3 | lintOnSave: false 4 | } 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrastiak/vue-loading-checkbox/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrastiak/vue-loading-checkbox/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/checkbox-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrastiak/vue-loading-checkbox/HEAD/src/assets/checkbox-demo.gif -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* 21 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-loading-checkbox 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Carrene 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-loading-checkbox", 3 | "description": "A Vue.js UI component for Loading Checkbox", 4 | "main": "./dist/LoadingCheckbox.common.js", 5 | "version": "0.2.0", 6 | "files": [ 7 | "dist/*", 8 | "src/*", 9 | "public/*", 10 | "*.json", 11 | "*.js" 12 | ], 13 | "scripts": { 14 | "serve": "vue-cli-service serve", 15 | "build": "vue-cli-service build --dest docs", 16 | "build-bundle": "vue-cli-service build --target lib --name LoadingCheckbox ./src/components/LoadingCheckbox.vue", 17 | "lint": "vue-cli-service lint", 18 | "prepare": "npm run build-bundle" 19 | }, 20 | "dependencies": { 21 | "vue": "^2.5.22" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "^3.3.0", 25 | "@vue/cli-plugin-eslint": "^3.3.0", 26 | "@vue/cli-service": "^3.3.0", 27 | "@vue/eslint-config-standard": "^4.0.0", 28 | "babel-eslint": "^10.0.1", 29 | "eslint": "^5.12.0", 30 | "eslint-plugin-vue": "^5.1.0", 31 | "node-sass": "^4.11.0", 32 | "sass-loader": "^7.0.1", 33 | "vue-template-compiler": "^2.5.22" 34 | }, 35 | "keywords": [ 36 | "vue", 37 | "vue.js", 38 | "vuejs", 39 | "component", 40 | "checkbox", 41 | "loading" 42 | ], 43 | "homepage": "https://github.com/Carrene/vue-loading-checkbox", 44 | "bugs": { 45 | "url": "https://github.com/Carrene/vue-loading-checkbox/issues" 46 | }, 47 | "author": "Armin Ayari ", 48 | "contributors": [ 49 | { 50 | "name": "Mahdi Aryayi", 51 | "email": "mahdiaryayi@gmail.com" 52 | }, 53 | { 54 | "name": "Armin Ayari", 55 | "email": "armin.ayari@gmail.com" 56 | }, 57 | { 58 | "name": "Shirin Eghrari", 59 | "email": "eghrarish@gmail.com" 60 | } 61 | ], 62 | "license": "MIT" 63 | } 64 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a build. 11 | 2. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations, props and container parameters. 12 | 3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 13 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you. 14 | 15 | ## Code of Conduct 16 | 17 | ### Our Pledge 18 | 19 | In the interest of fostering an open and welcoming environment, we as 20 | contributors and maintainers pledge to making participation in our project and 21 | our community a harassment-free experience for everyone, regardless of age, body 22 | size, disability, ethnicity, gender identity and expression, level of experience, 23 | nationality, personal appearance, race, religion, or sexual identity and 24 | orientation. 25 | 26 | ### Our Standards 27 | 28 | Examples of behavior that contributes to creating a positive environment 29 | include: 30 | 31 | - Using welcoming and inclusive language 32 | - Being respectful of differing viewpoints and experiences 33 | - Gracefully accepting constructive criticism 34 | - Focusing on what is best for the community 35 | - Showing empathy towards other community members 36 | 37 | Examples of unacceptable behavior by participants include: 38 | 39 | - The use of sexualized language or imagery and unwelcome sexual attention or 40 | advances 41 | - Trolling, insulting/derogatory comments, and personal or political attacks 42 | - Public or private harassment 43 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 44 | - Other conduct which could reasonably be considered inappropriate in a professional setting 45 | 46 | ### Our Responsibilities 47 | 48 | Project maintainers are responsible for clarifying the standards of acceptable 49 | behavior and are expected to take appropriate and fair corrective action in 50 | response to any instances of unacceptable behavior. 51 | 52 | Project maintainers have the right and responsibility to remove, edit, or 53 | reject comments, commits, code, wiki edits, issues, and other contributions 54 | that are not aligned to this Code of Conduct, or to ban temporarily or 55 | permanently any contributor for other behaviors that they deem inappropriate, 56 | threatening, offensive, or harmful. 57 | 58 | ### Scope 59 | 60 | This Code of Conduct applies both within project spaces and in public spaces 61 | when an individual is representing the project or its community. Examples of 62 | representing a project or community include using an official project e-mail 63 | address, posting via an official social media account, or acting as an appointed 64 | representative at an online or offline event. Representation of a project may be 65 | further defined and clarified by project maintainers. 66 | 67 | ### Enforcement 68 | 69 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 70 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 71 | complaints will be reviewed and investigated and will result in a response that 72 | is deemed necessary and appropriate to the circumstances. The project team is 73 | obligated to maintain confidentiality with regard to the reporter of an incident. 74 | Further details of specific enforcement policies may be posted separately. 75 | 76 | Project maintainers who do not follow or enforce the Code of Conduct in good 77 | faith may face temporary or permanent repercussions as determined by other 78 | members of the project's leadership. 79 | 80 | ### Attribution 81 | 82 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 83 | available at [http://contributor-covenant.org/version/1/4][version] 84 | 85 | [homepage]: http://contributor-covenant.org 86 | [version]: http://contributor-covenant.org/version/1/4/ 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | vue-loading-checkbox 4 | 5 |

6 | 7 |

vue-loading-checkbox

8 | 9 |

10 | npm version 11 |

12 | 13 | A vue UI component for loading checkbox 14 | 15 | ## How to install 16 | 17 | ``` 18 | npm install vue-loading-checkbox --save 19 | ``` 20 | 21 | ## How to use 22 | 23 | Inside your `.vue` files 24 | 25 | ```vue 26 | 37 | 64 | ``` 65 | 66 | ## Component props 67 | 68 | | prop | description | default | 69 | | -------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------- | 70 | | `borderColor` | Color of checkbox border | `black` | 71 | | `borderRadius` | Border radius of checkbox | `0` | 72 | | `borderStyle` | Style of checkbox border, (solid, dashed, dotted, ...) | `solid` | 73 | | `borderWidth` | width of checkbox border. You have to insert unit (`px`,`em`...) | `1px` | 74 | | `checkColor` | Color of check mark | `white` | 75 | | `checked` | Status of component. can be `true`(checked) or `false`(unchecked) | `false` | 76 | | `checkedBackgroundColor` | Background color of checkbox when status is checked | `gray` | 77 | | `checkedBorderColor` | Border color of checkbox when status is checked | `null` (same as `borderColor`) | 78 | | `checkedBorderRadius` | Border radius of checkbox when status is checked | `null` (same as `borderRadius`) | 79 | | `checkedBorderStyle` | Border style of checkbox when status is checked | `null` (same as `borderStyle`) | 80 | | `checkedBorderWidth` | Border width of checkbox when status is checked | `null` (same as `borderWidth`) | 81 | | `checkIcon` | Custom check mark image (.svg, png, etc). you have to pass it with require function | `null` A default pure css check | 82 | | `checkIconPadding` | Padding of the given custom check mark image (This will not affect the `size`) | `null` | 83 | | `fontColor` | Text color of label | `black` | 84 | | `fontSize` | Font size of label | `null` (calculated based on `size`) | 85 | | `gap` | Gap size between checkbox and its label in `px`. | `null` (calculated based on `size`) | 86 | | `label` | Label of checkbox | `null` (no label) | 87 | | `loading` | If `true` component is in loading state. it has a higher priority than `checked` | `false` | 88 | | `loadingBackgroundColor` | Background color of checkbox when status is loading | `white` | 89 | | `loadingBorderColor` | Border color of checkbox when status is loading | `null` (same as `borderColor`) | 90 | | `loadingBorderRadius` | Border radius of checkbox when status is loading | `null` (same as `borderRadius`) | 91 | | `loadingBorderStyle` | Border style of checkbox when status is loading | `null` (same as `borderStyle`) | 92 | | `loadingBorderWidth` | Border width of checkbox when status is loading | `null` (same as `borderWidth`) | 93 | | `size` | Size of component in `px`. | `30` | 94 | | `spinnerColor` | Color of spinner | `black` | 95 | | `spinnerRingColor` | Color of loading ring | `lightgray` | 96 | | `uncheckedBackgroundColor` | Background color of checkbox when status is unchecked | `white` | 97 | | `uncheckedBorderColor` | Border color of checkbox when status is unchecked | `null` (same as `borderColor`) | 98 | | `uncheckedBorderRadius` | Border radius of checkbox when status is unchecked | `null` (same as `borderRadius`) | 99 | | `uncheckedBorderStyle` | Border style of checkbox when status is unchecked | `null` (same as `borderStyle`) | 100 | | `uncheckedBorderWidth` | Border width of checkbox when status is unchecked | `null` (same as `borderWidth`) | 101 | 102 | :warning: Warning: You have to v-bind custom icon path with `require` function: 103 | 104 | `v-bind:checkIcon="require(@/assets/path/to/icon.svg)"` :heavy_check_mark: 105 | 106 | `:checkIcon="require(@/assets/path/to/icon.svg)"` :heavy_check_mark: 107 | 108 | `checkIcon="@/assets/path/to/icon.svg"` :x: 109 | 110 | `checkIcon="require(@/assets/path/to/icon.svg)"` :x: 111 | 112 | ## Contributing 113 | 114 | Visit [CONTRIBUTING Page](https://github.com/Carrene/vue-loading-checkbox/blob/master/CONTRIBUTING.md) 115 | 116 | ## Project setup 117 | 118 | ``` 119 | npm install 120 | ``` 121 | 122 | ### Compiles and hot-reloads for development 123 | 124 | ``` 125 | npm run serve 126 | ``` 127 | 128 | ### Compiles and minifies for production 129 | 130 | ``` 131 | npm run build-bundle 132 | ``` 133 | 134 | ### Lints and fixes files 135 | 136 | ``` 137 | npm run lint 138 | ``` 139 | 140 | ## License 141 | 142 | MIT 143 | -------------------------------------------------------------------------------- /src/components/LoadingCheckbox.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 291 | 292 | 339 | --------------------------------------------------------------------------------