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 18:45:05 +03:00
parent 11b48d6002
commit d31a423153
7 changed files with 70 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/confirmationoptions/ConfirmationOptions.d.ts vendored
View File

@ -5,6 +5,7 @@
* @module confirmationoptions
*
*/
import { ButtonProps } from '../button';
/**
* Confirmation Service options.
@ -85,4 +86,14 @@ export interface ConfirmationOptions {
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
*/
defaultFocus?: string | undefined;
/**
* Used to pass all properties of the ButtonProps to the reject button inside the component.
* @type {ButtonProps}
*/
rejectProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the accept button inside the component.
* @type {ButtonProps}
*/
acceptProps?: object | undefined;
}

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

@ -14,20 +14,6 @@ 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, ButtonProps } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -184,18 +184,6 @@ 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}

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

@ -28,14 +28,23 @@
<component v-else :is="$slots.message" :message="confirmation"></component>
</template>
<template v-if="!$slots.container" #footer>
<Button :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" v-bind="rejectButtonProps" :pt="ptm('rejectButton')" :text="rejectButtonProps.text">
<Button
:class="[cx('rejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject"
:unstyled="unstyled"
:text="confirmation.rejectProps?.text || false"
@click="reject()"
v-bind="confirmation.rejectProps"
:label="rejectLabel"
:pt="ptm('rejectButton')"
>
<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>
</Button>
<Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" v-bind="acceptButtonProps" :pt="ptm('acceptButton')">
<Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :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" />
@ -132,16 +141,28 @@ export default {
return this.confirmation ? this.confirmation.position : null;
},
acceptLabel() {
return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
}
return null;
},
rejectLabel() {
return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
}
return null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;
},
rejectIcon() {
return this.confirmation ? this.confirmation.rejectIcon : null;
return this.confirmation ? this.confirmation.rejectIcon : this.confirmation?.rejectProps ? this.confirmation.rejectProps.icon : null;
},
autoFocusAccept() {
return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;

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

@ -6,24 +6,7 @@ export default {
name: 'BaseConfirmPopup',
extends: BaseComponent,
props: {
group: String,
rejectButtonProps: {
type: Object,
default() {
return {
size: 'small',
text: true
};
}
},
acceptButtonProps: {
type: Object,
default() {
return {
size: 'small'
};
}
}
group: String
},
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, ButtonProps } from '../button';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -138,18 +138,6 @@ 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}

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

@ -16,16 +16,16 @@
<component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')">
<Button
:label="rejectLabel"
:class="[cx('rejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject"
:unstyled="unstyled"
:size="confirmation.rejectProps?.size || 'small'"
:text="confirmation.rejectProps?.text || false"
@click="reject()"
@keydown="onRejectKeydown"
:autofocus="autoFocusReject"
:class="[cx('rejectButton'), confirmation.rejectClass]"
:unstyled="unstyled"
v-bind="rejectButtonProps"
v-bind="confirmation.rejectProps"
:label="rejectLabel"
:pt="ptm('rejectButton')"
:size="rejectButtonProps.size"
:text="rejectButtonProps.text"
>
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
@ -34,15 +34,15 @@
</template>
</Button>
<Button
:label="acceptLabel"
:class="[cx('acceptButton'), confirmation.acceptClass]"
:autofocus="autoFocusAccept"
:unstyled="unstyled"
:size="confirmation.acceptProps?.size || 'small'"
@click="accept()"
@keydown="onAcceptKeydown"
:autofocus="autoFocusAccept"
:class="[cx('acceptButton'), confirmation.acceptClass]"
:unstyled="unstyled"
v-bind="acceptButtonProps"
v-bind="confirmation.acceptProps"
:label="acceptLabel"
:pt="ptm('acceptButton')"
:size="acceptButtonProps.size"
>
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
@ -300,16 +300,28 @@ export default {
return this.confirmation ? this.confirmation.message : null;
},
acceptLabel() {
return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
}
return null;
},
rejectLabel() {
return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
if (this.confirmation) {
const confirmation = this.confirmation;
return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
}
return null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;
},
rejectIcon() {
return this.confirmation ? this.confirmation.rejectIcon : null;
return this.confirmation ? this.confirmation.rejectIcon : this.confirmation?.rejectProps ? this.confirmation.rejectProps.icon : null;
}
},
components: {