browser source added for menus
Tuğçe Küçükoğlu
parent
27536912a3
commit
54ee34c918
|
|
@ -211,6 +211,54 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-breadcrumb :home="home" :model="items"></p-breadcrumb>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
const { createRouter, createWebHistory } = VueRouter;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const home = ref({
|
||||||
|
icon: 'pi pi-home',
|
||||||
|
to: '/',
|
||||||
|
});
|
||||||
|
const items = ref([
|
||||||
|
{label: 'Computer'},
|
||||||
|
{label: 'Notebook'},
|
||||||
|
{label: 'Accessories'},
|
||||||
|
{label: 'Backpacks'},
|
||||||
|
{label: 'Item'}
|
||||||
|
]);
|
||||||
|
|
||||||
|
return { home, items }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-breadcrumb": primevue.breadcrumb
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -666,6 +666,175 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
|
||||||
|
<p-contextmenu ref="menu" :model="items"></p-contextmenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
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 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-contextmenu": primevue.contextmenu
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -571,6 +571,158 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/megamenu/megamenu.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Horizontal</h5>
|
||||||
|
<p-megamenu :model="items"></p-megamenu>
|
||||||
|
|
||||||
|
<h5>Vertical</h5>
|
||||||
|
<p-megamenu :model="items" orientation="vertical"></p-megamenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
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 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-megamenu": primevue.megamenu
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -394,6 +394,97 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-toast></p-toast>
|
||||||
|
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<p-menu :model="items"></p-menu>
|
||||||
|
|
||||||
|
<h5>Overlay</h5>
|
||||||
|
<p-button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"></p-button>
|
||||||
|
<p-menu id="overlay_menu" ref="menu" :model="items" :popup="true"></p-menu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
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});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-menu": primevue.menu,
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-toast": primevue.toast
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -593,6 +593,173 @@ export default {
|
||||||
return { items }
|
return { items }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-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>
|
||||||
|
<p-inputtext placeholder="Search" type="text"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-menubar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
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 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-menubar": primevue.menubar,
|
||||||
|
"p-inputtext": primevue.inputtext
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
<\\/script>
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -838,6 +838,207 @@ export default {
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.p-panelmenu {
|
||||||
|
width: 22rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/panelmenu/panelmenu.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Default</h5>
|
||||||
|
<p-panelmenu :model="items"></p-panelmenu>
|
||||||
|
|
||||||
|
<h5>Programmatic</h5>
|
||||||
|
<div class="p-mb-3">
|
||||||
|
<p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button>
|
||||||
|
<p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
|
||||||
|
</div>
|
||||||
|
<p-panelmenu :model="items" :expanded-keys="expandedKeys"></p-panelmenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const expandedKeys = ref({});
|
||||||
|
const items = ref([{
|
||||||
|
key: '0',
|
||||||
|
label: 'File',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
items: [{
|
||||||
|
key: '0_0',
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus',
|
||||||
|
items: [{
|
||||||
|
key: '0_0_0',
|
||||||
|
label: 'Bookmark',
|
||||||
|
icon: 'pi pi-fw pi-bookmark'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_0_1',
|
||||||
|
label: 'Video',
|
||||||
|
icon: 'pi pi-fw pi-video'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_1',
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_2',
|
||||||
|
label: 'Export',
|
||||||
|
icon: 'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [{
|
||||||
|
key: '1_0',
|
||||||
|
label: 'Left',
|
||||||
|
icon: 'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1_1',
|
||||||
|
label: 'Right',
|
||||||
|
icon: 'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1_2',
|
||||||
|
label: 'Center',
|
||||||
|
icon: 'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1_3',
|
||||||
|
label: 'Justify',
|
||||||
|
icon: 'pi pi-fw pi-align-justify'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
label: 'Users',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [{
|
||||||
|
key: '2_0',
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2_1',
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-user-minus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2_2',
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-users',
|
||||||
|
items: [{
|
||||||
|
key: '2_2_0',
|
||||||
|
label: 'Filter',
|
||||||
|
icon: 'pi pi-fw pi-filter',
|
||||||
|
items: [{
|
||||||
|
key: '2_2_0_0',
|
||||||
|
label: 'Print',
|
||||||
|
icon: 'pi pi-fw pi-print'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2_2_1',
|
||||||
|
icon: 'pi pi-fw pi-bars',
|
||||||
|
label: 'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
label: 'Events',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
items: [{
|
||||||
|
key: '3_0',
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [{
|
||||||
|
key: '3_0_0',
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3_0_0',
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3_1',
|
||||||
|
label: 'Archieve',
|
||||||
|
icon: 'pi pi-fw pi-calendar-times',
|
||||||
|
items: [{
|
||||||
|
key: '3_1_0',
|
||||||
|
label: 'Remove',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const expandAll = () => {
|
||||||
|
for (let node of nodes.value) {
|
||||||
|
expandNode(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
expandedKeys.value = {...expandedKeys.value};
|
||||||
|
};
|
||||||
|
const collapseAll = () => {
|
||||||
|
expandedKeys.value = {};
|
||||||
|
};
|
||||||
|
const expandNode = (node) => {
|
||||||
|
if (node.children && node.children.length) {
|
||||||
|
expandedKeys.value[node.key] = true;
|
||||||
|
|
||||||
|
for (let child of node.children) {
|
||||||
|
expandNode(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { items, expandedKeys, expandAll, collapseAll, expandNode }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-panelmenu": primevue.panelmenu,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [{ path: "/", component: App }];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.p-panelmenu {
|
.p-panelmenu {
|
||||||
width: 22rem;
|
width: 22rem;
|
||||||
|
|
|
||||||
|
|
@ -323,6 +323,399 @@ export default {
|
||||||
</style>
|
</style>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/steps/steps.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/card/card.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/inputnumber/inputnumber.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-toast></p-toast>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<p-steps :model="items" :readonly="true"></p-steps>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<router-view v-slot="{Component}" :form-data="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||||
|
<keep-alive>
|
||||||
|
<component :is="Component"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</router-view>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
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 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-steps": primevue.steps,
|
||||||
|
"p-toast": primevue.toast,
|
||||||
|
"p-card": primevue.card
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Personal = {
|
||||||
|
template: \`<div class="stepsdemo-content">
|
||||||
|
<p-card>
|
||||||
|
<template v-slot:title>
|
||||||
|
Personal Information
|
||||||
|
</template>
|
||||||
|
<template v-slot:subtitle>
|
||||||
|
Enter your personal information
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="p-fluid">
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="firstname">Firstname</label>
|
||||||
|
<p-inputtext id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}"></p-inputtext>
|
||||||
|
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||||
|
</div>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="lastname">Lastname</label>
|
||||||
|
<p-inputtext id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}"></p-inputtext>
|
||||||
|
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
||||||
|
</div>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="age">Age</label>
|
||||||
|
<p-inputnumber id="age" v-model="age"></p-inputnumber>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer>
|
||||||
|
<div class="p-grid p-nogutter p-justify-between">
|
||||||
|
<i></i>
|
||||||
|
<p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</p-card>
|
||||||
|
</div>\`,
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
age: null,
|
||||||
|
submitted: false,
|
||||||
|
validationErrors: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
nextPage() {
|
||||||
|
this.submitted = true;
|
||||||
|
if (this.validateForm() ) {
|
||||||
|
this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validateForm() {
|
||||||
|
if (!this.firstname.trim())
|
||||||
|
this.validationErrors['firstname'] = true;
|
||||||
|
else
|
||||||
|
delete this.validationErrors['firstname'];
|
||||||
|
|
||||||
|
if (!this.lastname.trim())
|
||||||
|
this.validationErrors['lastname'] = true;
|
||||||
|
else
|
||||||
|
delete this.validationErrors['lastname'];
|
||||||
|
|
||||||
|
return !Object.keys(this.validationErrors).length;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-card": primevue.card,
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-inputnumber": primevue.inputnumber,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Seat = {
|
||||||
|
template: \`<div class="stepsdemo-content">
|
||||||
|
<p-card>
|
||||||
|
<template v-slot:title>
|
||||||
|
Seat Information
|
||||||
|
</template>
|
||||||
|
<template v-slot:subtitle>
|
||||||
|
Choose your seat
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="p-fluid p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col-12 p-md-6">
|
||||||
|
<label for="class">Class</label>
|
||||||
|
<p-dropdown input-id="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" option-label="name" placeholder="Select a Class"></p-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-6">
|
||||||
|
<label for="lastname">Wagon</label>
|
||||||
|
<p-dropdown input-id="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" option-label="wagon" placeholder="Select a Wagon"></p-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="seat">Seat</label>
|
||||||
|
<p-dropdown input-id="seat" v-model="selectedSeat" :options="seats" option-label="seat" placeholder="Select a Seat"></p-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer>
|
||||||
|
<div class="p-grid p-nogutter p-justify-between">
|
||||||
|
<p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
|
||||||
|
<p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</p-card>
|
||||||
|
</div>\`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedClass: '',
|
||||||
|
classes: [
|
||||||
|
{name: 'First Class', code: 'A', factor: 1},
|
||||||
|
{name: 'Second Class', code: 'B', factor: 2},
|
||||||
|
{name: 'Third Class', code: 'C', factor: 3}
|
||||||
|
],
|
||||||
|
wagons: [],
|
||||||
|
selectedWagon: '',
|
||||||
|
seats: [],
|
||||||
|
selectedSeat: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setWagons(event) {
|
||||||
|
if (this.selectedClass && event.value) {
|
||||||
|
this.wagons = [];
|
||||||
|
this.seats = [];
|
||||||
|
for (let i = 1; i < 3 * event.value.factor; i++) {
|
||||||
|
this.wagons.push({wagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSeats(event) {
|
||||||
|
if (this.selectedWagon && event.value) {
|
||||||
|
this.seats = [];
|
||||||
|
for (let i = 1; i < 10 * event.value.factor; i++) {
|
||||||
|
this.seats.push({seat: i, type: event.value.type});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nextPage() {
|
||||||
|
this.$emit('next-page', {formData: {class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat}, pageIndex: 1});
|
||||||
|
},
|
||||||
|
prevPage() {
|
||||||
|
this.$emit('prev-page', {pageIndex: 1});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-card": primevue.card,
|
||||||
|
"p-dropdown": primevue.dropdown,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Payment = {
|
||||||
|
template: \`<div class="stepsdemo-content">
|
||||||
|
<p-card>
|
||||||
|
<template v-slot:title>
|
||||||
|
Payment Information
|
||||||
|
</template>
|
||||||
|
<template v-slot:subtitle>
|
||||||
|
Enter your card details
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="p-fluid p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="class">Card Holder Name</label>
|
||||||
|
<p-inputtext type="text" v-model="cardholderName"></p-inputext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-8">
|
||||||
|
<label id="number" for="lastname">Number</label>
|
||||||
|
<p-inputmask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber"></p-inputmask>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-2">
|
||||||
|
<label id="date" for="date">Date</label>
|
||||||
|
<p-inputmask id="date" mask="99/99" v-model="date"></p-inputmask>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-2">
|
||||||
|
<label for="cvv">CVV</label>
|
||||||
|
<p-inputmask id="cvv" mask="999" v-model="cvv"></p-inputmask>
|
||||||
|
</div>
|
||||||
|
<div class="p-field-checkbox p-col-12">
|
||||||
|
<p-checkbox id="remember" v-model="remember" :binary="true"></p-checkbox>
|
||||||
|
<label for="remember" class="p-checkbox-label">Save credit card information for future</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer>
|
||||||
|
<div class="p-grid p-nogutter p-justify-between">
|
||||||
|
<p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
|
||||||
|
<p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</p-card>
|
||||||
|
</div>\`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cardholderName:'',
|
||||||
|
cardholderNumber:'',
|
||||||
|
date:'',
|
||||||
|
cvv:'',
|
||||||
|
remember:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
nextPage() {
|
||||||
|
this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
|
||||||
|
},
|
||||||
|
prevPage() {
|
||||||
|
this.$emit('prev-page', {pageIndex: 2});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-card": primevue.card,
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-inputmask": primevue.inputmask,
|
||||||
|
"p-checkbox": primevue.checkbox,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Confirmation = {
|
||||||
|
template: \`<div class="stepsdemo-content">
|
||||||
|
<p-card>
|
||||||
|
<template v-slot:title>
|
||||||
|
Confirmation
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="class">Name</label>
|
||||||
|
<b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Age</label>
|
||||||
|
<b>{{formData.age ? formData.age : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Seat Class</label>
|
||||||
|
<b>{{formData.class ? formData.class : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Wagon Number</label>
|
||||||
|
<b>{{formData.vagon ? formData.vagon : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Seat</label>
|
||||||
|
<b>{{formData.seat ? formData.seat : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Cardholder Name</label>
|
||||||
|
<b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Card Number</label>
|
||||||
|
<b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Date</label>
|
||||||
|
<b>{{formData.date ? formData.date : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">CVV</label>
|
||||||
|
<b>{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer>
|
||||||
|
<div class="p-grid p-nogutter p-justify-between">
|
||||||
|
<p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
|
||||||
|
<p-button label="Complete" @click="complete()" icon="pi pi-check" icon-pos="right" class="p-button-success"></p-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</p-card>
|
||||||
|
</div>\`,
|
||||||
|
props: {
|
||||||
|
formData: Object
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
prevPage() {
|
||||||
|
this.$emit('prev-page', {pageIndex: 3});
|
||||||
|
},
|
||||||
|
complete() {
|
||||||
|
this.$emit('complete');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-card": primevue.card,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: "/", component: Personal },
|
||||||
|
{ path: "/seat", component: Seat },
|
||||||
|
{ path: "/payment", component: Payment },
|
||||||
|
{ path: "/confirmation", component: Confirmation }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
b {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-card-body {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
}
|
||||||
},
|
},
|
||||||
pages: [
|
pages: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -384,6 +384,151 @@ export default {
|
||||||
::v-deep(.tabmenudemo-content) {
|
::v-deep(.tabmenudemo-content) {
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/tabmenu/tabmenu.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Default</h5>
|
||||||
|
<p-tabmenu :model="items"></p-tabmenu>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Programmatic</h5>
|
||||||
|
<div class="p-py-2">
|
||||||
|
<p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
|
||||||
|
<p-button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button>
|
||||||
|
<p-button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p-tabmenu :model="items2" v-model:active-index="active"></p-tabmenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const active = ref(3);
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const items2 = ref([
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'pi pi-fw pi-home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Calendar',
|
||||||
|
icon: 'pi pi-fw pi-calendar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Documentation',
|
||||||
|
icon: 'pi pi-fw pi-file'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
return { active, items, items2 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-tabmenu": primevue.tabmenu,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Home = {
|
||||||
|
template: \`<div class="tabmenudemo-content">
|
||||||
|
<h5>Home Component Content</h5>
|
||||||
|
</div>\`
|
||||||
|
};
|
||||||
|
|
||||||
|
const Calendar = {
|
||||||
|
template: \`<div class="tabmenudemo-content">
|
||||||
|
<h5>Calendar Component Content</h5>
|
||||||
|
</div>\`
|
||||||
|
};
|
||||||
|
|
||||||
|
const Edit = {
|
||||||
|
template: \`<div class="tabmenudemo-content">
|
||||||
|
<h5>Edit Component Content</h5>
|
||||||
|
</div>\`
|
||||||
|
};
|
||||||
|
|
||||||
|
const Documentation = {
|
||||||
|
template: \`<div class="tabmenudemo-content">
|
||||||
|
<h5>Documentation Component Content</h5>
|
||||||
|
</div>\`
|
||||||
|
};
|
||||||
|
|
||||||
|
const Settings = {
|
||||||
|
template: \`<div class="tabmenudemo-content">
|
||||||
|
<h5>Settings Component Content</h5>
|
||||||
|
</div>\`
|
||||||
|
};
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: "/", component: Home },
|
||||||
|
{ path: "/home", component: Home },
|
||||||
|
{ path: "/calendar", component: Calendar },
|
||||||
|
{ path: "/edit", component: Edit },
|
||||||
|
{ path: "/documentation", component: Documentation },
|
||||||
|
{ path: "/settings", component: Settings }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = VueRouter.createRouter({
|
||||||
|
history: VueRouter.createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tabmenudemo-content {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
</style>`
|
</style>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue