From 254925f351cf444f7bebb5e026c62fbb7ef3462a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 Feb 2019 17:03:45 +0300
Subject: [PATCH] Initiated SplitButton

---
 src/AppMenu.vue                            |  1 +
 src/assets/styles/primevue.css             |  2 +
 src/components/menu/Menu.css               | 42 +++++++++++
 src/components/splitbutton/SplitButton.css | 36 +++++++++
 src/components/splitbutton/SplitButton.vue | 86 ++++++++++++++++++++++
 src/main.js                                |  2 +
 src/router.js                              |  5 ++
 src/views/splitbutton/SplitButtonDemo.vue  | 64 ++++++++++++++++
 8 files changed, 238 insertions(+)
 create mode 100644 src/components/menu/Menu.css
 create mode 100644 src/components/splitbutton/SplitButton.css
 create mode 100644 src/components/splitbutton/SplitButton.vue
 create mode 100644 src/views/splitbutton/SplitButtonDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index dcc468f7a..823f6ac60 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -38,6 +38,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}">
                 <div>
                     <router-link to="/button">&#9679; Button</router-link>
+                    <router-link to="/splitbutton">&#9679; SplitButton</router-link>
                 </div>
             </div>
 
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 49ec75581..38a7b57eb 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -12,6 +12,7 @@
 @import '../../components/inputtext/InputText.css';
 @import '../../components/inputswitch/InputSwitch.css';
 @import '../../components/listbox/Listbox.css';
+@import '../../components/menu/Menu.css';
 @import '../../components/message/Message.css';
 @import '../../components/multiselect/MultiSelect.css';
 @import '../../components/overlaypanel/OverlayPanel.css';
@@ -23,6 +24,7 @@
 @import '../../components/sidebar/Sidebar.css';
 @import '../../components/slider/Slider.css';
 @import '../../components/spinner/Spinner.css';
+@import '../../components/splitbutton/SplitButton.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
 @import '../../components/toast/Toast.css';
diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css
new file mode 100644
index 000000000..a2fc7aad1
--- /dev/null
+++ b/src/components/menu/Menu.css
@@ -0,0 +1,42 @@
+.p-menu {
+    width: 12.5em;
+    padding: .25em;
+}
+
+.p-menu.p-menu-dynamic {
+    position: absolute;
+}
+
+.p-menu .p-menu-separator {
+    border-width: 1px 0 0 0;
+}
+
+.p-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-menu .p-submenu-header {
+    padding: .25em .5em;
+    margin: .125em 0;
+}
+
+.p-menu .p-menuitem {
+    margin: .125em 0;
+}
+
+.p-menu .p-menuitem-link {
+    padding: .25em;
+    display: block;
+    text-decoration: none;
+}
+
+.p-menu .p-menuitem-icon {
+    margin-right: .25em;
+    vertical-align: middle;
+}
+
+.p-menu .p-menuitem-text {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/src/components/splitbutton/SplitButton.css b/src/components/splitbutton/SplitButton.css
new file mode 100644
index 000000000..e4ba2cf1d
--- /dev/null
+++ b/src/components/splitbutton/SplitButton.css
@@ -0,0 +1,36 @@
+.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
new file mode 100644
index 000000000..bacf1d0fa
--- /dev/null
+++ b/src/components/splitbutton/SplitButton.vue
@@ -0,0 +1,86 @@
+<template>
+    <div ref="container" 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" />
+        <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
+            <div ref="overlay" class="p-menu p-menu-dynamic p-component" v-if="overlayVisible">
+                <ul class="p-menu-list p-reset">
+                    <li class="p-menuitem" role="menuitem" v-for="item of model" :key="item.label">
+                        <a :href="item.url||'#'" class="p-menuitem-link" @click="itemClick($event, item)">
+                            <span :class="['p-menuitem-icon', item.icon]"></span>
+                            <span class="p-menuitem-text">{{item.label}}</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import Button from '../button/Button';
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        label: String,
+        icon: String,
+        disabled: Boolean,
+        tabindex: String,
+        model: Array
+    },
+    data() {
+        return {
+            overlayVisible: false
+        };
+    },
+    beforeDestroy() {
+        this.unbindOutsideClickListener();
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event);
+            this.overlayVisible = false;
+        },
+        onDropdownButtonClick() {
+            this.overlayVisible = !this.overlayVisible;
+        },
+        itemClick(event, item) {
+            if (item.command) {
+                item.command({originalEvent: event, item: item });
+            }
+            this.overlayVisible = false;
+            event.preventDefault();
+        },
+        onOverlayEnter() {
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+        },
+        onOverlayLeave() {
+            this.unbindOutsideClickListener();
+        },
+        alignOverlay() {
+            DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.$refs.overlay && !this.$refs.container.contains(event.target)) {
+                        this.overlayVisible = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        }
+    },
+    components: {
+        'PVSButton': Button
+    }
+}
+</script>
diff --git a/src/main.js b/src/main.js
index eb6740c46..ce9dcdaac 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,7 @@ import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
 import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
+import SplitButton from './components/splitbutton/SplitButton';
 import Spinner from './components/spinner/Spinner';
 import Textarea from './components/textarea/Textarea';
 import Toast from './components/toast/Toast';
@@ -77,6 +78,7 @@ Vue.component('SelectButton', SelectButton);
 Vue.component('Slider', Slider);
 Vue.component('Sidebar', Sidebar);
 Vue.component('Spinner', Spinner);
+Vue.component('SplitButton', SplitButton);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
 Vue.component('Textarea', Textarea);
diff --git a/src/router.js b/src/router.js
index 273c09626..7bc14c5bb 100644
--- a/src/router.js
+++ b/src/router.js
@@ -196,6 +196,11 @@ export default new Router({
         name: 'spinner',
         component: () => import('./views/spinner/SpinnerDemo.vue')
     },
+    {
+        path: '/splitbutton',
+        name: 'splitbutton',
+        component: () => import('./views/splitbutton/SplitButtonDemo.vue')
+    },
     {
         path: '/textarea',
         name: 'textarea',
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
new file mode 100644
index 000000000..4413031f2
--- /dev/null
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>SplitButton</h1>
+                <p>SplitButton groups a set of commands in an overlay with a default command.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 className="first">Basic</h3>
+            <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update', 
+                    icon: 'pi pi-refresh', 
+                    command: () => {
+                        this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                    }
+                },
+                {
+                    label: 'Delete', 
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                    }
+                },
+                {
+                    label: 'Vue Website', 
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/'
+                    }
+                },
+                {   label: 'Upload', 
+                    icon: 'pi pi-upload', 
+                    command: () => {
+                        window.location.hash = "/fileupload"
+                    }
+                }
+            ]
+        } 
+    },
+    methods: {
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .p-splitbutton {
+        margin-right: .5em;
+    }
+</style>
\ No newline at end of file