Refactor #3885 - button updates
parent
21ab0ad7d0
commit
cadc7e87c4
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue