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

Sessions UI: visualization, month/year charts (#15902)

Browse source
This commit is contained in:
Michael Geers 2024-10-21 12:13:45 +02:00 • committed by GitHub
parent 1bd521fc24
commit cfa35f295b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 3271 additions and 715 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/js/components/SelectGroup.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="mode-group border d-inline-flex" role="group">
<div class="mode-group border d-inline-flex" :class="{ large }" role="group">
<button
v-for="(option, i) in options"
:id="i === 0 ? id : null"
:key="option.value"
type="button"
class="btn btn-sm flex-grow-1 flex-shrink-1"
:class="{ active: option.value === modelValue }"
:class="{ active: option.value === modelValue, 'btn--equal': equalWidth }"
:disabled="option.disabled"
@click="$emit('update:modelValue', option.value)"
>
@ -22,6 +22,8 @@ export default {
id: String,
options: Array,
modelValue: [Number, String],
equalWidth: Boolean,
large: Boolean,
},
emits: ["update:modelValue"],
};
@ -32,11 +34,10 @@ export default {
border: 2px solid var(--evcc-default-text);
border-radius: 17px;
padding: 4px;
background: var(--evcc-background);
}
.btn {
/* equal width buttons */
flex-basis: 0;
white-space: nowrap;
border-radius: 12px;
padding: 0.1em 0.8em;
@ -45,6 +46,9 @@ export default {
overflow-x: hidden;
text-overflow: ellipsis;
}
.btn--equal {
flex-basis: 0;
}
.btn:hover {
color: var(--evcc-gray);
}
@ -52,7 +56,11 @@ export default {
color: var(--evcc-background);
background: var(--evcc-default-text);
}
.btn-group {
.modal-group.large {
height: 32px;
}
.large .btn {
height: 32px;
border-radius: 16px;
}
</style>