Update #3965 - Updates on Dialog components

pull/4030/head
Bahadır Sofuoğlu 2023-06-06 12:38:02 +03:00
parent 28d1c876e9
commit 5c47976d98
6 changed files with 8 additions and 12 deletions

View File

@ -6,9 +6,7 @@ const classes = {
icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null], icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-dialog-message', message: 'p-confirm-dialog-message',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null], rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null],
rejectButtonIcon: ({ context }) => [context && context.icon, context && context.iconClass], acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null]
acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null],
acceptButtonIcon: ({ context }) => [context && context.icon, context && context.iconClass]
}; };
export default { export default {

View File

@ -26,14 +26,14 @@
<CDButton :label="rejectLabel" :class="cx('rejectButton')" iconPos="left" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')"> <CDButton :label="rejectLabel" :class="cx('rejectButton')" iconPos="left" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="cx('rejectButtonIcon', getCXOptions(rejectIcon, iconProps))" v-bind="ptm('rejectButton')['icon']" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CDButton> </CDButton>
<CDButton :label="acceptLabel" :class="cx('acceptButton')" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')"> <CDButton :label="acceptLabel" :class="cx('acceptButton')" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="cx('acceptButtonIcon', getCXOptions(acceptIcon, iconProps))" v-bind="ptm('acceptButton')['icon']" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
</template> </template>
</CDButton> </CDButton>

View File

@ -87,9 +87,7 @@ const classes = {
message: 'p-confirm-popup-message', message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer', footer: 'p-confirm-popup-footer',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null], rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null],
rejectButtonIcon: ({ context }) => [context && context.icon, context && context.iconClass], acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null]
acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null],
acceptButtonIcon: ({ context }) => [context && context.icon, context && context.iconClass]
}; };
const { load: loadStyle } = useStyle(styles, { id: 'primevue_confirmPopup_style', manual: true }); const { load: loadStyle } = useStyle(styles, { id: 'primevue_confirmPopup_style', manual: true });

View File

@ -16,14 +16,14 @@
<CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="cx('rejectButton')" :pt="ptm('rejectButton')"> <CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="cx('rejectButton')" :pt="ptm('rejectButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="cx('rejectButtonIcon', getCXOptions(rejectIcon, iconProps))" v-bind="ptm('rejectButton')['icon']" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CPButton> </CPButton>
<CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="cx('acceptButton')" :pt="ptm('acceptButton')"> <CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="cx('acceptButton')" :pt="ptm('acceptButton')">
<template #icon="iconProps"> <template #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="cx('acceptButtonIcon', getCXOptions(acceptIcon, iconProps))" v-bind="ptm('acceptButton')['icon']" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
</template> </template>
</CPButton> </CPButton>

View File

@ -199,7 +199,7 @@ const classes = {
maximizableIcon: ({ props, instance }) => `p-dialog-header-maximize-icon ${instance.maximized ? props.minimizeIcon : props.maximizeIcon}`, maximizableIcon: ({ props, instance }) => `p-dialog-header-maximize-icon ${instance.maximized ? props.minimizeIcon : props.maximizeIcon}`,
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link', closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
closeButtonIcon: ({ props }) => ['p-dialog-header-close-icon', props.closeIcon], closeButtonIcon: ({ props }) => ['p-dialog-header-close-icon', props.closeIcon],
content: ({ props }) => ['p-dialog-content', props.contentClass], content: 'p-dialog-content',
footer: 'p-dialog-footer' footer: 'p-dialog-footer'
}; };

View File

@ -30,7 +30,7 @@
</button> </button>
</div> </div>
</div> </div>
<div :ref="contentRef" :class="cx('content')" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }"> <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
<slot></slot> <slot></slot>
</div> </div>
<div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')"> <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">