vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fluid support for new password

pull/938/head
Cagatay Civici 2021-02-03 12:56:35 +03:00
parent 9379f05b8e
commit 48b27798de
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/password/Password.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="containerClass" :style="style"> <div :class="containerClass" :style="style">
<PInputText ref="input" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" autocomplete="fff"/> <PInputText ref="input" class="p-password-input" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
<i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" /> <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible"> <div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
@ -299,4 +299,8 @@ export default {
.p-password-meter { .p-password-meter {
height: 10px; height: 10px;
} }
.p-fluid .p-password {
display: flex;
}
</style> </style>

6
src/views/invalid/InvalidDemo.vue
View File

@ -15,7 +15,7 @@
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /> <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /> <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
@ -62,7 +62,7 @@
&lt;InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /&gt; &lt;InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt; &lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /&gt; &lt;AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt; &lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /&gt; &lt;Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /&gt;
@ -345,7 +345,7 @@ export default {
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /> <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /> <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />