johba/harb
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

tax rate, version and compose (#70)

Browse source 
resolves #67

Co-authored-by: johba <johba@harb.eth>
Reviewed-on: https://codeberg.org/johba/harb/pulls/70
This commit is contained in:
johba 2025-10-07 19:26:08 +02:00
parent d8ca557eb6
commit 6cbb1781ce
40 changed files with 1243 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web-app/src/components/fcomponents/FSelect.vue
View file

@ -6,7 +6,7 @@
:label="props.label ?? undefined"
:selectedable="false"
:focus="showList"
:modelValue="`${year} % yearly`"
:modelValue="`${selectedYear} % yearly`"
readonly
>
<template #info v-if="slots.info">
@ -22,14 +22,14 @@
<div
class="select-list-item"
v-for="(item, index) in props.items"
:key="item.year"
:class="{ active: year === item.year, hovered: activeIndex === index }"
:key="item.index"
:class="{ active: selectedIndex === item.index, hovered: activeIndex === index }"
@click.stop="clickItem(item)"
@mouseenter="mouseEnter($event, index)"
@mouseleave="mouseLeave($event, index)"
>
<div class="circle">
<div class="active" v-if="year === item.year"></div>
<div class="active" v-if="selectedIndex === item.index"></div>
<div class="hovered" v-else-if="activeIndex === index"></div>
</div>
<div class="yearly">
@ -54,6 +54,7 @@ import useClickOutside from '@/composables/useClickOutside';
import { Icon } from '@iconify/vue';
interface Item {
index: number;
year: number;
daily: number;
}
@ -97,17 +98,21 @@ useClickOutside(componentRef, () => {
showList.value = false;
});
const year = computed({
// getter
const selectedIndex = computed({
get() {
return props.modelValue || props.items[0].year;
if (typeof props.modelValue === 'number') {
return props.modelValue;
}
return props.items[0]?.index ?? 0;
},
// setter
set(newValue: number) {
emit('update:modelValue', newValue);
},
});
const selectedOption = computed(() => props.items.find(item => item.index === selectedIndex.value) ?? props.items[0]);
const selectedYear = computed(() => selectedOption.value?.year ?? 0);
function mouseEnter(event: MouseEvent, index: number) {
const target = event.target as HTMLElement;
activeIndex.value = index;
@ -127,9 +132,9 @@ function clickSelect(_event: unknown) {
showList.value = !showList.value;
}
function clickItem(item: { year: number }) {
function clickItem(item: { index: number }) {
// console.log("item", item);
year.value = item.year;
selectedIndex.value = item.index;
showList.value = false;
// console.log("showList.value", showList.value);
// emit('input', item)