Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: prevent multiselect bottomnav overlap (#28901)

Browse source
This commit is contained in:
Michael Geers 2026-04-07 18:29:15 +02:00 • committed by GitHub
parent 1e15854687
commit cf9ea4ce90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

73
assets/js/components/Helper/MultiSelect.vue
View file

@ -11,40 +11,46 @@
>
<slot></slot>
</button>
<ul ref="dropdown" class="dropdown-menu dropdown-menu-end" :aria-labelledby="id">
<template v-if="selectAllLabel">
<li class="dropdown-item p-0">
<label class="form-check px-3 py-2" :for="formId('all')">
<div
ref="dropdown"
class="dropdown-menu dropdown-menu-end multi-select-menu"
:class="{ 'multi-select-menu--top-level': isTopLevel }"
>
<ul class="dropdown-menu d-block position-static m-0" :aria-labelledby="id">
<template v-if="selectAllLabel">
<li class="dropdown-item p-0">
<label class="form-check px-3 py-2" :for="formId('all')">
<input
:id="formId('all')"
class="form-check-input ms-0 me-2"
type="checkbox"
value="all"
tabindex="0"
:checked="allOptionsSelected"
@change="toggleCheckAll()"
/>
<div class="form-check-label">{{ selectAllLabel }}</div>
</label>
</li>
<li><hr class="dropdown-divider" /></li>
</template>
<li v-for="option in options" :key="option.value" class="dropdown-item p-0">
<label class="form-check px-3 py-2 d-flex" :for="formId(option.value)">
<input
:id="formId('all')"
:id="formId(option.value)"
v-model="internalValue"
class="form-check-input ms-0 me-2"
type="checkbox"
value="all"
:value="option.value"
tabindex="0"
:checked="allOptionsSelected"
@change="toggleCheckAll()"
/>
<div class="form-check-label">{{ selectAllLabel }}</div>
<div class="form-check-label">
{{ option.name }}
</div>
</label>
</li>
<li><hr class="dropdown-divider" /></li>
</template>
<li v-for="option in options" :key="option.value" class="dropdown-item p-0">
<label class="form-check px-3 py-2 d-flex" :for="formId(option.value)">
<input
:id="formId(option.value)"
v-model="internalValue"
class="form-check-input ms-0 me-2"
type="checkbox"
:value="option.value"
tabindex="0"
/>
<div class="form-check-label">
{{ option.name }}
</div>
</label>
</li>
</ul>
</ul>
</div>
</div>
</template>
@ -61,6 +67,7 @@ export default defineComponent({
value: { type: Array as PropType<string[] | number[]>, default: () => [] },
options: { type: Array as PropType<SelectOption<string | number>[]>, default: () => [] },
selectAllLabel: String,
isTopLevel: Boolean,
},
emits: ["open", "update:modelValue"],
data() {
@ -116,3 +123,15 @@ export default defineComponent({
},
});
</script>
<style scoped>
.multi-select-menu {
/* reset .dropdown-menu styles; inner ul carries the visible box */
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.multi-select-menu--top-level {
padding-bottom: calc(var(--bottom-space) + 1rem);
}
</style>

1
assets/js/views/Log.vue
View file

@ -60,6 +60,7 @@
<div class="filterAreas col-6 col-lg-2">
<MultiSelect
id="logAreasSelect"
isTopLevel
:modelValue="areas"
:options="areaOptions"
:selectAllLabel="$t('log.selectAll')"