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

Refactor #5437 - For ConfirmDialog/ConfirmPopup

pull/5507/head
tugcekucukoglu 2024-03-27 16:22:02 +03:00
parent 5403be3a70
commit 95e0a2414c
6 changed files with 81 additions and 24 deletions
Show Stats 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>

19
components/lib/confirmpopup/BaseConfirmPopup.vue
View File

@ -6,7 +6,24 @@ export default {
name: 'BaseConfirmPopup',
extends: BaseComponent,
props: {
group: String
group: String,
rejectButtonProps: {
type: Object,
default() {
return {
size: 'small',
text: true
};
}
},
acceptButtonProps: {
type: Object,
default() {
return {
size: 'small'
};
}
}
},
style: ConfirmPopupStyle,
provide() {

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

@ -9,7 +9,7 @@
*/
import { TransitionProps, 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';
@ -138,6 +138,18 @@ export interface ConfirmPopupProps {
* Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
*/
group?: string;
/**
* Used to pass all properties of the ButtonProps to the reject button inside the component.
* @type {ButtonProps}
* @defaultValue { size: 'small', text: true }
*/
rejectButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the accept button inside the component.
* @type {ButtonProps}
* @defaultValue { size: 'small' }
*/
acceptButtonProps?: object | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmPopupPassThroughOptions}

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

@ -15,39 +15,41 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')">
<CPButton
<Button
:label="rejectLabel"
@click="reject()"
@keydown="onRejectKeydown"
:autofocus="autoFocusReject"
:class="[cx('rejectButton'), confirmation.rejectClass]"
:size="{ small: !confirmation.rejectClass }"
:text="!confirmation.rejectClass"
:unstyled="unstyled"
v-bind="rejectButtonProps"
:pt="ptm('rejectButton')"
:size="rejectButtonProps.size"
: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>
</CPButton>
<CPButton
</Button>
<Button
:label="acceptLabel"
@click="accept()"
@keydown="onAcceptKeydown"
:autofocus="autoFocusAccept"
:class="[cx('acceptButton'), confirmation.acceptClass]"
:size="{ small: !confirmation.acceptClass }"
:unstyled="unstyled"
v-bind="acceptButtonProps"
:pt="ptm('acceptButton')"
:size="acceptButtonProps.size"
>
<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>
</CPButton>
</Button>
</div>
</template>
</div>
@ -298,10 +300,10 @@ export default {
return this.confirmation ? this.confirmation.message : 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;
@ -311,8 +313,8 @@ export default {
}
},
components: {
CPButton: Button,
Portal: Portal
Button,
Portal
},
directives: {
focustrap: FocusTrap