From 0e34488099614ff2a085ab75c915d3f8455c9d5f 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: Fri, 25 Jun 2021 17:18:14 +0300
Subject: [PATCH] Fixed #1313 - New SplitButton with TieredMenu

---
 rollup.config.js                           |   1 +
 src/components/splitbutton/SplitButton.vue |   4 +-
 src/views/splitbutton/SplitButtonDemo.vue  | 129 ++++++++++
 src/views/splitbutton/SplitButtonDoc.vue   | 265 ++++++++++++++++++++-
 4 files changed, 396 insertions(+), 3 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 43ddb68a2..d0f4b8e5a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -25,6 +25,7 @@ let globalDependencies = {
     'primevue/message': 'primevue.message',
     'primevue/dropdown': 'primevue.dropdown',
     'primevue/menu': 'primevue.menu',
+    'primevue/tieredmenu': 'primevue.tieredmenu',
     'primevue/tree': 'primevue.tree',
     '@fullcalendar/core': 'FullCalendar'
 }
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index 01df86490..a47a10f41 100755
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -10,7 +10,7 @@
 
 <script>
 import Button from 'primevue/button';
-import Menu from 'primevue/menu';
+import TieredMenu from 'primevue/tieredmenu';
 import {UniqueComponentId} from 'primevue/utils';
 
 export default {
@@ -62,7 +62,7 @@ export default {
     },
     components: {
         'PVSButton': Button,
-        'PVSMenu': Menu
+        'PVSMenu': TieredMenu
     }
 }
 </script>
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
index a4ff50d72..385861fa2 100755
--- a/src/views/splitbutton/SplitButtonDemo.vue
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -13,6 +13,9 @@
                 <h5>Basic</h5>
                 <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
 
+                <h5>Nested</h5>
+                <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
+
                 <h5>Severities</h5>
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@@ -60,6 +63,132 @@ export default {
                     icon: 'pi pi-upload',
                     to: '/fileupload'
                 }
+            ],
+            nestedItems: [
+                {
+                    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'
+                }
             ]
         }
     },
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 6b1ccacd4..ee8c5a259 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -210,6 +210,9 @@ export default {
         <h5>Basic</h5>
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
 
+        <h5>Nested</h5>
+        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
+
         <h5>Severities</h5>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@@ -253,6 +256,137 @@ export default {
 						window.location.hash = "/fileupload"
 					}
                 }
+            ],
+            nestedItems: [
+                {
+                   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'
+                }
             ]
         }
     },
@@ -279,6 +413,9 @@ export default {
         <h5>Basic</h5>
 		<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
 
+        <h5>Nested</h5>
+        <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
+
         <h5>Severities</h5>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
         <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
@@ -326,10 +463,136 @@ export default {
 				}
             }
         ]);
+        const nestedItems: [
+            {
+               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 save = () => {
             toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
         };
-        return {items, save, toast}
+        return {items, nestedItems, save, toast}
     }
 }
 <\\/script>