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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View File

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

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

@ -22,17 +22,17 @@
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<template #footer> <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"> <template #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CDButton> </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"> <template #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
</template> </template>
</CDButton> </CDButton>

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

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

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

@ -13,17 +13,17 @@
</template> </template>
<component v-else :is="$slots.message" :message="confirmation"></component> <component v-else :is="$slots.message" :message="confirmation"></component>
<div class="p-confirm-popup-footer" v-bind="ptm('footer')"> <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"> <template #icon="iconProps">
<slot name="rejecticon"> <slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" /> <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
</slot> </slot>
</template> </template>
</CPButton> </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"> <template #icon="iconProps">
<slot name="accepticon"> <slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" /> <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
</slot> </slot>
</template> </template>
</CPButton> </CPButton>

8
components/lib/dialog/Dialog.d.ts vendored
View File

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

5
components/lib/dialog/Dialog.vue
View File

@ -32,10 +32,11 @@
@click="close" @click="close"
:aria-label="closeAriaLabel" :aria-label="closeAriaLabel"
type="button" type="button"
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }" :pt="ptm('closeButton')"
v-bind="closeButtonProps"
> >
<slot name="closeicon"> <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> </slot>
</button> </button>
</div> </div>

9
components/lib/inplace/Inplace.d.ts vendored
View File

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

4
components/lib/inplace/Inplace.vue
View File

@ -5,10 +5,10 @@
</div> </div>
<div v-else class="p-inplace-content" v-bind="ptm('content')"> <div v-else class="p-inplace-content" v-bind="ptm('content')">
<slot name="content"></slot> <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> <template #icon>
<slot name="closeicon"> <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> </slot>
</template> </template>
</IPButton> </IPButton>