Merge pull request #146 from Nerderer/master

Add appendTo on Dropdown

src/components/dropdown/Dropdown.d.ts

@@ -16,6 +16,7 @@ export declare class Dropdown extends Vue {
     showClear?: boolean;
     tabindex?: string;
     ariaLabelledBy?: string;
+    appendTo?: string;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
     $slot: {

src/components/dropdown/Dropdown.vue

@@ -55,7 +55,11 @@ export default {
         dataKey: null,
 		showClear: Boolean,
         tabindex: String,
-        ariaLabelledBy: null
+        ariaLabelledBy: null,
+        appendTo: {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -70,6 +74,7 @@ export default {
     previousSearchChar: null,
     searchValue: null,
     beforeDestroy() {
+        this.restoreAppend();
         this.unbindOutsideClickListener();
     },
     updated() {
@@ -267,6 +272,7 @@ export default {
             this.$emit('input', event.target.value);
         },
         onOverlayEnter() {
+            this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
 
@@ -278,7 +284,12 @@ export default {
             this.unbindOutsideClickListener();
         },
         alignOverlay() {
+            if (this.appendTo) {
+                DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
+                this.$refs.overlay.style.width = DomHandler.getOuterWidth(this.$refs.container) + 'px';
+            } else {
                 DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            }
         },
         updateModel(event, value) {
             this.$emit('input', value);
@@ -352,6 +363,22 @@ export default {
             }
 
             return null;
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.overlay && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
+            }
         }
     },
     computed: {

src/views/dropdown/DropdownDoc.vue

@@ -155,6 +155,12 @@ data() {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                             </tr>
 						</tbody>
 					</table>