Refactor #5548 - For AutoComplete
parent
a829fac29b
commit
916825df76
|
@ -9,6 +9,7 @@
|
|||
*/
|
||||
import { TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { ChipPassThroughOptions } from '../chip';
|
||||
import { InputTextPassThroughOptions } from '../inputtext';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, Nullable, PassThrough } from '../ts-helpers';
|
||||
|
@ -156,9 +157,10 @@ export interface AutoCompletePassThroughOptions {
|
|||
*/
|
||||
token?: AutoCompletePassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the token label's DOM element.
|
||||
* Used to pass attributes to the Chip.
|
||||
* @see {@link ChipPassThroughOptions}
|
||||
*/
|
||||
tokenLabel?: AutoCompletePassThroughOptionType;
|
||||
tokenLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the remove token icon's DOM element.
|
||||
*/
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
>
|
||||
<li
|
||||
v-for="(option, i) of modelValue"
|
||||
:key="i"
|
||||
:key="`${i}_${getOptionLabel(option)}`"
|
||||
:id="id + '_multiple_option_' + i"
|
||||
:class="cx('token', { i })"
|
||||
role="option"
|
||||
|
@ -55,11 +55,12 @@
|
|||
:aria-posinset="i + 1"
|
||||
v-bind="ptm('token')"
|
||||
>
|
||||
<slot name="chip" :value="option">
|
||||
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
|
||||
</slot>
|
||||
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)" :removeCallback="(event) => removeOption(event, i)">
|
||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
|
||||
<slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
|
||||
<Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
|
||||
<template #removeicon>
|
||||
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
|
||||
</template>
|
||||
</Chip>
|
||||
</slot>
|
||||
</li>
|
||||
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
|
||||
|
@ -182,9 +183,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Chip from 'primevue/chip';
|
||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||
import SpinnerIcon from 'primevue/icons/spinner';
|
||||
import TimesCircleIcon from 'primevue/icons/timescircle';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
|
@ -968,7 +969,7 @@ export default {
|
|||
Portal,
|
||||
ChevronDownIcon,
|
||||
SpinnerIcon,
|
||||
TimesCircleIcon
|
||||
Chip
|
||||
},
|
||||
directives: {
|
||||
ripple: Ripple
|
||||
|
|
|
@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
|
|||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
|
||||
|
||||
export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | string) | string | null | undefined;
|
||||
export declare type ChipPassThroughOptionType<T = any> = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions<T>) => ChipPassThroughAttributes | string) | string | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface ChipPassThroughMethodOptions {
|
||||
export interface ChipPassThroughMethodOptions<T> {
|
||||
/**
|
||||
* Defines instance.
|
||||
*/
|
||||
|
@ -37,7 +37,7 @@ export interface ChipPassThroughMethodOptions {
|
|||
/**
|
||||
* Defines parent options.
|
||||
*/
|
||||
parent: any;
|
||||
parent: T;
|
||||
/**
|
||||
* Defines passthrough(pt) options in global config.
|
||||
*/
|
||||
|
@ -48,27 +48,27 @@ export interface ChipPassThroughMethodOptions {
|
|||
* Custom passthrough(pt) options.
|
||||
* @see {@link ChipProps.pt}
|
||||
*/
|
||||
export interface ChipPassThroughOptions {
|
||||
export interface ChipPassThroughOptions<T = any> {
|
||||
/**
|
||||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: ChipPassThroughOptionType;
|
||||
root?: ChipPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the image's DOM element.
|
||||
*/
|
||||
image?: ChipPassThroughOptionType;
|
||||
image?: ChipPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
*/
|
||||
icon?: ChipPassThroughOptionType;
|
||||
icon?: ChipPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the label' DOM element.
|
||||
*/
|
||||
label?: ChipPassThroughOptionType;
|
||||
label?: ChipPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the removeIcon's DOM element.
|
||||
*/
|
||||
removeIcon?: ChipPassThroughOptionType;
|
||||
removeIcon?: ChipPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
@ -3313,9 +3313,9 @@
|
|||
"name": "tokenLabel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "AutoCompletePassThroughOptionType",
|
||||
"type": "ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the token label's DOM element."
|
||||
"description": "Used to pass attributes to the Chip."
|
||||
},
|
||||
{
|
||||
"name": "removeTokenIcon",
|
||||
|
@ -11969,7 +11969,7 @@
|
|||
"name": "parent",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"type": "T",
|
||||
"default": "",
|
||||
"description": "Defines parent options."
|
||||
},
|
||||
|
@ -11992,7 +11992,7 @@
|
|||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
|
@ -12000,7 +12000,7 @@
|
|||
"name": "image",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the image's DOM element."
|
||||
},
|
||||
|
@ -12008,7 +12008,7 @@
|
|||
"name": "icon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the icon's DOM element."
|
||||
},
|
||||
|
@ -12016,7 +12016,7 @@
|
|||
"name": "label",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the label' DOM element."
|
||||
},
|
||||
|
@ -12024,7 +12024,7 @@
|
|||
"name": "removeIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the removeIcon's DOM element."
|
||||
},
|
||||
|
@ -12125,7 +12125,7 @@
|
|||
"name": "pt",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThrough<ChipPassThroughOptions>",
|
||||
"type": "PassThrough<ChipPassThroughOptions<any>>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to DOM elements inside the component."
|
||||
},
|
||||
|
@ -12342,6 +12342,29 @@
|
|||
],
|
||||
"methods": []
|
||||
},
|
||||
"ChipsSharedPassThroughMethodOptions": {
|
||||
"description": "Custom shared passthrough(pt) option method.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "props",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "ChipsProps",
|
||||
"default": "",
|
||||
"description": "Defines valid properties."
|
||||
},
|
||||
{
|
||||
"name": "state",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "ChipsState",
|
||||
"default": "",
|
||||
"description": "Defines current inline state."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"ChipsAddEvent": {
|
||||
"description": "Custom add event.",
|
||||
"relatedProp": "ChipsEmits.add",
|
||||
|
@ -12422,9 +12445,9 @@
|
|||
"name": "label",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ChipsPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptions<ChipsSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the label's DOM element."
|
||||
"description": "Used to pass attributes to the Chip component."
|
||||
},
|
||||
{
|
||||
"name": "removeTokenIcon",
|
||||
|
@ -15330,7 +15353,7 @@
|
|||
"name": "chip",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "DefaultPassThrough<ChipPassThroughOptions>",
|
||||
"type": "DefaultPassThrough<ChipPassThroughOptions<any>>",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
|
@ -37960,9 +37983,9 @@
|
|||
"name": "tokenLabel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "MultiSelectPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the token label's DOM element."
|
||||
"description": "Used to pass attributes to the Chip."
|
||||
},
|
||||
{
|
||||
"name": "removeTokenIcon",
|
||||
|
@ -58228,9 +58251,9 @@
|
|||
"name": "tokenLabel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "TreeSelectPassThroughOptionType",
|
||||
"type": "ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the token label's DOM element."
|
||||
"description": "Used to pass attributes to the Chip."
|
||||
},
|
||||
{
|
||||
"name": "trigger",
|
||||
|
|
|
@ -255,6 +255,7 @@ export default {
|
|||
'primevue/badge': path.resolve(__dirname, './components/lib/badge/Badge.vue'),
|
||||
'primevue/togglebutton': path.resolve(__dirname, './components/lib/togglebutton/ToggleButton.vue'),
|
||||
'primevue/listbox': path.resolve(__dirname, './components/lib/listbox/Listbox.vue'),
|
||||
'primevue/chip': path.resolve(__dirname, './components/lib/chip/Chip.vue'),
|
||||
'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
|
||||
'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),
|
||||
'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),
|
||||
|
|
|
@ -265,6 +265,7 @@ const CORE_DEPENDENCIES = {
|
|||
'primevue/tieredmenu': 'primevue.tieredmenu',
|
||||
'primevue/badge': 'primevue.badge',
|
||||
'primevue/listbox': 'primevue.listbox',
|
||||
'primevue/chip': 'primevue.chip',
|
||||
'primevue/togglebutton': 'primevue.togglebutton',
|
||||
...CORE_PASSTHROUGH_DEPENDENCIES,
|
||||
...CORE_THEME_DEPENDENCIES
|
||||
|
|
Loading…
Reference in New Issue