From c1a7717d5ad8ef995c886b8a10bbfad4dd67b529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:59:08 +0300
Subject: [PATCH] browser source added

---
 src/views/tieredmenu/TieredMenuDoc.vue | 171 +++++++++++++++++++++++++
 1 file changed, 171 insertions(+)

diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 06ba69ab0..06bf36dae 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -662,7 +662,178 @@ export default {
     }
 }
 <\\/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/tieredmenu/tieredmenu.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Inline</h5>
+            <p-tieredmenu :model="items"></p-tieredmenu>
 
+            <h5>Overlay</h5>
+            <p-button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"></p-button>
+            <p-tieredmenu id="overlay_tmenu" ref="menu" :model="items" :popup="true"></p-tieredmenu>
+        </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 toggle = (event) => {
+                    menu.value.toggle(event);
+                }
+
+                return { items, menu, toggle }
+            },
+            components: {
+                "p-tieredmenu": primevue.tieredmenu,
+                "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>`
                 }
             }
         }