Refactor #3922 - For InputText

pull/3938/head
Tuğçe Küçükoğlu 2023-05-05 15:53:35 +03:00
parent c1a506287b
commit 24538f0fd0
4 changed files with 37 additions and 1 deletions

View File

@ -4,6 +4,12 @@ const InputTextProps = [
type: 'any', type: 'any',
default: 'null', default: 'null',
description: 'Value of the component.' description: 'Value of the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
} }
]; ];

View File

@ -31,6 +31,7 @@ import { ImagePassThroughOptions } from '../image';
import { InlineMessagePassThroughOptions } from '../inlinemessage'; import { InlineMessagePassThroughOptions } from '../inlinemessage';
import { InplacePassThroughOptions } from '../inplace'; import { InplacePassThroughOptions } from '../inplace';
import { InputMaskPassThroughOptions } from '../inputmask'; import { InputMaskPassThroughOptions } from '../inputmask';
import { InputTextPassThroughOptions } from '../inputtext';
import { MegaMenuPassThroughOptions } from '../megamenu'; import { MegaMenuPassThroughOptions } from '../megamenu';
import { MenuPassThroughOptions } from '../menu'; import { MenuPassThroughOptions } from '../menu';
import { MenubarPassThroughOptions } from '../menubar'; import { MenubarPassThroughOptions } from '../menubar';
@ -107,6 +108,7 @@ interface PrimeVuePTOptions {
inlinemessage?: InlineMessagePassThroughOptions; inlinemessage?: InlineMessagePassThroughOptions;
inplace?: InplacePassThroughOptions; inplace?: InplacePassThroughOptions;
inputmask?: InputMaskPassThroughOptions; inputmask?: InputMaskPassThroughOptions;
inputtext?: InputTextPassThroughOptions;
megamenu?: MegaMenuPassThroughOptions; megamenu?: MegaMenuPassThroughOptions;
menu?: MenuPassThroughOptions; menu?: MenuPassThroughOptions;
menubar?: MenubarPassThroughOptions; menubar?: MenubarPassThroughOptions;

View File

@ -10,6 +10,26 @@
import { InputHTMLAttributes } from 'vue'; import { InputHTMLAttributes } from 'vue';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | null | undefined;
/**
* Custom passthrough(pt) options.
* @see {@link InputTextProps.pt}
*/
export interface InputTextPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: InputTextPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface InputTextPassThroughAttributes {
[key: string]: any;
}
/** /**
* Defines valid properties in InputText component. * Defines valid properties in InputText component.
*/ */
@ -18,6 +38,11 @@ export interface InputTextProps extends InputHTMLAttributes {
* Value of the component. * Value of the component.
*/ */
modelValue?: Nullable<string>; modelValue?: Nullable<string>;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {InputTextPassThroughOptions}
*/
pt?: InputTextPassThroughOptions;
} }
/** /**

View File

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