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

2024-11-14 08:43:25 -06:00
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
@@ -9,11 +9,15 @@
  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
-  export let onAction: OnAction;
-  export let shared = false;
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+    shared?: boolean;
+  }

-  let showSelectionModal = false;
+  let { asset, onAction, shared = false }: Props = $props();
+
+  let showSelectionModal = $state(false);

  const handleAddToNewAlbum = async (albumName: string) => {
    showSelectionModal = false;
@@ -8,8 +8,12 @@
  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
-  export let onAction: OnAction;
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  }
+
+  let { asset, onAction }: Props = $props();

  const onArchive = async () => {
    const updatedAsset = await toggleArchive(asset);
@@ -4,9 +4,13 @@
  import { mdiArrowLeft } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let onClose: () => void;
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
 </script>

 <svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />

-<CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} on:click={onClose} />
+<CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} onclick={onClose} />
@@ -16,10 +16,14 @@
  import { t } from 'svelte-i18n';
  import type { OnAction } from './action';

-  export let asset: AssetResponseDto;
-  export let onAction: OnAction;
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  }

-  let showConfirmModal = false;
+  let { asset, onAction }: Props = $props();
+
+  let showConfirmModal = $state(false);

  const trashOrDelete = async (force = false) => {
    if (force || !$featureFlags.trash) {
@@ -77,7 +81,7 @@
  color="opaque"
  icon={asset.isTrashed ? mdiDeleteForeverOutline : mdiDeleteOutline}
  title={asset.isTrashed ? $t('permanently_delete') : $t('delete')}
-  on:click={() => trashOrDelete(asset.isTrashed)}
+  onclick={() => trashOrDelete(asset.isTrashed)}
 />

 {#if showConfirmModal}
@@ -7,8 +7,12 @@
  import { mdiFolderDownloadOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
-  export let menuItem = false;
+  interface Props {
+    asset: AssetResponseDto;
+    menuItem?: boolean;
+  }
+
+  let { asset, menuItem = false }: Props = $props();

  const onDownloadFile = () => downloadFile(asset);
 </script>
@@ -16,7 +20,7 @@
 <svelte:window use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />

 {#if !menuItem}
-  <CircleIconButton color="opaque" icon={mdiFolderDownloadOutline} title={$t('download')} on:click={onDownloadFile} />
+  <CircleIconButton color="opaque" icon={mdiFolderDownloadOutline} title={$t('download')} onclick={onDownloadFile} />
 {:else}
  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={onDownloadFile} />
 {/if}
@@ -12,8 +12,12 @@
  import { t } from 'svelte-i18n';
  import type { OnAction } from './action';

-  export let asset: AssetResponseDto;
-  export let onAction: OnAction;
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  }
+
+  let { asset, onAction }: Props = $props();

  const toggleFavorite = async () => {
    try {
@@ -24,7 +28,8 @@
        },
      });

-      asset.isFavorite = data.isFavorite;
+      asset = { ...asset, isFavorite: data.isFavorite };
+
      onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });

      notificationController.show({
@@ -43,5 +48,5 @@
  color="opaque"
  icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
  title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
-  on:click={toggleFavorite}
+  onclick={toggleFavorite}
 />
@@ -3,13 +3,17 @@
  import { mdiMotionPauseOutline, mdiPlaySpeed } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let isPlaying: boolean;
-  export let onClick: (shouldPlay: boolean) => void;
+  interface Props {
+    isPlaying: boolean;
+    onClick: (shouldPlay: boolean) => void;
+  }
+
+  let { isPlaying, onClick }: Props = $props();
 </script>

 <CircleIconButton
  color="opaque"
  icon={isPlaying ? mdiMotionPauseOutline : mdiPlaySpeed}
  title={isPlaying ? $t('stop_motion_photo') : $t('play_motion_photo')}
-  on:click={() => onClick(!isPlaying)}
+  onclick={() => onClick(!isPlaying)}
 />
@@ -5,7 +5,11 @@
  import { t } from 'svelte-i18n';
  import NavigationArea from '../navigation-area.svelte';

-  export let onNextAsset: () => void;
+  interface Props {
+    onNextAsset: () => void;
+  }
+
+  let { onNextAsset }: Props = $props();
 </script>

 <svelte:window
@@ -5,7 +5,11 @@
  import { t } from 'svelte-i18n';
  import NavigationArea from '../navigation-area.svelte';

-  export let onPreviousAsset: () => void;
+  interface Props {
+    onPreviousAsset: () => void;
+  }
+
+  let { onPreviousAsset }: Props = $props();
 </script>

 <svelte:window
@@ -11,8 +11,12 @@
  import { t } from 'svelte-i18n';
  import type { OnAction } from './action';

-  export let asset: AssetResponseDto;
-  export let onAction: OnAction;
+  interface Props {
+    asset: AssetResponseDto;
+    onAction: OnAction;
+  }
+
+  let { asset = $bindable(), onAction }: Props = $props();

  const handleRestoreAsset = async () => {
    try {
@@ -9,8 +9,12 @@
  import { mdiImageOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
-  export let album: AlbumResponseDto;
+  interface Props {
+    asset: AssetResponseDto;
+    album: AlbumResponseDto;
+  }
+
+  let { asset, album }: Props = $props();

  const handleUpdateThumbnail = async () => {
    try {
@@ -6,9 +6,13 @@
  import { mdiAccountCircleOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
+  interface Props {
+    asset: AssetResponseDto;
+  }

-  let showProfileImageCrop = false;
+  let { asset }: Props = $props();
+
+  let showProfileImageCrop = $state(false);
 </script>

 <MenuOption
@@ -6,17 +6,16 @@
  import { mdiShareVariantOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let asset: AssetResponseDto;
+  interface Props {
+    asset: AssetResponseDto;
+  }

-  let showModal = false;
+  let { asset }: Props = $props();
+
+  let showModal = $state(false);
 </script>

-<CircleIconButton
-  color="opaque"
-  icon={mdiShareVariantOutline}
-  on:click={() => (showModal = true)}
-  title={$t('share')}
-/>
+<CircleIconButton color="opaque" icon={mdiShareVariantOutline} onclick={() => (showModal = true)} title={$t('share')} />

 {#if showModal}
  <Portal target="body">
@@ -4,9 +4,13 @@
  import { mdiInformationOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

-  export let onShowDetail: () => void;
+  interface Props {
+    onShowDetail: () => void;
+  }
+
+  let { onShowDetail }: Props = $props();
 </script>

 <svelte:window use:shortcut={{ shortcut: { key: 'i' }, onShortcut: onShowDetail }} />

-<CircleIconButton color="opaque" icon={mdiInformationOutline} on:click={onShowDetail} title={$t('info')} />
+<CircleIconButton color="opaque" icon={mdiInformationOutline} onclick={onShowDetail} title={$t('info')} />
@@ -7,8 +7,12 @@
  import { t } from 'svelte-i18n';
  import type { OnAction } from './action';

-  export let stack: StackResponseDto;
-  export let onAction: OnAction;
+  interface Props {
+    stack: StackResponseDto;
+    onAction: OnAction;
+  }
+
+  let { stack, onAction }: Props = $props();

  const handleUnstack = async () => {
    const unstackedAssets = await deleteStack([stack.id]);