Refactor #2801

api-generator/components/chips.js

@@ -29,6 +29,12 @@ const ChipsProps = [
         default: "false",
         description: "Whether to allow duplicate values or not."
     },
+    {
+        name: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that the element should be disabled."
+    },
     {
         name: "inputId",
         type: "string",
@@ -36,10 +42,16 @@ const ChipsProps = [
         description: "Identifier of the focus input to match a label defined for the chips."
     },
     {
-        name: "disabled",
-        type: "boolean",
-        default: "false",
-        description: "When present, it specifies that the element should be disabled."
+        name: "inputClass",
+        type: "string",
+        default: "null",
+        description: "Style class of the input field."
+    },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
     },
     {
         name: "'aria-labelledby'",

src/components/chips/Chips.d.ts

@@ -43,6 +43,14 @@ export interface ChipsProps {
      * 	Identifier of the focus input to match a label defined for the chips.
      */
     inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any | undefined;
     /**
      * 
      */

src/components/chips/Chips.vue

@@ -8,7 +8,7 @@
                 <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
             </li>
             <li class="p-chips-input-token">
-                <input ref="input" type="text" :id="inputId" :disabled="disabled || maxedOut" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                <input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
                     @focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
             </li>
         </ul>
@@ -41,6 +41,8 @@ export default {
             default: true
         },
         inputId: null,
+        inputClass: null,
+        inputStyle: null,
         inputProps: null,
         disabled: {
             type: Boolean,

src/views/chips/ChipsDoc.vue

@@ -77,6 +77,12 @@ import Chips from 'primevue/chips';
                         <td>true</td>
                         <td>Whether to allow duplicate values or not.</td>
                     </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
                     <tr>
                         <td>inputId</td>
                         <td>string</td>
@@ -84,10 +90,16 @@ import Chips from 'primevue/chips';
                         <td>Style class of the component input field.</td>
                     </tr>
                     <tr>
-                        <td>disabled</td>
-                        <td>boolean</td>
-                        <td>false</td>
-                        <td>When present, it specifies that the element should be disabled.</td>
+                        <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>
 				</tbody>
 			</table>