Refactor #4728

components/lib/autocomplete/AutoComplete.d.ts

@@ -631,8 +631,14 @@ export interface AutoCompleteSlots {
         /**
          * Remove token icon function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
     }): VNode[];
     /**
      * Custom loading icon template.

components/lib/autocomplete/AutoComplete.vue

@@ -55,7 +55,7 @@
                 <slot name="chip" :value="option">
                     <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)" :removeCallback="(event) => removeOption(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>

components/lib/chip/Chip.d.ts

@@ -150,13 +150,25 @@ export interface ChipSlots {
         /**
          * Remove icon click event
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event) => void;
         /**
          * Remove icon keydown event
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'keydownCallback' property instead.
          */
         onKeydown: (event: Event) => void;
+        /**
+         * Remove icon click event
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event) => void;
+        /**
+         * Remove icon keydown event
+         * @param {Event} event - Browser event
+         */
+        keydownCallback: (event: Event) => void;
     }): VNode[];
 }
 

components/lib/chip/Chip.vue

@@ -6,7 +6,7 @@
             <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
             <div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
         </slot>
-        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown" :removeCallback="close" :keydownCallback="onKeydown">
             <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="[cx('removeIcon'), removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
     </div>

components/lib/chips/Chips.d.ts

@@ -238,8 +238,14 @@ export interface ChipsSlots {
         /**
          * Remove token icon function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
     }): VNode[];
 }
 /**

components/lib/chips/Chips.vue

@@ -31,7 +31,7 @@
                 <slot name="chip" :class="cx('label')" :value="val">
                     <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)" :removeCallback="(event) => removeItem(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>

components/lib/dropdown/Dropdown.d.ts

@@ -592,8 +592,14 @@ export interface DropdownSlots {
         /**
          * Clear icon click function.
          * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'clearCallback' property instead.
          */
         onClick: (event: Event) => void;
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom dropdown icon template.

components/lib/dropdown/Dropdown.vue

@@ -47,7 +47,7 @@
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
-        <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick">
+        <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" data-pc-section="clearicon" />
         </slot>
         <div :class="cx('trigger')" v-bind="ptm('trigger')">

components/lib/image/Image.d.ts

@@ -251,8 +251,13 @@ export interface ImageSlots {
         style: any;
         /**
          * Image error function.
+         * @deprecated since v3.39.0. Use 'errorCallback' property instead.
          */
         onError: () => void;
+        /**
+         * Preview click function.
+         */
+        errorCallback: () => void;
     }): VNode[];
     /**
      * Custom preview template.
@@ -269,8 +274,13 @@ export interface ImageSlots {
         style: any;
         /**
          * Preview click function.
+         * @deprecated since v3.39.0. Use 'previewCallback' property instead.
          */
         onClick: () => void;
+        /**
+         * Preview click function.
+         */
+        previewCallback: () => void;
     }): VNode[];
 }
 

components/lib/image/Image.vue

@@ -1,6 +1,6 @@
 <template>
     <span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
-        <slot name="image" :onError="onError">
+        <slot name="image" :onError="onError" :errorCallback="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
         <button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
@@ -43,7 +43,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
                     <div v-if="previewVisible" v-bind="ptm('previewContainer')">
-                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
+                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
                             <img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
                         </slot>
                     </div>

components/lib/multiselect/MultiSelect.d.ts

@@ -689,8 +689,15 @@ export interface MultiSelectSlots {
          * Remove token icon function.
          * @param {Event} event - Browser event
          * @param {any} item - Item
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
          */
         onClick: (event: Event, item: any) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         * @param {any} item - Item
+         */
+        removeCallback: (event: Event, item: any) => void;
     }): VNode[];
     /**
      * Custom header checkbox icon template.

components/lib/multiselect/MultiSelect.vue

@@ -33,7 +33,7 @@
                             <slot name="chip" :value="item">
                                 <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)">
+                            <slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)" :removeCallback="(event) => removeOption(event, item)">
                                 <span v-if="removeTokenIcon" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                                 <TimesCircleIcon v-else :class="cx('removeTokenIcon')" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                             </slot>

components/lib/password/Password.d.ts

@@ -293,8 +293,13 @@ export interface PasswordSlots {
     hideicon(scope: {
         /**
          * Hide icon click event
+         * @deprecated since v3.39.0. Use 'toggleCallback' property instead.
          */
         onClick: () => void;
+        /**
+         * Hide icon click event
+         */
+        toggleCallback: () => void;
     }): VNode[];
     /**
      * Custom show icon template.
@@ -302,9 +307,14 @@ export interface PasswordSlots {
      */
     showicon(scope: {
         /**
-         * Show icon click event
+         * Hide icon click event
+         * @deprecated since v3.39.0. Use 'toggleCallback' property instead.
          */
         onClick: () => void;
+        /**
+         * Hide icon click event
+         */
+        toggleCallback: () => void;
     }): VNode[];
 }
 

components/lib/password/Password.vue

@@ -23,10 +23,10 @@
             v-bind="{ ...inputProps, ...ptm('input') }"
             :unstyled="unstyled"
         />
-        <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle">
+        <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
             <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
         </slot>
-        <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
+        <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">
             <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
         </slot>
         <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">

components/lib/speeddial/SpeedDial.d.ts

@@ -297,8 +297,14 @@ export interface SpeedDialSlots {
         /**
          * Button click function
          * @param {Event} event - Browser event.
+         * @deprecated since v3.39.0. Use 'toggleCallback' property instead.
          */
         onClick: (event: Event) => void;
+        /**
+         * Button click function
+         * @param {Event} event - Browser event.
+         */
+        toggleCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom icon template.

components/lib/speeddial/SpeedDial.vue

@@ -1,6 +1,6 @@
 <template>
     <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')" data-pc-name="speeddial">
-        <slot name="button" :onClick="onClick">
+        <slot name="button" :onClick="onClick" :toggleCallback="onClick">
             <SDButton
                 type="button"
                 :class="[cx('button'), buttonClass]"
@@ -138,9 +138,7 @@ export default {
         },
         onClick(event) {
             this.d_visible ? this.hide() : this.show();
-
             this.isItemClicked = true;
-
             this.$emit('click', event);
         },
         show() {