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

csb updated for menu components

pull/1143/head
Tuğçe Küçükoğlu 2021-03-23 10:47:00 +03:00
parent ef8133e5e9
commit a4f3c9a4a0
9 changed files with 1975 additions and 1944 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/breadcrumb/BreadcrumbDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="BreadcrumbDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb'; import Breadcrumb from 'primevue/breadcrumb';
@ -98,57 +96,21 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="BreadcrumbDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;Breadcrumb :home="home" :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
home: {icon: 'pi pi-home', to: '/'},
items: [
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<Breadcrumb :home="home" :model="items" /> <Breadcrumb :home="home" :model="items" />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -168,13 +130,44 @@ export default {
] ]
} }
} }
}` }
} <\\/script>
} `
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const home = ref({
icon: 'pi pi-home',
to: '/fileupload',
});
const items = ref([
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]);
return { home, items }
}
}
<\\/script>
`
}
}
}
} }
} }
</script> </script>

344
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="ContextMenuDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ContextMenu from 'primevue/contextmenu'; import ContextMenu from 'primevue/contextmenu';
@ -305,187 +303,22 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ContextMenuDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true"> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" /> <ContextMenu ref="menu" :model="items" />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -630,13 +463,166 @@ export default {
this.$refs.menu.show(event); this.$refs.menu.show(event);
} }
} }
}` }
} <\\/script>
} `
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menu = ref();
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
const onImageRightClick = (event) => {
menu.value.show(event);
};
return { menu, items, onImageRightClick }
}
}
<\\/script>
`
}
}
}
} }
} }
</script> </script>

314
src/views/megamenu/MegaMenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="MegaMenuDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import MegaMenu from 'primevue/megamenu'; import MegaMenu from 'primevue/megamenu';
@ -244,168 +242,18 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MegaMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;MegaMenu :model="items" /&gt;
&lt;h3&gt;Vertical&lt;/h3&gt;
&lt;MegaMenu :model="items" orientation="vertical"/&gt;
</template>
</code></pre>
<pre v-code.script><code>
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: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section introduction"> <template>
<div class="feature-intro">
<h1>MegaMenu</h1>
<p>MegaMenu is navigation component that displays submenus together.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Horizontal</h5> <h5>Horizontal</h5>
<MegaMenu :model="items" /> <MegaMenu :model="items" />
@ -413,8 +261,6 @@ export default {
<h5>Vertical</h5> <h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/> <MegaMenu :model="items" orientation="vertical"/>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -535,13 +381,149 @@ export default {
] ]
} }
} }
}` }
} <\\/script>
} `
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
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: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]);
return { items }
}
}
<\\/script>
`
}
}
}
} }
} }
</script> </script>

171
src/views/menu/MenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="MenuDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Menu from 'primevue/menu'; import Menu from 'primevue/menu';
@ -203,91 +201,21 @@ toggle(event) {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MenuDemo" :sources="sources" :toastService="true" :router="true" :components="['Button']"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;Menu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /&gt;
&lt;Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label: 'Options',
items: [{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
}
]},
{
label: 'Navigate',
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
},
save() {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<Toast /> <template>
<div class="content-section implementation">
<div class="card"> <div class="card">
<Toast />
<h5>Inline</h5> <h5>Inline</h5>
<Menu :model="items" /> <Menu :model="items" />
@ -295,8 +223,6 @@ export default {
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/> <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /> <Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -347,13 +273,84 @@ export default {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
} }
} }
}` }
} <\\/script>
} `
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Toast />
<h5>Inline</h5>
<Menu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
</template>
<script>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
export default {
setup() {
const toast = useToast();
const menu = ref();
const items = ref([
{
label: 'Options',
items: [{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
} }
}, },
components: { {
LiveEditor label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
}
]},
{
label: 'Navigate',
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
]}
]);
const toggle = (event) => {
menu.value.toggle(event);
};
const save = () => {
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
};
return { items, menu, toggle, save }
}
}
<\\/script>
`
}
}
}
} }
} }
</script> </script>

