Refactor #2801 - TreeSelect

api-generator/components/treeselect.js

@@ -41,6 +41,18 @@ const TreeSelectProps = [
         default: "null",
         description: "Identifier of the underlying input element."
     },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
+    },
+    {
+        name: "inputClass",
+        type: "string",
+        default: "null",
+        description: "Style class of the input field."
+    },
     {
         name: "selectionMode",
         type: "string",

src/components/treeselect/TreeSelect.d.ts

@@ -34,10 +34,6 @@ export interface TreeSelectProps {
      * Index of the element in tabbing order.
      */
     tabindex?: string | undefined;
-    /**
-     * Identifier of the underlying input element.
-     */
-    inputId?: string | undefined;
     /**
      * Defines the selection mode.
      * @see TreeSelectSelectionModeType
@@ -70,6 +66,22 @@ export interface TreeSelectProps {
      * Default value is true.
      */
     metaKeySelection?: boolean | undefined;
+    /**
+     * 	Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any | undefined;
+    /**
+     * 
+     */
+    inputProps?: object | undefined;
 }
 
 export interface TreeSelectSlots {

src/components/treeselect/TreeSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" type="text" role="combobox" :id="inputId" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+            <input ref="focusInput" type="text" role="combobox" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" v-bind="inputProps" />
         </div>
         <div class="p-treeselect-label-container">
@@ -64,8 +64,6 @@ export default {
 		placeholder: String,
 		disabled: Boolean,
         tabindex: String,
-        inputId: String,
-        inputProps: null,
         selectionMode: {
             type: String,
             default: 'single'
@@ -91,6 +89,10 @@ export default {
             type: Boolean,
             default: true
         },
+        inputId: String,
+        inputClass: String,
+        inputStyle: null,
+        inputProps: null,
         'aria-labelledby': {
             type: String,
 			default: null

src/views/treeselect/TreeSelectDoc.vue

@@ -286,24 +286,12 @@ 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>selectionMode</td>
                         <td>string</td>
                         <td>null</td>
                         <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
                     </tr>
-                    <tr>
-                        <td>panelClass</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Style class of the overlay panel.</td>
-                    </tr>
                     <tr>
                         <td>appendTo</td>
                         <td>string</td>
@@ -329,6 +317,30 @@ data() {
                         <td>true</td>
                         <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
                             can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</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>
 				</tbody>
 			</table>