From 55c5471f76b02045102bea82ddb45acbc596ded4 Mon Sep 17 00:00:00 2001 From: Gerhard Date: Sat, 18 Jan 2020 12:56:53 +0100 Subject: [PATCH 1/2] Add appendTo on Dropdown The Dropdown component now supports the appendTo property. --- src/components/dropdown/Dropdown.d.ts | 1 + src/components/dropdown/Dropdown.vue | 31 +++++++++++++++++++++++++-- src/views/dropdown/DropdownDoc.vue | 6 ++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts index 5cbe0be42..bcf49cf0c 100644 --- a/src/components/dropdown/Dropdown.d.ts +++ b/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: { diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue index fa93980f1..aadde1e54 100644 --- a/src/components/dropdown/Dropdown.vue +++ b/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() { - DomHandler.relativePosition(this.$refs.overlay, this.$refs.container); + 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: { diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue index 4e180991d..cde97c0c6 100644 --- a/src/views/dropdown/DropdownDoc.vue +++ b/src/views/dropdown/DropdownDoc.vue @@ -155,6 +155,12 @@ data() { string null Establishes relationships between the component and label(s) where its value should be one or more element IDs. + + + appendTo + string + null + Id of the element or "body" for document where the overlay should be appended to. From 8298fc048fda47c0a8aa4f253dd4147126f2c0df Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Mon, 20 Jan 2020 13:41:44 +0300 Subject: [PATCH 2/2] Fixed #148 - Rename select event with *-select --- src/components/autocomplete/AutoComplete.d.ts | 4 ++-- src/components/autocomplete/AutoComplete.vue | 6 +++--- src/components/calendar/Calendar.d.ts | 2 +- src/components/calendar/Calendar.vue | 4 ++-- src/views/autocomplete/AutoCompleteDoc.vue | 4 ++-- src/views/calendar/CalendarDoc.vue | 5 ++--- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts index 3d91fba65..c462d3702 100644 --- a/src/components/autocomplete/AutoComplete.d.ts +++ b/src/components/autocomplete/AutoComplete.d.ts @@ -12,8 +12,8 @@ export declare class AutoComplete extends Vue { delay?: number; ariaLabelledBy?: string; $emit(eventName: 'input', value: any): this; - $emit(eventName: 'select', e: {originalEvent: Event, value: any}): this; - $emit(eventName: 'unselect', e: {originalEvent: Event, value: any}): this; + $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this; + $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this; $emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this; $emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this; $emit(eventName: 'clear'): this; diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue index 7b0943448..7b53c8488 100644 --- a/src/components/autocomplete/AutoComplete.vue +++ b/src/components/autocomplete/AutoComplete.vue @@ -152,7 +152,7 @@ export default { this.$emit('input', item); } - this.$emit('select', { + this.$emit('item-select', { originalEvent: event, value: item }); @@ -167,7 +167,7 @@ export default { let removedValue = this.value[index]; let newValue = this.value.filter((val, i) => (index !== i)); this.$emit('input', newValue); - this.$emit('unselect', { + this.$emit('item-unselect', { originalEvent: event, value: removedValue }); @@ -323,7 +323,7 @@ export default { let newValue = this.value.slice(0, -1); this.$emit('input', newValue); - this.$emit('unselect', { + this.$emit('item-unselect', { originalEvent: event, value: removedValue }); diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts index 4b4cdc788..7479a144f 100644 --- a/src/components/calendar/Calendar.d.ts +++ b/src/components/calendar/Calendar.d.ts @@ -57,7 +57,7 @@ export declare class Calendar extends Vue { $emit(eventName: 'hide'): this; $emit(eventName: 'month-change', e: { month: number, year: number }): this; $emit(eventName: 'year-change', e: { month: number, year: number }): this; - $emit(eventName: 'select', value: Date): this; + $emit(eventName: 'date-select', value: Date): this; $emit(eventName: 'input', value: Date): this; $emit(eventName: 'today-click', value: Date): this; $emit(eventName: 'clear-click', event: Event): this; diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index 48ff3f439..bbebf094f 100644 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -783,7 +783,7 @@ export default { this.updateModel(modelVal); this.updateInputFieldValue(modelVal); } - this.$emit('select', date); + this.$emit('date-select', date); }, updateModel(value) { this.$emit('input', value); @@ -1221,7 +1221,7 @@ export default { this.updateModel(value); this.updateInputFieldValue(value); - this.$emit('select', value); + this.$emit('date-select', value); }, toggleAMPM(event) { this.pm = !this.pm; diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue index 51050675d..02ada83cb 100644 --- a/src/views/autocomplete/AutoCompleteDoc.vue +++ b/src/views/autocomplete/AutoCompleteDoc.vue @@ -167,13 +167,13 @@ export default { Callback to invoke to search for suggestions. - select + item-select event.originalEvent: Browser event
event.value: Selected item Callback to invoke when a suggestion is selected. - unselect + item-unselect event.originalEvent: Browser event
event.value: Unselected item Callback to invoke when a selected value is removed. diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index 4e398fcbb..a960356b3 100644 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -424,10 +424,9 @@ export default { - select + date-select value: Selected value - Callback to invoke when a date is selected. - + Callback to invoke when a date is selected. show