helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

42
web/src/lib/components/shared-components/tree/tree.svelte
View file

@ -4,19 +4,31 @@
import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
export let tree: RecursiveObject;
export let parent: string;
export let value: string;
export let active = '';
export let icons: { default: string; active: string };
export let getLink: (path: string) => string;
export let getColor: (path: string) => string | undefined;
interface Props {
tree: RecursiveObject;
parent: string;
value: string;
active?: string;
icons: { default: string; active: string };
getLink: (path: string) => string;
getColor: (path: string) => string | undefined;
}
$: path = normalizeTreePath(`${parent}/${value}`);
$: isActive = active === path || active.startsWith(`${path}/`);
$: isOpen = isActive;
$: isTarget = active === path;
$: color = getColor(path);
let { tree, parent, value, active = '', icons, getLink, getColor }: Props = $props();
let path = $derived(normalizeTreePath(`${parent}/${value}`));
let isActive = $derived(active === path || active.startsWith(`${path}/`));
let isOpen = $state(false);
$effect(() => {
isOpen = isActive;
});
let isTarget = $derived(active === path);
let color = $derived(getColor(path));
const onclick = (event: MouseEvent) => {
event.preventDefault();
isOpen = !isOpen;
};
</script>
<a
@ -24,11 +36,7 @@
title={value}
class={`flex flex-grow place-items-center pl-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
>
<button
type="button"
on:click|preventDefault={() => (isOpen = !isOpen)}
class={Object.values(tree).length === 0 ? 'invisible' : ''}
>
<button type="button" {onclick} class={Object.values(tree).length === 0 ? 'invisible' : ''}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
<div>