vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'master' into PV4113

Browse source
This commit is contained in:
Melloware 2023-09-05 07:43:18 -04:00 • committed by GitHub
commit f93b31747e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1459 changed files with 45002 additions and 14606 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/lib/accordion/Accordion.d.ts vendored
View file

@ -10,17 +10,31 @@
import { VNode } from 'vue';
import { AccordionTabPassThroughOptionType } from '../accordiontab';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: AccordionProps;
/**
* Defines current inline state.
*/
state: AccordionState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom tab open event.
@ -58,15 +72,20 @@ export interface AccordionClickEvent extends AccordionTabOpenEvent {}
*/
export interface AccordionPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: AccordionPassThroughOptionType;
/**
* Uses to pass attributes to AccordionTab helper components.
* Used to pass attributes to AccordionTab helper components.
* @deprecated since v3.30.1. Use 'accordiontab' property instead.
*/
tab?: AccordionTabPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to pass attributes to AccordionTab helper components.
*/
accordiontab?: AccordionTabPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -131,10 +150,15 @@ export interface AccordionProps {
*/
selectOnFocus?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
pt?: PassThrough<AccordionPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

21
components/lib/accordion/Accordion.spec.js
View file

@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
import { expect, it } from 'vitest';
import AccordionTab from '../accordiontab/AccordionTab.vue';
import Accordion from './Accordion.vue';
vi.mock('primevue/utils');
describe('Accordion.vue', () => {
let wrapper;
@ -151,23 +151,4 @@ describe('Accordion.vue', () => {
expect(findNextHeaderActionSpy).toHaveBeenCalled();
expect(onTabHomeKeySpy).toHaveBeenCalled();
});
it('When changeFocusedTab triggered and selectOnFocus is true changeActiveIndex should be triggered with valid parameters', async () => {
await wrapper.setProps({ selectOnFocus: true });
const changeActiveIndexSpy = vi.spyOn(wrapper.vm, 'changeActiveIndex');
const event = {};
const element = {
parentElement: {
parentElement: {
dataset: {
index: 0
}
}
}
};
await wrapper.vm.changeFocusedTab(event, element);
expect(changeActiveIndexSpy).toHaveBeenCalledWith({}, wrapper.vm.tabs[0], 0);
});
});

5
components/lib/accordion/Accordion.vue
View file

@ -27,7 +27,7 @@
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
<transition name="p-toggleable-content">
<transition name="p-toggleable-content" v-bind="getTabPT(tab, 'transition', i)">
<div
v-if="lazy ? isTabActive(i) : true"
v-show="lazy ? true : isTabActive(i)"
@ -52,6 +52,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseAccordion from './BaseAccordion.vue';
export default {
@ -111,7 +112,7 @@ export default {
}
};
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) };
return mergeProps(this.ptm(`tab.${key}`, { tab: tabMetaData }), this.ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), this.ptm(`accordiontab.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
},
onTabClick(event, tab, index) {
this.changeActiveIndex(event, tab, index);

61
components/lib/accordiontab/AccordionTab.d.ts vendored
View file

@ -7,20 +7,39 @@
* @module accordiontab
*
*/
import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { AccordionPassThroughOptions } from '../accordion';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes) | null | undefined;
export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes | string) | string | null | undefined;
export declare type AccordionTabPassThroughTransitionType = TransitionProps | ((options: AccordionTabPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionTabPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: AccordionTabProps;
/**
* Defines parent instance.
*/
parent: AccordionPassThroughOptions;
/**
* Defines current options.
*/
context: AccordionTabContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -29,33 +48,37 @@ export interface AccordionTabPassThroughMethodOptions {
*/
export interface AccordionTabPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headeraction's DOM element.
* Used to pass attributes to the headeraction's DOM element.
*/
headerAction?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headericon's DOM element.
* Used to pass attributes to the headericon's DOM element.
*/
headerIcon?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headertitle's DOM element.
* Used to pass attributes to the headertitle's DOM element.
*/
headerTitle?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the toggleablecontent's DOM element.
* Used to pass attributes to the toggleablecontent's DOM element.
*/
toggleableContent?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: AccordionTabPassThroughOptionType;
/**
* Used to control Vue Transition API.
*/
transition?: AccordionTabPassThroughTransitionType;
}
/**
@ -82,12 +105,12 @@ export interface AccordionTabProps {
*/
headerClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab header.
* Used to pass all properties of the HTMLDivElement to the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerProps?: HTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
* Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerActionProps?: AnchorHTMLAttributes | undefined;
@ -100,7 +123,7 @@ export interface AccordionTabProps {
*/
contentClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab content.
* Used to pass all properties of the HTMLDivElement to the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentProps?: HTMLAttributes | undefined;
@ -110,10 +133,15 @@ export interface AccordionTabProps {
*/
disabled?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {AccordionTabPassThroughOptions}
*/
pt?: AccordionTabPassThroughOptions;
pt?: PassThrough<AccordionTabPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
}
/**
@ -165,8 +193,9 @@ export interface AccordionTabSlots {
index: number;
/**
* Whether the tab is active
* @param {number} index - Index of the tab
*/
isTabActive(i: number): void;
isTabActive: (index: number) => void;
}): VNode[];
}

105
components/lib/autocomplete/AutoComplete.d.ts vendored
View file

@ -7,22 +7,41 @@
* @module autocomplete
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes) | null | undefined;
export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes | string) | string | null | undefined;
export declare type AutoCompletePassThroughTransitionType = TransitionProps | ((options: AutoCompletePassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AutoCompletePassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: AutoCompleteProps;
/**
* Defines current inline state.
*/
state: AutoCompleteState;
/**
* Defines current options.
*/
context: AutoCompleteContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -98,79 +117,83 @@ export interface AutoCompleteCompleteEvent {
*/
export interface AutoCompletePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
* Used to pass attributes to the container's DOM element.
*/
container?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the token's DOM element.
* Used to pass attributes to the token's DOM element.
*/
token?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the token label's DOM element.
* Used to pass attributes to the token label's DOM element.
*/
tokenLabel?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the remove token icon's DOM element.
* Used to pass attributes to the remove token icon's DOM element.
*/
removeTokenIcon?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the input token's DOM element.
* Used to pass attributes to the input token's DOM element.
*/
inputToken?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
*/
dropdownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel's DOM element.
*/
panel?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the VirtualScroller component.
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
*/
virtualScroller?: VirtualScrollerPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
list?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the item group's DOM element.
* Used to pass attributes to the item group's DOM element.
*/
itemGroup?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
* Used to pass attributes to the item's DOM element.
*/
item?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the empty message's DOM element.
* Used to pass attributes to the empty message's DOM element.
*/
emptyMessage?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the search result message's DOM element.
* Used to pass attributes to the search result message's DOM element.
*/
searchResultMessage?: AutoCompletePassThroughOptionType;
/**
* Uses to pass attributes to the selected message's DOM element.
* Used to pass attributes to the selected message's DOM element.
*/
selectedMessage?: AutoCompletePassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: AutoCompletePassThroughTransitionType;
}
/**
@ -299,6 +322,11 @@ export interface AutoCompleteProps {
* Default text to display when no option is selected.
*/
placeholder?: string | undefined;
/**
* Whether the autocomplete is in loading state.
* @defaultValue false
*/
loading?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
@ -347,7 +375,7 @@ export interface AutoCompleteProps {
*/
inputClass?: string | object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
@ -359,7 +387,7 @@ export interface AutoCompleteProps {
*/
panelClass?: string | object | undefined;
/**
* Uses 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 panel inside the component.
*/
panelProps?: HTMLAttributes | undefined;
/**
@ -433,10 +461,15 @@ export interface AutoCompleteProps {
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {AutoCompletePassThroughOptions}
*/
pt?: AutoCompletePassThroughOptions;
pt?: PassThrough<AutoCompletePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -536,7 +569,7 @@ export interface AutoCompleteSlots {
index: number;
}): VNode[];
/**
* Custom panel template.
* Custom content template.
* @param {Object} scope - content slot's params.
*/
content(scope: {
@ -552,13 +585,13 @@ export interface AutoCompleteSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -592,14 +625,24 @@ export interface AutoCompleteSlots {
*/
class: string;
/**
* Remove token icon function.
* Index of the token.
*/
onClick: void;
index: number;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
onClick: (event: Event, index: number) => void;
}): VNode[];
/**
* Custom loading icon template.
*/
loadingicon(): VNode[];
loadingicon(scope: {
/**
* Style class of the loading icon.
*/
class: string;
}): VNode[];
}
/**

15
components/lib/autocomplete/AutoComplete.spec.js
View file

@ -55,6 +55,21 @@ describe('AutoComplete.vue', () => {
expect(wrapper.findAll('.p-autocomplete-item').length).toBe(1);
});
it('should show overlay and empty-message if there are no suggestions', async () => {
const event = { target: { value: 'b' } };
wrapper.vm.search(event, event.target.value, 'input');
await wrapper.vm.$nextTick();
await wrapper.setProps({
suggestions: []
});
expect(wrapper.find('.p-autocomplete-items').exists()).toBe(true);
expect(wrapper.findAll('.p-autocomplete-item').length).toBe(0);
expect(wrapper.find('.p-autocomplete-empty-message').exists()).toBe(true);
});
it('dropdown', () => {
it('should have correct custom icon', async () => {
wrapper.setProps({

12
components/lib/autocomplete/AutoComplete.vue
View file

@ -55,8 +55,8 @@
<slot name="chip" :value="option">
<span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
</slot>
<slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx(removeTokenIcon), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeOption(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
@ -87,7 +87,7 @@
/>
</li>
</ul>
<slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
<slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon">
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
@ -114,7 +114,7 @@
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div
v-if="overlayVisible"
:ref="overlayRef"
@ -215,7 +215,7 @@ export default {
},
suggestions() {
if (this.searching) {
ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide();
this.show();
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.searching = false;
}
@ -477,7 +477,7 @@ export default {
}
},
onContainerClick(event) {
if (this.disabled || this.searching || this.isInputClicked(event) || this.isDropdownClicked(event)) {
if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
return;
}

4
components/lib/autocomplete/BaseAutoComplete.vue
View file

@ -187,6 +187,10 @@ export default {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false

39
components/lib/avatar/Avatar.d.ts vendored
View file

@ -9,17 +9,31 @@
import { VNode } from 'vue';
import { AvatarGroupPassThroughOptions } from '../avatargroup';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AvatarPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: AvatarProps;
/**
* Defines parent instance.
*/
parent: AvatarGroupPassThroughOptions;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -35,23 +49,23 @@ export interface AvatarPassThroughAttributes {
*/
export interface AvatarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: AvatarPassThroughOptionType;
/**
* Uses to pass attributes to the image's DOM element.
* Used to pass attributes to the image's DOM element.
*/
image?: AvatarPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -93,10 +107,15 @@ export interface AvatarProps {
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {AvatarPassThroughOptions}
*/
pt?: AvatarPassThroughOptions;
pt?: PassThrough<AvatarPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -125,7 +144,7 @@ export interface AvatarEmits {
/**
* Triggered when an error occurs while loading an image file.
*/
error(): void;
error(event: Event): void;
}
/**

4
components/lib/avatar/Avatar.vue
View file

@ -17,8 +17,8 @@ export default {
extends: BaseAvatar,
emits: ['error'],
methods: {
onError() {
this.$emit('error');
onError(event) {
this.$emit('error', event);
},
getPTOptions(key) {
return this.ptm(key, {

16
components/lib/avatargroup/AvatarGroup.d.ts vendored
View file

@ -8,7 +8,8 @@
*
*/
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
@ -25,11 +26,11 @@ export interface AvatarGroupPassThroughAttributes {
*/
export interface AvatarGroupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: AvatarGroupPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -40,10 +41,15 @@ export interface AvatarGroupPassThroughOptions {
*/
export interface AvatarGroupProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {AvatarGroupPassThroughOptions}
*/
pt?: AvatarGroupPassThroughOptions;
pt?: PassThrough<AvatarGroupPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

28
components/lib/badge/Badge.d.ts vendored
View file

@ -9,16 +9,27 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes) | null | undefined;
export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BadgePassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: BadgeProps;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -34,11 +45,11 @@ export interface BadgePassThroughAttributes {
*/
export interface BadgePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: BadgePassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -61,10 +72,15 @@ export interface BadgeProps {
*/
size?: 'large' | 'xlarge' | null | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {BadgePassThroughOptions}
*/
pt?: BadgePassThroughOptions;
pt?: PassThrough<BadgePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

10
components/lib/badge/Badge.spec.js
View file

@ -22,14 +22,4 @@ describe('Badge.vue', () => {
expect(wrapper.vm.containerClass).not.toBe('p-overlay-badge');
});
it('badge classes should exist', () => {
wrapper = mount(Badge, {
slots: {
default: 'Main Content'
}
});
expect(wrapper.vm.containerClass).toBe('p-overlay-badge');
});
});

62
components/lib/badgedirective/BadgeDirective.d.ts vendored
View file

@ -8,18 +8,36 @@
*/
import { DirectiveBinding, ObjectDirective } from 'vue';
import { DirectiveHooks } from '../basedirective';
import { PassThroughOptions } from '../passthrough';
import { PassThrough } from '../ts-helpers';
export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | null | undefined;
export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BadgePassThroughMethodOptions {
context: BadgeContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Defines options of Badge.
*/
export interface BadgeDirectiveOptions {
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {BadgeDirectivePassThroughOptions}
*/
pt?: BadgeDirectivePassThroughOptions;
pt?: PassThrough<BadgeDirectivePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -33,11 +51,11 @@ export interface BadgeDirectiveOptions {
*/
export interface BadgeDirectivePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: BadgeDirectivePassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseDirective.DirectiveHooks}
*/
hooks?: DirectiveHooks;
@ -50,6 +68,40 @@ export interface BadgeDirectivePassThroughAttributes {
[key: string]: any;
}
/**
* Defines current options in Badge directive.
*/
export interface BadgeContext {
/**
* Current info state as a boolean.
* @defaultValue true
*/
info: boolean;
/**
* Current success state as a boolean.
* @defaultValue false
*/
success: boolean;
/**
* Current warning state as a boolean.
* @defaultValue false
*/
warning: boolean;
/**
* Current danger state as a boolean.
* @defaultValue false
*/
danger: boolean;
/**
* Current gutter state as a boolean.
*/
nogutter: boolean;
/**
* Current dot state as a boolean.
*/
dot: boolean;
}
/**
* Defines modifiers of Badge directive.
*/

8
components/lib/badgedirective/BadgeDirective.js
View file

@ -10,7 +10,13 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
const badge = DomHandler.createElement('span', {
id,
class: !el.unstyled && this.cx('root'),
'p-bind': this.ptm('root')
'p-bind': this.ptm('root', {
context: {
...binding.modifiers,
nogutter: String(binding.value).length === 1,
dot: binding.value == null
}
})
});
el.$_pbadgeId = badge.getAttribute('id');

16
components/lib/basecomponent/BaseComponent.d.ts vendored
View file

@ -1,12 +1,12 @@
export interface ComponentHooks {
beforeCreate?(): void;
created?(): void;
beforeMount?(): void;
mounted?(): void;
beforeUpdate?(): void;
updated?(): void;
beforeUnmount?(): void;
unmounted?(): void;
onBeforeCreate?(): void;
onCreated?(): void;
onBeforeMount?(): void;
onMounted?(): void;
onBeforeUpdate?(): void;
onUpdated?(): void;
onBeforeUnmount?(): void;
onUnmounted?(): void;
}
export interface BaseComponentPassThroughOptions {

177
components/lib/basecomponent/BaseComponent.vue
View file

@ -8,7 +8,6 @@ const inlineStyles = {};
const buttonStyles = `
.p-button {
margin: 0;
display: inline-flex;
cursor: pointer;
user-select: none;
@ -53,7 +52,7 @@ const buttonStyles = `
margin: 0;
}
.p-buttonset .p-button:not(:last-child) {
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
border-right: 0 none;
}
@ -96,10 +95,6 @@ const checkboxStyles = `
}
`;
const inputTextStyles = `
.p-inputtext {
margin: 0;
}
.p-fluid .p-inputtext {
width: 100%;
}
@ -285,14 +280,6 @@ const styles = `
word-wrap: normal !important;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button { /* @todo */
border-radius: 0;
}
.p-link {
text-align: left;
background-color: transparent;
@ -370,6 +357,7 @@ ${radioButtonStyles}
`;
const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
export default {
name: 'BaseComponent',
@ -378,6 +366,10 @@ export default {
type: Object,
default: undefined
},
ptOptions: {
type: Object,
default: undefined
},
unstyled: {
type: Boolean,
default: undefined
@ -393,88 +385,159 @@ export default {
immediate: true,
handler(newValue) {
if (!newValue) {
loadStyle();
this.$options.css && this.$css.loadStyle();
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
}
}
}
},
beforeCreate() {
this.pt?.hooks?.['beforeCreate']?.();
this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['beforeCreate']?.();
const _usept = this.pt?.['_usept'];
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
(value || originalValue)?.hooks?.['onBeforeCreate']?.();
const _useptInConfig = this.$config?.pt?.['_usept'];
const originalValueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.originalValue : undefined;
const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
(valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
},
created() {
this._hook('created');
this._hook('onCreated');
},
beforeMount() {
loadBaseStyle();
this._hook('beforeMount');
loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
this._loadGlobalStyles();
this._hook('onBeforeMount');
},
mounted() {
this._hook('mounted');
this._hook('onMounted');
},
beforeUpdate() {
this._hook('beforeUpdate');
this._hook('onBeforeUpdate');
},
updated() {
this._hook('updated');
this._hook('onUpdated');
},
beforeUnmount() {
this._hook('beforeUnmount');
this._hook('onBeforeUnmount');
},
unmounted() {
this._hook('unmounted');
this._hook('onUnmounted');
},
methods: {
_hook(hookName) {
const selfHook = this._getOptionValue(this.pt, `hooks.${hookName}`);
const globalHook = this._getOptionValue(this.globalPT, `hooks.${hookName}`);
if (!this.$options.hostName) {
const selfHook = this._usePT(this._getPT(this.pt, this.$.type.name), this._getOptionValue, `hooks.${hookName}`);
const defaultHook = this._useDefaultPT(this._getOptionValue, `hooks.${hookName}`);
selfHook?.();
globalHook?.();
selfHook?.();
defaultHook?.();
}
},
_loadGlobalStyles() {
/*
* @todo Add self custom css support;
* <Panel :pt="{ css: `...` }" .../>
*
* const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
* const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
* const mergedCSS = mergeProps(selfCSS, defaultCSS);
* ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
*/
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
},
_getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey
? ObjectUtils.isObject(options)
? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
},
_getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
const datasetPrefix = 'data-pc-';
const self = this._getOptionValue(obj, key, params);
const globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined;
const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
});
const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
const { mergeSections = true, mergeProps: useMergeProps = false } = this.ptOptions || {};
const global = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
const self = searchOut ? undefined : this._usePT(this._getPT(obj, this.$name), this._getPTClassValue, key, { ...params, global: global || {} });
const datasets = key !== 'transition' && {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
};
return merged;
/*
* @todo: The 'class' option in self can always be more powerful to style the component easily.
*
* return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
*/
return mergeSections || (!mergeSections && self) ? (useMergeProps ? mergeProps(global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
},
_getPTClassValue(...args) {
const value = this._getOptionValue(...args);
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
},
_getPT(pt, key = '', callback) {
const _usept = pt?.['_usept'];
const getValue = (value, checkSameKey = false) => {
const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key);
const _cKey = ObjectUtils.toFlatCase(this.$name);
return (checkSameKey ? (_key !== _cKey ? computedValue?.[_key] : undefined) : computedValue?.[_key]) ?? computedValue;
};
return ObjectUtils.isNotEmpty(_usept)
? {
_usept,
originalValue: getValue(pt.originalValue),
value: getValue(pt.value)
}
: getValue(pt, true);
},
_usePT(pt, callback, key, params) {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || {};
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);
},
_useGlobalPT(callback, key, params) {
return this._usePT(this.globalPT, callback, key, params);
},
_useDefaultPT(callback, key, params) {
return this._usePT(this.defaultPT, callback, key, params);
},
ptm(key = '', params = {}) {
return this._getPTValue(this.pt, key, { instance: this, props: this.$props, state: this.$data, ...params });
return this._getPTValue(this.pt, key, { ...this.$params, ...params });
},
ptmo(obj = {}, key = '', params = {}) {
return this._getPTValue(obj, key, { instance: this, ...params }, false);
},
cx(key = '', params = {}) {
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
},
sx(key = '', when = true, params = {}) {
if (when) {
const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
return [base, self];
}
@ -483,14 +546,26 @@ export default {
}
},
computed: {
globalPT() {
return this._getPT(this.$config?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this }));
},
defaultPT() {
return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this });
return this._getPT(this.$config?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { ...this.$params }) || ObjectUtils.getItemValue(value, { ...this.$params }));
},
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
},
$params() {
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
},
$css() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
},
$config() {
return this.$primevue?.config;
},
$name() {
return this.$options.hostName || this.$.type.name;
}
}
};

