Skip to content

Commit

Permalink
Refactor #5681, #5682, #5683 - For MultiSelect
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed May 6, 2024
1 parent 06850f3 commit 646ca0e
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 58 deletions.
12 changes: 12 additions & 0 deletions components/lib/multiselect/BaseMultiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ export default {
type: null,
default: null
},
overlayClass: {
type: String,
default: null
},
overlayStyle: {
type: null,
default: null
},
dataKey: null,
filter: Boolean,
filterPlaceholder: String,
Expand Down Expand Up @@ -103,6 +111,10 @@ export default {
type: String,
default: undefined
},
chipIcon: {
type: String,
default: undefined
},
selectAll: {
type: Boolean,
default: null
Expand Down
98 changes: 68 additions & 30 deletions components/lib/multiselect/MultiSelect.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,34 +130,30 @@ export interface MultiSelectPassThroughOptions {
*/
label?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the token's DOM element.
* Used to pass attributes to the chip's DOM element.
*/
token?: MultiSelectPassThroughOptionType;
chip?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions}
*/
tokenLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
chipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the remove token icon's DOM element.
* Used to pass attributes to the chip icon's DOM element.
*/
removeTokenIcon?: MultiSelectPassThroughOptionType;
chipIcon?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the trigger's DOM element.
* Used to pass attributes to the dropdown's DOM element.
*/
trigger?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the trigger icon's DOM element.
*/
triggerIcon?: MultiSelectPassThroughOptionType;
dropdown?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the dropdown icon's DOM element.
*/
dropdownIcon?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
* Used to pass attributes to the overlay's DOM element.
*/
panel?: MultiSelectPassThroughOptionType;
overlay?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the header's DOM element.
*/
Expand All @@ -174,15 +170,15 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
filterInput?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
filter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/
filterIcon?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the list container's DOM element.
*/
wrapper?: MultiSelectPassThroughOptionType;
listContainer?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
Expand All @@ -193,21 +189,21 @@ export interface MultiSelectPassThroughOptions {
*/
list?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the item group's DOM element.
* Used to pass attributes to the option group's DOM element.
*/
itemGroup?: MultiSelectPassThroughOptionType;
optionGroup?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
* Used to pass attributes to the option's DOM element.
*/
item?: MultiSelectPassThroughOptionType;
option?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the item checkbox's DOM element.
* Used to pass attributes to the option label's DOM element.
*/
itemCheckbox?: MultiSelectPassThroughOptionType;
optionLabel?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the option's DOM element.
* Used to pass attributes to the option checkbox's DOM element.
*/
option?: MultiSelectPassThroughOptionType;
optionCheckbox?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the emptyMessage's DOM element.
*/
Expand Down Expand Up @@ -361,13 +357,23 @@ export interface MultiSelectProps {
*/
inputId?: string | undefined;
/**
* Inline style of the overlay panel.
* @deprecated since v4.0. Use 'overlayStyle' instead.
* Inline style of the overlay.
*/
panelStyle?: any;
/**
* Style class of the overlay panel.
* @deprecated since v4.0. Use 'overlayClass' instead.
* Style class of the overlay.
*/
panelClass?: any;
/**
* Inline style of the overlay.
*/
overlayStyle?: any;
/**
* Style class of the overlay.
*/
overlayClass?: any;
/**
* A property to uniquely identify an option.
*/
Expand Down Expand Up @@ -454,9 +460,13 @@ export interface MultiSelectProps {
loadingIcon?: string | undefined;
/**
* Icon to display in chip remove action.
* @deprecated since v3.27.0. Use 'removetokenicon' slot.
* @deprecated since v4.0. Use 'chipicon' slot.
*/
removeTokenIcon?: string | undefined;
/**
* Icon to display in chip remove action.
*/
chipIcon?: string | undefined;
/**
* Whether all data is selected.
* @defaultValue false
Expand Down Expand Up @@ -683,7 +693,8 @@ export interface MultiSelectSlots {
options: any[];
}): VNode[];
/**
* Custom remove token icon template.
* @deprecated since v4.0. Use 'chipicon' slot instead.
* Custom chip icon template.
* @param {Object} scope - removetokenicon slot's params.
*/
removetokenicon(scope: {
Expand All @@ -696,14 +707,41 @@ export interface MultiSelectSlots {
*/
item: any;
/**
* Remove token icon function.
* Chip icon function.
* @param {Event} event - Browser event
* @param {any} item - Item
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, item: any) => void;
/**
* Chip icon function.
* @param {Event} event - Browser event
* @param {any} item - Item
*/
removeCallback: (event: Event, item: any) => void;
}): VNode[];
/**
* Custom chip icon template.
* @param {Object} scope - chipicon slot's params.
*/
chipicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
/**
* Item of the token.
*/
item: any;
/**
* Chip icon function.
* @param {Event} event - Browser event
* @param {any} item - Item
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, item: any) => void;
/**
* Remove token icon function.
* Chip icon function.
* @param {Event} event - Browser event
* @param {any} item - Item
*/
Expand Down
38 changes: 23 additions & 15 deletions components/lib/multiselect/MultiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,12 @@
{{ label || 'empty' }}
</template>
<template v-else-if="display === 'chip'">
<span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('token')" v-bind="ptm('token')">
<span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('chip')" v-bind="ptm('chip')">
<slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
<Chip :class="cx('tokenLabel')" :label="getLabelByValue(item)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('tokenLabel')">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('chipLabel')">
<template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
<slot :name="$slots.removetokenicon ? 'removetokenicon' : 'chipicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template>
</Chip>
</slot>
Expand All @@ -44,7 +45,7 @@
</slot>
</div>
</div>
<div :class="cx('trigger')" v-bind="ptm('trigger')">
<div :class="cx('dropdown')" v-bind="ptm('dropdown')">
<slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
Expand All @@ -55,7 +56,7 @@
</div>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="[cx('panel'), panelClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('panel')">
<div v-if="overlayVisible" :ref="overlayRef" :style="[panelStyle, overlayStyle]" :class="[cx('overlay'), panelClass, overlayClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
<span
ref="firstHiddenFocusableElementOnOverlay"
role="presentation"
Expand Down Expand Up @@ -91,7 +92,7 @@
:value="filterValue"
@vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated"
:class="cx('filterInput')"
:class="cx('filter')"
:placeholder="filterPlaceholder"
:invalid="invalid"
:disabled="disabled"
Expand All @@ -104,7 +105,7 @@
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@input="onFilterChange"
:pt="ptm('filterInput')"
:pt="ptm('filter')"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
Expand All @@ -114,20 +115,27 @@
{{ filterResultMessageText }}
</span>
</div>
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" :aria-label="listAriaLabel" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')"
role="option"
v-bind="ptm('optionGroup')"
>
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('item', { option, index: i, getItemOptions })"
:class="cx('option', { option, index: i, getItemOptions })"
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)"
Expand All @@ -136,24 +144,24 @@
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'item')"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'option')"
:data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox')">
<template #icon="slotProps">
<component v-if="$slots.itemcheckboxicon" :is="$slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component v-if="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :is="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component
v-else-if="slotProps.checked"
:is="checkboxIcon ? 'span' : 'CheckIcon'"
:class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox.icon')"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox.icon')"
/>
</template>
</Checkbox>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
<span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
<span v-bind="ptm('optionLabel')">{{ getOptionLabel(option) }}</span>
</slot>
</li>
</template>
Expand Down
Loading

0 comments on commit 646ca0e

Please sign in to comment.