340
src/views/menubar/MenubarDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="MenubarDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Menubar from 'primevue/menubar'; import Menubar from 'primevue/menubar';
@ -260,180 +258,18 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MenubarDemo" :sources="sources" :router="true" :components="['InputText']"/>
</div>
<pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt;
&lt;template #start&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"&gt;
&lt;/template&gt;
&lt;template #end&gt;
&lt;InputText placeholder="Search" type="text" /&gt;
&lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '0 .5em'}"/&gt;
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></pre>
<pre v-code.script><code>
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:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
@ -444,8 +280,6 @@ export default {
</template> </template>
</Menubar> </Menubar>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -582,13 +416,163 @@ export default {
] ]
} }
} }
}` }
} <\\/script>
} `
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
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:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
return { items }
}
}
<\\/script>
`
}
}
}
} }
} }
</script> </script>

318
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="PanelMenuDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import PanelMenu from 'primevue/panelmenu'; import PanelMenu from 'primevue/panelmenu';
@ -217,166 +215,21 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="PanelMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;PanelMenu :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
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'
},
{
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'
}
]
}
]
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<PanelMenu :model="items" /> <PanelMenu :model="items" />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -502,18 +355,161 @@ export default {
] ]
} }
} }
}`, }
style: `<style scoped lang="scss"> <\\/script>
<style scoped lang="scss">
.p-panelmenu { .p-panelmenu {
width: 22rem; width: 22rem;
} }
</style>` </style>
} `
}
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<PanelMenu :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
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'
},
{
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'
}
]
}
]
}
]);
return { items }
}
}
<\\/script>
<style scoped lang="scss">
.p-panelmenu {
width: 22rem;
}
</style>
`
}
}
}
} }
} }
</script> </script>

89
src/views/steps/StepsDoc.vue
View File

