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

Added base types filters

Browse Source
This commit is contained in:
Alexis
2026-03-27 22:15:55 +01:00
parent 07feed0355
commit 782162d410
8 changed files with 250 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/BikeFilters.vue Normal file
View File

@@ -0,0 +1,49 @@
<script lang="ts" setup>
import { useMap } from '@/stores/map';
import { PhCheck } from '@phosphor-icons/vue';
import { storeToRefs } from 'pinia';
import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
</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">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Non-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="filterKorrigo"
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">Abonnement Korrigo</span>
</label>
</div>
</form>
</aside>
</template>