js-kompo-utils 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/VlDropdown.vue +1 -1
- package/components/VlSelect.vue +30 -21
- package/package.json +1 -1
|
@@ -159,7 +159,7 @@ export default {
|
|
|
159
159
|
const root = this.$refs.dropdownRoot
|
|
160
160
|
if (!menu) return
|
|
161
161
|
|
|
162
|
-
this.inModal = !!(root && root.closest('.kompoModal'))
|
|
162
|
+
this.inModal = !!(root && root.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l'))
|
|
163
163
|
|
|
164
164
|
// Transfer scroll styles from root before teleporting
|
|
165
165
|
if (root && root.classList.contains('dropdown-with-scroll')) {
|
package/components/VlSelect.vue
CHANGED
|
@@ -58,6 +58,7 @@ export default {
|
|
|
58
58
|
data() {
|
|
59
59
|
return {
|
|
60
60
|
flipUp: false,
|
|
61
|
+
overlayStyle: null,
|
|
61
62
|
}
|
|
62
63
|
},
|
|
63
64
|
computed: {
|
|
@@ -68,43 +69,51 @@ export default {
|
|
|
68
69
|
return !!this.$_config('openUpward')
|
|
69
70
|
},
|
|
70
71
|
optionsStyle() {
|
|
71
|
-
if (
|
|
72
|
-
|
|
73
|
-
top: 'auto',
|
|
74
|
-
bottom: '100%',
|
|
75
|
-
borderRadius: '5px 5px 0 0',
|
|
72
|
+
if (this.overlayStyle) return this.overlayStyle
|
|
73
|
+
if (this.flipUp) {
|
|
74
|
+
return { top: 'auto', bottom: '100%', borderRadius: '5px 5px 0 0' }
|
|
76
75
|
}
|
|
76
|
+
return {}
|
|
77
77
|
},
|
|
78
78
|
},
|
|
79
79
|
watch: {
|
|
80
80
|
isFocused(focused) {
|
|
81
81
|
if (focused) {
|
|
82
|
-
this.$nextTick(() => this.
|
|
82
|
+
this.$nextTick(() => this.refresh())
|
|
83
83
|
} else {
|
|
84
84
|
this.flipUp = false
|
|
85
|
+
this.overlayStyle = null
|
|
85
86
|
}
|
|
86
87
|
},
|
|
87
88
|
filteredOptions() {
|
|
88
|
-
if (this.isFocused)
|
|
89
|
-
this.$nextTick(() => this.computeFlip())
|
|
90
|
-
}
|
|
89
|
+
if (this.isFocused) this.$nextTick(() => this.refresh())
|
|
91
90
|
},
|
|
92
91
|
},
|
|
93
92
|
methods: {
|
|
94
|
-
|
|
95
|
-
if (this.forceUp) {
|
|
96
|
-
this.flipUp = true
|
|
97
|
-
return
|
|
98
|
-
}
|
|
93
|
+
refresh() {
|
|
99
94
|
const opts = this.$refs.selectOptions
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
const
|
|
95
|
+
const anchor = opts && opts.parentElement
|
|
96
|
+
if (!opts || !anchor) return
|
|
97
|
+
|
|
98
|
+
const rect = anchor.getBoundingClientRect()
|
|
104
99
|
const optsHeight = opts.offsetHeight
|
|
105
|
-
const spaceBelow = window.innerHeight -
|
|
106
|
-
const spaceAbove =
|
|
107
|
-
this.flipUp = spaceBelow < optsHeight && spaceAbove > spaceBelow
|
|
100
|
+
const spaceBelow = window.innerHeight - rect.bottom
|
|
101
|
+
const spaceAbove = rect.top
|
|
102
|
+
this.flipUp = this.forceUp || (spaceBelow < optsHeight && spaceAbove > spaceBelow)
|
|
103
|
+
|
|
104
|
+
if (opts.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l')) {
|
|
105
|
+
this.overlayStyle = {
|
|
106
|
+
position: 'fixed',
|
|
107
|
+
left: rect.left + 'px',
|
|
108
|
+
width: rect.width + 'px',
|
|
109
|
+
zIndex: 5001,
|
|
110
|
+
...(this.flipUp
|
|
111
|
+
? { top: 'auto', bottom: (window.innerHeight - rect.top) + 'px', borderRadius: '5px 5px 0 0' }
|
|
112
|
+
: { top: rect.bottom + 'px', bottom: 'auto' }),
|
|
113
|
+
}
|
|
114
|
+
} else {
|
|
115
|
+
this.overlayStyle = null
|
|
116
|
+
}
|
|
108
117
|
},
|
|
109
118
|
},
|
|
110
119
|
}
|