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',
default: 'null',
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 { InplacePassThroughOptions } from '../inplace';
import { InputMaskPassThroughOptions } from '../inputmask';
import { InputTextPassThroughOptions } from '../inputtext';
import { MegaMenuPassThroughOptions } from '../megamenu';
import { MenuPassThroughOptions } from '../menu';
import { MenubarPassThroughOptions } from '../menubar';
@ -107,6 +108,7 @@ interface PrimeVuePTOptions {
inlinemessage?: InlineMessagePassThroughOptions;
inplace?: InplacePassThroughOptions;
inputmask?: InputMaskPassThroughOptions;
inputtext?: InputTextPassThroughOptions;
megamenu?: MegaMenuPassThroughOptions;
menu?: MenuPassThroughOptions;
menubar?: MenubarPassThroughOptions;

View File

@ -10,6 +10,26 @@
import { InputHTMLAttributes } from 'vue';
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.
*/
@ -18,6 +38,11 @@ export interface InputTextProps extends InputHTMLAttributes {
* Value of the component.
*/
modelValue?: Nullable<string>;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {InputTextPassThroughOptions}
*/
pt?: InputTextPassThroughOptions;
}
/**

View File

@ -1,10 +1,13 @@
<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>
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'InputText',
extends: BaseComponent,
emits: ['update:modelValue'],
props: {
modelValue: null