@ -133,11 +133,13 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<Toast />
<div class="card"> <div class="card">
<Steps :model="items" :readonly="true" /> <Steps :model="items" :readonly="true" />
</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" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive> <keep-alive>
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
@ -151,19 +153,19 @@ export default {
return { return {
items: [{ items: [{
label: 'Personal', label: 'Personal',
to: '/steps' to: '/'
}, },
{ {
label: 'Seat', label: 'Seat',
to: '/steps/seat' to: '/seat'
}, },
{ {
label: 'Payment', label: 'Payment',
to: '/steps/payment' to: '/payment'
}, },
{ {
label: 'Confirmation', label: 'Confirmation',
to: '/steps/confirmation' to: '/confirmation'
}], }],
formObject: {} formObject: {}
} }
@ -196,7 +198,84 @@ export default {
} }
</style> </style>
` `
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div>
<Toast />
<div class="card">
<Steps :model="items" :readonly="true" />
</div>
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
export default {
setup() {
const router = useRouter();
const toast = useToast();
const items = ref([
{
label: 'Personal',
to: "/"
},
{
label: 'Seat',
to: "/seat",
},
{
label: 'Payment',
to: "/payment",
},
{
label: 'Confirmation',
to: "/confirmation",
} }
]);
const formObject = ref({});
const nextPage = (event) => {
for (let field in event.formData) {
formObject.value[field] = event.formData[field];
}
router.push(items.value[event.pageIndex + 1].to);
};
const prevPage = (event) => {
router.push(items.value[event.pageIndex - 1].to);
};
const complete = () => {
toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
};
return { items, formObject, nextPage, prevPage, complete }
}
}
<\\/script>
<style scoped lang="scss">
::v-deep(b) {
display: block;
}
::v-deep(.p-card-body) {
padding: 2rem;
}
</style>
`
},
}, },
pages: [ pages: [
{ {

161
src/views/tabmenu/TabMenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import TabMenu from 'primevue/tabmenu'; import TabMenu from 'primevue/tabmenu';
@ -100,58 +98,22 @@ export default {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TabMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;TabMenu :model="items" /&gt;
&lt;router-view /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
{label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
{label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
{label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
{label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<TabMenu :model="items" /> <TabMenu :model="items" />
<router-view /> <router-view />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -187,17 +149,75 @@ export default {
] ]
} }
} }
}`, }
style: `<style scoped lang="scss"> <\\/script>
<style scoped lang="scss">
::v-deep(.tabmenudemo-content) { ::v-deep(.tabmenudemo-content) {
padding: 2rem 1rem; padding: 2rem 1rem;
} }
</style>` </style>`
}, },
'pages': [ 'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<TabMenu :model="items" />
<router-view />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([
{ {
'name': 'HomeDemo', label: 'Home',
'template': `<template> icon: 'pi pi-fw pi-home',
to: '/'
},
{
label: 'Calendar',
icon: 'pi pi-fw pi-calendar',
to: '/calendar'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
to: '/edit'
},
{
label: 'Documentation',
icon: 'pi pi-fw pi-file',
to: '/documentation'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
to: '/settings'
}
]);
return { items }
}
}
<\\/script>
<style scoped lang="scss">
::v-deep(.tabmenudemo-content) {
padding: 2rem 1rem;
}
</style>`
}
},
pages: [
{
tabName: 'HomeDemo',
content: `
<template>
<div class="tabmenudemo-content"> <div class="tabmenudemo-content">
<h5>Home Component Content</h5> <h5>Home Component Content</h5>
</div> </div>
@ -206,11 +226,14 @@ export default {
<script> <script>
export default { export default {
}` }
<\\/script>
`
}, },
{ {
'name': 'CalendarDemo', tabName: 'CalendarDemo',
'template': `<template> content: `
<template>
<div class="tabmenudemo-content"> <div class="tabmenudemo-content">
<h5>Calendar Component Content</h5> <h5>Calendar Component Content</h5>
</div> </div>
@ -219,11 +242,14 @@ export default {
<script> <script>
export default { export default {
}` }
<\\/script>
`
}, },
{ {
'name': 'EditDemo', tabName: 'EditDemo',
'template': `<template> content: `
<template>
<div class="tabmenudemo-content"> <div class="tabmenudemo-content">
<h5>Edit Component Content</h5> <h5>Edit Component Content</h5>
</div> </div>
@ -232,11 +258,14 @@ export default {
<script> <script>
export default { export default {
}` }
<\\/script>
`
}, },
{ {
'name': 'DocumentationDemo', tabName: 'DocumentationDemo',
'template': `<template> content: `
<template>
<div class="tabmenudemo-content"> <div class="tabmenudemo-content">
<h5>Documentation Component Content</h5> <h5>Documentation Component Content</h5>
</div> </div>
@ -245,11 +274,14 @@ export default {
<script> <script>
export default { export default {
}` }
<\\/script>
`
}, },
{ {
'name': 'SettingsDemo', tabName: 'SettingsDemo',
'template': `<template> content: `
<template>
<div class="tabmenudemo-content"> <div class="tabmenudemo-content">
<h5>Settings Component Content</h5> <h5>Settings Component Content</h5>
</div> </div>
@ -258,14 +290,11 @@ export default {
<script> <script>
export default { export default {
}` }
<\\/script>`
} }
] ]
} }
} }
},
components: {
LiveEditor
}
} }
</script> </script>

351
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="TieredMenuDemo" :sources="sources">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import TieredMenu from 'primevue/tieredmenu'; import TieredMenu from 'primevue/tieredmenu';
@ -294,185 +292,18 @@ toggle(event) {
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TieredMenuDemo" :sources="sources" :router="true" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;TieredMenu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" /&gt;
&lt;TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<TieredMenu :model="items" /> <TieredMenu :model="items" />
@ -481,8 +312,6 @@ export default {
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/> <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" /> <TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -627,13 +456,169 @@ export default {
this.$refs.menu.toggle(event); this.$refs.menu.toggle(event);
} }
} }
}` }
} <\\/script>
} `
}
}, },
components: { 'composition-api': {
LiveEditor tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Inline</h5>
<TieredMenu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menu = ref();
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
const toggle = (event) => {
menu.value.toggle(event);
}
return { items, menu, toggle }
}
}
<\\/script>`
}
}
}
} }
} }
</script> </script>