35
components/lib/basedirective/BaseDirective.d.ts vendored
View file

@ -1,6 +1,37 @@
import { ObjectDirective } from 'vue';
import { DirectiveBinding, VNode } from 'vue';
export interface DirectiveHooks extends Omit<ObjectDirective, 'getSSRProps' | 'deep'> {}
export interface DirectiveInstance<T = any, V = any> {
$name: string | undefined;
$host: T;
$binding: DirectiveBinding<V>;
$el: HTMLElement | undefined;
$css?: {
classes?: undefined;
inlineStyles?: undefined;
loadStyle?: () => void;
};
defaultPT: any;
isUnstyled: boolean;
[key: string]: any;
}
/* All parameters passed by the directive of Vue.js */
export interface DirectiveOptions<T = any, Prev = VNode<any, T> | null, V = any> {
el: T;
binding: DirectiveBinding<V>;
vnode: VNode<any, T>;
prevVNode: Prev;
}
export interface DirectiveHooks<T = any, V = any> {
onCreated?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onBeforeMount?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onMounted?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onBeforeUpdate?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, VNode<any, T>, V>) => void;
onUpdated?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, VNode<any, T>, V>) => void;
onBeforeUnmount?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onUnmounted?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
}
export interface BaseDirectivePassThroughOptions {
hooks?: DirectiveHooks;

85
components/lib/basedirective/BaseDirective.js
View file

@ -5,33 +5,81 @@ import { mergeProps } from 'vue';
const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
_getOptionValue: (options, key = '', params = {}) => {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey
? ObjectUtils.isObject(options)
? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
},
_getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
const datasetPrefix = 'data-pc-';
const self = BaseDirective._getOptionValue(obj, key, params);
const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
});
const getValue = (...args) => {
const value = BaseDirective._getOptionValue(...args);
return merged;
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
};
const datasetPrefix = 'data-pc-';
const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || {};
const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT, getValue, key, params) : undefined;
const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
const datasets = {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
};
return mergeSections || (!mergeSections && self) ? (useMergeProps ? mergeProps(global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
},
_getPT: (pt, key = '', callback) => {
const _usept = pt?.['_usept'];
const getValue = (value) => {
const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key);
return computedValue?.[_key] ?? computedValue;
};
return ObjectUtils.isNotEmpty(_usept)
? {
_usept,
originalValue: getValue(pt.originalValue),
value: getValue(pt.value)
}
: getValue(pt);
},
_usePT: (instance = {}, pt, callback, key, params) => {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { mergeSections = true, mergeProps: useMergeProps = false } = pt['_usept'] || {};
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);
},
_useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
return BaseDirective._usePT(instance, defaultPT, callback, key, params);
},
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
const config = binding?.instance?.$primevue?.config;
const selfHook = binding?.value?.pt?.hooks?.[hookName];
const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName];
const instance = el?.$instance;
const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
const options = { el, binding, vnode, prevVnode };
selfHook?.(el, binding, vnode, prevVnode);
globalHook?.(el, binding, vnode, prevVnode);
selfHook?.(instance, options);
defaultHook?.(instance, options);
},
_extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => {
@ -49,8 +97,9 @@ const BaseDirective = {
$binding: binding,
$el: $prevInstance['$el'] || undefined,
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
$config: config,
/* computed instance variables */
defaultPT: config?.pt?.directives?.[name],
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
@ -70,8 +119,10 @@ const BaseDirective = {
handleHook('created', el, binding, vnode, prevVnode);
},
beforeMount: (el, binding, vnode, prevVnode) => {
loadBaseStyle();
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle();
const config = binding?.instance?.$primevue?.config;
loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {

78
components/lib/baseicon/BaseIcon.vue
View file

@ -1,38 +1,8 @@
<script>
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
export default {
name: 'BaseIcon',
props: {
label: {
type: String,
default: undefined
},
spin: {
type: Boolean,
default: false
}
},
methods: {
pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label);
return {
class: [
'p-icon',
{
'p-icon-spin': this.spin
}
],
role: !isLabelEmpty ? 'img' : undefined,
'aria-label': !isLabelEmpty ? this.label : undefined,
'aria-hidden': isLabelEmpty
};
}
}
};
</script>
<style>
const styles = `
.p-icon {
display: inline-block;
}
@ -63,4 +33,46 @@ export default {
transform: rotate(359deg);
}
}
</style>
`;
const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
export default {
name: 'BaseIcon',
props: {
label: {
type: String,
default: undefined
},
spin: {
type: Boolean,
default: false
}
},
beforeMount() {
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
},
methods: {
pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label);
return {
class: [
'p-icon',
{
'p-icon-spin': this.spin
}
],
role: !isLabelEmpty ? 'img' : undefined,
'aria-label': !isLabelEmpty ? this.label : undefined,
'aria-hidden': isLabelEmpty
};
}
},
computed: {
$config() {
return this.$primevue?.config;
}
}
};
</script>

8
components/lib/blockui/BaseBlockUI.vue
View file

