vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 Refactor #3833 - ConfirmDialog & ConfirmPopup updates

pull/3976/head
Tuğçe Küçükoğlu 2023-04-18 14:50:19 +03:00
parent 361a0f0bbc
commit 95ca69d453
4 changed files with 60 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -62,6 +62,18 @@ export interface ConfirmDialogSlots {
* @param {Object} scope - message slot's params. * @param {Object} scope - message slot's params.
*/ */
message(scope: { message: ConfirmationOptions }): VNode[]; message(scope: { message: ConfirmationOptions }): VNode[];
/**
* Custom icon template.
*/
icon(): VNode[];
/**
* Custom icon template.
*/
accepticon(): VNode[];
/**
* Custom icon template.
*/
rejecticon(): VNode[];
} }
/** /**

21
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -13,13 +13,28 @@
@update:visible="onHide" @update:visible="onHide"
> >
<template v-if="!$slots.message"> <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> <span class="p-confirm-dialog-message">{{ message }}</span>
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<template #footer> <template #footer>
<CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" /> <CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject">
<CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" /> <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> </template>
</CDialog> </CDialog>
</template> </template>

12
components/lib/confirmpopup/ConfirmPopup.d.ts vendored
View File

@ -30,6 +30,18 @@ export interface ConfirmPopupSlots {
* @param {Object} scope - message slot's params. * @param {Object} scope - message slot's params.
*/ */
message(scope: { message: ConfirmationOptions }): VNode[]; message(scope: { message: ConfirmationOptions }): VNode[];
/**
* Custom icon template.
*/
icon(): VNode[];
/**
* Custom icon template.
*/
accepticon(): VNode[];
/**
* Custom icon template.
*/
rejecticon(): VNode[];
} }
/** /**

21
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -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"> <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"> <template v-if="!$slots.message">
<div class="p-confirm-popup-content"> <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> <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
</div> </div>
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<div class="p-confirm-popup-footer"> <div class="p-confirm-popup-footer">
<CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" /> <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
<CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" /> <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>
</div> </div>
</transition> </transition>