vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #5437 - For ConfirmDialog/ConfirmPopup

Browse source
This commit is contained in:
tugcekucukoglu 2024-03-27 16:22:02 +03:00
parent 5403be3a70
commit 95e0a2414c
6 changed files with 81 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/lib/confirmdialog/BaseConfirmDialog.vue
View file

@ -14,6 +14,20 @@ export default {
draggable: {
type: Boolean,
default: true
},
rejectButtonProps: {
type: Object,
default() {
return {
text: true
};
}
},
acceptButtonProps: {
type: Object,
default() {
return {};
}
}
},
style: ConfirmDialogStyle,

14
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View file

@ -9,7 +9,7 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ButtonPassThroughOptions, ButtonProps } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -184,6 +184,18 @@ export interface ConfirmDialogProps {
* @defaultValue true
*/
draggable?: boolean | undefined;
/**
* Used to pass all properties of the ButtonProps to the reject button inside the component.
* @type {ButtonProps}
* @defaultValue { text: true }
*/
rejectButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the accept button inside the component.
* @type {ButtonProps}
* @defaultValue {}
*/
acceptButtonProps?: object | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmDialogPassThroughOptions}

20
components/lib/confirmdialog/ConfirmDialog.vue
View file

@ -1,5 +1,5 @@
<template>
<CDialog
<Dialog
v-model:visible="visible"
role="alertdialog"
:class="cx('root')"
@ -28,22 +28,22 @@
<component v-else :is="$slots.message" :message="confirmation"></component>
</template>
<template v-if="!$slots.container" #footer>
<CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :text="!confirmation.rejectClass" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
<Button :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" v-bind="rejectButtonProps" :pt="ptm('rejectButton')" :text="rejectButtonProps.text">
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot>
</template>
</CDButton>
<CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')">
</Button>
<Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" v-bind="acceptButtonProps" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot>
</template>
</CDButton>
</Button>
</template>
</CDialog>
</Dialog>
</template>
<script>
@ -132,10 +132,10 @@ export default {
return this.confirmation ? this.confirmation.position : null;
},
acceptLabel() {
return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
},
rejectLabel() {
return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
@ -154,8 +154,8 @@ export default {
}
},
components: {
CDialog: Dialog,
CDButton: Button
Dialog,
Button
}
};
</script>