Refactor #3922 - For Textarea

api-generator/components/textarea.js

@@ -10,6 +10,12 @@ const TextareaProps = [
         type: 'boolean',
         default: 'false',
         description: 'When present, height of textarea changes as being typed.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -48,10 +48,10 @@ import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
 import { RadioButtonPassThroughOptions } from '../radiobutton';
 import { ScrollPanelPassThroughOptions } from '../scrollpanel';
 import { ScrollTopPassThroughOptions } from '../scrolltop';
+import { SelectButtonPassThroughOptions } from '../selectbutton';
 import { SidebarPassThroughOptions } from '../sidebar';
 import { SkeletonPassThroughOptions } from '../skeleton';
 import { SpeedDialPassThroughOptions } from '../speeddial';
-import { SelectButtonPassThroughOptions } from '../selectbutton';
 import { SplitButtonPassThroughOptions } from '../splitbutton';
 import { SplitterPassThroughOptions } from '../splitter';
 import { TabMenuPassThroughOptions } from '../tabmenu';
@@ -59,6 +59,7 @@ import { TabPanelPassThroughOptions } from '../tabpanel';
 import { TabViewPassThroughOptions } from '../tabview';
 import { TagPassThroughOptions } from '../tag';
 import { TerminalPassThroughOptions } from '../terminal';
+import { TextareaPassThroughOptions } from '../textarea';
 import { TieredMenuPassThroughOptions } from '../tieredmenu';
 import { ToastPassThroughOptions } from '../toast';
 import { ToolbarPassThroughOptions } from '../toolbar';
@@ -143,6 +144,7 @@ interface PrimeVuePTOptions {
     tabview?: TabViewPassThroughOptions;
     tag?: TagPassThroughOptions;
     terminal?: TerminalPassThroughOptions;
+    textarea?: TextareaPassThroughOptions;
     tieredmenu?: TieredMenuPassThroughOptions;
     toast?: ToastPassThroughOptions;
     toolbar?: ToolbarPassThroughOptions;

components/lib/textarea/Textarea.d.ts

@@ -10,6 +10,33 @@
 import { TextareaHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TextareaPassThroughOptionType = TextareaPassThroughAttributes | ((options: TextareaPassThroughMethodOptions) => TextareaPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TextareaPassThroughMethodOptions {
+    props: TextareaProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TextareaProps.pt}
+ */
+export interface TextareaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TextareaPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TextareaPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component.
  * @extends TextareaHTMLAttributes
@@ -24,6 +51,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue false
      */
     autoResize?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TextareaPassThroughOptions}
+     */
+    pt?: TextareaPassThroughOptions;
 }
 
 /**

components/lib/textarea/Textarea.vue

@@ -1,10 +1,13 @@
 <template>
-    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput"></textarea>
+    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput" v-bind="ptm('root')"></textarea>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Textarea',
+    extends: BaseComponent,
     emits: ['update:modelValue'],
     props: {
         modelValue: null,