From 9441f3aed4ebc0f43d357b285d628b7c715c51ba Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 23 Oct 2023 19:17:47 +0300
Subject: [PATCH] Update default example of toolbar

---
 doc/toolbar/BasicDoc.vue | 114 ++++++++++++++-------------------------
 1 file changed, 40 insertions(+), 74 deletions(-)

diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 864354d43..5c48c8020 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -5,17 +5,19 @@
     <div class="card">
         <Toolbar>
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" severity="success" />
-                <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
+                <Button icon="pi pi-plus" class="mr-2" />
+                <Button icon="pi pi-print" class="mr-2" />
+                <Button icon="pi pi-upload" />
             </template>
 
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
+            <template #center>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText placeholder="Search" />
+                </span>
             </template>
+
+            <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
         </Toolbar>
     </div>
     <DocSectionCode :code="code" />
@@ -33,37 +35,25 @@ export default {
                 {
                     label: 'Delete',
                     icon: 'pi pi-times'
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('fileupload');
-                    }
                 }
             ],
             code: {
                 basic: `
 <Toolbar>
     <template #start>
-        <Button label="New" icon="pi pi-plus" class="mr-2" />
-        <Button label="Upload" icon="pi pi-upload" severity="success" />
-        <i class="pi pi-bars p-toolbar-separator mr-2" />
-        <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
+        <Button icon="pi pi-plus" class="mr-2" />
+        <Button icon="pi pi-print" class="mr-2" />
+        <Button icon="pi pi-upload" />
     </template>
 
-    <template #end>
-        <Button icon="pi pi-search" class="mr-2" />
-        <Button icon="pi pi-calendar" severity="success" class="mr-2" />
-        <Button icon="pi pi-times" severity="danger" />
+    <template #center>
+        <span class="p-input-icon-left">
+            <i class="pi pi-search" />
+            <InputText placeholder="Search" />
+        </span>
     </template>
+
+    <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
 </Toolbar>
 `,
                 options: `
@@ -71,17 +61,19 @@ export default {
     <div class="card">
         <Toolbar>
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" severity="success" />
-                <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
+                <Button icon="pi pi-plus" class="mr-2" />
+                <Button icon="pi pi-print" class="mr-2" />
+                <Button icon="pi pi-upload" />
             </template>
 
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
+            <template #center>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText placeholder="Search" />
+                </span>
             </template>
+
+            <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
         </Toolbar>
     </div>
 </template>
@@ -98,20 +90,6 @@ export default {
                 {
                     label: 'Delete',
                     icon: 'pi pi-times'
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command: () => {
-                        this.$router.push('fileupload');
-                    }
                 }
             ]
         };
@@ -124,17 +102,19 @@ export default {
     <div class="card">
         <Toolbar>
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" severity="success" />
-                <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
+                <Button icon="pi pi-plus" class="mr-2" />
+                <Button icon="pi pi-print" class="mr-2" />
+                <Button icon="pi pi-upload" />
             </template>
 
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
+            <template #center>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText placeholder="Search" />
+                </span>
             </template>
+
+            <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
         </Toolbar>
     </div>
 </template>
@@ -150,20 +130,6 @@ const items = ref([
     {
         label: 'Delete',
         icon: 'pi pi-times'
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            this.$router.push('fileupload');
-        }
     }
 ])
 <\/script>