Joururi/velo-park
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added place count to filters

Browse Source
This commit is contained in:
Alexis
2026-03-27 22:43:08 +01:00
parent 782162d410
commit 8b88b2bebb
2 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/BikeFilters.vue
View File

@@ -5,23 +5,18 @@ import { storeToRefs } from 'pinia';
import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
defineProps<{
nbUncovered?: number
nbCovered?: number
nbKorrigo?: number
}>()
</script>
<template>
<aside class="absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 text-xs rounded-xs">
<form>
<div class="grid gap-1.5">
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterCovered"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Abrités</span>
</label>
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterUncovered"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
@@ -30,7 +25,30 @@ const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Non-abrités</span>
<span class="select-none">
Non-abrités
<small v-if="nbUncovered">
({{ nbUncovered }})
</small>
</span>
</label>
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterCovered"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">
Abrités
<small v-if="nbCovered">
({{ nbCovered }})
</small>
</span>
</label>
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
@@ -41,7 +59,13 @@ const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Abonnement Korrigo</span>
<span class="select-none">
Abonnement Korrigo
<small v-if="nbKorrigo">
({{ nbKorrigo }})
</small>
</span>
</label>
</div>
</form>