From 4a680fad9fc9af5685b3bfe5a99c6446245dff86 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 21 Sep 2020 15:47:24 +0300
Subject: [PATCH] Migrated Menu and SplitButton to V3

---
 src/components/menu/Menuitem.vue           |  1 +
 src/components/splitbutton/SplitButton.vue | 25 ++++++--------
 src/views/splitbutton/SplitButtonDemo.vue  | 14 ++++----
 src/views/splitbutton/SplitButtonDoc.vue   | 38 ++++++++--------------
 4 files changed, 32 insertions(+), 46 deletions(-)

diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index b56df556d..0cba7f741 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -15,6 +15,7 @@
 import Ripple from '../ripple/Ripple';
 
 export default {
+    inheritAttrs: false,
     props: {
         item: null
     },
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index 7c73b7e4e..4bbaedbbe 100755
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="p-splitbutton p-component">
-        <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
-        <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="disabled"
+    <div :class="containerClass" :style="style">
+        <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" />
+        <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled"
             aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
         <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
             :baseZIndex="baseZIndex" :appendTo="appendTo" />
@@ -14,6 +14,7 @@ import Menu from '../menu/Menu';
 import UniqueComponentId from '../utils/UniqueComponentId';
 
 export default {
+    inheritAttrs: false,
     props: {
         label: {
             type: String,
@@ -27,14 +28,6 @@ export default {
             type: Array,
             default: null
         },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: String,
-            default: null
-        },
         autoZIndex: {
             type: Boolean,
             default: true
@@ -46,12 +39,11 @@ export default {
         appendTo: {
             type: String,
             default: null
-        }
+        },
+        class: null,
+        style: null
     },
     methods: {
-        onClick(event) {
-            this.$emit('click', event);
-        },
         onDropdownButtonClick() {
             this.$refs.menu.toggle({currentTarget: this.$el, relativeAlign: this.appendTo == null});
         }
@@ -59,6 +51,9 @@ export default {
     computed: {
         ariaId() {
             return UniqueComponentId();
+        },
+        containerClass() {
+            return ['p-splitbutton p-component', this.class];
         }
     },
     components: {
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
index db80e35c8..141bb0e19 100755
--- a/src/views/splitbutton/SplitButtonDemo.vue
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -13,13 +13,13 @@
                 <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
 
                 <h5>Severities</h5>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
+                <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>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
             </div>
         </div>
 
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index ebea61c2f..e35e7dcbe 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -78,6 +78,7 @@ export default {
 </CodeHighlight>
 
 				<h5>Properties</h5>
+				<p>Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
@@ -107,18 +108,6 @@ export default {
                                 <td>null</td>
                                 <td>MenuModel instance to define the overlay items.</td>
                             </tr>
-                            <tr>
-                                <td>disabled</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When present, it specifies that the component should be disabled.</td>
-                            </tr>
-                            <tr>
-                                <td>tabindex</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Index of the element in tabbing order.</td>
-                            </tr>
                             <tr>
                                 <td>autoZIndex</td>
                                 <td>boolean</td>
@@ -142,6 +131,7 @@ export default {
 				</div>
 
 				<h5>Events</h5>
+				<p>Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
@@ -152,11 +142,11 @@ export default {
 						</tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>click</td>
-							<td>event: Browser event</td>
-							<td>Callback to invoke when main button is clicked.</td>
-						</tr>
+							<tr>
+								<td>click</td>
+								<td>event: Browser event</td>
+								<td>Callback to invoke when main button is clicked.</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>
@@ -202,13 +192,13 @@ export default {
 &lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt;
 
 &lt;h3&gt;Severities&lt;/h3&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"&gt;&lt;/SplitButton&gt;
-&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"&gt;&lt;/SplitButton&gt;
+&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"&gt;&lt;/SplitButton&gt;
 </template>
 </CodeHighlight>