pull/3976/head
Kerem YILDAN 2023-04-18 13:56:20 +03:00
commit 361a0f0bbc
50 changed files with 597 additions and 170 deletions

View File

@ -34,8 +34,12 @@
<template v-else-if="columnProp('expander')"> <template v-else-if="columnProp('expander')">
<button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow"> <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow">
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" /> <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
<component v-else-if="column.children && !column.children.rowtogglericon && isRowExpanded" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" /> <template v-else>
<component v-else-if="column.children && !column.children.rowtogglericon && !isRowExpanded" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" /> <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" />
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" />
</template>
</button> </button>
</template> </template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')"> <template v-else-if="editMode === 'row' && columnProp('rowEditor')">

View File

@ -4,7 +4,8 @@
<input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" /> <input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" />
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]"> <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
<component :is="headerCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" /> <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
<CheckIcon v-else class="p-checkbox-icon" />
</div> </div>
</div> </div>
</template> </template>

View File

@ -12,8 +12,12 @@
<td :colspan="columnsLength - 1"> <td :colspan="columnsLength - 1">
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button"> <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" /> <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
<component v-else-if="!templates['rowgrouptogglericon'] && isRowGroupExpanded(rowData)" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" /> <template v-else>
<component v-else-if="!templates['rowgrouptogglericon'] && !isRowGroupExpanded(rowData)" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" /> <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" />
</template>
</button> </button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" /> <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
</td> </td>

View File

@ -146,14 +146,17 @@ export interface DialogProps {
style?: any; style?: any;
/** /**
* Icon to display in the dialog close button. * Icon to display in the dialog close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**
* Icon to display in the dialog maximize button when dialog is not maximized. * Icon to display in the dialog maximize button when dialog is not maximized.
* @deprecated since v3.27.0. Use 'maximizeicon' slot.
*/ */
maximizeIcon?: string | undefined; maximizeIcon?: string | undefined;
/** /**
* Icon to display in the dialog maximize button when dialog is maximized. * Icon to display in the dialog maximize button when dialog is minimized.
* @deprecated since v3.27.0. Use 'minimizeicon' slot.
*/ */
minimizeIcon?: string | undefined; minimizeIcon?: string | undefined;
} }
@ -179,8 +182,8 @@ export interface DialogSlots {
*/ */
closeicon(): VNode[]; closeicon(): VNode[];
/** /**
* Custom maximizeicon icon template of dialog. * Custom maximize icon template of dialog.
* @param {Object} scope - maximizeicon icon slot's params. * @param {Object} scope - maximize icon slot's params.
*/ */
maximizeicon(scope: { maximizeicon(scope: {
/** /**

View File

@ -157,6 +157,7 @@ export interface DropdownProps {
filterInputProps?: InputHTMLAttributes | undefined; filterInputProps?: InputHTMLAttributes | undefined;
/** /**
* Uses to pass all properties of the HTMLElement to the clear icon inside the component. * Uses to pass all properties of the HTMLElement to the clear icon inside the component.
* @deprecated since v3.26.0. Use 'pt' peroperty.
*/ */
clearIconProps?: HTMLAttributes | undefined; clearIconProps?: HTMLAttributes | undefined;
/** /**
@ -171,18 +172,22 @@ export interface DropdownProps {
loading?: boolean | undefined; loading?: boolean | undefined;
/** /**
* Icon to display in clear button. * Icon to display in clear button.
* @deprecated since v3.27.0. Use 'clearicon' slot.
*/ */
clearIcon?: string | undefined; clearIcon?: string | undefined;
/** /**
* Icon to display in the dropdown. * Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
*/ */
dropdownIcon?: string | undefined; dropdownIcon?: string | undefined;
/** /**
* Icon to display in filter input. * Icon to display in filter input.
* @deprecated since v3.27.0. Use 'filtericon' slot.
*/ */
filterIcon?: string | undefined; filterIcon?: string | undefined;
/** /**
* Icon to display in loading state. * Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/** /**
@ -369,6 +374,40 @@ export interface DropdownSlots {
*/ */
options: any[]; options: any[];
}): VNode[]; }): VNode[];
/**
* Custom clear icon template.
* @param {Object} scope - clear icon slot's params.
*/
clearicon(scope: {
/**
* Clear icon click function.
*/
onClick: void;
}): VNode[];
/**
* Custom dropdown icon template.
* @param {Object} scope - dropdown icon slot's params.
*/
dropdownicon(scope: {
/**
* Style class of the component
*/
class: any;
}): VNode[];
/**
* Custom loading icon template.
* @param {Object} scope - loading icon slot's params.
*/
loadingicon(scope: {
/**
* Style class of the component
*/
class: any;
}): VNode[];
/**
* Custom filter icon template.
*/
filtericon(): VNode[];
} }
/** /**

View File

@ -236,17 +236,17 @@ export interface FileUploadProps {
showCancelButton?: boolean | undefined; showCancelButton?: boolean | undefined;
/** /**
* Icon of the choose button. * Icon of the choose button.
* @todo * @deprecated since v3.27.0. Use 'chooseicon' slot.
*/ */
chooseIcon?: string | undefined; chooseIcon?: string | undefined;
/** /**
* Icon of the upload button. * Icon of the upload button.
* @todo * @deprecated since v3.27.0. Use 'updateicon' slot.
*/ */
uploadIcon?: string | undefined; uploadIcon?: string | undefined;
/** /**
* Icon of the cancel button. * Icon of the cancel button.
* @todo * @deprecated since v3.27.0. Use 'cancelicon' slot.
*/ */
cancelIcon?: string | undefined; cancelIcon?: string | undefined;
/** /**

View File

@ -29,6 +29,7 @@ export interface ImageProps {
imageClass?: any; imageClass?: any;
/** /**
* Custom indicator icon. * Custom indicator icon.
* @deprecated since v3.27.0. Use 'indicator' slot.
*/ */
indicatorIcon?: string; indicatorIcon?: string;
} }

View File

@ -21,7 +21,7 @@ export interface InlineMessageProps {
severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined; severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
/** /**
* Display a custom icon for the message. * Display a custom icon for the message.
* @todo * @deprecated since v3.27.0. Use 'icon' slot.
*/ */
icon?: string | undefined; icon?: string | undefined;
} }

View File

