Merge branch 'master' into issue-4287
Bahadır Sofuoğlu
commit
c2dad63018
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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() } });
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<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" :label="item.label && label()" :props="getMenuItemProps"></component>
|
||||
<component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>`);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</template>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates.item" :item="processedItem.item" :label="processedItem.label" :props="getMenuItemProps()"></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)"
|
||||
|
|
@ -79,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',
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</template>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></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')">
|
||||
|
|
|
|||
|
|
@ -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 +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.
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</template>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></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)"
|
||||
|
|
@ -191,7 +191,7 @@ export default {
|
|||
},
|
||||
this.getPTOptions(processedItem, index, 'action')
|
||||
),
|
||||
icons: mergeProps(
|
||||
icon: mergeProps(
|
||||
{
|
||||
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></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')">
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
)
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</template>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></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)"
|
||||
|
|
@ -75,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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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) ⇒ 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) ⇒ 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) ⇒ 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) ⇒ 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) ⇒ string, // Binding properties of the menuitem\n }",
|
||||
"description": "item slot's params."
|
||||
}
|
||||
],
|
||||
|
|
@ -28477,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) ⇒ string, // Binding properties of the menuitem\n \t <b>root</b>: boolean, // State of the root\n }",
|
||||
"description": "item slot's params."
|
||||
}
|
||||
],
|
||||
|
|
@ -33000,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) ⇒ 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."
|
||||
}
|
||||
],
|
||||
|
|
@ -39208,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) ⇒ string, // Binding properties of the menuitem\n }",
|
||||
"description": "item slot's params."
|
||||
}
|
||||
],
|
||||
|
|
@ -41449,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) ⇒ 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."
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>`
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Since v3.23.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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>`
|
||||
|
|
|
|||
|
|
@ -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({});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue