Skip to content

Commit

Permalink
Refactor #3832 Refactor #3833 - For MultiSelect
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Apr 4, 2023
1 parent 01fe146 commit c1c9953
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 33 deletions.
72 changes: 61 additions & 11 deletions api-generator/components/multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,39 @@ const MultiSelectProps = [
{
name: 'loadingIcon',
type: 'string',
default: 'pi pi-spinner pi-spin',
default: 'null',
description: 'Icon to display in loading state.'
},
{
name: 'checkboxIcon',
type: 'string',
default: 'null',
description: 'Icon to display in the checkboxes.'
},
{
name: 'closeIcon',
type: 'string',
default: 'null',
description: 'Icon to display in the dropdown close button.'
},
{
name: 'dropdownIcon',
type: 'string',
default: 'null',
description: 'Icon to display in the dropdown.'
},
{
name: 'filterIcon',
type: 'string',
default: 'null',
description: 'Icon to display in filter input.'
},
{
name: 'removeTokenIcon',
type: 'string',
default: 'null',
description: 'Icon to display in chip remove action.'
},
{
name: 'selectAll',
type: 'boolean',
Expand Down Expand Up @@ -357,47 +387,67 @@ const MultiSelectEvents = [
const MultiSelectSlots = [
{
name: 'value',
description: 'Custom content for the item value'
description: 'Custom content for the item value.'
},
{
name: 'chip',
description: 'Custom content for the chip display.'
},
{
name: 'indicator',
description: 'Custom content for the dropdown indicator'
description: 'Custom content for the dropdown indicator.'
},
{
name: 'header',
description: "Custom content for the component's header"
description: "Custom content for the component's header."
},
{
name: 'footer',
description: "Custom content for the component's footer"
description: "Custom content for the component's footer."
},
{
name: 'option',
description: "Custom content for the item's option"
description: "Custom content for the item's option."
},
{
name: 'optiongroup',
description: "Custom content for the item's optiongroup"
description: "Custom content for the item's optiongroup."
},
{
name: 'emptyfilter',
description: 'Custom content when there is no filtered data to display'
description: 'Custom content when there is no filtered data to display.'
},
{
name: 'empty',
description: 'Custom content when there is no data to display'
description: 'Custom content when there is no data to display.'
},
{
name: 'content',
description: 'Custom content for the virtual scroller'
description: 'Custom content for the virtual scroller.'
},
{
name: 'loader',
description: 'Custom content for the virtual scroller loader items'
description: 'Custom content for the virtual scroller loader items.'
},
{
name: 'removetokenicon',
description: 'Custom remove token icon template.'
},
{
name: 'headercheckboxicon',
description: 'Custom header checkbox icon template.'
},
{
name: 'filtericon',
description: 'Custom filter icon template.'
},
{
name: 'closeicon',
description: 'Custom close icon template.'
},
{
name: 'itemcheckboxicon',
description: 'Custom item checkbox icon template.'
}
];

Expand Down
38 changes: 32 additions & 6 deletions components/lib/multiselect/MultiSelect.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,32 +191,26 @@ export interface MultiSelectProps {
loading?: boolean | undefined;
/**
* Icon to display in the checkboxes.
* @defaultValue pi pi-check
*/
checkboxIcon?: string | undefined;
/**
* Icon to display in the dropdown close button.
* @defaultValue pi pi-times
*/
closeIcon?: string | undefined;
/**
* Icon to display in the dropdown.
* @defaultValue pi pi-chevron-down
*/
dropdownIcon?: string | undefined;
/**
* Icon to display in filter input.
* @defaultValue pi pi-search
*/
filterIcon?: string | undefined;
/**
* Icon to display in loading state.
* @defaultValue pi pi-spinner pi-spin
*/
loadingIcon?: string | undefined;
/**
* Icon to display in chip remove action.
* @defaultValue pi pi-times-circle
*/
removeTokenIcon?: string | undefined;
/**
Expand Down Expand Up @@ -414,6 +408,38 @@ export interface MultiSelectSlots {
*/
options: any[];
}): VNode[];
/**
* Custom remove token icon template.
*/
removetokenicon(): VNode[];
/**
* Custom header checkbox icon template.
* @param {Object} scope - header checkbox icon slot's params.
*/
headercheckboxicon(scope: {
/**
* Options of the loader items for virtualscroller
*/
allSelected: boolean;
}): VNode[];
/**
* Custom filter icon template.
*/
filtericon(): VNode[];
/**
* Custom close icon template.
*/
closeicon(): VNode[];
/**
* Custom item checkbox icon template.
* @param {Object} scope - header checkbox icon slot's params.
*/
itemcheckboxicon(scope: {
/**
* Options of the loader items for virtualscroller
*/
selected: boolean;
}): VNode[];
}

/**
Expand Down
52 changes: 36 additions & 16 deletions components/lib/multiselect/MultiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@
<slot name="chip" :value="item">
<span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
</slot>
<span v-if="!disabled" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)"></span>
<slot v-if="!disabled" name="removetokenicon">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
</slot>
</div>
<template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
</template>
Expand All @@ -42,7 +44,8 @@
</div>
<div class="p-multiselect-trigger">
<slot name="indicator">
<span :class="dropdownIconClass" aria-hidden="true"></span>
<component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-multiselect-trigger-icon', loadingIcon]" aria-hidden="true" />
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot>
</div>
<Portal :appendTo="appendTo">
Expand All @@ -56,7 +59,9 @@
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
</div>
<div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
<span :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]"></span>
<slot name="headercheckboxicon" :allSelected="allSelected">
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
</slot>
</div>
</div>
<div v-if="filter" class="p-multiselect-filter-container">
Expand All @@ -76,13 +81,17 @@
@input="onFilterChange"
v-bind="filterInputProps"
/>
<span :class="['p-multiselect-filter-icon', filterIcon]" />
<slot name="filtericon">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
</slot>
</div>
<span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
{{ filterResultMessageText }}
</span>
<button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
<span :class="['p-multiselect-close-icon', closeIcon]" />
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
</slot>
</button>
</div>
<div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
Expand Down Expand Up @@ -110,7 +119,9 @@
>
<div class="p-checkbox p-component">
<div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
<span :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"></span>
<slot name="itemcheckboxicon" :selected="isSelected(option)">
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
</slot>
</div>
</div>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
Expand Down Expand Up @@ -147,6 +158,12 @@

<script>
import { FilterService } from 'primevue/api';
import CheckIcon from 'primevue/icon/check';
import ChevronDownIcon from 'primevue/icon/chevrondown';
import SearchIcon from 'primevue/icon/search';
import SpinnerIcon from 'primevue/icon/spinner';
import TimesIcon from 'primevue/icon/times';
import TimesCircleIcon from 'primevue/icon/timescircle';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
Expand Down Expand Up @@ -240,27 +257,27 @@ export default {
},
checkboxIcon: {
type: String,
default: 'pi pi-check'
default: undefined
},
closeIcon: {
type: String,
default: 'pi pi-times'
default: undefined
},
dropdownIcon: {
type: String,
default: 'pi pi-chevron-down'
default: undefined
},
filterIcon: {
type: String,
default: 'pi pi-search'
default: undefined
},
loadingIcon: {
type: String,
default: 'pi pi-spinner pi-spin'
default: undefined
},
removeTokenIcon: {
type: String,
default: 'pi pi-times-circle'
default: undefined
},
selectAll: {
type: Boolean,
Expand Down Expand Up @@ -1060,9 +1077,6 @@ export default {
}
];
},
dropdownIconClass() {
return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
},
panelStyleClass() {
return [
'p-multiselect-panel p-component',
Expand Down Expand Up @@ -1191,7 +1205,13 @@ export default {
},
components: {
VirtualScroller: VirtualScroller,
Portal: Portal
Portal: Portal,
TimesIcon: TimesIcon,
SearchIcon: SearchIcon,
TimesCircleIcon: TimesCircleIcon,
ChevronDownIcon: ChevronDownIcon,
SpinnerIcon: SpinnerIcon,
CheckIcon: CheckIcon
}
};
</script>
Expand Down

0 comments on commit c1c9953

Please sign in to comment.