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')">
<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-else-if="column.children && !column.children.rowtogglericon && isRowExpanded" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
<component v-else-if="column.children && !column.children.rowtogglericon && !isRowExpanded" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
<template v-else>
<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>
</template>
<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)" />
</div>
<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>
</template>

View File

@ -12,8 +12,12 @@
<td :colspan="columnsLength - 1">
<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-else-if="!templates['rowgrouptogglericon'] && isRowGroupExpanded(rowData)" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
<component v-else-if="!templates['rowgrouptogglericon'] && !isRowGroupExpanded(rowData)" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
<template v-else>
<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>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
</td>

View File

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

View File

@ -157,6 +157,7 @@ export interface DropdownProps {
filterInputProps?: InputHTMLAttributes | undefined;
/**
* 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;
/**
@ -171,18 +172,22 @@ export interface DropdownProps {
loading?: boolean | undefined;
/**
* Icon to display in clear button.
* @deprecated since v3.27.0. Use 'clearicon' slot.
*/
clearIcon?: string | undefined;
/**
* Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
*/
dropdownIcon?: string | undefined;
/**
* Icon to display in filter input.
* @deprecated since v3.27.0. Use 'filtericon' slot.
*/
filterIcon?: string | undefined;
/**
* Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/
loadingIcon?: string | undefined;
/**
@ -369,6 +374,40 @@ export interface DropdownSlots {
*/
options: any[];
}): 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;
/**
* Icon of the choose button.
* @todo
* @deprecated since v3.27.0. Use 'chooseicon' slot.
*/
chooseIcon?: string | undefined;
/**
* Icon of the upload button.
* @todo
* @deprecated since v3.27.0. Use 'updateicon' slot.
*/
uploadIcon?: string | undefined;
/**
* Icon of the cancel button.
* @todo
* @deprecated since v3.27.0. Use 'cancelicon' slot.
*/
cancelIcon?: string | undefined;
/**

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -20,14 +20,19 @@
<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>
<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>
</a>
</router-link>
<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>
<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>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

View File

@ -4,12 +4,14 @@
<template v-if="!templates.item">
<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)">
<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>
</a>
</router-link>
<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>
</a>
</template>

View File

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

View File

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

View File

@ -19,14 +19,19 @@
<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>
<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>
</a>
</router-link>
<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>
<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>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

View File

@ -40,10 +40,12 @@ export interface MessageProps {
icon?: string | undefined;
/**
* Icon to display in the message close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/
closeIcon?: string | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the close button.
* @deprecated since v3.26.0. Use 'pt' property.
*/
closeButtonProps?: ButtonHTMLAttributes | undefined;
}
@ -59,11 +61,21 @@ export interface MessageSlots {
/**
* Custom message icon template.
*/
messageicon(): VNode[];
messageicon(scope: {
/**
* Style class of the item icon element.
*/
class: any;
}): VNode[];
/**
* 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>
<div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
<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>
</slot>
<div class="p-message-text">
<slot></slot>
</div>
<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">
<component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component>
<slot name="closeicon" class="p-message-close-icon">
<i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" />
<TimesIcon v-else class="p-message-close-icon" />
</slot>
</button>
</div>

View File

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

View File

@ -33,8 +33,9 @@
<slot name="chip" :value="item">
<span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
</slot>
<slot v-if="!disabled" name="removetokenicon">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
<slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => 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>
</div>
<template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@ -43,10 +44,16 @@
</div>
</div>
<div class="p-multiselect-trigger">
<slot name="indicator">
<component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-multiselect-trigger-icon', loadingIcon]" aria-hidden="true" />
<component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
<slot v-if="$slots.indicator" name="indicator"></slot>
<template v-else>
<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 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>
<Portal :appendTo="appendTo">
<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" />
</div>
<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 }]" />
</slot>
</div>
@ -81,7 +88,7 @@
@input="onFilterChange"
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]" />
</slot>
</div>
@ -89,7 +96,7 @@
{{ filterResultMessageText }}
</span>
<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]" />
</slot>
</button>
@ -119,7 +126,7 @@
>
<div class="p-checkbox p-component">
<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) }]" />
</slot>
</div>

View File

@ -6,7 +6,8 @@
<div :class="nodeContentClass" @click="onNodeClick">
<component :is="templates[node.type] || templates['default']" :node="node" />
<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>
</div>
</td>

View File

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

View File

@ -18,7 +18,8 @@
<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>
<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>
</a>
</router-link>
@ -26,7 +27,8 @@
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
</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>
</a>
</template>

View File

@ -17,13 +17,18 @@
<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>
<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>
</a>
</router-link>
<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)" />
<component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<template v-if="isItemGroup(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>
</a>
</template>

View File

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

View File

@ -21,10 +21,10 @@
@invalid="onInvalid"
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" />
</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" />
</slot>
<span class="p-hidden-accessible" aria-live="polite">

View File

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

View File

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

View File

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

View File

@ -93,10 +93,12 @@ export interface SpeedDialProps {
maskClass?: string | undefined;
/**
* Show icon of the button element.
* @deprecated since v3.27.0. Use 'showicon' slot.
*/
showIcon?: string | undefined;
/**
* Hide icon of the button element.
* @deprecated since v3.27.0. Use 'hideicon' slot.
*/
hideIcon?: string | undefined;
/**
@ -152,6 +154,16 @@ export interface SpeedDialSlots {
*/
toggle(): void;
}): 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"
>
<template #icon>
<slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
</slot>
</template>
</SDButton>
</slot>

