blob: ead5c4d487a39909ec5f739234b1c35f3726ccbd (
plain) (
tree)
|
|
<script lang="ts">
import { Association, Enum } from '$lib/Filter';
import type { ListItem } from '$lib/Utils';
import Select from '$lib/components/Select.svelte';
import { getContext } from 'svelte';
export let title: string;
const context: 'include' | 'exclude' = getContext('filter-type');
$: exclude = context === 'exclude';
const id = `${context}-${title.toLowerCase()}`;
export let options: ListItem[] | undefined;
export let filter: Association<string> | Enum<string>;
</script>
<div class:exclude class="filter-container">
<div class="flex gap-2">
<label for={id}>{title}</label>
<div class="ml-auto flex items-center gap-1 self-center text-xs">
{#if filter instanceof Association}
<button
type="button"
title="matches all"
class:active={filter.mode === 'all'}
class="btn btn-xs"
on:click={() => (filter.mode = 'all')}
>
∀
</button>
<button
type="button"
title="matches any of"
class:active={filter.mode === 'any'}
class="btn btn-xs"
on:click={() => (filter.mode = 'any')}
>
∃
</button>
<button
type="button"
title="matches exactly"
class:active={filter.mode === 'exact'}
class="btn btn-xs"
on:click={() => (filter.mode = 'exact')}
>
=
</button>
<hr class="border-px border-slate-600" />
{/if}
<button
type="button"
title="empty"
class:active={filter.empty}
class="btn btn-xs"
on:click={() => (filter.empty = !filter.empty)}
>
∅
</button>
</div>
</div>
<Select multi clearable {options} {id} bind:value={filter.values} />
</div>
<style lang="postcss">
button:hover {
@apply bg-slate-700;
}
button.active {
@apply bg-indigo-800;
}
.filter-container {
grid-column: var(--grid-column);
}
</style>
|
