pull/4806/head
tugcekucukoglu 2023-10-31 20:21:47 +03:00
parent e8ebb9bf3f
commit b957ea422d
16 changed files with 74 additions and 13 deletions

View File

@ -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.

View File

@ -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>

View File

@ -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[];
}

View File

@ -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>

View File

@ -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[];
}
/**

View File

@ -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>

View File

@ -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.

View File

@ -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')">

View File

@ -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[];
}

View File

@ -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>

View File

@ -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.

View File

@ -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>

View File

@ -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[];
}

View File

@ -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">

View File

@ -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.

View File

@ -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() {