mirror of
https://github.com/immich-app/immich.git
synced 2025-12-19 01:11:07 +03:00
01f52c9021
* chore(web): automatically generate unique IDs * fix: revert changes to Slider * chore: add test for id store
45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { quintOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
|
|
|
|
export let title: string;
|
|
export let comboboxPlaceholder: string;
|
|
export let subtitle = '';
|
|
export let isEdited = false;
|
|
export let options: ComboBoxOption[];
|
|
export let selectedOption: ComboBoxOption;
|
|
export let onSelect: (combobox: ComboBoxOption | undefined) => void;
|
|
</script>
|
|
|
|
<div class="grid grid-cols-2">
|
|
<div>
|
|
<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={title}>
|
|
{title}
|
|
</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>
|
|
|
|
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<Combobox
|
|
label={title}
|
|
hideLabel={true}
|
|
{selectedOption}
|
|
{options}
|
|
placeholder={comboboxPlaceholder}
|
|
on:select={({ detail }) => onSelect(detail)}
|
|
/>
|
|
<slot />
|
|
</div>
|
|
</div>
|