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

Merge branch 'master' into issue-4200

pull/4339/head
Bahadır Sofuoğlu 2023-08-31 14:26:24 +03:00
parent a75e7c6bc8 0cfe81f9ff
commit 3a2fc4339d
76 changed files with 2878 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,11 +71,15 @@ const MenuSlots = [
},
{
name: 'item',
description: 'Template of a menuitem.'
description: 'Custom item template.'
},
{
name: 'itemicon',
description: 'Custom item icon template.'
},
{
name: 'submenuheader',
description: 'Custom submenuheader template.'
}
];

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);
});
});

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');
});
});

6
components/lib/basecomponent/BaseComponent.vue
View File

@ -508,7 +508,7 @@ export default {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { merge, useMergeProps } = pt['_usept'];
const { mergeSections, mergeProps: useMergeProps } = pt['_usept'];
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
@ -516,7 +516,7 @@ export default {
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);
@ -555,7 +555,7 @@ export default {
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.$config.unstyled;
return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
},
$params() {
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };

4
components/lib/basedirective/BaseDirective.js
View File

@ -52,7 +52,7 @@ const BaseDirective = {
const fn = (value) => callback(value, key, params);
if (pt?.hasOwnProperty('_usept')) {
const { merge, useMergeProps } = pt['_usept'];
const { mergeSections, mergeProps: useMergeProps } = pt['_usept'];
const originalValue = fn(pt.originalValue);
const value = fn(pt.value);
@ -60,7 +60,7 @@ const BaseDirective = {
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
}
return fn(pt);

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', () => {

8
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View File

@ -138,6 +138,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: (...args: any) => string;
}): 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() } });

31
components/lib/breadcrumb/BreadcrumbItem.vue
View File

