parent
361a0f0bbc
commit
95ca69d453
|
@ -62,6 +62,18 @@ export interface ConfirmDialogSlots {
|
|||
* @param {Object} scope - message slot's params.
|
||||
*/
|
||||
message(scope: { message: ConfirmationOptions }): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
icon(): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
accepticon(): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
rejecticon(): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -13,13 +13,28 @@
|
|||
@update:visible="onHide"
|
||||
>
|
||||
<template v-if="!$slots.message">
|
||||
<i v-if="confirmation.icon" :class="iconClass" />
|
||||
<slot name="icon">
|
||||
<component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-dialog-icon" />
|
||||
<span v-else-if="confirmation.icon" :class="iconClass" />
|
||||
</slot>
|
||||
<span class="p-confirm-dialog-message">{{ message }}</span>
|
||||
</template>
|
||||
<component v-else :is="$slots.message" :message="confirmation"></component>
|
||||
<template #footer>
|
||||
<CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" />
|
||||
<CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" />
|
||||
<CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject">
|
||||
<template #icon="iconProps">
|
||||
<slot name="rejecticon">
|
||||
<span :class="[rejectIcon, iconProps.class]" />
|
||||
</slot>
|
||||
</template>
|
||||
</CDButton>
|
||||
<CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept">
|
||||
<template #icon="iconProps">
|
||||
<slot name="accepticon">
|
||||
<span :class="[acceptIcon, iconProps.class]" />
|
||||
</slot>
|
||||
</template>
|
||||
</CDButton>
|
||||
</template>
|
||||
</CDialog>
|
||||
</template>
|
||||
|
|
|
@ -30,6 +30,18 @@ export interface ConfirmPopupSlots {
|
|||
* @param {Object} scope - message slot's params.
|
||||
*/
|
||||
message(scope: { message: ConfirmationOptions }): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
icon(): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
accepticon(): VNode[];
|
||||
/**
|
||||
* Custom icon template.
|
||||
*/
|
||||
rejecticon(): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -4,14 +4,29 @@
|
|||
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
|
||||
<template v-if="!$slots.message">
|
||||
<div class="p-confirm-popup-content">
|
||||
<i :class="iconClass" />
|
||||
<slot name="icon">
|
||||
<component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
|
||||
<span v-else-if="confirmation.icon" :class="iconClass" />
|
||||
</slot>
|
||||
<span class="p-confirm-popup-message">{{ confirmation.message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<component v-else :is="$slots.message" :message="confirmation"></component>
|
||||
<div class="p-confirm-popup-footer">
|
||||
<CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" />
|
||||
<CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" />
|
||||
<CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
|
||||
<template #icon="iconProps">
|
||||
<slot name="rejecticon">
|
||||
<span :class="[rejectIcon, iconProps.class]" />
|
||||
</slot>
|
||||
</template>
|
||||
</CPButton>
|
||||
<CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
|
||||
<template #icon="iconProps">
|
||||
<slot name="accepticon">
|
||||
<span :class="[acceptIcon, iconProps.class]" />
|
||||
</slot>
|
||||
</template>
|
||||
</CPButton>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
Loading…
Reference in New Issue