Refactor - TreeSelect

pull/2809/head
Tuğçe Küçükoğlu 2022-07-22 22:25:22 +03:00
parent ef7b5294a7
commit 5e41e0a56b
4 changed files with 57 additions and 19 deletions
api-generator/components
src
components/treeselect
views/treeselect

View File

@ -41,6 +41,18 @@ const TreeSelectProps = [
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "inputStyle",
type: "any",
default: "null",
description: "Inline style of the input field."
},
{
name: "inputClass",
type: "string",
default: "null",
description: "Style class of the input field."
},
{
name: "selectionMode",
type: "string",

View File

@ -34,10 +34,6 @@ export interface TreeSelectProps {
* Index of the element in tabbing order.
*/
tabindex?: string | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Defines the selection mode.
* @see TreeSelectSelectionModeType
@ -70,6 +66,22 @@ export interface TreeSelectProps {
* Default value is true.
*/
metaKeySelection?: boolean | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Style class of the input field.
*/
inputClass?: any | undefined;
/**
* Inline style of the input field.
*/
inputStyle?: any | undefined;
/**
*
*/
inputProps?: object | undefined;
}
export interface TreeSelectSlots {

View File

@ -1,7 +1,7 @@
<template>
<div ref="container" :class="containerClass" @click="onClick">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="combobox" :id="inputId" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
<input ref="focusInput" type="text" role="combobox" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" v-bind="inputProps" />
</div>
<div class="p-treeselect-label-container">
@ -64,8 +64,6 @@ export default {
placeholder: String,
disabled: Boolean,
tabindex: String,
inputId: String,
inputProps: null,
selectionMode: {
type: String,
default: 'single'
@ -91,6 +89,10 @@ export default {
type: Boolean,
default: true
},
inputId: String,
inputClass: String,
inputStyle: null,
inputProps: null,
'aria-labelledby': {
type: String,
default: null

View File

@ -286,24 +286,12 @@ data() {
<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>selectionMode</td>
<td>string</td>
<td>null</td>
<td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
</tr>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
@ -329,6 +317,30 @@ data() {
<td>true</td>
<td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<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>
<tr>
<td>panelClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
</tbody>
</table>