Refactor SplitButton to use menu

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';

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();
+            if (this.align) {
                 this.alignOverlay();
+            }
             this.bindOutsideClickListener();
             this.bindResizeListener();
 

src/components/splitbutton/SplitButton.css

@@ -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;
-}

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>