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

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

View file

@ -7,8 +7,12 @@
import { mdiContentCopy } from '@mdi/js';
import { t } from 'svelte-i18n';
export let link: SharedLinkResponseDto;
export let menuItem = false;
interface Props {
link: SharedLinkResponseDto;
menuItem?: boolean;
}
let { link, menuItem = false }: Props = $props();
const handleCopy = async () => {
await copyToClipboard(makeSharedLinkUrl($serverConfig.externalDomain, link.key));
@ -18,5 +22,5 @@
{#if menuItem}
<MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={handleCopy} />
{:else}
<CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} on:click={handleCopy} />
<CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} onclick={handleCopy} />
{/if}

View file

@ -4,12 +4,16 @@
import { mdiDelete } from '@mdi/js';
import { t } from 'svelte-i18n';
export let menuItem = false;
export let onDelete: () => void;
interface Props {
menuItem?: boolean;
onDelete: () => void;
}
let { menuItem = false, onDelete }: Props = $props();
</script>
{#if menuItem}
<MenuOption text={$t('delete_link')} icon={mdiDelete} onClick={onDelete} />
{:else}
<CircleIconButton title={$t('delete_link')} icon={mdiDelete} on:click={onDelete} />
<CircleIconButton title={$t('delete_link')} icon={mdiDelete} onclick={onDelete} />
{/if}

View file

@ -4,12 +4,16 @@
import { mdiCircleEditOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
export let menuItem = false;
export let onEdit: () => void;
interface Props {
menuItem?: boolean;
onEdit: () => void;
}
let { menuItem = false, onEdit }: Props = $props();
</script>
{#if menuItem}
<MenuOption text={$t('edit_link')} icon={mdiCircleEditOutline} onClick={onEdit} />
{:else}
<CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} on:click={onEdit} />
<CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} onclick={onEdit} />
{/if}

View file

@ -1,13 +1,16 @@
<script lang="ts">
import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
export let alt;
export let preload = false;
export let src: string;
let className = '';
export { className as class };
interface Props {
alt?: string;
preload?: boolean;
src: string;
class?: string;
}
let isBroken = false;
let { alt, preload = false, src, class: className = '' }: Props = $props();
let isBroken = $state(false);
</script>
{#if isBroken}
@ -15,7 +18,7 @@
{:else}
<img
{alt}
on:error={() => (isBroken = true)}
onerror={() => (isBroken = true)}
class="size-full rounded-xl object-cover aspect-square {className}"
data-testid="album-image"
draggable="false"

View file

@ -1,8 +1,11 @@
<script lang="ts">
export let alt = '';
export let preload = false;
let className = '';
export { className as class };
interface Props {
alt?: string;
preload?: boolean;
class?: string;
}
let { alt = '', preload = false, class: className = '' }: Props = $props();
</script>
<enhanced:img

View file

@ -6,10 +6,13 @@
import { getAssetThumbnailUrl } from '$lib/utils';
import { t } from 'svelte-i18n';
export let link: SharedLinkResponseDto;
export let preload = false;
let className = '';
export { className as class };
interface Props {
link: SharedLinkResponseDto;
preload?: boolean;
class?: string;
}
let { link, preload = false, class: className = '' }: Props = $props();
</script>
<div class="relative shrink-0 size-24">

View file

@ -12,13 +12,17 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import { mdiDotsVertical } from '@mdi/js';
export let link: SharedLinkResponseDto;
export let onDelete: () => void;
export let onEdit: () => void;
interface Props {
link: SharedLinkResponseDto;
onDelete: () => void;
onEdit: () => void;
}
let { link, onDelete, onEdit }: Props = $props();
let now = DateTime.now();
$: expiresAt = link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined;
$: isExpired = expiresAt ? now > expiresAt : false;
let expiresAt = $derived(link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined);
let isExpired = $derived(expiresAt ? now > expiresAt : false);
const getCountDownExpirationDate = (expiresAtDate: DateTime, now: DateTime) => {
const relativeUnits: ToRelativeUnit[] = ['days', 'hours', 'minutes', 'seconds'];