@ -1,6 +1,6 @@
<template>
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
<template v-if="!templates || !templates.item">
<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', ptmOptions)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
@ -14,12 +14,13 @@
<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,7 +56,7 @@ 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;
}
@ -68,6 +69,30 @@ export default {
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)
)
};
}
}
};

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-section="root" data-pc-name="button" data-pd-ripple="true"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
});
});

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 () => {

8
components/lib/contextmenu/ContextMenu.d.ts vendored
View File

@ -237,6 +237,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: (...args: any) => string;
}): VNode[];
/**
* Custom item icon template.

20
components/lib/contextmenu/ContextMenu.vue
View File

@ -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;

36
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -39,7 +39,7 @@
</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',
@ -197,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: {

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 () => {

8
components/lib/dock/Dock.d.ts vendored
View File

@ -210,6 +210,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: (...args: any) => string;
}): VNode[];
/**
* Custom icon content.

5
components/lib/dock/Dock.vue
View File

@ -23,6 +23,11 @@ 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')];

21
components/lib/dock/DockSub.vue
View File

@ -64,7 +64,7 @@
<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',
@ -275,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: {

12
components/lib/megamenu/MegaMenu.d.ts vendored
View File

@ -242,6 +242,18 @@ export interface MegaMenuSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
/**
* Whether or not there is a submenu
*/
hasSubmenu: boolean;
}): VNode[];
/**
* Custom submenu icon template.

36
components/lib/megamenu/MegaMenu.vue
View File

@ -22,6 +22,7 @@
:exact="exact"
:level="0"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@ -43,36 +44,6 @@ export default {
name: 'MegaMenu',
extends: BaseMegaMenu,
emits: ['focus', 'blur'],
props: {
model: {
type: Array,
default: null
},
orientation: {
type: String,
default: 'horizontal'
},
exact: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
outsideClickListener: null,
resizeListener: null,
container: null,
@ -102,6 +73,11 @@ 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();
},

37
components/lib/megamenu/MegaMenuSub.vue
View File

@ -26,20 +26,20 @@
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
<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, index, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ 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, index, 'action')">
<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, index, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="isItemGroup(processedItem)" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
<div :class="cx('grid')" v-bind="ptm('grid')">
@ -84,6 +84,7 @@ import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'MegaMenuSub',
@ -191,6 +192,36 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
getMenuItemProps(processedItem, index) {
return {
action: mergeProps(
{
class: this.cx('action'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions(processedItem, index, 'action')
),
icon: mergeProps(
{
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
},
this.getPTOptions(processedItem, index, 'icon')
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions(processedItem, index, 'label')
),
submenuicon: mergeProps(
{
class: this.cx('submenuIcon')
},
this.getPTOptions(processedItem, index, 'submenuIcon')
)
};
}
},
components: {

18
components/lib/menu/Menu.d.ts vendored
View File

@ -218,6 +218,14 @@ export interface MenuSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
}): VNode[];
/**
* Custom item icon template.
@ -233,6 +241,16 @@ export interface MenuSlots {
*/
class: any;
}): VNode[];
/**
* Custom item template.
* @param {Object} scope - submenuheader slot's params.
*/
submenuheader(scope: {
/**
* Menuitem instance
*/
submenuheader: MenuItem;
}): VNode[];
}
/**

7
components/lib/menu/Menu.vue
View File

@ -22,7 +22,7 @@
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator">
<li v-if="item.items" :id="id + '_' + i" :class="cx('submenuHeader')" role="none" v-bind="ptm('submenuHeader')">
<slot name="item" :item="item">{{ label(item) }}</slot>
<slot name="submenuheader" :item="item">{{ label(item) }}</slot>
</li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
@ -73,6 +73,11 @@ export default {
resizeListener: null,
container: null,
list: null,
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();

27
components/lib/menu/Menuitem.vue
View File

@ -26,7 +26,7 @@
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="item"></component>
<component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps(item)"></component>
</div>
</li>
</template>
@ -35,6 +35,7 @@
import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'Menuitem',
@ -83,6 +84,30 @@ export default {
},
label() {
return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
},
getMenuItemProps(item) {
return {
action: mergeProps(
{
class: this.cx('action'),
tabindex: '-1',
'aria-hidden': true
},
this.getPTOptions('action')
),
icon: mergeProps(
{
class: [this.cx('icon'), item.icon]
},
this.getPTOptions('icon')
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions('label')
)
};
}
},
directives: {

12
components/lib/menubar/Menubar.d.ts vendored
View File

@ -233,6 +233,18 @@ export interface MenubarSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
/**
* State of the root
*/
root: boolean;
}): VNode[];
/**
* Custom popup icon template on responsive mode.

6
components/lib/menubar/Menubar.vue
View File

@ -39,6 +39,7 @@
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@ -88,6 +89,11 @@ export default {
outsideClickListener: null,
container: null,
menubar: null,
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();
},

33
components/lib/menubar/MenubarSub.vue
View File

@ -38,7 +38,7 @@
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
<component v-else :is="templates.item" :item="processedItem.item" :root="root" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<MenubarSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@ -76,6 +76,7 @@ import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'MenubarSub',
@ -179,6 +180,36 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
getMenuItemProps(processedItem, index) {
return {
action: mergeProps(
{
class: this.cx('action'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions(processedItem, index, 'action')
),
icon: mergeProps(
{
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
},
this.getPTOptions(processedItem, index, 'icon')
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions(processedItem, index, 'label')
),
submenuicon: mergeProps(
{
class: this.cx('submenuIcon')
},
this.getPTOptions(processedItem, index, 'submenuIcon')
)
};
}
},
components: {

12
components/lib/panelmenu/PanelMenu.d.ts vendored
View File

@ -238,6 +238,18 @@ export interface PanelMenuSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
/**
* Whether or not there is a submenu
*/
hasSubmenu: boolean;
}): VNode[];
/**
* Custom submenu icon template.

6
components/lib/panelmenu/PanelMenu.vue
View File

@ -50,6 +50,7 @@
@header-focus="updateFocusedHeader"
:exact="exact"
:pt="pt"
:unstyled="unstyled"
/>
</div>
</div>
@ -81,6 +82,11 @@ export default {
this.id = newValue || UniqueComponentId();
}
},
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();
},

1
components/lib/panelmenu/PanelMenuList.vue
View File

@ -16,6 +16,7 @@
@keydown="onKeyDown"
@item-toggle="onItemToggle"
:pt="pt"
:unstyled="unstyled"
v-bind="ptm('menu')"
/>
</template>

34
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -35,7 +35,7 @@
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="isItemGroup(processedItem)" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
@ -52,6 +52,7 @@
:exact="exact"
@item-toggle="onItemToggle"
:pt="pt"
:unstyled="unstyled"
v-bind="ptm('submenu')"
/>
</div>
@ -74,6 +75,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'PanelMenuSub',
@ -167,6 +169,36 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
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: {

12
components/lib/passthrough/index.js
View File

@ -2,16 +2,16 @@
* @todo: Add dynamic params support;
*
* Exp;
* usePassThrough(pt1, pt2, pt3, pt*, { merge: true });
* usePassThrough(pt1, { merge: true });
* usePassThrough(pt1, pt2, pt3, pt*, { mergeSections: true });
* usePassThrough(pt1, { mergeSections: true });
*/
export const usePassThrough = (pt1 = {}, pt2 = {}, { merge = true, useMergeProps = true } = {}) => {
export const usePassThrough = (pt1 = {}, pt2 = {}, { mergeSections = true, mergeProps = false } = {}) => {
return {
_usept: {
merge,
useMergeProps
mergeSections,
mergeProps
},
originalValue: pt1,
value: pt2
value: { ...pt1, ...pt2 }
};
};

4
components/lib/skeleton/Skeleton.spec.js
View File

@ -15,13 +15,13 @@ describe('Skeleton.vue', () => {
it('should get width and height', async () => {
await wrapper.setProps({ width: '5rem', height: '2rem', borderRadius: '10px' });
expect(wrapper.find('.p-skeleton').attributes().style).toEqual('width: 5rem; height: 2rem; border-radius: 10px;');
expect(wrapper.find('.p-skeleton').attributes().style).toEqual('position: relative; width: 5rem; height: 2rem; border-radius: 10px;');
});
it('should get size', async () => {
await wrapper.setProps({ size: '4rem' });
expect(wrapper.find('.p-skeleton').attributes().style).toEqual('width: 4rem; height: 4rem;');
expect(wrapper.find('.p-skeleton').attributes().style).toEqual('position: relative; width: 4rem; height: 4rem;');
});
it('should get shape', async () => {

2
components/lib/slider/Slider.spec.js
View File

@ -20,7 +20,7 @@ describe('Slider.vue', () => {
it('should drag start and end', async () => {
await wrapper.vm.onDragStart({ preventDefault: () => {}, currentTarget: { focus: () => {} } });
expect(wrapper.find('.p-slider').classes()).toContain('p-slider-sliding');
expect(wrapper.find('.p-slider').classes()).toStrictEqual(['p-slider', 'p-component', 'p-slider-horizontal']);
await wrapper.vm.onDragEnd();

6
components/lib/speeddial/SpeedDial.spec.js
View File

@ -77,16 +77,14 @@ describe('SpeedDial.vue', () => {
expect(wrapper.findAll('li.p-speeddial-item')[wrapper.findAll('li.p-speeddial-item').length - 2].attributes().style).toBe('transition-delay: 80ms;');
});
it('should have show and hide icons', async () => {
it('should have hide icon', async () => {
await wrapper.setProps({ showIcon: 'pi pi-bars', hideIcon: 'pi pi-times' });
const button = wrapper.find('.p-speeddial-button');
expect(button.find('span').classes()).toContain('pi-bars');
await wrapper.vm.onClick({});
expect(button.find('span').classes()).toContain('pi-times');
expect(button.find('span').classes()).not.toContain('pi-times');
});
it('should have mask', async () => {

2
components/lib/splitter/Splitter.spec.js
View File

@ -38,6 +38,6 @@ describe('Splitter.vue', () => {
await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-resizing');
expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal');
});
});

12
components/lib/steps/Steps.d.ts vendored
View File

@ -137,6 +137,18 @@ export interface StepsSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Order of the menuitem
*/
index: number;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
}): VNode[];
}

34
components/lib/steps/Steps.vue
View File

@ -23,7 +23,7 @@
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
</span>
</template>
<component v-else :is="$slots.item" :item="item"></component>
<component v-else :is="$slots.item" :item="item" :index="index" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
</li>
</template>
</ol>
@ -32,11 +32,17 @@
<script>
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
import BaseSteps from './BaseSteps.vue';
export default {
name: 'Steps',
extends: BaseSteps,
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
mounted() {
const firstItem = this.findFirstItem();
@ -159,7 +165,7 @@ export default {
focusableItem.focus();
},
isActive(item) {
return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
return item.to || item.route ? this.$router.resolve(item.to || item.route).path === this.$route.path : false;
},
isItemDisabled(item) {
return this.disabled(item) || (this.readonly && !this.isActive(item));
@ -172,6 +178,30 @@ export default {
},
label(item) {
return typeof item.label === 'function' ? item.label() : item.label;
},
getMenuItemProps(item, index) {
return {
action: mergeProps(
{
class: this.cx('action'),
onClick: ($event) => this.onItemClick($event, item),
onKeyDown: ($event) => this.onItemKeydown($event, item)
},
this.getPTOptions('action', item, index)
),
step: mergeProps(
{
class: this.cx('step')
},
this.getPTOptions('step', item, index)
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions('label', item, index)
)
};
}
}
};

2
components/lib/tag/Tag.spec.js
View File

@ -64,6 +64,6 @@ describe('Tag.vue', () => {
}
});
expect(wrapper.html()).toBe('<span class="p-tag p-component"><!--v-if--><i class="pi pi-discord"></i></span>');
expect(wrapper.html()).toBe('<span class="p-tag p-component" data-pc-section="root" data-pc-name="tag"><!--v-if--><i class="pi pi-discord"></i></span>');
});
});

12
components/lib/tieredmenu/TieredMenu.d.ts vendored
View File

@ -236,6 +236,18 @@ export interface TieredMenuSlots {
* Menuitem instance
*/
item: MenuItem;
/**
* Label property of the menuitem
*/
label: string | ((...args: any) => string) | undefined;
/**
* Binding properties of the menuitem
*/
props: (...args: any) => string;
/**
* Whether or not there is a submenu
*/
hasSubmenu: boolean;
}): VNode[];
/**
* Custom submenu icon template.

6
components/lib/tieredmenu/TieredMenu.vue
View File

@ -20,6 +20,7 @@
:exact="exact"
:level="0"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@ -77,6 +78,11 @@ 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();
},

34
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -38,7 +38,7 @@
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<TieredMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@ -53,6 +53,7 @@
:exact="exact"
:level="level + 1"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
/>
@ -74,6 +75,7 @@ import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
name: 'TieredMenuSub',
@ -167,6 +169,36 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
getMenuItemProps(processedItem, index) {
return {
action: mergeProps(
{
class: this.cx('action'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions(processedItem, index, 'action')
),
icon: mergeProps(
{
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
},
this.getPTOptions(processedItem, index, 'icon')
),
label: mergeProps(
{
class: this.cx('label')
},
this.getPTOptions(processedItem, index, 'label')
),
submenuicon: mergeProps(
{
class: this.cx('submenuIcon')
},
this.getPTOptions(processedItem, index, 'submenuIcon')
)
};
}
},
components: {

8
components/lib/utils/DomHandler.js
View File

@ -183,13 +183,13 @@ export default {
},
setAttribute(element, attribute = '', value) {
if (element && value !== null && value !== undefined) {
if (this.isElement(element) && value !== null && value !== undefined) {
element.setAttribute(attribute, value);
}
},
setAttributes(element, attributes = {}) {
if (element) {
if (this.isElement(element)) {
const computedStyles = (rule, value) => {
const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
@ -231,7 +231,7 @@ export default {
},
getAttribute(element, name) {
if (element) {
if (this.isElement(element)) {
const value = element.getAttribute(name);
if (!isNaN(value)) {
@ -249,7 +249,7 @@ export default {
},
isAttributeEquals(element, name, value) {
return element ? this.getAttribute(element, name) === value : false;
return this.isElement(element) ? this.getAttribute(element, name) === value : false;
},
isAttributeNotEquals(element, name, value) {

6
components/lib/virtualscroller/BaseVirtualScroller.vue
View File

@ -152,13 +152,13 @@ export default {
default: false
}
},
css: {
loadStyle
},
provide() {
return {
$parentInstance: this
};
},
beforeMount() {
loadStyle();
}
};
</script>

127
doc/breadcrumb/RouterDoc.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Breadcrumb>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
home: {
icon: 'pi pi-home',
route: '/'
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: {
basic: `<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Breadcrumb>`,
options: `<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
home: {
icon: 'pi pi-home',
route: '/'
},
items: [
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]
}
}
}
<\/script>`,
composition: `<template>
<div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Breadcrumb>
</div>
</template>
<script setup>
import { ref } from "vue";
const home = ref({
icon: 'pi pi-home',
route: '/'
});
const items = ref([
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]);
<\/script>`
}
};
}
};
</script>

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

@ -5181,7 +5181,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
"description": "item slot's params."
}
],
@ -14771,7 +14771,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
"description": "item slot's params."
}
],
@ -19670,7 +19670,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Custom content for item.\n \t <b>index</b>: number, // Index of the menuitem\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Custom content for item.\n \t <b>index</b>: number, // Index of the menuitem\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
"description": "item slot's params."
}
],
@ -27505,7 +27505,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n }",
"description": "item slot's params."
}
],
@ -27992,7 +27992,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
"description": "item slot's params."
}
],
@ -28011,6 +28011,19 @@
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item icon template."
},
{
"name": "submenuheader",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>submenuheader</b>: MenuItem, // Menuitem instance\n }",
"description": "submenuheader slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item template."
}
]
},
@ -28464,7 +28477,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>root</b>: boolean, // State of the root\n }",
"description": "item slot's params."
}
],
@ -32987,7 +33000,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n }",
"description": "item slot's params."
}
],
@ -39195,7 +39208,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>index</b>: number, // Order of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
"description": "item slot's params."
}
],
@ -41436,7 +41449,7 @@
{
"name": "scope",
"optional": false,
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n }",
"type": "{\n \t <b>item</b>: MenuItem, // Menuitem instance\n \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n }",
"description": "item slot's params."
}
],

109
doc/contextmenu/RouterDoc.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{ separator: true },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
],
code: {
basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />`,
options: `<template>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]
};
},
methods: {
onImageRightClick(event) {
this.$refs.routemenu.show(event);
}
}
};
<\/script>`,
composition: `<template>
<div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const routemenu = ref();
const items = ref([
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' },
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]);
const onImageRightClick = (event) => {
routemenu.value.show(event);
};
<\/script>`
}
};
},
methods: {
onImageRightClick(event) {
this.$refs.routemenu.show(event);
}
}
};
</script>

8
doc/dock/RouterDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>.
</p>
</DocSectionText>
</template>

467
doc/megamenu/RouterDoc.vue Normal file
View File

@ -0,0 +1,467 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card">
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
</MegaMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Videos',
icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
},
{
label: 'Video 2',
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
}
],
[
{
label: 'Video 3',
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
},
{
label: 'Video 4',
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
}
]
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
},
{
label: 'User 2',
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
}
],
[
{
label: 'User 3',
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
},
{
label: 'User 4',
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
}
],
[
{
label: 'User 5',
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
},
{
label: 'User 6',
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
}
]
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
},
{
label: 'Event 2',
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
}
],
[
{
label: 'Event 3',
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
},
{
label: 'Event 4',
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
}
]
]
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
},
{
label: 'Setting 2',
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
},
{
label: 'Setting 3',
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
}
],
[
{
label: 'Technology 4',
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
],
code: {
basic: `<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
</MegaMenu>`,
options: `<template>
<div class="card">
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
</MegaMenu>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Videos',
icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
},
{
label: 'Video 2',
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
}
],
[
{
label: 'Video 3',
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
},
{
label: 'Video 4',
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
}
]
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
},
{
label: 'User 2',
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
}
],
[
{
label: 'User 3',
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
},
{
label: 'User 4',
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
}
],
[
{
label: 'User 5',
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
},
{
label: 'User 6',
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
}
]
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
},
{
label: 'Event 2',
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
}
],
[
{
label: 'Event 3',
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
},
{
label: 'Event 4',
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
}
]
]
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
},
{
label: 'Setting 2',
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
},
{
label: 'Setting 3',
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
}
],
[
{
label: 'Technology 4',
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
]
};
}
};
<\/script>`,
composition: `<template>
<div class="card">
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
</MegaMenu>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
label: 'Videos',
icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
},
{
label: 'Video 2',
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
}
],
[
{
label: 'Video 3',
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
},
{
label: 'Video 4',
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
}
]
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
},
{
label: 'User 2',
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
}
],
[
{
label: 'User 3',
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
},
{
label: 'User 4',
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
}
],
[
{
label: 'User 5',
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
},
{
label: 'User 6',
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
}
]
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
},
{
label: 'Event 2',
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
}
],
[
{
label: 'Event 3',
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
},
{
label: 'Event 4',
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
}
]
]
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
},
{
label: 'Setting 2',
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
},
{
label: 'Setting 3',
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
}
],
[
{
label: 'Technology 4',
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
]);
<\/script>`
}
};
}
};
</script>

67
doc/megamenu/TemplateDoc.vue
View File

@ -9,6 +9,19 @@
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
</span>
</template>
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -135,6 +148,11 @@ export default {
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
],
code: {
@ -142,6 +160,19 @@ export default {
<template #start>
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
</template>
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -154,6 +185,19 @@ export default {
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
</span>
</template>
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -279,6 +323,11 @@ export default {
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
]
};
@ -291,6 +340,19 @@ export default {
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
</span>
</template>
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -413,6 +475,11 @@ const items = ref([
}
]
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
}
]);
<\/script>`

45
doc/menu/GroupDoc.vue
View File

@ -31,21 +31,6 @@ export default {
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
],
code: {
@ -81,21 +66,6 @@ export default {
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
]
};
@ -133,21 +103,6 @@ const items = ref([
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
]);
<\/script>`

45
doc/menu/PopupDoc.vue
View File

@ -32,21 +32,6 @@ export default {
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
],
code: {
@ -84,21 +69,6 @@ export default {
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
]
};
@ -146,21 +116,6 @@ const items = ref([
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
]);

215
doc/menu/RouterDoc.vue Normal file
View File

@ -0,0 +1,215 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/',
target: '_blank'
},
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]
}
],
code: {
basic: `<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>`,
options: `<template>
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
<Toast />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/',
target: '_blank',
},
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]
}
]
};
}
};
<\/script>`,
composition: `<template>
<div class="card flex justify-content-center">
<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Menu>
<Toast />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref(items: [
{
label: 'Options',
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
}
]
},
{
label: 'Navigate',
items: [
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/',
target: '_blank',
},
{
label: 'Upload',
icon: 'pi pi-upload',
route: '/fileupload'
}
]
}
]);
<\/script>`
}
};
}
};
</script>

69
doc/menu/TemplateDoc.vue
View File

@ -1,6 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<p>
Menu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. When item templating is used, it is suggested to bind the <i>action</i> prop from the slot props to handle
accessibility and pass through attributes. Additionally, two slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Menu :model="items">
@ -13,6 +16,13 @@
</div>
</button>
</template>
<template #item="{ item, label, props }">
<a class="flex" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
</a>
</template>
<template #end>
<button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
<i class="pi pi-sign-out" />
@ -28,7 +38,19 @@
export default {
data() {
return {
items: [{ separator: true }, { label: 'Profile', icon: 'pi pi-fw pi-user' }, { label: 'Settings', icon: 'pi pi-fw pi-cog' }, { separator: true }],
items: [
{ separator: true },
{
label: 'Profile',
icon: 'pi pi-fw pi-user'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
badge: 2
},
{ separator: true }
],
code: {
basic: `<Menu :model="items">
<template #start>
@ -40,6 +62,13 @@ export default {
</div>
</button>
</template>
<template #item="{ item, label, props }">
<a class="flex" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
</a>
</template>
<template #end>
<button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
<i class="pi pi-sign-out" />
@ -59,6 +88,13 @@ export default {
</div>
</button>
</template>
<template #item="{ item, label, props }">
<a class="flex" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
</a>
</template>
<template #end>
<button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
<i class="pi pi-sign-out" />
@ -76,8 +112,15 @@ export default {
return {
items: [
{ separator: true },
{ label: 'Profile', icon: 'pi pi-fw pi-user' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog' },
{
label: 'Profile',
icon: 'pi pi-fw pi-user'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
badge: 2
},
{ separator: true }
]
};
@ -101,6 +144,13 @@ export default {
</div>
</button>
</template>
<template #item="{ item, label, props }">
<a class="flex" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
</a>
</template>
<template #end>
<button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
<i class="pi pi-sign-out" />
@ -118,8 +168,15 @@ import { useToast } from "primevue/usetoast";
const items = ref([
{ separator: true },
{ label: 'Profile', icon: 'pi pi-fw pi-user' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog' },
{
label: 'Profile',
icon: 'pi pi-fw pi-user'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
badge: 2
},
{ separator: true }
]);

488
doc/menubar/RouterDoc.vue Normal file
View File

@ -0,0 +1,488 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card relative z-2">
<Menubar :model="items">
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
</Menubar>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
],
code: {
basic: `<Menubar :model="items">
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
</Menubar>`,
options: `<template>
<div class="card relative z-2">
<Menubar :model="items">
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
</Menubar>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
]
};
}
};
<\/script>`,
composition: `<template>
<div class="card relative z-2">
<Menubar :model="items">
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
</Menubar>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
]);
<\/script>`
}
};
}
};
</script>

67
doc/menubar/TemplateDoc.vue
View File

@ -7,6 +7,19 @@
<template #start>
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
</template>
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -137,6 +150,11 @@ export default {
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
@ -147,6 +165,19 @@ export default {
<template #start>
<img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
</template>
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -157,6 +188,19 @@ export default {
<template #start>
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
</template>
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -286,6 +330,11 @@ export default {
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
@ -301,6 +350,19 @@ export default {
<template #start>
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
</template>
<template #item="{ label, item, props, root }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
</a>
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
@ -429,6 +491,11 @@ const items = ref([
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'

8
doc/panelmenu/RouterDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>.
</p>
</DocSectionText>
</template>

111
doc/passthrough/UsePassThroughDoc.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging.
One of the example use cases is customizing existing unstyled themes like Tailwind.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>
The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
<i>false</i> for <i>mergeProps</i>.
</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `import {createApp} from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import Tailwind from "primevue/passthrough/tailwind";
const app = createApp(App);
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
title: {
class: ['leading-none font-light text-2xl']
}
}
},
{
mergeSections: true,
useMergeProps: false
}
);
app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
},
code2: {
basic: `const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => Tailwind.panel.title.class`
},
code3: {
basic: `const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => Tailwind.panel.title.class`
},
code4: {
basic: `const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => undefined`
},
code5: {
basic: `const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => undefined`
}
};
}
};
</script>

84
doc/steps/BasicDoc.vue
View File

@ -3,7 +3,20 @@
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
</DocSectionText>
<div class="card">
<Steps :model="items" aria-label="Form Steps" :readonly="false" />
<Steps :model="items" aria-label="Form Steps" :readonly="false">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<span v-else v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</span>
</template>
</Steps>
</div>
<DocSectionCode :code="code" />
</template>
@ -15,27 +28,53 @@ export default {
items: [
{
label: 'Personal',
to: '/steps'
route: '/steps'
},
{
label: 'Seat',
to: '/steps/seat'
route: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment'
route: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
route: '/steps/confirmation'
}
],
code: {
basic: `<Steps :model="items" aria-label="Form Steps" />`,
basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<span v-else v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</span>
</template>
</Steps>`,
options: `<template>
<div>
<div class="card">
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps" :readonly="false">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<span v-else v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</span>
</template>
</Steps>
</div>
</div>
</template>
@ -47,19 +86,19 @@ export default {
items: [
{
label: 'Personal',
to: '/'
route: '/steps'
},
{
label: 'Seat',
to: '/seat'
route: '/steps/seat'
},
{
label: 'Payment',
to: '/payment'
route: '/steps/payment'
},
{
label: 'Confirmation',
to: '/confirmation'
route: '/steps/confirmation'
}
]
}
@ -69,7 +108,20 @@ export default {
composition: `<template>
<div>
<div class="card">
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps" :readonly="false">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<span v-else v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</span>
</template>
</Steps>
</div>
</div>
</template>
@ -80,19 +132,19 @@ import { ref } from "vue";
const items = ref([
{
label: 'Personal',
to: "/"
route: "/"
},
{
label: 'Seat',
to: "/seat",
route: "/seat",
},
{
label: 'Payment',
to: "/payment",
route: "/payment",
},
{
label: 'Confirmation',
to: "/confirmation",
route: "/confirmation",
}
]);
<\/script>`

74
doc/steps/InteractiveDoc.vue
View File

@ -3,7 +3,16 @@
<p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
</DocSectionText>
<div class="card">
<Steps :model="items" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</Steps>
</div>
<NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@ -22,25 +31,34 @@ export default {
items: [
{
label: 'Personal',
to: '/steps'
route: '/steps'
},
{
label: 'Seat',
to: '/steps/seat'
route: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment'
route: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
route: '/steps/confirmation'
}
],
formObject: {},
code: {
basic: `<div class="card">
<Steps :model="items" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</Steps>
</div>
<router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@ -50,11 +68,19 @@ export default {
</router-view>`,
options: `<template>
<div>
<Toast />
<div class="card">
<Steps :model="items" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</Steps>
</div>
<Toast />
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive>
@ -71,19 +97,19 @@ export default {
items: [
{
label: 'Personal',
to: '/'
route: '/'
},
{
label: 'Seat',
to: '/seat'
route: '/seat'
},
{
label: 'Payment',
to: '/payment'
route: '/payment'
},
{
label: 'Confirmation',
to: '/confirmation'
route: '/confirmation'
}
],
formObject: {}
@ -118,11 +144,19 @@ export default {
</style>`,
composition: `<template>
<div>
<Toast />
<div class="card">
<Steps :model="items" aria-label="Form Steps" />
<Steps :model="items" aria-label="Form Steps">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</Steps>
</div>
<Toast />
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive>
@ -142,19 +176,19 @@ const toast = useToast();
const items = ref([
{
label: 'Personal',
to: "/"
route: "/"
},
{
label: 'Seat',
to: "/seat",
route: "/seat",
},
{
label: 'Payment',
to: "/payment",
route: "/payment",
},
{
label: 'Confirmation',
to: "/confirmation",
route: "/confirmation",
}
]);
const formObject = ref({});

8
doc/steps/RouterDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an <NuxtLink to="/steps/#basic">example</NuxtLink> with vue-router.
</p>
</DocSectionText>
</template>

10
doc/tailwind/CustomizationDoc.vue
View File

@ -4,10 +4,10 @@
The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming documentation for each component
demonstrates the theme with an editable example. For instance, the panel component has the following default configuration.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>Let's assume the <i>title</i> section should be lighter and bigger. For the merge configuration behavior, visit <NuxtLink to="/passthrough/#usepassthrough">usePassThrough</NuxtLink> documentation.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>Let's assume the <i>title</i> section should be lighter and bigger.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
@ -65,8 +65,8 @@ const CustomTailwind = usePassThrough(
}
},
{
merge: true, // Used to merge PT options. The default is true.
useMergeProps: true, // Whether to use Vue's 'mergeProps' method to merge PT options.
mergeSecitons: true,
mergeProps: false
}
);

455
doc/tieredmenu/RouterDoc.vue Normal file
View File

@ -0,0 +1,455 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
separator: true
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
],
code: {
basic: `<TieredMenu :model="items" />`,
options: `<template>
<div class="card flex justify-content-center">
<TieredMenu :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
separator: true
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
]
};
}
};
<\/script>`,
composition: `<template>
<div class="card flex justify-content-center">
<TieredMenu :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Upload',
icon: 'pi pi-fw pi-upload',
route: '/fileupload'
},
{
separator: true
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
]);
<\/script>`
}
};
}
};
</script>

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "primevue",
"version": "3.32.2",
"version": "3.32.3-SNAPSHOT",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "primevue",
"version": "3.32.2",
"version": "3.32.3-SNAPSHOT",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {

6
pages/breadcrumb/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc';
import BasicDoc from '@/doc/breadcrumb/BasicDoc';
import ImportDoc from '@/doc/breadcrumb/ImportDoc';
import RouterDoc from '@/doc/breadcrumb/RouterDoc';
import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
import PTComponent from '@/doc/breadcrumb/pt/index.vue';
import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
@ -37,6 +38,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/contextmenu/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc';
import BasicDoc from '@/doc/contextmenu/BasicDoc';
import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
import ImportDoc from '@/doc/contextmenu/ImportDoc';
import RouterDoc from '@/doc/contextmenu/RouterDoc';
import PTComponent from '@/doc/contextmenu/pt/index.vue';
import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
@ -37,6 +38,11 @@ export default {
label: 'Document',
component: DocumentDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/dock/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc';
import AdvancedDoc from '@/doc/dock/AdvancedDoc';
import BasicDoc from '@/doc/dock/BasicDoc';
import ImportDoc from '@/doc/dock/ImportDoc';
import RouterDoc from '@/doc/dock/RouterDoc';
import PTComponent from '@/doc/dock/pt/index.vue';
import ThemingDoc from '@/doc/dock/theming/index.vue';
@ -29,6 +30,11 @@ export default {
label: 'Advanced',
component: AdvancedDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/megamenu/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
import BasicDoc from '@/doc/megamenu/BasicDoc';
import ImportDoc from '@/doc/megamenu/ImportDoc';
import RouterDoc from '@/doc/megamenu/RouterDoc';
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
import PTComponent from '@/doc/megamenu/pt/index.vue';
@ -43,6 +44,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/menu/index.vue
View File

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/menu/BasicDoc';
import GroupDoc from '@/doc/menu/GroupDoc';
import ImportDoc from '@/doc/menu/ImportDoc';
import PopupDoc from '@/doc/menu/PopupDoc';
import RouterDoc from '@/doc/menu/RouterDoc';
import TemplateDoc from '@/doc/menu/TemplateDoc';
import PTComponent from '@/doc/menu/pt/index.vue';
import ThemingDoc from '@/doc/menu/theming/index.vue';
@ -49,6 +50,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/menubar/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
import BasicDoc from '@/doc/menubar/BasicDoc';
import ImportDoc from '@/doc/menubar/ImportDoc';
import RouterDoc from '@/doc/menubar/RouterDoc';
import TemplateDoc from '@/doc/menubar/TemplateDoc';
import PTComponent from '@/doc/menubar/pt/index.vue';
import ThemingDoc from '@/doc/menubar/theming/index.vue';
@ -37,6 +38,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/panelmenu/index.vue
View File

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/panelmenu/BasicDoc';
import ImportDoc from '@/doc/panelmenu/ImportDoc';
import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
import RouterDoc from '@/doc/panelmenu/RouterDoc';
import PTComponent from '@/doc/panelmenu/pt/index.vue';
import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
@ -43,6 +44,11 @@ export default {
label: 'Multiple',
component: MultipleDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/passthrough/index.vue
View File

@ -20,6 +20,7 @@ import BasicDoc from '@/doc/passthrough/BasicDoc';
import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc';
import GlobalDoc from '@/doc/passthrough/GlobalDoc';
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
import UsePassThroughDoc from '../../doc/passthrough/UsePassThroughDoc.vue';
export default {
data() {
@ -44,6 +45,11 @@ export default {
id: 'customcss',
label: 'Custom CSS',
component: CustomCSSDoc
},
{
id: 'usepassthrough',
label: 'UsePassThrough',
component: UsePassThroughDoc
}
]
};

6
pages/steps.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
import BasicDoc from '@/doc/steps/BasicDoc';
import ImportDoc from '@/doc/steps/ImportDoc';
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
import RouterDoc from '@/doc/steps/RouterDoc';
import PTComponent from '@/doc/steps/pt/index.vue';
import ThemingDoc from '@/doc/steps/theming/index.vue';
@ -37,6 +38,11 @@ export default {
label: 'Interactive',
component: InteractiveDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',

6
pages/tieredmenu/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc';
import BasicDoc from '@/doc/tieredmenu/BasicDoc';
import ImportDoc from '@/doc/tieredmenu/ImportDoc';
import PopupDoc from '@/doc/tieredmenu/PopupDoc';
import RouterDoc from '@/doc/tieredmenu/RouterDoc';
import PTComponent from '@/doc/tieredmenu/pt/index.vue';
import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
@ -37,6 +38,11 @@ export default {
label: 'Popup',
component: PopupDoc
},
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{
id: 'accessibility',
label: 'Accessibility',