fix typing

This commit is contained in:
Alex Tran
2023-08-16 23:17:59 -05:00
parent 974227a95e
commit e85d11e209
2 changed files with 11 additions and 9 deletions

View File

@@ -3,15 +3,16 @@
import LinkButton from './buttons/link-button.svelte'; import LinkButton from './buttons/link-button.svelte';
import { clickOutside } from '$lib/utils/click-outside'; import { clickOutside } from '$lib/utils/click-outside';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
interface DropdownOption { interface DropdownOption {
value: string; value: string;
icon?: typeof LinkButton; icon?: Icon;
} }
export let options: DropdownOption[] = []; export let options: DropdownOption[] | string[] = [];
export let value = options[0]; export let value = options[0];
export let icons: (typeof LinkButton)[] | undefined = undefined; export let icons: (typeof Icon)[] | undefined = undefined;
let showMenu = false; let showMenu = false;
@@ -51,10 +52,10 @@
on:click={() => handleSelectOption(index)} on:click={() => handleSelectOption(index)}
> >
{#if value == option} {#if value == option}
<div class="font-medium text-immich-primary dark:text-immich-dark-primary"> <div class="text-immich-primary dark:text-immich-dark-primary font-medium">
<Check size="18" /> <Check size="18" />
</div> </div>
<p class="justify-self-start font-medium text-immich-primary dark:text-immich-dark-primary"> <p class="text-immich-primary dark:text-immich-dark-primary justify-self-start font-medium">
{option} {option}
</p> </p>
{:else} {:else}

View File

@@ -25,6 +25,7 @@
NotificationType, NotificationType,
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import type { AlbumResponseDto } from '@api'; import type { AlbumResponseDto } from '@api';
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
export let data: PageData; export let data: PageData;
@@ -40,7 +41,7 @@
}, },
]; ];
const viewOptionNames = viewOptions.map((option) => option.name); const viewOptionNames = viewOptions.map((option) => option.name);
const viewOptionIcons = viewOptions.map((option) => option.icon); const viewOptionIcons: (typeof Icon)[] = viewOptions.map((option) => option.icon);
const { const {
albums: unsortedAlbums, albums: unsortedAlbums,
@@ -151,7 +152,7 @@
{:else if $albumViewSettings.view === AlbumViewMode.List} {:else if $albumViewSettings.view === AlbumViewMode.List}
<table class="mt-5 w-full text-left"> <table class="mt-5 w-full text-left">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary mb-4 flex h-12 w-full rounded-md border bg-gray-50"
> >
<tr class="flex w-full place-items-center"> <tr class="flex w-full place-items-center">
<th class="w-1/4 text-center text-sm font-medium">Album title</th> <th class="w-1/4 text-center text-sm font-medium">Album title</th>
@@ -161,11 +162,11 @@
</tr> </tr>
</thead> </thead>
<tbody <tbody
class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg" class="dark:border-immich-dark-gray dark:text-immich-dark-fg block max-h-[320px] w-full overflow-y-auto rounded-md border"
> >
{#each $albums as album (album.id)} {#each $albums as album (album.id)}
<tr <tr
class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75" class="odd:bg-immich-gray even:bg-immich-bg hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center hover:cursor-pointer"
on:click={() => goto(`albums/${album.id}`)} on:click={() => goto(`albums/${album.id}`)}
on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)} on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
tabindex="0" tabindex="0"