@ -31,6 +31,7 @@ export interface InplaceProps {
disabled?: boolean | undefined; disabled?: boolean | undefined;
/** /**
* Icon to display in the close button. * Icon to display in the close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**
@ -55,6 +56,10 @@ export interface InplaceSlots {
* Custom content template. * Custom content template.
*/ */
content(): VNode[]; content(): VNode[];
/**
* Custom close icon template.
*/
closeicon(): VNode[];
} }
/** /**

View File

@ -73,10 +73,12 @@ export interface InputNumberProps {
decrementButtonClass?: string | undefined; decrementButtonClass?: string | undefined;
/** /**
* Style class of the increment button. * Style class of the increment button.
* @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
*/ */
incrementButtonIcon?: string | undefined; incrementButtonIcon?: string | undefined;
/** /**
* Style class of the decrement button. * Style class of the decrement button.
* @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
*/ */
decrementButtonIcon?: string | undefined; decrementButtonIcon?: string | undefined;
/** /**

View File

@ -169,7 +169,7 @@ export interface ListboxProps {
tabindex?: number | string | undefined; tabindex?: number | string | undefined;
/** /**
* Icon to display in filter input. * Icon to display in filter input.
* @defaultValue ß * @deprecated since v3.27.0. Use 'filtericon' slot.
*/ */
filterIcon?: string | undefined; filterIcon?: string | undefined;
/** /**

View File

@ -20,14 +20,19 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" /> <template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
</template>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="processedItem.item"></component> <component v-else :is="templates.item" :item="processedItem.item"></component>

View File

@ -4,12 +4,14 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom> <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
<span v-else-if="item.icon" :class="iconClass" />
<span class="p-menuitem-text">{{ label() }}</span> <span class="p-menuitem-text">{{ label() }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
<component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
<span v-else-if="item.icon" :class="iconClass" />
<span class="p-menuitem-text">{{ label() }}</span> <span class="p-menuitem-text">{{ label() }}</span>
</a> </a>
</template> </template>

View File

@ -61,9 +61,9 @@ export interface MenubarSlots {
item: MenuItem; item: MenuItem;
}): VNode[]; }): VNode[];
/** /**
* Custom bar icon template. * Custom popup icon template on responsive mode.
*/ */
baricon(): VNode[]; popupicon(): VNode[];
/** /**
* Custom submenu icon template. * Custom submenu icon template.
*/ */

View File

@ -17,8 +17,8 @@
@keydown="menuButtonKeydown($event)" @keydown="menuButtonKeydown($event)"
v-bind="buttonProps" v-bind="buttonProps"
> >
<slot name="baricon"> <slot name="popupicon">
<component :is="'BarsIcon'" /> <BarsIcon />
</slot> </slot>
</a> </a>
<MenubarSub <MenubarSub

View File

@ -19,14 +19,19 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" /> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
</template>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="processedItem.item"></component> <component v-else :is="templates.item" :item="processedItem.item"></component>

View File

@ -40,10 +40,12 @@ export interface MessageProps {
icon?: string | undefined; icon?: string | undefined;
/** /**
* Icon to display in the message close button. * Icon to display in the message close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**
* Uses to pass all properties of the HTMLButtonElement to the close button. * Uses to pass all properties of the HTMLButtonElement to the close button.
* @deprecated since v3.26.0. Use 'pt' property.
*/ */
closeButtonProps?: ButtonHTMLAttributes | undefined; closeButtonProps?: ButtonHTMLAttributes | undefined;
} }
@ -59,11 +61,21 @@ export interface MessageSlots {
/** /**
* Custom message icon template. * Custom message icon template.
*/ */
messageicon(): VNode[]; messageicon(scope: {
/**
* Style class of the item icon element.
*/
class: any;
}): VNode[];
/** /**
* Custom close icon template. * Custom close icon template.
*/ */
closeicon(): VNode[]; closeicon(scope: {
/**
* Style class of the item icon element.
*/
class: any;
}): VNode[];
} }
/** /**

View File

@ -2,15 +2,16 @@
<transition name="p-message" appear> <transition name="p-message" appear>
<div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true"> <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
<div class="p-message-wrapper"> <div class="p-message-wrapper">
<slot name="messageicon"> <slot name="messageicon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]"></component> <component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]"></component>
</slot> </slot>
<div class="p-message-text"> <div class="p-message-text">
<slot></slot> <slot></slot>
</div> </div>
<button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps"> <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
<slot name="closeicon"> <slot name="closeicon" class="p-message-close-icon">
<component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component> <i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" />
<TimesIcon v-else class="p-message-close-icon" />
</slot> </slot>
</button> </button>
</div> </div>

View File

@ -191,26 +191,32 @@ export interface MultiSelectProps {
loading?: boolean | undefined; loading?: boolean | undefined;
/** /**
* Icon to display in the checkboxes. * Icon to display in the checkboxes.
* @deprecated since v3.27.0. Use 'checkboxicon' slot.
*/ */
checkboxIcon?: string | undefined; checkboxIcon?: string | undefined;
/** /**
* Icon to display in the dropdown close button. * Icon to display in the dropdown close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**
* Icon to display in the dropdown. * Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
*/ */
dropdownIcon?: string | undefined; dropdownIcon?: string | undefined;
/** /**
* Icon to display in filter input. * Icon to display in filter input.
* @deprecated since v3.27.0. Use 'filtericon' slot.
*/ */
filterIcon?: string | undefined; filterIcon?: string | undefined;
/** /**
* Icon to display in loading state. * Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/** /**
* Icon to display in chip remove action. * Icon to display in chip remove action.
* @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/ */
removeTokenIcon?: string | undefined; removeTokenIcon?: string | undefined;
/** /**
@ -307,6 +313,7 @@ export interface MultiSelectSlots {
}): VNode[]; }): VNode[];
/** /**
* Custom indicator template. * Custom indicator template.
* @deprecated since v3.27.0. Use 'loadingicon and dropdownicon' slot.
*/ */
indicator(): VNode[]; indicator(): VNode[];
/** /**
@ -411,7 +418,16 @@ export interface MultiSelectSlots {
/** /**
* Custom remove token icon template. * Custom remove token icon template.
*/ */
removetokenicon(): VNode[]; removetokenicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
/**
* Remove token icon function.
*/
onClick: string;
}): VNode[];
/** /**
* Custom header checkbox icon template. * Custom header checkbox icon template.
* @param {Object} scope - header checkbox icon slot's params. * @param {Object} scope - header checkbox icon slot's params.
@ -421,15 +437,29 @@ export interface MultiSelectSlots {
* Options of the loader items for virtualscroller * Options of the loader items for virtualscroller
*/ */
allSelected: boolean; allSelected: boolean;
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[]; }): VNode[];
/** /**
* Custom filter icon template. * Custom filter icon template.
*/ */
filtericon(): VNode[]; filtericon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
/** /**
* Custom close icon template. * Custom close icon template.
*/ */
closeicon(): VNode[]; closeicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
/** /**
* Custom item checkbox icon template. * Custom item checkbox icon template.
* @param {Object} scope - header checkbox icon slot's params. * @param {Object} scope - header checkbox icon slot's params.
@ -439,6 +469,29 @@ export interface MultiSelectSlots {
* Options of the loader items for virtualscroller * Options of the loader items for virtualscroller
*/ */
selected: boolean; selected: boolean;
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
/**
* Custom loading icon template.
* @param {Object} scope - loading icon slot's params.
*/
loadingicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
/**
* Custom dropdown icon template.
*/
dropdownicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[]; }): VNode[];
} }

