Merge branch 'master' into issue-4287
commit
c2dad63018
|
@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
|
||||||
import { expect, it } from 'vitest';
|
import { expect, it } from 'vitest';
|
||||||
import AccordionTab from '../accordiontab/AccordionTab.vue';
|
import AccordionTab from '../accordiontab/AccordionTab.vue';
|
||||||
import Accordion from './Accordion.vue';
|
import Accordion from './Accordion.vue';
|
||||||
vi.mock('primevue/utils');
|
|
||||||
describe('Accordion.vue', () => {
|
describe('Accordion.vue', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
|
|
||||||
|
@ -151,23 +151,4 @@ describe('Accordion.vue', () => {
|
||||||
expect(findNextHeaderActionSpy).toHaveBeenCalled();
|
expect(findNextHeaderActionSpy).toHaveBeenCalled();
|
||||||
expect(onTabHomeKeySpy).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');
|
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 { beforeEach, expect } from 'vitest';
|
||||||
import BlockUI from './BlockUI.vue';
|
import BlockUI from './BlockUI.vue';
|
||||||
|
|
||||||
vi.mock('primevue/utils');
|
|
||||||
let wrapper = null;
|
let wrapper = null;
|
||||||
|
|
||||||
describe('BlockUI.vue', () => {
|
describe('BlockUI.vue', () => {
|
||||||
|
|
|
@ -138,6 +138,14 @@ export interface BreadcrumbSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
item: MenuItem;
|
||||||
|
/**
|
||||||
|
* Label property of the menuitem
|
||||||
|
*/
|
||||||
|
label: string | ((...args: any) => string) | undefined;
|
||||||
|
/**
|
||||||
|
* Binding properties of the menuitem
|
||||||
|
*/
|
||||||
|
props: (...args: any) => string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom separator template.
|
* Custom separator template.
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { mount } from '@vue/test-utils';
|
import { mount } from '@vue/test-utils';
|
||||||
import Breadcrumb from './Breadcrumb.vue';
|
import Breadcrumb from './Breadcrumb.vue';
|
||||||
|
import BreadcrumbItem from './BreadcrumbItem.vue';
|
||||||
|
|
||||||
describe('Breadcrumb', () => {
|
describe('Breadcrumb', () => {
|
||||||
it('should exist', () => {
|
it('should exist', () => {
|
||||||
|
@ -8,6 +9,9 @@ describe('Breadcrumb', () => {
|
||||||
stubs: {
|
stubs: {
|
||||||
'router-link': true
|
'router-link': true
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
BreadcrumbItem
|
||||||
|
},
|
||||||
mocks: {
|
mocks: {
|
||||||
$router: {
|
$router: {
|
||||||
currentRoute: {
|
currentRoute: {
|
||||||
|
|
|
@ -21,7 +21,9 @@ beforeEach(() => {
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
item: { label: 'Computer', visible: () => true },
|
item: { label: 'Computer', visible: () => true },
|
||||||
template: null
|
templates: {
|
||||||
|
item: undefined
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -31,8 +33,8 @@ afterEach(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('BreadcrumbItem', () => {
|
describe('BreadcrumbItem', () => {
|
||||||
it('When component is mount, text should be exists', () => {
|
it('When component is mount and template.item equal to null, text should not be exists', () => {
|
||||||
expect(wrapper.find('.p-menuitem-text').exists()).toBe(true);
|
expect(wrapper.find('.p-menuitem-text').exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('When tag is triggered, onClick method should be called', async () => {
|
it('When tag is triggered, onClick method should be called', async () => {
|
||||||
|
@ -53,18 +55,6 @@ describe('BreadcrumbItem', () => {
|
||||||
expect(spy).toHaveBeenCalled();
|
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 () => {
|
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() } });
|
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>
|
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
</li>
|
||||||
</template>
|
</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();
|
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 () => {
|
it('should dialog trigger the accept function', async () => {
|
||||||
|
@ -128,7 +128,7 @@ describe('ConfirmDialog', () => {
|
||||||
|
|
||||||
await dialogCloseBtn.trigger('click');
|
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 () => {
|
it('should position work', async () => {
|
||||||
|
|
|
@ -237,6 +237,14 @@ export interface ContextMenuSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
item: MenuItem;
|
||||||
|
/**
|
||||||
|
* Label property of the menuitem
|
||||||
|
*/
|
||||||
|
label: string | ((...args: any) => string) | undefined;
|
||||||
|
/**
|
||||||
|
* Binding properties of the menuitem
|
||||||
|
*/
|
||||||
|
props: (...args: any) => string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom item icon template.
|
* Custom item icon template.
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<ContextMenuSub
|
<ContextMenuSub
|
||||||
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
||||||
|
@ -79,6 +79,7 @@ import BaseComponent from 'primevue/basecomponent';
|
||||||
import AngleRightIcon from 'primevue/icons/angleright';
|
import AngleRightIcon from 'primevue/icons/angleright';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ContextMenuSub',
|
name: 'ContextMenuSub',
|
||||||
|
|
|
@ -646,7 +646,7 @@ describe('DataTable.vue', () => {
|
||||||
it('should vertical scroll', async () => {
|
it('should vertical scroll', async () => {
|
||||||
await wrapper.setProps({ scrollable: true, scrollHeight: '100px' });
|
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 () => {
|
it('should flex scrolling', async () => {
|
||||||
|
|
|
@ -210,6 +210,14 @@ export interface DockSlots {
|
||||||
* Index of the menuitem
|
* Index of the menuitem
|
||||||
*/
|
*/
|
||||||
index: number;
|
index: number;
|
||||||
|
/**
|
||||||
|
* Label property of the menuitem
|
||||||
|
*/
|
||||||
|
label: string | ((...args: any) => string) | undefined;
|
||||||
|
/**
|
||||||
|
* Binding properties of the menuitem
|
||||||
|
*/
|
||||||
|
props: (...args: any) => string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom icon content.
|
* Custom icon content.
|
||||||
|
|
|
@ -77,6 +77,7 @@ import BaseComponent from 'primevue/basecomponent';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import Tooltip from 'primevue/tooltip';
|
import Tooltip from 'primevue/tooltip';
|
||||||
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DockSub',
|
name: 'DockSub',
|
||||||
|
|
|
@ -242,6 +242,18 @@ export interface MegaMenuSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
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[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom submenu icon template.
|
* Custom submenu icon template.
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
||||||
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
|
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
|
||||||
<div :class="cx('grid')" v-bind="ptm('grid')">
|
<div :class="cx('grid')" v-bind="ptm('grid')">
|
||||||
|
|
|
@ -218,6 +218,14 @@ export interface MenuSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
item: MenuItem;
|
||||||
|
/**
|
||||||
|
* Label property of the menuitem
|
||||||
|
*/
|
||||||
|
label: string | ((...args: any) => string) | undefined;
|
||||||
|
/**
|
||||||
|
* Binding properties of the menuitem
|
||||||
|
*/
|
||||||
|
props: (...args: any) => string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom item icon template.
|
* Custom item icon template.
|
||||||
|
|
|
@ -233,6 +233,18 @@ export interface MenubarSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
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[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom popup icon template on responsive mode.
|
* Custom popup icon template on responsive mode.
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<MenubarSub
|
<MenubarSub
|
||||||
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
||||||
|
@ -191,7 +191,7 @@ export default {
|
||||||
},
|
},
|
||||||
this.getPTOptions(processedItem, index, 'action')
|
this.getPTOptions(processedItem, index, 'action')
|
||||||
),
|
),
|
||||||
icons: mergeProps(
|
icon: mergeProps(
|
||||||
{
|
{
|
||||||
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||||
},
|
},
|
||||||
|
|
|
@ -238,6 +238,18 @@ export interface PanelMenuSlots {
|
||||||
* Menuitem instance
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
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[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom submenu icon template.
|
* Custom submenu icon template.
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
|
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
||||||
<transition name="p-toggleable-content" v-bind="ptm('transition')">
|
<transition name="p-toggleable-content" v-bind="ptm('transition')">
|
||||||
<div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
|
<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 () => {
|
it('should get width and height', async () => {
|
||||||
await wrapper.setProps({ width: '5rem', height: '2rem', borderRadius: '10px' });
|
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 () => {
|
it('should get size', async () => {
|
||||||
await wrapper.setProps({ size: '4rem' });
|
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 () => {
|
it('should get shape', async () => {
|
||||||
|
|
|
@ -20,7 +20,7 @@ describe('Slider.vue', () => {
|
||||||
it('should drag start and end', async () => {
|
it('should drag start and end', async () => {
|
||||||
await wrapper.vm.onDragStart({ preventDefault: () => {}, currentTarget: { focus: () => {} } });
|
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();
|
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;');
|
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' });
|
await wrapper.setProps({ showIcon: 'pi pi-bars', hideIcon: 'pi pi-times' });
|
||||||
|
|
||||||
const button = wrapper.find('.p-speeddial-button');
|
const button = wrapper.find('.p-speeddial-button');
|
||||||
|
|
||||||
expect(button.find('span').classes()).toContain('pi-bars');
|
expect(button.find('span').classes()).toContain('pi-bars');
|
||||||
|
|
||||||
await wrapper.vm.onClick({});
|
expect(button.find('span').classes()).not.toContain('pi-times');
|
||||||
|
|
||||||
expect(button.find('span').classes()).toContain('pi-times');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should have mask', async () => {
|
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);
|
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
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
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[];
|
}): VNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
|
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</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>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ol>
|
</ol>
|
||||||
|
@ -32,11 +32,17 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DomHandler } from 'primevue/utils';
|
import { DomHandler } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
import BaseSteps from './BaseSteps.vue';
|
import BaseSteps from './BaseSteps.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Steps',
|
name: 'Steps',
|
||||||
extends: BaseSteps,
|
extends: BaseSteps,
|
||||||
|
beforeMount() {
|
||||||
|
if (!this.$slots.item) {
|
||||||
|
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const firstItem = this.findFirstItem();
|
const firstItem = this.findFirstItem();
|
||||||
|
|
||||||
|
@ -159,7 +165,7 @@ export default {
|
||||||
focusableItem.focus();
|
focusableItem.focus();
|
||||||
},
|
},
|
||||||
isActive(item) {
|
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) {
|
isItemDisabled(item) {
|
||||||
return this.disabled(item) || (this.readonly && !this.isActive(item));
|
return this.disabled(item) || (this.readonly && !this.isActive(item));
|
||||||
|
@ -172,6 +178,30 @@ export default {
|
||||||
},
|
},
|
||||||
label(item) {
|
label(item) {
|
||||||
return typeof item.label === 'function' ? item.label() : item.label;
|
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
|
* Menuitem instance
|
||||||
*/
|
*/
|
||||||
item: MenuItem;
|
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[];
|
}): VNode[];
|
||||||
/**
|
/**
|
||||||
* Custom submenu icon template.
|
* Custom submenu icon template.
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</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>
|
</div>
|
||||||
<TieredMenuSub
|
<TieredMenuSub
|
||||||
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
||||||
|
@ -75,6 +75,7 @@ import BaseComponent from 'primevue/basecomponent';
|
||||||
import AngleRightIcon from 'primevue/icons/angleright';
|
import AngleRightIcon from 'primevue/icons/angleright';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TieredMenuSub',
|
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",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -14771,7 +14771,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -19670,7 +19670,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -27505,7 +27505,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -27992,7 +27992,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -28477,7 +28477,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -33000,7 +33000,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -39208,7 +39208,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"description": "item slot's params."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -41449,7 +41449,7 @@
|
||||||
{
|
{
|
||||||
"name": "scope",
|
"name": "scope",
|
||||||
"optional": false,
|
"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."
|
"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" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -135,6 +148,11 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-fw pi-upload',
|
||||||
|
route: '/fileupload'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
|
@ -142,6 +160,19 @@ export default {
|
||||||
<template #start>
|
<template #start>
|
||||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</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" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</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" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -413,6 +475,11 @@ const items = ref([
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-fw pi-upload',
|
||||||
|
route: '/fileupload'
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
<\/script>`
|
<\/script>`
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<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.
|
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</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>
|
<template #start>
|
||||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -137,6 +150,11 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-fw pi-upload',
|
||||||
|
route: '/fileupload'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Quit',
|
label: 'Quit',
|
||||||
icon: 'pi pi-fw pi-power-off'
|
icon: 'pi pi-fw pi-power-off'
|
||||||
|
@ -147,6 +165,19 @@ export default {
|
||||||
<template #start>
|
<template #start>
|
||||||
<img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
|
<img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -157,6 +188,19 @@ export default {
|
||||||
<template #start>
|
<template #start>
|
||||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -286,6 +330,11 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-fw pi-upload',
|
||||||
|
route: '/fileupload'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Quit',
|
label: 'Quit',
|
||||||
icon: 'pi pi-fw pi-power-off'
|
icon: 'pi pi-fw pi-power-off'
|
||||||
|
@ -301,6 +350,19 @@ export default {
|
||||||
<template #start>
|
<template #start>
|
||||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
|
||||||
</template>
|
</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>
|
<template #end>
|
||||||
<InputText placeholder="Search" type="text" />
|
<InputText placeholder="Search" type="text" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -429,6 +491,11 @@ const items = ref([
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload',
|
||||||
|
icon: 'pi pi-fw pi-upload',
|
||||||
|
route: '/fileupload'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Quit',
|
label: 'Quit',
|
||||||
icon: 'pi pi-fw pi-power-off'
|
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>
|
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -15,27 +28,53 @@ export default {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: '/steps'
|
route: '/steps'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: '/steps/seat'
|
route: '/steps/seat'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: '/steps/payment'
|
route: '/steps/payment'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: '/steps/confirmation'
|
route: '/steps/confirmation'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
code: {
|
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>
|
options: `<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="card">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -47,19 +86,19 @@ export default {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: '/'
|
route: '/steps'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: '/seat'
|
route: '/steps/seat'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: '/payment'
|
route: '/steps/payment'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: '/confirmation'
|
route: '/steps/confirmation'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -69,7 +108,20 @@ export default {
|
||||||
composition: `<template>
|
composition: `<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="card">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -80,19 +132,19 @@ import { ref } from "vue";
|
||||||
const items = ref([
|
const items = ref([
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: "/"
|
route: "/"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: "/seat",
|
route: "/seat",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: "/payment",
|
route: "/payment",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: "/confirmation",
|
route: "/confirmation",
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
<\/script>`
|
<\/script>`
|
||||||
|
|
|
@ -3,7 +3,16 @@
|
||||||
<p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
|
<p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
|
|
||||||
<NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
<NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||||
|
@ -22,25 +31,34 @@ export default {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: '/steps'
|
route: '/steps'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: '/steps/seat'
|
route: '/steps/seat'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: '/steps/payment'
|
route: '/steps/payment'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: '/steps/confirmation'
|
route: '/steps/confirmation'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
formObject: {},
|
formObject: {},
|
||||||
code: {
|
code: {
|
||||||
basic: `<div class="card">
|
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>
|
</div>
|
||||||
|
|
||||||
<router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
<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>`,
|
</router-view>`,
|
||||||
options: `<template>
|
options: `<template>
|
||||||
<div>
|
<div>
|
||||||
<Toast />
|
|
||||||
|
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
|
<Toast />
|
||||||
|
|
||||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
|
@ -71,19 +97,19 @@ export default {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: '/'
|
route: '/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: '/seat'
|
route: '/seat'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: '/payment'
|
route: '/payment'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: '/confirmation'
|
route: '/confirmation'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
formObject: {}
|
formObject: {}
|
||||||
|
@ -118,11 +144,19 @@ export default {
|
||||||
</style>`,
|
</style>`,
|
||||||
composition: `<template>
|
composition: `<template>
|
||||||
<div>
|
<div>
|
||||||
<Toast />
|
|
||||||
|
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
|
<Toast />
|
||||||
|
|
||||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
|
@ -142,19 +176,19 @@ const toast = useToast();
|
||||||
const items = ref([
|
const items = ref([
|
||||||
{
|
{
|
||||||
label: 'Personal',
|
label: 'Personal',
|
||||||
to: "/"
|
route: "/"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Seat',
|
label: 'Seat',
|
||||||
to: "/seat",
|
route: "/seat",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
to: "/payment",
|
route: "/payment",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirmation',
|
label: 'Confirmation',
|
||||||
to: "/confirmation",
|
route: "/confirmation",
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
const formObject = ref({});
|
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 AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/breadcrumb/BasicDoc';
|
import BasicDoc from '@/doc/breadcrumb/BasicDoc';
|
||||||
import ImportDoc from '@/doc/breadcrumb/ImportDoc';
|
import ImportDoc from '@/doc/breadcrumb/ImportDoc';
|
||||||
|
import RouterDoc from '@/doc/breadcrumb/RouterDoc';
|
||||||
import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
|
import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
|
||||||
import PTComponent from '@/doc/breadcrumb/pt/index.vue';
|
import PTComponent from '@/doc/breadcrumb/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
|
import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
|
||||||
|
@ -37,6 +38,11 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/contextmenu/BasicDoc';
|
import BasicDoc from '@/doc/contextmenu/BasicDoc';
|
||||||
import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
|
import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
|
||||||
import ImportDoc from '@/doc/contextmenu/ImportDoc';
|
import ImportDoc from '@/doc/contextmenu/ImportDoc';
|
||||||
|
import RouterDoc from '@/doc/contextmenu/RouterDoc';
|
||||||
import PTComponent from '@/doc/contextmenu/pt/index.vue';
|
import PTComponent from '@/doc/contextmenu/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
|
import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
|
||||||
|
|
||||||
|
@ -37,6 +38,11 @@ export default {
|
||||||
label: 'Document',
|
label: 'Document',
|
||||||
component: DocumentDoc
|
component: DocumentDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc';
|
||||||
import AdvancedDoc from '@/doc/dock/AdvancedDoc';
|
import AdvancedDoc from '@/doc/dock/AdvancedDoc';
|
||||||
import BasicDoc from '@/doc/dock/BasicDoc';
|
import BasicDoc from '@/doc/dock/BasicDoc';
|
||||||
import ImportDoc from '@/doc/dock/ImportDoc';
|
import ImportDoc from '@/doc/dock/ImportDoc';
|
||||||
|
import RouterDoc from '@/doc/dock/RouterDoc';
|
||||||
import PTComponent from '@/doc/dock/pt/index.vue';
|
import PTComponent from '@/doc/dock/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/dock/theming/index.vue';
|
import ThemingDoc from '@/doc/dock/theming/index.vue';
|
||||||
|
|
||||||
|
@ -29,6 +30,11 @@ export default {
|
||||||
label: 'Advanced',
|
label: 'Advanced',
|
||||||
component: AdvancedDoc
|
component: AdvancedDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/megamenu/BasicDoc';
|
import BasicDoc from '@/doc/megamenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/megamenu/ImportDoc';
|
import ImportDoc from '@/doc/megamenu/ImportDoc';
|
||||||
|
import RouterDoc from '@/doc/megamenu/RouterDoc';
|
||||||
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
|
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
|
||||||
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
|
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
|
||||||
import PTComponent from '@/doc/megamenu/pt/index.vue';
|
import PTComponent from '@/doc/megamenu/pt/index.vue';
|
||||||
|
@ -43,6 +44,11 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/menubar/BasicDoc';
|
import BasicDoc from '@/doc/menubar/BasicDoc';
|
||||||
import ImportDoc from '@/doc/menubar/ImportDoc';
|
import ImportDoc from '@/doc/menubar/ImportDoc';
|
||||||
|
import RouterDoc from '@/doc/menubar/RouterDoc';
|
||||||
import TemplateDoc from '@/doc/menubar/TemplateDoc';
|
import TemplateDoc from '@/doc/menubar/TemplateDoc';
|
||||||
import PTComponent from '@/doc/menubar/pt/index.vue';
|
import PTComponent from '@/doc/menubar/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/menubar/theming/index.vue';
|
import ThemingDoc from '@/doc/menubar/theming/index.vue';
|
||||||
|
@ -37,6 +38,11 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -16,6 +16,7 @@ import BasicDoc from '@/doc/panelmenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/panelmenu/ImportDoc';
|
import ImportDoc from '@/doc/panelmenu/ImportDoc';
|
||||||
import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
|
import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
|
||||||
import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
|
import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
|
||||||
|
import RouterDoc from '@/doc/panelmenu/RouterDoc';
|
||||||
import PTComponent from '@/doc/panelmenu/pt/index.vue';
|
import PTComponent from '@/doc/panelmenu/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
|
import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
|
||||||
|
|
||||||
|
@ -43,6 +44,11 @@ export default {
|
||||||
label: 'Multiple',
|
label: 'Multiple',
|
||||||
component: MultipleDoc
|
component: MultipleDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/steps/BasicDoc';
|
import BasicDoc from '@/doc/steps/BasicDoc';
|
||||||
import ImportDoc from '@/doc/steps/ImportDoc';
|
import ImportDoc from '@/doc/steps/ImportDoc';
|
||||||
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
|
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
|
||||||
|
import RouterDoc from '@/doc/steps/RouterDoc';
|
||||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
import PTComponent from '@/doc/steps/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
||||||
|
|
||||||
|
@ -37,6 +38,11 @@ export default {
|
||||||
label: 'Interactive',
|
label: 'Interactive',
|
||||||
component: InteractiveDoc
|
component: InteractiveDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/tieredmenu/BasicDoc';
|
import BasicDoc from '@/doc/tieredmenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/tieredmenu/ImportDoc';
|
import ImportDoc from '@/doc/tieredmenu/ImportDoc';
|
||||||
import PopupDoc from '@/doc/tieredmenu/PopupDoc';
|
import PopupDoc from '@/doc/tieredmenu/PopupDoc';
|
||||||
|
import RouterDoc from '@/doc/tieredmenu/RouterDoc';
|
||||||
import PTComponent from '@/doc/tieredmenu/pt/index.vue';
|
import PTComponent from '@/doc/tieredmenu/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
|
import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
|
||||||
|
|
||||||
|
@ -37,6 +38,11 @@ export default {
|
||||||
label: 'Popup',
|
label: 'Popup',
|
||||||
component: PopupDoc
|
component: PopupDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'router',
|
||||||
|
label: 'Router',
|
||||||
|
component: RouterDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
Loading…
Reference in New Issue