Refactor #3922 - For Chips
parent
7db93eb073
commit
38a8f2c3e7
|
@ -64,6 +64,12 @@ const ChipsProps = [
|
||||||
type: 'object',
|
type: 'object',
|
||||||
default: 'null',
|
default: 'null',
|
||||||
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
|
description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'pt',
|
||||||
|
type: 'any',
|
||||||
|
default: 'null',
|
||||||
|
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,16 @@
|
||||||
import { InputHTMLAttributes, VNode } from 'vue';
|
import { InputHTMLAttributes, VNode } from 'vue';
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||||
|
|
||||||
|
export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes) | null | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) option method.
|
||||||
|
*/
|
||||||
|
export interface ChipsPassThroughMethodOptions {
|
||||||
|
props: ChipsProps;
|
||||||
|
state: ChipsState;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Custom add event.
|
* Custom add event.
|
||||||
* @see {@link ChipsEmits.add}
|
* @see {@link ChipsEmits.add}
|
||||||
|
@ -32,6 +42,71 @@ export interface ChipsAddEvent {
|
||||||
*/
|
*/
|
||||||
export interface ChipsRemoveEvent extends ChipsAddEvent {}
|
export interface ChipsRemoveEvent extends ChipsAddEvent {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) options.
|
||||||
|
* @see {@link ChipsProps.pt}
|
||||||
|
*/
|
||||||
|
export interface ChipsPassThroughOptions {
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the root's DOM element.
|
||||||
|
*/
|
||||||
|
root?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the container's DOM element.
|
||||||
|
*/
|
||||||
|
container?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the token's DOM element.
|
||||||
|
*/
|
||||||
|
token?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the label's DOM element.
|
||||||
|
*/
|
||||||
|
label?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the remove token icon's DOM element.
|
||||||
|
*/
|
||||||
|
removeTokenIcon?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the input token's DOM element.
|
||||||
|
*/
|
||||||
|
inputToken?: ChipsPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the input's DOM element.
|
||||||
|
*/
|
||||||
|
input?: ChipsPassThroughOptionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough attributes for each DOM elements
|
||||||
|
*/
|
||||||
|
export interface ChipsPassThroughAttributes {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current inline state in Chips component.
|
||||||
|
*/
|
||||||
|
export interface ChipsState {
|
||||||
|
/**
|
||||||
|
* Current id state as a string.
|
||||||
|
*/
|
||||||
|
id: string;
|
||||||
|
/**
|
||||||
|
* Current input value as a string.
|
||||||
|
*/
|
||||||
|
inputValue: string;
|
||||||
|
/**
|
||||||
|
* Current focused state as a boolean.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
focused: boolean;
|
||||||
|
/**
|
||||||
|
* Current focused item index state as a number.
|
||||||
|
*/
|
||||||
|
focusedIndex: number;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Defines valid properties in Chips component.
|
* Defines valid properties in Chips component.
|
||||||
*/
|
*/
|
||||||
|
@ -96,6 +171,11 @@ export interface ChipsProps {
|
||||||
* Establishes a string value that labels the component.
|
* Establishes a string value that labels the component.
|
||||||
*/
|
*/
|
||||||
'aria-label'?: string | undefined;
|
'aria-label'?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {ChipsPassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: ChipsPassThroughOptions;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Defines valid slots in Chips slots.
|
* Defines valid slots in Chips slots.
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerClass">
|
<div :class="containerClass" v-bind="ptm('root')">
|
||||||
<ul
|
<ul
|
||||||
ref="container"
|
ref="container"
|
||||||
class="p-inputtext p-chips-multiple-container"
|
class="p-inputtext p-chips-multiple-container"
|
||||||
|
@ -13,6 +13,7 @@
|
||||||
@focus="onContainerFocus"
|
@focus="onContainerFocus"
|
||||||
@blur="onContainerBlur"
|
@blur="onContainerBlur"
|
||||||
@keydown="onContainerKeyDown"
|
@keydown="onContainerKeyDown"
|
||||||
|
v-bind="ptm('container')"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
v-for="(val, i) of modelValue"
|
v-for="(val, i) of modelValue"
|
||||||
|
@ -24,15 +25,16 @@
|
||||||
:aria-selected="true"
|
:aria-selected="true"
|
||||||
:aria-setsize="modelValue.length"
|
:aria-setsize="modelValue.length"
|
||||||
:aria-posinset="i + 1"
|
:aria-posinset="i + 1"
|
||||||
|
v-bind="ptm('token')"
|
||||||
>
|
>
|
||||||
<slot name="chip" :value="val">
|
<slot name="chip" :value="val">
|
||||||
<span class="p-chips-token-label">{{ val }}</span>
|
<span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
|
<slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
|
||||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
|
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
|
||||||
</slot>
|
</slot>
|
||||||
</li>
|
</li>
|
||||||
<li class="p-chips-input-token" role="option">
|
<li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
:id="inputId"
|
:id="inputId"
|
||||||
|
@ -46,7 +48,7 @@
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@keydown="onKeyDown($event)"
|
@keydown="onKeyDown($event)"
|
||||||
@paste="onPaste($event)"
|
@paste="onPaste($event)"
|
||||||
v-bind="inputProps"
|
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -54,11 +56,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
import TimesCircleIcon from 'primevue/icons/timescircle';
|
import TimesCircleIcon from 'primevue/icons/timescircle';
|
||||||
import { UniqueComponentId } from 'primevue/utils';
|
import { UniqueComponentId } from 'primevue/utils';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Chips',
|
name: 'Chips',
|
||||||
|
extends: BaseComponent,
|
||||||
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
|
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
|
||||||
props: {
|
props: {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { CascadeSelectPassThroughOptions } from '../cascadeselect';
|
||||||
import { ChartPassThroughOptions } from '../chart';
|
import { ChartPassThroughOptions } from '../chart';
|
||||||
import { CheckboxPassThroughOptions } from '../checkbox';
|
import { CheckboxPassThroughOptions } from '../checkbox';
|
||||||
import { ChipPassThroughOptions } from '../chip';
|
import { ChipPassThroughOptions } from '../chip';
|
||||||
|
import { ChipsPassThroughOptions } from '../chips';
|
||||||
import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
|
import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
|
||||||
import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
|
import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
|
||||||
import { ContextMenuPassThroughOptions } from '../contextmenu';
|
import { ContextMenuPassThroughOptions } from '../contextmenu';
|
||||||
|
@ -85,6 +86,7 @@ interface PrimeVuePTOptions {
|
||||||
chart?: ChartPassThroughOptions;
|
chart?: ChartPassThroughOptions;
|
||||||
checkbox?: CheckboxPassThroughOptions;
|
checkbox?: CheckboxPassThroughOptions;
|
||||||
chip?: ChipPassThroughOptions;
|
chip?: ChipPassThroughOptions;
|
||||||
|
chips?: ChipsPassThroughOptions;
|
||||||
confirmdialog?: ConfirmDialogPassThroughOptions;
|
confirmdialog?: ConfirmDialogPassThroughOptions;
|
||||||
confirmpopup?: ConfirmPopupPassThroughOptions;
|
confirmpopup?: ConfirmPopupPassThroughOptions;
|
||||||
contextmenu?: ContextMenuPassThroughOptions;
|
contextmenu?: ContextMenuPassThroughOptions;
|
||||||
|
|
Loading…
Reference in New Issue