pull/160/head
mertsincan 2020-01-20 13:54:54 +03:00
commit 686e918c6f
9 changed files with 48 additions and 15 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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: {

View File

@ -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: {

View File

@ -167,13 +167,13 @@ export default {
<td>Callback to invoke to search for suggestions.</td>
</tr>
<tr>
<td>select</td>
<td>item-select</td>
<td>event.originalEvent: Browser event <br />
event.value: Selected item</td>
<td>Callback to invoke when a suggestion is selected.</td>
</tr>
<tr>
<td>unselect</td>
<td>item-unselect</td>
<td>event.originalEvent: Browser event <br />
event.value: Unselected item</td>
<td>Callback to invoke when a selected value is removed.</td>

View File

@ -424,10 +424,9 @@ export default {
</thead>
<tbody>
<tr>
<td>select</td>
<td>date-select</td>
<td>value: Selected value</td>
<td>Callback to invoke when a date is selected.
</td>
<td>Callback to invoke when a date is selected.</td>
</tr>
<tr>
<td>show</td>

View File

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