View File

@ -21,6 +21,7 @@ export interface SplitButtonProps {
label?: string | undefined;
/**
* Name of the icon.
* @deprecated since v3.27.0. Use 'icon' slot.
*/
icon?: string | undefined;
/**
@ -66,6 +67,7 @@ export interface SplitButtonProps {
menuButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Name of the menu button icon.
* @deprecated since v3.27.0. Use 'menubuttonicon' slot.
*/
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.
*/
default(): VNode[];
/**
* Custom menu button icon template.
*/
icon(): VNode[];
/**
* Custom menu button icon template.
*/

View File

@ -1,7 +1,13 @@
<template>
<div :class="containerClass" :style="style">
<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>
<PVSButton
ref="button"

View File

@ -17,7 +17,8 @@
@click="onItemClick($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>
</a>
</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)">
<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)">
<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>
</a>
</template>

View File

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

View File

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

View File

@ -1,6 +1,7 @@
<template>
<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>
<span class="p-tag-value">{{ value }}</span>
</slot>

View File

@ -19,14 +19,19 @@
<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>
<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>
</a>
</router-link>
<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>
<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>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>

View File

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

View File

@ -7,7 +7,7 @@
* @module togglebutton
*
*/
import { InputHTMLAttributes } from 'vue';
import { InputHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
/**
@ -21,10 +21,12 @@ export interface ToggleButtonProps {
modelValue?: boolean | undefined;
/**
* Icon for the on state.
* @deprecated since v3.27.0. Use 'icon' slot.
*/
onIcon?: string | undefined;
/**
* Icon for the off state.
* @deprecated since v3.27.0. Use 'icon' slot.
*/
offIcon?: string | undefined;
/**
@ -80,7 +82,21 @@ export interface ToggleButtonProps {
/**
* 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.

View File

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

View File

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

View File

@ -3,7 +3,8 @@
<template v-if="loading">
<div class="p-tree-loading-overlay p-component-overlay">
<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>
</div>
</template>

View File

@ -15,11 +15,14 @@
>
<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">
<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>
<div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
<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>
<span :class="icon"></span>

View File

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

View File

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

View File

@ -1,14 +1,17 @@
<template>
<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">
<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>
<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">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
</div>
<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>
<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;
/**
* The icon to show while indicating data load is in progress.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/
loadingIcon?: string | undefined;
/**

View File

@ -34,6 +34,7 @@ export interface TriStateCheckboxProps {
inputId?: string | undefined;
/**
* 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;
/**

View File

@ -11221,7 +11221,8 @@
"readonly": false,
"type": "string",
"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",
@ -11229,7 +11230,8 @@
"readonly": false,
"type": "string",
"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",
@ -11237,7 +11239,8 @@
"readonly": false,
"type": "string",
"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": []
@ -11278,11 +11281,11 @@
"name": "scope",
"optional": false,
"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>[]",
"description": "Custom maximizeicon icon template of dialog."
"description": "Custom maximize icon template of dialog."
}
]
},
@ -12020,7 +12023,8 @@
"readonly": false,
"type": "HTMLAttributes",
"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",
@ -12044,7 +12048,8 @@
"readonly": false,
"type": "string",
"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",
@ -12052,7 +12057,8 @@
"readonly": false,
"type": "string",
"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",
@ -12060,7 +12066,8 @@
"readonly": false,
"type": "string",
"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",
@ -12068,7 +12075,8 @@
"readonly": false,
"type": "string",
"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",
@ -12290,6 +12298,51 @@
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"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,
"type": "string",
"default": "",
"description": "Icon of the choose button."
"description": "Icon of the choose button.",
"deprecated": "since v3.27.0. Use 'chooseicon' slot."
},
{
"name": "uploadIcon",
@ -13506,7 +13560,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon of the upload button."
"description": "Icon of the upload button.",
"deprecated": "since v3.27.0. Use 'updateicon' slot."
},
{
"name": "cancelIcon",
@ -13514,7 +13569,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon of the cancel button."
"description": "Icon of the cancel button.",
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
},
{
"name": "style",
@ -14114,7 +14170,7 @@
"description": "Custom close icon template."
},
{
"name": "previtemicon",
"name": "previousitemicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom navigator previous item icon template."
@ -14126,7 +14182,7 @@
"description": "Custom navigator next item icon template."
},
{
"name": "prevthumbnailicon",
"name": "previousthumbnailicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom thumbnail previous icon template."
@ -14330,7 +14386,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Custom indicator icon."
"description": "Custom indicator icon.",
"deprecated": "since v3.27.0. Use 'indicator' slot."
}
],
"methods": []
@ -14421,7 +14478,8 @@
"readonly": false,
"type": "string",
"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": []
@ -14438,7 +14496,7 @@
"description": "Default custom slot."
},
{
"name": "messageicon",
"name": "icon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom message icon template."
@ -14504,7 +14562,8 @@
"readonly": false,
"type": "string",
"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",
@ -14541,6 +14600,12 @@
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom content template."
},
{
"name": "closeicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom close icon template."
}
]
},
@ -14872,7 +14937,8 @@
"readonly": false,
"type": "string",
"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",
@ -14880,7 +14946,8 @@
"readonly": false,
"type": "string",
"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",
@ -15870,8 +15937,9 @@
"optional": true,
"readonly": false,
"type": "string",
"default": "ß",
"description": "Icon to display in filter input."
"default": "",
"description": "Icon to display in filter input.",
"deprecated": "since v3.27.0. Use 'filtericon' slot."
},
{
"name": "aria-label",
@ -16551,10 +16619,10 @@
"description": "Custom item template."
},
{
"name": "baricon",
"name": "popupicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom bar icon template."
"description": "Custom popup icon template on responsive mode."
},
{
"name": "submenuicon",
@ -16815,7 +16883,8 @@
"readonly": false,
"type": "string",
"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",
@ -16823,7 +16892,8 @@
"readonly": false,
"type": "ButtonHTMLAttributes",
"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": []
@ -16841,13 +16911,25 @@
},
{
"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>[]",
"description": "Custom message icon template."
},
{
"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>[]",
"description": "Custom close icon template."
}
@ -17237,7 +17319,8 @@
"readonly": false,
"type": "string",
"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",
@ -17245,7 +17328,8 @@
"readonly": false,
"type": "string",
"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",
@ -17253,7 +17337,8 @@
"readonly": false,
"type": "string",
"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",
@ -17261,7 +17346,8 @@
"readonly": false,
"type": "string",
"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",
@ -17269,7 +17355,8 @@
"readonly": false,
"type": "string",
"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",
@ -17277,7 +17364,8 @@
"readonly": false,
"type": "string",
"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",
@ -17421,7 +17509,8 @@
"name": "indicator",
"parameters": [],
"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",
@ -17515,7 +17604,13 @@
},
{
"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>[]",
"description": "Custom remove token icon template."
},
@ -17525,7 +17620,7 @@
{
"name": "scope",
"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."
}
],
@ -17534,13 +17629,25 @@
},
{
"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>[]",
"description": "Custom filter icon template."
},
{
"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>[]",
"description": "Custom close icon template."
},
@ -17550,12 +17657,37 @@
{
"name": "scope",
"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."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"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,
"type": "string",
"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": []
@ -19328,7 +19461,8 @@
"readonly": false,
"type": "string",
"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",
@ -19336,7 +19470,8 @@
"readonly": false,
"type": "string",
"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",
@ -19471,13 +19606,25 @@
},
{
"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>[]",
"description": "Custom hide icon template."
},
{
"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>[]",
"description": "Custom show icon template."
}
@ -20534,7 +20681,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon for the on state."
"description": "Icon for the on state.",
"deprecated": "since v3.27.0. Use 'onicon' slot."
},
{
"name": "offIcon",
@ -20542,7 +20690,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon for the off state."
"description": "Icon for the off state.",
"deprecated": "since v3.27.0. Use 'officon' slot."
},
{
"name": "cancelIcon",
@ -20550,7 +20699,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon for the cancelable state."
"description": "Icon for the cancelable state.",
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
}
],
"methods": []
@ -20967,7 +21117,8 @@
"name": "icon",
"parameters": [],
"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,
"type": "string",
"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",
@ -21765,7 +21917,8 @@
"readonly": false,
"type": "string",
"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",
@ -21773,7 +21926,8 @@
"readonly": false,
"type": "string",
"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",
@ -21856,6 +22010,19 @@
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"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,
"type": "string",
"default": "",
"description": "Name of the icon."
"description": "Name of the icon.",
"deprecated": "since v3.27.0. Use 'icon' slot."
},
{
"name": "model",
@ -22035,7 +22203,8 @@
"readonly": false,
"type": "string",
"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",
@ -22107,6 +22276,12 @@
"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."
},
{
"name": "icon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom menu button icon template."
},
{
"name": "menubuttonicon",
"parameters": [],
@ -23341,7 +23516,8 @@
"readonly": false,
"type": "string",
"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",
@ -23349,7 +23525,8 @@
"readonly": false,
"type": "string",
"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",
@ -23374,7 +23551,7 @@
"description": "Default slot to detect TabPanel components."
},
{
"name": "previcon",
"name": "previousicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Previous button icon template for the scrollable component."
@ -23495,7 +23672,8 @@
"readonly": false,
"type": "string",
"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": []
@ -23510,6 +23688,12 @@
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom content template"
},
{
"name": "icon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom icon template"
}
]
},
@ -24199,7 +24383,8 @@
"readonly": false,
"type": "string",
"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",
@ -24207,7 +24392,8 @@
"readonly": false,
"type": "string",
"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",
@ -24215,7 +24401,8 @@
"readonly": false,
"type": "string",
"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",
@ -24223,7 +24410,8 @@
"readonly": false,
"type": "string",
"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",
@ -24231,7 +24419,8 @@
"readonly": false,
"type": "string",
"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",
@ -24239,7 +24428,8 @@
"readonly": false,
"type": "ButtonHTMLAttributes",
"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": []
@ -24396,7 +24586,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon for the on state."
"description": "Icon for the on state.",
"deprecated": "since v3.27.0. Use 'icon' slot."
},
{
"name": "offIcon",
@ -24404,7 +24595,8 @@
"readonly": false,
"type": "string",
"default": "",
"description": "Icon for the off state."
"description": "Icon for the off state.",
"deprecated": "since v3.27.0. Use 'icon' slot."
},
{
"name": "onLabel",
@ -24501,7 +24693,20 @@
"description": "Defines valid slots in ToggleButton component.",
"relatedProp": "",
"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": {
"description": "Defines valid emits in ToggleButton component.",
@ -25060,7 +25265,8 @@
"readonly": false,
"type": "string",
"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",
@ -25490,18 +25696,6 @@
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"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",
"parameters": [
@ -26153,7 +26347,8 @@
"readonly": false,
"type": "string",
"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",
@ -26672,7 +26867,8 @@
"readonly": false,
"type": "InputHTMLAttributes",
"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",