mirror of
https://github.com/immich-app/immich.git
synced 2025-12-18 17:23:16 +03:00
53d571d29e
* feat(web,a11y): search filter accessibility - visible focus rings - labels for text search - responsive buttons / radio buttons / checkboxes - buttons to lowercase - add fieldsets to radio buttons and checkboxes, so the screen reader announces the label for the group * feat: extract inputs into reusable components, replace all checkboxes * chore: revert changes to responsive buttons --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import Checkbox from '$lib/components/elements/checkbox.svelte';
|
|
import { quintOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
|
|
export let value: string[];
|
|
export let options: { value: string; text: string }[];
|
|
export let label = '';
|
|
export let desc = '';
|
|
export let name = '';
|
|
export let isEdited = false;
|
|
export let disabled = false;
|
|
|
|
function handleCheckboxChange(option: string) {
|
|
value = value.includes(option) ? value.filter((item) => item !== option) : [...value, option];
|
|
}
|
|
</script>
|
|
|
|
<div class="mb-4 w-full">
|
|
<div class={`flex h-[26px] place-items-center gap-1`}>
|
|
<label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
|
|
|
|
{#if isEdited}
|
|
<div
|
|
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
|
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
|
|
>
|
|
Unsaved change
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if desc}
|
|
<p class="immich-form-label pb-2 text-sm" id="{name}-desc">
|
|
{desc}
|
|
</p>
|
|
{/if}
|
|
<div class="flex flex-col gap-2">
|
|
{#each options as option}
|
|
<Checkbox
|
|
id="{option.value}-checkbox"
|
|
label={option.text}
|
|
checked={value.includes(option.value)}
|
|
{disabled}
|
|
labelClass="text-gray-500 dark:text-gray-300"
|
|
on:change={() => handleCheckboxChange(option.value)}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|