diff --git a/web/src/lib/components/list/list_card.svelte b/web/src/lib/components/list/list_card.svelte
index c38fdbee..33b7b075 100644
--- a/web/src/lib/components/list/list_card.svelte
+++ b/web/src/lib/components/list/list_card.svelte
@@ -12,30 +12,34 @@
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
- export let list: List;
- export let active: boolean = false;
+ interface Props {
+ list: List;
+ active?: boolean;
+ }
- $: cumulativeDistance = list.expand?.trails?.reduce(
+ let { list, active = false }: Props = $props();
+
+ let cumulativeDistance = $derived(list.expand?.trails?.reduce(
(s, b) => s + b.distance!,
0,
- );
+ ));
- $: cumulativeElevationGain = list.expand?.trails?.reduce(
+ let cumulativeElevationGain = $derived(list.expand?.trails?.reduce(
(s, b) => s + b.elevation_gain!,
0,
- );
+ ));
- $: cumulativeElevationLoss = list.expand?.trails?.reduce(
+ let cumulativeElevationLoss = $derived(list.expand?.trails?.reduce(
(s, b) => s + b.elevation_loss!,
0,
- );
+ ));
- $: cumulativeDuration = list.expand?.trails?.reduce(
+ let cumulativeDuration = $derived(list.expand?.trails?.reduce(
(s, b) => s + b.duration!,
0,
- );
+ ));
- $: listIsShared = (list.expand?.list_share_via_list?.length ?? 0) > 0;
+ let listIsShared = $derived((list.expand?.list_share_via_list?.length ?? 0) > 0);
void;
+ onmouseenter?: (data: { trail: Trail; index: number }) => void;
+ onmouseleave?: (data: { trail: Trail; index: number }) => void;
+ onchange?: (item: DropdownItem) => void;
+ }
- const dispatch = createEventDispatcher();
+ let { list, onclick, onmouseenter, onmouseleave, onchange }: Props =
+ $props();
- $: cumulativeDistance = list.expand?.trails?.reduce(
- (s, b) => s + b.distance!,
- 0,
+ let cumulativeDistance = $derived(
+ list.expand?.trails?.reduce((s, b) => s + b.distance!, 0),
);
- $: cumulativeElevationGain = list.expand?.trails?.reduce(
- (s, b) => s + b.elevation_gain!,
- 0,
+ let cumulativeElevationGain = $derived(
+ list.expand?.trails?.reduce((s, b) => s + b.elevation_gain!, 0),
);
- $: cumulativeElevationLoss = list.expand?.trails?.reduce(
- (s, b) => s + b.elevation_loss!,
- 0,
+ let cumulativeElevationLoss = $derived(
+ list.expand?.trails?.reduce((s, b) => s + b.elevation_loss!, 0),
);
- $: cumulativeDuration = list.expand?.trails?.reduce(
- (s, b) => s + b.duration!,
- 0,
+ let cumulativeDuration = $derived(
+ list.expand?.trails?.reduce((s, b) => s + b.duration!, 0),
);
- $: allowEdit =
+ let allowEdit = $derived(
list.author == $currentUser?.id ||
- list.expand?.list_share_via_list?.some((s) => s.permission == "edit");
+ list.expand?.list_share_via_list?.some(
+ (s) => s.permission == "edit",
+ ),
+ );
- $: allowShare =
+ let allowShare = $derived(
list.author == $currentUser?.id &&
- !list.expand?.trails?.some((t) => t.author !== $currentUser?.id);
+ !list.expand?.trails?.some((t) => t.author !== $currentUser?.id),
+ );
- $: dropdownItems = [
+ let dropdownItems = $derived([
...(allowShare
? [{ text: $_("share"), value: "share", icon: "share" }]
: []),
@@ -58,22 +64,24 @@
...(list.author == $currentUser?.id
? [{ text: $_("delete"), value: "delete", icon: "trash" }]
: []),
- ];
+ ]);
- $: listIsShared = (list.expand?.list_share_via_list?.length ?? 0) > 0;
+ let listIsShared = $derived(
+ (list.expand?.list_share_via_list?.length ?? 0) > 0,
+ );
- let fullDescription: boolean = false;
+ let fullDescription: boolean = $state(false);
function handleTrailSelect(trail: Trail, index: number) {
- dispatch("click", { trail, index });
+ onclick?.({ trail, index });
}
function handleTrailMouseEnter(trail: Trail, index: number) {
- dispatch("mouseenter", { trail, index });
+ onmouseenter?.({ trail, index });
}
function handleTrailMouseLeave(trail: Trail, index: number) {
- dispatch("mouseleave", { trail, index });
+ onmouseleave?.({ trail, index });
}
@@ -100,17 +108,17 @@
{/if}
{#if dropdownItems.length}
-
+ {#snippet children({ toggleMenu: openDropdown })}
+
+ {/snippet}
+
{/if}
![]()
100 && !fullDescription}
-