From bfc8fae1326c3a582ceb8a71e0545588e0b79ac9 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 30 Jan 2020 13:16:39 +0300
Subject: [PATCH] Refactor SplitButton to use menu

---
 src/assets/styles/primevue.css             |  1 -
 src/components/menu/Menu.vue               |  8 +++-
 src/components/splitbutton/SplitButton.css | 36 ----------------
 src/components/splitbutton/SplitButton.vue | 50 ++++++++++++++++++++--
 4 files changed, 54 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/splitbutton/SplitButton.css

diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 04c5c6a6e..ecceb3a2b 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -5,5 +5,4 @@
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
-@import '../../components/splitbutton/SplitButton.css';
 @import '../../components/tooltip/Tooltip.css';
\ No newline at end of file
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 97bb3a08b..e3f8be12c 100644
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -41,6 +41,10 @@ export default {
         baseZIndex: {
             type: Number,
             default: 0
+        },
+        align: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -85,7 +89,9 @@ export default {
         },
         onEnter() {
             this.appendContainer();
-            this.alignOverlay();
+            if (this.align) {
+                this.alignOverlay();
+            }
             this.bindOutsideClickListener();
             this.bindResizeListener();
 
diff --git a/src/components/splitbutton/SplitButton.css b/src/components/splitbutton/SplitButton.css
deleted file mode 100644
index e4ba2cf1d..000000000
--- a/src/components/splitbutton/SplitButton.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.p-splitbutton {
-    position: relative;
-    display: inline-block;
-    zoom: 1;
-}
-
-.p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    vertical-align: top;
-}
-
-.p-splitbutton.p-disabled button {
-    cursor: default;
-}
-
-.p-fluid .p-splitbutton {
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-fluid .p-splitbutton .p-button:first-child {
-    width: calc(100% - 2em);
-}
-
-.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-splitbutton.p-button-secondary .p-button:first-child {
-    border-right: 0 none;
-}
\ No newline at end of file
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index 6be7eaf8f..787d20447 100644
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -1,9 +1,9 @@
 <template>
-    <div ref="container" class="p-splitbutton p-buttonset p-component">
+    <div class="p-splitbutton p-buttonset p-component">
         <PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
         <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
             aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
-        <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
+        <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :align="false" />
     </div>
 </template>
 
@@ -48,7 +48,7 @@ export default {
             this.$emit('click', event);
         },
         onDropdownButtonClick() {
-            this.$refs.menu.toggle(event);
+            this.$refs.menu.toggle({currentTarget: this.$el});
         }
     },
     computed: {
@@ -62,3 +62,47 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+.p-splitbutton {
+    position: relative;
+    display: inline-block;
+    zoom: 1;
+}
+
+.p-splitbutton .p-button.p-splitbutton-menubutton {
+    width: 2em;
+    vertical-align: top;
+}
+
+.p-splitbutton .p-menu {
+    left: auto;
+    top: auto;
+}
+
+.p-splitbutton.p-disabled button {
+    cursor: default;
+}
+
+.p-fluid .p-splitbutton {
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing: border-box;
+}
+
+.p-fluid .p-splitbutton .p-button:first-child {
+    width: calc(100% - 2em);
+}
+
+.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
+    width: 2em;
+    box-sizing: border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing: border-box;
+}
+
+.p-splitbutton.p-button-secondary .p-button:first-child {
+    border-right: 0 none;
+}
+</style>