1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<template>
<v-select ref="select"
v-bind="{...$props, ...$attrs}"
:model-value="modelValue"
@update:modelValue="value => updateValue(value)"
:calculate-position="withPopper"
class="studip-v-select"
append-to-body
>
<template v-for="(index, name) in $slots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</v-select>
</template>
<script>
import vSelect from 'vue-select';
import { createPopper } from '@popperjs/core'
import 'vue-select/dist/vue-select.css'
export default {
name: 'studip-select',
emits: ['update:modelValue'],
inheritAttrs: false,
components: {
vSelect,
},
props: {
modelValue: [String, Number, Object, Array],
maxHeight: {
type: String,
default: '12em'
},
},
methods: {
updateValue(val) {
this.$emit('update:modelValue', val)
},
withPopper(dropdownList, component, { width }) {
if (component.$el?.offsetParent.classList.contains('studip-dialog-content')) {
dropdownList.classList.add('studip-v-select-ul-dialog');
}
dropdownList.style.width = width
dropdownList.style.maxHeight = this.maxHeight;
dropdownList.classList.add('studip-v-select-detachted-ul');
let dropdownListHeight = parseFloat(this.getStyleValue(dropdownList, 'height')) +
parseFloat(this.getStyleValue(dropdownList, 'paddingTop')) +
parseFloat(this.getStyleValue(dropdownList, 'paddingBottom'));
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: this.calculatePlacement(dropdownListHeight),
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn({ state }) {
component.$refs.dropdownMenu.classList.toggle(
'studip-v-select-ul-drop-up',
state.placement === 'top'
)
component.$el.classList.toggle(
'studip-v-select-drop-up',
state.placement === 'top'
)
},
},
],
})
return () => popper.destroy()
},
calculatePlacement(dropdownListHeight) {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let selectBottom = Math.ceil(
this.$refs.select.$el.getBoundingClientRect().bottom + scrollTop
);
let totalExpandedList = selectBottom + dropdownListHeight;
let totalDocHeight = Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight
);
let footerHeight = document.getElementById('main-footer').offsetHeight;
let functionalAreaHeight = totalDocHeight - footerHeight;
return totalExpandedList >= functionalAreaHeight ? 'top' : 'bottom';
},
getStyleValue(element, styleProp) {
let result = '';
if (window.getComputedStyle) {
result = getComputedStyle(element)[styleProp];
} else if (element.currentStyle) {
result = element.currentStyle[styleProp];
}
return result;
}
}
};
</script>
|
