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

New *ButtonProps properties added - I

pull/5677/head
tugcekucukoglu 2024-04-15 11:08:42 +03:00
parent b828f34a86
commit ddeaab525a
23 changed files with 543 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lib/carousel/BaseCarousel.vue
View File

@ -48,12 +48,16 @@ export default {
default: true
},
prevButtonProps: {
type: null,
default: null
type: Object,
default: () => {
return { severity: 'secondary', text: true, rounded: true };
}
},
nextButtonProps: {
type: null,
default: null
type: Object,
default: () => {
return { severity: 'secondary', text: true, rounded: true };
}
}
},
style: CarouselStyle,

41
components/lib/carousel/Carousel.d.ts vendored
View File

@ -7,8 +7,9 @@
* @module carousel
*
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -48,6 +49,20 @@ export interface CarouselPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface CarouselSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: CarouselProps;
/**
* Defines current inline state.
*/
state: CarouselState;
}
/**
* Custom passthrough(pt) options.
* @see {@link CarouselProps.pt}
@ -71,12 +86,9 @@ export interface CarouselPassThroughOptions {
container?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
previousButton?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the previous button icon's DOM element.
*/
previousButtonIcon?: CarouselPassThroughOptionType;
previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the items content's DOM element.
*/
@ -95,12 +107,9 @@ export interface CarouselPassThroughOptions {
item?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
nextButton?: CarouselPassThroughOptionType;
/**
* Used to pass attributes to the next button icon's DOM element.
*/
nextButtonIcon?: CarouselPassThroughOptionType;
nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the indicators's DOM element.
*/
@ -288,13 +297,15 @@ export interface CarouselProps {
*/
showIndicators?: boolean | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the previous navigation button.
* Used to pass attributes to the previous Button component.
* @defaultValue { severity: 'secondary', text: true, rounded: true }
*/
prevButtonProps?: ButtonHTMLAttributes | undefined;
prevButtonProps?: object | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the next navigation button.
* Used to pass attributes to the next Button component.
* @defaultValue { severity: 'secondary', text: true, rounded: true }
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
nextButtonProps?: object | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

31
components/lib/carousel/Carousel.vue
View File

@ -5,21 +5,23 @@
</div>
<div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
<button
<Button
v-if="showNavigators"
v-ripple
type="button"
:class="cx('previousButton')"
:disabled="backwardIsDisabled"
:aria-label="ariaPrevButtonLabel"
:unstyled="unstyled"
@click="navBackward"
v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
v-bind="prevButtonProps"
:pt="ptm('previousButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="previousicon">
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('previousButton')['icon']" />
</slot>
</button>
</template>
</Button>
<div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
<div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
@ -58,22 +60,23 @@
</template>
</div>
</div>
<button
<Button
v-if="showNavigators"
v-ripple
type="button"
:class="cx('nextButton')"
:disabled="forwardIsDisabled"
:aria-label="ariaNextButtonLabel"
:unstyled="unstyled"
@click="navForward"
v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
v-bind="nextButtonProps"
:pt="ptm('nextButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="nexticon">
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('nextButton')['icon']" />
</slot>
</button>
</template>
</Button>
</div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
@ -99,6 +102,7 @@
</template>
<script>
import Button from 'primevue/button';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
@ -637,6 +641,7 @@ export default {
}
},
components: {
Button,
ChevronRightIcon,
ChevronDownIcon,
ChevronLeftIcon,

20
components/lib/dialog/BaseDialog.vue
View File

@ -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
View File

@ -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.
*/

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

@ -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"
>
<template #icon="slotProps">
<slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
</slot>
</button>
<button
</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"
>
<template #icon="slotProps">
<slot name="closeicon" :class="cx('closeButtonIcon')">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
</slot>
</button>
</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

10
components/lib/panel/BasePanel.vue
View File

@ -10,8 +10,14 @@ export default {
toggleable: Boolean,
collapsed: Boolean,
toggleButtonProps: {
type: null,
default: null
type: Object,
default: () => {
return {
severity: 'secondary',
text: true,
rounded: true
};
}
}
},
style: PanelStyle,

30
components/lib/panel/Panel.d.ts vendored
View File

@ -7,8 +7,9 @@
* @module panel
*
*/
import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -46,6 +47,20 @@ export interface PanelPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface PanelSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: PanelProps;
/**
* Defines current inline state.
*/
state: PanelState;
}
/**
* Custom toggle event.
* @see {@link PanelEmits.toggle}
@ -83,13 +98,10 @@ export interface PanelPassThroughOptions {
*/
icons?: PanelPassThroughOptionType;
/**
* Used to pass attributes to the toggler's DOM element.
* Used to pass attributes to the toggler button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
toggler?: PanelPassThroughOptionType;
/**
* Used to pass attributes to the togglericon's DOM element.
*/
togglerIcon?: PanelPassThroughOptionType;
toggler?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the toggleablecontent's DOM element.
*/
@ -151,9 +163,9 @@ export interface PanelProps {
collapsed?: boolean;
/**
* Used to pass the custom value to read for the button inside the component.
* @deprecated since v3.26.0. Use 'pt' property instead.
* @defaultValue { severity: 'secondary', text: true, rounded: true }
*/
toggleButtonProps?: ButtonHTMLAttributes | undefined;
toggleButtonProps?: object | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

19
components/lib/panel/Panel.vue
View File

@ -6,24 +6,25 @@
</slot>
<div :class="cx('icons')" v-bind="ptm('icons')">
<slot name="icons"></slot>
<button
<Button
v-if="toggleable"
:id="id + '_header'"
v-ripple
type="button"
role="button"
:class="cx('toggler')"
:aria-label="buttonAriaLabel"
:aria-controls="id + '_content'"
:aria-expanded="!d_collapsed"
:unstyled="unstyled"
@click="toggle"
@keydown="onKeyDown"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
v-bind="toggleButtonProps"
:pt="ptm('toggler')"
>
<template #icon="slotProps">
<slot name="togglericon" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('togglericon')" />
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggler')['icon']" />
</slot>
</button>
</template>
</Button>
</div>
</div>
<transition name="p-toggleable-content" v-bind="ptm('transition')">
@ -40,6 +41,7 @@
</template>
<script>
import Button from 'primevue/button';
import MinusIcon from 'primevue/icons/minus';
import PlusIcon from 'primevue/icons/plus';
import Ripple from 'primevue/ripple';
@ -91,7 +93,8 @@ export default {
},
components: {
PlusIcon,
MinusIcon
MinusIcon,
Button
},
directives: {
ripple: Ripple

6
components/lib/scrolltop/BaseScrollTop.vue
View File

@ -21,6 +21,12 @@ export default {
behavior: {
type: String,
default: 'smooth'
},
buttonProps: {
type: Object,
default: () => {
return { severity: 'secondary' };
}
}
},
style: ScrollTopStyle,

31
components/lib/scrolltop/ScrollTop.d.ts vendored
View File

@ -9,6 +9,7 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions, ButtonProps } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -46,19 +47,35 @@ export interface ScrollTopPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface ScrollTopSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ScrollTopProps;
/**
* Defines current inline state.
*/
state: ScrollTopState;
}
/**
* Custom passthrough(pt) options.
* @see {@link ScrollTopProps.pt}
*/
export interface ScrollTopPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
root?: ScrollTopPassThroughOptionType;
root?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the icon's DOM element.
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
icon?: ScrollTopPassThroughOptionType;
button?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -112,6 +129,12 @@ export interface ScrollTopProps {
* @defaultValue smooth
*/
behavior?: string | undefined;
/**
* Used to pass all properties of the ButtonProps to the Button component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary', rounded: true }
*/
buttonProps?: object | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

21
components/lib/scrolltop/ScrollTop.vue
View File

@ -1,16 +1,20 @@
<template>
<transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptmi('root')">
<Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="rootPTOptions()">
<template #icon="slotProps">
<slot name="icon" :class="cx('icon')">
<component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
<component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="iconPTOptions" />
</slot>
</button>
</template>
</Button>
</transition>
</template>
<script>
import Button from 'primevue/button';
import ChevronUpIcon from 'primevue/icons/chevronup';
import { DomHandler, ZIndexUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseScrollTop from './BaseScrollTop.vue';
export default {
@ -83,7 +87,13 @@ export default {
ZIndexUtils.clear(el);
},
containerRef(el) {
this.container = el;
this.container = el ? el.$el : undefined;
},
rootPTOptions() {
return mergeProps(this.ptmi('root'), this.ptm('button'));
},
iconPTOptions() {
return mergeProps(this.ptmi('root')['icon'], this.ptm('button')['icon']);
}
},
computed: {
@ -92,7 +102,8 @@ export default {
}
},
components: {
ChevronUpIcon
ChevronUpIcon,
Button
}
};
</script>

6
components/lib/sidebar/BaseSidebar.vue
View File

@ -34,6 +34,12 @@ export default {
type: Boolean,
default: true
},
closeButtonProps: {
type: Object,
default: () => {
return { severity: 'secondary', text: true, rounded: true };
}
},
closeIcon: {
type: String,
default: undefined

29
components/lib/sidebar/Sidebar.d.ts vendored
View File

@ -9,6 +9,7 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -46,6 +47,20 @@ export interface SidebarPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface SidebarSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: SidebarProps;
/**
* Defines current inline state.
*/
state: SidebarState;
}
/**
* Custom passthrough(pt) options.
* @see {@link SidebarProps.pt}
@ -64,13 +79,10 @@ export interface SidebarPassThroughOptions {
*/
title?: SidebarPassThroughOptionType;
/**
* Used to pass attributes to the close button's DOM element.
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: SidebarPassThroughOptionType;
/**
* Used to pass attributes to the close icon's DOM element.
*/
closeIcon?: SidebarPassThroughOptionType;
toggler?: ButtonPassThroughOptions<SidebarSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/
@ -146,6 +158,11 @@ export interface SidebarProps {
* @defaultValue true
*/
showCloseIcon?: boolean | undefined;
/**
* Used to pass the custom value to read for the button inside the component.
* @defaultValue { severity: 'secondary', text: true, rounded: true }
*/
closeButtonProps?: object | undefined;
/**
* Icon to display in the sidebar close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.

25
components/lib/sidebar/Sidebar.vue
View File

@ -9,11 +9,24 @@
<slot name="header" :class="cx('title')">
<div v-if="header" :class="cx('title')" v-bind="ptm('title')">{{ header }}</div>
</slot>
<button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
<Button
v-if="showCloseIcon"
:ref="closeButtonRef"
type="button"
:class="cx('closeButton')"
:aria-label="closeAriaLabel"
:unstyled="unstyled"
@click="hide"
v-bind="closeButtonProps"
:pt="ptm('closeButton')"
data-pc-group-section="iconcontainer"
>
<template #icon="slotProps">
<slot name="closeicon" :class="cx('closeIcon')">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
</slot>
</button>
</template>
</Button>
</div>
<div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
@ -26,6 +39,7 @@
</template>
<script>
import Button from 'primevue/button';
import FocusTrap from 'primevue/focustrap';
import TimesIcon from 'primevue/icons/times';
import Portal from 'primevue/portal';
@ -155,7 +169,7 @@ export default {
this.headerContainer = el;
},
closeButtonRef(el) {
this.closeButton = el;
this.closeButton = el ? el.$el : undefined;
},
bindDocumentKeyDownListener() {
if (!this.documentKeydownListener) {
@ -203,7 +217,8 @@ export default {
ripple: Ripple
},
components: {
Portal: Portal,
Button,
Portal,
TimesIcon
}
};

5
components/lib/themes/primeone/base/carousel/index.js
View File

@ -26,6 +26,11 @@ export default {
flex-direction: row;
}
.p-carousel-prev-button,
.p-carousel-next-button {
align-self: center;
}
.p-carousel-indicators {
display: flex;
flex-direction: row;

2
components/lib/themes/primeone/base/toast/index.js
View File

@ -55,7 +55,7 @@ export default {
margin: -25% 0 0 0;
right: -25%;
padding: 0;
border: none
border: none;
user-select: none;
}

6
components/lib/toast/BaseToast.vue
View File

@ -47,8 +47,10 @@ export default {
default: undefined
},
closeButtonProps: {
type: null,
default: null
type: Object,
default: () => {
return {};
}
}
},
style: ToastStyle,

39
components/lib/toast/Toast.d.ts vendored
View File

@ -7,8 +7,9 @@
* @module toast
*
*/
import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -46,6 +47,20 @@ export interface ToastPassThroughMethodOptions {
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface ToastSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ToastProps;
/**
* Defines current inline state.
*/
state: ToastState;
}
/**
* Custom passthrough(pt) options.
* @see {@link ToastProps.pt}
@ -88,19 +103,17 @@ export interface ToastPassThroughOptions {
*/
buttonContainer?: ToastPassThroughOptionType;
/**
* /**
* Used to pass attributes to the button's DOM element.
* @deprecated since v3.30.2. Use 'closeButton' option.
* @see {@link ButtonPassThroughOptions}
*/
button?: ToastPassThroughOptionType;
button?: ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the button's DOM element.
* /**
* Used to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the button icon's DOM element.
* @deprecated since v3.30.2. Use 'closeIcon' option.
*/
buttonIcon?: ToastPassThroughOptionType;
closeButton?: ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the button icon's DOM element.
*/
@ -242,10 +255,10 @@ export interface ToastProps {
*/
successIcon?: string | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the close button.
* @deprecated since v3.26.0. Use 'pt' property.
* Used to pass attributes to the close Button component.
* @defaultValue {}
*/
closeButtonProps?: ButtonHTMLAttributes | undefined;
closeButtonProps?: object | undefined;
/**
* Used to access message options.
* @type {ToastMessageOptions}

10
components/lib/toast/ToastMessage.vue
View File

@ -11,9 +11,11 @@
</template>
<component v-else :is="templates.message" :message="message"></component>
<div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
<button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }">
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
</button>
<Button :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus :unstyled="unstyled" v-bind="closeButtonProps" :pt="{ ...ptm('button'), ...ptm('closeButton') }">
<template #icon="slotProps">
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="{ ...ptm('buttonIcon')['icon'], ...ptm('closeIcon')['icon'] }" />
</template>
</Button>
</div>
</div>
</div>
@ -21,6 +23,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
@ -107,6 +110,7 @@ export default {
}
},
components: {
Button,
TimesIcon: TimesIcon,
InfoCircleIcon: InfoCircleIcon,
CheckIcon: CheckIcon,

327
doc/common/apidoc/index.json
View File

@ -9455,6 +9455,29 @@
],
"methods": []
},
"CarouselSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "CarouselProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "CarouselState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"CarouselPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "CarouselProps.pt",
@ -9495,18 +9518,10 @@
"name": "previousButton",
"optional": true,
"readonly": false,
"type": "CarouselPassThroughOptionType",
"type": "ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the previous button's DOM element."
},
{
"name": "previousButtonIcon",
"optional": true,
"readonly": false,
"type": "CarouselPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the previous button icon's DOM element."
},
{
"name": "itemsContent",
"optional": true,
@ -9543,18 +9558,10 @@
"name": "nextButton",
"optional": true,
"readonly": false,
"type": "CarouselPassThroughOptionType",
"type": "ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the next button's DOM element."
},
{
"name": "nextButtonIcon",
"optional": true,
"readonly": false,
"type": "CarouselPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the next button icon's DOM element."
},
{
"name": "indicators",
"optional": true,
@ -9871,17 +9878,17 @@
"name": "prevButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonHTMLAttributes",
"type": "object",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the previous navigation button."
"description": "Used to pass attributes to the previous Button component."
},
{
"name": "nextButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonHTMLAttributes",
"type": "object",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the next navigation button."
"description": "Used to pass attributes to the next Button component."
},
{
"name": "dt",
@ -22447,6 +22454,29 @@
],
"methods": []
},
"DialogSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "DialogProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "DialogState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"DialogPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "DialogProps.pt",
@ -22487,33 +22517,17 @@
"name": "maximizableButton",
"optional": true,
"readonly": false,
"type": "DialogPassThroughOptionType<T>",
"type": "ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the maximizable button's DOM element."
},
{
"name": "maximizableIcon",
"optional": true,
"readonly": false,
"type": "DialogPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the maximizable icon's DOM element."
"description": "Used to pass attributes to the maximizable Button component."
},
{
"name": "closeButton",
"optional": true,
"readonly": false,
"type": "DialogPassThroughOptionType<T>",
"type": "ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the close button's component."
},
{
"name": "closeButtonIcon",
"optional": true,
"readonly": false,
"type": "DialogPassThroughOptionType<T>",
"default": "",
"description": "Used to pass attributes to the close button icon's component."
"description": "Used to pass attributes to the close Button component."
},
{
"name": "content",
@ -22665,7 +22679,7 @@
"readonly": false,
"type": "HTMLAttributes",
"default": "",
"description": "Used to pass all properties of the HTMLDivElement to the overlay panel inside the component."
"description": "Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component."
},
{
"name": "rtl",
@ -22830,6 +22844,22 @@
"description": "Icon to display in the dialog maximize button when dialog is minimized.",
"deprecated": "since v3.27.0. Use 'minimizeicon' slot."
},
{
"name": "closeButtonProps",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Used to pass all properties of the ButtonProps to the Button component."
},
{
"name": "maximizeButtonProps",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Used to pass all properties of the ButtonProps to the Button component."
},
{
"name": "dt",
"optional": true,
@ -30049,14 +30079,6 @@
"default": "",
"description": "Used to pass attributes to the content's DOM element."
},
{
"name": "closeButton",
"optional": true,
"readonly": false,
"type": "ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the Button component."
},
{
"name": "hooks",
"optional": true,
@ -30100,14 +30122,6 @@
"description": "Defines valid properties in Inplace component.",
"relatedProp": "",
"props": [
{
"name": "closable",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Displays a button to switch back to display mode."
},
{
"name": "active",
"optional": true,
@ -30141,14 +30155,6 @@
"default": "",
"description": "Used to pass all properties of the HTMLDivElement to display container."
},
{
"name": "closeButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonHTMLAttributes",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the close button."
},
{
"name": "dt",
"optional": true,
@ -30197,15 +30203,16 @@
},
{
"name": "content",
"parameters": [],
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close message function.</span>\n}",
"description": "container slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom content template."
},
{
"name": "closeicon",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom close icon template."
}
]
},
@ -41533,6 +41540,29 @@
],
"methods": []
},
"PanelSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "PanelProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "PanelState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"PanelToggleEvent": {
"description": "Custom toggle event.",
"relatedProp": "PanelEmits.toggle",
@ -41596,17 +41626,9 @@
"name": "toggler",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"type": "ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the toggler's DOM element."
},
{
"name": "togglerIcon",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the togglericon's DOM element."
"description": "Used to pass attributes to the toggler button's DOM element."
},
{
"name": "toggleableContent",
@ -41711,10 +41733,9 @@
"name": "toggleButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonHTMLAttributes",
"type": "object",
"default": "",
"description": "Used to pass the custom value to read for the button inside the component.",
"deprecated": "since v3.26.0. Use 'pt' property instead."
"description": "Used to pass the custom value to read for the button inside the component."
},
{
"name": "dt",
@ -46812,6 +46833,29 @@
],
"methods": []
},
"ScrollTopSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "ScrollTopProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "ScrollTopState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"ScrollTopPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "ScrollTopProps.pt",
@ -46820,17 +46864,17 @@
"name": "root",
"optional": true,
"readonly": false,
"type": "ScrollTopPassThroughOptionType",
"type": "ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the root's DOM element."
"description": "Used to pass attributes to the previous button's DOM element."
},
{
"name": "icon",
"name": "button",
"optional": true,
"readonly": false,
"type": "ScrollTopPassThroughOptionType",
"type": "ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the icon's DOM element."
"description": "Used to pass attributes to the previous button's DOM element."
},
{
"name": "hooks",
@ -46916,6 +46960,14 @@
"default": "smooth",
"description": "Defines the scrolling behaviour, 'smooth' adds an animation and 'auto' scrolls with a jump."
},
{
"name": "buttonProps",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Used to pass all properties of the ButtonProps to the Button component."
},
{
"name": "dt",
"optional": true,
@ -47584,6 +47636,29 @@
],
"methods": []
},
"SidebarSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "SidebarProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "SidebarState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"SidebarPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "SidebarProps.pt",
@ -47613,20 +47688,12 @@
"description": "Used to pass attributes to the header content's DOM element."
},
{
"name": "closeButton",
"name": "toggler",
"optional": true,
"readonly": false,
"type": "SidebarPassThroughOptionType",
"type": "ButtonPassThroughOptions<SidebarSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the close button's DOM element."
},
{
"name": "closeIcon",
"optional": true,
"readonly": false,
"type": "SidebarPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the close icon's DOM element."
"description": "Used to pass attributes to the previous button's DOM element."
},
{
"name": "content",
@ -47751,6 +47818,14 @@
"default": "true",
"description": "Whether to display a close icon inside the panel."
},
{
"name": "closeButtonProps",
"optional": true,
"readonly": false,
"type": "object",
"default": "",
"description": "Used to pass the custom value to read for the button inside the component."
},
{
"name": "closeIcon",
"optional": true,
@ -55412,6 +55487,29 @@
],
"methods": []
},
"ToastSharedPassThroughMethodOptions": {
"description": "Custom shared passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "ToastProps",
"default": "",
"description": "Defines valid properties."
},
{
"name": "state",
"optional": false,
"readonly": false,
"type": "ToastState",
"default": "",
"description": "Defines current inline state."
}
],
"methods": []
},
"ToastPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "ToastProps.pt",
@ -55492,27 +55590,17 @@
"name": "button",
"optional": true,
"readonly": false,
"type": "ToastPassThroughOptionType",
"type": "ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the button's DOM element.",
"deprecated": "since v3.30.2. Use 'closeButton' option."
"description": "/**\nUsed to pass attributes to the button's DOM element."
},
{
"name": "closeButton",
"optional": true,
"readonly": false,
"type": "ToastPassThroughOptionType",
"type": "ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>",
"default": "",
"description": "Used to pass attributes to the button's DOM element."
},
{
"name": "buttonIcon",
"optional": true,
"readonly": false,
"type": "ToastPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the button icon's DOM element.",
"deprecated": "since v3.30.2. Use 'closeIcon' option."
"description": "/**\nUsed to pass attributes to the close button's DOM element."
},
{
"name": "closeIcon",
@ -55746,10 +55834,9 @@
"name": "closeButtonProps",
"optional": true,
"readonly": false,
"type": "ButtonHTMLAttributes",
"type": "object",
"default": "",
"description": "Used to pass all properties of the HTMLButtonElement to the close button.",
"deprecated": "since v3.26.0. Use 'pt' property."
"description": "Used to pass attributes to the close Button component."
},
{
"name": "message",

16
doc/panel/TemplateDoc.vue
View File

@ -20,9 +20,7 @@
</div>
</template>
<template #icons>
<button class="p-panel-header-icon p-link mr-2" @click="toggle">
<span class="pi pi-cog"></span>
</button>
<Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
<Menu ref="menu" id="config_menu" :model="items" popup />
</template>
<p class="m-0">
@ -74,9 +72,7 @@ export default {
</div>
</template>
<template #icons>
<button class="p-panel-header-icon p-link mr-2" @click="toggle">
<span class="pi pi-cog"></span>
</button>
<Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
<Menu ref="menu" id="config_menu" :model="items" popup />
</template>
<p class="m-0">
@ -106,9 +102,7 @@ export default {
</div>
</template>
<template #icons>
<button class="p-panel-header-icon p-link mr-2" @click="toggle">
<span class="pi pi-cog"></span>
</button>
<Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
<Menu ref="menu" id="config_menu" :model="items" popup />
</template>
<p class="m-0">
@ -174,9 +168,7 @@ export default {
</div>
</template>
<template #icons>
<button class="p-panel-header-icon p-link mr-2" @click="toggle">
<span class="pi pi-cog"></span>
</button>
<Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
<Menu ref="menu" id="config_menu" :model="items" popup />
</template>
<p class="m-0">

16
doc/scrolltop/ElementDoc.vue
View File

@ -16,9 +16,9 @@
:threshold="100"
icon="pi pi-arrow-up"
:pt="{
button: {
root: 'w-2rem h-2rem border-round-sm bg-primary',
icon: {
class: 'text-base w-1rem h-1rem'
icon: 'text-base w-1rem h-1rem'
}
}"
/>
@ -46,9 +46,9 @@ export default {
:threshold="100"
icon="pi pi-arrow-up"
:pt="{
button: {
root: 'w-2rem h-2rem border-round-sm bg-primary',
icon: {
class: 'text-base w-1rem h-1rem'
icon: 'text-base w-1rem h-1rem'
}
}"
/>
@ -70,9 +70,9 @@ export default {
:threshold="100"
icon="pi pi-arrow-up"
:pt="{
button: {
root: 'w-2rem h-2rem border-round-sm bg-primary',
icon: {
class: 'text-base w-1rem h-1rem'
icon: 'text-base w-1rem h-1rem'
}
}"
/>
@ -96,9 +96,9 @@ export default {
:threshold="100"
icon="pi pi-arrow-up"
:pt="{
button: {
root: 'w-2rem h-2rem border-round-sm bg-primary',
icon: {
class: 'text-base w-1rem h-1rem'
icon: 'text-base w-1rem h-1rem'
}
}"
/>