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

Refactored checkbox into its own component

Browse Source
This commit is contained in:
Alexis
2026-03-30 21:59:07 +02:00
parent b665982abb
commit d6565f8e03
2 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/BikeFilters.vue
View File

@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { useMap } from '@/stores/map';
import { PhCheck, PhMinus, PhPlus } from '@phosphor-icons/vue';
import { storeToRefs } from 'pinia';
import { CheckboxIndicator, CheckboxRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
import { ref, watch } from 'vue';
import Checkbox from './forms/Checkbox.vue';
const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
@@ -43,48 +43,21 @@ watch(maxSpots, (val) => {
<form>
<div class="grid grid-cols-2 gap-1.5">
<div class="col-span-2">
<label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
<CheckboxRoot v-model="filterUncovered"
class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
<PhCheck :size="10" weight="bold" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">
Non-abrités
<small v-if="nbUncovered">({{ nbUncovered }})</small>
</span>
</label>
<Checkbox v-model="filterUncovered" :count="nbUncovered">
Non-abrités
</Checkbox>
</div>
<div class="col-span-2">
<label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
<CheckboxRoot v-model="filterCovered"
class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
<PhCheck :size="10" weight="bold" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">
Abrités
<small v-if="nbCovered">({{ nbCovered }})</small>
</span>
</label>
<Checkbox v-model="filterCovered" :count="nbCovered">
Abrités
</Checkbox>
</div>
<div class="col-span-2">
<label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
<CheckboxRoot v-model="filterKorrigo"
class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
<PhCheck :size="10" weight="bold" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">
Abonnement Korrigo
<small v-if="nbKorrigo">({{ nbKorrigo }})</small>
</span>
</label>
<Checkbox v-model="filterKorrigo" :count="nbKorrigo">
Abonnement Korrigo
</Checkbox>
</div>
<div class="mt-1 col-span-2">

25
src/components/forms/Checkbox.vue Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts" setup>
import { PhCheck } from '@phosphor-icons/vue'
import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
defineProps<{
count?: number
}>()
const checked = defineModel<boolean>()
</script>
<template>
<label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer">
<CheckboxRoot v-model="checked"
class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
<PhCheck :size="10" weight="bold" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">
<slot />
<small v-if="count">({{ count }})</small>
</span>
</label>
</template>