Refactor #3885 - For ConfirmPopup
Tuğçe Küçükoğlu
parent
0cedd4813a
commit
d8c6920efd
|
|
@ -4,6 +4,12 @@ const ConfirmPopupProps = [
|
|||
type: 'string',
|
||||
default: 'null',
|
||||
description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
|
||||
},
|
||||
{
|
||||
name: 'pt',
|
||||
type: 'any',
|
||||
default: 'null',
|
||||
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,81 @@ import { VNode } from 'vue';
|
|||
import { ConfirmationOptions } from '../confirmationoptions';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface ConfirmPopupPassThroughMethodOptions {
|
||||
props: ConfirmPopupProps;
|
||||
state: ConfirmPopupState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link ConfirmPopupProps.pt}
|
||||
*/
|
||||
export interface ConfirmPopupPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the icon's DOM element.
|
||||
*/
|
||||
icon?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the message's DOM element.
|
||||
*/
|
||||
message?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the footer's DOM element.
|
||||
*/
|
||||
footer?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the reject button's DOM element.
|
||||
*/
|
||||
rejectButton?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the reject icon's DOM element.
|
||||
*/
|
||||
rejectIcon?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the accept button's DOM element.
|
||||
*/
|
||||
acceptButton?: ConfirmPopupPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the accept icon's DOM element.
|
||||
*/
|
||||
acceptIcon?: ConfirmPopupPassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface ConfirmPopupPassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current inline state in ConfirmPopup component.
|
||||
*/
|
||||
export interface ConfirmPopupState {
|
||||
/**
|
||||
* Current visible state as a boolean.
|
||||
* @defaultValue false
|
||||
*/
|
||||
visible: boolean;
|
||||
/**
|
||||
* Current confirmation message.
|
||||
*/
|
||||
confirmation: ConfirmationOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in ConfirmPopup component.
|
||||
*/
|
||||
|
|
@ -19,6 +94,11 @@ export interface ConfirmPopupProps {
|
|||
* Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
|
||||
*/
|
||||
group?: string;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* @type {ConfirmPopupPassThroughOptions}
|
||||
*/
|
||||
pt?: ConfirmPopupPassThroughOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
<template>
|
||||
<Portal>
|
||||
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<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, ...ptm('root') }">
|
||||
<template v-if="!$slots.message">
|
||||
<div class="p-confirm-popup-content">
|
||||
<div class="p-confirm-popup-content" v-bind="ptm('content')">
|
||||
<slot name="icon" class="p-confirm-popup-icon">
|
||||
<component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
|
||||
<span v-else-if="confirmation.icon" :class="iconClass" />
|
||||
<span v-else-if="confirmation.icon" :class="iconClass" v-bind="ptm('icon')" />
|
||||
</slot>
|
||||
<span class="p-confirm-popup-message">{{ confirmation.message }}</span>
|
||||
<span class="p-confirm-popup-message" v-bind="ptm('message')">{{ confirmation.message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<component v-else :is="$slots.message" :message="confirmation"></component>
|
||||
<div class="p-confirm-popup-footer">
|
||||
<CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
|
||||
<div class="p-confirm-popup-footer" v-bind="ptm('footer')">
|
||||
<CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" v-bind="ptm('rejectButton')">
|
||||
<template #icon="iconProps">
|
||||
<slot name="rejecticon">
|
||||
<span :class="[rejectIcon, iconProps.class]" />
|
||||
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" />
|
||||
</slot>
|
||||
</template>
|
||||
</CPButton>
|
||||
<CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
|
||||
<CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" v-bind="ptm('acceptButton')">
|
||||
<template #icon="iconProps">
|
||||
<slot name="accepticon">
|
||||
<span :class="[acceptIcon, iconProps.class]" />
|
||||
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" />
|
||||
</slot>
|
||||
</template>
|
||||
</CPButton>
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import ConfirmationEventBus from 'primevue/confirmationeventbus';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
|
|
@ -43,6 +44,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue
|
|||
|
||||
export default {
|
||||
name: 'ConfirmPopup',
|
||||
extends: BaseComponent,
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
group: String
|
||||
|
|
|
|||
Loading…
Reference in New Issue