Refactor #439 and docs

src/components/password/Password.d.ts

@@ -3,8 +3,8 @@ import Vue from 'vue';
 export declare class Password extends Vue {
     value?: string;
     promptLabel?: string;
-    mediumCheckExpr?: string;
+    mediumRegex?: string;
-    strongCheckExpr?: string;
+    strongRegex?: string;
     weakLabel?: string;
     mediumLabel?: string;
     strongLabel?: string;

src/components/password/Password.vue

@@ -12,11 +12,11 @@ export default {
             type: String,
             default: 'Enter a password'
         },
-        mediumCheckExpr: {
+        mediumRegex: {
             type: String,
             default: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})' // eslint-disable-line
         },
-        strongCheckExpr: {
+        strongRegex: {
             type: String,
             default: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})' // eslint-disable-line
         },
@@ -43,8 +43,8 @@ export default {
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
     mounted() {
-        this.mediumCheckRegExp = new RegExp(this.mediumCheckExpr);
+        this.mediumCheckRegExp = new RegExp(this.mediumRegex);
-        this.strongCheckRegExp = new RegExp(this.strongCheckExpr);
+        this.strongCheckRegExp = new RegExp(this.strongRegex);
     },
     methods: {
         testStrength(str) {

src/views/password/PasswordDoc.vue

@@ -13,6 +13,28 @@ import Password from 'primevue/password';
 <Password v-model="value" />
 </CodeHighlight>
 
+                <h5>Customization</h5>
+                <p>Password components uses regular expressions for middle and strong passwords with the following defaults.</p>
+
+                <h6>Medium</h6>
+                <p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
+                <ul>
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase or one number</li>
+                    <li>Minimum 6 characters</li>
+                </ul>
+
+                <h6>Strong</h6>
+                <p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
+                <ul>
+                    <li>At least one lowercase</li>
+                    <li>At least one uppercase</li>
+                    <li>At least one numeric</li>
+                    <li>Minimum 8 characters</li>
+                </ul>
+
+                <p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
+
 				<h5>Properties</h5>
 				<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
@@ -32,6 +54,18 @@ import Password from 'primevue/password';
                                 <td>Enter a password</td>
                                 <td>Text to prompt password entry.</td>
                             </tr>
+                            <tr>
+                                <td>mediumRegex</td>
+                                <td>string</td>
+                                <td>Regex for a medium level password.</td>
+                                <td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</td>
+                            </tr>
+                            <tr>
+                                <td>strongRegex</td>
+                                <td>string</td>
+                                <td>Regex for a strong level password.</td>
+                                <td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
+                            </tr>
                             <tr>
                                 <td>weakLabel</td>
                                 <td>string</td>

src/views/progressbar/ProgressBarDoc.vue

@@ -30,7 +30,7 @@ data() {
 <CodeHighlight>
 <template v-pre>
 &lt;ProgressBar :value="value"&gt;
-    Percent Complete: {{value}}%
+    Percent Complete: &#123;&#123;value&#125;&#125;%
 &lt;/ProgressBar&gt;
 </template>
 </CodeHighlight>