View File

@ -33,8 +33,9 @@
<slot name="chip" :value="item"> <slot name="chip" :value="item">
<span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span> <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
</slot> </slot>
<slot v-if="!disabled" name="removetokenicon"> <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" /> <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
<TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" />
</slot> </slot>
</div> </div>
<template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template> <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@ -43,10 +44,16 @@
</div> </div>
</div> </div>
<div class="p-multiselect-trigger"> <div class="p-multiselect-trigger">
<slot name="indicator"> <slot v-if="$slots.indicator" name="indicator"></slot>
<component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-multiselect-trigger-icon', loadingIcon]" aria-hidden="true" /> <template v-else>
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" /> <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
<span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
<SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" />
</slot> </slot>
<slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
</slot>
</template>
</div> </div>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@ -59,7 +66,7 @@
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" /> <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
</div> </div>
<div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]"> <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
<slot name="headercheckboxicon" :allSelected="allSelected"> <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" /> <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
</slot> </slot>
</div> </div>
@ -81,7 +88,7 @@
@input="onFilterChange" @input="onFilterChange"
v-bind="filterInputProps" v-bind="filterInputProps"
/> />
<slot name="filtericon"> <slot name="filtericon" class="p-multiselect-filter-icon">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" /> <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
</slot> </slot>
</div> </div>
@ -89,7 +96,7 @@
{{ filterResultMessageText }} {{ filterResultMessageText }}
</span> </span>
<button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps"> <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
<slot name="closeicon"> <slot name="closeicon" class="p-multiselect-close-icon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" /> <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
</slot> </slot>
</button> </button>
@ -119,7 +126,7 @@
> >
<div class="p-checkbox p-component"> <div class="p-checkbox p-component">
<div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]"> <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
<slot name="itemcheckboxicon" :selected="isSelected(option)"> <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
<component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" /> <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
</slot> </slot>
</div> </div>

View File

@ -6,7 +6,8 @@
<div :class="nodeContentClass" @click="onNodeClick"> <div :class="nodeContentClass" @click="onNodeClick">
<component :is="templates[node.type] || templates['default']" :node="node" /> <component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown"> <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
<component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" /> <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
</a> </a>
</div> </div>
</td> </td>

View File

@ -67,6 +67,7 @@ export interface OverlayPanelProps {
breakpoints?: OverlayPanelBreakpoints; breakpoints?: OverlayPanelBreakpoints;
/** /**
* Icon to display in the overlaypanel close button. * Icon to display in the overlaypanel close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
} }

View File

@ -18,7 +18,8 @@
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom> <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
<a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)"> <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
<component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" /> <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span> <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
</a> </a>
</router-link> </router-link>
@ -26,7 +27,8 @@
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)"> <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" /> <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
</slot> </slot>
<component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" /> <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span> <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
</a> </a>
</template> </template>

View File

@ -17,13 +17,18 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon" :active="isItemActive(processedItem)" /> <template v-if="isItemGroup(processedItem)">
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
</template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</template> </template>

View File

@ -61,10 +61,12 @@ export interface PasswordProps extends InputHTMLAttributes {
toggleMask?: boolean | undefined; toggleMask?: boolean | undefined;
/** /**
* Icon to hide displaying the password as plain text. * Icon to hide displaying the password as plain text.
* @deprecated since v3.27.0. Use 'hideicon' slot.
*/ */
hideIcon?: string | undefined; hideIcon?: string | undefined;
/** /**
* Icon to show displaying the password as plain text. * Icon to show displaying the password as plain text.
* @deprecated since v3.27.0. Use 'showicon' slot.
*/ */
showIcon?: string | undefined; showIcon?: string | undefined;
/** /**
@ -142,11 +144,21 @@ export interface PasswordSlots {
/** /**
* Custom hide icon template. * Custom hide icon template.
*/ */
hideicon(): VNode[]; hideicon(scope: {
/**
* Hide icon click event
*/
onClick(): void;
}): VNode[];
/** /**
* Custom show icon template. * Custom show icon template.
*/ */
showicon(): VNode[]; showicon(scope: {
/**
* Show icon click event
*/
onClick(): void;
}): VNode[];
} }
/** /**

View File

@ -21,10 +21,10 @@
@invalid="onInvalid" @invalid="onInvalid"
v-bind="inputProps" v-bind="inputProps"
/> />
<slot v-if="toggleMask && unmasked" name="hideicon"> <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="() => onMaskToggle">
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" /> <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" />
</slot> </slot>
<slot v-if="toggleMask && !unmasked" name="showicon"> <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="() => onMaskToggle">
<component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" /> <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" />
</slot> </slot>
<span class="p-hidden-accessible" aria-live="polite"> <span class="p-hidden-accessible" aria-live="polite">

View File

@ -59,14 +59,17 @@ export interface RatingProps {
cancel?: boolean | undefined; cancel?: boolean | undefined;
/** /**
* Icon for the on state. * Icon for the on state.
* @deprecated since v3.27.0. Use 'onicon' slot.
*/ */
onIcon?: string | undefined; onIcon?: string | undefined;
/** /**
* Icon for the off state. * Icon for the off state.
* @deprecated since v3.27.0. Use 'officon' slot.
*/ */
offIcon?: string | undefined; offIcon?: string | undefined;
/** /**
* Icon for the cancelable state. * Icon for the cancelable state.
* @deprecated since v3.27.0. Use 'cancelicon' slot.
*/ */
cancelIcon?: string | undefined; cancelIcon?: string | undefined;
} }

