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

Fixed #933 - InputStyle and InputClass for AutoComplete, Calendar and Password

pull/938/head
Cagatay Civici 2021-02-03 14:07:46 +03:00
parent 07ac855ac8
commit db19585785
9 changed files with 57 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/autocomplete/AutoComplete.d.ts vendored
View File

@ -3,7 +3,7 @@ import Vue, { VNode } from 'vue';
declare class AutoComplete extends Vue {
modelValue?: any;
suggestions?: any[];
field?: string|function;
field?: string|Function;
scrollHeight?: string;
dropdown?: boolean;
dropdownMode?: string;
@ -11,6 +11,8 @@ declare class AutoComplete extends Vue {
minLength?: number;
delay?: number;
appendTo?: string;
inputStyle?: any;
inputClass?: string;
$emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this;

8
src/components/autocomplete/AutoComplete.vue
View File

@ -1,6 +1,6 @@
<template>
<span ref="container" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
<input ref="input" :class="inputClass" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
<input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
role="searchbox" aria-autocomplete="list" :aria-controls="listId">
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
<li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
@ -77,6 +77,8 @@ export default {
type: String,
default: null
},
inputClass: null,
inputStyle: null,
class: null,
style: null
},
@ -443,8 +445,8 @@ export default {
'p-inputwrapper-focus': this.focused
}];
},
inputClass() {
return ['p-autocomplete-input p-inputtext p-component', {
inputFieldClass() {
return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
'p-autocomplete-dd-input': this.dropdown,
'p-disabled': this.$attrs.disabled
}];

2
src/components/calendar/Calendar.d.ts vendored
View File

@ -39,6 +39,8 @@ declare class Calendar extends Vue {
showWeek?: boolean;
manualInput?: boolean;
appendTo?: string;
inputStyle?: any;
inputClass?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'month-change', e: { month: number, year: number }): this;

5
src/components/calendar/Calendar.vue
View File

@ -1,6 +1,7 @@
<template>
<span ref="container" :class="containerClass" :style="style">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none" />
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none"
:class="inputClass" :style="inputStyle" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'">
@ -289,6 +290,8 @@ export default {
type: String,
default: null
},
inputClass: null,
inputStyle: null,
class: null,
style: null
},

2
src/components/password/Password.d.ts vendored
View File

@ -11,6 +11,8 @@ declare class Password extends Vue {
feedback?: boolean;
appendTo?: string;
toggleMask?: boolean;
inputStyle?: any;
inputClass?: string;
$emit(eventName: string, event: Event): this;
}

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

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" :style="style">
<PInputText ref="input" class="p-password-input" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
<PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
<i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
@ -63,6 +63,8 @@ export default {
type: Boolean,
default: false
},
inputClass: null,
inputStyle: null,
style: null,
class: null
},
@ -260,8 +262,8 @@ export default {
'p-input-icon-right': this.toggleMask
}];
},
inputClass() {
return ['p-password-input', {
inputFieldClass() {
return ['p-password-input', this.inputClass, {
'p-disabled': this.$attrs.disabled
}];
},

12
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -146,6 +146,18 @@ export default {
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
</tbody>
</table>

12
src/views/calendar/CalendarDoc.vue
View File

@ -403,6 +403,18 @@ export default {
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
</tbody>
</table>
</div>

12
src/views/password/PasswordDoc.vue
View File

@ -130,6 +130,18 @@ import Password from 'primevue/password';
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
</tbody>
</table>