vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5548 - For MultiSelect

pull/5677/head
tugcekucukoglu 2024-04-08 15:21:00 +03:00
parent e53d18f323
commit 81383c0f0c
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/multiselect/MultiSelect.d.ts vendored
View File

@ -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, PassThrough } from '../ts-helpers';
@ -133,9 +134,10 @@ export interface MultiSelectPassThroughOptions {
*/
token?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the token label's DOM element.
* Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions}
*/
tokenLabel?: MultiSelectPassThroughOptionType;
tokenLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the remove token icon's DOM element.
*/

17
components/lib/multiselect/MultiSelect.vue
View File

@ -31,12 +31,12 @@
</template>
<template v-else-if="display === 'chip'">
<div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('token')" v-bind="ptm('token')">
<slot name="chip" :value="item">
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
</slot>
<slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)" :removeCallback="(event) => removeOption(event, item)">
<span v-if="removeTokenIcon" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
<TimesCircleIcon v-else :class="cx('removeTokenIcon')" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
<slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
<Chip :class="cx('tokenLabel')" :label="getLabelByValue(item)" :removeIcon="removeTokenIcon" removable @remove="removeOption($event, item)" :pt="ptm('tokenLabel')">
<template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template>
</Chip>
</slot>
</div>
<template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@ -197,12 +197,12 @@
<script>
import { FilterService } from 'primevue/api';
import Checkbox from 'primevue/checkbox';
import Chip from 'primevue/chip';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import TimesIcon from 'primevue/icons/times';
import TimesCircleIcon from 'primevue/icons/timescircle';
import InputText from 'primevue/inputtext';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
@ -802,6 +802,7 @@ export default {
}
},
removeOption(event, optionValue) {
event.stopPropagation();
let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
this.updateModel(event, value);
@ -1095,9 +1096,9 @@ export default {
Checkbox,
VirtualScroller,
Portal,
Chip,
TimesIcon,
SearchIcon,
TimesCircleIcon,
ChevronDownIcon,
SpinnerIcon,
CheckIcon