diff --git a/exports/tieredmenu.d.ts b/exports/tieredmenu.d.ts new file mode 100644 index 000000000..d846a2c65 --- /dev/null +++ b/exports/tieredmenu.d.ts @@ -0,0 +1 @@ +export * from './components/tieredmenu/TieredMenu'; \ No newline at end of file diff --git a/exports/tieredmenu.js b/exports/tieredmenu.js new file mode 100644 index 000000000..6da9a2b88 --- /dev/null +++ b/exports/tieredmenu.js @@ -0,0 +1,2 @@ +'use strict'; +module.exports = require('./components/tieredmenu/TieredMenu.vue'); \ No newline at end of file diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css deleted file mode 100644 index a2fc7aad1..000000000 --- a/src/components/menu/Menu.css +++ /dev/null @@ -1,42 +0,0 @@ -.p-menu { - width: 12.5em; - padding: .25em; -} - -.p-menu.p-menu-dynamic { - position: absolute; -} - -.p-menu .p-menu-separator { - border-width: 1px 0 0 0; -} - -.p-menu ul { - list-style: none; - margin: 0; - padding: 0; -} - -.p-menu .p-submenu-header { - padding: .25em .5em; - margin: .125em 0; -} - -.p-menu .p-menuitem { - margin: .125em 0; -} - -.p-menu .p-menuitem-link { - padding: .25em; - display: block; - text-decoration: none; -} - -.p-menu .p-menuitem-icon { - margin-right: .25em; - vertical-align: middle; -} - -.p-menu .p-menuitem-text { - vertical-align: middle; -} \ No newline at end of file diff --git a/src/components/tieredmenu/TieredMenu.d.ts b/src/components/tieredmenu/TieredMenu.d.ts new file mode 100644 index 000000000..02de65015 --- /dev/null +++ b/src/components/tieredmenu/TieredMenu.d.ts @@ -0,0 +1,12 @@ +import Vue from 'vue'; + +export declare class TieredMenu extends Vue { + popup?: boolean; + model?: any[]; + appendTo?: string; + autoZIndex?: boolean; + baseZIndex?: number; + toggle(event: Event): void; + show(event: Event, target?: any): void; + hide(): void; +} \ No newline at end of file diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue index 6d674a04a..71f37fe31 100644 --- a/src/views/tieredmenu/TieredMenuDoc.vue +++ b/src/views/tieredmenu/TieredMenuDoc.vue @@ -4,76 +4,164 @@

Import

-import Menu from 'primevue/menu'; +import TieredMenu from 'primevue/menu';

MenuModel

-

Menu uses the common MenuModel API to define the items, visit MenuModel API for details.

+

TieredMenu uses the common MenuModel API to define the items, visit MenuModel API for details.

Getting Started

-

Menu requires a collection of menuitems as its model.

+

TieredMenu requires a collection of menuitems as its model.

-<Menu :model="items" /> +<TieredMenu :model="items" /> export default { - data() { - return { - items: [ - { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000}); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000}); - } - }, - { - label: 'Vue Website', - icon: 'pi pi-external-link', - url: 'https://vuejs.org/' - }, - { - label: 'Router', - icon: 'pi pi-upload', - to: '/fileupload' + 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' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' } - ] - } - } + ] + } + } } - - -

SubMenus

-

Menu supports one level of nesting via subitems of an item.

- -const items: [ - { - label: 'Options', - items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} }, - {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}] - }, - { - label: 'Account', - items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'}, - {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ] - } -];

Popup Mode

-

Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.

+

TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.

<Button type="button" label="Toggle" @click="toggle" /> -<Menu ref="menu" :model="items" :popup="true" /> +<TieredMenu ref="menu" :model="items" :popup="true" /> @@ -172,7 +260,7 @@ toggle(event) { - p-menu + p-tieredmenu Container element. @@ -190,6 +278,10 @@ toggle(event) { p-menuitem-icon Icon of a menuitem. + + + p-submenu-icon + Arrow icon of a submenu. @@ -200,17 +292,17 @@ toggle(event) { - + View on GitHub @@ -220,44 +312,140 @@ export default { return { items: [ { - label: 'Options', - items: [{ - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000}); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000}); - } - } - ]}, + label:'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: 'Navigate', - items: [{ - label: 'Vue Website', - icon: 'pi pi-external-link', - url: 'https://vuejs.org/' - }, - { - label: 'Router', - icon: 'pi pi-upload', - to: '/fileupload' - } - ]} - ] + 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' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' + } + ] } }, methods: { toggle(event) { this.$refs.menu.toggle(event); - }, - save() { - this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); } } }