From db195857850edd7bc658f30471728b45a3572539 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Feb 2021 14:07:46 +0300
Subject: [PATCH] Fixed #933 - InputStyle and InputClass for AutoComplete,
 Calendar and Password

---
 src/components/autocomplete/AutoComplete.d.ts |  4 +++-
 src/components/autocomplete/AutoComplete.vue  |  8 +++++---
 src/components/calendar/Calendar.d.ts         |  2 ++
 src/components/calendar/Calendar.vue          |  5 ++++-
 src/components/password/Password.d.ts         |  2 ++
 src/components/password/Password.vue          |  8 +++++---
 src/views/autocomplete/AutoCompleteDoc.vue    | 12 ++++++++++++
 src/views/calendar/CalendarDoc.vue            | 12 ++++++++++++
 src/views/password/PasswordDoc.vue            | 12 ++++++++++++
 9 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 353c23743..e1d399c32 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -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;
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 0ed5167ee..7ea5545b2 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -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
             }];
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 540d951a2..c4ecf550c 100755
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -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;
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 8db058841..f56a1b848 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -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
     },
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index 8cb40b876..c5b027b1c 100755
--- a/src/components/password/Password.d.ts
+++ b/src/components/password/Password.d.ts
@@ -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;
 }
 
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index 84fb03bba..1b2d970ab 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -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
             }];
         },
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 5a3047a7a..12e5ef874 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -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>
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 0c9383831..05854167e 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -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>
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index d4a6f0f65..d489527af 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -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>