From 33fa933808fa7d5747d4a651dab9f00dfcd68f4a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 21 May 2019 14:51:08 +0300
Subject: [PATCH] zindex fixes to SplitButton

---
 src/components/splitbutton/SplitButton.vue | 36 ++++++++--
 src/views/splitbutton/SplitButtonDoc.vue   | 84 ++++++++++++----------
 2 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index c43f7b74b..461433e6e 100644
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -23,11 +23,34 @@ import DomHandler from '../utils/DomHandler';
 
 export default {
     props: {
-        label: String,
-        icon: String,
-		model: Array,
-        disabled: Boolean,
-        tabindex: String
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+		model: {
+            type: Array,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: String,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
     },
     data() {
         return {
@@ -53,6 +76,9 @@ export default {
             event.preventDefault();
         },
         onOverlayEnter() {
+            if (this.autoZIndex) {
+                this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
             this.alignOverlay();
             this.bindOutsideClickListener();
         },
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index c30f2d83f..a8c2ac67d 100644
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -76,44 +76,56 @@ export default {
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>label</td>
-							<td>string</td>
-							<td>null</td>
-							<td>Text of the button.</td>
-						</tr>
-						<tr>
-							<td>icon</td>
-							<td>string</td>
-							<td>null</td>
-							<td>Name of the icon.</td>
-						</tr>
-						<tr>
-							<td>model</td>
-							<td>object</td>
-							<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>label</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Text of the button.</td>
+                            </tr>
+                            <tr>
+                                <td>icon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Name of the icon.</td>
+                            </tr>
+                            <tr>
+                                <td>model</td>
+                                <td>object</td>
+                                <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>
+                                <td>true</td>
+                                <td>Whether to automatically manage layering.</td>
+                            </tr>
+                            <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>