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

Merge branch 'pass-through'

pull/3841/head
Tuğçe Küçükoğlu 2023-03-30 12:09:09 +03:00
parent 6cbeee5fb4 169c30d1a1
commit 99b59580fa
44 changed files with 1198 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
api-generator/build-apidoc.js
View File

@ -24,7 +24,7 @@ app.options.addReader(new TypeDoc.TypeDocReader());
app.bootstrap({
// typedoc options here
name: 'PrimeVue',
entryPoints: [`components/lib`],
entryPoints: [`components/lib/`],
entryPointStrategy: 'expand',
hideGenerator: true,
excludeExternals: true,
@ -441,6 +441,24 @@ if (project) {
});
let values = event.type.toString();
if (values.includes('Function') && event.type.types) {
values = '';
for (const [i, type] of event.type.types.entries()) {
if (type.declaration && type.declaration.signatures) {
const signature = type.declaration.signatures[0];
const parameters = signature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
values += i === 0 ? `(${parameters}) => ${signature.type?.name}` : ` | (${parameters}) => ${signature.type?.name}`;
} else {
const typeName = type.name || type.value;
values += i === 0 ? `${typeName}` : ` | ${typeName}`;
}
}
}
const declaration = event.type.declaration;
if (declaration) {

6
api-generator/components/accordion.js
View File

@ -40,6 +40,12 @@ const AccordionProps = [
type: 'boolean',
default: 'false',
description: 'When enabled, the focused tab is activated.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

20
api-generator/components/accordiontab.js
View File

@ -52,6 +52,23 @@ const AccordionTabProps = [
type: 'boolean',
default: 'false',
description: 'Whether the tab is disabled.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const AccordionTabSlots = [
{
name: 'header',
description: 'Custom content for the title section of a AccordionTab is defined using the header template.'
},
{
name: 'headericon',
description: 'Custom icon for the header section of a AccordionTab is defined using the headericon template.'
}
];
@ -59,6 +76,7 @@ module.exports = {
accordiontab: {
name: 'AccordionTab',
description: 'Accordion element consists of one or more AccordionTab elements.',
props: AccordionTabProps
props: AccordionTabProps,
slots: AccordionTabSlots
}
};

10
api-generator/components/deferredcontent.js
View File

@ -1,3 +1,12 @@
const DeferredContentProps = [
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
const DeferredContentEvents = [
{
name: 'load',
@ -16,6 +25,7 @@ module.exports = {
deferredcontent: {
name: 'DeferredContent',
description: 'DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.',
props: DeferredContentProps,
events: DeferredContentEvents
}
};

6
api-generator/components/divider.js
View File

@ -16,6 +16,12 @@ const DividerProps = [
type: 'string',
default: 'solid',
description: 'Border style type, default is "solid" and other options are "dashed" and "dotted".'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

12
api-generator/components/fieldset.js
View File

@ -22,6 +22,12 @@ const FieldsetProps = [
type: 'string',
default: 'null',
description: 'Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -47,7 +53,11 @@ const FieldsetEvents = [
const FieldsetSlots = [
{
name: 'legend',
description: "Custom content for the component's header"
description: 'Custom legend template.'
},
{
name: 'togglericon',
description: 'Custom toggler icon template.'
}
];

10
api-generator/components/panel.js
View File

@ -22,6 +22,12 @@ const PanelProps = [
type: 'string',
default: 'null',
description: 'Uses to pass the custom value to read for the anchor inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -52,6 +58,10 @@ const PanelSlots = [
{
name: 'icons',
description: "Custom content for the header's icon"
},
{
name: 'headericon',
description: 'Custom header icon template of panel'
}
];

6
api-generator/components/scrollpanel.js
View File

@ -4,6 +4,12 @@ const ScrollPanelProps = [
type: 'number',
default: '5',
description: 'Step factor to scroll the content while pressing the arrow keys.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

6
api-generator/components/splitter.js
View File

@ -28,6 +28,12 @@ const SplitterProps = [
type: 'number',
default: '5',
description: 'Step factor to increment/decrement the size of the panels while pressing the arrow keys.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

6
api-generator/components/splitterpanel.js
View File

@ -10,6 +10,12 @@ const SplitterPanelProps = [
type: 'number',
default: 'null',
description: 'Minimum size of the element relative to 100%.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

6
api-generator/components/tabpanel.js
View File

@ -52,6 +52,12 @@ const TabPanelProps = [
type: 'boolean',
default: 'null',
description: 'Whether the tab is disabled.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

24
api-generator/components/tabview.js
View File

@ -40,6 +40,12 @@ const TabViewProps = [
type: 'any',
default: 'null',
description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
@ -78,11 +84,27 @@ const TabViewEvents = [
}
];
const TabViewSlots = [
{
name: 'default',
description: 'Default slot to detect TabPanel components.'
},
{
name: 'previcon',
description: 'Previous button icon template for the scrollable component.'
},
{
name: 'nexticon',
description: 'Next button icon template for the scrollable component.'
}
];
module.exports = {
tabview: {
name: 'TabView',
description: 'TabView is a container component to group content with tabs.',
props: TabViewProps,
event: TabViewEvents
event: TabViewEvents,
slots: TabViewSlots
}
};

6
api-generator/components/toolbar.js
View File

@ -4,6 +4,12 @@ const ToolbarProps = [
type: 'string',
default: 'null',
description: 'Defines a string value that labels an interactive element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

46
components/lib/accordion/Accordion.d.ts vendored
View File

@ -10,6 +10,15 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionPassThroughMethodOptions {
props: AccordionProps;
state: AccordionState;
}
/**
* Custom tab open event.
* @see {@link AccordionEmits.tab-open}
@ -40,6 +49,38 @@ export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
*/
export interface AccordionClickEvent extends AccordionTabOpenEvent {}
/**
* Custom passthrough(pt) options.
* @see {@link AccordionProps.pt}
*/
export interface AccordionPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AccordionPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Accordion component.
*/
export interface AccordionState {
/**
* Current id state as a string
*/
id: string;
/**
* Current active index state.
*/
d_activeIndex: number | number[];
}
/**
* Defines valid properties in Accordion component.
*/
@ -79,6 +120,11 @@ export interface AccordionProps {
* @defaultValue false
*/
selectOnFocus?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
}
/**

28
components/lib/accordion/Accordion.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-accordion p-component">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
<div class="p-accordion p-component" v-bind="ptm('root')">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
<a
:id="getTabHeaderActionId(i)"
class="p-accordion-header-link p-accordion-header-action"
@ -12,10 +12,11 @@
:aria-controls="getTabContentId(i)"
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="getTabProp(tab, 'headerActionProps')"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
>
<span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<span v-else :class="getTabHeaderIconClass(i)" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')"></span>
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
@ -28,9 +29,9 @@
:class="getTabContentClass(tab)"
role="region"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="getTabProp(tab, 'contentProps')"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
>
<div class="p-accordion-content">
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
<component :is="tab"></component>
</div>
</div>
@ -40,11 +41,13 @@
</template>
<script>
import ComponentBase from 'primevue/base';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'Accordion',
extends: ComponentBase,
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
props: {
multiple: {
@ -112,6 +115,15 @@ export default {
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
getTabPT(tab, key) {
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
props: tab.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
onTabClick(event, tab, index) {
this.changeActiveIndex(event, tab, index);
this.$emit('tab-click', { originalEvent: event, index });

77
components/lib/accordiontab/AccordionTab.d.ts vendored
View File

@ -8,8 +8,61 @@
*
*/
import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { AccordionPassThroughOptions } from '../accordion';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionTabPassThroughMethodOptions {
props: AccordionTabProps;
parent: AccordionPassThroughOptions;
}
/**
* Custom passthrough(pt) options.
* @see {@link AccordionTabProps.pt}
*/
export interface AccordionTabPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headeraction's DOM element.
*/
headeraction?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headericon's DOM element.
*/
headericon?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the headertitle's DOM element.
*/
headertitle?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the toggleablecontent's DOM element.
*/
toggleablecontent?: AccordionTabPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: AccordionTabPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface AccordionTabPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in AccordionTab component.
*/
@ -28,10 +81,12 @@ export interface AccordionTabProps {
headerClass?: any;
/**
* Uses 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.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerActionProps?: AnchorHTMLAttributes | undefined;
/**
@ -44,6 +99,7 @@ export interface AccordionTabProps {
contentClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentProps?: HTMLAttributes | undefined;
/**
@ -51,6 +107,11 @@ export interface AccordionTabProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AccordionTabPassThroughOptions}
*/
pt?: AccordionTabPassThroughOptions;
}
/**
@ -62,9 +123,23 @@ export interface AccordionTabSlots {
*/
default(): VNode[];
/**
* Custom content for the title section of a panel is defined using the header template.
* Custom content for the title section of a AccordionTab is defined using the header template.
*/
header(): VNode[];
/**
* Custom icon for the header section of a AccordionTab is defined using the headericon template.
* @param {Object} scope - header slot's params.
*/
headericon(scope: {
/**
* Index of the tab
*/
index: number;
/**
* Whether the tab is active
*/
isTabActive(i: number): void;
}): VNode[];
}
/**

3
components/lib/accordiontab/AccordionTab.vue
View File

@ -3,8 +3,11 @@
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'AccordionTab',
extends: ComponentBase,
props: {
header: null,
headerStyle: null,

21
components/lib/base/ComponentBase.vue Normal file
View File

@ -0,0 +1,21 @@
<script>
import { ObjectUtils } from 'primevue/utils';
export default {
name: 'ComponentBase',
props: {
pt: {
type: Object,
value: {}
}
},
methods: {
ptm(key = '', params = {}) {
return ObjectUtils.getItemValue((this.pt || {})[key.toLowerCase()], { props: this.$props, state: this.$data, ...params });
},
ptmo(obj = {}, key = '', params = {}) {
return ObjectUtils.getItemValue(obj[key.toLowerCase()], params);
}
}
};
</script>

8
components/lib/base/package.json Normal file
View File

@ -0,0 +1,8 @@
{
"main": "./componentbase.cjs.js",
"module": "./componentbase.esm.js",
"unpkg": "./componentbase.min.js",
"browser": {
"./sfc": "./ComponentBase.vue"
}
}

48
components/lib/card/Card.d.ts vendored
View File

@ -10,10 +10,56 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
/**
* Custom passthrough(pt) options.
* @see {@link CardProps.pt}
*/
export interface CardPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the body's DOM element.
*/
body?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
title?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the subtitle's DOM element.
*/
subtitle?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: CardPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
*/
footer?: CardPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface CardPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in Card component.
*/
export interface CardProps {}
export interface CardProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {CardPassThroughOptions}
*/
pt?: CardPassThroughOptions;
}
/**
* Defines valid slots in Card component.

29
components/lib/card/Card.vue
View File

@ -1,15 +1,19 @@
<template>
<div class="p-card p-component">
<div v-if="$slots.header" class="p-card-header">
<div class="p-card p-component" v-bind="ptm('root')">
<div v-if="$slots.header" class="p-card-header" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<div class="p-card-body">
<div v-if="$slots.title" class="p-card-title"><slot name="title"></slot></div>
<div v-if="$slots.subtitle" class="p-card-subtitle"><slot name="subtitle"></slot></div>
<div class="p-card-content">
<div class="p-card-body" v-bind="ptm('body')">
<div v-if="$slots.title" class="p-card-title" v-bind="ptm('title')">
<slot name="title"></slot>
</div>
<div v-if="$slots.subtitle" class="p-card-subtitle" v-bind="ptm('subtitle')">
<slot name="subtitle"></slot>
</div>
<div class="p-card-content" v-bind="ptm('content')">
<slot name="content"></slot>
</div>
<div v-if="$slots.footer" class="p-card-footer">
<div v-if="$slots.footer" class="p-card-footer" v-bind="ptm('footer')">
<slot name="footer"></slot>
</div>
</div>
@ -17,13 +21,10 @@
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'Card'
name: 'Card',
extends: ComponentBase
};
</script>
<style>
.p-card-header img {
width: 100%;
}
</style>

50
components/lib/deferredcontent/DeferredContent.d.ts vendored
View File

@ -10,7 +10,55 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface DeferredContentProps {}
export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DeferredContentPassThroughMethodOptions {
props: DeferredContentProps;
state: DeferredContentState;
}
/**
* Custom passthrough(pt) options.
* @see {@link DeferredContentProps.pt}
*/
export interface DeferredContentPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: DeferredContentPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface DeferredContentPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in DeferredContent component.
*/
export interface DeferredContentState {
/**
* Current loaded state as a boolean.
* @defaultValue false
*/
loaded?: boolean;
}
/**
* Defines valid props in DeferredContent component.
*/
export interface DeferredContentProps {
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {DeferredContentPassThroughOptions}
*/
pt?: DeferredContentPassThroughOptions;
}
/**
* Defines valid slots in DeferredContent component.

5
components/lib/deferredcontent/DeferredContent.vue
View File

@ -1,12 +1,15 @@
<template>
<div ref="container">
<div ref="container" v-bind="ptm('root')">
<slot v-if="loaded"></slot>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'DeferredContent',
extends: ComponentBase,
emits: ['load'],
data() {
return {

36
components/lib/divider/Divider.d.ts vendored
View File

@ -10,6 +10,37 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DividerPassThroughMethodOptions {
props: DividerProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link DividerProps.pt}
*/
export interface DividerPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: DividerPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: DividerPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface DividerPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in Divider component.
*/
@ -28,6 +59,11 @@ export interface DividerProps {
* @defaultValue solid
*/
type?: 'solid' | 'dashed' | 'dotted' | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {DividerPassThroughOptions}
*/
pt?: DividerPassThroughOptions;
}
/**

6
components/lib/divider/Divider.vue
View File

@ -1,14 +1,16 @@
<template>
<div :class="containerClass" role="separator" :aria-orientation="layout">
<div v-if="$slots.default" class="p-divider-content">
<div :class="containerClass" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
<div v-if="$slots.default" class="p-divider-content" v-bind="ptm('content')">
<slot></slot>
</div>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'Divider',
extends: ComponentBase,
props: {
align: {
type: String,

73
components/lib/fieldset/Fieldset.d.ts vendored
View File

@ -10,6 +10,16 @@
import { AnchorHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface FieldsetPassThroughMethodOptions {
props: FieldsetProps;
state: FieldsetState;
}
/**
* Custom toggle event.
* @see {@link FieldsetEmits.toggle}
@ -25,6 +35,59 @@ export interface FieldsetToggleEvent {
value: boolean;
}
/**
* Custom passthrough(pt) options.
* @see {@link FieldsetProps.pt}
*/
export interface FieldsetPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the legend's DOM element.
*/
legend?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the legend title's DOM element.
*/
legendtitle?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggler's DOM element.
*/
toggler?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggler icon's DOM element.
*/
togglericon?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the toggleable content's DOM element.
*/
toggleablecontent?: FieldsetPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: FieldsetPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface FieldsetPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Fieldset component.
*/
export interface FieldsetState {
/**
* Current collapsed state as a boolean.
* @defaultValue false
*/
d_collapsed: boolean;
}
/**
* Defines valid properties in Fieldset component.
*/
@ -45,8 +108,14 @@ export interface FieldsetProps {
collapsed?: boolean | undefined;
/**
* Uses 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.
* @type {FieldsetPassThroughOptions}
*/
pt?: FieldsetPassThroughOptions;
}
/**
@ -61,6 +130,10 @@ export interface FieldsetSlots {
* Custom legend template.
*/
legend: () => VNode[];
/**
* Custom toggler icon template.
*/
togglericon: () => VNode[];
}
/**

20
components/lib/fieldset/Fieldset.vue
View File

@ -1,8 +1,8 @@
<template>
<fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
<legend class="p-fieldset-legend">
<fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]" v-bind="ptm('root')">
<legend class="p-fieldset-legend" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend">
<span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
<span :id="ariaId + '_header'" class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot>
<a
v-if="toggleable"
@ -15,17 +15,19 @@
:aria-label="buttonAriaLabel"
@click="toggle"
@keydown="onKeyDown"
v-bind="toggleButtonProps"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
>
<span :class="iconClass"></span>
<slot name="togglericon" :collapsed="d_collapsed">
<span :class="iconClass" v-bind="ptm('togglericon')"></span>
</slot>
<slot name="legend">
<span class="p-fieldset-legend-text">{{ legend }}</span>
<span class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
</slot>
</a>
</legend>
<transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
<div class="p-fieldset-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div class="p-fieldset-content" v-bind="ptm('content')">
<slot></slot>
</div>
</div>
@ -34,11 +36,13 @@
</template>
<script>
import ComponentBase from 'primevue/base';
import Ripple from 'primevue/ripple';
import { UniqueComponentId } from 'primevue/utils';
export default {
name: 'Fieldset',
extends: ComponentBase,
emits: ['update:collapsed', 'toggle'],
props: {
legend: String,

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

@ -10,6 +10,16 @@
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface PanelPassThroughMethodOptions {
props: PanelProps;
state: PanelState;
}
/**
* Custom toggle event.
* @see {@link PanelEmits.toggle}
@ -25,6 +35,63 @@ export interface PanelToggleEvent {
value: boolean;
}
/**
* Custom passthrough(pt) options.
* @see {@link PanelProps.pt}
*/
export interface PanelPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
title?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
icons?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the toggler's DOM element.
*/
toggler?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the headericon's DOM element.
*/
headericon?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the toggleablecontent's DOM element.
*/
toggleablecontent?: PanelPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: PanelPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface PanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Panel component.
*/
export interface PanelState {
/**
* Current collapsed state as a boolean.
* @defaultValue false
*/
d_collapsed: boolean;
}
/**
* Defines valid properties in Panel component.
*/
@ -45,8 +112,14 @@ export interface PanelProps {
collapsed?: boolean;
/**
* Uses to pass the custom value to read for the button inside the component.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
toggleButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {PanelPassThroughOptions}
*/
pt?: PanelPassThroughOptions;
}
/**
@ -65,6 +138,16 @@ export interface PanelSlots {
* Custom icons template.
*/
icons(): VNode[];
/**
* Custom header icon template of panel.
* @param {Object} scope - header icon slot's params.
*/
headericon(scope: {
/**
* Collapsed state as a boolean
*/
collapsed: boolean;
}): VNode[];
}
/**

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

@ -1,10 +1,10 @@
<template>
<div :class="containerClass">
<div class="p-panel-header">
<div :class="containerClass" v-bind="ptm('root')">
<div class="p-panel-header" v-bind="ptm('header')">
<slot name="header">
<span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
<span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
</slot>
<div class="p-panel-icons">
<div class="p-panel-icons" v-bind="ptm('icons')">
<slot name="icons"></slot>
<button
v-if="toggleable"
@ -18,15 +18,17 @@
:aria-expanded="!d_collapsed"
@click="toggle"
@keydown="onKeyDown"
v-bind="toggleButtonProps"
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
>
<span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
<slot name="headericon" :collapsed="d_collapsed">
<span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }" v-bind="ptm('headericon')"></span>
</slot>
</button>
</div>
</div>
<transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
<div class="p-panel-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div class="p-panel-content" v-bind="ptm('content')">
<slot></slot>
</div>
</div>
@ -35,11 +37,13 @@
</template>
<script>
import ComponentBase from 'primevue/base';
import Ripple from 'primevue/ripple';
import { UniqueComponentId } from 'primevue/utils';
export default {
name: 'Panel',
extends: ComponentBase,
emits: ['update:collapsed', 'toggle'],
props: {
header: String,

74
components/lib/scrollpanel/ScrollPanel.d.ts vendored
View File

@ -10,6 +10,75 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type ScrollPanelPassThroughOptionType = ScrollPanelPassThroughAttributes | ((options: ScrollPanelPassThroughMethodOptions) => ScrollPanelPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ScrollPanelPassThroughMethodOptions {
props: ScrollPanelProps;
state: ScrollPanelState;
}
/**
* Custom passthrough(pt) options.
* @see {@link ScrollPanelProps.pt}
*/
export interface ScrollPanelPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ScrollPanelPassThroughOptionType;
/**
* Uses to pass attributes to the wrapper's DOM element.
*/
wrapper?: ScrollPanelPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: ScrollPanelPassThroughOptionType;
/**
* Uses to pass attributes to the horizontal panel's DOM element.
*/
barx?: ScrollPanelPassThroughOptionType;
/**
* Uses to pass attributes to the vertical panel's DOM element.
*/
bary?: ScrollPanelPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ScrollPanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Panel component.
*/
export interface ScrollPanelState {
/**
* Current id state as a string.
*/
id: string;
/**
* Current scrollpanel orientation.
* @defaultValue vertical
*/
orientation: string;
/**
* Latest scroll top position.
* @defaultValue 0
*/
lastScrollTop: number;
/**
* Latest scroll left position.
* @defaultValue 0
*/
lastScrollLeft: number;
}
/**
* Defines valid properties in ScrollPanel component.
*/
@ -19,6 +88,11 @@ export interface ScrollPanelProps {
* @defaultValue 5
*/
step?: number | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {ScrollPanelPassThroughOptions}
*/
pt?: ScrollPanelPassThroughOptions;
}
/**

10
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-scrollpanel p-component">
<div class="p-scrollpanel-wrapper">
<div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar">
<div class="p-scrollpanel p-component" v-bind="ptm('root')">
<div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
<div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
<slot></slot>
</div>
</div>
@ -17,6 +17,7 @@
@keyup="onKeyUp"
@focus="onFocus"
@blur="onBlur"
v-bind="ptm('barx')"
></div>
<div
ref="yBar"
@ -29,15 +30,18 @@
@keydown="onKeyDown($event)"
@keyup="onKeyUp"
@focus="onFocus"
v-bind="ptm('bary')"
></div>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'ScrollPanel',
extends: ComponentBase,
props: {
step: {
type: Number,

51
components/lib/splitter/Splitter.d.ts vendored
View File

@ -10,6 +10,16 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type SplitterPassThroughOptionType = SplitterPassThroughAttributes | ((options: SplitterPassThroughMethodOptions) => SplitterPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface SplitterPassThroughMethodOptions {
props: SplitterProps;
state: SplitterState;
}
/**
* Custom resize start event.
* @see {@link SplitterEmits.resizestar}
@ -40,6 +50,42 @@ export interface SplitterResizeEndEvent {
sizes: number[];
}
/**
* Custom passthrough(pt) options.
* @see {@link SplitterProps.pt}
*/
export interface SplitterPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: SplitterPassThroughOptionType;
/**
* Uses to pass attributes to the gutter's DOM element.
*/
gutter?: SplitterPassThroughOptionType;
/**
* Uses to pass attributes to the gutter handler's DOM element.
*/
gutterhandler?: SplitterPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface SplitterPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Panel component.
*/
export interface SplitterState {
/**
* Previous size state as a number.
*/
prevSize: number;
}
/**
* Defines valid properties in Splitter component.
*/
@ -68,6 +114,11 @@ export interface SplitterProps {
* @defaultValue 1
*/
step?: number | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {SplitterPassThroughOptions}
*/
pt?: SplitterPassThroughOptions;
}
/**

18
components/lib/splitter/Splitter.vue
View File

@ -1,19 +1,31 @@
<template>
<div :class="containerClass">
<div :class="containerClass" v-bind="ptm('root')">
<template v-for="(panel, i) of panels" :key="i">
<component :is="panel" tabindex="-1"></component>
<div v-if="i !== panels.length - 1" class="p-splitter-gutter" @mousedown="onGutterMouseDown($event, i)" @touchstart="onGutterTouchStart($event, i)" @touchmove="onGutterTouchMove($event, i)" @touchend="onGutterTouchEnd($event, i)">
<div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" role="separator" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)"></div>
<div
v-if="i !== panels.length - 1"
class="p-splitter-gutter"
role="separator"
tabindex="-1"
@mousedown="onGutterMouseDown($event, i)"
@touchstart="onGutterTouchStart($event, i)"
@touchmove="onGutterTouchMove($event, i)"
@touchend="onGutterTouchEnd($event, i)"
v-bind="ptm('gutter')"
>
<div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterhandler')"></div>
</div>
</template>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
import { DomHandler, ObjectUtils } from 'primevue/utils';
export default {
name: 'Splitter',
extends: ComponentBase,
emits: ['resizestart', 'resizeend'],
props: {
layout: {

32
components/lib/splitterpanel/SplitterPanel.d.ts vendored
View File

@ -10,6 +10,33 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroughAttributes | ((options: SplitterPanelPassThroughMethodOptions) => SplitterPanelPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface SplitterPanelPassThroughMethodOptions {
props: SplitterPanelProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link PanelProps.pt}
*/
export interface SplitterPanelPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: SplitterPanelPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface SplitterPanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in SplitterPanel component.
*/
@ -22,6 +49,11 @@ export interface SplitterPanelProps {
* Minimum size of the element relative to 100%.
*/
minSize?: number | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {SplitterPanelPassThroughOptions}
*/
pt?: SplitterPanelPassThroughOptions;
}
/**

5
components/lib/splitterpanel/SplitterPanel.vue
View File

@ -1,12 +1,15 @@
<template>
<div ref="container" :class="containerClass">
<div ref="container" :class="containerClass" v-bind="ptm('root')">
<slot></slot>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'SplitterPanel',
extends: ComponentBase,
props: {
size: {
type: Number,

54
components/lib/tabpanel/TabPanel.d.ts vendored
View File

@ -8,8 +8,50 @@
*
*/
import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
import { TabViewPassThroughOptions } from '../tabview';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface TabPanelPassThroughMethodOptions {
props: TabPanelProps;
parent: TabViewPassThroughOptions;
}
/**
* Custom passthrough(pt) options.
* @see {@link TabPanelProps.pt}
*/
export interface TabPanelPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the header action's DOM element.
*/
headeraction?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the title's DOM element.
*/
headertitle?: TabPanelPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
content?: TabPanelPassThroughOptionType;
}
export interface TabPanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in TabPanel component.
*/
@ -20,30 +62,37 @@ export interface TabPanelProps {
header?: string | undefined;
/**
* Inline style of the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerStyle?: any;
/**
* Style class of the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerClass?: any;
/**
* Uses to pass all properties of the HTMLLiElement to the tab header.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
headerProps?: LiHTMLAttributes | undefined;
/**
* Uses 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;
/**
* Inline style of the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentStyle?: any;
/**
* Style class of the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab content.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
contentProps?: HTMLAttributes | undefined;
/**
@ -51,6 +100,11 @@ export interface TabPanelProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {TabPanelPassThroughOptions}
*/
pt?: TabPanelPassThroughOptions;
}
/**
* Defines valid slots in TabPanel slots.

2
components/lib/tabpanel/TabPanel.vue
View File

@ -3,8 +3,10 @@
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'TabPanel',
extends: ComponentBase,
props: {
header: null,
headerStyle: null,

99
components/lib/tabview/TabView.d.ts vendored
View File

@ -10,6 +10,8 @@
import { ButtonHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
/**
* Custom tab change event.
* @see {@link TabViewEmits['tab-change']}
@ -32,6 +34,88 @@ export interface TabViewChangeEvent {
*/
export interface TabViewClickEvent extends TabViewChangeEvent {}
/**
* Custom passthrough(pt) options.
* @see {@link TabViewProps.pt}
*/
export interface TabViewPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nav container's DOM element.
*/
navcontainer?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nav content's DOM element.
*/
navcontent?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
nav?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the list items' DOM element.
*/
tabheader?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the inkbar's DOM element.
*/
inkbar?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the previous button's DOM element.
*/
prevbutton?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the previous button icon's DOM element.
*/
previcon?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the nex button's DOM element.
*/
nextbutton?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the next button icon's DOM element.
*/
nexticon?: TabViewPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panelcontainer?: TabViewPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface TabViewPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in TabView component.
*/
export interface TabViewState {
/**
* Current active index state.
*/
d_activeIndex: number;
/**
* Unique id for the TabView component.
*/
id: string;
/**
* Current state of previous button.
* @defaultValue true
*/
isPrevButtonDisabled: boolean;
/**
* Current state of the next button.
* @defaultValue false
*/
isNextButtonDisabled: boolean;
}
/**
* Defines valid properties in TabView component.
*/
@ -63,12 +147,19 @@ export interface TabViewProps {
selectOnFocus?: boolean | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the previous button.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
previousButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the next button.
* @deprecated since v3.26.0. Use 'pt' property instead.
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {TabViewPassThroughOptions}
*/
pt?: TabViewPassThroughOptions;
}
/**
@ -79,6 +170,14 @@ export interface TabViewSlots {
* Default slot to detect TabPanel components.
*/
default(): VNode[];
/**
* Previous button icon template for the scrollable component.
*/
previcon(): VNode[];
/**
* Next button icon template for the scrollable component.
*/
nexticon(): VNode[];
}
/**

51
components/lib/tabview/TabView.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="contentClasses">
<div class="p-tabview-nav-container">
<div :class="contentClasses" v-bind="ptm('root')">
<div class="p-tabview-nav-container" v-bind="ptm('navcontainer')">
<button
v-if="scrollable && !isPrevButtonDisabled"
ref="prevBtn"
@ -10,13 +10,23 @@
:tabindex="tabindex"
:aria-label="prevButtonAriaLabel"
@click="onPrevButtonClick"
v-bind="previousButtonProps"
v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
>
<span class="pi pi-chevron-left" aria-hidden="true"></span>
<slot name="previcon">
<span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
</slot>
</button>
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
<ul ref="nav" class="p-tabview-nav" role="tablist">
<li v-for="(tab, i) of tabs" :key="getKey(tab, i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
<ul ref="nav" class="p-tabview-nav" role="tablist" v-bind="ptm('nav')">
<li
v-for="(tab, i) of tabs"
:key="getKey(tab, i)"
:style="getTabProp(tab, 'headerStyle')"
:class="getTabHeaderClass(tab, i)"
role="presentation"
:data-index="i"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }"
>
<a
:id="getTabHeaderActionId(i)"
v-ripple
@ -28,13 +38,13 @@
:aria-controls="getTabContentId(i)"
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="getTabProp(tab, 'headerActionProps')"
v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headeraction') }"
>
<span v-if="tab.props && tab.props.header" class="p-tabview-title">{{ tab.props.header }}</span>
<span v-if="tab.props && tab.props.header" class="p-tabview-title" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</li>
<li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true"></li>
<li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></li>
</ul>
</div>
<button
@ -46,12 +56,14 @@
:tabindex="tabindex"
:aria-label="nextButtonAriaLabel"
@click="onNextButtonClick"
v-bind="nextButtonProps"
v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
>
<span class="pi pi-chevron-right" aria-hidden="true"></span>
<slot name="nexticon">
<span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
</slot>
</button>
</div>
<div class="p-tabview-panels">
<div class="p-tabview-panels" v-bind="ptm('panelcontainer')">
<template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
<div
v-if="lazy ? isTabActive(i) : true"
@ -60,7 +72,7 @@
:class="getTabContentClass(tab)"
role="tabpanel"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="getTabProp(tab, 'contentProps')"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
>
<component :is="tab"></component>
</div>
@ -70,11 +82,13 @@
</template>
<script>
import ComponentBase from 'primevue/base';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
export default {
name: 'TabView',
extends: ComponentBase,
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
props: {
activeIndex: {
@ -152,6 +166,15 @@ export default {
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
getTabPT(tab, key) {
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
props: tab.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
onScroll(event) {
this.scrollable && this.updateButtonState();

44
components/lib/toolbar/Toolbar.d.ts vendored
View File

@ -10,6 +10,45 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type ToolbarPassThroughOptionType = ToolbarPassThroughAttributes | ((options: ToolbarPassThroughMethodOptions) => ToolbarPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ToolbarPassThroughMethodOptions {
props: ToolbarProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link ToolbarProps.pt}
*/
export interface ToolbarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ToolbarPassThroughOptionType;
/**
* Uses to pass attributes to the groupleft's DOM element.
*/
groupleft?: ToolbarPassThroughOptionType;
/**
* Uses to pass attributes to the groupcenter's DOM element.
*/
groupcenter?: ToolbarPassThroughOptionType;
/**
* Uses to pass attributes to the groupright's DOM element.
*/
groupright?: ToolbarPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ToolbarPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in Toolbar component.
*/
@ -18,6 +57,11 @@ export interface ToolbarProps {
* Defines a string value that labels an interactive element.
*/
'aria-labelledby'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {ToolbarPassThroughOptions}
*/
pt?: ToolbarPassThroughOptions;
}
/**

10
components/lib/toolbar/Toolbar.vue
View File

@ -1,20 +1,22 @@
<template>
<div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby">
<div class="p-toolbar-group-start p-toolbar-group-left">
<div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
<div class="p-toolbar-group-start p-toolbar-group-left" v-bind="ptm('groupleft')">
<slot name="start"></slot>
</div>
<div class="p-toolbar-group-center">
<div class="p-toolbar-group-center" v-bind="ptm('groupcenter')">
<slot name="center"></slot>
</div>
<div class="p-toolbar-group-end p-toolbar-group-right">
<div class="p-toolbar-group-end p-toolbar-group-right" v-bind="ptm('groupright')">
<slot name="end"></slot>
</div>
</div>
</template>
<script>
import ComponentBase from 'primevue/base';
export default {
name: 'Toolbar',
extends: ComponentBase,
props: {
'aria-labelledby': {
type: String,

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

@ -17407,6 +17407,90 @@
}
]
},
"PanelPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "",
"props": [
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"methods": []
},
"PanelPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "PanelProps.pt",
"props": [
{
"name": "content",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the content's DOM element."
},
{
"name": "header",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the header's DOM element."
},
{
"name": "headericon",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the headericon's DOM element."
},
{
"name": "icons",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the title's DOM element."
},
{
"name": "root",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the root's DOM element."
},
{
"name": "title",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the title's DOM element."
},
{
"name": "toggleablecontent",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the toggleablecontent's DOM element."
},
{
"name": "toggler",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptionType",
"default": "",
"description": "Uses to pass attributes to the toggler's DOM element."
}
],
"methods": []
},
"PanelProps": {
"description": "Defines valid properties in Panel component.",
"relatedProp": "",
@ -17427,6 +17511,14 @@
"default": "",
"description": "Header text of the panel."
},
{
"name": "pt",
"optional": true,
"readonly": false,
"type": "PanelPassThroughOptions",
"default": "",
"description": "Uses to pass attributes to DOM elements inside the component."
},
{
"name": "toggleButtonProps",
"optional": true,
@ -17463,6 +17555,19 @@
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom header template."
},
{
"name": "headericon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>collapsed</b>: boolean, // Collapsed state as a boolean\n }",
"description": "header icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom header icon template of panel."
},
{
"name": "icons",
"parameters": [],
@ -17471,6 +17576,21 @@
}
]
},
"PanelState": {
"description": "Defines current inline states in Panel component.",
"relatedProp": "",
"props": [
{
"name": "d_collapsed",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "",
"description": "Current collapsed state as a boolean"
}
],
"methods": []
},
"PanelToggleEvent": {
"description": "Custom toggle event.",
"relatedProp": "PanelEmits.toggle",
@ -17495,6 +17615,14 @@
"methods": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"PanelPassThroughOptionType": {
"values": "PanelPassThroughAttributes | Function | null | undefined"
}
}
}
},
"panelmenu": {

1
nuxt.config.js
View File

@ -85,6 +85,7 @@ export default defineNuxtConfig({
'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
'primevue/base': path.resolve(__dirname, './components/lib/base/ComponentBase.vue'),
'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),

1
vitest.config.js
View File

@ -23,6 +23,7 @@ export default {
'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
'primevue/base': path.resolve(__dirname, './components/lib/base/ComponentBase.vue'),
'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),