mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 09:22:34 +00:00
New *ButtonProps properties added - I
This commit is contained in:
tugcekucukoglu
parent
b828f34a86
commit
ddeaab525a
23 changed files with 543 additions and 278 deletions
|
|
@ -111,8 +111,24 @@ export default {
|
|||
default: undefined
|
||||
},
|
||||
closeButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
severity: 'secondary',
|
||||
text: true,
|
||||
rounded: true
|
||||
};
|
||||
}
|
||||
},
|
||||
maximizeButtonProps: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
severity: 'secondary',
|
||||
text: true,
|
||||
rounded: true
|
||||
};
|
||||
}
|
||||
},
|
||||
_instance: null
|
||||
},
|
||||
|
|
|
|||
47
components/lib/dialog/Dialog.d.ts
vendored
47
components/lib/dialog/Dialog.d.ts
vendored
|
|
@ -9,6 +9,7 @@
|
|||
*/
|
||||
import { HTMLAttributes, TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { ButtonPassThroughOptions, ButtonProps } from '../button';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
|
||||
|
||||
|
|
@ -42,6 +43,20 @@ export interface DialogPassThroughMethodOptions<T> {
|
|||
global: object | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom shared passthrough(pt) option method.
|
||||
*/
|
||||
export interface DialogSharedPassThroughMethodOptions {
|
||||
/**
|
||||
* Defines valid properties.
|
||||
*/
|
||||
props: DialogProps;
|
||||
/**
|
||||
* Defines current inline state.
|
||||
*/
|
||||
state: DialogState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link DialogProps.pt}
|
||||
|
|
@ -64,21 +79,15 @@ export interface DialogPassThroughOptions<T = any> {
|
|||
*/
|
||||
icons?: DialogPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the maximizable button's DOM element.
|
||||
* Used to pass attributes to the maximizable Button component.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
maximizableButton?: DialogPassThroughOptionType<T>;
|
||||
maximizableButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the maximizable icon's DOM element.
|
||||
* Used to pass attributes to the close Button component.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
maximizableIcon?: DialogPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the close button's component.
|
||||
*/
|
||||
closeButton?: DialogPassThroughOptionType<T>;
|
||||
/**
|
||||
* Used to pass attributes to the close button icon's component.
|
||||
*/
|
||||
closeButtonIcon?: DialogPassThroughOptionType<T>;
|
||||
closeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
*/
|
||||
|
|
@ -178,7 +187,7 @@ export interface DialogProps {
|
|||
*/
|
||||
contentClass?: any;
|
||||
/**
|
||||
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
||||
* Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component.
|
||||
*/
|
||||
contentProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
|
|
@ -279,6 +288,18 @@ export interface DialogProps {
|
|||
* @deprecated since v3.27.0. Use 'minimizeicon' slot.
|
||||
*/
|
||||
minimizeIcon?: string | undefined;
|
||||
/**
|
||||
* Used to pass all properties of the ButtonProps to the Button component.
|
||||
* @type {ButtonProps}
|
||||
* @defaultValue { severity: 'secondary', rounded: true, text: true }
|
||||
*/
|
||||
closeButtonProps?: object | undefined;
|
||||
/**
|
||||
* Used to pass all properties of the ButtonProps to the Button component.
|
||||
* @type {ButtonProps}
|
||||
* @defaultValue { severity: 'secondary', rounded: true, text: true }
|
||||
*/
|
||||
maximizeButtonProps?: object | undefined;
|
||||
/**
|
||||
* It generates scoped CSS variables using design tokens for the component.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,38 +10,42 @@
|
|||
<span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
|
||||
</slot>
|
||||
<div :class="cx('icons')" v-bind="ptm('icons')">
|
||||
<button
|
||||
<Button
|
||||
v-if="maximizable"
|
||||
:ref="maximizableRef"
|
||||
v-ripple
|
||||
:autofocus="focusableMax"
|
||||
:class="cx('maximizableButton')"
|
||||
@click="maximize"
|
||||
type="button"
|
||||
:tabindex="maximizable ? '0' : '-1'"
|
||||
v-bind="ptm('maximizableButton')"
|
||||
:unstyled="unstyled"
|
||||
v-bind="maximizeButtonProps"
|
||||
:pt="ptm('maximizableButton')"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
<template #icon="slotProps">
|
||||
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="closable"
|
||||
:ref="closeButtonRef"
|
||||
v-ripple
|
||||
:autofocus="focusableClose"
|
||||
:class="cx('closeButton')"
|
||||
@click="close"
|
||||
:aria-label="closeAriaLabel"
|
||||
type="button"
|
||||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
:unstyled="unstyled"
|
||||
v-bind="closeButtonProps"
|
||||
:pt="ptm('closeButton')"
|
||||
data-pc-group-section="headericon"
|
||||
>
|
||||
<slot name="closeicon" :class="cx('closeButtonIcon')">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
<template #icon="slotProps">
|
||||
<slot name="closeicon" :class="cx('closeButtonIcon')">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
|
||||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
|
||||
|
|
@ -58,6 +62,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Button from 'primevue/button';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
|
||||
|
|
@ -258,10 +263,10 @@ export default {
|
|||
this.footerContainer = el;
|
||||
},
|
||||
maximizableRef(el) {
|
||||
this.maximizableButton = el;
|
||||
this.maximizableButton = el ? el.$el : undefined;
|
||||
},
|
||||
closeButtonRef(el) {
|
||||
this.closeButton = el;
|
||||
this.closeButton = el ? el.$el : undefined;
|
||||
},
|
||||
createStyle() {
|
||||
if (!this.styleElement && !this.isUnstyled) {
|
||||
|
|
@ -404,7 +409,8 @@ export default {
|
|||
focustrap: FocusTrap
|
||||
},
|
||||
components: {
|
||||
Portal: Portal,
|
||||
Button,
|
||||
Portal,
|
||||
WindowMinimizeIcon,
|
||||
WindowMaximizeIcon,
|
||||
TimesIcon
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue