immich/web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
renovate[bot] 3d6a6f77a8
chore(deps): update dependency eslint-plugin-svelte to v3 ()
* chore(deps): update dependency eslint-plugin-svelte to v3

* chore: linting

* chore: rebase

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
Co-authored-by: Zack Pollard <zackpollard@ymail.com>
2025-03-03 14:24:26 +00:00

65 lines
1.6 KiB
Svelte

<script lang="ts">
import Checkbox from '$lib/components/elements/checkbox.svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { t } from 'svelte-i18n';
interface Props {
value: string[];
options: { value: string; text: string }[];
label?: string;
desc?: string;
name?: string;
isEdited?: boolean;
disabled?: boolean;
}
let {
value = $bindable(),
options,
label = '',
desc = '',
name = '',
isEdited = false,
disabled = false,
}: Props = $props();
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="font-medium text-immich-primary dark:text-immich-dark-primary 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"
>
{$t('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 (option.value)}
<Checkbox
id="{option.value}-checkbox"
label={option.text}
checked={value.includes(option.value)}
{disabled}
labelClass="text-gray-500 dark:text-gray-300"
onchange={() => handleCheckboxChange(option.value)}
/>
{/each}
</div>
</div>