├── .DS_Store ├── webpack.development.config.js ├── webpack.production.config.js ├── LICENSE ├── webpack.common.js ├── .gitignore ├── js └── index.js ├── package.json ├── index.html ├── dist └── vue-confirmation-button.vue ├── README.md └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imRohan/vue-confirmation-button/HEAD/.DS_Store -------------------------------------------------------------------------------- /webpack.development.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const common = require('./webpack.common.js') 3 | 4 | module.exports = merge(common, { 5 | watch: true, 6 | devServer: { 7 | disableHostCheck: true, 8 | overlay: { 9 | warnings: false, 10 | errors: true, 11 | }, 12 | }, 13 | resolve: { 14 | alias: { 15 | vue: 'vue/dist/vue.js', 16 | }, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const common = require('./webpack.common.js') 3 | const webpack = require('webpack') 4 | const CopyWebpackPlugin = require('copy-webpack-plugin') 5 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 6 | const path = require('path'); 7 | 8 | 9 | module.exports = merge(common, { 10 | output: { 11 | path: path.resolve(__dirname, 'demo'), 12 | }, 13 | plugins : [ 14 | new webpack.DefinePlugin({ 15 | 'process.env': { 16 | 'NODE_ENV': JSON.stringify('production') 17 | } 18 | }), 19 | new CopyWebpackPlugin([ 20 | { from: 'index.html', to: 'index.html'} 21 | ]), 22 | new UglifyJsPlugin({ 23 | uglifyOptions: { 24 | ecma: 8, 25 | output: { 26 | comments: false, 27 | }, 28 | compress: { 29 | warnings: false, 30 | drop_console: true, 31 | drop_debugger: true, 32 | } 33 | } 34 | }), 35 | ], 36 | resolve: { 37 | alias: { 38 | vue: 'vue/dist/vue.min.js', 39 | }, 40 | }, 41 | }); 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Rohan Likhite 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 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: ['./js/index.js'], 5 | output: { 6 | filename: './bundle.js' 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.js$/, 12 | exclude: /node_modules/, 13 | loader: 'babel-loader', 14 | query: { 15 | presets: [ 16 | ['es2015', { "modules": false }] 17 | ] 18 | }, 19 | }, 20 | { 21 | test: /\.css$/, 22 | exclude: /node_modules/, 23 | loaders: 'style-loader!css-loader', 24 | }, 25 | { 26 | test: /\.scss$/, 27 | exclude: /node_modules/, 28 | loaders: 'style-loader!css-loader!sass-loader', 29 | }, 30 | { 31 | test: /\.html$/, 32 | exclude: /node_modules/, 33 | loaders: 'style-loader!html-loader', 34 | }, 35 | { 36 | test: /\.vue$/, 37 | loader: 'vue-loader', 38 | }, 39 | ], 40 | }, 41 | resolve: { 42 | modules: [path.resolve(__dirname, "app"), "node_modules"], 43 | alias: { 44 | SRC: path.resolve(__dirname, 'src/') 45 | }, 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # demo folder 61 | demo/ 62 | 63 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | // Made with love by Rohan Likhite 2 | 3 | // JS 4 | import Vue from 'vue' 5 | 6 | // Components 7 | import vueConfirmation from '../dist/vue-confirmation-button.vue' 8 | 9 | // VueJS Mount 10 | const demo = new Vue({ 11 | el: '.app', 12 | data: { 13 | app: { 14 | name: 'vue-confirmation-button-demo', 15 | }, 16 | confirmed: false, 17 | customMessages: [ 18 | 'Messages can be set via a prop', 19 | 'How about a long string?', 20 | 'That most certainly works. Click again!', 21 | 'What about Emoji?', 22 | 'Yup! 🐒', 23 | 'View Github Repo', 24 | 'Ok!' 25 | ], 26 | reset: false, 27 | appliedMessages: null, 28 | }, 29 | components: { 30 | 'vue-confirmation-button': vueConfirmation, 31 | }, 32 | computed: { 33 | }, 34 | methods: { 35 | finished() { 36 | this.confirmed = true 37 | if (this.appliedMessages == this.customMessages) { 38 | window.open('https://github.com/imRohan/vue-confirmation-button','_blank') 39 | } 40 | }, 41 | resetDemo() { 42 | demo.$refs.confirmationButton.reset() 43 | this.confirmed = false 44 | }, 45 | useCustomMessages() { 46 | this.appliedMessages = this.customMessages 47 | this.resetDemo() 48 | } 49 | }, 50 | }) 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-confirmation-button", 3 | "version": "1.0.1", 4 | "description": "A reusable Vuejs component for asking a user for input confirmation", 5 | "main": "dist/vue-confirmation-button.vue", 6 | "scripts": { 7 | "dev": "webpack-dev-server --host 0.0.0.0 --config ./webpack.development.config.js", 8 | "prod": "webpack -p --config ./webpack.production.config.js" 9 | }, 10 | "author": "Rohan Likhite ", 11 | "license": "MIT", 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/imRohan/vue-confirmation-button.git" 15 | }, 16 | "keywords": [ 17 | "vue", 18 | "vuejs", 19 | "component", 20 | "confirmation", 21 | "button", 22 | "ui" 23 | ], 24 | "bugs": { 25 | "url": "https://github.com/imRohan/vue-confirmation-button/issues" 26 | }, 27 | "devDependencies": { 28 | "babel-core": "^6.24.1", 29 | "babel-loader": "^7.0.0", 30 | "babel-preset-es2015": "^6.24.1", 31 | "copy-webpack-plugin": "^4.3.1", 32 | "css-loader": "^0.28.3", 33 | "html-loader": "^0.5.1", 34 | "node-sass": "^4.5.3", 35 | "sass-loader": "^6.0.6", 36 | "style-loader": "^0.18.1", 37 | "uglifyjs-webpack-plugin": "^1.1.8", 38 | "vue": "^2.5.13", 39 | "vue-loader": "^13.7.0", 40 | "vue-template-compiler": "^2.5.13", 41 | "webpack": "^3.10.0", 42 | "webpack-dev-server": ">=3.1.11", 43 | "webpack-merge": "^4.1.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Confirmation Button 6 | 7 | 8 | 9 | 10 | 64 | 65 | 66 |
69 |
70 |
71 | Vue Confirmation Button 72 |
73 |
74 | 78 | 79 |
80 |
81 | 84 | 87 |
88 |
89 | 94 |
95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /dist/vue-confirmation-button.vue: -------------------------------------------------------------------------------- 1 | // Made with love by Rohan Likhite 2 | 3 | 11 | 12 | 63 | 64 | 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## VueConfirmationButton 2 | 3 | A Vue.js [single file component](https://vuejs.org/v2/guide/single-file-components.html) that will generate a button that requires the user to press it multiple times in order to confirm a designated action 4 | 5 | ![demoGif](https://i.imgur.com/zM0vitr.gif) 6 | 7 | ### Why would i need that? 8 | 9 | Think of a sensitive scenario, something like deleting data. Having the user read multiple warning messages before performing an action will help prevent unwanted deletions. 10 | 11 | [Live Demo](http://rohanlikhite.com/projects/vueConfirmationButton/) 12 | 13 | ## Install 14 | 15 | #### Yarn 16 | 17 | `yarn add vue-confirmation-button` 18 | 19 | #### Manual 20 | 21 | Manually download the .vue component (located in the dist) folder and add that to your project. 22 | 23 | 24 | #### JS 25 | 26 | ```js 27 | import vueConfirmationButton from 'vue-confirmation-button'; 28 | 29 | const demo = new Vue({ 30 | el: '.app', 31 | components: { 32 | 'vue-confirmation-button': vueConfirmationButton, 33 | }, 34 | data: { 35 | customMessages: [ 36 | 'Delete User', 37 | 'Are you sure?', 38 | 'Ok!' 39 | ], 40 | }, 41 | methods: { 42 | deleteUser() { 43 | // Your Logic Here 44 | }, 45 | }, 46 | }); 47 | ``` 48 | 49 | #### HTML 50 | 51 | ```html 52 |
53 | 56 | 57 |
58 | ``` 59 | ## Details 60 | 61 | ### Props 62 | 63 | This component supports 2 props 64 | 65 | 1. *messages*: An array of strings that will be displayed to the user. The last message being shown after confirmation has succeeded 66 | 2. *css*: A string representing the css style that will be applied to the `