Refactor #3885 - button updates

pull/3919/head
Tuğçe Küçükoğlu 2023-05-02 11:01:27 +03:00
parent 21ab0ad7d0
commit cadc7e87c4
8 changed files with 32 additions and 47 deletions

View File

@ -8,6 +8,7 @@
*
*/
import { VNode } from 'vue';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@ -40,12 +41,9 @@ export interface ConfirmDialogPassThroughOptions {
headerTitle?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the close icon's DOM element.
*/
closeIcon?: ConfirmDialogPassThroughOptionType;
closeButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the content's DOM element.
*/
@ -64,20 +62,14 @@ export interface ConfirmDialogPassThroughOptions {
message?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the reject button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the reject icon's DOM element.
*/
rejectIcon?: ConfirmDialogPassThroughOptionType;
rejectButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the accept button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the accept icon's DOM element.
*/
acceptIcon?: ConfirmDialogPassThroughOptionType;
acceptButton?: ButtonPassThroughOptions;
}
/**

View File

@ -22,17 +22,17 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<template #footer>
<CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject" v-bind="ptm('rejectButton')">
<CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
<template #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot>
</template>
</CDButton>
<CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" v-bind="ptm('acceptButton')">
<CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
<template #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot>
</template>
</CDButton>

View File

@ -8,6 +8,7 @@
*
*/
import { VNode } from 'vue';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@ -48,20 +49,14 @@ export interface ConfirmPopupPassThroughOptions {
footer?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the reject button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the reject icon's DOM element.
*/
rejectIcon?: ConfirmPopupPassThroughOptionType;
rejectButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the accept button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the accept icon's DOM element.
*/
acceptIcon?: ConfirmPopupPassThroughOptionType;
acceptButton?: ButtonPassThroughOptions;
}
/**

View File

@ -13,17 +13,17 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<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')">
<CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
<template #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot>
</template>
</CPButton>
<CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" v-bind="ptm('acceptButton')">
<CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
<template #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot>
</template>
</CPButton>

View File

@ -8,6 +8,7 @@
*
*/
import { HTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptions } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes) | null | undefined;
@ -51,12 +52,9 @@ export interface DialogPassThroughOptions {
maximizableIcon?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the close icon's DOM element.
*/
closeIcon?: DialogPassThroughOptionType;
closeButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the content's DOM element.
*/

View File

@ -32,10 +32,11 @@
@click="close"
:aria-label="closeAriaLabel"
type="button"
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
:pt="ptm('closeButton')"
v-bind="closeButtonProps"
>
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeButton')['icon']"></component>
</slot>
</button>
</div>

View File

@ -7,7 +7,9 @@
* @module inplace
*
*/
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptions } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes) | null | undefined;
@ -39,12 +41,9 @@ export interface InplacePassThroughOptions {
content?: InplacePassThroughOptionType;
/**
* Uses to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: InplacePassThroughOptionType;
/**
* Uses to pass attributes to the close icon's DOM element.
*/
closeIcon?: InplacePassThroughOptionType;
closeButton?: ButtonPassThroughOptions;
}
/**

View File

@ -5,10 +5,10 @@
</div>
<div v-else class="p-inplace-content" v-bind="ptm('content')">
<slot name="content"></slot>
<IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
<IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :pt="ptm('closeButton')" v-bind="closeButtonProps">
<template #icon>
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']"></component>
</slot>
</template>
</IPButton>