Add demo image and /dist folder

Update README.md Update README
skegel13 · Feb 4, 2017 · 42a423f · 42a423f
1 parent 538aaa6
commit 42a423f
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log
 test/unit/coverage
diff --git a/README.md b/README.md
@@ -1,27 +1,70 @@
 # vue-password
 
-> A Vue.js password input component that includes a toggle to show the password and a strength meter using the Dropbox zxcvbn library.
+> A Vue.js password input component that includes a toggle to show the password and a strength meter using the [Dropbox zxcvbn](https://github.com/dropbox/zxcvbn) library.
 
-## Build Setup
+## Props
 
-``` bash
-# install dependencies
-npm install
+Use the following props to configure the password input.
 
-# serve with hot reload at localhost:8080
-npm run dev
+- id  
+  Set the ID of the password input.  
+  Default: 'password'
 
-# build for production with minification
-npm run build
+- name  
+  Set the name of the password input.  
+  Default: 'password'
 
-# build for production and view the bundle analyzer report
-npm run build --report
+- classes  
+  Set any classes for the password input using a string or array of classes.  
+  Default: 'form-control'
 
-# run unit tests
-npm run unit
+- strengthClasses  
+  Set the strength classes using an array of 5 classes. One for each strength  
+  level provided by the zxcvbn library.
+
+- strengthMessages  
+  Set the strength messages using an array of 5 classes. One for each strength  
+  level provided by the zxcvbn library.
+
+- minlength  
+  Set the minlength HTML5 validation attribute for the password input.  
+  Default: 8
+
+- maxlength
+  Set the maxlength HTML5 validation attribute for the password input.
+  Default: 200
+
+- pattern  
+  Set the pattern HTML5 validation attribute for the password input.  
+  Default: false
+
+- required  
+  Set the required HTML5 validation attribute for the password input.  
+  Default: true
+
+- userInputs  
+  Set any additional strings for improving the strength calculation. For example, add values for username or email fields so if the password contains those items, it will receive a lower strength. [Click here](https://github.com/dropbox/zxcvbn#usage) for more information.  
+  Default: []
+
+- disableToggle  
+  Disable the password toggle.  
+  Default: false
+
+- disableStrength  
+  Disable the password strength check.  
+  Default: false
+
+## Slots
+
+Use the following named slots to change the layout of the password toggle, strength meter, and strength messages.
+
+- password-toggle  
+  Access the toggle function using a scoped slot.
+
+- strength-meter  
+  Access the strength object using a scoped slot. ([See more information about the strength object](https://github.com/dropbox/zxcvbn#usage))
+
+- strength-message  
+  Access the strength object using a scoped slot. ([See more information about the strength object](https://github.com/dropbox/zxcvbn#usage))
 
-# run all tests
-npm test
-```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+  </head>
+  <body>
+  <script type="text/javascript" src="/vue-password.js"></script></body>
+</html>
diff --git a/dist/vue-password.js b/dist/vue-password.js
diff --git a/index.html b/index.html
@@ -2,7 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>vue-password</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" />
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -24,6 +24,10 @@
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skegel13/vue-password.git"
+  },
   "dependencies": {
     "vue": "^2.1.10",
     "zxcvbn": "^4.4.1"

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,14 @@
 <template>
   <div id="app">
-    <password-input v-model="password"></password-input>
+    <div class="panel">
+      <p class="panel-heading">Demo:</p>
+      <div class="panel-block">
+        <p class="control">
+          <label for="password">Password</label>
+          <password-input v-model="password" classes="input"></password-input>
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,12 +29,8 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  body {
+    max-width: 600px;
+    margin: 10rem auto;
+  }
 </style>
diff --git a/vue-password.png b/vue-password.png