diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 7d004164e..dbe620b0f 100644 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -14,6 +14,7 @@ ● InputSwitch ● InputText ● Listbox + ● Password ● RadioButton ● Rating ● SelectButton diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css index 68ff9b398..a510190a2 100644 --- a/src/assets/styles/primevue.css +++ b/src/assets/styles/primevue.css @@ -9,6 +9,7 @@ @import '../../components/inputswitch/InputSwitch.css'; @import '../../components/listbox/Listbox.css'; @import '../../components/panel/Panel.css'; +@import '../../components/password/Password.css'; @import '../../components/progressbar/ProgressBar.css'; @import '../../components/radiobutton/RadioButton.css'; @import '../../components/rating/Rating.css'; diff --git a/src/components/password/Password.css b/src/components/password/Password.css new file mode 100644 index 000000000..84ca6ce44 --- /dev/null +++ b/src/components/password/Password.css @@ -0,0 +1,19 @@ +.p-password-panel { + padding: .25em .5em; + margin-top: 2px; +} + +.p-password-panel .p-password-meter { + height: 10px; + background:transparent url("./images/password-meter.png") no-repeat left top; + padding: 0; + margin: 0; +} + +.p-password-info { + margin-top: .25em; +} + +.p-password-panel-overlay { + position: absolute; +} \ No newline at end of file diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue new file mode 100644 index 000000000..727c29317 --- /dev/null +++ b/src/components/password/Password.vue @@ -0,0 +1,154 @@ + + + + + \ No newline at end of file diff --git a/src/components/password/images/password-meter.png b/src/components/password/images/password-meter.png new file mode 100644 index 000000000..ddb456d3f Binary files /dev/null and b/src/components/password/images/password-meter.png differ diff --git a/src/main.js b/src/main.js index c7f30a9d9..527f500f0 100644 --- a/src/main.js +++ b/src/main.js @@ -13,6 +13,7 @@ import InputText from './components/inputtext/InputText'; import Fieldset from './components/fieldset/Fieldset'; import Listbox from './components/listbox/Listbox'; import Panel from './components/panel/Panel'; +import Password from './components/password/Password'; import ProgressBar from './components/progressbar/ProgressBar'; import Rating from './components/rating/Rating'; import RadioButton from './components/radiobutton/RadioButton'; @@ -44,6 +45,7 @@ Vue.component('p-inputtext', InputText); Vue.component('p-listbox', Listbox); Vue.component('p-fieldset', Fieldset); Vue.component('p-panel', Panel); +Vue.component('p-password', Password); Vue.component('p-progressBar', ProgressBar); Vue.component('p-radioButton', RadioButton); Vue.component('p-rating', Rating); diff --git a/src/router.js b/src/router.js index b26f731a1..5c272f7bc 100644 --- a/src/router.js +++ b/src/router.js @@ -71,6 +71,11 @@ export default new Router({ name: 'panel', component: () => import('./views/panel/PanelDemo.vue') }, + { + path: '/password', + name: 'password', + component: () => import('./views/password/PasswordDemo.vue') + }, { path: '/progressbar', name: 'progressbar', diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue new file mode 100644 index 000000000..ad8e81bb0 --- /dev/null +++ b/src/views/password/PasswordDemo.vue @@ -0,0 +1,28 @@ + + + + + Password + Password displays strength indicator for password fields. + + + + + + + + + + + +
Password displays strength indicator for password fields.