View File

@ -41,6 +41,7 @@ export interface ScrollTopProps {
export interface ScrollTopSlots { export interface ScrollTopSlots {
/** /**
* Custom scrolltop icon template. * Custom scrolltop icon template.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
icon(): VNode[]; icon(): VNode[];
} }

View File

@ -46,6 +46,7 @@ export interface SidebarProps {
showCloseIcon?: boolean | undefined; showCloseIcon?: boolean | undefined;
/** /**
* Icon to display in the sidebar close button. * Icon to display in the sidebar close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**

View File

@ -93,10 +93,12 @@ export interface SpeedDialProps {
maskClass?: string | undefined; maskClass?: string | undefined;
/** /**
* Show icon of the button element. * Show icon of the button element.
* @deprecated since v3.27.0. Use 'showicon' slot.
*/ */
showIcon?: string | undefined; showIcon?: string | undefined;
/** /**
* Hide icon of the button element. * Hide icon of the button element.
* @deprecated since v3.27.0. Use 'hideicon' slot.
*/ */
hideIcon?: string | undefined; hideIcon?: string | undefined;
/** /**
@ -152,6 +154,16 @@ export interface SpeedDialSlots {
*/ */
toggle(): void; toggle(): void;
}): VNode[]; }): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**
*
*/
visible: boolean;
}): VNode[];
} }
/** /**

View File

@ -14,8 +14,10 @@
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
> >
<template #icon> <template #icon>
<slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" /> <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" /> <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
</slot>
</template> </template>
</SDButton> </SDButton>
</slot> </slot>

View File

@ -21,6 +21,7 @@ export interface SplitButtonProps {
label?: string | undefined; label?: string | undefined;
/** /**
* Name of the icon. * Name of the icon.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
icon?: string | undefined; icon?: string | undefined;
/** /**
@ -66,6 +67,7 @@ export interface SplitButtonProps {
menuButtonProps?: ButtonHTMLAttributes | undefined; menuButtonProps?: ButtonHTMLAttributes | undefined;
/** /**
* Name of the menu button icon. * Name of the menu button icon.
* @deprecated since v3.27.0. Use 'menubuttonicon' slot.
*/ */
menuButtonIcon?: string | undefined; menuButtonIcon?: string | undefined;
/** /**
@ -111,6 +113,10 @@ export interface SplitButtonSlots {
* Button part of the content can easily be customized with the default slot instead of using the built-in modes. * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
*/ */
default(): VNode[]; default(): VNode[];
/**
* Custom menu button icon template.
*/
icon(): VNode[];
/** /**
* Custom menu button icon template. * Custom menu button icon template.
*/ */

View File

@ -1,7 +1,13 @@
<template> <template>
<div :class="containerClass" :style="style"> <div :class="containerClass" :style="style">
<slot> <slot>
<PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" /> <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps">
<template #icon>
<slot name="icon">
<span :class="icon" />
</slot>
</template>
</PVSButton>
</slot> </slot>
<PVSButton <PVSButton
ref="button" ref="button"

View File

@ -17,7 +17,8 @@
@click="onItemClick($event, item, i, navigate)" @click="onItemClick($event, item, i, navigate)"
@keydown="onKeydownItem($event, item, i, navigate)" @keydown="onKeydownItem($event, item, i, navigate)"
> >
<component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" />
<span class="p-menuitem-text">{{ label(item) }}</span> <span class="p-menuitem-text">{{ label(item) }}</span>
</a> </a>
</template> </template>
@ -27,7 +28,8 @@
<li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)"> <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)"> <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)">
<component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" />
<span class="p-menuitem-text">{{ label(item) }}</span> <span class="p-menuitem-text">{{ label(item) }}</span>
</a> </a>
</template> </template>

View File

@ -152,11 +152,13 @@ export interface TabViewProps {
*/ */
nextButtonProps?: ButtonHTMLAttributes | undefined; nextButtonProps?: ButtonHTMLAttributes | undefined;
/** /**
* Prev icon of the scrollable tabview. * Previous icon of the scrollable tabview.
* @deprecated since v3.27.0. Use 'previousicon' slot.
*/ */
prevIcon?: string | undefined; prevIcon?: string | undefined;
/** /**
* Next icon of the scrollable tabview. * Next icon of the scrollable tabview.
* @deprecated since v3.27.0. Use 'next' slot.
*/ */
nextIcon?: string | undefined; nextIcon?: string | undefined;
/** /**
@ -177,7 +179,7 @@ export interface TabViewSlots {
/** /**
* Previous button icon template for the scrollable component. * Previous button icon template for the scrollable component.
*/ */
previcon(): VNode[]; previousicon(): VNode[];
/** /**
* Next button icon template for the scrollable component. * Next button icon template for the scrollable component.
*/ */

View File

@ -29,6 +29,7 @@ export interface TagProps {
rounded?: boolean | undefined; rounded?: boolean | undefined;
/** /**
* Icon of the tag to display next to the value. * Icon of the tag to display next to the value.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
icon?: string | undefined; icon?: string | undefined;
} }
@ -41,6 +42,10 @@ export interface TagSlots {
* Custom content template * Custom content template
*/ */
default(): VNode[]; default(): VNode[];
/**
* Custom icon template
*/
icon(): VNode[];
} }
/** /**

View File

@ -1,6 +1,7 @@
<template> <template>
<span :class="containerClass"> <span :class="containerClass">
<span v-if="icon" :class="iconClass"></span> <component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" />
<span v-else-if="icon" :class="iconClass"></span>
<slot> <slot>
<span class="p-tag-value">{{ value }}</span> <span class="p-tag-value">{{ value }}</span>
</slot> </slot>

View File

@ -19,14 +19,19 @@
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)"> <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" /> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<AngleRightIcon v-else class="p-submenu-icon" />
</template>
</a> </a>
</template> </template>
<component v-else :is="templates.item" :item="processedItem.item"></component> <component v-else :is="templates.item" :item="processedItem.item"></component>

View File

@ -95,26 +95,32 @@ export interface ToastProps {
breakpoints?: ToastBreakpointsType; breakpoints?: ToastBreakpointsType;
/** /**
* Icon to display in the toast close button. * Icon to display in the toast close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/ */
closeIcon?: string | undefined; closeIcon?: string | undefined;
/** /**
* Icon to display in the toast with info severity. * Icon to display in the toast with info severity.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
infoIcon?: string | undefined; infoIcon?: string | undefined;
/** /**
* Icon to display in the toast with warn severity. * Icon to display in the toast with warn severity.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
warnIcon?: string | undefined; warnIcon?: string | undefined;
/** /**
* Icon to display in the toast with error severity. * Icon to display in the toast with error severity.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
errorIcon?: string | undefined; errorIcon?: string | undefined;
/** /**
* Icon to display in the toast with success severity. * Icon to display in the toast with success severity.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
successIcon?: string | undefined; successIcon?: string | undefined;
/** /**
* Uses to pass all properties of the HTMLButtonElement to the close button. * Uses to pass all properties of the HTMLButtonElement to the close button.
* @deprecated since v3.26.0. Use 'pt' property.
*/ */
closeButtonProps?: ButtonHTMLAttributes | undefined; closeButtonProps?: ButtonHTMLAttributes | undefined;
} }

