From cd7ef5231905e09e4d65aa65b51f6f7c0824880f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
<tugcekucukoglu.860@gmail.com>
Date: Tue, 18 Apr 2023 13:51:10 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - icon & .d.ts. updates
---
components/lib/datatable/BodyCell.vue | 8 ++-
components/lib/datatable/HeaderCheckbox.vue | 3 +-
components/lib/datatable/TableBody.vue | 8 ++-
components/lib/dialog/Dialog.d.ts | 9 ++-
components/lib/dropdown/Dropdown.d.ts | 39 ++++++++++++
components/lib/fileupload/FileUpload.d.ts | 6 +-
components/lib/image/Image.d.ts | 1 +
.../lib/inlinemessage/InlineMessage.d.ts | 2 +-
components/lib/inplace/Inplace.d.ts | 5 ++
components/lib/inputnumber/InputNumber.d.ts | 2 +
components/lib/listbox/Listbox.d.ts | 2 +-
components/lib/message/Message.d.ts | 16 ++++-
components/lib/message/Message.vue | 7 ++-
components/lib/multiselect/MultiSelect.d.ts | 59 ++++++++++++++++++-
components/lib/multiselect/MultiSelect.vue | 27 +++++----
components/lib/overlaypanel/OverlayPanel.d.ts | 1 +
components/lib/password/Password.d.ts | 16 ++++-
components/lib/password/Password.vue | 4 +-
components/lib/rating/Rating.d.ts | 3 +
components/lib/scrolltop/ScrollTop.d.ts | 1 +
components/lib/sidebar/Sidebar.d.ts | 1 +
components/lib/speeddial/SpeedDial.d.ts | 12 ++++
components/lib/splitbutton/SplitButton.d.ts | 6 ++
components/lib/tabview/TabView.d.ts | 6 +-
components/lib/tag/Tag.d.ts | 5 ++
components/lib/toast/Toast.d.ts | 6 ++
components/lib/togglebutton/ToggleButton.d.ts | 20 ++++++-
components/lib/tree/Tree.d.ts | 1 +
components/lib/treeselect/TreeSelect.d.ts | 8 ---
components/lib/treeselect/TreeSelect.vue | 6 --
components/lib/treetable/TreeTable.d.ts | 1 +
.../tristatecheckbox/TriStateCheckbox.d.ts | 1 +
32 files changed, 239 insertions(+), 53 deletions(-)
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index b2b89e128..4c942dbea 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -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')">
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 071a11581..2e0994f0d 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -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>
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index baa6a57db..5a3bf5f47 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -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>
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index 019d301ee..5623c3cbe 100755
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -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: {
/**
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index ea1319774..66158e6be 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
index cfe4e4fa6..fa4d95756 100755
--- a/components/lib/fileupload/FileUpload.d.ts
+++ b/components/lib/fileupload/FileUpload.d.ts
@@ -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;
/**
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index ae0605860..b20a3e0b5 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -29,6 +29,7 @@ export interface ImageProps {
imageClass?: any;
/**
* Custom indicator icon.
+ * @deprecated since v3.27.0. Use 'indicator' slot.
*/
indicatorIcon?: string;
}
diff --git a/components/lib/inlinemessage/InlineMessage.d.ts b/components/lib/inlinemessage/InlineMessage.d.ts
index 97e9b0b99..357c90817 100755
--- a/components/lib/inlinemessage/InlineMessage.d.ts
+++ b/components/lib/inlinemessage/InlineMessage.d.ts
@@ -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;
}
diff --git a/components/lib/inplace/Inplace.d.ts b/components/lib/inplace/Inplace.d.ts
index dd3b92568..bfa5a7d10 100755
--- a/components/lib/inplace/Inplace.d.ts
+++ b/components/lib/inplace/Inplace.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 193f838fb..47ab67606 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -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;
/**
diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts
index 2ec226744..4f9b86d16 100755
--- a/components/lib/listbox/Listbox.d.ts
+++ b/components/lib/listbox/Listbox.d.ts
@@ -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;
/**
diff --git a/components/lib/message/Message.d.ts b/components/lib/message/Message.d.ts
index cf4febf11..49d7cae0b 100755
--- a/components/lib/message/Message.d.ts
+++ b/components/lib/message/Message.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index f31295a00..ed1e77338 100755
--- a/components/lib/message/Message.vue
+++ b/components/lib/message/Message.vue
@@ -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>
diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index 38c46e635..5ae98fc41 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -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[];
}
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 8128d6f9e..9b42a6a02 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -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>
+ <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>
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index 333888ac1..247bdf775 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -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;
}
diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts
index 5e7045a17..3f744faea 100755
--- a/components/lib/password/Password.d.ts
+++ b/components/lib/password/Password.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index c7be8a1bc..bdf0ee63d 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -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">
diff --git a/components/lib/rating/Rating.d.ts b/components/lib/rating/Rating.d.ts
index 45bb5aa32..4dd2eb5c9 100755
--- a/components/lib/rating/Rating.d.ts
+++ b/components/lib/rating/Rating.d.ts
@@ -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;
}
diff --git a/components/lib/scrolltop/ScrollTop.d.ts b/components/lib/scrolltop/ScrollTop.d.ts
index a6e6595ad..fcad676cd 100644
--- a/components/lib/scrolltop/ScrollTop.d.ts
+++ b/components/lib/scrolltop/ScrollTop.d.ts
@@ -41,6 +41,7 @@ export interface ScrollTopProps {
export interface ScrollTopSlots {
/**
* Custom scrolltop icon template.
+ * @deprecated since v3.27.0. Use 'icon' slot.
*/
icon(): VNode[];
}
diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 6dc071c69..137dbe0e9 100755
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -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;
/**
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
index ec6037bb5..ca2250df6 100644
--- a/components/lib/speeddial/SpeedDial.d.ts
+++ b/components/lib/speeddial/SpeedDial.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
index 06c8e409f..ed13e8cbd 100755
--- a/components/lib/splitbutton/SplitButton.d.ts
+++ b/components/lib/splitbutton/SplitButton.d.ts
@@ -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.
*/
diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts
index 9e2bfc7c3..45ace0333 100755
--- a/components/lib/tabview/TabView.d.ts
+++ b/components/lib/tabview/TabView.d.ts
@@ -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.
*/
diff --git a/components/lib/tag/Tag.d.ts b/components/lib/tag/Tag.d.ts
index 161f1c033..2a8613243 100644
--- a/components/lib/tag/Tag.d.ts
+++ b/components/lib/tag/Tag.d.ts
@@ -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[];
}
/**
diff --git a/components/lib/toast/Toast.d.ts b/components/lib/toast/Toast.d.ts
index 22da8f6ae..6642b0bf2 100755
--- a/components/lib/toast/Toast.d.ts
+++ b/components/lib/toast/Toast.d.ts
@@ -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;
}
diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts
index 25cec1276..57b997061 100755
--- a/components/lib/togglebutton/ToggleButton.d.ts
+++ b/components/lib/togglebutton/ToggleButton.d.ts
@@ -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.
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index c8ab88264..621d1b6a1 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -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;
/**
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index b770b0c3c..ab0719ba2 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -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.
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 727e11e62..83eb4ae46 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -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>
diff --git a/components/lib/treetable/TreeTable.d.ts b/components/lib/treetable/TreeTable.d.ts
index a84041ede..20f6dadb5 100755
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@@ -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;
/**
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
index 538d8b046..a6f23b0e6 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
@@ -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;
/**