diff options
Diffstat (limited to 'frontend/src/lib/filter/components/FilterForm.svelte')
| -rw-r--r-- | frontend/src/lib/filter/components/FilterForm.svelte | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte new file mode 100644 index 0000000..6fc4c90 --- /dev/null +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -0,0 +1,47 @@ +<script lang="ts"> + import Expander from '$lib/components/Expander.svelte'; + import { getFilterContext } from '$lib/Filter'; + + const filter = getFilterContext(); + export let type: 'grid' | 'row' = 'row'; + + let exclude = false; + + $: if ($filter.exclude.size > 0) { + exclude = true; + } +</script> + +<form on:submit|preventDefault class="gap-0"> + {#if type === 'grid'} + <div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"> + <slot name="include" /> + </div> + <div class="my-2 flex justify-start"> + <Expander title="Exclude" bind:expanded={exclude} /> + </div> + {#if exclude} + <div + class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" + > + <slot name="exclude" /> + </div> + {/if} + {:else} + <div + class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5" + > + <div class="p-2"> + <slot name="include" /> + </div> + <div class="bg-rose-950/50 p-2"> + <slot name="exclude" /> + </div> + </div> + {/if} + <div class=" mt-4 flex items-center"> + <hr class="flex-1 border-slate-700/70" /> + <button type="submit" class="btn-blue mx-2">Apply</button> + <hr class="flex-1 border-slate-700/70" /> + </div> +</form> |