View File

@ -7,7 +7,7 @@
* @module togglebutton * @module togglebutton
* *
*/ */
import { InputHTMLAttributes } from 'vue'; import { InputHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
/** /**
@ -21,10 +21,12 @@ export interface ToggleButtonProps {
modelValue?: boolean | undefined; modelValue?: boolean | undefined;
/** /**
* Icon for the on state. * Icon for the on state.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
onIcon?: string | undefined; onIcon?: string | undefined;
/** /**
* Icon for the off state. * Icon for the off state.
* @deprecated since v3.27.0. Use 'icon' slot.
*/ */
offIcon?: string | undefined; offIcon?: string | undefined;
/** /**
@ -80,7 +82,21 @@ export interface ToggleButtonProps {
/** /**
* Defines valid slots in ToggleButton component. * Defines valid slots in ToggleButton component.
*/ */
export interface ToggleButtonSlots {} export interface ToggleButtonSlots {
/**
* Custom icon template.
*/
icon(scope: {
/**
* Current value
*/
value: any;
/**
* Icon style class
*/
class: any;
}): VNode[];
}
/** /**
* Defines valid emits in ToggleButton component. * Defines valid emits in ToggleButton component.

View File

@ -16,7 +16,9 @@
v-bind="inputProps" v-bind="inputProps"
/> />
</span> </span>
<span v-if="hasIcon" :class="iconClass"></span> <slot name="icon" :value="modelValue" :class="iconClass">
<span v-if="onIcon || offIcon" :class="iconClass" />
</slot>
<span class="p-button-label">{{ label }}</span> <span class="p-button-label">{{ label }}</span>
</div> </div>
</template> </template>
@ -149,7 +151,7 @@ export default {
return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0; return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
}, },
hasIcon() { hasIcon() {
return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0; return this.$slots.icon || (this.onIcon && this.offIcon);
}, },
label() { label() {
return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;'; return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';

View File

@ -123,6 +123,7 @@ export interface TreeProps {
loading?: boolean | undefined; loading?: boolean | undefined;
/** /**
* Icon to display when tree is loading. * Icon to display when tree is loading.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/** /**

View File

@ -3,7 +3,8 @@
<template v-if="loading"> <template v-if="loading">
<div class="p-tree-loading-overlay p-component-overlay"> <div class="p-tree-loading-overlay p-component-overlay">
<slot name="loadingicon"> <slot name="loadingicon">
<component :is="loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-tree-loading-icon', loadingIcon]" /> <i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" />
<SpinnerIcon v-else spin class="p-tree-loading-icon" />
</slot> </slot>
</div> </div>
</template> </template>

View File

@ -15,11 +15,14 @@
> >
<div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style"> <div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style">
<button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true"> <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true">
<component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? node.expandedIcon || 'ChevronDownIcon' : node.collapsedIcon || 'ChevronRightIcon'" :node="node" :expanded="expanded" class="p-tree-toggler-icon" /> <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
</button> </button>
<div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true"> <div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
<div :class="checkboxClass" role="checkbox"> <div :class="checkboxClass" role="checkbox">
<component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" /> <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
</div> </div>
</div> </div>
<span :class="icon"></span> <span :class="icon"></span>

View File

@ -150,14 +150,6 @@ export interface TreeSelectSlots {
* Custom indicator template. * Custom indicator template.
*/ */
indicator(): VNode[]; indicator(): VNode[];
/**
* Custom loading icon template.
*/
loadingicon(): VNode[];
/**
* Custom search icon template.
*/
searchicon(): VNode[];
/** /**
* Custom item toggler icon template. * Custom item toggler icon template.
* @param {Object} scope - item toggler icon slot's params. * @param {Object} scope - item toggler icon slot's params.

View File

@ -69,12 +69,6 @@
<template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps"> <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
<slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" /> <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
</template> </template>
<template v-if="$slots.loadingicon" #loadingicon>
<slot name="loadingicon" />
</template>
<template v-if="$slots.searchicon" #searchicon>
<slot name="searchicon" />
</template>
</TSTree> </TSTree>
<div v-if="emptyOptions" class="p-treeselect-empty-message"> <div v-if="emptyOptions" class="p-treeselect-empty-message">
<slot name="empty">{{ emptyMessageText }}</slot> <slot name="empty">{{ emptyMessageText }}</slot>

View File

@ -1,14 +1,17 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell"> <td :style="containerStyle" :class="containerClass" role="cell">
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1"> <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
<component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'" :expanded="expanded" class="p-treetable-toggler-icon" /> <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
</button> </button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox"> <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" /> <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
</div> </div>
<div ref="checkboxEl" :class="checkboxClass"> <div ref="checkboxEl" :class="checkboxClass">
<component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" /> <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
</div> </div>
</div> </div>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" /> <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />

View File

@ -259,6 +259,7 @@ export interface TreeTableProps {
loading?: boolean | undefined; loading?: boolean | undefined;
/** /**
* The icon to show while indicating data load is in progress. * The icon to show while indicating data load is in progress.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/** /**

View File

@ -34,6 +34,7 @@ export interface TriStateCheckboxProps {
inputId?: string | undefined; inputId?: string | undefined;
/** /**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* @deprecated since v3.26.0. Use 'pt' property.
*/ */
inputProps?: InputHTMLAttributes | undefined; inputProps?: InputHTMLAttributes | undefined;
/** /**

View File

@ -11221,7 +11221,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dialog close button." "description": "Icon to display in the dialog close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "maximizeIcon", "name": "maximizeIcon",
@ -11229,7 +11230,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dialog maximize button when dialog is not maximized." "description": "Icon to display in the dialog maximize button when dialog is not maximized.",
"deprecated": "since v3.27.0. Use 'maximizeicon' slot."
}, },
{ {
"name": "minimizeIcon", "name": "minimizeIcon",
@ -11237,7 +11239,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dialog maximize button when dialog is maximized." "description": "Icon to display in the dialog maximize button when dialog is minimized.",
"deprecated": "since v3.27.0. Use 'minimizeicon' slot."
} }
], ],
"methods": [] "methods": []
@ -11278,11 +11281,11 @@
"name": "scope", "name": "scope",
"optional": false, "optional": false,
"type": "{\n \t <b>maximized</b>: boolean, // Maximized state as a boolean\n }", "type": "{\n \t <b>maximized</b>: boolean, // Maximized state as a boolean\n }",
"description": "maximizeicon icon slot's params." "description": "maximize icon slot's params."
} }
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom maximizeicon icon template of dialog." "description": "Custom maximize icon template of dialog."
} }
] ]
}, },
@ -12020,7 +12023,8 @@
"readonly": false, "readonly": false,
"type": "HTMLAttributes", "type": "HTMLAttributes",
"default": "", "default": "",
"description": "Uses to pass all properties of the HTMLElement to the clear icon inside the component." "description": "Uses to pass all properties of the HTMLElement to the clear icon inside the component.",
"deprecated": "since v3.26.0. Use 'pt' peroperty."
}, },
{ {
"name": "appendTo", "name": "appendTo",
@ -12044,7 +12048,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in clear button." "description": "Icon to display in clear button.",
"deprecated": "since v3.27.0. Use 'clearicon' slot."
}, },
{ {
"name": "dropdownIcon", "name": "dropdownIcon",
@ -12052,7 +12057,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dropdown." "description": "Icon to display in the dropdown.",
"deprecated": "since v3.27.0. Use 'dropdownicon' slot."
}, },
{ {
"name": "filterIcon", "name": "filterIcon",
@ -12060,7 +12066,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in filter input." "description": "Icon to display in filter input.",
"deprecated": "since v3.27.0. Use 'filtericon' slot."
}, },
{ {
"name": "loadingIcon", "name": "loadingIcon",
@ -12068,7 +12075,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in loading state." "description": "Icon to display in loading state.",
"deprecated": "since v3.27.0. Use 'loadingicon' slot."
}, },
{ {
"name": "resetFilterOnHide", "name": "resetFilterOnHide",
@ -12290,6 +12298,51 @@
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom loader template." "description": "Custom loader template."
},
{
"name": "clearicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>onClick</b>: void, // Clear icon click function.\n }",
"description": "clear icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom clear icon template."
},
{
"name": "dropdownicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: any, // Style class of the component\n }",
"description": "dropdown icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom dropdown icon template."
},
{
"name": "loadingicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: any, // Style class of the component\n }",
"description": "loading icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom loading icon template."
},
{
"name": "filtericon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom filter icon template."
} }
] ]
}, },
@ -13498,7 +13551,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon of the choose button." "description": "Icon of the choose button.",
"deprecated": "since v3.27.0. Use 'chooseicon' slot."
}, },
{ {
"name": "uploadIcon", "name": "uploadIcon",
@ -13506,7 +13560,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon of the upload button." "description": "Icon of the upload button.",
"deprecated": "since v3.27.0. Use 'updateicon' slot."
}, },
{ {
"name": "cancelIcon", "name": "cancelIcon",
@ -13514,7 +13569,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon of the cancel button." "description": "Icon of the cancel button.",
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
}, },
{ {
"name": "style", "name": "style",
@ -14114,7 +14170,7 @@
"description": "Custom close icon template." "description": "Custom close icon template."
}, },
{ {
"name": "previtemicon", "name": "previousitemicon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom navigator previous item icon template." "description": "Custom navigator previous item icon template."
@ -14126,7 +14182,7 @@
"description": "Custom navigator next item icon template." "description": "Custom navigator next item icon template."
}, },
{ {
"name": "prevthumbnailicon", "name": "previousthumbnailicon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom thumbnail previous icon template." "description": "Custom thumbnail previous icon template."
@ -14330,7 +14386,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Custom indicator icon." "description": "Custom indicator icon.",
"deprecated": "since v3.27.0. Use 'indicator' slot."
} }
], ],
"methods": [] "methods": []
@ -14421,7 +14478,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Display a custom icon for the message." "description": "Display a custom icon for the message.",
"deprecated": "since v3.27.0. Use 'icon' slot."
} }
], ],
"methods": [] "methods": []
@ -14438,7 +14496,7 @@
"description": "Default custom slot." "description": "Default custom slot."
}, },
{ {
"name": "messageicon", "name": "icon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom message icon template." "description": "Custom message icon template."
@ -14504,7 +14562,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the close button." "description": "Icon to display in the close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "displayProps", "name": "displayProps",
@ -14541,6 +14600,12 @@
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom content template." "description": "Custom content template."
},
{
"name": "closeicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom close icon template."
} }
] ]
}, },
@ -14872,7 +14937,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Style class of the increment button." "description": "Style class of the increment button.",
"deprecated": "since v3.27.0. Use 'incrementbuttonicon' slot."
}, },
{ {
"name": "decrementButtonIcon", "name": "decrementButtonIcon",
@ -14880,7 +14946,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Style class of the decrement button." "description": "Style class of the decrement button.",
"deprecated": "since v3.27.0. Use 'decrementbuttonicon' slot."
}, },
{ {
"name": "locale", "name": "locale",
@ -15870,8 +15937,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "ß", "default": "",
"description": "Icon to display in filter input." "description": "Icon to display in filter input.",
"deprecated": "since v3.27.0. Use 'filtericon' slot."
}, },
{ {
"name": "aria-label", "name": "aria-label",
@ -16551,10 +16619,10 @@
"description": "Custom item template." "description": "Custom item template."
}, },
{ {
"name": "baricon", "name": "popupicon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom bar icon template." "description": "Custom popup icon template on responsive mode."
}, },
{ {
"name": "submenuicon", "name": "submenuicon",
@ -16815,7 +16883,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the message close button." "description": "Icon to display in the message close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "closeButtonProps", "name": "closeButtonProps",
@ -16823,7 +16892,8 @@
"readonly": false, "readonly": false,
"type": "ButtonHTMLAttributes", "type": "ButtonHTMLAttributes",
"default": "", "default": "",
"description": "Uses to pass all properties of the HTMLButtonElement to the close button." "description": "Uses to pass all properties of the HTMLButtonElement to the close button.",
"deprecated": "since v3.26.0. Use 'pt' property."
} }
], ],
"methods": [] "methods": []
@ -16841,13 +16911,25 @@
}, },
{ {
"name": "messageicon", "name": "messageicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: any, // Style class of the item icon element.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom message icon template." "description": "Custom message icon template."
}, },
{ {
"name": "closeicon", "name": "closeicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: any, // Style class of the item icon element.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom close icon template." "description": "Custom close icon template."
} }
@ -17237,7 +17319,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the checkboxes." "description": "Icon to display in the checkboxes.",
"deprecated": "since v3.27.0. Use 'checkboxicon' slot."
}, },
{ {
"name": "closeIcon", "name": "closeIcon",
@ -17245,7 +17328,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dropdown close button." "description": "Icon to display in the dropdown close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "dropdownIcon", "name": "dropdownIcon",
@ -17253,7 +17337,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the dropdown." "description": "Icon to display in the dropdown.",
"deprecated": "since v3.27.0. Use 'dropdownicon' slot."
}, },
{ {
"name": "filterIcon", "name": "filterIcon",
@ -17261,7 +17346,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in filter input." "description": "Icon to display in filter input.",
"deprecated": "since v3.27.0. Use 'filtericon' slot."
}, },
{ {
"name": "loadingIcon", "name": "loadingIcon",
@ -17269,7 +17355,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in loading state." "description": "Icon to display in loading state.",
"deprecated": "since v3.27.0. Use 'loadingicon' slot."
}, },
{ {
"name": "removeTokenIcon", "name": "removeTokenIcon",
@ -17277,7 +17364,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in chip remove action." "description": "Icon to display in chip remove action.",
"deprecated": "since v3.27.0. Use 'removetokenicon' slot."
}, },
{ {
"name": "selectAll", "name": "selectAll",
@ -17421,7 +17509,8 @@
"name": "indicator", "name": "indicator",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom indicator template." "description": "Custom indicator template.",
"deprecated": "since v3.27.0. Use 'loadingicon and dropdownicon' slot."
}, },
{ {
"name": "header", "name": "header",
@ -17515,7 +17604,13 @@
}, },
{ {
"name": "removetokenicon", "name": "removetokenicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: string, // Style class of the loading icon.\n \t <b>onClick</b>: string, // Remove token icon function.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom remove token icon template." "description": "Custom remove token icon template."
}, },
@ -17525,7 +17620,7 @@
{ {
"name": "scope", "name": "scope",
"optional": false, "optional": false,
"type": "{\n \t <b>allSelected</b>: boolean, // Options of the loader items for virtualscroller\n }", "type": "{\n \t <b>allSelected</b>: boolean, // Options of the loader items for virtualscroller\n \t <b>class</b>: string, // Style class of the loading icon.\n }",
"description": "header checkbox icon slot's params." "description": "header checkbox icon slot's params."
} }
], ],
@ -17534,13 +17629,25 @@
}, },
{ {
"name": "filtericon", "name": "filtericon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: string, // Style class of the loading icon.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom filter icon template." "description": "Custom filter icon template."
}, },
{ {
"name": "closeicon", "name": "closeicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: string, // Style class of the loading icon.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom close icon template." "description": "Custom close icon template."
}, },
@ -17550,12 +17657,37 @@
{ {
"name": "scope", "name": "scope",
"optional": false, "optional": false,
"type": "{\n \t <b>selected</b>: boolean, // Options of the loader items for virtualscroller\n }", "type": "{\n \t <b>selected</b>: boolean, // Options of the loader items for virtualscroller\n \t <b>class</b>: string, // Style class of the loading icon.\n }",
"description": "header checkbox icon slot's params." "description": "header checkbox icon slot's params."
} }
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item checkbox icon template." "description": "Custom item checkbox icon template."
},
{
"name": "loadingicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: string, // Style class of the loading icon.\n }",
"description": "loading icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom loading icon template."
},
{
"name": "dropdownicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>class</b>: string, // Style class of the loading icon.\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom dropdown icon template."
} }
] ]
}, },
@ -18414,7 +18546,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the overlaypanel close button." "description": "Icon to display in the overlaypanel close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
} }
], ],
"methods": [] "methods": []
@ -19328,7 +19461,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to hide displaying the password as plain text." "description": "Icon to hide displaying the password as plain text.",
"deprecated": "since v3.27.0. Use 'hideicon' slot."
}, },
{ {
"name": "showIcon", "name": "showIcon",
@ -19336,7 +19470,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to show displaying the password as plain text." "description": "Icon to show displaying the password as plain text.",
"deprecated": "since v3.27.0. Use 'showicon' slot."
}, },
{ {
"name": "disabled", "name": "disabled",
@ -19471,13 +19606,25 @@
}, },
{ {
"name": "hideicon", "name": "hideicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>onClick()</b>: void, // Hide icon click event\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom hide icon template." "description": "Custom hide icon template."
}, },
{ {
"name": "showicon", "name": "showicon",
"parameters": [], "parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>onClick()</b>: void, // Show icon click event\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom show icon template." "description": "Custom show icon template."
} }
@ -20534,7 +20681,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon for the on state." "description": "Icon for the on state.",
"deprecated": "since v3.27.0. Use 'onicon' slot."
}, },
{ {
"name": "offIcon", "name": "offIcon",
@ -20542,7 +20690,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon for the off state." "description": "Icon for the off state.",
"deprecated": "since v3.27.0. Use 'officon' slot."
}, },
{ {
"name": "cancelIcon", "name": "cancelIcon",
@ -20550,7 +20699,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon for the cancelable state." "description": "Icon for the cancelable state.",
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
} }
], ],
"methods": [] "methods": []
@ -20967,7 +21117,8 @@
"name": "icon", "name": "icon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom scrolltop icon template." "description": "Custom scrolltop icon template.",
"deprecated": "since v3.27.0. Use 'icon' slot."
} }
] ]
}, },
@ -21263,7 +21414,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the sidebar close button." "description": "Icon to display in the sidebar close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "modal", "name": "modal",
@ -21765,7 +21917,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Show icon of the button element." "description": "Show icon of the button element.",
"deprecated": "since v3.27.0. Use 'showicon' slot."
}, },
{ {
"name": "hideIcon", "name": "hideIcon",
@ -21773,7 +21926,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Hide icon of the button element." "description": "Hide icon of the button element.",
"deprecated": "since v3.27.0. Use 'hideicon' slot."
}, },
{ {
"name": "rotateAnimation", "name": "rotateAnimation",
@ -21856,6 +22010,19 @@
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom button template." "description": "Custom button template."
},
{
"name": "icon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>visible</b>: boolean, // undefined\n }",
"description": "icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom icon template."
} }
] ]
}, },
@ -21955,7 +22122,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Name of the icon." "description": "Name of the icon.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "model", "name": "model",
@ -22035,7 +22203,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Name of the menu button icon." "description": "Name of the menu button icon.",
"deprecated": "since v3.27.0. Use 'menubuttonicon' slot."
}, },
{ {
"name": "severity", "name": "severity",
@ -22107,6 +22276,12 @@
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Button part of the content can easily be customized with the default slot instead of using the built-in modes." "description": "Button part of the content can easily be customized with the default slot instead of using the built-in modes."
}, },
{
"name": "icon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom menu button icon template."
},
{ {
"name": "menubuttonicon", "name": "menubuttonicon",
"parameters": [], "parameters": [],
@ -23341,7 +23516,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Prev icon of the scrollable tabview." "description": "Previous icon of the scrollable tabview.",
"deprecated": "since v3.27.0. Use 'previousicon' slot."
}, },
{ {
"name": "nextIcon", "name": "nextIcon",
@ -23349,7 +23525,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Next icon of the scrollable tabview." "description": "Next icon of the scrollable tabview.",
"deprecated": "since v3.27.0. Use 'next' slot."
}, },
{ {
"name": "pt", "name": "pt",
@ -23374,7 +23551,7 @@
"description": "Default slot to detect TabPanel components." "description": "Default slot to detect TabPanel components."
}, },
{ {
"name": "previcon", "name": "previousicon",
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Previous button icon template for the scrollable component." "description": "Previous button icon template for the scrollable component."
@ -23495,7 +23672,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon of the tag to display next to the value." "description": "Icon of the tag to display next to the value.",
"deprecated": "since v3.27.0. Use 'icon' slot."
} }
], ],
"methods": [] "methods": []
@ -23510,6 +23688,12 @@
"parameters": [], "parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom content template" "description": "Custom content template"
},
{
"name": "icon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom icon template"
} }
] ]
}, },
@ -24199,7 +24383,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the toast close button." "description": "Icon to display in the toast close button.",
"deprecated": "since v3.27.0. Use 'closeicon' slot."
}, },
{ {
"name": "infoIcon", "name": "infoIcon",
@ -24207,7 +24392,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the toast with info severity." "description": "Icon to display in the toast with info severity.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "warnIcon", "name": "warnIcon",
@ -24215,7 +24401,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the toast with warn severity." "description": "Icon to display in the toast with warn severity.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "errorIcon", "name": "errorIcon",
@ -24223,7 +24410,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the toast with error severity." "description": "Icon to display in the toast with error severity.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "successIcon", "name": "successIcon",
@ -24231,7 +24419,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display in the toast with success severity." "description": "Icon to display in the toast with success severity.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "closeButtonProps", "name": "closeButtonProps",
@ -24239,7 +24428,8 @@
"readonly": false, "readonly": false,
"type": "ButtonHTMLAttributes", "type": "ButtonHTMLAttributes",
"default": "", "default": "",
"description": "Uses to pass all properties of the HTMLButtonElement to the close button." "description": "Uses to pass all properties of the HTMLButtonElement to the close button.",
"deprecated": "since v3.26.0. Use 'pt' property."
} }
], ],
"methods": [] "methods": []
@ -24396,7 +24586,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon for the on state." "description": "Icon for the on state.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "offIcon", "name": "offIcon",
@ -24404,7 +24595,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon for the off state." "description": "Icon for the off state.",
"deprecated": "since v3.27.0. Use 'icon' slot."
}, },
{ {
"name": "onLabel", "name": "onLabel",
@ -24501,7 +24693,20 @@
"description": "Defines valid slots in ToggleButton component.", "description": "Defines valid slots in ToggleButton component.",
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [] "methods": [
{
"name": "icon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>value</b>: any, // Current value\n \t <b>class</b>: any, // Icon style class\n }"
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom icon template."
}
]
}, },
"ToggleButtonEmits": { "ToggleButtonEmits": {
"description": "Defines valid emits in ToggleButton component.", "description": "Defines valid emits in ToggleButton component.",
@ -25060,7 +25265,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "Icon to display when tree is loading." "description": "Icon to display when tree is loading.",
"deprecated": "since v3.27.0. Use 'loadingicon' slot."
}, },
{ {
"name": "filter", "name": "filter",
@ -25490,18 +25696,6 @@
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom indicator template." "description": "Custom indicator template."
}, },
{
"name": "loadingicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom loading icon template."
},
{
"name": "searchicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom search icon template."
},
{ {
"name": "itemtogglericon", "name": "itemtogglericon",
"parameters": [ "parameters": [
@ -26153,7 +26347,8 @@
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"default": "", "default": "",
"description": "The icon to show while indicating data load is in progress." "description": "The icon to show while indicating data load is in progress.",
"deprecated": "since v3.27.0. Use 'loadingicon' slot."
}, },
{ {
"name": "rowHover", "name": "rowHover",
@ -26672,7 +26867,8 @@
"readonly": false, "readonly": false,
"type": "InputHTMLAttributes", "type": "InputHTMLAttributes",
"default": "", "default": "",
"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.",
"deprecated": "since v3.26.0. Use 'pt' property."
}, },
{ {
"name": "aria-labelledby", "name": "aria-labelledby",