Fixed #2801 - New inputClass and inputStyle properties

pull/2809/head
Tuğçe Küçükoğlu 2022-07-22 21:41:34 +03:00
parent 9370a67652
commit 188fe3655e
4 changed files with 86 additions and 46 deletions

View File

@ -59,24 +59,12 @@ const CascadeSelectProps = [
default: "null",
description: "Index of the element in tabbing order."
},
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "appendTo",
type: "string",
default: "body",
description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
},
{
name: "panelClass",
type: "string",
default: "null",
description: "Style class of the overlay panel."
},
{
name: "loading",
type: "boolean",
@ -88,7 +76,25 @@ const CascadeSelectProps = [
type: "string",
default: "pi pi-spinner pi-spin",
description: "Icon to display in loading state."
}
},
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "inputClass",
type: "any",
default: "null",
description: "Style class of the input field."
},
{
name: "inputStyle",
type: "any",
default: "null",
description: "Inline style of the input field."
},
];
const CascadeSelectEvents = [

View File

@ -70,28 +70,12 @@ export interface CascadeSelectProps {
* Index of the element in tabbing order.
*/
tabindex?: string | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
*
*/
inputProps?: object | undefined;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
* @see CascadeSelectAppendToType
* Default value is 'body'.
*/
appendTo?: CascadeSelectAppendToType;
/**
* Style class of the overlay panel.
*/
panelClass?: any;
/**
*
*/
panelProps?: object | undefined;
/**
* Whether the dropdown is in loading state.
*/
@ -101,6 +85,30 @@ export interface CascadeSelectProps {
* Default value is 'pi pi-spinner pi-spin'.
*/
loadingIcon?: string | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Style class of the input field.
*/
inputClass?: any | undefined;
/**
*
*/
inputStyle?: any | undefined;
/**
* Inline style of the input field.
*/
inputProps?: object | undefined;
/**
* Style class of the overlay panel.
*/
panelClass?: any;
/**
*
*/
panelProps?: object | undefined;
}
export interface CascadeSelectSlots {

View File

@ -1,7 +1,7 @@
<template>
<div ref="container" :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" role="combobox" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
<input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" v-bind="inputProps" />
</div>
<span :class="labelClass">
@ -56,14 +56,11 @@ export default {
placeholder: String,
disabled: Boolean,
dataKey: null,
inputId: String,
tabindex: String,
appendTo: {
type: String,
default: 'body'
},
panelClass: null,
panelProps: null,
loading: {
type: Boolean,
default: false
@ -72,7 +69,12 @@ export default {
type: String,
default: 'pi pi-spinner pi-spin'
},
inputProps: null
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null,
panelClass: null,
panelProps: null,
},
outsideClickListener: null,
scrollHandler: null,

View File

@ -200,12 +200,6 @@ data() &#123;
<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>appendTo</td>
<td>string</td>
@ -213,12 +207,6 @@ data() &#123;
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>loading</td>
<td>boolean</td>
@ -230,6 +218,42 @@ data() &#123;
<td>string</td>
<td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>inputClass</td>
<td>any</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>
<tr>
<td>panelProps</td>
<td>object</td>
<td>null</td>
<td></td>
</tr>
</tbody>
</table>