Fixed #2801 - New inputClass and inputStyle properties

api-generator/components/cascadeselect.js

@@ -59,24 +59,12 @@ const CascadeSelectProps = [
         default: "null",
         description: "Index of the element in tabbing order."
     },
-    {
-        name: "inputId",
-        type: "string",
-        default: "null",
-        description: "Identifier of the underlying input element."
-    },
     {
         name: "appendTo",
         type: "string",
         default: "body",
         description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
     },
-    {
-        name: "panelClass",
-        type: "string",
-        default: "null",
-        description: "Style class of the overlay panel."
-    },
     {
         name: "loading",
         type: "boolean",
@@ -88,7 +76,25 @@ const CascadeSelectProps = [
         type: "string",
         default: "pi pi-spinner pi-spin",
         description: "Icon to display in loading state."
-    }
+    },
+    {
+        name: "inputId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
+    {
+        name: "inputClass",
+        type: "any",
+        default: "null",
+        description: "Style class of the input field."
+    },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
+    },
 ];
 
 const CascadeSelectEvents = [

src/components/cascadeselect/CascadeSelect.d.ts

@@ -70,28 +70,12 @@ export interface CascadeSelectProps {
      * Index of the element in tabbing order.
      */
     tabindex?: string | undefined;
-    /**
-     * Identifier of the underlying input element.
-     */
-    inputId?: string | undefined;
-    /**
-     *
-     */
-    inputProps?: object | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @see CascadeSelectAppendToType
      * Default value is 'body'.
      */
     appendTo?: CascadeSelectAppendToType;
-    /**
-     * Style class of the overlay panel.
-     */
-    panelClass?: any;
-    /**
-     * 
-     */
-    panelProps?: object | undefined;
     /**
      * Whether the dropdown is in loading state.
      */
@@ -101,6 +85,30 @@ export interface CascadeSelectProps {
      * Default value is 'pi pi-spinner pi-spin'.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+     *
+     */
+    inputStyle?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputProps?: object | undefined;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClass?: any;
+    /**
+     * 
+     */
+    panelProps?: object | undefined;
 }
 
 export interface CascadeSelectSlots {

src/components/cascadeselect/CascadeSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" role="combobox" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
+            <input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" v-bind="inputProps" />
         </div>
         <span :class="labelClass">
@@ -56,14 +56,11 @@ export default {
         placeholder: String,
 		disabled: Boolean,
         dataKey: null,
-        inputId: String,
         tabindex: String,
         appendTo: {
             type: String,
             default: 'body'
         },
-        panelClass: null,
-        panelProps: null,
         loading: {
             type: Boolean,
             default: false
@@ -72,7 +69,12 @@ export default {
             type: String,
             default: 'pi pi-spinner pi-spin'
         },
-        inputProps: null
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        panelClass: null,
+        panelProps: null,
     },
     outsideClickListener: null,
     scrollHandler: null,

src/views/cascadeselect/CascadeSelectDoc.vue

@@ -200,12 +200,6 @@ data() {
                         <td>null</td>
                         <td>Index of the element in tabbing order.</td>
                     </tr>
-                    <tr>
-                        <td>inputId</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Identifier of the underlying input element.</td>
-                    </tr>
                     <tr>
                         <td>appendTo</td>
                         <td>string</td>
@@ -213,12 +207,6 @@ data() &#123;
                         <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
                         and "self" for the element itself.</td>
                     </tr>
-                    <tr>
-                        <td>panelClass</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Style class of the overlay panel.</td>
-                    </tr>
                     <tr>
                         <td>loading</td>
                         <td>boolean</td>
@@ -230,6 +218,42 @@ data() &#123;
                         <td>string</td>
                         <td>pi pi-spinner pi-spin</td>
                         <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td></td>
                     </tr>
 				</tbody>
 			</table>