@ -7,14 +7,6 @@ const styles = `
position: relative;
}
.p-blockui {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-blockui.p-component-overlay {
position: absolute;
}

35
components/lib/blockui/BlockUI.d.ts vendored
View file

@ -9,17 +9,31 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type BlockUIPassThroughOptionType = BlockUIPassThroughAttributes | ((options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes) | null | undefined;
export declare type BlockUIPassThroughOptionType = BlockUIPassThroughAttributes | ((options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BlockUIPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: BlockUIProps;
/**
* Defines current inline state.
*/
state: BlockUIState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,11 +42,15 @@ export interface BlockUIPassThroughMethodOptions {
*/
export interface BlockUIPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: BlockUIPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to pass attributes to the mask's DOM element.
*/
mask?: BlockUIPassThroughOptionType;
/**
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -81,10 +99,15 @@ export interface BlockUIProps {
*/
autoZIndex?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {BlockUIPassThroughOptions}
*/
pt?: BlockUIPassThroughOptions;
pt?: PassThrough<BlockUIPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

1
components/lib/blockui/BlockUI.spec.js
View file

@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
import { beforeEach, expect } from 'vitest';
import BlockUI from './BlockUI.vue';
vi.mock('primevue/utils');
let wrapper = null;
describe('BlockUI.vue', () => {

45
components/lib/blockui/BlockUI.vue
View file

@ -35,14 +35,36 @@ export default {
if (this.fullScreen) {
styleClass += ' p-blockui-document';
this.mask = document.createElement('div');
!this.isUnstyled && this.mask.setAttribute('class', styleClass);
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%'
},
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('mask')
});
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur();
} else {
this.mask = document.createElement('div');
!this.isUnstyled && this.mask.setAttribute('class', styleClass);
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
},
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('mask')
});
this.$refs.container.appendChild(this.mask);
}
@ -55,18 +77,21 @@ export default {
},
unblock() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('animationend', () => {
if (DomHandler.hasCSSAnimation(this.mask) > 0) {
this.mask.addEventListener('animationend', () => {
this.removeMask();
});
} else {
this.removeMask();
});
}
},
removeMask() {
ZIndexUtils.clear(this.mask);
if (this.fullScreen) {
if (!this.isUnstyled) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
} else {
this.$refs.container.removeChild(this.mask);
}

86
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View file

@ -10,16 +10,31 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes) | null | undefined;
export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface BreadcrumbPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: BreadcrumbProps;
/**
* Defines current options.
*/
context: BreadcrumbContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,39 +43,39 @@ export interface BreadcrumbPassThroughMethodOptions {
*/
export interface BreadcrumbPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
menu?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the list item's DOM element.
* Used to pass attributes to the list item's DOM element.
*/
menuitem?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the action's DOM element.
* Used to pass attributes to the action's DOM element.
*/
action?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
* Used to pass attributes to the separator's DOM element.
*/
separator?: BreadcrumbPassThroughOptionType;
/**
* Uses to pass attributes to the separator icon's DOM element.
* Used to pass attributes to the separator icon's DOM element.
*/
separatorIcon?: BreadcrumbPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -73,6 +88,38 @@ export interface BreadcrumbPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current options in Breadcrumb component.
*/
export interface BreadcrumbContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem
*/
index: number;
}
/**
* Defines valid router binding props in Breadcrumb component.
*/
export interface BreadcrumbRouterBindProps {
/**
* Action element binding
*/
action: object;
/**
* Icon element binding
*/
icon: object;
/**
* Label element binding
*/
label: object;
}
/**
* Defines valid properties in Breadcrumb component.
*/
@ -99,10 +146,15 @@ export interface BreadcrumbProps {
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {BreadcrumbPassThroughOptions}
*/
pt?: BreadcrumbPassThroughOptions;
pt?: PassThrough<BreadcrumbPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -123,6 +175,14 @@ export interface BreadcrumbSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: BreadcrumbRouterBindProps;
}): VNode[];
/**
* Custom separator template.

4
components/lib/breadcrumb/Breadcrumb.spec.js
View file

@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils';
import Breadcrumb from './Breadcrumb.vue';
import BreadcrumbItem from './BreadcrumbItem.vue';
describe('Breadcrumb', () => {
it('should exist', () => {
@ -8,6 +9,9 @@ describe('Breadcrumb', () => {
stubs: {
'router-link': true
},
components: {
BreadcrumbItem
},
mocks: {
$router: {
currentRoute: {

9
components/lib/breadcrumb/Breadcrumb.vue
View file

@ -1,14 +1,14 @@
<template>
<nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
<ol :class="cx('menu')" v-bind="ptm('menu')">
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" v-bind="ptm('home')" />
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
<template v-for="(item, i) of model" :key="item.label">
<li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
<slot name="separator">
<ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
</slot>
</li>
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" />
<BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" />
</template>
</ol>
</nav>
@ -22,6 +22,11 @@ import BreadcrumbItem from './BreadcrumbItem.vue';
export default {
name: 'Breadcrumb',
extends: BaseBreadcrumb,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
components: {
BreadcrumbItem: BreadcrumbItem,
ChevronRightIcon: ChevronRightIcon

20
components/lib/breadcrumb/BreadcrumbItem.spec.js
View file

@ -21,7 +21,9 @@ beforeEach(() => {
},
props: {
item: { label: 'Computer', visible: () => true },
template: null
templates: {
item: undefined
}
}
});
});
@ -31,8 +33,8 @@ afterEach(() => {
});
describe('BreadcrumbItem', () => {
it('When component is mount, text should be exists', () => {
expect(wrapper.find('.p-menuitem-text').exists()).toBe(true);
it('When component is mount and template.item equal to null, text should not be exists', () => {
expect(wrapper.find('.p-menuitem-text').exists()).toBe(false);
});
it('When tag is triggered, onClick method should be called', async () => {
@ -53,18 +55,6 @@ describe('BreadcrumbItem', () => {
expect(spy).toHaveBeenCalled();
});
it('When linkClass method called and isActive-isExactActive, tag classes should be effected', async () => {
await wrapper.setProps({ exact: true });
expect(wrapper.vm.linkClass({ isActive: true, isExactActive: true })).toEqual([
'p-menuitem-link',
{
'router-link-active': true,
'router-link-active-exact': true
}
]);
});
it('When item prop has a visible, visible method should be return falsy', async () => {
await wrapper.setProps({ item: { label: 'Computer', visible: false, command: vi.fn() } });

57
components/lib/breadcrumb/BreadcrumbItem.vue
View file

@ -1,25 +1,26 @@
<template>
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem')">
<template v-if="!templates || !templates.item">
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
<template v-if="!templates.item">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
<a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action', ptmOptions)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
</a>
</router-link>
<a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
<a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="item"></component>
<component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
</li>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { mergeProps } from 'vue';
export default {
name: 'BreadcrumbItem',
@ -55,10 +56,44 @@ export default {
},
isCurrentUrl() {
const { to, url } = this.item;
let lastPath = this.$router ? this.$router.currentRoute.path : '';
const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return to === lastPath || url === lastPath ? 'page' : undefined;
}
},
computed: {
ptmOptions() {
return {
context: {
item: this.item,
index: this.index
}
};
},
getMenuItemProps() {
return {
action: mergeProps(
{
class: this.cx('action'),
'aria-current': this.isCurrentUrl(),
onClick: ($event) => this.onClick($event)
},
this.ptm('action', this.ptmOptions)
),
icon: mergeProps(
{
class: [this.cx('icon'), this.item.icon]
},
this.ptm('icon', this.ptmOptions)
),
label: mergeProps(
{
class: this.cx('label')
},
this.ptm('label', this.ptmOptions)
)
};
}
}
};
</script>

43
components/lib/button/Button.d.ts vendored
View file

@ -9,17 +9,35 @@
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes) | null | undefined;
export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ButtonPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ButtonProps;
/**
* Defines current options.
*/
context: ButtonContext;
/**
* Defines parent instance.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,27 +46,27 @@ export interface ButtonPassThroughMethodOptions {
*/
export interface ButtonPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the badge's DOM element.
* Used to pass attributes to the badge's DOM element.
*/
badge?: ButtonPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -146,10 +164,15 @@ export interface ButtonProps extends ButtonHTMLAttributes {
*/
plain?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ButtonPassThroughOptions}
*/
pt?: ButtonPassThroughOptions;
pt?: PassThrough<ButtonPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

2
components/lib/button/Button.spec.js
View file

@ -79,6 +79,6 @@ describe('Button.vue', () => {
}
});
expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root" data-pd-ripple="true"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
});
});

8
components/lib/button/Button.vue
View file

@ -5,8 +5,8 @@
<span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
</slot>
<slot v-else name="icon" :class="cx('icon')">
<span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
<slot v-else name="icon" :class="[cx('icon')]">
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
@ -26,6 +26,10 @@ export default {
methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
},
context: {
disabled: this.disabled
}

244
components/lib/calendar/Calendar.d.ts vendored
View file

@ -7,20 +7,40 @@
* @module calendar
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes) | null | undefined;
export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
export declare type CalendarPassThroughTransitionType = TransitionProps | ((options: CalendarPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface CalendarPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: CalendarProps;
/**
* Defines current inline state.
*/
state: CalendarState;
/**
* Defines current options.
*/
context: CalendarContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -88,207 +108,211 @@ export interface CalendarBlurEvent {
*/
export interface CalendarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
dropdownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel's DOM element.
*/
panel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the group container's DOM element.
* Used to pass attributes to the group container's DOM element.
*/
groupContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the group's DOM element.
* Used to pass attributes to the group's DOM element.
*/
group?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
previousButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
* Used to pass attributes to the title's DOM element.
*/
title?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month title's DOM element.
* Used to pass attributes to the month title's DOM element.
*/
monthTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year title's DOM element.
* Used to pass attributes to the year title's DOM element.
*/
yearTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the decade title's DOM element.
* Used to pass attributes to the decade title's DOM element.
*/
decadeTitle?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
nextButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
* Used to pass attributes to the container's DOM element.
*/
container?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table's DOM element.
* Used to pass attributes to the table's DOM element.
*/
table?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header's DOM element.
* Used to pass attributes to the table header's DOM element.
*/
tableHeader?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header row's DOM element.
* Used to pass attributes to the table header row's DOM element.
*/
tableHeaderRow?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week header's DOM element.
* Used to pass attributes to the week header's DOM element.
*/
weekHeader?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table header cell's DOM element.
* Used to pass attributes to the table header cell's DOM element.
*/
tableHeaderCell?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week label's DOM element.
* Used to pass attributes to the week label's DOM element.
*/
weekLabel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week day's DOM element.
* Used to pass attributes to the week day's DOM element.
*/
weekDay?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table body's DOM element.
* Used to pass attributes to the table body's DOM element.
*/
tableBody?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the table body row's DOM element.
* Used to pass attributes to the table body row's DOM element.
*/
tableBodyRow?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week number's DOM element.
* Used to pass attributes to the week number's DOM element.
*/
weekNumber?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the week label container's DOM element.
* Used to pass attributes to the week label container's DOM element.
*/
weekLabelContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the day's DOM element.
* Used to pass attributes to the day's DOM element.
*/
day?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the day label's DOM element.
* Used to pass attributes to the day label's DOM element.
*/
dayLabel?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month picker's DOM element.
* Used to pass attributes to the month picker's DOM element.
*/
monthPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the month's DOM element.
* Used to pass attributes to the month's DOM element.
*/
month?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year picker's DOM element.
* Used to pass attributes to the year picker's DOM element.
*/
yearPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the year's DOM element.
* Used to pass attributes to the year's DOM element.
*/
year?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the time picker's DOM element.
* Used to pass attributes to the time picker's DOM element.
*/
timePicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the hour picker's DOM element.
* Used to pass attributes to the hour picker's DOM element.
*/
hourPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the hour's DOM element.
* Used to pass attributes to the hour's DOM element.
*/
hour?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the separatorc ontainer's DOM element.
* Used to pass attributes to the separatorc ontainer's DOM element.
*/
separatorContainer?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
* Used to pass attributes to the separator's DOM element.
*/
separator?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the minute picker's DOM element.
* Used to pass attributes to the minute picker's DOM element.
*/
minutePicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the minute's DOM element.
* Used to pass attributes to the minute's DOM element.
*/
minute?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the second picker's DOM element.
* Used to pass attributes to the second picker's DOM element.
*/
secondPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the second's DOM element.
* Used to pass attributes to the second's DOM element.
*/
second?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the ampm picker's DOM element.
* Used to pass attributes to the ampm picker's DOM element.
*/
ampmPicker?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the ampm's DOM element.
* Used to pass attributes to the ampm's DOM element.
*/
ampm?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the buttonbar's DOM element.
* Used to pass attributes to the buttonbar's DOM element.
*/
buttonbar?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
todayButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
clearButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the aria selected day's DOM element.
* Used to pass attributes to the aria selected day's DOM element.
*/
hiddenSelectedDay?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the aria month's DOM element.
* Used to pass attributes to the aria month's DOM element.
*/
hiddenMonth?: CalendarPassThroughOptionType;
/**
* Uses to pass attributes to the aria year's DOM element.
* Used to pass attributes to the aria year's DOM element.
*/
hiddenYear?: CalendarPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: CalendarPassThroughTransitionType;
}
/**
@ -344,6 +368,75 @@ export interface CalendarState {
currentView: string;
}
/**
* Defines current options in Calendar component.
*/
export interface CalendarContext {
/**
* Current date.
*/
date: string | Date | string[] | Date[] | undefined | null;
/**
* Current today state of the calendar's day.
* @defaultValue false
*/
today: boolean;
/**
* Current other month state of the calendar's day.
*/
otherMonth: boolean;
/**
* Current selected state of the calendar's day or month or year.
* @defaultValue false
*/
selected: boolean;
/**
* Current disabled state of the calendar's day or month or year.
* @defaultValue false
*/
disabled: boolean;
/**
* Current month state.
*/
month: CalendarMonthOptions;
/**
* Current month index state.
*/
monthIndex: number;
/**
* Current year state.
*/
year: CalendarYearOptions;
}
/**
* Defines current month options.
*/
export interface CalendarMonthOptions {
/**
* Month value.
*/
value: string;
/**
* Selectable state of the month.
*/
selectable: boolean;
}
/**
* Defines current year options.
*/
export interface CalendarYearOptions {
/**
* Year value.
*/
value: number;
/**
* Selectable state of the month.
*/
selectable: boolean;
}
/**
* Defines valid properties in Calendar component.
*/
@ -548,7 +641,7 @@ export interface CalendarProps {
*/
showWeek?: boolean | undefined;
/**
* Wheter to allow prevents entering the date manually via typing.
* Whether to allow entering the date manually via typing.
* @defaultValue true
*/
manualInput?: boolean | undefined;
@ -588,7 +681,7 @@ export interface CalendarProps {
*/
inputClass?: string | object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
@ -600,7 +693,7 @@ export interface CalendarProps {
*/
panelClass?: string | object | undefined;
/**
* Uses 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 panel inside the component.
*/
panelProps?: HTMLAttributes | undefined;
/**
@ -612,10 +705,15 @@ export interface CalendarProps {
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {CalendarPassThroughOptions}
*/
pt?: CalendarPassThroughOptions;
pt?: PassThrough<CalendarPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -659,20 +757,44 @@ export interface CalendarSlots {
dropdownicon(): VNode[];
/**
* Custom previous icon template.
* @param {Object} scope - previous icon slot's params.
*/
previousicon(): VNode[];
previousicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom next icon template.
* @param {Object} scope - next icon slot's params.
*/
nexticon(): VNode[];
nexticon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom increment icon template.
* @param {Object} scope - increment icon slot's params.
*/
incrementicon(): VNode[];
incrementicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
/**
* Custom decrement icon template.
* @param {Object} scope - decrement icon slot's params.
*/
decrementicon(): VNode[];
decrementicon(scope: {
/**
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
}
/**

159
components/lib/calendar/Calendar.vue
View file

@ -48,7 +48,7 @@
</template>
</CalendarButton>
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
<div
v-if="inline || overlayVisible"
:ref="overlayRef"
@ -79,8 +79,9 @@
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
v-bind="ptm('previousButton')"
data-pc-group-section="navigator"
>
<slot name="previousicon">
<slot name="previousicon" :class="cx('previousIcon')">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
</slot>
</button>
@ -156,8 +157,9 @@
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
v-bind="ptm('nextButton')"
data-pc-group-section="navigator"
>
<slot name="nexticon">
<slot name="nexticon" :class="cx('nextIcon')">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
</slot>
</button>
@ -166,23 +168,40 @@
<table :class="cx('table')" role="grid" v-bind="ptm('table')">
<thead v-bind="ptm('tableHeader')">
<tr v-bind="ptm('tableHeaderRow')">
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader')" :data-p-disabled="true">
<span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
<th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
<span v-bind="ptm('weekLabel')" data-pc-group-section="tableheadercelllabel">{{ weekHeaderLabel }}</span>
</th>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
<span v-bind="ptm('weekDay')">{{ weekDay }}</span>
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell">
<span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
</th>
</tr>
</thead>
<tbody v-bind="ptm('tableBody')">
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
<td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')">
<span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer')" :data-p-disabled="true">
<td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
<span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
{{ month.weekNumbers[i] }}
</span>
</td>
<td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" v-bind="ptm('day')" :data-p-today="date.today" :data-p-other-month="date.otherMonth">
<td
v-for="date of week"
:key="date.day + '' + date.month"
:aria-label="date.day"
:class="cx('day', { date })"
v-bind="
ptm('day', {
context: {
date,
today: date.today,
otherMonth: date.otherMonth
}
})
"
:data-p-today="date.today"
:data-p-other-month="date.otherMonth"
data-pc-group-section="tablebodycell"
>
<span
v-ripple
:class="cx('dayLabel', { date })"
@ -191,9 +210,18 @@
@keydown="onDateCellKeydown($event, date, groupIndex)"
:aria-selected="isSelected(date)"
:aria-disabled="!date.selectable"
v-bind="ptm('dayLabel')"
v-bind="
ptm('dayLabel', {
context: {
date,
selected: isSelected(date),
disabled: !date.selectable
}
})
"
:data-p-disabled="!date.selectable"
:data-p-highlight="isSelected(date)"
data-pc-group-section="tablebodycelllabel"
>
<slot name="date" :date="date">{{ date.day }}</slot>
</span>
@ -215,7 +243,16 @@
@click="onMonthSelect($event, { month: m, index: i })"
@keydown="onMonthCellKeydown($event, { month: m, index: i })"
:class="cx('month', { month: m, index: i })"
v-bind="ptm('month')"
v-bind="
ptm('month', {
context: {
month: m,
monthIndex: i,
selected: isMonthSelected(i),
disabled: !m.selectable
}
})
"
:data-p-disabled="!m.selectable"
:data-p-highlight="isMonthSelected(i)"
>
@ -233,7 +270,15 @@
@click="onYearSelect($event, y)"
@keydown="onYearCellKeydown($event, y)"
:class="cx('year', { year: y })"
v-bind="ptm('year')"
v-bind="
ptm('year', {
context: {
year: y,
selected: isYearSelected(y.value),
disabled: !y.selectable
}
})
"
:data-p-disabled="!y.selectable"
:data-p-highlight="isYearSelected(y.value)"
>
@ -245,7 +290,7 @@
</div>
</template>
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
:class="cx('incrementButton')"
@ -260,12 +305,13 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span>
<span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<button
v-ripple
:class="cx('decrementButton')"
@ -280,16 +326,17 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
</div>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
<div :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')">
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
:class="cx('incrementButton')"
@ -305,12 +352,13 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span>
<span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<button
v-ripple
:class="cx('decrementButton')"
@ -326,16 +374,17 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
</div>
<div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
<div v-if="showSeconds" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')">
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<button
v-ripple
:class="cx('incrementButton')"
@ -351,12 +400,13 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span>
<span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<button
v-ripple
:class="cx('decrementButton')"
@ -372,25 +422,46 @@
@keyup.space="onTimePickerElementMouseUp($event)"
type="button"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
</div>
<div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')">
<span v-bind="ptm('separator')">{{ timeSeparator }}</span>
<div v-if="hourFormat == '12'" :class="cx('separatorContainer')" v-bind="ptm('separatorContainer')" data-pc-group-section="timepickerContainer">
<span v-bind="ptm('separator')" data-pc-group-section="timepickerlabel">{{ timeSeparator }}</span>
</div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" />
<button
v-ripple
:class="cx('incrementButton')"
:aria-label="$primevue.config.locale.am"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('incrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
<span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" />
<span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<button
v-ripple
:class="cx('decrementButton')"
:aria-label="$primevue.config.locale.pm"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
type="button"
:disabled="disabled"
v-bind="ptm('decrementButton')"
data-pc-group-section="timepickerbutton"
>
<slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" data-pc-group-section="timepickerlabel" />
</slot>
</button>
</div>
@ -405,6 +476,7 @@
:unstyled="unstyled"
:pt="ptm('todayButton')"
data-pc-section="todaybutton"
data-pc-group-section="button"
/>
<CalendarButton
type="button"
@ -415,6 +487,7 @@
:unstyled="unstyled"
:pt="ptm('clearButton')"
data-pc-section="clearbutton"
data-pc-group-section="button"
/>
</div>
<slot name="footer"></slot>
@ -1407,7 +1480,7 @@ export default {
},
incrementHour(event) {
let prevHour = this.currentHour;
let newHour = this.currentHour + this.stepHour;
let newHour = this.currentHour + Number(this.stepHour);
let newPM = this.pm;
if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
@ -1449,7 +1522,7 @@ export default {
event.preventDefault();
},
incrementMinute(event) {
let newMinute = this.currentMinute + this.stepMinute;
let newMinute = this.currentMinute + Number(this.stepMinute);
if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
@ -1469,7 +1542,7 @@ export default {
event.preventDefault();
},
incrementSecond(event) {
let newSecond = this.currentSecond + this.stepSecond;
let newSecond = this.currentSecond + Number(this.stepSecond);
if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
@ -2573,13 +2646,15 @@ export default {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css';
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.responsiveStyleElement);
}
let innerHTML = '';
if (this.responsiveOptions) {
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
for (let i = 0; i < responsiveOptions.length; i++) {
let { breakpoint, numMonths } = responsiveOptions[i];

28
components/lib/card/Card.d.ts vendored
View file

@ -9,7 +9,8 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
@ -19,35 +20,35 @@ export declare type CardPassThroughOptionType = CardPassThroughAttributes | null
*/
export interface CardPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the body's DOM element.
* Used to pass attributes to the body's DOM element.
*/
body?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
* Used to pass attributes to the title's DOM element.
*/
title?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the subtitle's DOM element.
* Used to pass attributes to the subtitle's DOM element.
*/
subtitle?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: CardPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -65,10 +66,15 @@ export interface CardPassThroughAttributes {
*/
export interface CardProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {CardPassThroughOptions}
*/
pt?: CardPassThroughOptions;
pt?: PassThrough<CardPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

80
components/lib/carousel/Carousel.d.ts vendored
View file

@ -9,17 +9,35 @@
*/
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes) | null | undefined;
export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface CarouselPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: CarouselProps;
/**
* Defines current inline state.
*/
state: CarouselState;
/**
* Defines current options.
*/
context: CarouselContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,71 +46,71 @@ export interface CarouselPassThroughMethodOptions {
*/
export interface CarouselPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
* Used to pass attributes to the container's DOM element.
*/
container?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the previous button's DOM element.
* Used to pass attributes to the previous button's DOM element.
*/
previousButton?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the previous button icon's DOM element.
* Used to pass attributes to the previous button icon's DOM element.
*/
previousButtonIcon?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the items content's DOM element.
* Used to pass attributes to the items content's DOM element.
*/
itemsContent?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the items container's DOM element.
* Used to pass attributes to the items container's DOM element.
*/
itemsContainer?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the item cloned's DOM element.
* Used to pass attributes to the item cloned's DOM element.
*/
itemCloned?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
* Used to pass attributes to the item's DOM element.
*/
item?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the next button's DOM element.
* Used to pass attributes to the next button's DOM element.
*/
nextButton?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the next button icon's DOM element.
* Used to pass attributes to the next button icon's DOM element.
*/
nextButtonIcon?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the indicators's DOM element.
* Used to pass attributes to the indicators's DOM element.
*/
indicators?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the indicator's DOM element.
* Used to pass attributes to the indicator's DOM element.
*/
indicator?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the indicator button's DOM element.
* Used to pass attributes to the indicator button's DOM element.
*/
indicatorButton?: CarouselPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: CarouselPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -165,6 +183,17 @@ export interface CarouselState {
swipeThreshold: number;
}
/**
* Defines current inline options in Carousel component.
*/
export interface CarouselContext {
/**
* Current highlighted state of the indicator as a boolean.
* @defaultValue false
*/
highlighted: boolean;
}
export interface CarouselResponsiveOptions {
/**
* Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
@ -251,18 +280,23 @@ export interface CarouselProps {
*/
showIndicators?: boolean | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the previous navigation button.
* Used to pass all properties of the HTMLButtonElement to the previous navigation button.
*/
prevButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the next navigation button.
* Used to pass all properties of the HTMLButtonElement to the next navigation button.
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {CarouselPassThroughOptions}
*/
pt?: CarouselPassThroughOptions;
pt?: PassThrough<CarouselPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

39
components/lib/carousel/Carousel.vue
View file

@ -5,7 +5,17 @@
</div>
<div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
<button v-if="showNavigators" v-ripple type="button" :class="cx('previousButton')" :disabled="backwardIsDisabled" :aria-label="ariaPrevButtonLabel" @click="navBackward" v-bind="{ ...prevButtonProps, ...ptm('previousButton') }">
<button
v-if="showNavigators"
v-ripple
type="button"
:class="cx('previousButton')"
:disabled="backwardIsDisabled"
:aria-label="ariaPrevButtonLabel"
@click="navBackward"
v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
data-pc-group-section="navigator"
>
<slot name="previousicon">
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
</slot>
@ -49,14 +59,24 @@
</div>
</div>
<button v-if="showNavigators" v-ripple type="button" :class="cx('nextButton')" :disabled="forwardIsDisabled" :aria-label="ariaNextButtonLabel" @click="navForward" v-bind="{ ...nextButtonProps, ...ptm('nextButton') }">
<button
v-if="showNavigators"
v-ripple
type="button"
:class="cx('nextButton')"
:disabled="forwardIsDisabled"
:aria-label="ariaNextButtonLabel"
@click="navForward"
v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
data-pc-group-section="navigator"
>
<slot name="nexticon">
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
</slot>
</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')" :data-p-highlight="d_page === i">
<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">
<button
:class="cx('indicatorButton')"
type="button"
@ -64,7 +84,7 @@
:aria-label="ariaPageLabel(i + 1)"
:aria-current="d_page === i ? 'page' : undefined"
@click="onIndicatorClick($event, i)"
v-bind="ptm('indicatorButton')"
v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
/>
</li>
</ul>
@ -239,6 +259,13 @@ export default {
}
},
methods: {
getIndicatorPTOptions(index) {
return {
context: {
highlighted: index === this.d_page
}
};
},
step(dir, page) {
let totalShiftedItems = this.totalShiftedItems;
const isCircular = this.isCircular();
@ -509,6 +536,7 @@ export default {
if (!this.carouselStyle) {
this.carouselStyle = document.createElement('style');
this.carouselStyle.type = 'text/css';
DomHandler.setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.carouselStyle);
}
@ -520,6 +548,7 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) {
let _responsiveOptions = [...this.responsiveOptions];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
_responsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint;
@ -529,7 +558,7 @@ export default {
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;

69
components/lib/cascadeselect/CascadeSelect.d.ts vendored
View file

@ -7,19 +7,35 @@
* @module cascadeselect
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes) | null | undefined;
export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes | string) | string | null | undefined;
export declare type CascadeSelectPassThroughTransitionType = TransitionProps | ((options: CascadeSelectPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface CascadeSelectPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: CascadeSelectProps;
/**
* Defines current inline state.
*/
state: CascadeSelectState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -49,66 +65,70 @@ export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent
*/
export interface CascadeSelectPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the dropdown button's DOM element.
* Used to pass attributes to the dropdown button's DOM element.
*/
dropdownButton?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the dropdown icon's DOM element.
* Used to pass attributes to the dropdown icon's DOM element.
*/
dropdownIcon?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel's DOM element.
*/
panel?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
list?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
* Used to pass attributes to the item's DOM element.
*/
item?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the text's DOM element.
* Used to pass attributes to the text's DOM element.
*/
text?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the group icon's DOM element.
* Used to pass attributes to the group icon's DOM element.
*/
groupIcon?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the hidden selected message's DOM element.
* Used to pass attributes to the hidden selected message's DOM element.
*/
hiddenSelectedMessage?: CascadeSelectPassThroughOptionType;
/**
* Uses to pass attributes to the search result message text aria's DOM element.
* Used to pass attributes to the search result message text aria's DOM element.
*/
hiddenSearchResult?: CascadeSelectPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: CascadeSelectPassThroughTransitionType;
}
/**
@ -224,7 +244,7 @@ export interface CascadeSelectProps {
*/
inputClass?: string | object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
@ -236,7 +256,7 @@ export interface CascadeSelectProps {
*/
panelClass?: string | object | undefined;
/**
* Uses 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 panel inside the component.
*/
panelProps?: HTMLAttributes | undefined;
/**
@ -316,10 +336,15 @@ export interface CascadeSelectProps {
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {CascadeSelectPassThroughOptions}
*/
pt?: CascadeSelectPassThroughOptions;
pt?: PassThrough<CascadeSelectPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

3
components/lib/cascadeselect/CascadeSelect.vue
View file

@ -42,7 +42,7 @@
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
<CascadeSelectSub
@ -63,6 +63,7 @@
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
:pt="pt"
:unstyled="unstyled"
/>
</div>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">

1
components/lib/cascadeselect/CascadeSelectSub.vue
View file

@ -44,6 +44,7 @@
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
:pt="pt"
:unstyled="unstyled"
/>
</li>
</template>

32
components/lib/chart/Chart.d.ts vendored
View file

@ -9,16 +9,27 @@
*/
import { CanvasHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes) | null | undefined;
export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ChartPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ChartProps;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -27,15 +38,15 @@ export interface ChartPassThroughMethodOptions {
*/
export interface ChartPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ChartPassThroughOptionType;
/**
* Uses to pass attributes to the canvas's DOM element.
* Used to pass attributes to the canvas's DOM element.
*/
canvas?: ChartPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -98,14 +109,19 @@ export interface ChartProps {
*/
height?: number | undefined;
/**
* Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.
* Used to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.
*/
canvasProps?: CanvasHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ChartPassThroughOptions}
*/
pt?: ChartPassThroughOptions;
pt?: PassThrough<ChartPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

44
components/lib/checkbox/Checkbox.d.ts vendored
View file

@ -9,18 +9,35 @@
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes) | null | undefined;
export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface CheckboxPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: CheckboxProps;
/**
* Defines current inline state.
*/
state: CheckboxState;
/**
* Defines current options.
*/
context: CheckboxContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -29,27 +46,27 @@ export interface CheckboxPassThroughMethodOptions {
*/
export interface CheckboxPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: CheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: CheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: CheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: CheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: CheckboxPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -136,7 +153,7 @@ export interface CheckboxProps {
*/
inputStyle?: string | object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
@ -148,10 +165,15 @@ export interface CheckboxProps {
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {CheckboxPassThroughOptions}
*/
pt?: CheckboxPassThroughOptions;
pt?: PassThrough<CheckboxPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

45
components/lib/chip/Chip.d.ts vendored
View file

@ -9,17 +9,31 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes) | null | undefined;
export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ChipPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ChipProps;
/**
* Defines current inline state.
*/
state: ChipState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,27 +42,27 @@ export interface ChipPassThroughMethodOptions {
*/
export interface ChipPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ChipPassThroughOptionType;
/**
* Uses to pass attributes to the image's DOM element.
* Used to pass attributes to the image's DOM element.
*/
image?: ChipPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: ChipPassThroughOptionType;
/**
* Uses to pass attributes to the label' DOM element.
* Used to pass attributes to the label' DOM element.
*/
label?: ChipPassThroughOptionType;
/**
* Uses to pass attributes to the removeIcon's DOM element.
* Used to pass attributes to the removeIcon's DOM element.
*/
removeIcon?: ChipPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -100,10 +114,15 @@ export interface ChipProps {
*/
removeIcon?: string;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ChipPassThroughOptions}
*/
pt?: ChipPassThroughOptions;
pt?: PassThrough<ChipPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -130,12 +149,14 @@ export interface ChipSlots {
removeicon(scope: {
/**
* Remove icon click event
* @param {Event} event - Browser event
*/
onClick(): void;
onClick: (event: Event) => void;
/**
* Remove icon keydown event
* @param {Event} event - Browser event
*/
onKeydown(): void;
onKeydown: (event: Event) => void;
}): VNode[];
}

58
components/lib/chips/Chips.d.ts vendored
View file

@ -9,17 +9,31 @@
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes) | null | undefined;
export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ChipsPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ChipsProps;
/**
* Defines current inline state.
*/
state: ChipsState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -50,35 +64,35 @@ export interface ChipsRemoveEvent extends ChipsAddEvent {}
*/
export interface ChipsPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
* Used to pass attributes to the container's DOM element.
*/
container?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the token's DOM element.
* Used to pass attributes to the token's DOM element.
*/
token?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the remove token icon's DOM element.
* Used to pass attributes to the remove token icon's DOM element.
*/
removeTokenIcon?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the input token's DOM element.
* Used to pass attributes to the input token's DOM element.
*/
inputToken?: ChipsPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: ChipsPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -153,7 +167,7 @@ export interface ChipsProps {
*/
inputStyle?: object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
inputProps?: InputHTMLAttributes | undefined;
@ -179,10 +193,15 @@ export interface ChipsProps {
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ChipsPassThroughOptions}
*/
pt?: ChipsPassThroughOptions;
pt?: PassThrough<ChipsPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -209,9 +228,18 @@ export interface ChipsSlots {
*/
removetokenicon(scope: {
/**
* Remove icon click event
* Style class of the icon.
*/
onClick(): void;
class: string;
/**
* Index of the token.
*/
index: number;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
onClick: (event: Event, index: number) => void;
}): VNode[];
}
/**

2
components/lib/chips/Chips.vue
View file

@ -31,7 +31,7 @@
<slot name="chip" :class="cx('label')" :value="val">
<span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
</slot>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeItem(event, i)">
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>

54
components/lib/colorpicker/ColorPicker.d.ts vendored
View file

@ -7,18 +7,35 @@
* @module colorpicker
*
*/
import { TransitionProps } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes) | null | undefined;
export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes | string) | string | null | undefined;
export declare type ColorPickerPassThroughTransitionType = TransitionProps | ((options: ColorPickerPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ColorPickerPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ColorPickerProps;
/**
* Defines current inline state.
*/
state: ColorPickerState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -42,46 +59,50 @@ export interface ColorPickerChangeEvent {
*/
export interface ColorPickerPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel's DOM element.
*/
panel?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the selector's DOM element.
* Used to pass attributes to the selector's DOM element.
*/
selector?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the color's DOM element.
* Used to pass attributes to the color's DOM element.
*/
color?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the color handler's DOM element.
* Used to pass attributes to the color handler's DOM element.
*/
colorHandle?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the hue's DOM element.
* Used to pass attributes to the hue's DOM element.
*/
hue?: ColorPickerPassThroughOptionType;
/**
* Uses to pass attributes to the hue handler's DOM element.
* Used to pass attributes to the hue handler's DOM element.
*/
hueHandle: ColorPickerPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: ColorPickerPassThroughTransitionType;
}
/**
@ -154,10 +175,15 @@ export interface ColorPickerProps {
*/
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ColorPickerPassThroughOptions}
*/
pt?: ColorPickerPassThroughOptions;
pt?: PassThrough<ColorPickerPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

43
components/lib/colorpicker/ColorPicker.vue
View file

@ -2,7 +2,7 @@
<div ref="container" :class="cx('root')" v-bind="ptm('root')">
<input v-if="!inline" ref="input" type="text" :class="cx('input')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
<div :class="cx('panel')" v-bind="ptm('content')">
<div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
@ -30,45 +30,6 @@ export default {
name: 'ColorPicker',
extends: BaseColorPicker,
emits: ['update:modelValue', 'change', 'show', 'hide'],
props: {
modelValue: {
type: null,
default: null
},
defaultColor: {
type: null,
default: 'ff0000'
},
inline: {
type: Boolean,
default: false
},
format: {
type: String,
default: 'hex'
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: String,
default: null
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
appendTo: {
type: String,
default: 'body'
},
panelClass: null
},
data() {
return {
overlayVisible: false
@ -384,7 +345,7 @@ export default {
this.bindResizeListener();
if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
ZIndexUtils.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay);
}
this.$emit('show');

209
components/lib/column/Column.d.ts vendored
View file

@ -14,19 +14,36 @@ import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptionType } from '../button';
import { DataTablePassThroughOptions } from '../datatable';
import { DropdownPassThroughOptionType } from '../dropdown';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller';
export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ColumnPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ColumnProps;
/**
* Defines parent instance.
*/
parent: DataTablePassThroughOptions;
/**
* Defines current options.
*/
context: ColumnContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -90,233 +107,237 @@ export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
*/
export interface ColumnPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header cell's DOM element.
* Used to pass attributes to the header cell's DOM element.
*/
headerCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column resizer's DOM element.
* Used to pass attributes to the column resizer's DOM element.
*/
columnResizer?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header content's DOM element.
* Used to pass attributes to the header content's DOM element.
*/
headerContent?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
* Used to pass attributes to the header title's DOM element.
*/
headerTitle?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the sort's DOM element.
* Used to pass attributes to the sort's DOM element.
*/
sort?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the sort badge's DOM element.
* Used to pass attributes to the sort badge's DOM element.
*/
sortBadge?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
* Used to pass attributes to the checkbox wrapper's DOM element.
*/
headerCheckboxWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox's DOM element.
* Used to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header checkbox icon's DOM element.
* Used to pass attributes to the header checkbox icon's DOM element.
*/
headerCheckboxIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column filter's DOM element.
* Used to pass attributes to the column filter's DOM element.
*/
columnFilter?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter input's DOM element.
* Used to pass attributes to the filter input's DOM element.
*/
filterInput?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter menu button's DOM element.
* Used to pass attributes to the filter menu button's DOM element.
*/
filterMenuButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the header filter clear button's DOM element.
* Used to pass attributes to the filter menu icon's DOM element.
*/
filterMenuIcon?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the header filter clear button's DOM element.
*/
headerFilterClearButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter clear icon's DOM element.
* Used to pass attributes to the filter clear icon's DOM element.
*/
filterClearIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter overlay's DOM element.
* Used to pass attributes to the filter overlay's DOM element.
*/
filterOverlay?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter row items' DOM element.
* Used to pass attributes to the filter row items' DOM element.
*/
filterRowItems?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter row item's DOM element.
* Used to pass attributes to the filter row item's DOM element.
*/
filterRowItem?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter separator's DOM element.
* Used to pass attributes to the filter separator's DOM element.
*/
filterSeparator?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter operator's DOM element.
* Used to pass attributes to the filter operator's DOM element.
*/
filterOperator?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterOperatorDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter constraints' DOM element.
* Used to pass attributes to the filter constraints' DOM element.
*/
filterConstraints?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the filter constraint's DOM element.
* Used to pass attributes to the filter constraint's DOM element.
*/
filterConstraint?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Dropdown component.
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptionType}
*/
filterMatchModeDropdown?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter remove button container's DOM element.
* Used to pass attributes to the filter remove button container's DOM element.
*/
filterRemove?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterRemoveButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter add rule's DOM element.
* Used to pass attributes to the filter add rule's DOM element.
*/
filterAddRule?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterAddRuleButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the filter buttonbar's DOM element.
* Used to pass attributes to the filter buttonbar's DOM element.
*/
filterButtonbar?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterClearButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptionType}
*/
filterApplyButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the body cell's DOM element.
* Used to pass attributes to the body cell's DOM element.
*/
bodyCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler's DOM element.
* Used to pass attributes to the rowgroup toggler's DOM element.
*/
rowGroupToggler?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup toggler icon's DOM element.
* Used to pass attributes to the rowgroup toggler icon's DOM element.
*/
rowGroupTogglerIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the column title's DOM element.
* Used to pass attributes to the column title's DOM element.
*/
columnTitle?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton wrapper's DOM element.
* Used to pass attributes to the radiobutton wrapper's DOM element.
*/
radiobuttonWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton's DOM element.
* Used to pass attributes to the radiobutton's DOM element.
*/
radiobutton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the radiobutton icon's DOM element.
* Used to pass attributes to the radiobutton icon's DOM element.
*/
radiobuttonIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
* Used to pass attributes to the checkbox wrapper's DOM element.
*/
checkboxWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox's DOM element.
* Used to pass attributes to the checkbox's DOM element.
*/
checkbox?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox icon's DOM element.
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler's DOM element.
* Used to pass attributes to the rowtoggler's DOM element.
*/
rowToggler?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the rowtoggler icon's DOM element.
* Used to pass attributes to the rowtoggler icon's DOM element.
*/
rowTogglerIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor init button's DOM element.
* Used to pass attributes to the row editor init button's DOM element.
*/
rowEditorInitButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor init icon's DOM element.
* Used to pass attributes to the row editor init icon's DOM element.
*/
rowEditorInitIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor save button's DOM element.
* Used to pass attributes to the row editor save button's DOM element.
*/
rowEditorSaveButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor save icon's DOM element.
* Used to pass attributes to the row editor save icon's DOM element.
*/
rowEditorSaveIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel button's DOM element.
* Used to pass attributes to the row editor cancel button's DOM element.
*/
rowEditorCancelButton?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the row editor cancel icon's DOM element.
* Used to pass attributes to the row editor cancel icon's DOM element.
*/
rowEditorCancelIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the footer cell's DOM element.
* Used to pass attributes to the footer cell's DOM element.
*/
footerCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the body cell content's DOM element.
* Used to pass attributes to the body cell content's DOM element.
*/
bodyCellContent?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenHeaderInput?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: ColumnPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -560,10 +581,15 @@ export interface ColumnProps {
*/
hidden?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ColumnPassThroughOptions}
*/
pt?: ColumnPassThroughOptions;
pt?: PassThrough<ColumnPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -594,6 +620,50 @@ export interface ColumnContext {
* @defaultValue false
*/
disabled: boolean;
/**
* Current sort state of the column as a boolean.
* @defaultValue false
*/
sorted: boolean;
/**
* Current frozen state of the column as a boolean.
* @defaultValue false
*/
frozen: boolean;
/**
* Current resizable state of the column as a boolean.
* @defaultValue false
*/
resizable: boolean;
/**
* Current size state of the table.
*/
size: string;
/**
* Current gridlines state of the table as a boolean.
* @defaultValue false
*/
showGridlines: boolean;
/**
* Current highlighted state of the filter row item as a boolean.
* @defaultValue false
*/
highlighted: boolean;
/**
* Current hidden state of the filter clear button of a column as a boolean.
* @defaultValue false
*/
hidden: boolean;
/**
* Current visible state of the filter menu of a column as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
/**
* Current active state of the filter menu of a column as a boolean.
* @defaultValue false
*/
active: boolean;
}
/**
@ -631,8 +701,9 @@ export interface ColumnSlots {
frozenRow: boolean;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorInitCallback(): void;
editorInitCallback: (event: Event) => void;
}): VNode[];
/**
* Custom header template.
@ -681,12 +752,14 @@ export interface ColumnSlots {
frozenRow: boolean;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorSaveCallback(): void;
editorSaveCallback: (event: Event) => void;
/**
* Callback function
* @param {Event} event - Browser event
*/
editorCancelCallback(): void;
editorCancelCallback: (event: Event) => void;
}): VNode[];
/**
* Custom filter template.
@ -705,7 +778,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter header template.
@ -724,7 +797,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter footer template.
@ -743,7 +816,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter clear template.
@ -762,7 +835,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom filter apply template.
@ -781,7 +854,7 @@ export interface ColumnSlots {
/**
* Callback function
*/
filterCallback(): void;
filterCallback: () => void;
}): VNode[];
/**
* Custom loading template.

39
components/lib/columngroup/ColumnGroup.d.ts vendored
View file

@ -7,18 +7,35 @@
*/
import { ComponentHooks } from '../basecomponent';
import { DataTablePassThroughOptions } from '../datatable';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes) | null | undefined;
export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ColumnGroupPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ColumnGroupProps;
/**
* Defines parent instance.
*/
parent: DataTablePassThroughOptions;
/**
* Defines current options.
*/
context: ColumnGroupContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -27,11 +44,11 @@ export interface ColumnGroupPassThroughMethodOptions {
*/
export interface ColumnGroupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ColumnGroupPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -53,10 +70,15 @@ export interface ColumnGroupProps {
*/
type?: 'header' | 'footer' | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ColumnGroupPassThroughOptions}
*/
pt?: ColumnGroupPassThroughOptions;
pt?: PassThrough<ColumnGroupPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -72,6 +94,11 @@ export interface ColumnGroupContext {
* Current type of the column group.
*/
type: string;
/**
* Current scrollable state of column group as a boolean.
* @defaultValue false
*/
scrollable: boolean;
}
/**

212
components/lib/config/PrimeVue.d.ts vendored
View file

@ -3,6 +3,7 @@ import { AccordionPassThroughOptions } from '../accordion';
import { AccordionTabPassThroughOptions } from '../accordiontab';
import { AutoCompletePassThroughOptions } from '../autocomplete';
import { AvatarPassThroughOptions } from '../avatar';
import { AvatarGroupPassThroughOptions } from '../avatargroup';
import { BadgePassThroughOptions } from '../badge';
import { BadgeDirectivePassThroughOptions } from '../badgedirective';
import { BlockUIPassThroughOptions } from '../blockui';
@ -17,6 +18,7 @@ import { CheckboxPassThroughOptions } from '../checkbox';
import { ChipPassThroughOptions } from '../chip';
import { ChipsPassThroughOptions } from '../chips';
import { ColorPickerPassThroughOptions } from '../colorpicker';
import { ColumnPassThroughOptions } from '../column';
import { ColumnGroupPassThroughOptions } from '../columngroup';
import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
@ -59,6 +61,7 @@ import { PickListPassThroughOptions } from '../picklist';
import { ProgressBarPassThroughOptions } from '../progressbar';
import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
import { RadioButtonPassThroughOptions } from '../radiobutton';
import { RatingPassThroughOptions } from '../rating';
import { RippleDirectivePassThroughOptions } from '../ripple';
import { RowPassThroughOptions } from '../row';
import { ScrollPanelPassThroughOptions } from '../scrollpanel';
@ -66,9 +69,11 @@ import { ScrollTopPassThroughOptions } from '../scrolltop';
import { SelectButtonPassThroughOptions } from '../selectbutton';
import { SidebarPassThroughOptions } from '../sidebar';
import { SkeletonPassThroughOptions } from '../skeleton';
import { SliderPassThroughOptions } from '../slider';
import { SpeedDialPassThroughOptions } from '../speeddial';
import { SplitButtonPassThroughOptions } from '../splitbutton';
import { SplitterPassThroughOptions } from '../splitter';
import { SplitterPanelPassThroughOptions } from '../splitterpanel';
import { StepsPassThroughOptions } from '../steps';
import { StyleClassDirectivePassThroughOptions } from '../styleclass';
import { TabMenuPassThroughOptions } from '../tabmenu';
@ -80,115 +85,129 @@ import { TextareaPassThroughOptions } from '../textarea';
import { TieredMenuPassThroughOptions } from '../tieredmenu';
import { TimelinePassThroughOptions } from '../timeline';
import { ToastPassThroughOptions } from '../toast';
import { ToggleButtonPassThroughOptions } from '../togglebutton';
import { ToolbarPassThroughOptions } from '../toolbar';
import { TooltipDirectivePassThroughOptions } from '../tooltip';
import { TreePassThroughOptions } from '../tree';
import { TreeSelectPassThroughOptions } from '../treeselect';
import { TreeTablePassThroughOptions } from '../treetable';
import { DefaultPTOptions } from '../ts-helpers';
import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
import { DefaultPassThrough, PassThrough } from '../ts-helpers';
import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
interface PrimeVueConfiguration {
export interface PrimeVueConfiguration {
ripple?: boolean;
inputStyle?: string;
locale?: PrimeVueLocaleOptions;
filterMatchModeOptions?: any;
zIndex?: PrimeVueZIndexOptions;
pt?: PrimeVuePTOptions;
pt?: PassThrough<PrimeVuePTOptions>;
unstyled?: boolean;
csp?: PrimeVueCSPOptions;
}
interface PrimeVueZIndexOptions {
export interface PrimeVueZIndexOptions {
modal?: number;
overlay?: number;
menu?: number;
tooltip?: number;
}
interface PrimeVuePTOptions {
accordion?: DefaultPTOptions<AccordionPassThroughOptions>;
accordiontab?: DefaultPTOptions<AccordionTabPassThroughOptions>;
autocomplete?: DefaultPTOptions<AutoCompletePassThroughOptions>;
avatar?: DefaultPTOptions<AvatarPassThroughOptions>;
badge?: DefaultPTOptions<BadgePassThroughOptions>;
blockui?: DefaultPTOptions<BlockUIPassThroughOptions>;
breadcrumb?: DefaultPTOptions<BreadcrumbPassThroughOptions>;
button?: DefaultPTOptions<ButtonPassThroughOptions>;
calendar?: DefaultPTOptions<CalendarPassThroughOptions>;
card?: DefaultPTOptions<CardPassThroughOptions>;
carousel?: DefaultPTOptions<CarouselPassThroughOptions>;
cascadeselect?: DefaultPTOptions<CascadeSelectPassThroughOptions>;
chart?: DefaultPTOptions<ChartPassThroughOptions>;
checkbox?: DefaultPTOptions<CheckboxPassThroughOptions>;
chip?: DefaultPTOptions<ChipPassThroughOptions>;
chips?: DefaultPTOptions<ChipsPassThroughOptions>;
colorpicker?: DefaultPTOptions<ColorPickerPassThroughOptions>;
columngroup?: DefaultPTOptions<ColumnGroupPassThroughOptions>;
confirmdialog?: DefaultPTOptions<ConfirmDialogPassThroughOptions>;
confirmpopup?: DefaultPTOptions<ConfirmPopupPassThroughOptions>;
contextmenu?: DefaultPTOptions<ContextMenuPassThroughOptions>;
datatable?: DefaultPTOptions<DataTablePassThroughOptions>;
dataview?: DefaultPTOptions<DataViewPassThroughOptions>;
dataviewlayoutoptions?: DefaultPTOptions<DataViewLayoutOptionsPassThroughOptions>;
deferredcontent?: DefaultPTOptions<DeferredContentPassThroughOptions>;
divider?: DefaultPTOptions<DividerPassThroughOptions>;
dialog?: DefaultPTOptions<DialogPassThroughOptions>;
dock?: DefaultPTOptions<DockPassThroughOptions>;
dropdown?: DefaultPTOptions<DropdownPassThroughOptions>;
dynamicdialog?: DefaultPTOptions<DialogPassThroughOptions>;
editor?: DefaultPTOptions<EditorPassThroughOptions>;
fieldset?: DefaultPTOptions<FieldsetPassThroughOptions>;
fileupload?: DefaultPTOptions<FileUploadPassThroughOptions>;
galleria?: DefaultPTOptions<GalleriaPassThroughOptions>;
image?: DefaultPTOptions<ImagePassThroughOptions>;
inlinemessage?: DefaultPTOptions<InlineMessagePassThroughOptions>;
inplace?: DefaultPTOptions<InplacePassThroughOptions>;
inputmask?: DefaultPTOptions<InputMaskPassThroughOptions>;
inputnumber?: DefaultPTOptions<InputNumberPassThroughOptions>;
inputswitch?: DefaultPTOptions<InputSwitchPassThroughOptions>;
inputtext?: DefaultPTOptions<InputTextPassThroughOptions>;
knob?: DefaultPTOptions<KnobPassThroughOptions>;
listbox?: DefaultPTOptions<ListboxPassThroughOptions>;
megamenu?: DefaultPTOptions<MegaMenuPassThroughOptions>;
menu?: DefaultPTOptions<MenuPassThroughOptions>;
menubar?: DefaultPTOptions<MenubarPassThroughOptions>;
message?: DefaultPTOptions<MessagePassThroughOptions>;
multiselect?: DefaultPTOptions<MultiSelectPassThroughOptions>;
orderlist?: DefaultPTOptions<OrderListPassThroughOptions>;
organizationchart?: DefaultPTOptions<OrganizationChartPassThroughOptions>;
overlaypanel?: DefaultPTOptions<OverlayPanelPassThroughOptions>;
paginator?: DefaultPTOptions<PaginatorPassThroughOptions>;
panel?: DefaultPTOptions<PanelPassThroughOptions>;
panelmenu?: DefaultPTOptions<PanelMenuPassThroughOptions>;
password?: DefaultPTOptions<PasswordPassThroughOptions>;
picklist?: DefaultPTOptions<PickListPassThroughOptions>;
progressbar?: DefaultPTOptions<ProgressBarPassThroughOptions>;
progressspinner?: DefaultPTOptions<ProgressSpinnerPassThroughOptions>;
radiobutton?: DefaultPTOptions<RadioButtonPassThroughOptions>;
row?: DefaultPTOptions<RowPassThroughOptions>;
scrollpanel?: DefaultPTOptions<ScrollPanelPassThroughOptions>;
scrolltop?: DefaultPTOptions<ScrollTopPassThroughOptions>;
sidebar?: DefaultPTOptions<SidebarPassThroughOptions>;
skeleton?: DefaultPTOptions<SkeletonPassThroughOptions>;
speeddial?: DefaultPTOptions<SpeedDialPassThroughOptions>;
selectbutton?: DefaultPTOptions<SelectButtonPassThroughOptions>;
splitbutton?: DefaultPTOptions<SplitButtonPassThroughOptions>;
splitter?: DefaultPTOptions<SplitterPassThroughOptions>;
steps?: DefaultPTOptions<StepsPassThroughOptions>;
tabmenu?: DefaultPTOptions<TabMenuPassThroughOptions>;
tabpanel?: DefaultPTOptions<TabPanelPassThroughOptions>;
tabview?: DefaultPTOptions<TabViewPassThroughOptions>;
tag?: DefaultPTOptions<TagPassThroughOptions>;
terminal?: DefaultPTOptions<TerminalPassThroughOptions>;
textarea?: DefaultPTOptions<TextareaPassThroughOptions>;
tieredmenu?: DefaultPTOptions<TieredMenuPassThroughOptions>;
timeline?: DefaultPTOptions<TimelinePassThroughOptions>;
toast?: DefaultPTOptions<ToastPassThroughOptions>;
toolbar?: DefaultPTOptions<ToolbarPassThroughOptions>;
tree?: DefaultPTOptions<TreePassThroughOptions>;
treeselect?: DefaultPTOptions<TreeSelectPassThroughOptions>;
treetable?: DefaultPTOptions<TreeTablePassThroughOptions>;
virtualscroller?: DefaultPTOptions<VirtualScrollerPassThroughOptions>;
export interface PrimeVueCSPOptions {
nonce?: string;
}
export interface PrimeVuePTOptions {
accordion?: DefaultPassThrough<AccordionPassThroughOptions>;
accordiontab?: DefaultPassThrough<AccordionTabPassThroughOptions>;
autocomplete?: DefaultPassThrough<AutoCompletePassThroughOptions>;
avatar?: DefaultPassThrough<AvatarPassThroughOptions>;
avatargroup?: DefaultPassThrough<AvatarGroupPassThroughOptions>;
badge?: DefaultPassThrough<BadgePassThroughOptions>;
blockui?: DefaultPassThrough<BlockUIPassThroughOptions>;
breadcrumb?: DefaultPassThrough<BreadcrumbPassThroughOptions>;
button?: DefaultPassThrough<ButtonPassThroughOptions>;
calendar?: DefaultPassThrough<CalendarPassThroughOptions>;
card?: DefaultPassThrough<CardPassThroughOptions>;
carousel?: DefaultPassThrough<CarouselPassThroughOptions>;
cascadeselect?: DefaultPassThrough<CascadeSelectPassThroughOptions>;
chart?: DefaultPassThrough<ChartPassThroughOptions>;
checkbox?: DefaultPassThrough<CheckboxPassThroughOptions>;
chip?: DefaultPassThrough<ChipPassThroughOptions>;
chips?: DefaultPassThrough<ChipsPassThroughOptions>;
colorpicker?: DefaultPassThrough<ColorPickerPassThroughOptions>;
column?: DefaultPassThrough<ColumnPassThroughOptions>;
columngroup?: DefaultPassThrough<ColumnGroupPassThroughOptions>;
confirmdialog?: DefaultPassThrough<ConfirmDialogPassThroughOptions>;
confirmpopup?: DefaultPassThrough<ConfirmPopupPassThroughOptions>;
contextmenu?: DefaultPassThrough<ContextMenuPassThroughOptions>;
datatable?: DefaultPassThrough<DataTablePassThroughOptions>;
dataview?: DefaultPassThrough<DataViewPassThroughOptions>;
dataviewlayoutoptions?: DefaultPassThrough<DataViewLayoutOptionsPassThroughOptions>;
deferredcontent?: DefaultPassThrough<DeferredContentPassThroughOptions>;
divider?: DefaultPassThrough<DividerPassThroughOptions>;
dialog?: DefaultPassThrough<DialogPassThroughOptions>;
dock?: DefaultPassThrough<DockPassThroughOptions>;
dropdown?: DefaultPassThrough<DropdownPassThroughOptions>;
dynamicdialog?: DefaultPassThrough<DialogPassThroughOptions>;
editor?: DefaultPassThrough<EditorPassThroughOptions>;
fieldset?: DefaultPassThrough<FieldsetPassThroughOptions>;
fileupload?: DefaultPassThrough<FileUploadPassThroughOptions>;
galleria?: DefaultPassThrough<GalleriaPassThroughOptions>;
image?: DefaultPassThrough<ImagePassThroughOptions>;
inlinemessage?: DefaultPassThrough<InlineMessagePassThroughOptions>;
inplace?: DefaultPassThrough<InplacePassThroughOptions>;
inputmask?: DefaultPassThrough<InputMaskPassThroughOptions>;
inputnumber?: DefaultPassThrough<InputNumberPassThroughOptions>;
inputswitch?: DefaultPassThrough<InputSwitchPassThroughOptions>;
inputtext?: DefaultPassThrough<InputTextPassThroughOptions>;
knob?: DefaultPassThrough<KnobPassThroughOptions>;
listbox?: DefaultPassThrough<ListboxPassThroughOptions>;
megamenu?: DefaultPassThrough<MegaMenuPassThroughOptions>;
menu?: DefaultPassThrough<MenuPassThroughOptions>;
menubar?: DefaultPassThrough<MenubarPassThroughOptions>;
message?: DefaultPassThrough<MessagePassThroughOptions>;
multiselect?: DefaultPassThrough<MultiSelectPassThroughOptions>;
orderlist?: DefaultPassThrough<OrderListPassThroughOptions>;
organizationchart?: DefaultPassThrough<OrganizationChartPassThroughOptions>;
overlaypanel?: DefaultPassThrough<OverlayPanelPassThroughOptions>;
paginator?: DefaultPassThrough<PaginatorPassThroughOptions>;
panel?: DefaultPassThrough<PanelPassThroughOptions>;
panelmenu?: DefaultPassThrough<PanelMenuPassThroughOptions>;
password?: DefaultPassThrough<PasswordPassThroughOptions>;
picklist?: DefaultPassThrough<PickListPassThroughOptions>;
progressbar?: DefaultPassThrough<ProgressBarPassThroughOptions>;
progressspinner?: DefaultPassThrough<ProgressSpinnerPassThroughOptions>;
radiobutton?: DefaultPassThrough<RadioButtonPassThroughOptions>;
rating?: DefaultPassThrough<RatingPassThroughOptions>;
row?: DefaultPassThrough<RowPassThroughOptions>;
scrollpanel?: DefaultPassThrough<ScrollPanelPassThroughOptions>;
scrolltop?: DefaultPassThrough<ScrollTopPassThroughOptions>;
sidebar?: DefaultPassThrough<SidebarPassThroughOptions>;
skeleton?: DefaultPassThrough<SkeletonPassThroughOptions>;
slider?: DefaultPassThrough<SliderPassThroughOptions>;
speeddial?: DefaultPassThrough<SpeedDialPassThroughOptions>;
selectbutton?: DefaultPassThrough<SelectButtonPassThroughOptions>;
splitbutton?: DefaultPassThrough<SplitButtonPassThroughOptions>;
splitter?: DefaultPassThrough<SplitterPassThroughOptions>;
splitterpanel?: DefaultPassThrough<SplitterPanelPassThroughOptions>;
steps?: DefaultPassThrough<StepsPassThroughOptions>;
tabmenu?: DefaultPassThrough<TabMenuPassThroughOptions>;
tabpanel?: DefaultPassThrough<TabPanelPassThroughOptions>;
tabview?: DefaultPassThrough<TabViewPassThroughOptions>;
tag?: DefaultPassThrough<TagPassThroughOptions>;
terminal?: DefaultPassThrough<TerminalPassThroughOptions>;
textarea?: DefaultPassThrough<TextareaPassThroughOptions>;
tieredmenu?: DefaultPassThrough<TieredMenuPassThroughOptions>;
timeline?: DefaultPassThrough<TimelinePassThroughOptions>;
toast?: DefaultPassThrough<ToastPassThroughOptions>;
togglebutton?: DefaultPassThrough<ToggleButtonPassThroughOptions>;
toolbar?: DefaultPassThrough<ToolbarPassThroughOptions>;
tree?: DefaultPassThrough<TreePassThroughOptions>;
treeselect?: DefaultPassThrough<TreeSelectPassThroughOptions>;
tristatecheckbox?: DefaultPassThrough<TriStateCheckboxPassThroughOptions>;
treetable?: DefaultPassThrough<TreeTablePassThroughOptions>;
virtualscroller?: DefaultPassThrough<VirtualScrollerPassThroughOptions>;
directives?: {
badge?: BadgeDirectivePassThroughOptions;
tooltip?: TooltipDirectivePassThroughOptions;
@ -196,9 +215,12 @@ interface PrimeVuePTOptions {
focustrap?: FocusTrapDirectivePassThroughOptions;
ripple?: RippleDirectivePassThroughOptions;
};
global?: {
css?: (options: any) => string | string | undefined;
};
}
interface PrimeVueLocaleAriaOptions {
export interface PrimeVueLocaleAriaOptions {
trueLabel?: string;
falseLabel?: string;
nullLabel?: string;
@ -249,7 +271,7 @@ interface PrimeVueLocaleAriaOptions {
rotateLeft?: string;
}
interface PrimeVueLocaleOptions {
export interface PrimeVueLocaleOptions {
startsWith?: string;
contains?: string;
notContains?: string;
@ -278,6 +300,7 @@ interface PrimeVueLocaleOptions {
cancel?: string;
completed?: string;
pending?: string;
fileSizeTypes: string[];
dayNames: string[];
dayNamesShort: string[];
dayNamesMin: string[];
@ -318,7 +341,12 @@ interface PrimeVueLocaleOptions {
aria?: PrimeVueLocaleAriaOptions;
}
export declare function usePrimeVue(): { config: PrimeVueConfiguration };
export type PrimeVueChangeTheme = (currentTheme: string, newTheme: string, linkElementId: string, callback?: Function) => void;
export declare function usePrimeVue(): {
config: PrimeVueConfiguration;
changeTheme: PrimeVueChangeTheme;
};
declare const plugin: Plugin;
export default plugin;
@ -327,6 +355,7 @@ declare module 'vue/types/vue' {
interface Vue {
$primevue: {
config: PrimeVueConfiguration;
changeTheme: PrimeVueChangeTheme;
};
}
}
@ -335,6 +364,7 @@ declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$primevue: {
config: PrimeVueConfiguration;
changeTheme: PrimeVueChangeTheme;
};
}
}

6
components/lib/config/PrimeVue.js
View file

@ -33,6 +33,7 @@ export const defaultOptions = {
cancel: 'Cancel',
completed: 'Completed',
pending: 'Pending',
fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@ -133,7 +134,10 @@ export const defaultOptions = {
tooltip: 1100
},
pt: undefined,
unstyled: false
unstyled: false,
csp: {
nonce: undefined
}
};
const PrimeVueSymbol = Symbol();

54
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View file

@ -11,17 +11,31 @@ import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes) | null | undefined;
export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ConfirmDialogPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ConfirmDialogProps;
/**
* Defines current inline state.
*/
state: ConfirmDialogState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -30,57 +44,57 @@ export interface ConfirmDialogPassThroughMethodOptions {
*/
export interface ConfirmDialogPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
* Used to pass attributes to the header title's DOM element.
*/
headerTitle?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the header icons' DOM element.
* Used to pass attributes to the header icons' DOM element.
*/
headerIcons?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button's component.
* Used to pass attributes to the close button's component.
*/
closeButton?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button icon's component.
* Used to pass attributes to the close button icon's component.
*/
closeButtonIcon?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the message's DOM element.
* Used to pass attributes to the message's DOM element.
*/
message?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: ConfirmDialogPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -149,10 +163,15 @@ export interface ConfirmDialogProps {
*/
draggable?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmDialogPassThroughOptions}
*/
pt?: ConfirmDialogPassThroughOptions;
pt?: PassThrough<ConfirmDialogPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -176,6 +195,7 @@ export interface ConfirmDialogSlots {
}): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**

4
components/lib/confirmdialog/ConfirmDialog.spec.js
View file

@ -32,7 +32,7 @@ describe('ConfirmDialog', () => {
await wrapper.vm.reject();
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
});
it('should dialog trigger the accept function', async () => {
@ -128,7 +128,7 @@ describe('ConfirmDialog', () => {
await dialogCloseBtn.trigger('click');
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
});
it('should position work', async () => {

52
components/lib/confirmpopup/ConfirmPopup.d.ts vendored
View file

@ -7,21 +7,37 @@
* @module confirmpopup
*
*/
import { VNode } from 'vue';
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ConfirmationOptions } from '../confirmationoptions';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes | string) | string | null | undefined;
export declare type ConfirmPopupPassThroughTransitionType = TransitionProps | ((options: ConfirmPopupPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ConfirmPopupPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ConfirmPopupProps;
/**
* Defines current inline state.
*/
state: ConfirmPopupState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -30,40 +46,44 @@ export interface ConfirmPopupPassThroughMethodOptions {
*/
export interface ConfirmPopupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the message's DOM element.
* Used to pass attributes to the message's DOM element.
*/
message?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: ConfirmPopupPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the Button component.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: ConfirmPopupPassThroughTransitionType;
}
/**
@ -97,10 +117,15 @@ export interface ConfirmPopupProps {
*/
group?: string;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ConfirmPopupPassThroughOptions}
*/
pt?: ConfirmPopupPassThroughOptions;
pt?: PassThrough<ConfirmPopupPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -124,6 +149,7 @@ export interface ConfirmPopupSlots {
}): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**

2
components/lib/confirmpopup/ConfirmPopup.vue
View file

@ -1,6 +1,6 @@
<template>
<Portal>
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="cx('root')" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
<template v-if="!$slots.message">
<div :class="cx('content')" v-bind="ptm('content')">

99
components/lib/contextmenu/ContextMenu.d.ts vendored
View file

@ -8,21 +8,40 @@
* @module contextmenu
*
*/
import { VNode } from 'vue';
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes) | null | undefined;
export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | string) | string | null | undefined;
export declare type ContextMenuPassThroughTransitionType = TransitionProps | ((options: ContextMenuPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ContextMenuPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ContextMenuProps;
/**
* Defines current inline state.
*/
state: ContextMenuState;
/**
* Defines current options.
*/
context: ContextMenuContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -31,50 +50,54 @@ export interface ContextMenuPassThroughMethodOptions {
*/
export interface ContextMenuPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
menu?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the list item's DOM element.
* Used to pass attributes to the list item's DOM element.
*/
menuitem?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the action's DOM element.
* Used to pass attributes to the action's DOM element.
*/
action?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu icon's DOM element.
* Used to pass attributes to the submenu icon's DOM element.
*/
submenuIcon?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
* Used to pass attributes to the separator's DOM element.
*/
separator?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
* Used to pass attributes to the submenu's DOM element.
*/
submenu?: ContextMenuPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: ContextMenuPassThroughTransitionType;
}
/**
@ -141,6 +164,14 @@ export interface ContextMenuState {
* Defines current options in ContextMenu component.
*/
export interface ContextMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
@ -153,6 +184,28 @@ export interface ContextMenuContext {
focused: boolean;
}
/**
* Defines valid router binding props in ContextMenu component.
*/
export interface ContextMenuRouterBindProps {
/**
* Action element binding
*/
action: object;
/**
* Icon element binding
*/
icon: object;
/**
* Label element binding
*/
label: object;
/**
* Submenuicon elemnt binding
*/
submenuicon: object;
}
/**
* Defines valid properties in ContextMenu component.
*/
@ -199,10 +252,15 @@ export interface ContextMenuProps {
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {ContextMenuPassThroughOptions}
*/
pt?: ContextMenuPassThroughOptions;
pt?: PassThrough<ContextMenuPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -223,6 +281,14 @@ export interface ContextMenuSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: ContextMenuRouterBindProps;
}): VNode[];
/**
* Custom item icon template.
@ -240,6 +306,7 @@ export interface ContextMenuSlots {
}): VNode[];
/**
* Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params.
*/
submenuicon(scope: {
/**

22
components/lib/contextmenu/ContextMenu.vue
View file

@ -1,6 +1,6 @@
<template>
<Portal :appendTo="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
<transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="contextmenu">
<ContextMenuSub
:ref="listRef"
@ -22,6 +22,7 @@
:level="0"
:visible="submenuVisible"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@ -78,6 +79,18 @@ export default {
}
}
},
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.global) {
this.bindDocumentContextMenuListener();
}
},
beforeUnmount() {
this.unbindResizeListener();
this.unbindOutsideClickListener();
@ -90,13 +103,6 @@ export default {
this.target = null;
this.container = null;
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.global) {
this.bindDocumentContextMenuListener();
}
},
methods: {
getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;

62
components/lib/contextmenu/ContextMenuSub.vue
View file

@ -1,5 +1,5 @@
<template>
<transition name="p-contextmenusub" @enter="onEnter">
<transition name="p-contextmenusub" @enter="onEnter" v-bind="ptm('menu.transition')">
<ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('menu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
@ -15,31 +15,31 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
v-bind="getPTOptions('menuitem', processedItem, index)"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<ContextMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@ -53,8 +53,9 @@
:activeItemPath="activeItemPath"
:exact="exact"
:level="level + 1"
:pt="pt"
:visible="isItemActive(processedItem) && isItemGroup(processedItem)"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
v-bind="ptm('submenu')"
@ -78,6 +79,7 @@ import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'ContextMenuSub',
@ -139,11 +141,13 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
getPTOptions(key, processedItem, index) {
return this.ptm(key, {
context: {
item: processedItem,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
focused: this.isItemFocused(processedItem),
index
}
});
},
@ -195,6 +199,36 @@ export default {
} else {
this.$refs.container.style.left = itemOuterWidth + 'px';
}
},
getMenuItemProps(processedItem, index) {
return {
action: mergeProps(
{
class: this.cx('action'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions('action', processedItem, index)
),
icon: mergeProps(
{
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
},
this.getPTOptions('icon', processedItem, index)
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions('label', processedItem, index)
),
submenuicon: mergeProps(
{
class: this.cx('submenuIcon')
},
this.getPTOptions('submenuicon', processedItem, index)
)
};
}
},
components: {

10
components/lib/datatable/BaseDataTable.vue
View file

@ -259,7 +259,9 @@ const classes = {
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': instance.headerColumnGroup != null,
'p-datatable-grouped-footer': instance.footerColumnGroup != null
'p-datatable-grouped-footer': instance.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
}
],
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
@ -279,7 +281,7 @@ const classes = {
thead: 'p-datatable-thead',
// headercell
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
'p-filter-column',
{
@ -709,6 +711,10 @@ export default {
type: Boolean,
default: false
},
size: {
type: String,
default: null
},
tableStyle: {
type: null,
default: null

32
components/lib/datatable/BodyCell.vue
View file

@ -6,6 +6,8 @@
v-else
:style="containerStyle"
:class="containerClass"
:colspan="columnProp('colspan')"
:rowspan="columnProp('rowspan')"
@click="onClick"
@keydown="onKeyDown"
role="cell"
@ -46,11 +48,21 @@
</template>
<template v-else-if="columnProp('rowReorder')">
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" />
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('rowReorderIcon')" />
<BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" />
</template>
<template v-else-if="columnProp('expander')">
<button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPT('rowToggler')">
<button
v-ripple
:class="cx('rowToggler')"
type="button"
:aria-expanded="isRowExpanded"
:aria-controls="ariaControls"
:aria-label="expandButtonAriaLabel"
@click="toggleRow"
v-bind="getColumnPT('rowToggler')"
data-pc-group-section="rowactionbutton"
>
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
<template v-else>
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
@ -61,13 +73,13 @@
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')">
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')">
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
</button>
</template>
@ -86,6 +98,7 @@ import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import RowCheckbox from './RowCheckbox.vue';
import RowRadioButton from './RowRadioButton.vue';
@ -213,11 +226,13 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
size: this.$parentInstance?.$parentInstance?.size,
showGridlines: this.$parentInstance?.$parentInstance?.showGridlines
}
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
@ -311,6 +326,7 @@ export default {
if (this.editMode === 'cell') {
switch (event.code) {
case 'Enter':
case 'NumpadEnter':
this.completeEdit(event, 'enter');
break;

53
components/lib/datatable/ColumnFilter.vue
View file

@ -14,15 +14,15 @@
:class="cx('filterMenuButton')"
@click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)"
v-bind="getColumnPT('filterMenuButton')"
v-bind="getColumnPT('filterMenuButton', ptmFilterMenuParams)"
>
<component :is="filterIconTemplate || 'FilterIcon'" />
<component :is="filterIconTemplate || 'FilterIcon'" v-bind="getColumnPT('filterMenuIcon')" />
</button>
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton')">
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams)">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
</button>
<Portal>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
<div
v-if="overlayVisible"
:ref="overlayRef"
@ -47,7 +47,7 @@
@keydown="onRowMatchModeKeyDown($event)"
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:tabindex="i === 0 ? '0' : null"
v-bind="getColumnPT('filterRowItem')"
v-bind="getColumnPT('filterRowItem', ptmFilterRowItemOptions(matchMode))"
>
{{ matchMode.label }}
</li>
@ -96,6 +96,9 @@
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
text
severity="danger"
size="small"
:pt="getColumnPT('filterRemoveButton')"
data-pc-section="filterremovebutton"
>
@ -114,6 +117,9 @@
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
text
severity="info"
size="small"
:pt="getColumnPT('filterAddRuleButton')"
data-pc-section="filteraddrulebutton"
>
@ -130,6 +136,8 @@
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
size="small"
outlined
:pt="getColumnPT('filterClearButton')"
data-pc-section="filterclearbutton"
></CFButton>
@ -142,6 +150,7 @@
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
size="small"
:pt="getColumnPT('filterApplyButton')"
data-pc-section="filterapplybutton"
></CFButton>
@ -169,6 +178,7 @@ import TrashIcon from 'primevue/icons/trash';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'ColumnFilter',
@ -316,18 +326,28 @@ export default {
}
},
methods: {
getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key, params) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
...params
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
ptmFilterRowItemOptions(matchMode) {
return {
context: {
highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
}
};
},
clearFilter() {
let _filters = { ...this.filters };
@ -667,6 +687,21 @@ export default {
},
filterConstraintAriaLabel() {
return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
},
ptmHeaderFilterClearParams() {
return {
context: {
hidden: this.hasRowFilter()
}
};
},
ptmFilterMenuParams() {
return {
context: {
overlayVisible: this.overlayVisible,
active: this.hasFilter()
}
};
}
},
components: {

146
components/lib/datatable/DataTable.d.ts vendored
View file

@ -7,24 +7,44 @@
* @module datatable
*
*/
import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ColumnPassThroughOptionType } from '../column';
import { ColumnGroupPassThroughOptionType } from '../columngroup';
import { PaginatorPassThroughOptionType } from '../paginator';
import { PassThroughOptions } from '../passthrough';
import { RowPassThroughOptionType } from '../row';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes) | null | undefined;
export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
export declare type DataTablePassThroughTransitionType = TransitionProps | ((options: DataTablePassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DataTablePassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DataTableProps;
/**
* Defines current inline state.
*/
state: DataTableState;
/**
* Defines current options.
*/
context: DataTableContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -543,116 +563,136 @@ export interface DataTableStateEvent {
*/
export interface DataTablePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the loading overlay's DOM element.
* Used to pass attributes to the loading overlay's DOM element.
*/
loadingOverlay?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the Paginator component.
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType;
/**
* Uses to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the wrapper's DOM element.
*/
wrapper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the VirtualScroller component.
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
*/
virtualScroller?: VirtualScrollerPassThroughOptionType;
/**
* Uses to pass attributes to the table's DOM element.
* Used to pass attributes to the table's DOM element.
*/
table?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the virtual scroller spacer's DOM element.
* Used to pass attributes to the virtual scroller spacer's DOM element.
*/
virtualScrollerSpacer?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the thead's DOM element.
* Used to pass attributes to the thead's DOM element.
*/
thead?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the header row's DOM element.
* Used to pass attributes to the header row's DOM element.
*/
headerRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the tbody's DOM element.
* Used to pass attributes to the tbody's DOM element.
*/
tbody?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup header's DOM element.
* Used to pass attributes to the rowgroup header's DOM element.
*/
rowGroupHeader?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the body row's DOM element.
* Used to pass attributes to the rowgroup header cell's DOM element.
*/
rowGroupHeaderCell?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the body row's DOM element.
*/
bodyRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row expansion's DOM element.
* Used to pass attributes to the row expansion's DOM element.
*/
rowExpansion?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the rowgroup footer's DOM element.
* Used to pass attributes to the row expansion cell's DOM element.
*/
rowExpansionCell?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the rowgroup footer's DOM element.
*/
rowGroupFooter?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the empty message's DOM element.
* Used to pass attributes to the rowgroup footer cell's DOM element.
*/
rowGroupFooterCell?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the empty message's DOM element.
*/
emptyMessage?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the tfoot's DOM element.
* Used to pass attributes to the empty message cell's DOM element.
*/
emptyMessageCell?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the tfoot's DOM element.
*/
tfoot?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the footerr ow's DOM element.
* Used to pass attributes to the footer row's DOM element.
*/
footerRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the resize helper's DOM element.
* Used to pass attributes to the resize helper's DOM element.
*/
resizeHelper?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the reorder indicator up's DOM element.
* Used to pass attributes to the reorder indicator up's DOM element.
*/
reorderIndicatorUp?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the reorder indicator down's DOM element.
* Used to pass attributes to the reorder indicator down's DOM element.
*/
reorderIndicatorDown?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the ColumnGroup helper components.
* Used to pass attributes to the ColumnGroup helper components.
*/
columnGroup?: ColumnGroupPassThroughOptionType;
/**
* Uses to pass attributes to the Row helper components.
* Used to pass attributes to the Row helper components.
*/
row?: RowPassThroughOptionType;
/**
* Uses to pass attributes to the Column helper components.
* Used to pass attributes to the Column helper components.
*/
column?: ColumnPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: DataTablePassThroughTransitionType;
}
/**
@ -721,6 +761,31 @@ export interface DataTableState {
d_editing: boolean;
}
/**
* Defines current options in DataTable component.
*/
export interface DataTableContext {
/**
* Current index of the row.
*/
index: number;
/**
* Current selectable state of row as a boolean.
* @defaultValue false
*/
selectable: boolean;
/**
* Current selected state of row as a boolean.
* @defaultValue false
*/
selected: boolean;
/**
* Current stripedRows state of row as a boolean.
* @defaultValue false
*/
stripedRows: boolean;
}
/**
* Defines valid properties in DataTable component.
*/
@ -908,7 +973,7 @@ export interface DataTableProps {
/**
* Custom function to export data.
*/
exportFunction?(options: DataTableExportFunctionOptions): any;
exportFunction?: (options: DataTableExportFunctionOptions) => any;
/**
* When enabled, columns can be resized using drag and drop.
* @defaultValue false
@ -1013,6 +1078,10 @@ export interface DataTableProps {
* @defaultValue false
*/
stripedRows?: boolean | undefined;
/**
* Defines the size of the table.
*/
size?: 'small' | 'large' | undefined;
/**
* Inline style of the table element.
*/
@ -1022,18 +1091,23 @@ export interface DataTableProps {
*/
tableClass?: any;
/**
* Uses to pass all properties of the TableHTMLAttributes to table element inside the component.
* Used to pass all properties of the TableHTMLAttributes to table element inside the component.
*/
tableProps?: TableHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
* Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
*/
filterInputProps?: InputHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DataTablePassThroughOptions}
*/
pt?: DataTablePassThroughOptions;
pt?: PassThrough<DataTablePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -1067,6 +1141,7 @@ export interface DataTableSlots {
empty(): VNode[];
/**
* Custom group header template.
* @param {Object} scope - group header slot's params.
*/
groupheader(scope: {
/**
@ -1094,6 +1169,7 @@ export interface DataTableSlots {
}): VNode[];
/**
* Custom loading template.
* @param {Object} scope - loading slot's params.
*/
loading(): VNode[];
/**

2
components/lib/datatable/DataTable.spec.js
View file

@ -646,7 +646,7 @@ describe('DataTable.vue', () => {
it('should vertical scroll', async () => {
await wrapper.setProps({ scrollable: true, scrollHeight: '100px' });
expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('max-height: 100px;');
expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('overflow: auto; max-height: 100px;');
});
it('should flex scrolling', async () => {

72
components/lib/datatable/DataTable.vue
View file

@ -386,9 +386,12 @@ export default {
this.updateExpandedRowKeys(newValue);
}
},
editingRows(newValue) {
if (this.dataKey) {
this.updateEditingRowKeys(newValue);
editingRows: {
deep: true,
handler(newValue) {
if (this.dataKey) {
this.updateEditingRowKeys(newValue);
}
}
},
filters: {
@ -466,7 +469,8 @@ export default {
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon'
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
) {
DomHandler.clearSelection();
@ -515,17 +519,24 @@ export default {
}
let data = [...value];
let resolvedFieldDatas = new Map();
for (let item of data) {
resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
}
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
data.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.d_sortField);
let value1 = resolvedFieldDatas.get(data1);
let value2 = resolvedFieldDatas.get(data2);
let result = null;
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.d_sortOrder * result;
@ -561,7 +572,9 @@ export default {
if (typeof value1 === 'string' || value1 instanceof String) {
if (value1.localeCompare && value1 !== value2) {
return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
return this.d_multiSortMeta[index].order * comparer(value1, value2);
}
} else {
result = value1 < value2 ? -1 : 1;
@ -585,6 +598,26 @@ export default {
this.d_multiSortMeta = [...this.d_multiSortMeta];
},
getActiveFilters(filters) {
const removeEmptyFilters = ([key, value]) => {
if (value.constraints) {
const filteredConstraints = value.constraints.filter((constraint) => constraint.value !== null);
if (filteredConstraints.length > 0) {
return [key, { ...value, constraints: filteredConstraints }];
}
} else if (value.value !== null) {
return [key, value];
}
return undefined;
};
const filterValidEntries = (entry) => entry !== undefined;
const entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
return Object.fromEntries(entries);
},
filter(data) {
if (!data) {
return;
@ -592,9 +625,10 @@ export default {
this.clearEditingMetaData();
let activeFilters = this.getActiveFilters(this.filters);
let globalFilterFieldsArray;
if (this.filters['global']) {
if (activeFilters['global']) {
globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
}
@ -605,11 +639,11 @@ export default {
let globalMatch = false;
let localFiltered = false;
for (let prop in this.filters) {
if (Object.prototype.hasOwnProperty.call(this.filters, prop) && prop !== 'global') {
for (let prop in activeFilters) {
if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
localFiltered = true;
let filterField = prop;
let filterMeta = this.filters[filterField];
let filterMeta = activeFilters[filterField];
if (filterMeta.operator) {
for (let filterConstraint of filterMeta.constraints) {
@ -629,11 +663,11 @@ export default {
}
}
if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
if (localMatch && activeFilters['global'] && !globalMatch && globalFilterFieldsArray) {
for (let j = 0; j < globalFilterFieldsArray.length; j++) {
let globalFilterField = globalFilterFieldsArray[j];
globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
if (globalMatch) {
break;
@ -643,7 +677,7 @@ export default {
let matches;
if (this.filters['global']) {
if (activeFilters['global']) {
matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
} else {
matches = localFiltered && localMatch;
@ -654,7 +688,7 @@ export default {
}
}
if (filteredValue.length === this.value.length) {
if (filteredValue.length === this.value.length || Object.keys(activeFilters).length == 0) {
filteredValue = data;
}
@ -1228,6 +1262,8 @@ export default {
!!el && (el.style.width = el.style.minWidth = tableWidth);
};
// Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
this.resizeTableCells(newColumnWidth);
updateTableWidth(this.$refs.table);
if (!this.virtualScrollerDisabled) {
@ -1237,8 +1273,6 @@ export default {
updateTableWidth(body);
updateTableWidth(frozenBody);
}
this.resizeTableCells(newColumnWidth);
}
this.$emit('column-resize-end', {
@ -1851,12 +1885,14 @@ export default {
createStyleElement() {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
},
createResponsiveStyle() {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css';
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.responsiveStyleElement);
let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

7
components/lib/datatable/FooterCell.vue
View file

@ -8,6 +8,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'FooterCell',
@ -50,11 +51,13 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
size: this.$parentInstance?.$parentInstance?.size,
showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
}
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

11
components/lib/datatable/HeaderCell.vue
View file

@ -27,7 +27,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox
@ -87,6 +87,7 @@ import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown';
import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import ColumnFilter from './ColumnFilter.vue';
import HeaderCheckbox from './HeaderCheckbox.vue';
@ -213,11 +214,15 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
sorted: this.isColumnSorted(),
resizable: this.resizableColumns,
size: this.$parentInstance?.$parentInstance?.size,
showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
}
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

7
components/lib/datatable/HeaderCheckbox.vue
View file

@ -24,6 +24,7 @@
import BaseComponent from 'primevue/basecomponent';
import CheckIcon from 'primevue/icons/check';
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'HeaderCheckbox',
@ -46,7 +47,7 @@ export default {
},
methods: {
getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
@ -57,7 +58,9 @@ export default {
focused: this.focused,
disabled: this.disabled
}
});
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

7
components/lib/datatable/RowCheckbox.vue
View file

@ -25,6 +25,7 @@
import BaseComponent from 'primevue/basecomponent';
import CheckIcon from 'primevue/icons/check';
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'RowCheckbox',
@ -51,7 +52,7 @@ export default {
},
methods: {
getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
@ -63,7 +64,9 @@ export default {
focused: this.focused,
disabled: this.$attrs.disabled
}
});
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

7
components/lib/datatable/RowRadioButton.vue
View file

@ -12,6 +12,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'RowRadioButton',
@ -36,7 +37,7 @@ export default {
},
methods: {
getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
@ -48,7 +49,9 @@ export default {
focused: this.focused,
disabled: this.$attrs.disabled
}
});
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

53
components/lib/datatable/TableBody.vue
View file

@ -1,5 +1,5 @@
<template>
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
<template v-if="!empty">
<template v-for="(rowData, index) of value">
<tr
@ -10,14 +10,14 @@
role="row"
v-bind="ptm('rowGroupHeader')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPT('rowGroupToggler')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
<template v-else>
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
</template>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@ -35,14 +35,14 @@
@dblclick="onRowDblClick($event, rowData, getRowIndex(index))"
@contextmenu="onRowRightClick($event, rowData, getRowIndex(index))"
@touchend="onRowTouchEnd($event)"
@keydown="onRowKeyDown($event, rowData, getRowIndex(index))"
@keydown.self="onRowKeyDown($event, rowData, getRowIndex(index))"
@mousedown="onRowMouseDown($event)"
@dragstart="onRowDragStart($event, getRowIndex(index))"
@dragover="onRowDragOver($event, getRowIndex(index))"
@dragleave="onRowDragLeave($event)"
@dragend="onRowDragEnd($event)"
@drop="onRowDrop($event)"
v-bind="ptm('bodyRow')"
v-bind="getBodyRowPTOptions('bodyRow', rowData, index)"
:data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected(rowData)"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
@ -91,7 +91,7 @@
role="row"
v-bind="ptm('rowExpansion')"
>
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
@ -102,14 +102,14 @@
role="row"
v-bind="ptm('rowGroupFooter')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
</template>
</template>
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
<component v-if="templates.empty" :is="templates.empty" />
</td>
</tr>
@ -121,6 +121,7 @@ import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
import BodyCell from './BodyCell.vue';
export default {
@ -306,18 +307,29 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnPT(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
getColumnPT(key) {
const columnMetaData = {
parent: {
props: this.$props,
state: this.$data
}
});
};
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp({}), key, columnMetaData));
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
getBodyRowPTOptions(key, rowdata, index) {
return this.ptm(key, {
context: {
index,
selectable: this.$parentInstance?.$parentInstance?.rowHover || this.$parentInstance?.$parentInstance?.selectionMode,
selected: this.isSelected(rowdata),
stripedRows: this.$parentInstance?.$parentInstance?.stripedRows || false
}
});
},
shouldRenderRowGroupHeader(value, rowData, i) {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let prevRowData = value[i - 1];
@ -336,7 +348,7 @@ export default {
getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : this.first + index;
return getItemOptions ? getItemOptions(index).index : index;
},
getRowStyle(rowData) {
if (this.rowStyle) {
@ -609,6 +621,13 @@ export default {
},
nameAttributeSelector() {
return UniqueComponentId();
},
ptmTBodyOptions() {
return {
context: {
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
}
},
components: {

17
components/lib/datatable/TableFooter.vue
View file

@ -1,5 +1,5 @@
<template>
<tfoot v-if="hasFooter" :class="cx('tfoot')" :style="sx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
<tfoot v-if="hasFooter" :class="cx('tfoot')" :style="sx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot', ptmTFootOptions), ...getColumnGroupPT('root') } : ptm('tfoot', ptmTFootOptions)" data-pc-section="tfoot">
<tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
@ -18,6 +18,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import FooterCell from './FooterCell.vue';
export default {
@ -46,11 +47,12 @@ export default {
state: this.$data
},
context: {
type: 'header'
type: 'footer',
scrollable: this.ptmTFootOptions.context.scrollable
}
};
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
return mergeProps(this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), this.ptm(`columnGroup.${key}`, columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
},
getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@ -67,7 +69,7 @@ export default {
}
};
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
return mergeProps(this.ptm(`row.${key}`, { row: rowMetaData }), this.ptm(`row.${key}`, rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
@ -118,6 +120,13 @@ export default {
}
return hasFooter;
},
ptmTFootOptions() {
return {
context: {
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
}
},
components: {

21
components/lib/datatable/TableHeader.vue
View file

@ -1,5 +1,5 @@
<template>
<thead :class="cx('thead')" :style="sx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
<thead :class="cx('thead')" :style="sx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead', ptmTHeadOptions), ...getColumnGroupPT('root') } : ptm('thead', ptmTHeadOptions)" data-pc-section="thead">
<template v-if="!columnGroup">
<tr role="row" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@ -131,6 +131,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
import ColumnFilter from './ColumnFilter.vue';
import HeaderCell from './HeaderCell.vue';
import HeaderCheckbox from './HeaderCheckbox.vue';
@ -243,11 +244,12 @@ export default {
state: this.$data
},
context: {
type: 'header'
type: 'header',
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
return mergeProps(this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), this.ptm(`columnGroup.${key}`, columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
},
getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@ -264,7 +266,7 @@ export default {
}
};
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
return mergeProps(this.ptm(`row.${key}`, { row: rowMetaData }), this.ptm(`row.${key}`, rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
@ -281,7 +283,7 @@ export default {
}
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) };
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(column), key, columnMetaData));
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
@ -322,6 +324,15 @@ export default {
}
}
},
computed: {
ptmTHeadOptions() {
return {
context: {
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
}
},
components: {
DTHeaderCell: HeaderCell,
DTHeaderCheckbox: HeaderCheckbox,

3
components/lib/dataview/BaseDataView.vue
View file

@ -10,12 +10,11 @@ const classes = {
}
],
header: 'p-dataview-header',
paginatorTop: ({ instance }) => [{ 'p-paginator-top': instance.paginatorTop }],
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
content: 'p-dataview-content',
grid: 'p-grid p-nogutter grid grid-nogutter',
column: 'p-col col',
emptyMessage: 'p-dataview-emptymessage',
paginatorBottom: ({ instance }) => [{ 'p-paginator-bottom': instance.paginatorBottom }],
footer: 'p-dataview-footer'
};

45
components/lib/dataview/DataView.d.ts vendored
View file

@ -10,17 +10,31 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PaginatorPassThroughOptionType } from '../paginator';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes) | null | undefined;
export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DataViewPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DataViewProps;
/**
* Defines current inline state.
*/
state: DataViewState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom page event.
@ -51,40 +65,40 @@ export interface DataViewPageEvent {
*/
export interface DataViewPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the Paginator component.
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the grid's DOM element.
* Used to pass attributes to the grid's DOM element.
*/
grid?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the column's DOM element.
* Used to pass attributes to the column's DOM element.
*/
column?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the empty message's DOM element.
* Used to pass attributes to the empty message's DOM element.
*/
emptyMessage?: DataViewPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: DataViewPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -209,10 +223,15 @@ export interface DataViewProps {
*/
dataKey: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DataViewPassThroughOptions}
*/
pt?: DataViewPassThroughOptions;
pt?: PassThrough<DataViewPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

9
components/lib/dataview/DataView.vue
View file

@ -12,7 +12,7 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginatorTop')"
:class="cx('paginator')"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
:unstyled="unstyled"
@ -47,11 +47,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginatorBottom')"
:class="cx('paginator')"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
:unstyled="unstyled"
:pt="ptm('root')"
:pt="ptm('paginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -110,6 +110,7 @@ export default {
sort() {
if (this.value) {
const value = [...this.value];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
@ -119,7 +120,7 @@ export default {
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.sortOrder * result;

44
components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts vendored
View file

@ -9,17 +9,36 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DataViewLayoutOptionsPassThroughOptionType = DataViewLayoutOptionsPassThroughAttributes | ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes) | null | undefined;
export declare type DataViewLayoutOptionsPassThroughOptionType =
| DataViewLayoutOptionsPassThroughAttributes
| ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes | string)
| string
| null
| undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DataViewLayoutOptionsPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DataViewLayoutOptionsProps;
/**
* Defines current inline state.
*/
state: DataViewLayoutOptionsState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,27 +47,27 @@ export interface DataViewLayoutOptionsPassThroughMethodOptions {
*/
export interface DataViewLayoutOptionsPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Uses to pass attributes to the list button's DOM element.
* Used to pass attributes to the list button's DOM element.
*/
listButton?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Uses to pass attributes to the list icon's DOM element.
* Used to pass attributes to the list icon's DOM element.
*/
listIcon?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Uses to pass attributes to the grid button's DOM element.
* Used to pass attributes to the grid button's DOM element.
*/
gridButton?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Uses to pass attributes to the grid icon's DOM element.
* Used to pass attributes to the grid icon's DOM element.
*/
gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -86,10 +105,15 @@ export interface DataViewLayoutOptionsProps {
*/
modelValue?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DataViewLayoutOptionsPassThroughOptions}
*/
pt?: DataViewLayoutOptionsPassThroughOptions;
pt?: PassThrough<DataViewLayoutOptionsPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

31
components/lib/deferredcontent/DeferredContent.d.ts vendored
View file

@ -9,17 +9,31 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes) | null | undefined;
export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DeferredContentPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DeferredContentProps;
/**
* Defines current inline state.
*/
state: DeferredContentState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,11 +42,11 @@ export interface DeferredContentPassThroughMethodOptions {
*/
export interface DeferredContentPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DeferredContentPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -61,10 +75,15 @@ export interface DeferredContentState {
*/
export interface DeferredContentProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DeferredContentPassThroughOptions}
*/
pt?: DeferredContentPassThroughOptions;
pt?: PassThrough<DeferredContentPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

10
components/lib/dialog/BaseDialog.vue
View file

@ -3,16 +3,11 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-dialog-mask {
pointer-events: none;
}
.p-dialog-mask.p-component-overlay {
pointer-events: auto;
}
.p-dialog {
pointer-events: auto;
max-height: 90%;
transform: scale(1);
}
@ -152,11 +147,12 @@ const inlineStyles = {
display: 'flex',
justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
pointerEvents: !modal && 'none'
pointerEvents: modal ? 'auto' : 'none'
}),
root: {
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
pointerEvents: 'auto'
}
};

73
components/lib/dialog/Dialog.d.ts vendored
View file

@ -7,19 +7,35 @@
* @module dialog
*
*/
import { HTMLAttributes, VNode } from 'vue';
import { HTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes) | null | undefined;
export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
export declare type DialogPassThroughTransitionType = TransitionProps | ((options: DialogPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DialogPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DialogProps;
/**
* Defines current inline state.
*/
state: DialogState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -28,54 +44,58 @@ export interface DialogPassThroughMethodOptions {
*/
export interface DialogPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
* Used to pass attributes to the header title's DOM element.
*/
headerTitle?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the header icons' DOM element.
* Used to pass attributes to the header icons' DOM element.
*/
headerIcons?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the maximizable button's DOM element.
* Used to pass attributes to the maximizable button's DOM element.
*/
maximizableButton?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the maximizable icon's DOM element.
* Used to pass attributes to the maximizable icon's DOM element.
*/
maximizableIcon?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button's component.
* Used to pass attributes to the close button's component.
*/
closeButton?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the close button icon's component.
* Used to pass attributes to the close button icon's component.
*/
closeButtonIcon?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
* Used to pass attributes to the footer's DOM element.
*/
footer?: DialogPassThroughOptionType;
/**
* Uses to pass attributes to the mask's DOM element.
* Used to pass attributes to the mask's DOM element.
*/
mask?: DialogPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: DialogPassThroughTransitionType;
}
/**
@ -154,7 +174,7 @@ export interface DialogProps {
*/
contentClass?: any;
/**
* Uses 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 panel inside the component.
*/
contentProps?: HTMLAttributes | undefined;
/**
@ -251,10 +271,15 @@ export interface DialogProps {
*/
minimizeIcon?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DialogPassThroughOptions}
*/
pt?: DialogPassThroughOptions;
pt?: PassThrough<DialogPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -280,8 +305,14 @@ export interface DialogSlots {
footer(): VNode[];
/**
* Custom close icon template.
* @param {Object} scope - close icon slot's params.
*/
closeicon(): VNode[];
closeicon(scope: {
/**
* Style class of the close icon
*/
class: any;
}): VNode[];
/**
* Custom maximize icon template of dialog.
* @param {Object} scope - maximize icon slot's params.
@ -291,6 +322,10 @@ export interface DialogSlots {
* Maximized state as a boolean
*/
maximized: boolean;
/**
* Style class of the maximize icon
*/
class: any;
}): VNode[];
}

38
components/lib/dialog/Dialog.vue
View file

@ -1,15 +1,26 @@
<template>
<Portal :appendTo="appendTo">
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
<slot name="header">
<slot name="header" :class="cx('headerTitle')">
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
</slot>
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
<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')">
<slot name="maximizeicon" :maximized="maximized">
<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')"
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>
@ -23,8 +34,9 @@
:aria-label="closeAriaLabel"
type="button"
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
data-pc-group-section="headericon"
>
<slot name="closeicon">
<slot name="closeicon" :class="cx('closeButtonIcon')">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
</slot>
</button>
@ -151,7 +163,7 @@ export default {
},
focus() {
const findFocusableElement = (container) => {
return container.querySelector('[autofocus]');
return container && container.querySelector('[autofocus]');
};
let focusTarget = this.$slots.footer && findFocusableElement(this.footerContainer);
@ -247,6 +259,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement);
let innerHTML = '';
@ -271,7 +284,7 @@ export default {
}
},
initDrag(event) {
if (DomHandler.findSingle(event.target, '[data-pc-section="headeraction"]') || DomHandler.findSingle(event.target.parentElement, '[data-pc-section="headeraction"]')) {
if (event.target.closest('div').getAttribute('data-pc-section') === 'headericons') {
return;
}
@ -310,24 +323,27 @@ export default {
let leftPos = offset.left + deltaX;
let topPos = offset.top + deltaY;
let viewport = DomHandler.getViewport();
let containerComputedStyle = getComputedStyle(this.container);
let marginLeft = parseFloat(containerComputedStyle.marginLeft);
let marginTop = parseFloat(containerComputedStyle.marginTop);
this.container.style.position = 'fixed';
if (this.keepInViewport) {
if (leftPos >= this.minX && leftPos + width < viewport.width) {
this.lastPageX = event.pageX;
this.container.style.left = leftPos + 'px';
this.container.style.left = leftPos - marginLeft + 'px';
}
if (topPos >= this.minY && topPos + height < viewport.height) {
this.lastPageY = event.pageY;
this.container.style.top = topPos + 'px';
this.container.style.top = topPos - marginTop + 'px';
}
} else {
this.lastPageX = event.pageX;
this.container.style.left = leftPos + 'px';
this.container.style.left = leftPos - marginLeft + 'px';
this.lastPageY = event.pageY;
this.container.style.top = topPos + 'px';
this.container.style.top = topPos - marginTop + 'px';
}
}
};

33
components/lib/divider/BaseDivider.vue
View file

@ -19,18 +19,6 @@ const styles = `
content: '';
}
.p-divider-horizontal.p-divider-left {
justify-content: flex-start;
}
.p-divider-horizontal.p-divider-right {
justify-content: flex-end;
}
.p-divider-horizontal.p-divider-center {
justify-content: center;
}
.p-divider-content {
z-index: 1;
}
@ -52,18 +40,6 @@ const styles = `
content: '';
}
.p-divider-vertical.p-divider-top {
align-items: flex-start;
}
.p-divider-vertical.p-divider-center {
align-items: center;
}
.p-divider-vertical.p-divider-bottom {
align-items: flex-end;
}
.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
@ -89,6 +65,14 @@ const styles = `
}
`;
/* Position */
const inlineStyles = {
root: ({ props }) => ({
justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
})
};
const classes = {
root: ({ props }) => [
'p-divider p-component',
@ -125,6 +109,7 @@ export default {
},
css: {
classes,
inlineStyles,
loadStyle
},
provide() {

30
components/lib/divider/Divider.d.ts vendored
View file

@ -9,16 +9,27 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes) | null | undefined;
export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DividerPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DividerProps;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -27,15 +38,15 @@ export interface DividerPassThroughMethodOptions {
*/
export interface DividerPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DividerPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: DividerPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -67,10 +78,15 @@ export interface DividerProps {
*/
type?: 'solid' | 'dashed' | 'dotted' | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DividerPassThroughOptions}
*/
pt?: DividerPassThroughOptions;
pt?: PassThrough<DividerPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

2
components/lib/divider/Divider.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
<div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
<div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
</div>

2
components/lib/dock/BaseDock.vue
View file

@ -111,7 +111,7 @@ const styles = `
`;
const classes = {
root: ({ props }) => ['p-dock p-component', `p-dock-${props.position}`, props.class],
root: ({ props }) => ['p-dock p-component', `p-dock-${props.position}`],
container: 'p-dock-list-container',
menu: 'p-dock-list',
menuitem: ({ instance, processedItem, index, id }) => [

76
components/lib/dock/Dock.d.ts vendored
View file

@ -10,18 +10,35 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes) | null | undefined;
export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DockPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DockProps;
/**
* Defines current inline state.
*/
state: DockState;
/**
* Defines current options.
*/
context: DockContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -30,35 +47,35 @@ export interface DockPassThroughMethodOptions {
*/
export interface DockPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
* Used to pass attributes to the container's DOM element.
*/
container?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
menu?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the list item's DOM element.
* Used to pass attributes to the list item's DOM element.
*/
menuitem?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the action's DOM element.
* Used to pass attributes to the action's DOM element.
*/
action?: DockPassThroughOptionType;
/**
* Uses to pass attributes to the icon's DOM element.
* Used to pass attributes to the icon's DOM element.
*/
icon?: DockPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -100,6 +117,14 @@ export interface DockState {
* Defines current options in Dock component.
*/
export interface DockContext {
/**
* Current index of the menuitem.
*/
index: number;
/**
* Current menuitem
*/
item: any;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
@ -126,6 +151,20 @@ export interface DockTooltipOptions {
[key: string]: any;
}
/**
* Defines valid router binding props in Dock component.
*/
export interface DockRouterBindProps {
/**
* Action element binding
*/
action: object;
/**
* Icon element binding
*/
icon: object;
}
/**
* Defines valid properties in Dock component.
*/
@ -174,10 +213,15 @@ export interface DockProps {
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DockPassThroughOptions}
*/
pt?: DockPassThroughOptions;
pt?: PassThrough<DockPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -202,6 +246,14 @@ export interface DockSlots {
* Index of the menuitem
*/
index: number;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: DockRouterBindProps;
}): VNode[];
/**
* Custom icon content.

26
components/lib/dock/Dock.vue
View file

@ -1,6 +1,18 @@
<template>
<div :class="cx('root')" :style="style" v-bind="ptm('root')" data-pc-name="dock">
<DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="dock">
<DockSub
:model="model"
:templates="$slots"
:exact="exact"
:tooltipOptions="tooltipOptions"
:position="position"
:menuId="menuId"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
:tabindex="tabindex"
:pt="pt"
:unstyled="unstyled"
></DockSub>
</div>
</template>
@ -11,6 +23,16 @@ import DockSub from './DockSub.vue';
export default {
name: 'Dock',
extends: BaseDock,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
computed: {
containerClass() {
return [this.class, this.cx('root')];
}
},
components: {
DockSub
}

39
components/lib/dock/DockSub.vue
View file

@ -25,11 +25,11 @@
:aria-disabled="disabled(processedItem)"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter(index)"
v-bind="getPTOptions(getItemId(index), 'menuitem')"
v-bind="getPTOptions('menuitem', processedItem, index)"
:data-p-focused="isItemActive(getItemId(index))"
:data-p-disabled="disabled(processedItem) || false"
>
<div :class="cx('content')" v-bind="getPTOptions(getItemId(index), 'content')">
<div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates['item']">
<router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
<a
@ -40,10 +40,10 @@
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, processedItem, navigate)"
v-bind="getPTOptions(getItemId(index), 'action')"
v-bind="getPTOptions('action', processedItem, index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
@ -56,15 +56,15 @@
:target="processedItem.target"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions(getItemId(index), 'action')"
v-bind="getPTOptions('action', processedItem, index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
</template>
<component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
<component v-else :is="templates['item']" :item="processedItem" :index="index" :label="processedItem.label" :props="getMenuItemProps(processedItem, index)"></component>
</div>
</li>
</template>
@ -77,6 +77,7 @@ import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'DockSub',
@ -141,10 +142,12 @@ export default {
getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
},
getPTOptions(id, key) {
getPTOptions(key, item, index) {
return this.ptm(key, {
context: {
active: this.isItemActive(id)
index,
item,
active: this.isItemActive(this.getItemId(index))
}
});
},
@ -273,6 +276,24 @@ export default {
},
disabled(item) {
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
},
getMenuItemProps(item, index) {
return {
action: mergeProps(
{
tabindex: -1,
'aria-hidden': true,
class: this.cx('action')
},
this.getPTOptions('action', item, index)
),
icon: mergeProps(
{
class: [this.cx('icon'), item.icon]
},
this.getPTOptions('icon', item, index)
)
};
}
},
computed: {

10
components/lib/dropdown/BaseDropdown.vue
View file

@ -153,11 +153,11 @@ export default {
props: {
modelValue: null,
options: Array,
optionLabel: null,
optionValue: null,
optionDisabled: null,
optionGroupLabel: null,
optionGroupChildren: null,
optionLabel: [String, Function],
optionValue: [String, Function],
optionDisabled: [String, Function],
optionGroupLabel: [String, Function],
optionGroupChildren: [String, Function],
scrollHeight: {
type: String,
default: '200px'

119
components/lib/dropdown/Dropdown.d.ts vendored
View file

@ -7,21 +7,40 @@
* @module dropdown
*
*/
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes) | null | undefined;
export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | string) | string | null | undefined;
export declare type DropdownPassThroughTransitionType = TransitionProps | ((options: DropdownPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DropdownPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DropdownProps;
/**
* Defines current inline state.
*/
state: DropdownState;
/**
* Defines current options.
*/
context: DropdownContext;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -60,95 +79,99 @@ export interface DropdownFilterEvent {
*/
export interface DropdownPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the clear icon's DOM element.
* Used to pass attributes to the clear icon's DOM element.
*/
clearIcon?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the trigger' DOM element.
* Used to pass attributes to the trigger' DOM element.
*/
trigger?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the loading icon's DOM element.
* Used to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
* Used to pass attributes to the panel's DOM element.
*/
panel?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter container's DOM element.
* Used to pass attributes to the filter container's DOM element.
*/
filterContainer?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter input's DOM element.
* Used to pass attributes to the filter input's DOM element.
*/
filterInput?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the filter icon's DOM element.
* Used to pass attributes to the filter icon's DOM element.
*/
filterIcon?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the wrapper's DOM element.
* Used to pass attributes to the wrapper's DOM element.
*/
wrapper?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the VirtualScroller component.
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
*/
virtualScroller?: VirtualScrollerPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
list?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the item group's DOM element.
* Used to pass attributes to the item group's DOM element.
*/
itemGroup?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
* Used to pass attributes to the item's DOM element.
*/
item?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the empty message's DOM element.
* Used to pass attributes to the empty message's DOM element.
*/
emptyMessage?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the hidden first focusable element's DOM element.
* Used to pass attributes to the hidden first focusable element's DOM element.
*/
hiddenFirstFocusableEl?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the hidden filter result's DOM element.
* Used to pass attributes to the hidden filter result's DOM element.
*/
hiddenFilterResult?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the hidden empty message's DOM element.
* Used to pass attributes to the hidden empty message's DOM element.
*/
hiddenEmptyMessage?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the hidden selected message's DOM element.
* Used to pass attributes to the hidden selected message's DOM element.
*/
hiddenSelectedMessage?: DropdownPassThroughOptionType;
/**
* Uses to pass attributes to the hidden last focusable element's DOM element.
* Used to pass attributes to the hidden last focusable element's DOM element.
*/
hiddenLastFocusableEl?: DropdownPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: DropdownPassThroughTransitionType;
}
/**
@ -303,7 +326,7 @@ export interface DropdownProps {
*/
inputClass?: string | object | undefined;
/**
* Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
* Used to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | HTMLAttributes | undefined;
/**
@ -315,15 +338,15 @@ export interface DropdownProps {
*/
panelClass?: string | object | undefined;
/**
* Uses 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 panel inside the component.
*/
panelProps?: HTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the filter input inside the component.
* Used to pass all properties of the HTMLInputElement to the filter input inside the component.
*/
filterInputProps?: InputHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLElement to the clear icon inside the component.
* Used to pass all properties of the HTMLElement to the clear icon inside the component.
* @deprecated since v3.26.0. Use 'pt' peroperty.
*/
clearIconProps?: HTMLAttributes | undefined;
@ -403,7 +426,7 @@ export interface DropdownProps {
emptyFilterMessage?: string | undefined;
/**
* Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
* @defaultValue No results foun
* @defaultValue No results found
*/
emptyMessage?: string | undefined;
/**
@ -419,10 +442,15 @@ export interface DropdownProps {
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {DropdownPassThroughOptions}
*/
pt?: DropdownPassThroughOptions;
pt?: PassThrough<DropdownPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -534,13 +562,13 @@ export interface DropdownSlots {
* Referance of the content
* @param {HTMLElement} el - Element of 'ref' property
*/
contentRef(el: any): void;
contentRef: (el: any) => void;
/**
* Options of the items
* @param {number} index - Rendered index
* @return {@link VirtualScroller.VirtualScrollerItemOptions}
* @return {@link VirtualScrollerItemOptions}
*/
getItemOptions(index: number): VirtualScrollerItemOptions;
getItemOptions: (index: number) => VirtualScrollerItemOptions;
}): VNode[];
/**
* Custom loader template.
@ -558,9 +586,14 @@ export interface DropdownSlots {
*/
clearicon(scope: {
/**
* Clear icon click function.
* Style class of the clear icon
*/
onClick: void;
class: any;
/**
* Clear icon click function.
* @param {Event} event - Browser event
*/
onClick: (event: Event) => void;
}): VNode[];
/**
* Custom dropdown icon template.
@ -568,7 +601,7 @@ export interface DropdownSlots {
*/
dropdownicon(scope: {
/**
* Style class of the component
* Style class of the dropdown icon
*/
class: any;
}): VNode[];
@ -578,14 +611,20 @@ export interface DropdownSlots {
*/
loadingicon(scope: {
/**
* Style class of the component
* Style class of the loading icon
*/
class: any;
}): VNode[];
/**
* Custom filter icon template.
* @param {Object} scope - filter icon slot's params.
*/
filtericon(): VNode[];
filtericon(scope: {
/**
* Style class of the filter icon
*/
class: any;
}): VNode[];
}
/**

8
components/lib/dropdown/Dropdown.spec.js
View file

@ -89,6 +89,14 @@ describe('clear checks', () => {
it('should have correct icon', () => {
expect(wrapper.find('.p-dropdown-clear-icon').classes()).toContain('pi-discord');
});
it('should clear with delete key', async () => {
const updateModelSpy = vi.spyOn(wrapper.vm, 'updateModel');
await wrapper.find('.p-dropdown-label.p-inputtext').trigger('keydown', { code: 'Delete' });
expect(updateModelSpy).toHaveBeenCalledOnce();
expect(updateModelSpy).toHaveBeenCalledWith(expect.any(KeyboardEvent), null);
});
});
describe('editable checks', () => {

13
components/lib/dropdown/Dropdown.vue
View file

@ -60,7 +60,7 @@
</slot>
</div>
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
<span
ref="firstHiddenFocusableElementOnOverlay"
@ -339,6 +339,9 @@ export default {
this.onArrowLeftKey(event, this.editable);
break;
case 'Delete':
this.onDeleteKey(event);
case 'Home':
this.onHomeKey(event, this.editable);
break;
@ -405,7 +408,7 @@ export default {
return;
}
if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.tagName === 'path') {
if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
return;
} else if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide(true) : this.show(true);
@ -507,6 +510,12 @@ export default {
break;
}
},
onDeleteKey(event) {
if (this.showClear) {
this.updateModel(event, null);
event.preventDefault();
}
},
onArrowDownKey(event) {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();

28
components/lib/editor/BaseEditor.vue
View file

@ -2,7 +2,7 @@
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
const quillStyles = `
/*!
* Quill Editor v1.3.3
* https://quilljs.com/
@ -953,24 +953,10 @@ const styles = `
const classes = {
root: 'p-editor-container',
toolbar: 'p-editor-toolbar',
formats: 'ql-formats',
header: 'ql-header',
font: 'ql-font',
bold: 'ql-bold',
italic: 'ql-italic',
underline: 'ql-underline',
color: 'ql-color',
background: 'ql-background',
list: 'ql-list',
select: 'ql-align',
link: 'ql-link',
image: 'ql-image',
codeBlock: 'ql-code-block',
clean: 'ql-clean',
content: 'p-editor-content'
};
const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
const { load: loadStyle } = useStyle(quillStyles, { name: 'editor', manual: true });
export default {
name: 'BaseEditor',
@ -983,14 +969,16 @@ export default {
editorStyle: null,
modules: null
},
css: {
classes,
loadStyle
},
provide() {
return {
$parentInstance: this
};
},
beforeMount() {
loadStyle();
},
css: {
classes
}
};
</script>

64
components/lib/editor/Editor.d.ts vendored
View file

@ -9,16 +9,31 @@
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes) | null | undefined;
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface EditorPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: EditorProps;
/**
* Defines current inline state.
*/
state: EditorState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -94,75 +109,75 @@ export interface EditorLoadEvent {
*/
export interface EditorPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the toolbar's DOM element.
* Used to pass attributes to the toolbar's DOM element.
*/
toolbar?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the formats' DOM element.
* Used to pass attributes to the formats' DOM element.
*/
formats?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
* Used to pass attributes to the header's DOM element.
*/
header?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the option's DOM element.
* Used to pass attributes to the option's DOM element.
*/
option?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the bold's DOM element.
* Used to pass attributes to the bold's DOM element.
*/
bold?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the italic's DOM element.
* Used to pass attributes to the italic's DOM element.
*/
italic?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the underline's DOM element.
* Used to pass attributes to the underline's DOM element.
*/
underline?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the color's DOM element.
* Used to pass attributes to the color's DOM element.
*/
color?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the background's DOM element.
* Used to pass attributes to the background's DOM element.
*/
background?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
* Used to pass attributes to the list's DOM element.
*/
list?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the select's DOM element.
* Used to pass attributes to the select's DOM element.
*/
select?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the link's DOM element.
* Used to pass attributes to the link's DOM element.
*/
link?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the image's DOM element.
* Used to pass attributes to the image's DOM element.
*/
image?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the code block's DOM element.
* Used to pass attributes to the code block's DOM element.
*/
codeBlock?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the clean's DOM element.
* Used to pass attributes to the clean's DOM element.
*/
clean?: EditorPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: EditorPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -216,10 +231,15 @@ export interface EditorProps {
*/
modules?: any;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {EditorPassThroughOptions}
*/
pt?: EditorPassThroughOptions;
pt?: PassThrough<EditorPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

40
components/lib/editor/Editor.vue
View file

@ -2,44 +2,44 @@
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
<div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
<slot name="toolbar">
<span :class="cx('formats')" v-bind="ptm('formats')">
<select :class="cx('header')" defaultValue="0" v-bind="ptm('header')">
<span class="ql-formats" v-bind="ptm('formats')">
<select class="ql-header" defaultValue="0" v-bind="ptm('header')">
<option value="1" v-bind="ptm('option')">Heading</option>
<option value="2" v-bind="ptm('option')">Subheading</option>
<option value="0" v-bind="ptm('option')">Normal</option>
</select>
<select :class="cx('font')" v-bind="ptm('font')">
<select class="ql-font" v-bind="ptm('font')">
<option v-bind="ptm('option')"></option>
<option value="serif" v-bind="ptm('option')"></option>
<option value="monospace" v-bind="ptm('option')"></option>
</select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('bold')" type="button" v-bind="ptm('bold')"></button>
<button :class="cx('italic')" type="button" v-bind="ptm('italic')"></button>
<button :class="cx('underline')" type="button" v-bind="ptm('underline')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-bold" type="button" v-bind="ptm('bold')"></button>
<button class="ql-italic" type="button" v-bind="ptm('italic')"></button>
<button class="ql-underline" type="button" v-bind="ptm('underline')"></button>
</span>
<span :key="reRenderColorKey" :class="cx('formats')" v-bind="ptm('formats')">
<select :class="cx('color')" v-bind="ptm('color')"></select>
<select :class="cx('background')" v-bind="ptm('background')"></select>
<span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
<select class="ql-color" v-bind="ptm('color')"></select>
<select class="ql-background" v-bind="ptm('background')"></select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('list')" value="ordered" type="button" v-bind="ptm('list')"></button>
<button :class="cx('list')" value="bullet" type="button" v-bind="ptm('list')"></button>
<select :class="cx('select')" v-bind="ptm('select')">
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-list" value="ordered" type="button" v-bind="ptm('list')"></button>
<button class="ql-list" value="bullet" type="button" v-bind="ptm('list')"></button>
<select class="ql-align" v-bind="ptm('select')">
<option defaultValue v-bind="ptm('option')"></option>
<option value="center" v-bind="ptm('option')"></option>
<option value="right" v-bind="ptm('option')"></option>
<option value="justify" v-bind="ptm('option')"></option>
</select>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('link')" type="button" v-bind="ptm('link')"></button>
<button :class="cx('image')" type="button" v-bind="ptm('image')"></button>
<button :class="cx('codeBlock')" type="button" v-bind="ptm('codeBlock')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-link" type="button" v-bind="ptm('link')"></button>
<button class="ql-image" type="button" v-bind="ptm('image')"></button>
<button class="ql-code-block" type="button" v-bind="ptm('codeBlock')"></button>
</span>
<span :class="cx('formats')" v-bind="ptm('formats')">
<button :class="cx('clean')" type="button" v-bind="ptm('clean')"></button>
<span class="ql-formats" v-bind="ptm('formats')">
<button class="ql-clean" type="button" v-bind="ptm('clean')"></button>
</span>
</slot>
</div>

53
components/lib/fieldset/Fieldset.d.ts vendored
View file

@ -7,19 +7,35 @@
* @module fieldset
*
*/
import { AnchorHTMLAttributes, VNode } from 'vue';
import { AnchorHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes) | null | undefined;
export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes | string) | string | null | undefined;
export declare type FieldsetPassThroughTransitionType = TransitionProps | ((options: FieldsetPassThroughMethodOptions) => TransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface FieldsetPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: FieldsetProps;
/**
* Defines current inline state.
*/
state: FieldsetState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -43,38 +59,42 @@ export interface FieldsetToggleEvent {
*/
export interface FieldsetPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the legend's DOM element.
* Used to pass attributes to the legend's DOM element.
*/
legend?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggler's DOM element.
* Used to pass attributes to the toggler's DOM element.
*/
toggler?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggler icon's DOM element.
* Used to pass attributes to the toggler icon's DOM element.
*/
togglerIcon?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the legend title's DOM element.
* Used to pass attributes to the legend title's DOM element.
*/
legendTitle?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggleable content's DOM element.
* Used to pass attributes to the toggleable content's DOM element.
*/
toggleableContent?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: FieldsetPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: FieldsetPassThroughTransitionType;
}
/**
@ -114,15 +134,20 @@ export interface FieldsetProps {
*/
collapsed?: boolean | undefined;
/**
* Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.
* Used to pass the custom value to read for the AnchorHTMLAttributes inside the component.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
toggleButtonProps?: AnchorHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {FieldsetPassThroughOptions}
*/
pt?: FieldsetPassThroughOptions;
pt?: PassThrough<FieldsetPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false

2
components/lib/fieldset/Fieldset.vue
View file

@ -25,7 +25,7 @@
</slot>
</a>
</legend>
<transition name="p-toggleable-content">
<transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="cx('content')" v-bind="ptm('content')">
<slot></slot>

14
components/lib/fileupload/FileContent.vue
View file

@ -52,16 +52,18 @@ export default {
},
methods: {
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.$primevue.config.locale?.fileSizeTypes;
if (bytes === 0) {
return '0 B';
return `0 ${sizes[0]}`;
}
let k = 1000,
dm = 3,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
return `${formattedSize} ${sizes[i]}`;
}
},
components: {

88
components/lib/fileupload/FileUpload.d.ts vendored
View file

@ -11,17 +11,31 @@ import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { MessagePassThroughOptions } from '../message';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes) | null | undefined;
export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface FileUploadPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: FileUploadProps;
/**
* Defines current inline state.
*/
state: FileUploadState;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
@ -158,99 +172,99 @@ export interface FileUploadRemoveUploadedFile {
*/
export interface FileUploadPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
* Used to pass attributes to the input's DOM element.
*/
input?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the buttonbar's DOM element.
* Used to pass attributes to the buttonbar's DOM element.
*/
buttonbar?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the choose button's DOM element.
* Used to pass attributes to the choose button's DOM element.
*/
chooseButton?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the choose icon's DOM element.
* Used to pass attributes to the choose icon's DOM element.
*/
chooseIcon?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the choose button label's DOM element.
* Used to pass attributes to the choose button label's DOM element.
*/
chooseButtonLabel?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the upload button's DOM element.
* Used to pass attributes to the upload button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
uploadButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the cancel button's DOM element.
* Used to pass attributes to the cancel button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
cancelButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the content's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the progressbar's DOM element.
* Used to pass attributes to the progressbar's DOM element.
*/
progressbar?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the messages' DOM element.
* Used to pass attributes to the messages' DOM element.
* @see {@link MessagePassThroughOptions}
*/
message?: MessagePassThroughOptions;
/**
* Uses to pass attributes to the file's DOM element.
* Used to pass attributes to the file's DOM element.
*/
file?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail's DOM element.
* Used to pass attributes to the thumbnail's DOM element.
*/
thumbnail?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the details's DOM element.
* Used to pass attributes to the details's DOM element.
*/
details?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the fileName's DOM element.
* Used to pass attributes to the fileName's DOM element.
*/
fileName?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the fileSize's DOM element.
* Used to pass attributes to the fileSize's DOM element.
*/
fileSize?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the badge's DOM element.
* Used to pass attributes to the badge's DOM element.
*/
badge?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the actions's DOM element.
* Used to pass attributes to the actions's DOM element.
*/
actions?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the remove button's DOM element.
* Used to pass attributes to the remove button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
removeButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the empty's DOM element.
* Used to pass attributes to the empty's DOM element.
*/
empty?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the label's DOM element.
* Used to pass attributes to the label's DOM element.
*/
label?: FileUploadPassThroughOptionType;
/**
* Uses to pass attributes to the upload icon's DOM element.
* Used to pass attributes to the upload icon's DOM element.
*/
uploadIcon?: FileUploadPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
@ -410,10 +424,15 @@ export interface FileUploadProps {
*/
class?: any;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {FileUploadPassThroughOptions}
*/
pt?: FileUploadPassThroughOptions;
pt?: PassThrough<FileUploadPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
@ -427,6 +446,7 @@ export interface FileUploadProps {
export interface FileUploadSlots {
/**
* Custom header content template.
* @param {Object} scope - header slot's params.
*/
header(scope: {
/**
@ -440,18 +460,19 @@ export interface FileUploadSlots {
/**
* Choose function
*/
chooseCallback(): void;
chooseCallback: () => void;
/**
* Upload function
*/
uploadCallback(): void;
uploadCallback: () => void;
/**
* Clear function
*/
clearCallback(): void;
clearCallback: () => void;
}): VNode[];
/**
* Custom uploaded content template.
* @param {Object} scope - content slot's params.
*/
content(scope: {
/**
@ -464,12 +485,14 @@ export interface FileUploadSlots {
uploadedFiles: File[];
/**
* Function to remove an uploaded file.
* @param {number} index - Index of the uploaded file
*/
removeUploadedFileCallback(index: number): void;
removeUploadedFileCallback: (index: number) => void;
/**
* Function to remove a file.
* @param {number} index - Index of the removed file
*/
removeFileCallback(index: number): void;
removeFileCallback: (index: number) => void;
/**
* Uploaded progress as number.
*/
@ -497,6 +520,7 @@ export interface FileUploadSlots {
cancelicon(): VNode[];
/**
* Custom remove icon template for each file.
* @param {Object} scope - fileremoveicon slot's params.
*/
fileremoveicon(scope: {
/**

26
components/lib/fileupload/FileUpload.vue
View file

@ -9,17 +9,17 @@
</slot>
<span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
</span>
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')" data-pc-section="uploadbutton">
<template #icon="iconProps">
<slot name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" />
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot>
</template>
</FileUploadButton>
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')" data-pc-section="cancelbutton">
<template #icon="iconProps">
<slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" />
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" />
</slot>
</template>
</FileUploadButton>
@ -60,6 +60,7 @@ import UploadIcon from 'primevue/icons/upload';
import Message from 'primevue/message';
import ProgressBar from 'primevue/progressbar';
import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils';
import BaseFileUpload from './BaseFileUpload.vue';
import FileContent from './FileContent.vue';
@ -265,6 +266,7 @@ export default {
},
onDragOver(event) {
if (!this.disabled) {
!this.isUnstyled && DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', true);
event.stopPropagation();
event.preventDefault();
@ -272,11 +274,13 @@ export default {
},
onDragLeave() {
if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false);
}
},
onDrop(event) {
if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false);
event.stopPropagation();
event.preventDefault();
@ -322,16 +326,18 @@ export default {
}
},
formatSize(bytes) {
const k = 1024;
const dm = 3;
const sizes = this.$primevue.config.locale?.fileSizeTypes;
if (bytes === 0) {
return '0 B';
return `0 ${sizes[0]}`;
}
let k = 1000,
dm = 3,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
const i = Math.floor(Math.log(bytes) / Math.log(k));
const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
return `${formattedSize} ${sizes[i]}`;
},
isFileLimitExceeded() {
if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focused) {

19
components/lib/focustrap/FocusTrap.d.ts vendored
View file

@ -8,6 +8,8 @@
*/
import { DirectiveBinding, ObjectDirective } from 'vue';
import { DirectiveHooks } from '../basedirective';
import { PassThroughOptions } from '../passthrough';
import { PassThrough } from '../ts-helpers';
export declare type FocusTrapDirectivePassThroughOptionType = FocusTrapDirectivePassThroughAttributes | null | undefined;
@ -26,10 +28,15 @@ export interface FocusTrapOptions {
*/
autoFocus?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* Used to pass attributes to DOM elements inside the component.
* @type {FocusTrapDirectivePassThroughOptions}
*/
pt?: FocusTrapDirectivePassThroughOptions;
pt?: PassThrough<FocusTrapDirectivePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
}
/**
@ -38,19 +45,19 @@ export interface FocusTrapOptions {
*/
export interface FocusTrapDirectivePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
* Used to pass attributes to the root's DOM element.
*/
root?: FocusTrapDirectivePassThroughOptionType;
/**
* Uses to pass attributes to the first focusable element's DOM element.
* Used to pass attributes to the first focusable element's DOM element.
*/
firstFocusableElement?: FocusTrapDirectivePassThroughOptionType;
/**
* Uses to pass attributes to the last focusable element's DOM element.
* Used to pass attributes to the last focusable element's DOM element.
*/
lastFocusableElement?: FocusTrapDirectivePassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* Used to manage all lifecycle hooks
* @see {@link BaseDirective.DirectiveHooks}
*/
hooks?: DirectiveHooks;

Some files were not shown because too many files have changed in this diff Show more