- {@render children?.()}
+ {@render children?.()}
diff --git a/src/app.css b/src/app.css
index 29c1b8c..d1b1a7b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,7 @@
body.dark {
- color-scheme: dark;
+ color-scheme: dark;
}
body:not(.dark) {
- color-scheme: light;
+ color-scheme: light;
}
diff --git a/src/app.d.ts b/src/app.d.ts
index da08e6d..520c421 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,13 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
- namespace App {
- // interface Error {}
- // interface Locals {}
- // interface PageData {}
- // interface PageState {}
- // interface Platform {}
- }
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
}
export {};
diff --git a/src/app.html b/src/app.html
index 0352c1a..b9ef8f5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
-
-
-
-
- %sveltekit.head%
-
-
- %sveltekit.body%
-
+
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
diff --git a/src/docs/components/ComponentCard.svelte b/src/docs/components/ComponentCard.svelte
index 9cee668..f2f4cf3 100644
--- a/src/docs/components/ComponentCard.svelte
+++ b/src/docs/components/ComponentCard.svelte
@@ -1,23 +1,23 @@
diff --git a/src/docs/components/ComponentDescription.svelte b/src/docs/components/ComponentDescription.svelte
index 9a84640..939a454 100644
--- a/src/docs/components/ComponentDescription.svelte
+++ b/src/docs/components/ComponentDescription.svelte
@@ -1,12 +1,12 @@
- {title}
-
-
-
-
-
-
+ {title}
+
+
+
+
+
+
-
-
+
+
-
- {name}
- {@render children?.()}
-
+
+ {name}
+ {@render children?.()}
+
diff --git a/src/docs/components/ComponentTipCard.svelte b/src/docs/components/ComponentTipCard.svelte
index 000d7e6..0b51493 100644
--- a/src/docs/components/ComponentTipCard.svelte
+++ b/src/docs/components/ComponentTipCard.svelte
@@ -1,15 +1,15 @@
- {@render children()}
+ {@render children()}
diff --git a/src/docs/components/Lorem.svelte b/src/docs/components/Lorem.svelte
index ace3f67..eb71df8 100644
--- a/src/docs/components/Lorem.svelte
+++ b/src/docs/components/Lorem.svelte
@@ -1,19 +1,19 @@
{text}
diff --git a/src/docs/components/Navbar.svelte b/src/docs/components/Navbar.svelte
index 234648b..f49abd8 100644
--- a/src/docs/components/Navbar.svelte
+++ b/src/docs/components/Navbar.svelte
@@ -1,31 +1,31 @@
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
index fd6039d..283b6eb 100644
--- a/src/docs/constants.ts
+++ b/src/docs/constants.ts
@@ -1,123 +1,123 @@
import type { Theme } from '@immich/ui';
import {
- mdiAccountCircle,
- mdiAccountCircleOutline,
- mdiAlertCircle,
- mdiAlertCircleOutline,
- mdiApplication,
- mdiApplicationOutline,
- mdiButtonCursor,
- mdiCard,
- mdiCardOutline,
- mdiCheckboxMarked,
- mdiCheckboxMultipleMarked,
- mdiCheckboxMultipleMarkedOutline,
- mdiCheckboxOutline,
- mdiCloseCircle,
- mdiCloseCircleOutline,
- mdiCodeBraces,
- mdiDotsCircle,
- mdiFormatHeaderPound,
- mdiFormDropdown,
- mdiFormTextarea,
- mdiFormTextbox,
- mdiFormTextboxPassword,
- mdiHelpBox,
- mdiHelpBoxOutline,
- mdiHomeCircle,
- mdiHomeCircleOutline,
- mdiImage,
- mdiImageOutline,
- mdiKeyboardVariant,
- mdiLink,
- mdiListBox,
- mdiListBoxOutline,
- mdiMenu,
- mdiNumeric,
- mdiPanVertical,
- mdiPartyPopper,
- mdiSquare,
- mdiSquareOutline,
- mdiThemeLightDark,
- mdiToggleSwitch,
- mdiToggleSwitchOutline,
- mdiViewSequential,
- mdiViewSequentialOutline,
- mdiWindowMaximize,
+ mdiAccountCircle,
+ mdiAccountCircleOutline,
+ mdiAlertCircle,
+ mdiAlertCircleOutline,
+ mdiApplication,
+ mdiApplicationOutline,
+ mdiButtonCursor,
+ mdiCard,
+ mdiCardOutline,
+ mdiCheckboxMarked,
+ mdiCheckboxMultipleMarked,
+ mdiCheckboxMultipleMarkedOutline,
+ mdiCheckboxOutline,
+ mdiCloseCircle,
+ mdiCloseCircleOutline,
+ mdiCodeBraces,
+ mdiDotsCircle,
+ mdiFormatHeaderPound,
+ mdiFormDropdown,
+ mdiFormTextarea,
+ mdiFormTextbox,
+ mdiFormTextboxPassword,
+ mdiHelpBox,
+ mdiHelpBoxOutline,
+ mdiHomeCircle,
+ mdiHomeCircleOutline,
+ mdiImage,
+ mdiImageOutline,
+ mdiKeyboardVariant,
+ mdiLink,
+ mdiListBox,
+ mdiListBoxOutline,
+ mdiMenu,
+ mdiNumeric,
+ mdiPanVertical,
+ mdiPartyPopper,
+ mdiSquare,
+ mdiSquareOutline,
+ mdiThemeLightDark,
+ mdiToggleSwitch,
+ mdiToggleSwitchOutline,
+ mdiViewSequential,
+ mdiViewSequentialOutline,
+ mdiWindowMaximize,
} from '@mdi/js';
import type { Component } from 'svelte';
export enum DisplayOption {
- Both = 'both',
- Light = 'light',
- Dark = 'dark',
+ Both = 'both',
+ Light = 'light',
+ Dark = 'dark',
}
export type ExampleItem = {
- title: string;
- code: string;
- component: Component;
- theme?: Theme;
+ title: string;
+ code: string;
+ component: Component;
+ theme?: Theme;
};
export type ExampleCardProps = ExampleItem;
export const componentGroups = [
- {
- title: 'Layout',
- components: [
- { name: 'Alert', icon: mdiAlertCircleOutline, activeIcon: mdiAlertCircle },
- { name: 'AppShell', icon: mdiApplicationOutline, activeIcon: mdiApplication },
- { name: 'Card', icon: mdiCardOutline, activeIcon: mdiCard },
- { name: 'Container', icon: mdiSquareOutline, activeIcon: mdiSquare },
- { name: 'Navbar', icon: mdiMenu },
- { name: 'Modal', icon: mdiWindowMaximize },
- { name: 'ConfirmModal', icon: mdiCheckboxOutline },
- { name: 'Scrollable', icon: mdiPanVertical },
- { name: 'Stack', icon: mdiViewSequentialOutline, activeIcon: mdiViewSequential },
- ],
- },
- {
- title: 'Forms',
- components: [
- { name: 'Button', icon: mdiButtonCursor },
- { name: 'IconButton', icon: mdiHomeCircleOutline, activeIcon: mdiHomeCircle },
- { name: 'Checkbox', icon: mdiCheckboxOutline, activeIcon: mdiCheckboxMarked },
- { name: 'CloseButton', icon: mdiCloseCircleOutline, activeIcon: mdiCloseCircle },
- { name: 'Field', icon: mdiListBoxOutline, activeIcon: mdiListBox },
- { name: 'HelperText', icon: mdiHelpBoxOutline, activeIcon: mdiHelpBox },
- { name: 'Input', icon: mdiFormTextbox },
- { name: 'LoadingSpinner', icon: mdiDotsCircle },
- {
- name: 'MultiSelect',
- icon: mdiCheckboxMultipleMarkedOutline,
- activeIcon: mdiCheckboxMultipleMarked,
- },
- { name: 'PasswordInput', icon: mdiFormTextboxPassword },
- { name: 'Select', icon: mdiFormDropdown },
- { name: 'Switch', icon: mdiToggleSwitchOutline, activeIcon: mdiToggleSwitch },
- ],
- },
- {
- title: 'Text',
- components: [
- { name: 'Code', icon: mdiCodeBraces },
- { name: 'Kbd', icon: mdiKeyboardVariant },
- { name: 'Text', icon: mdiFormatHeaderPound },
- { name: 'Textarea', icon: mdiFormTextarea },
- { name: 'Heading', icon: mdiFormTextbox },
- { name: 'Link', icon: mdiLink },
- { name: 'FormatBytes', icon: mdiNumeric },
- ],
- },
- {
- title: 'Miscellaneous',
- components: [
- { name: 'Avatar', icon: mdiAccountCircleOutline, activeIcon: mdiAccountCircle },
- { name: 'Logo', icon: mdiImageOutline, activeIcon: mdiImage },
- { name: 'CommandPalette', icon: mdiMenu, activeIcon: mdiMenu },
- { name: 'SupporterBadge', icon: mdiPartyPopper },
- { name: 'ThemeSwitcher', icon: mdiThemeLightDark },
- ],
- },
+ {
+ title: 'Layout',
+ components: [
+ { name: 'Alert', icon: mdiAlertCircleOutline, activeIcon: mdiAlertCircle },
+ { name: 'AppShell', icon: mdiApplicationOutline, activeIcon: mdiApplication },
+ { name: 'Card', icon: mdiCardOutline, activeIcon: mdiCard },
+ { name: 'Container', icon: mdiSquareOutline, activeIcon: mdiSquare },
+ { name: 'Navbar', icon: mdiMenu },
+ { name: 'Modal', icon: mdiWindowMaximize },
+ { name: 'ConfirmModal', icon: mdiCheckboxOutline },
+ { name: 'Scrollable', icon: mdiPanVertical },
+ { name: 'Stack', icon: mdiViewSequentialOutline, activeIcon: mdiViewSequential },
+ ],
+ },
+ {
+ title: 'Forms',
+ components: [
+ { name: 'Button', icon: mdiButtonCursor },
+ { name: 'IconButton', icon: mdiHomeCircleOutline, activeIcon: mdiHomeCircle },
+ { name: 'Checkbox', icon: mdiCheckboxOutline, activeIcon: mdiCheckboxMarked },
+ { name: 'CloseButton', icon: mdiCloseCircleOutline, activeIcon: mdiCloseCircle },
+ { name: 'Field', icon: mdiListBoxOutline, activeIcon: mdiListBox },
+ { name: 'HelperText', icon: mdiHelpBoxOutline, activeIcon: mdiHelpBox },
+ { name: 'Input', icon: mdiFormTextbox },
+ { name: 'LoadingSpinner', icon: mdiDotsCircle },
+ {
+ name: 'MultiSelect',
+ icon: mdiCheckboxMultipleMarkedOutline,
+ activeIcon: mdiCheckboxMultipleMarked,
+ },
+ { name: 'PasswordInput', icon: mdiFormTextboxPassword },
+ { name: 'Select', icon: mdiFormDropdown },
+ { name: 'Switch', icon: mdiToggleSwitchOutline, activeIcon: mdiToggleSwitch },
+ ],
+ },
+ {
+ title: 'Text',
+ components: [
+ { name: 'Code', icon: mdiCodeBraces },
+ { name: 'Kbd', icon: mdiKeyboardVariant },
+ { name: 'Text', icon: mdiFormatHeaderPound },
+ { name: 'Textarea', icon: mdiFormTextarea },
+ { name: 'Heading', icon: mdiFormTextbox },
+ { name: 'Link', icon: mdiLink },
+ { name: 'FormatBytes', icon: mdiNumeric },
+ ],
+ },
+ {
+ title: 'Miscellaneous',
+ components: [
+ { name: 'Avatar', icon: mdiAccountCircleOutline, activeIcon: mdiAccountCircle },
+ { name: 'Logo', icon: mdiImageOutline, activeIcon: mdiImage },
+ { name: 'CommandPalette', icon: mdiMenu, activeIcon: mdiMenu },
+ { name: 'SupporterBadge', icon: mdiPartyPopper },
+ { name: 'ThemeSwitcher', icon: mdiThemeLightDark },
+ ],
+ },
];
diff --git a/src/docs/utilities.ts b/src/docs/utilities.ts
index c6fe726..68ca781 100644
--- a/src/docs/utilities.ts
+++ b/src/docs/utilities.ts
@@ -1,4 +1,4 @@
export const asSlug = (value: string) =>
- value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, '');
+ value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, '');
export const asComponentHref = (componentName: string) => `/components/${asSlug(componentName)}`;
diff --git a/src/lib/actions/shortcut.ts b/src/lib/actions/shortcut.ts
index 76a292a..f7b3009 100644
--- a/src/lib/actions/shortcut.ts
+++ b/src/lib/actions/shortcut.ts
@@ -1,39 +1,39 @@
import type { ActionReturn } from 'svelte/action';
export type Shortcut = {
- key: string;
- alt?: boolean;
- ctrl?: boolean;
- shift?: boolean;
- meta?: boolean;
+ key: string;
+ alt?: boolean;
+ ctrl?: boolean;
+ shift?: boolean;
+ meta?: boolean;
};
export type ShortcutOptions
-
+
- {#if icon}
-
+
+
-
+
+ {#if closable || onClose}
+
-
- {/if}
+
+
-
+ {#if icon}
+
- {#if closable || onClose}
-
+
+ {/if}
-
- {#if title}
- {title}
- {/if}
- {#if children}
- {@render children()}
- {/if}
-
-
-
- {/if}
-
+ {#if title}
+ {title}
+ {/if}
+ {#if children}
+ {@render children()}
+ {/if}
+
+
+
+ {/if}
+
- {#if header}
-
- {@render header?.snippet()}
-
- {/if}
-
+ {@render header?.snippet()}
+
+ {/if}
+
diff --git a/src/lib/components/AppShell/AppShellHeader.svelte b/src/lib/components/AppShell/AppShellHeader.svelte
index a440c7f..ce4fa6d 100644
--- a/src/lib/components/AppShell/AppShellHeader.svelte
+++ b/src/lib/components/AppShell/AppShellHeader.svelte
@@ -1,15 +1,15 @@
- {#if sidebar}
- {@render sidebar?.snippet()}
- {/if}
-
- {@render children?.()}
-
-
+ {#if header}
+
+ {#if sidebar}
+ {@render sidebar?.snippet()}
+ {/if}
+
+ {@render children?.()}
+
+
-
- {/if}
+ {#if title || buttons}
+
- {#if title}
-
- {@render buttons?.()}
- {title}
- {/if}
- {#if description}
- {description}
- {/if} -
+
+ {/if}
-
+
+ {#if title}
+
+ {@render buttons?.()}
+ {title}
+ {/if}
+ {#if description}
+ {description}
+ {/if} +
- {@render headerChild?.snippet()}
-
- {/if}
+ {#if expandable}
+
+ {:else}
+
+ {@render headerChild?.snippet()}
+
+ {/if}
{/snippet}
-
-
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Card/CardDescription.svelte b/src/lib/components/Card/CardDescription.svelte
index 7e5e2c6..9894acc 100644
--- a/src/lib/components/Card/CardDescription.svelte
+++ b/src/lib/components/Card/CardDescription.svelte
@@ -1,16 +1,16 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Card/CardFooter.svelte b/src/lib/components/Card/CardFooter.svelte
index c53e7a5..ad7dda9 100644
--- a/src/lib/components/Card/CardFooter.svelte
+++ b/src/lib/components/Card/CardFooter.svelte
@@ -1,16 +1,16 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Card/CardHeader.svelte b/src/lib/components/Card/CardHeader.svelte
index b03292d..df1ffe1 100644
--- a/src/lib/components/Card/CardHeader.svelte
+++ b/src/lib/components/Card/CardHeader.svelte
@@ -1,16 +1,16 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Card/CardTitle.svelte b/src/lib/components/Card/CardTitle.svelte
index fc7695a..95e423f 100644
--- a/src/lib/components/Card/CardTitle.svelte
+++ b/src/lib/components/Card/CardTitle.svelte
@@ -1,21 +1,21 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Checkbox/Checkbox.svelte b/src/lib/components/Checkbox/Checkbox.svelte
index a7f7f5e..93329bf 100644
--- a/src/lib/components/Checkbox/Checkbox.svelte
+++ b/src/lib/components/Checkbox/Checkbox.svelte
@@ -1,122 +1,121 @@
-
-
-
-
- {#if commandPaletteManager.query}
- {#if commandPaletteManager.results.length === 0}
- {t('search_no_results', translations)}
- {/if}
- {:else if commandPaletteManager.recentItems.length > 0}
- {t('search_recently_used', translations)}
- {:else}
- {t('command_palette_prompt_default', translations)}
- {/if}
+
+
+
+
+
+ {#if commandPaletteManager.query}
+ {#if commandPaletteManager.results.length === 0}
+ {t('search_no_results', translations)}
+ {/if}
+ {:else if commandPaletteManager.recentItems.length > 0}
+ {t('search_recently_used', translations)}
+ {:else}
+ {t('command_palette_prompt_default', translations)}
+ {/if}
- {#if commandPaletteManager.results.length > 0}
-
-
-
-
+
{/if}
diff --git a/src/lib/components/CommandPalette/CommandPaletteItem.svelte b/src/lib/components/CommandPalette/CommandPaletteItem.svelte
index 586f802..f3e1094 100644
--- a/src/lib/components/CommandPalette/CommandPaletteItem.svelte
+++ b/src/lib/components/CommandPalette/CommandPaletteItem.svelte
@@ -1,71 +1,71 @@
onClose(false)} {size} {icon}>
-
- {#if promptSnippet}{@render promptSnippet()}{:else}
-
+
+ {#if promptSnippet}{@render promptSnippet()}{:else}
+
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/lib/components/Container/Container.svelte b/src/lib/components/Container/Container.svelte
index c40efcd..c784dd9 100644
--- a/src/lib/components/Container/Container.svelte
+++ b/src/lib/components/Container/Container.svelte
@@ -1,33 +1,33 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/HelperText/HelperText.svelte b/src/lib/components/HelperText/HelperText.svelte
index 1fcb218..5a1abe9 100644
--- a/src/lib/components/HelperText/HelperText.svelte
+++ b/src/lib/components/HelperText/HelperText.svelte
@@ -1,24 +1,24 @@
-
diff --git a/src/lib/components/Icon/Icon.svelte b/src/lib/components/Icon/Icon.svelte
index 1a8b72e..1a6e1d8 100644
--- a/src/lib/components/Icon/Icon.svelte
+++ b/src/lib/components/Icon/Icon.svelte
@@ -1,52 +1,47 @@
diff --git a/src/lib/components/IconButton/IconButton.svelte b/src/lib/components/IconButton/IconButton.svelte
index 15f446a..f537575 100644
--- a/src/lib/components/IconButton/IconButton.svelte
+++ b/src/lib/components/IconButton/IconButton.svelte
@@ -1,20 +1,13 @@
diff --git a/src/lib/components/Input/Input.svelte b/src/lib/components/Input/Input.svelte
index 31dcc3d..155fc77 100644
--- a/src/lib/components/Input/Input.svelte
+++ b/src/lib/components/Input/Input.svelte
@@ -1,171 +1,168 @@
![Immich logo]()
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index 4d16bf8..abf1351 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -1,131 +1,127 @@
-
- {
- if (e.key === 'Escape') {
- e.stopPropagation();
- e.preventDefault();
- if (closeOnEsc) {
- handleClose();
- }
- }
- }}
- onclick={handleCloseOnClick}
- class={cleanClass(
- 'fixed start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
- )}
- >
-
+
{@render children?.()}
diff --git a/src/lib/components/Modal/ModalBody.svelte b/src/lib/components/Modal/ModalBody.svelte
index 80c8c16..653cf49 100644
--- a/src/lib/components/Modal/ModalBody.svelte
+++ b/src/lib/components/Modal/ModalBody.svelte
@@ -1,15 +1,15 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Modal/ModalFooter.svelte b/src/lib/components/Modal/ModalFooter.svelte
index eba300d..0e6a7e6 100644
--- a/src/lib/components/Modal/ModalFooter.svelte
+++ b/src/lib/components/Modal/ModalFooter.svelte
@@ -1,15 +1,15 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Modal/ModalHeader.svelte b/src/lib/components/Modal/ModalHeader.svelte
index 8b7179f..723de78 100644
--- a/src/lib/components/Modal/ModalHeader.svelte
+++ b/src/lib/components/Modal/ModalHeader.svelte
@@ -1,15 +1,15 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/MultiSelect/MultiSelect.svelte b/src/lib/components/MultiSelect/MultiSelect.svelte
index c16b1f2..5bdf7f1 100644
--- a/src/lib/components/MultiSelect/MultiSelect.svelte
+++ b/src/lib/components/MultiSelect/MultiSelect.svelte
@@ -1,14 +1,14 @@
(isVisible = !isVisible)}
- title={labelValue}
- aria-label={labelValue}
- />
- {/if}
- {/snippet}
+ {#snippet trailingIcon()}
+ {#if value?.length > 0}
+ (isVisible = !isVisible)}
+ title={labelValue}
+ aria-label={labelValue}
+ />
+ {/if}
+ {/snippet}
diff --git a/src/lib/components/Scrollable/Scrollable.svelte b/src/lib/components/Scrollable/Scrollable.svelte
index ebfa8ed..f0eb3e8 100644
--- a/src/lib/components/Scrollable/Scrollable.svelte
+++ b/src/lib/components/Scrollable/Scrollable.svelte
@@ -1,67 +1,67 @@
diff --git a/src/lib/components/Select/Select.svelte b/src/lib/components/Select/Select.svelte
index 369bb98..1a37145 100644
--- a/src/lib/components/Select/Select.svelte
+++ b/src/lib/components/Select/Select.svelte
@@ -1,17 +1,17 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/Stack/Stack.svelte b/src/lib/components/Stack/Stack.svelte
index fc2342f..a9065db 100644
--- a/src/lib/components/Stack/Stack.svelte
+++ b/src/lib/components/Stack/Stack.svelte
@@ -1,70 +1,70 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/SupporterBadge/SupporterBadge.svelte b/src/lib/components/SupporterBadge/SupporterBadge.svelte
index 14c70f1..7cb5978 100644
--- a/src/lib/components/SupporterBadge/SupporterBadge.svelte
+++ b/src/lib/components/SupporterBadge/SupporterBadge.svelte
@@ -1,94 +1,94 @@
-
- {#snippet child()}
-
+
+ {#snippet child()}
+
diff --git a/src/lib/components/Text/Text.svelte b/src/lib/components/Text/Text.svelte
index cc6b7a2..61b7ef8 100644
--- a/src/lib/components/Text/Text.svelte
+++ b/src/lib/components/Text/Text.svelte
@@ -1,42 +1,35 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/Textarea/Textarea.svelte b/src/lib/components/Textarea/Textarea.svelte
index bc2de55..be243c5 100644
--- a/src/lib/components/Textarea/Textarea.svelte
+++ b/src/lib/components/Textarea/Textarea.svelte
@@ -1,120 +1,119 @@
- {#if loading}
-
+
+ {#if loading}
+
{/if}
diff --git a/src/lib/internal/Child.svelte b/src/lib/internal/Child.svelte
index fca62ef..02b8557 100644
--- a/src/lib/internal/Child.svelte
+++ b/src/lib/internal/Child.svelte
@@ -1,28 +1,28 @@
diff --git a/src/lib/internal/Select.svelte b/src/lib/internal/Select.svelte
index 3b7587d..e0a8185 100644
--- a/src/lib/internal/Select.svelte
+++ b/src/lib/internal/Select.svelte
@@ -1,163 +1,156 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/services/command-palette-manager.svelte.ts b/src/lib/services/command-palette-manager.svelte.ts
index 761c0e7..3d98ebd 100644
--- a/src/lib/services/command-palette-manager.svelte.ts
+++ b/src/lib/services/command-palette-manager.svelte.ts
@@ -1,124 +1,122 @@
import { goto } from '$app/navigation';
export type CommandItem = {
- icon: string;
- iconClass: string;
- type: string;
- title: string;
- description?: string;
- text: string;
+ icon: string;
+ iconClass: string;
+ type: string;
+ title: string;
+ description?: string;
+ text: string;
} & ({ href: string; external?: boolean } | { action: () => void });
export const asText = (...items: unknown[]) => {
- return items
- .filter((item) => item !== undefined && item !== null)
- .map((items) => String(items))
- .join('|')
- .toLowerCase();
+ return items
+ .filter((item) => item !== undefined && item !== null)
+ .map((items) => String(items))
+ .join('|')
+ .toLowerCase();
};
const isEqual = (a: CommandItem, b: CommandItem) => {
- return a.title === b.title && a.type === b.type;
+ return a.title === b.title && a.type === b.type;
};
const isMatch = (item: CommandItem, query: string): boolean => {
- if (!query) {
- return true;
- }
+ if (!query) {
+ return true;
+ }
- return item.text.includes(query);
+ return item.text.includes(query);
};
class CommandPaletteManager {
- isEnabled = $state(false);
- isOpen = $state(false);
- query = $state('');
- selectedIndex = $state(0);
- private normalizedQuery = $derived(this.query.toLowerCase());
+ isEnabled = $state(false);
+ isOpen = $state(false);
+ query = $state('');
+ selectedIndex = $state(0);
+ private normalizedQuery = $derived(this.query.toLowerCase());
- items: CommandItem[] = [];
- filteredItems = $derived(
- this.items.filter((item) => isMatch(item, this.normalizedQuery)).slice(0, 100),
- );
- recentItems = $state([]);
- results = $derived(this.query ? this.filteredItems : this.recentItems);
+ items: CommandItem[] = [];
+ filteredItems = $derived(this.items.filter((item) => isMatch(item, this.normalizedQuery)).slice(0, 100));
+ recentItems = $state([]);
+ results = $derived(this.query ? this.filteredItems : this.recentItems);
- enable() {
- this.isEnabled = true;
- }
+ enable() {
+ this.isEnabled = true;
+ }
- async open() {
- if (!this.isEnabled || this.isOpen) {
- return;
- }
+ async open() {
+ if (!this.isEnabled || this.isOpen) {
+ return;
+ }
- this.selectedIndex = 0;
- this.isOpen = true;
- }
+ this.selectedIndex = 0;
+ this.isOpen = true;
+ }
- close() {
- if (!this.isEnabled || !this.isOpen) {
- return;
- }
+ close() {
+ if (!this.isEnabled || !this.isOpen) {
+ return;
+ }
- this.query = '';
- this.isOpen = false;
- }
+ this.query = '';
+ this.isOpen = false;
+ }
- async select(selectedIndex?: number) {
- const selected = this.results[selectedIndex ?? this.selectedIndex];
- if (!selected) {
- return;
- }
+ async select(selectedIndex?: number) {
+ const selected = this.results[selectedIndex ?? this.selectedIndex];
+ if (!selected) {
+ return;
+ }
- // no duplicates
- this.recentItems = this.recentItems.filter((item) => !isEqual(item, selected));
- this.recentItems.unshift(selected);
- this.recentItems = this.recentItems.slice(0, 5);
+ // no duplicates
+ this.recentItems = this.recentItems.filter((item) => !isEqual(item, selected));
+ this.recentItems.unshift(selected);
+ this.recentItems = this.recentItems.slice(0, 5);
- if ('href' in selected) {
- if (selected.href.startsWith('http') || selected.external) {
- window.open(selected.href, '_blank');
- } else {
- // eslint-disable-next-line svelte/no-navigation-without-resolve
- await goto(selected.href);
- }
- } else {
- await selected.action();
- }
+ if ('href' in selected) {
+ if (selected.href.startsWith('http') || selected.external) {
+ window.open(selected.href, '_blank');
+ } else {
+ // eslint-disable-next-line svelte/no-navigation-without-resolve
+ await goto(selected.href);
+ }
+ } else {
+ await selected.action();
+ }
- this.close();
- }
+ this.close();
+ }
- remove(index: number) {
- this.recentItems.splice(index, 1);
- }
+ remove(index: number) {
+ this.recentItems.splice(index, 1);
+ }
- up() {
- this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
- }
+ up() {
+ this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
+ }
- down() {
- this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
- }
+ down() {
+ this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
+ }
- reset() {
- this.items = [];
- this.isOpen = false;
- this.query = '';
- }
+ reset() {
+ this.items = [];
+ this.isOpen = false;
+ this.query = '';
+ }
- addCommands(itemOrItems: CommandItem | CommandItem[]) {
- const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
- this.items.push(...items);
- }
+ addCommands(itemOrItems: CommandItem | CommandItem[]) {
+ const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+ this.items.push(...items);
+ }
- removeCommands(itemOrItems: CommandItem | CommandItem[]) {
- const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
- for (const remoteItem of items) {
- this.items = this.items.filter((item) => !isEqual(item, remoteItem));
- }
- }
+ removeCommands(itemOrItems: CommandItem | CommandItem[]) {
+ const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+ for (const remoteItem of items) {
+ this.items = this.items.filter((item) => !isEqual(item, remoteItem));
+ }
+ }
}
export const commandPaletteManager = new CommandPaletteManager();
diff --git a/src/lib/services/modal-manager.svelte.ts b/src/lib/services/modal-manager.svelte.ts
index 19c94c6..959ba75 100644
--- a/src/lib/services/modal-manager.svelte.ts
+++ b/src/lib/services/modal-manager.svelte.ts
@@ -2,57 +2,53 @@ import { mount, unmount, type Component, type ComponentProps } from 'svelte';
import ConfirmModal from '$lib/components/ConfirmModal/ConfirmModal.svelte';
type OnCloseData = T extends { onClose: (data?: infer R) => void }
- ? R | undefined
- : T extends { onClose: (data: infer R) => void }
- ? R
- : never;
+ ? R | undefined
+ : T extends { onClose: (data: infer R) => void }
+ ? R
+ : never;
type ExtendsEmptyObject = keyof T extends never ? never : T;
type StripValueIfOptional = T extends undefined ? undefined : T;
// if the modal does not expect any props, makes the props param optional but also allows passing `{}` and `undefined`
-type OptionalParamIfEmpty =
- ExtendsEmptyObject extends never ? [] | [Record | undefined] : [T];
+type OptionalParamIfEmpty = ExtendsEmptyObject extends never ? [] | [Record | undefined] : [T];
class ModalManager {
- show(
- Component: Component,
- ...props: OptionalParamIfEmpty>
- ) {
- return this.open(Component, ...props).onClose;
- }
+ show(Component: Component, ...props: OptionalParamIfEmpty>) {
+ return this.open(Component, ...props).onClose;
+ }
- open>(
- Component: Component,
- ...props: OptionalParamIfEmpty>
- ) {
- let modal: object = {};
- let onClose: (...args: [StripValueIfOptional]) => Promise;
+ open>(
+ Component: Component,
+ ...props: OptionalParamIfEmpty>
+ ) {
+ let modal: object = {};
+ let onClose: (...args: [StripValueIfOptional]) => Promise;
- const deferred = new Promise>((resolve) => {
- onClose = async (...args: [StripValueIfOptional]) => {
- await unmount(modal);
- // make sure bits-ui clean up finishes before resolving
- setTimeout(() => resolve(args?.[0]), 10);
- };
+ const deferred = new Promise>((resolve) => {
+ onClose = async (...args: [StripValueIfOptional]) => {
+ await unmount(modal);
+ // make sure bits-ui clean up finishes before resolving
+ setTimeout(() => resolve(args?.[0]), 10);
+ };
- modal = mount(Component, {
- target: document.body,
- props: {
- ...((props?.[0] ?? {}) as T),
- onClose,
- },
- });
- });
+ modal = mount(Component, {
+ target: document.body,
+ props: {
+ ...((props?.[0] ?? {}) as T),
+ onClose,
+ },
+ });
+ });
- return {
- onClose: deferred,
- close: (...args: [StripValueIfOptional]) => onClose(args[0]),
- };
- }
+ return {
+ onClose: deferred,
+ close: (...args: [StripValueIfOptional]) => onClose(args[0]),
+ };
+ }
- showDialog(options: Omit, 'onClose'>) {
- return this.show(ConfirmModal, options);
- }
+ showDialog(options: Omit, 'onClose'>) {
+ return this.show(ConfirmModal, options);
+ }
}
export const modalManager = new ModalManager();
diff --git a/src/lib/services/preference.svelte.ts b/src/lib/services/preference.svelte.ts
index 6ae9883..0382058 100644
--- a/src/lib/services/preference.svelte.ts
+++ b/src/lib/services/preference.svelte.ts
@@ -3,49 +3,49 @@ import { browser } from '$app/environment';
const asKey = (key: string) => `immich-ui-${key}`;
const readPreference = (key: string, defaults: T) => {
- if (!browser || !window?.localStorage) {
- throw new Error('Local storage is not available');
- }
+ if (!browser || !window?.localStorage) {
+ throw new Error('Local storage is not available');
+ }
- const text = window.localStorage.getItem(asKey(key));
- const stored = text ? (JSON.parse(text) as T) : {};
+ const text = window.localStorage.getItem(asKey(key));
+ const stored = text ? (JSON.parse(text) as T) : {};
- return { ...defaults, ...stored };
+ return { ...defaults, ...stored };
};
const writePreference = (key: string, value: T) => {
- if (!browser || !window.localStorage) {
- throw new Error('Local storage is not available');
- }
- const text = JSON.stringify(value);
- window.localStorage.setItem(asKey(key), text);
+ if (!browser || !window.localStorage) {
+ throw new Error('Local storage is not available');
+ }
+ const text = JSON.stringify(value);
+ window.localStorage.setItem(asKey(key), text);
};
type PreferenceOptions = {
- key: string;
- defaults: T;
- onReadError?: (error: unknown) => void;
- onWriteError?: (error: unknown) => void;
+ key: string;
+ defaults: T;
+ onReadError?: (error: unknown) => void;
+ onWriteError?: (error: unknown) => void;
};
export const preference = (options: PreferenceOptions) => {
- const { key, defaults, onReadError, onWriteError } = options;
+ const { key, defaults, onReadError, onWriteError } = options;
- let initialValue = defaults;
- try {
- initialValue = readPreference(key, defaults);
- } catch (error) {
- onReadError?.(error);
- }
+ let initialValue = defaults;
+ try {
+ initialValue = readPreference(key, defaults);
+ } catch (error) {
+ onReadError?.(error);
+ }
- const state = $state(initialValue);
+ const state = $state(initialValue);
- const sync = () => {
- try {
- writePreference(key, state);
- } catch (error) {
- onWriteError?.(error);
- }
- };
+ const sync = () => {
+ try {
+ writePreference(key, state);
+ } catch (error) {
+ onWriteError?.(error);
+ }
+ };
- return { state, sync };
+ return { state, sync };
};
diff --git a/src/lib/services/theme.svelte.ts b/src/lib/services/theme.svelte.ts
index 1cc6e5a..46bea2b 100644
--- a/src/lib/services/theme.svelte.ts
+++ b/src/lib/services/theme.svelte.ts
@@ -3,93 +3,92 @@ import { preference } from '$lib/services/preference.svelte.js';
import { Theme } from '$lib/types.js';
export type ThemeOptions = {
- lightClass?: string;
- darkClass?: string;
- selector?: string;
+ lightClass?: string;
+ darkClass?: string;
+ selector?: string;
};
const defaultOptions: ThemeOptions = {
- darkClass: 'dark',
- selector: 'body',
+ darkClass: 'dark',
+ selector: 'body',
};
let options: ThemeOptions = defaultOptions;
-export const setThemeOptions = (newOptions: ThemeOptions) =>
- (options = { ...defaultOptions, ...newOptions });
+export const setThemeOptions = (newOptions: ThemeOptions) => (options = { ...defaultOptions, ...newOptions });
type ThemePreference = { value: Theme };
const defaultTheme: ThemePreference = { value: Theme.Dark };
const { state, sync: syncToLocalStorage } = preference({
- key: 'theme',
- defaults: defaultTheme,
- onReadError: (error) => console.log(`Preference read error: ${error}`),
- onWriteError: (error) => console.log(`Preference write error: ${error}`),
+ key: 'theme',
+ defaults: defaultTheme,
+ onReadError: (error) => console.log(`Preference read error: ${error}`),
+ onWriteError: (error) => console.log(`Preference write error: ${error}`),
});
export const theme = state;
export const onThemeChange = () => {
- syncToDom();
- syncToLocalStorage();
+ syncToDom();
+ syncToLocalStorage();
};
const syncToDom = () => {
- const { lightClass, darkClass, selector } = options;
- if (!browser || !selector) {
- return;
- }
+ const { lightClass, darkClass, selector } = options;
+ if (!browser || !selector) {
+ return;
+ }
- const element = document.querySelector(selector);
- if (!element) {
- return;
- }
+ const element = document.querySelector(selector);
+ if (!element) {
+ return;
+ }
- switch (theme.value) {
- case Theme.Dark: {
- if (lightClass) {
- element.classList.remove(lightClass);
- }
+ switch (theme.value) {
+ case Theme.Dark: {
+ if (lightClass) {
+ element.classList.remove(lightClass);
+ }
- if (darkClass) {
- element.classList.add(darkClass);
- }
+ if (darkClass) {
+ element.classList.add(darkClass);
+ }
- const darkReaderLock = document.createElement('meta');
- darkReaderLock.name = 'darkreader-lock';
- document.head.appendChild(darkReaderLock);
+ const darkReaderLock = document.createElement('meta');
+ darkReaderLock.name = 'darkreader-lock';
+ document.head.appendChild(darkReaderLock);
- break;
- }
+ break;
+ }
- case Theme.Light: {
- if (lightClass) {
- element.classList.add(lightClass);
- }
+ case Theme.Light: {
+ if (lightClass) {
+ element.classList.add(lightClass);
+ }
- if (darkClass) {
- element.classList.remove(darkClass);
- }
+ if (darkClass) {
+ element.classList.remove(darkClass);
+ }
- const darkReaderLock = document.querySelector('head > meta[name=darkreader-lock]');
- if (darkReaderLock) {
- document.head.removeChild(darkReaderLock);
- }
+ const darkReaderLock = document.querySelector('head > meta[name=darkreader-lock]');
+ if (darkReaderLock) {
+ document.head.removeChild(darkReaderLock);
+ }
- break;
- }
- }
+ break;
+ }
+ }
};
export const toggleTheme = () => {
- theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
- onThemeChange();
+ theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+ onThemeChange();
};
export const initializeTheme = (options?: ThemeOptions) => {
- if (options) {
- setThemeOptions(options);
- }
+ if (options) {
+ setThemeOptions(options);
+ }
- syncToDom();
+ syncToDom();
};
diff --git a/src/lib/services/translation.svelte.ts b/src/lib/services/translation.svelte.ts
index 42dc323..2c1ae24 100644
--- a/src/lib/services/translation.svelte.ts
+++ b/src/lib/services/translation.svelte.ts
@@ -1,37 +1,35 @@
import type { TranslationProps } from '$lib/types.js';
const defaultTranslations = {
- // common
- cancel: 'Cancel',
- close: 'Close',
- confirm: 'Confirm',
- search_placeholder: 'Search...',
- search_no_results: 'No results',
- search_recently_used: 'Recently used',
+ // common
+ cancel: 'Cancel',
+ close: 'Close',
+ confirm: 'Confirm',
+ search_placeholder: 'Search...',
+ search_no_results: 'No results',
+ search_recently_used: 'Recently used',
- // modal
- prompt_default: 'Are you sure you want to do this?',
+ // modal
+ prompt_default: 'Are you sure you want to do this?',
- // password input
- show_password: 'Show password',
- hide_password: 'Hide password',
+ // password input
+ show_password: 'Show password',
+ hide_password: 'Hide password',
- // theme switcher
- dark_theme: 'Toggle dark theme',
+ // theme switcher
+ dark_theme: 'Toggle dark theme',
- // command palette
- command_palette_prompt_default: 'Quickly find pages, actions, or commands',
+ // command palette
+ command_palette_prompt_default: 'Quickly find pages, actions, or commands',
};
export type Translations = typeof defaultTranslations;
let translations = $state(defaultTranslations);
-export const translate = (
- key: T,
- overrides?: TranslationProps,
-): string => overrides?.[key] ?? translations[key];
+export const translate = (key: T, overrides?: TranslationProps): string =>
+ overrides?.[key] ?? translations[key];
export const t = translate;
export const setTranslations = (newTranslations: Partial) => {
- translations = { ...defaultTranslations, ...newTranslations };
+ translations = { ...defaultTranslations, ...newTranslations };
};
diff --git a/src/lib/site/SiteFooter.svelte b/src/lib/site/SiteFooter.svelte
index 05e253e..9af38d7 100644
--- a/src/lib/site/SiteFooter.svelte
+++ b/src/lib/site/SiteFooter.svelte
@@ -1,84 +1,68 @@
- {text}
-
+
+ {text}
+
diff --git a/src/lib/site/constants.ts b/src/lib/site/constants.ts
index 188e8e7..b0fc370 100644
--- a/src/lib/site/constants.ts
+++ b/src/lib/site/constants.ts
@@ -2,122 +2,122 @@ import { asText } from '$lib/services/command-palette-manager.svelte.js';
import { mdiOpenInNew } from '@mdi/js';
export const Constants = {
- Socials: {
- Futo: 'https://futo.org/',
- Github: 'https://github.com/immich-app/immich',
- Discord: 'https://discord.immich.app/',
- Reddit: 'https://www.reddit.com/r/immich/',
- Weblate: 'https://hosted.weblate.org/projects/immich/immich/',
- },
- Get: {
- iOS: 'https://get.immich.app/ios',
- Android: 'https://get.immich.app/android',
- FDroid: 'https://get.immich.app/fdroid',
- GithubRelease: 'https://github.com/immich-app/immich/releases/latest',
- DockerCompose: 'https://get.immich.app/docker-compose',
- },
+ Socials: {
+ Futo: 'https://futo.org/',
+ Github: 'https://github.com/immich-app/immich',
+ Discord: 'https://discord.immich.app/',
+ Reddit: 'https://www.reddit.com/r/immich/',
+ Weblate: 'https://hosted.weblate.org/projects/immich/immich/',
+ },
+ Get: {
+ iOS: 'https://get.immich.app/ios',
+ Android: 'https://get.immich.app/android',
+ FDroid: 'https://get.immich.app/fdroid',
+ GithubRelease: 'https://github.com/immich-app/immich/releases/latest',
+ DockerCompose: 'https://get.immich.app/docker-compose',
+ },
- Sites: {
- Api: 'https://api.immich.app/',
- Demo: 'https://demo.immich.app/',
- My: 'https://my.immich.app/',
- Buy: 'https://buy.immich.app/',
- Get: 'https://get.immich.app/',
- Docs: 'https://docs.immich.app/',
- Store: 'https://immich.store/',
- },
- Pages: {
- CursedKnowledge: 'https://immich.app/cursed-knowledge',
- Roadmap: 'https://immich.app/roadmap',
- },
- Npm: {
- Sdk: 'https://www.npmjs.com/package/@immich/sdk',
- },
+ Sites: {
+ Api: 'https://api.immich.app/',
+ Demo: 'https://demo.immich.app/',
+ My: 'https://my.immich.app/',
+ Buy: 'https://buy.immich.app/',
+ Get: 'https://get.immich.app/',
+ Docs: 'https://docs.immich.app/',
+ Store: 'https://immich.store/',
+ },
+ Pages: {
+ CursedKnowledge: 'https://immich.app/cursed-knowledge',
+ Roadmap: 'https://immich.app/roadmap',
+ },
+ Npm: {
+ Sdk: 'https://www.npmjs.com/package/@immich/sdk',
+ },
};
export const siteCommands = [
- {
- title: 'Immich Documentation',
- description: 'View the Immich documentation',
- href: Constants.Sites.Docs,
- },
- {
- title: 'Buy Immich',
- description: 'Support Immich by buying a product key.',
- href: Constants.Sites.Buy,
- },
- {
- title: 'My Immich',
- description: 'Immich link proxy to redirect to your personal instance',
- href: Constants.Sites.My,
- },
- {
- title: 'Get Immich',
- description: 'View downloads links for Immich apps and server',
- href: Constants.Sites.Get,
- },
- {
- title: 'Immich on the PlayStore',
- description: 'View Immich on the Google Play Store',
- href: Constants.Get.Android,
- },
- {
- title: 'Immich on the iOS App Store',
- description: 'View Immich on the iOS App Store',
- href: Constants.Get.iOS,
- },
- {
- title: 'Immich Demo',
- description: 'Test out Immich with our public demo server',
- href: Constants.Sites.Demo,
- },
- {
- title: 'Immich Store',
- description: 'Support the project by purchasing Immich merchandise',
- href: Constants.Sites.Store,
- },
- {
- title: 'Cursed Knowledge',
- description: 'View our collection of cursed knowledge',
- href: Constants.Pages.CursedKnowledge,
- },
- {
- title: 'Roadmap',
- description: 'View our project roadmap',
- href: Constants.Pages.Roadmap,
- },
- {
- title: 'reddit',
- description: 'Join the Immich community on reddit',
- href: Constants.Socials.Reddit,
- },
- {
- title: 'GitHub',
- description: 'View our project on GitHub',
- href: Constants.Socials.Github,
- },
- {
- title: 'Discord',
- description: 'Join the conversation on Discord',
- href: Constants.Socials.Discord,
- },
- {
- title: 'Weblate',
- description: 'Support the project by translating Immich on Weblate',
- href: Constants.Socials.Weblate,
- },
- {
- title: 'FUTO',
- description: 'Learn more about FUTO, the company behind Immich',
- href: Constants.Sites.Docs,
- },
+ {
+ title: 'Immich Documentation',
+ description: 'View the Immich documentation',
+ href: Constants.Sites.Docs,
+ },
+ {
+ title: 'Buy Immich',
+ description: 'Support Immich by buying a product key.',
+ href: Constants.Sites.Buy,
+ },
+ {
+ title: 'My Immich',
+ description: 'Immich link proxy to redirect to your personal instance',
+ href: Constants.Sites.My,
+ },
+ {
+ title: 'Get Immich',
+ description: 'View downloads links for Immich apps and server',
+ href: Constants.Sites.Get,
+ },
+ {
+ title: 'Immich on the PlayStore',
+ description: 'View Immich on the Google Play Store',
+ href: Constants.Get.Android,
+ },
+ {
+ title: 'Immich on the iOS App Store',
+ description: 'View Immich on the iOS App Store',
+ href: Constants.Get.iOS,
+ },
+ {
+ title: 'Immich Demo',
+ description: 'Test out Immich with our public demo server',
+ href: Constants.Sites.Demo,
+ },
+ {
+ title: 'Immich Store',
+ description: 'Support the project by purchasing Immich merchandise',
+ href: Constants.Sites.Store,
+ },
+ {
+ title: 'Cursed Knowledge',
+ description: 'View our collection of cursed knowledge',
+ href: Constants.Pages.CursedKnowledge,
+ },
+ {
+ title: 'Roadmap',
+ description: 'View our project roadmap',
+ href: Constants.Pages.Roadmap,
+ },
+ {
+ title: 'reddit',
+ description: 'Join the Immich community on reddit',
+ href: Constants.Socials.Reddit,
+ },
+ {
+ title: 'GitHub',
+ description: 'View our project on GitHub',
+ href: Constants.Socials.Github,
+ },
+ {
+ title: 'Discord',
+ description: 'Join the conversation on Discord',
+ href: Constants.Socials.Discord,
+ },
+ {
+ title: 'Weblate',
+ description: 'Support the project by translating Immich on Weblate',
+ href: Constants.Socials.Weblate,
+ },
+ {
+ title: 'FUTO',
+ description: 'Learn more about FUTO, the company behind Immich',
+ href: Constants.Sites.Docs,
+ },
].map((site) => ({
- icon: mdiOpenInNew,
- type: 'Link',
- iconClass: 'text-indigo-700 dark:text-indigo-200',
- title: site.title,
- description: site.description,
- href: site.href,
- external: true,
- text: asText('Site', 'Link', site.title, site.description, site.href),
+ icon: mdiOpenInNew,
+ type: 'Link',
+ iconClass: 'text-indigo-700 dark:text-indigo-200',
+ title: site.title,
+ description: site.description,
+ href: site.href,
+ external: true,
+ text: asText('Site', 'Link', site.title, site.description, site.href),
}));
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index deef69d..214a706 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,25 +1,25 @@
import { tv } from 'tailwind-variants';
export const styles = {
- label: tv({
- base: '',
- variants: {
- size: {
- tiny: 'text-xs',
- small: 'text-sm',
- medium: 'text-base',
- large: 'text-lg',
- giant: 'text-xl',
- },
- color: {
- muted: 'text-gray-600 dark:text-gray-400',
- primary: 'text-primary',
- secondary: 'text-dark',
- success: 'text-success',
- danger: 'text-danger',
- warning: 'text-warning',
- info: 'text-info',
- },
- },
- }),
+ label: tv({
+ base: '',
+ variants: {
+ size: {
+ tiny: 'text-xs',
+ small: 'text-sm',
+ medium: 'text-base',
+ large: 'text-lg',
+ giant: 'text-xl',
+ },
+ color: {
+ muted: 'text-gray-600 dark:text-gray-400',
+ primary: 'text-primary',
+ secondary: 'text-dark',
+ success: 'text-success',
+ danger: 'text-danger',
+ warning: 'text-warning',
+ info: 'text-info',
+ },
+ },
+ }),
};
diff --git a/src/lib/theme/default.css b/src/lib/theme/default.css
index 2eb5871..11e5cc8 100644
--- a/src/lib/theme/default.css
+++ b/src/lib/theme/default.css
@@ -1,53 +1,53 @@
@import 'tailwindcss';
@theme inline {
- --color-primary: rgb(var(--immich-ui-primary));
- --color-light: rgb(var(--immich-ui-light));
- --color-dark: rgb(var(--immich-ui-dark));
- --color-success: rgb(var(--immich-ui-success));
- --color-danger: rgb(var(--immich-ui-danger));
- --color-warning: rgb(var(--immich-ui-warning));
- --color-info: rgb(var(--immich-ui-info));
- --color-subtle: rgb(var(--immich-ui-gray));
+ --color-primary: rgb(var(--immich-ui-primary));
+ --color-light: rgb(var(--immich-ui-light));
+ --color-dark: rgb(var(--immich-ui-dark));
+ --color-success: rgb(var(--immich-ui-success));
+ --color-danger: rgb(var(--immich-ui-danger));
+ --color-warning: rgb(var(--immich-ui-warning));
+ --color-info: rgb(var(--immich-ui-info));
+ --color-subtle: rgb(var(--immich-ui-gray));
}
@custom-variant dark (&:where(.dark, .dark *):not(.light));
@layer base {
- :root,
- .light {
- /* light */
- --immich-ui-primary: 66 80 175;
- --immich-ui-dark: 20 22 26;
- --immich-ui-light: 255 255 255;
- --immich-ui-success: 16 188 99;
- --immich-ui-danger: 200 60 60;
- --immich-ui-warning: 216 143 64;
- --immich-ui-info: 8 111 230;
- --immich-ui-gray: 246 246 246;
+ :root,
+ .light {
+ /* light */
+ --immich-ui-primary: 66 80 175;
+ --immich-ui-dark: 20 22 26;
+ --immich-ui-light: 255 255 255;
+ --immich-ui-success: 16 188 99;
+ --immich-ui-danger: 200 60 60;
+ --immich-ui-warning: 216 143 64;
+ --immich-ui-info: 8 111 230;
+ --immich-ui-gray: 246 246 246;
- --immich-ui-default-border: 209 213 219;
- }
+ --immich-ui-default-border: 209 213 219;
+ }
- .dark {
- /* dark */
- --immich-ui-primary: 172 203 250;
- --immich-ui-light: 0 0 0;
- --immich-ui-dark: 229 231 235;
- --immich-ui-success: 72 237 152;
- --immich-ui-danger: 246 125 125;
- --immich-ui-warning: 254 197 132;
- --immich-ui-info: 121 183 254;
- --immich-ui-gray: 33 33 33;
+ .dark {
+ /* dark */
+ --immich-ui-primary: 172 203 250;
+ --immich-ui-light: 0 0 0;
+ --immich-ui-dark: 229 231 235;
+ --immich-ui-success: 72 237 152;
+ --immich-ui-danger: 246 125 125;
+ --immich-ui-warning: 254 197 132;
+ --immich-ui-info: 121 183 254;
+ --immich-ui-gray: 33 33 33;
- --immich-ui-default-border: 33 33 33;
- }
+ --immich-ui-default-border: 33 33 33;
+ }
- *,
- ::after,
- ::before,
- ::backdrop,
- ::file-selector-button {
- border-color: rgb(var(--immich-ui-default-border));
- }
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: rgb(var(--immich-ui-default-border));
+ }
}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6b89962..b89d46a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,11 +1,11 @@
import type { Translations } from '$lib/services/translation.svelte.js';
import type { Snippet } from 'svelte';
import type {
- HTMLAnchorAttributes,
- HTMLButtonAttributes,
- HTMLInputAttributes,
- HTMLLabelAttributes,
- HTMLTextareaAttributes,
+ HTMLAnchorAttributes,
+ HTMLButtonAttributes,
+ HTMLInputAttributes,
+ HTMLLabelAttributes,
+ HTMLTextareaAttributes,
} from 'svelte/elements';
export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -23,8 +23,8 @@ export type Variants = 'filled' | 'outline' | 'ghost';
export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
export enum Theme {
- Light = 'light',
- Dark = 'dark',
+ Light = 'light',
+ Dark = 'dark',
}
export type TranslationProps = { [K in T]?: string };
@@ -32,145 +32,145 @@ export type TranslationProps = { [K in T]?: string
export type IconLike = string | { path: string };
export type IconProps = {
- icon: IconLike;
- title?: string;
- description?: string;
- size?: string;
- color?: Color | 'currentColor' | string;
- flipped?: boolean;
- flopped?: boolean;
- spin?: boolean;
- class?: string;
- viewBox?: string;
- strokeWidth?: number;
- strokeColor?: string;
+ icon: IconLike;
+ title?: string;
+ description?: string;
+ size?: string;
+ color?: Color | 'currentColor' | string;
+ flipped?: boolean;
+ flopped?: boolean;
+ spin?: boolean;
+ class?: string;
+ viewBox?: string;
+ strokeWidth?: number;
+ strokeColor?: string;
};
type ButtonOrAnchor =
- | ({ href?: never; external?: never } & HTMLButtonAttributes)
- | ({ href: string; external?: boolean } & HTMLAnchorAttributes);
+ | ({ href?: never; external?: never } & HTMLButtonAttributes)
+ | ({ href: string; external?: boolean } & HTMLAnchorAttributes);
type ButtonBase = {
- size?: Size;
- variant?: Variants;
- class?: string;
- color?: Color;
- shape?: Shape;
+ size?: Size;
+ variant?: Variants;
+ class?: string;
+ color?: Color;
+ shape?: Shape;
};
export type ButtonProps = ButtonBase & {
- ref?: HTMLElement | null;
- fullWidth?: boolean;
- loading?: boolean;
- leadingIcon?: IconLike;
- trailingIcon?: IconLike;
+ ref?: HTMLElement | null;
+ fullWidth?: boolean;
+ loading?: boolean;
+ leadingIcon?: IconLike;
+ trailingIcon?: IconLike;
} & ButtonOrAnchor;
export type CloseButtonProps = {
- size?: Size;
- variant?: Variants;
- class?: string;
- translations?: TranslationProps<'close'>;
+ size?: Size;
+ variant?: Variants;
+ class?: string;
+ translations?: TranslationProps<'close'>;
} & ButtonOrAnchor;
export type IconButtonProps = ButtonBase & {
- icon: string;
- flipped?: boolean;
- flopped?: boolean;
- 'aria-label': string;
+ icon: string;
+ flipped?: boolean;
+ flopped?: boolean;
+ 'aria-label': string;
} & ButtonOrAnchor;
type StackBaseProps = {
- class?: string;
- children: Snippet;
- gap?: Gap;
- wrap?: boolean;
- fullWidth?: boolean;
- fullHeight?: boolean;
+ class?: string;
+ children: Snippet;
+ gap?: Gap;
+ wrap?: boolean;
+ fullWidth?: boolean;
+ fullHeight?: boolean;
};
export type ChildData = {
- snippet: Snippet;
- class?: string;
+ snippet: Snippet;
+ class?: string;
};
export type StackProps = StackBaseProps & {
- align?: 'start' | 'center' | 'end';
- direction?: 'row' | 'column';
+ align?: 'start' | 'center' | 'end';
+ direction?: 'row' | 'column';
};
export type HStackProps = StackBaseProps;
export type VStackProps = StackBaseProps;
export type LabelProps = {
- label?: string;
- class?: string;
- size?: Size;
- color?: TextColor;
- children?: Snippet;
+ label?: string;
+ class?: string;
+ size?: Size;
+ color?: TextColor;
+ children?: Snippet;
} & HTMLLabelAttributes;
export type FieldContext = {
- label?: string;
- description?: string;
- invalid?: boolean;
- disabled?: boolean;
- required?: boolean;
- readOnly?: boolean;
+ label?: string;
+ description?: string;
+ invalid?: boolean;
+ disabled?: boolean;
+ required?: boolean;
+ readOnly?: boolean;
} & LabelProps;
type BaseInputProps = {
- ref?: HTMLInputElement | null;
- class?: string;
- value?: string;
- size?: Size;
- shape?: Shape;
- inputSize?: HTMLInputAttributes['size'];
+ ref?: HTMLInputElement | null;
+ class?: string;
+ value?: string;
+ size?: Size;
+ shape?: Shape;
+ inputSize?: HTMLInputAttributes['size'];
} & Omit;
export type InputProps = BaseInputProps & {
- containerRef?: HTMLElement | null;
- type?: HTMLInputAttributes['type'];
- leadingIcon?: IconLike | Snippet;
- trailingIcon?: IconLike | Snippet;
- trailingText?: string;
+ containerRef?: HTMLElement | null;
+ type?: HTMLInputAttributes['type'];
+ leadingIcon?: IconLike | Snippet;
+ trailingIcon?: IconLike | Snippet;
+ trailingText?: string;
};
export type PasswordInputProps = BaseInputProps & {
- ref?: HTMLInputElement | null;
- translations?: TranslationProps<'show_password' | 'hide_password'>;
- isVisible?: boolean;
+ ref?: HTMLInputElement | null;
+ translations?: TranslationProps<'show_password' | 'hide_password'>;
+ isVisible?: boolean;
};
export type TextareaProps = {
- ref?: HTMLTextAreaElement | null;
- containerRef?: HTMLElement | null;
- class?: string;
- value?: string;
- size?: Size;
- shape?: Shape;
- grow?: boolean;
+ ref?: HTMLTextAreaElement | null;
+ containerRef?: HTMLElement | null;
+ class?: string;
+ value?: string;
+ size?: Size;
+ shape?: Shape;
+ grow?: boolean;
} & HTMLTextareaAttributes;
export type SelectItem = {
- label?: string;
- value: string;
- disabled?: boolean;
+ label?: string;
+ value: string;
+ disabled?: boolean;
};
export type SelectCommonProps = {
- data: string[] | T[];
- size?: Size;
- shape?: Shape;
- placeholder?: string;
- class?: string;
+ data: string[] | T[];
+ size?: Size;
+ shape?: Shape;
+ placeholder?: string;
+ class?: string;
};
export type SelectProps = SelectCommonProps & {
- value?: T;
- onChange?: (value: T) => void;
+ value?: T;
+ onChange?: (value: T) => void;
};
export type MultiSelectProps = SelectCommonProps & {
- values?: T[];
- onChange?: (values: T[]) => void;
+ values?: T[];
+ onChange?: (values: T[]) => void;
};
diff --git a/src/lib/utilities/byte-units.ts b/src/lib/utilities/byte-units.ts
index 7aad849..dae4400 100644
--- a/src/lib/utilities/byte-units.ts
+++ b/src/lib/utilities/byte-units.ts
@@ -1,22 +1,14 @@
export const enum ByteUnit {
- 'B' = 'B',
- 'KiB' = 'KiB',
- 'MiB' = 'MiB',
- 'GiB' = 'GiB',
- 'TiB' = 'TiB',
- 'PiB' = 'PiB',
- 'EiB' = 'EiB',
+ 'B' = 'B',
+ 'KiB' = 'KiB',
+ 'MiB' = 'MiB',
+ 'GiB' = 'GiB',
+ 'TiB' = 'TiB',
+ 'PiB' = 'PiB',
+ 'EiB' = 'EiB',
}
-const byteUnits = [
- ByteUnit.B,
- ByteUnit.KiB,
- ByteUnit.MiB,
- ByteUnit.GiB,
- ByteUnit.TiB,
- ByteUnit.PiB,
- ByteUnit.EiB,
-];
+const byteUnits = [ByteUnit.B, ByteUnit.KiB, ByteUnit.MiB, ByteUnit.GiB, ByteUnit.TiB, ByteUnit.PiB, ByteUnit.EiB];
/**
* Convert bytes to best human readable unit and number of that unit.
@@ -29,12 +21,9 @@ const byteUnits = [
* @returns size (number) and unit (string)
*/
export function getBytesWithUnit(bytes: number, maxPrecision = 1): [number, ByteUnit] {
- const magnitude = Math.floor(Math.log(bytes === 0 ? 1 : bytes) / Math.log(1024));
+ const magnitude = Math.floor(Math.log(bytes === 0 ? 1 : bytes) / Math.log(1024));
- return [
- Number.parseFloat((bytes / 1024 ** magnitude).toFixed(maxPrecision)),
- byteUnits[magnitude],
- ];
+ return [Number.parseFloat((bytes / 1024 ** magnitude).toFixed(maxPrecision)), byteUnits[magnitude]];
}
/**
@@ -49,8 +38,8 @@ export function getBytesWithUnit(bytes: number, maxPrecision = 1): [number, Byte
* @returns localized bytes with unit as string
*/
export function getByteUnitString(bytes: number, locale?: string, maxPrecision = 1): string {
- const [size, unit] = getBytesWithUnit(bytes, maxPrecision);
- return `${size.toLocaleString(locale)} ${unit}`;
+ const [size, unit] = getBytesWithUnit(bytes, maxPrecision);
+ return `${size.toLocaleString(locale)} ${unit}`;
}
/**
@@ -63,7 +52,7 @@ export function getByteUnitString(bytes: number, locale?: string, maxPrecision =
* @returns bytes (number)
*/
export function convertToBytes(size: number, unit: ByteUnit): number {
- return size * 1024 ** byteUnits.indexOf(unit);
+ return size * 1024 ** byteUnits.indexOf(unit);
}
/**
@@ -76,5 +65,5 @@ export function convertToBytes(size: number, unit: ByteUnit): number {
* @returns bytes (number)
*/
export function convertFromBytes(bytes: number, unit: ByteUnit): number {
- return bytes / 1024 ** byteUnits.indexOf(unit);
+ return bytes / 1024 ** byteUnits.indexOf(unit);
}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 1f7b6aa..ccd0d41 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,17 +2,17 @@ import type { IconLike } from '$lib/types.js';
import { twMerge } from 'tailwind-merge';
export const cleanClass = (...classNames: unknown[]) => {
- return twMerge(
- classNames
- .filter((className) => {
- if (!className || typeof className === 'boolean') {
- return false;
- }
+ return twMerge(
+ classNames
+ .filter((className) => {
+ if (!className || typeof className === 'boolean') {
+ return false;
+ }
- return typeof className === 'string';
- })
- .join(' '),
- );
+ return typeof className === 'string';
+ })
+ .join(' '),
+ );
};
export const withPrefix = (key: string) => `immich-ui-${key}`;
@@ -21,5 +21,5 @@ let _count = 0;
export const generateId = (): string => `ui-id-${_count++}`;
export const isIconLike = (icon: unknown): icon is IconLike => {
- return typeof icon === 'string' || !!(icon && typeof icon === 'object' && 'path' in icon);
+ return typeof icon === 'string' || !!(icon && typeof icon === 'object' && 'path' in icon);
};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index df616c4..5784ddb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,145 +1,137 @@
-
- (open = !open)}>
- {#if commandPaletteManager.isEnabled}
- commandPaletteManager.open()}
- />
- {/if}
-
-
+
+ (open = !open)}>
+ {#if commandPaletteManager.isEnabled}
+ commandPaletteManager.open()}
+ />
+ {/if}
+
+
-
-
+
+
-
-
+
+
-
-
- @immich/ui
-
- @immich/ui is a collection of Svelte components that are
- shared across all Immich projects. It is designed to be a simple and easy-to-use library that provides
- a consistent look and feel.
-
+
+ @immich/ui
+
+ @immich/ui is a collection of Svelte components that are shared across all Immich
+ projects. It is designed to be a simple and easy-to-use library that provides a consistent look and feel.
+
- Install
- @immich/ui is published as an npm package. You can install it using npm.
- Install
+ @immich/ui is published as an npm package. You can install it using npm.
+ Components
-
- {#each componentGroups as group (group.title)}
-
- {group.title}
-
- {#each group.components as component (component.name)}
-
-
- {/each}
-
-
+ Components
+
+ {#each componentGroups as group (group.title)}
+
+ {group.title}
+
+ {#each group.components as component (component.name)}
+
+
+ {/each}
+
+
diff --git a/src/routes/components/alert/+page.svelte b/src/routes/components/alert/+page.svelte
index 68f72ba..a0f0d07 100644
--- a/src/routes/components/alert/+page.svelte
+++ b/src/routes/components/alert/+page.svelte
@@ -1,23 +1,23 @@
-
diff --git a/src/routes/components/alert/BasicExample.svelte b/src/routes/components/alert/BasicExample.svelte
index e3ad2c6..11969dd 100644
--- a/src/routes/components/alert/BasicExample.svelte
+++ b/src/routes/components/alert/BasicExample.svelte
@@ -1,14 +1,14 @@
-
-
-
-
+
+
+
+
diff --git a/src/routes/components/alert/ColorExample.svelte b/src/routes/components/alert/ColorExample.svelte
index d09e866..f19da9d 100644
--- a/src/routes/components/alert/ColorExample.svelte
+++ b/src/routes/components/alert/ColorExample.svelte
@@ -1,20 +1,20 @@
-
- {#each colors as color (color)}
-
-
-
-
- {/each}
-
+
+ {#each colors as color (color)}
+
+
+
+
+ {/each}
+
diff --git a/src/routes/components/alert/CustomIconExample.svelte b/src/routes/components/alert/CustomIconExample.svelte
index df7a6e2..4af0566 100644
--- a/src/routes/components/alert/CustomIconExample.svelte
+++ b/src/routes/components/alert/CustomIconExample.svelte
@@ -1,20 +1,20 @@
-
-
+
+
-
-
+
+
-
-
+
+
diff --git a/src/routes/components/alert/EventExample.svelte b/src/routes/components/alert/EventExample.svelte
index 81255ca..8e69372 100644
--- a/src/routes/components/alert/EventExample.svelte
+++ b/src/routes/components/alert/EventExample.svelte
@@ -1,27 +1,27 @@
- {#key count}
-
diff --git a/src/routes/components/app-shell/+page.svelte b/src/routes/components/app-shell/+page.svelte
index ec16115..bbfa6d1 100644
--- a/src/routes/components/app-shell/+page.svelte
+++ b/src/routes/components/app-shell/+page.svelte
@@ -1,15 +1,15 @@
- The AppShell component is a layout component that provides the basic skeleton for an
- application, including a header, sidebar and scrollable content view
- The AppShell component is a layout component that provides the basic skeleton for an application, including a
+ header, sidebar and scrollable content view
+
diff --git a/src/routes/components/app-shell/BasicExample.svelte b/src/routes/components/app-shell/BasicExample.svelte
index 9191167..b6d489d 100644
--- a/src/routes/components/app-shell/BasicExample.svelte
+++ b/src/routes/components/app-shell/BasicExample.svelte
@@ -1,73 +1,66 @@
-
diff --git a/src/routes/components/avatar/+page.svelte b/src/routes/components/avatar/+page.svelte
index 3a6d91a..cdba7e9 100644
--- a/src/routes/components/avatar/+page.svelte
+++ b/src/routes/components/avatar/+page.svelte
@@ -1,20 +1,20 @@
-
diff --git a/src/routes/components/avatar/BasicExample.svelte b/src/routes/components/avatar/BasicExample.svelte
index a38e656..dca020c 100644
--- a/src/routes/components/avatar/BasicExample.svelte
+++ b/src/routes/components/avatar/BasicExample.svelte
@@ -1,7 +1,7 @@
-
diff --git a/src/routes/components/avatar/ColorExample.svelte b/src/routes/components/avatar/ColorExample.svelte
index fc0e33b..567559d 100644
--- a/src/routes/components/avatar/ColorExample.svelte
+++ b/src/routes/components/avatar/ColorExample.svelte
@@ -1,16 +1,16 @@
-
diff --git a/src/routes/components/avatar/SizeExample.svelte b/src/routes/components/avatar/SizeExample.svelte
index 5c24526..5c4bbd9 100644
--- a/src/routes/components/avatar/SizeExample.svelte
+++ b/src/routes/components/avatar/SizeExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/button/+page.svelte b/src/routes/components/button/+page.svelte
index 27c8f04..d79f2d7 100644
--- a/src/routes/components/button/+page.svelte
+++ b/src/routes/components/button/+page.svelte
@@ -1,65 +1,63 @@
- A button component, which can also be used to render links
- A button component, which can also be used to render links
+
diff --git a/src/routes/components/button/AlwaysDarkExample.svelte b/src/routes/components/button/AlwaysDarkExample.svelte
index 829b66c..cf94fed 100644
--- a/src/routes/components/button/AlwaysDarkExample.svelte
+++ b/src/routes/components/button/AlwaysDarkExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/AlwaysLightExample.svelte b/src/routes/components/button/AlwaysLightExample.svelte
index 3fd70b0..2241180 100644
--- a/src/routes/components/button/AlwaysLightExample.svelte
+++ b/src/routes/components/button/AlwaysLightExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/BasicExample.svelte b/src/routes/components/button/BasicExample.svelte
index 43b12ea..6742ad3 100644
--- a/src/routes/components/button/BasicExample.svelte
+++ b/src/routes/components/button/BasicExample.svelte
@@ -1,7 +1,7 @@
-
+
diff --git a/src/routes/components/button/ColorExample.svelte b/src/routes/components/button/ColorExample.svelte
index 4824387..3a86779 100644
--- a/src/routes/components/button/ColorExample.svelte
+++ b/src/routes/components/button/ColorExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/DisabledExample.svelte b/src/routes/components/button/DisabledExample.svelte
index 8271189..fa8b2f7 100644
--- a/src/routes/components/button/DisabledExample.svelte
+++ b/src/routes/components/button/DisabledExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/FullWidthExample.svelte b/src/routes/components/button/FullWidthExample.svelte
index 16f1c6b..301cc70 100644
--- a/src/routes/components/button/FullWidthExample.svelte
+++ b/src/routes/components/button/FullWidthExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/GhostExample.svelte b/src/routes/components/button/GhostExample.svelte
index 0f799c2..1bd1b53 100644
--- a/src/routes/components/button/GhostExample.svelte
+++ b/src/routes/components/button/GhostExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/IconExample.svelte b/src/routes/components/button/IconExample.svelte
index 522372c..b199a1a 100644
--- a/src/routes/components/button/IconExample.svelte
+++ b/src/routes/components/button/IconExample.svelte
@@ -1,10 +1,10 @@
-
-
-
+
+
+
diff --git a/src/routes/components/button/LinkExample.svelte b/src/routes/components/button/LinkExample.svelte
index 77f30d8..e06ac30 100644
--- a/src/routes/components/button/LinkExample.svelte
+++ b/src/routes/components/button/LinkExample.svelte
@@ -1,8 +1,8 @@
-
-
+
+
diff --git a/src/routes/components/button/LoadingExample.svelte b/src/routes/components/button/LoadingExample.svelte
index 32b5c93..c70901b 100644
--- a/src/routes/components/button/LoadingExample.svelte
+++ b/src/routes/components/button/LoadingExample.svelte
@@ -1,30 +1,30 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/components/button/OutlineExample.svelte b/src/routes/components/button/OutlineExample.svelte
index 25006d1..6e6e02b 100644
--- a/src/routes/components/button/OutlineExample.svelte
+++ b/src/routes/components/button/OutlineExample.svelte
@@ -1,12 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/button/ShapeExample.svelte b/src/routes/components/button/ShapeExample.svelte
index 24d4a2f..ff03277 100644
--- a/src/routes/components/button/ShapeExample.svelte
+++ b/src/routes/components/button/ShapeExample.svelte
@@ -1,9 +1,9 @@
-
-
-
+
+
+
diff --git a/src/routes/components/button/SizeExample.svelte b/src/routes/components/button/SizeExample.svelte
index 9d621c3..1587faf 100644
--- a/src/routes/components/button/SizeExample.svelte
+++ b/src/routes/components/button/SizeExample.svelte
@@ -1,45 +1,45 @@
-
-
diff --git a/src/routes/components/card/+page.svelte b/src/routes/components/card/+page.svelte
index 5c134a0..0e579d2 100644
--- a/src/routes/components/card/+page.svelte
+++ b/src/routes/components/card/+page.svelte
@@ -1,20 +1,20 @@
-
diff --git a/src/routes/components/card/BasicExample.svelte b/src/routes/components/card/BasicExample.svelte
index 98f3a50..c2d9a38 100644
--- a/src/routes/components/card/BasicExample.svelte
+++ b/src/routes/components/card/BasicExample.svelte
@@ -1,43 +1,35 @@
-
-
- Card
-
-
-
-
+
+
+ Card
+
+
+
+
-
-
- Card with footer
-
-
-
- Footer goes here
-
+
+
+ Card with footer
+
+
+
+ Footer goes here
+
-
-
- Card with description
- This is the description
-
-
-
-
+
+
+ Card with description
+ This is the description
+
+
+
+
diff --git a/src/routes/components/card/ExpandableExample.svelte b/src/routes/components/card/ExpandableExample.svelte
index c33324a..0d4b076 100644
--- a/src/routes/components/card/ExpandableExample.svelte
+++ b/src/routes/components/card/ExpandableExample.svelte
@@ -1,24 +1,24 @@
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
diff --git a/src/routes/components/card/SubtleExample.svelte b/src/routes/components/card/SubtleExample.svelte
index 0cfe088..946e5e4 100644
--- a/src/routes/components/card/SubtleExample.svelte
+++ b/src/routes/components/card/SubtleExample.svelte
@@ -1,60 +1,60 @@
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
-
-
- Title
-
-
-
-
+
+
+ Title
+
+
+
+
diff --git a/src/routes/components/checkbox/+page.svelte b/src/routes/components/checkbox/+page.svelte
index 7bc2857..3114e44 100644
--- a/src/routes/components/checkbox/+page.svelte
+++ b/src/routes/components/checkbox/+page.svelte
@@ -1,23 +1,23 @@
-
diff --git a/src/routes/components/checkbox/BasicExample.svelte b/src/routes/components/checkbox/BasicExample.svelte
index 433cce6..f48c150 100644
--- a/src/routes/components/checkbox/BasicExample.svelte
+++ b/src/routes/components/checkbox/BasicExample.svelte
@@ -1,21 +1,21 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
diff --git a/src/routes/components/checkbox/ColorExample.svelte b/src/routes/components/checkbox/ColorExample.svelte
index 3ea686c..c291d70 100644
--- a/src/routes/components/checkbox/ColorExample.svelte
+++ b/src/routes/components/checkbox/ColorExample.svelte
@@ -1,41 +1,41 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
diff --git a/src/routes/components/checkbox/ShapeExample.svelte b/src/routes/components/checkbox/ShapeExample.svelte
index f072e5e..2389edb 100644
--- a/src/routes/components/checkbox/ShapeExample.svelte
+++ b/src/routes/components/checkbox/ShapeExample.svelte
@@ -1,26 +1,26 @@
- Semi-Round
-
-
+ Semi-Round
+
+
- Round
-
-
+ Round
+
+
- Rectangle
-
-
+ Rectangle
+
+
diff --git a/src/routes/components/checkbox/SizeExample.svelte b/src/routes/components/checkbox/SizeExample.svelte
index ebef0a8..915a0ec 100644
--- a/src/routes/components/checkbox/SizeExample.svelte
+++ b/src/routes/components/checkbox/SizeExample.svelte
@@ -1,35 +1,35 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
diff --git a/src/routes/components/close-button/+page.svelte b/src/routes/components/close-button/+page.svelte
index 6b06f05..7484609 100644
--- a/src/routes/components/close-button/+page.svelte
+++ b/src/routes/components/close-button/+page.svelte
@@ -1,23 +1,23 @@
-
diff --git a/src/routes/components/close-button/BasicExample.svelte b/src/routes/components/close-button/BasicExample.svelte
index 61e7032..056b978 100644
--- a/src/routes/components/close-button/BasicExample.svelte
+++ b/src/routes/components/close-button/BasicExample.svelte
@@ -1,12 +1,12 @@
{#if isOpen}
-
-
diff --git a/src/routes/components/code/ColorExample.svelte b/src/routes/components/code/ColorExample.svelte
index 01d6cf6..317df77 100644
--- a/src/routes/components/code/ColorExample.svelte
+++ b/src/routes/components/code/ColorExample.svelte
@@ -1,13 +1,13 @@
-
diff --git a/src/routes/components/code/FilledExample.svelte b/src/routes/components/code/FilledExample.svelte
index 7c9fb16..fd906e5 100644
--- a/src/routes/components/code/FilledExample.svelte
+++ b/src/routes/components/code/FilledExample.svelte
@@ -1,13 +1,13 @@
-
diff --git a/src/routes/components/code/SizeExample.svelte b/src/routes/components/code/SizeExample.svelte
index 638c237..0ca20ec 100644
--- a/src/routes/components/code/SizeExample.svelte
+++ b/src/routes/components/code/SizeExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/command-palette/+page.svelte b/src/routes/components/command-palette/+page.svelte
index f6205ce..e8ff1ab 100644
--- a/src/routes/components/command-palette/+page.svelte
+++ b/src/routes/components/command-palette/+page.svelte
@@ -1,16 +1,14 @@
- A command menu that can be used to search, filter, and select items.
- A command menu that can be used to search, filter, and select items.
+
diff --git a/src/routes/components/command-palette/BasicExample.svelte b/src/routes/components/command-palette/BasicExample.svelte
index 4253d8c..f20bd37 100644
--- a/src/routes/components/command-palette/BasicExample.svelte
+++ b/src/routes/components/command-palette/BasicExample.svelte
@@ -1,15 +1,15 @@
-
-
-
-
+
+
+
+
diff --git a/src/routes/components/confirm-modal/+page.svelte b/src/routes/components/confirm-modal/+page.svelte
index 604490e..c991c17 100644
--- a/src/routes/components/confirm-modal/+page.svelte
+++ b/src/routes/components/confirm-modal/+page.svelte
@@ -1,18 +1,18 @@
-
-
- See Modal for more complex modals
-
-
-
+
+ See Modal for more complex modals
+
+
+
diff --git a/src/routes/components/confirm-modal/BasicExample.svelte b/src/routes/components/confirm-modal/BasicExample.svelte
index 3758ed7..3052e19 100644
--- a/src/routes/components/confirm-modal/BasicExample.svelte
+++ b/src/routes/components/confirm-modal/BasicExample.svelte
@@ -1,20 +1,20 @@
{#if isOpen}
- {
- isOpen = false;
- }}
- >
- {#snippet promptSnippet()}
- Support Immich!
- {/snippet}
-
+ {
+ isOpen = false;
+ }}
+ >
+ {#snippet promptSnippet()}
+ Support Immich!
+ {/snippet}
+
{/if}
diff --git a/src/routes/components/container/+page.svelte b/src/routes/components/container/+page.svelte
index a5ce9fa..df209f2 100644
--- a/src/routes/components/container/+page.svelte
+++ b/src/routes/components/container/+page.svelte
@@ -1,17 +1,17 @@
-
diff --git a/src/routes/components/container/BasicExample.svelte b/src/routes/components/container/BasicExample.svelte
index 06cf8da..10cc540 100644
--- a/src/routes/components/container/BasicExample.svelte
+++ b/src/routes/components/container/BasicExample.svelte
@@ -1,11 +1,11 @@
- Container
- Container
- Container
- Container
- Container
+ Container
+ Container
+ Container
+ Container
+ Container
diff --git a/src/routes/components/container/CenterExample.svelte b/src/routes/components/container/CenterExample.svelte
index 8ba9e43..769c0c6 100644
--- a/src/routes/components/container/CenterExample.svelte
+++ b/src/routes/components/container/CenterExample.svelte
@@ -1,11 +1,11 @@
- Container
- Container
- Container
- Container
- Container
+ Container
+ Container
+ Container
+ Container
+ Container
diff --git a/src/routes/components/field/+page.svelte b/src/routes/components/field/+page.svelte
index eb99f8e..8ccd3a9 100644
--- a/src/routes/components/field/+page.svelte
+++ b/src/routes/components/field/+page.svelte
@@ -1,21 +1,19 @@
- A metadata component for tracking common form field information
- A metadata component for tracking common form field information
+
diff --git a/src/routes/components/field/BasicExample.svelte b/src/routes/components/field/BasicExample.svelte
index 290c72e..11ae8cd 100644
--- a/src/routes/components/field/BasicExample.svelte
+++ b/src/routes/components/field/BasicExample.svelte
@@ -1,7 +1,7 @@
-
+
diff --git a/src/routes/components/field/ColorExample.svelte b/src/routes/components/field/ColorExample.svelte
index c376470..0db574a 100644
--- a/src/routes/components/field/ColorExample.svelte
+++ b/src/routes/components/field/ColorExample.svelte
@@ -1,27 +1,27 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/components/format-bytes/+page.svelte b/src/routes/components/format-bytes/+page.svelte
index 99beedd..26b844a 100644
--- a/src/routes/components/format-bytes/+page.svelte
+++ b/src/routes/components/format-bytes/+page.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/format-bytes/BasicExample.svelte b/src/routes/components/format-bytes/BasicExample.svelte
index ee1f732..2700f31 100644
--- a/src/routes/components/format-bytes/BasicExample.svelte
+++ b/src/routes/components/format-bytes/BasicExample.svelte
@@ -1,12 +1,12 @@
-
diff --git a/src/routes/components/heading/+page.svelte b/src/routes/components/heading/+page.svelte
index f28ad1c..ed87439 100644
--- a/src/routes/components/heading/+page.svelte
+++ b/src/routes/components/heading/+page.svelte
@@ -1,20 +1,20 @@
-
diff --git a/src/routes/components/heading/ColorExample.svelte b/src/routes/components/heading/ColorExample.svelte
index 1206a2a..6bbb5bc 100644
--- a/src/routes/components/heading/ColorExample.svelte
+++ b/src/routes/components/heading/ColorExample.svelte
@@ -1,13 +1,13 @@
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
diff --git a/src/routes/components/heading/FontWeightExample.svelte b/src/routes/components/heading/FontWeightExample.svelte
index 427b8b0..7e735d5 100644
--- a/src/routes/components/heading/FontWeightExample.svelte
+++ b/src/routes/components/heading/FontWeightExample.svelte
@@ -1,11 +1,11 @@
- Heading (light)
- Heading (normal)
- Heading (semi-bold)
- Heading (bold)
- Heading (extra-bold)
+ Heading (light)
+ Heading (normal)
+ Heading (semi-bold)
+ Heading (bold)
+ Heading (extra-bold)
diff --git a/src/routes/components/heading/SizeExample.svelte b/src/routes/components/heading/SizeExample.svelte
index 873dd2e..783d649 100644
--- a/src/routes/components/heading/SizeExample.svelte
+++ b/src/routes/components/heading/SizeExample.svelte
@@ -1,12 +1,12 @@
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
diff --git a/src/routes/components/helper-text/+page.svelte b/src/routes/components/helper-text/+page.svelte
index 398377e..fd413ce 100644
--- a/src/routes/components/helper-text/+page.svelte
+++ b/src/routes/components/helper-text/+page.svelte
@@ -1,14 +1,14 @@
- A text note that is show below the form field
- A text note that is show below the form field
+
diff --git a/src/routes/components/helper-text/BasicExample.svelte b/src/routes/components/helper-text/BasicExample.svelte
index 6eeb55f..5a8dc57 100644
--- a/src/routes/components/helper-text/BasicExample.svelte
+++ b/src/routes/components/helper-text/BasicExample.svelte
@@ -1,8 +1,8 @@
-
- Note: we never sell your data
+
+ Note: we never sell your data
diff --git a/src/routes/components/icon-button/+page.svelte b/src/routes/components/icon-button/+page.svelte
index 05c2f1f..32a2912 100644
--- a/src/routes/components/icon-button/+page.svelte
+++ b/src/routes/components/icon-button/+page.svelte
@@ -1,38 +1,38 @@
- An icon-only version of the Button component
- An icon-only version of the Button component
+
diff --git a/src/routes/components/icon-button/BasicExample.svelte b/src/routes/components/icon-button/BasicExample.svelte
index ad7a856..2dbd866 100644
--- a/src/routes/components/icon-button/BasicExample.svelte
+++ b/src/routes/components/icon-button/BasicExample.svelte
@@ -1,8 +1,8 @@
-
diff --git a/src/routes/components/icon-button/ColorExample.svelte b/src/routes/components/icon-button/ColorExample.svelte
index 1368aa4..af2b38c 100644
--- a/src/routes/components/icon-button/ColorExample.svelte
+++ b/src/routes/components/icon-button/ColorExample.svelte
@@ -1,15 +1,15 @@
-
diff --git a/src/routes/components/icon-button/DisabledExample.svelte b/src/routes/components/icon-button/DisabledExample.svelte
index b578ced..1fa16d5 100644
--- a/src/routes/components/icon-button/DisabledExample.svelte
+++ b/src/routes/components/icon-button/DisabledExample.svelte
@@ -1,15 +1,15 @@
-
diff --git a/src/routes/components/icon-button/GhostExample.svelte b/src/routes/components/icon-button/GhostExample.svelte
index fd8c834..d309245 100644
--- a/src/routes/components/icon-button/GhostExample.svelte
+++ b/src/routes/components/icon-button/GhostExample.svelte
@@ -1,15 +1,15 @@
-
diff --git a/src/routes/components/icon-button/LoadingExample.svelte b/src/routes/components/icon-button/LoadingExample.svelte
index 32b5c93..c70901b 100644
--- a/src/routes/components/icon-button/LoadingExample.svelte
+++ b/src/routes/components/icon-button/LoadingExample.svelte
@@ -1,30 +1,30 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/components/icon-button/OutlineExample.svelte b/src/routes/components/icon-button/OutlineExample.svelte
index f2d3fb8..7109790 100644
--- a/src/routes/components/icon-button/OutlineExample.svelte
+++ b/src/routes/components/icon-button/OutlineExample.svelte
@@ -1,15 +1,15 @@
-
diff --git a/src/routes/components/icon-button/ShapeExample.svelte b/src/routes/components/icon-button/ShapeExample.svelte
index 58a8b9c..31079b0 100644
--- a/src/routes/components/icon-button/ShapeExample.svelte
+++ b/src/routes/components/icon-button/ShapeExample.svelte
@@ -1,12 +1,12 @@
-
diff --git a/src/routes/components/icon-button/SizeExample.svelte b/src/routes/components/icon-button/SizeExample.svelte
index c674139..4860a71 100644
--- a/src/routes/components/icon-button/SizeExample.svelte
+++ b/src/routes/components/icon-button/SizeExample.svelte
@@ -1,65 +1,65 @@
-
- Semi-Round
-
+
+ Semi-Round
+
-
- Round
-
+
+ Round
+
-
- Rectangle
-
+
+ Rectangle
+
diff --git a/src/routes/components/input/+page.svelte b/src/routes/components/input/+page.svelte
index c2cecd5..24a0ef5 100644
--- a/src/routes/components/input/+page.svelte
+++ b/src/routes/components/input/+page.svelte
@@ -1,39 +1,36 @@
- Accept text input from the user
-
- See PasswordInput for password input fields
- fields
-
- Accept text input from the user
+
+ See PasswordInput for password input fields fields
+
+
diff --git a/src/routes/components/input/BasicExample.svelte b/src/routes/components/input/BasicExample.svelte
index 4393819..577ff8c 100644
--- a/src/routes/components/input/BasicExample.svelte
+++ b/src/routes/components/input/BasicExample.svelte
@@ -1,29 +1,29 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Note: this is helper text
-
-
-
- Must be valid
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Note: this is helper text
+
+
+
+ Must be valid
+
diff --git a/src/routes/components/input/IconExample.svelte b/src/routes/components/input/IconExample.svelte
index f7a11b5..df6db61 100644
--- a/src/routes/components/input/IconExample.svelte
+++ b/src/routes/components/input/IconExample.svelte
@@ -1,32 +1,19 @@
-
-
- {#snippet trailingIcon()}
-
diff --git a/src/routes/components/input/ShapeExample.svelte b/src/routes/components/input/ShapeExample.svelte
index 4878ce9..131fe80 100644
--- a/src/routes/components/input/ShapeExample.svelte
+++ b/src/routes/components/input/ShapeExample.svelte
@@ -1,9 +1,9 @@
-
-
-
+
+
+
diff --git a/src/routes/components/input/SizeExample.svelte b/src/routes/components/input/SizeExample.svelte
index bcff6a0..469b399 100644
--- a/src/routes/components/input/SizeExample.svelte
+++ b/src/routes/components/input/SizeExample.svelte
@@ -1,11 +1,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/routes/components/input/TrailingTextExample.svelte b/src/routes/components/input/TrailingTextExample.svelte
index 9b3bda9..ac538c6 100644
--- a/src/routes/components/input/TrailingTextExample.svelte
+++ b/src/routes/components/input/TrailingTextExample.svelte
@@ -1,20 +1,14 @@
-
-
-
- {#snippet trailingIcon()}
-
diff --git a/src/routes/components/kbd/+page.svelte b/src/routes/components/kbd/+page.svelte
index 20d8e30..1e97a46 100644
--- a/src/routes/components/kbd/+page.svelte
+++ b/src/routes/components/kbd/+page.svelte
@@ -1,17 +1,17 @@
-
diff --git a/src/routes/components/kbd/BasicExample.svelte b/src/routes/components/kbd/BasicExample.svelte
index a812a80..018adfe 100644
--- a/src/routes/components/kbd/BasicExample.svelte
+++ b/src/routes/components/kbd/BasicExample.svelte
@@ -1,9 +1,9 @@
- F12
- SHIFT+TAB
- Press CTRL+c to copy highlighted text. it.
+ F12
+ SHIFT+TAB
+ Press CTRL+c to copy highlighted text. it.
diff --git a/src/routes/components/kbd/SizeExample.svelte b/src/routes/components/kbd/SizeExample.svelte
index 2367458..9395b48 100644
--- a/src/routes/components/kbd/SizeExample.svelte
+++ b/src/routes/components/kbd/SizeExample.svelte
@@ -1,11 +1,11 @@
- SHIFT+TAB
- SHIFT+TAB
- SHIFT+TAB
- SHIFT+TAB
- SHIFT+TAB
+ SHIFT+TAB
+ SHIFT+TAB
+ SHIFT+TAB
+ SHIFT+TAB
+ SHIFT+TAB
diff --git a/src/routes/components/link/+page.svelte b/src/routes/components/link/+page.svelte
index 19f04d1..7d6454d 100644
--- a/src/routes/components/link/+page.svelte
+++ b/src/routes/components/link/+page.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/link/BasicExample.svelte b/src/routes/components/link/BasicExample.svelte
index 13fe919..43c532f 100644
--- a/src/routes/components/link/BasicExample.svelte
+++ b/src/routes/components/link/BasicExample.svelte
@@ -1,5 +1,5 @@
Visit Immich UI
diff --git a/src/routes/components/loading-spinner/+page.svelte b/src/routes/components/loading-spinner/+page.svelte
index 4fdca02..1056e09 100644
--- a/src/routes/components/loading-spinner/+page.svelte
+++ b/src/routes/components/loading-spinner/+page.svelte
@@ -1,17 +1,17 @@
-
diff --git a/src/routes/components/loading-spinner/ColorExample.svelte b/src/routes/components/loading-spinner/ColorExample.svelte
index a7789a5..338e380 100644
--- a/src/routes/components/loading-spinner/ColorExample.svelte
+++ b/src/routes/components/loading-spinner/ColorExample.svelte
@@ -1,12 +1,12 @@
-
diff --git a/src/routes/components/loading-spinner/SizeExample.svelte b/src/routes/components/loading-spinner/SizeExample.svelte
index 41e3d88..c063d1e 100644
--- a/src/routes/components/loading-spinner/SizeExample.svelte
+++ b/src/routes/components/loading-spinner/SizeExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/logo/+page.svelte b/src/routes/components/logo/+page.svelte
index fb95630..66c10bd 100644
--- a/src/routes/components/logo/+page.svelte
+++ b/src/routes/components/logo/+page.svelte
@@ -1,26 +1,26 @@
-
diff --git a/src/routes/components/logo/FutoExample.svelte b/src/routes/components/logo/FutoExample.svelte
index bc44569..2d60e5b 100644
--- a/src/routes/components/logo/FutoExample.svelte
+++ b/src/routes/components/logo/FutoExample.svelte
@@ -1,5 +1,5 @@
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/routes/components/logo/StackedExample.svelte b/src/routes/components/logo/StackedExample.svelte
index dd67844..f7540bf 100644
--- a/src/routes/components/logo/StackedExample.svelte
+++ b/src/routes/components/logo/StackedExample.svelte
@@ -1,5 +1,5 @@
-
- Modals are always screen width and height on small devices
-
-
-
- See ConfirmModal for a basic confirm modal
-
-
-
+ Modals are always screen width and height on small devices
+
+
+
+ See ConfirmModal for a basic confirm modal
+
+
+
diff --git a/src/routes/components/modal/BasicExample.svelte b/src/routes/components/modal/BasicExample.svelte
index 6d9108d..4e937e3 100644
--- a/src/routes/components/modal/BasicExample.svelte
+++ b/src/routes/components/modal/BasicExample.svelte
@@ -1,6 +1,6 @@
diff --git a/src/routes/components/modal/BasicModal.svelte b/src/routes/components/modal/BasicModal.svelte
index 381072f..47d236a 100644
--- a/src/routes/components/modal/BasicModal.svelte
+++ b/src/routes/components/modal/BasicModal.svelte
@@ -1,14 +1,14 @@
-
-
+
+
diff --git a/src/routes/components/modal/ConfirmDialogExample.svelte b/src/routes/components/modal/ConfirmDialogExample.svelte
index d911369..93a37d4 100644
--- a/src/routes/components/modal/ConfirmDialogExample.svelte
+++ b/src/routes/components/modal/ConfirmDialogExample.svelte
@@ -1,19 +1,19 @@
diff --git a/src/routes/components/modal/IconExample.svelte b/src/routes/components/modal/IconExample.svelte
index 8af7d8d..9e26fd3 100644
--- a/src/routes/components/modal/IconExample.svelte
+++ b/src/routes/components/modal/IconExample.svelte
@@ -1,43 +1,43 @@
-
-
-
-
+
+
+
+
{#if item === 1}
- (item = 0)}>
-
-
-
+ (item = 0)}>
+
+
+
{:else if item === 2}
- (item = 0)}>
-
-
-
+ (item = 0)}>
+
+
+
{:else if item === 3}
- (item = 0)}>
-
-
-
+ (item = 0)}>
+
+
+
{:else if item === 4}
- (item = 0)} closeOnBackdropClick>
-
-
-
-
-
-
+ (item = 0)} closeOnBackdropClick>
+
+
+
+
+
+
{/if}
diff --git a/src/routes/components/modal/NestedExample.svelte b/src/routes/components/modal/NestedExample.svelte
index 826ec19..29cfce8 100644
--- a/src/routes/components/modal/NestedExample.svelte
+++ b/src/routes/components/modal/NestedExample.svelte
@@ -1,6 +1,6 @@
diff --git a/src/routes/components/modal/NestedModal.svelte b/src/routes/components/modal/NestedModal.svelte
index e6c8c72..393f05a 100644
--- a/src/routes/components/modal/NestedModal.svelte
+++ b/src/routes/components/modal/NestedModal.svelte
@@ -1,31 +1,31 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/routes/components/modal/RouteExample.svelte b/src/routes/components/modal/RouteExample.svelte
index 8cf39d7..bb061fa 100644
--- a/src/routes/components/modal/RouteExample.svelte
+++ b/src/routes/components/modal/RouteExample.svelte
@@ -1,21 +1,21 @@
-
-
-
-
+
+
+
+
{#if item}
- (item = 0)}>
-
-
-
+ (item = 0)}>
+
+
+
{/if}
diff --git a/src/routes/components/modal/SizeExample.svelte b/src/routes/components/modal/SizeExample.svelte
index 4ef1d0e..1b2e4bd 100644
--- a/src/routes/components/modal/SizeExample.svelte
+++ b/src/routes/components/modal/SizeExample.svelte
@@ -1,52 +1,43 @@
-
-
-
-
-
-
+
+
+
+
+
+
{#if open}
- (open = false)}>
-
-
-
-
-
-
-
+ (open = false)}>
+
+
+
+
+
+
+
{/if}
diff --git a/src/routes/components/multi-select/+page.svelte b/src/routes/components/multi-select/+page.svelte
index 079a861..fdebf2e 100644
--- a/src/routes/components/multi-select/+page.svelte
+++ b/src/routes/components/multi-select/+page.svelte
@@ -1,26 +1,24 @@
- Allows the user to select a multiple options from a dropdown list
-
- The MultiSelect component is very similar to the Select component, but allows the user to select multiple options.
-
- Allows the user to select a multiple options from a dropdown list
+
+ The MultiSelect component is very similar to the Select component, but allows the user to select multiple options.
+
+
diff --git a/src/routes/components/multi-select/BasicExample.svelte b/src/routes/components/multi-select/BasicExample.svelte
index b11386e..f5d8d3c 100644
--- a/src/routes/components/multi-select/BasicExample.svelte
+++ b/src/routes/components/multi-select/BasicExample.svelte
@@ -1,59 +1,57 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
diff --git a/src/routes/components/navbar/+page.svelte b/src/routes/components/navbar/+page.svelte
index 68305b2..bd4543e 100644
--- a/src/routes/components/navbar/+page.svelte
+++ b/src/routes/components/navbar/+page.svelte
@@ -1,27 +1,28 @@
- This component exports a NavbarItem for creating navigation menus. This is usually used in
- conjunction with the AppSidebar component
- This component exports a NavbarItem for creating navigation menus. This is usually used in conjunction with the AppSidebar component
+
diff --git a/src/routes/components/navbar/BasicExample.svelte b/src/routes/components/navbar/BasicExample.svelte
index 71b9378..b1ae847 100644
--- a/src/routes/components/navbar/BasicExample.svelte
+++ b/src/routes/components/navbar/BasicExample.svelte
@@ -1,8 +1,8 @@
- Accept masked input from the user
- Accept masked input from the user
+
diff --git a/src/routes/components/password-input/BasicExample.svelte b/src/routes/components/password-input/BasicExample.svelte
index 0103084..da54449 100644
--- a/src/routes/components/password-input/BasicExample.svelte
+++ b/src/routes/components/password-input/BasicExample.svelte
@@ -1,14 +1,14 @@
-
-
-
-
+
+
+
+
diff --git a/src/routes/components/password-input/ShapeExample.svelte b/src/routes/components/password-input/ShapeExample.svelte
index 01f6eb2..39ace29 100644
--- a/src/routes/components/password-input/ShapeExample.svelte
+++ b/src/routes/components/password-input/ShapeExample.svelte
@@ -1,9 +1,9 @@
-
diff --git a/src/routes/components/password-input/SizeExample.svelte b/src/routes/components/password-input/SizeExample.svelte
index 134f4c9..83f63fb 100644
--- a/src/routes/components/password-input/SizeExample.svelte
+++ b/src/routes/components/password-input/SizeExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/password-input/TranslationExample.svelte b/src/routes/components/password-input/TranslationExample.svelte
index f65c4d9..bdda705 100644
--- a/src/routes/components/password-input/TranslationExample.svelte
+++ b/src/routes/components/password-input/TranslationExample.svelte
@@ -1,15 +1,15 @@
-
-
+
+
diff --git a/src/routes/components/scrollable/+page.svelte b/src/routes/components/scrollable/+page.svelte
index 27210cb..edccde9 100644
--- a/src/routes/components/scrollable/+page.svelte
+++ b/src/routes/components/scrollable/+page.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/scrollable/BasicExample.svelte b/src/routes/components/scrollable/BasicExample.svelte
index 0eaf5e9..d6dc73d 100644
--- a/src/routes/components/scrollable/BasicExample.svelte
+++ b/src/routes/components/scrollable/BasicExample.svelte
@@ -1,22 +1,22 @@
- Vertical
- Vertical
+ Horizontal
-
-
-
-
+ Horizontal
+
+
+
+
diff --git a/src/routes/components/select/+page.svelte b/src/routes/components/select/+page.svelte
index 19ca911..890db39 100644
--- a/src/routes/components/select/+page.svelte
+++ b/src/routes/components/select/+page.svelte
@@ -1,26 +1,24 @@
- Allows the user to select a single option from a dropdown list
-
- The Select component is very similar to the MultiSelect component, but only allows the user to select a single option.
-
- Allows the user to select a single option from a dropdown list
+
+ The Select component is very similar to the MultiSelect component, but only allows the user to select a single option.
+
+
diff --git a/src/routes/components/select/BasicExample.svelte b/src/routes/components/select/BasicExample.svelte
index cdff389..c566fb0 100644
--- a/src/routes/components/select/BasicExample.svelte
+++ b/src/routes/components/select/BasicExample.svelte
@@ -1,64 +1,60 @@
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
diff --git a/src/routes/components/stack/+page.svelte b/src/routes/components/stack/+page.svelte
index 3314c6f..de9b3dc 100644
--- a/src/routes/components/stack/+page.svelte
+++ b/src/routes/components/stack/+page.svelte
@@ -1,23 +1,23 @@
-
diff --git a/src/routes/components/stack/BasicExample.svelte b/src/routes/components/stack/BasicExample.svelte
index 25a7ebf..fa6792a 100644
--- a/src/routes/components/stack/BasicExample.svelte
+++ b/src/routes/components/stack/BasicExample.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/stack/HorizontalExample.svelte b/src/routes/components/stack/HorizontalExample.svelte
index 2166dd6..d1f8f5e 100644
--- a/src/routes/components/stack/HorizontalExample.svelte
+++ b/src/routes/components/stack/HorizontalExample.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/stack/RowExample.svelte b/src/routes/components/stack/RowExample.svelte
index e7342d9..8e3f5c8 100644
--- a/src/routes/components/stack/RowExample.svelte
+++ b/src/routes/components/stack/RowExample.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/stack/VerticalExample.svelte b/src/routes/components/stack/VerticalExample.svelte
index f1f101c..206f9f0 100644
--- a/src/routes/components/stack/VerticalExample.svelte
+++ b/src/routes/components/stack/VerticalExample.svelte
@@ -1,10 +1,10 @@
-
diff --git a/src/routes/components/supporter-badge/+page.svelte b/src/routes/components/supporter-badge/+page.svelte
index 59e0532..3f9e23a 100644
--- a/src/routes/components/supporter-badge/+page.svelte
+++ b/src/routes/components/supporter-badge/+page.svelte
@@ -1,20 +1,20 @@
-
diff --git a/src/routes/components/supporter-badge/CustomExample.svelte b/src/routes/components/supporter-badge/CustomExample.svelte
index 4a3ee04..0416461 100644
--- a/src/routes/components/supporter-badge/CustomExample.svelte
+++ b/src/routes/components/supporter-badge/CustomExample.svelte
@@ -1,17 +1,17 @@
-
-
+
+
-
- Title
-
- Purchase Immich
-
-
+
+ Title
+
+ Purchase Immich
+
+
diff --git a/src/routes/components/supporter-badge/EffectExample.svelte b/src/routes/components/supporter-badge/EffectExample.svelte
index c918760..3f84a64 100644
--- a/src/routes/components/supporter-badge/EffectExample.svelte
+++ b/src/routes/components/supporter-badge/EffectExample.svelte
@@ -1,11 +1,11 @@
- On Hover
- On Hover
+ Always
- Always
+
diff --git a/src/routes/components/supporter-badge/SizeExample.svelte b/src/routes/components/supporter-badge/SizeExample.svelte
index 4ab3299..69522e1 100644
--- a/src/routes/components/supporter-badge/SizeExample.svelte
+++ b/src/routes/components/supporter-badge/SizeExample.svelte
@@ -1,30 +1,30 @@
-
- tiny
-
+
+ tiny
+
-
- small
-
+
+ small
+
-
- medium
-
+
+ medium
+
-
- large
-
+
+ large
+
-
- giant
-
+
+ giant
+
diff --git a/src/routes/components/switch/+page.svelte b/src/routes/components/switch/+page.svelte
index e378456..0d192fe 100644
--- a/src/routes/components/switch/+page.svelte
+++ b/src/routes/components/switch/+page.svelte
@@ -1,24 +1,24 @@
- A boolean input element
- A boolean input element
+
diff --git a/src/routes/components/switch/BasicExample.svelte b/src/routes/components/switch/BasicExample.svelte
index 2cbc2f1..6a25b97 100644
--- a/src/routes/components/switch/BasicExample.svelte
+++ b/src/routes/components/switch/BasicExample.svelte
@@ -1,11 +1,11 @@
-
-
+
+
diff --git a/src/routes/components/switch/ColorExample.svelte b/src/routes/components/switch/ColorExample.svelte
index 76f2279..478e6b0 100644
--- a/src/routes/components/switch/ColorExample.svelte
+++ b/src/routes/components/switch/ColorExample.svelte
@@ -1,12 +1,12 @@
-
diff --git a/src/routes/components/switch/FormExample.svelte b/src/routes/components/switch/FormExample.svelte
index 34ea320..d3dd2fa 100644
--- a/src/routes/components/switch/FormExample.svelte
+++ b/src/routes/components/switch/FormExample.svelte
@@ -1,27 +1,27 @@
-
-
-
-
-
-
-
-
-
-
-
-
- Status Enabled: {form.status}
+
+
+
+
+
+
+
+
+
+
+
+
+ Status Enabled: {form.status}
diff --git a/src/routes/components/text/+page.svelte b/src/routes/components/text/+page.svelte
index ef4d167..1330d4e 100644
--- a/src/routes/components/text/+page.svelte
+++ b/src/routes/components/text/+page.svelte
@@ -1,20 +1,20 @@
-
diff --git a/src/routes/components/text/ColorExample.svelte b/src/routes/components/text/ColorExample.svelte
index fc31a69..ec1cb52 100644
--- a/src/routes/components/text/ColorExample.svelte
+++ b/src/routes/components/text/ColorExample.svelte
@@ -1,13 +1,13 @@
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
diff --git a/src/routes/components/text/FontWeightExample.svelte b/src/routes/components/text/FontWeightExample.svelte
index d979abf..6e2025f 100644
--- a/src/routes/components/text/FontWeightExample.svelte
+++ b/src/routes/components/text/FontWeightExample.svelte
@@ -1,11 +1,11 @@
- Text (light)
- Text (normal)
- Text (semi-bold)
- Text (bold)
- Text (extra-bold)
+ Text (light)
+ Text (normal)
+ Text (semi-bold)
+ Text (bold)
+ Text (extra-bold)
diff --git a/src/routes/components/text/SizeExample.svelte b/src/routes/components/text/SizeExample.svelte
index 695c0f1..77c3bfd 100644
--- a/src/routes/components/text/SizeExample.svelte
+++ b/src/routes/components/text/SizeExample.svelte
@@ -1,11 +1,11 @@
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
+ The quick brown fox jumps over the lazy dog
diff --git a/src/routes/components/textarea/+page.svelte b/src/routes/components/textarea/+page.svelte
index 4720299..d661406 100644
--- a/src/routes/components/textarea/+page.svelte
+++ b/src/routes/components/textarea/+page.svelte
@@ -1,28 +1,28 @@
-
- See Input for single-line input fields
-
-
+ See Input for single-line input fields
+
+
diff --git a/src/routes/components/textarea/FormExample.svelte b/src/routes/components/textarea/FormExample.svelte
index f88a7fd..08c766c 100644
--- a/src/routes/components/textarea/FormExample.svelte
+++ b/src/routes/components/textarea/FormExample.svelte
@@ -1,29 +1,29 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Note: this is helper text
-
-
-
- Must be valid
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Note: this is helper text
+
+
+
+ Must be valid
+
diff --git a/src/routes/components/textarea/GrowExample.svelte b/src/routes/components/textarea/GrowExample.svelte
index f33ea83..6086bb1 100644
--- a/src/routes/components/textarea/GrowExample.svelte
+++ b/src/routes/components/textarea/GrowExample.svelte
@@ -1,14 +1,10 @@
-
-
+
+
diff --git a/src/routes/components/textarea/SizeExample.svelte b/src/routes/components/textarea/SizeExample.svelte
index 2a59953..f0fd541 100644
--- a/src/routes/components/textarea/SizeExample.svelte
+++ b/src/routes/components/textarea/SizeExample.svelte
@@ -1,13 +1,13 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/routes/components/theme-switcher/+page.svelte b/src/routes/components/theme-switcher/+page.svelte
index 35f72fd..3566d42 100644
--- a/src/routes/components/theme-switcher/+page.svelte
+++ b/src/routes/components/theme-switcher/+page.svelte
@@ -1,23 +1,23 @@
-
diff --git a/src/routes/components/theme-switcher/BasicExample.svelte b/src/routes/components/theme-switcher/BasicExample.svelte
index 43361a6..4cffee8 100644
--- a/src/routes/components/theme-switcher/BasicExample.svelte
+++ b/src/routes/components/theme-switcher/BasicExample.svelte
@@ -1,5 +1,5 @@
-
diff --git a/src/routes/components/theme-switcher/SizeExample.svelte b/src/routes/components/theme-switcher/SizeExample.svelte
index 4f4dbd4..b978ee2 100644
--- a/src/routes/components/theme-switcher/SizeExample.svelte
+++ b/src/routes/components/theme-switcher/SizeExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/theme-switcher/VariantExample.svelte b/src/routes/components/theme-switcher/VariantExample.svelte
index d37c159..faaa59b 100644
--- a/src/routes/components/theme-switcher/VariantExample.svelte
+++ b/src/routes/components/theme-switcher/VariantExample.svelte
@@ -1,9 +1,9 @@
-
diff --git a/svelte.config.js b/svelte.config.js
index 19806df..ac745e9 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,24 +3,24 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
- // Consult https://svelte.dev/docs/kit/integrations
- // for more information about preprocessors
- preprocess: vitePreprocess(),
+ // Consult https://svelte.dev/docs/kit/integrations
+ // for more information about preprocessors
+ preprocess: vitePreprocess(),
- kit: {
- // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
- // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
- // See https://svelte.dev/docs/kit/adapters for more information about adapters.
- adapter: adapter({
- fallback: 'index.html',
- }),
+ kit: {
+ // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+ // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+ // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+ adapter: adapter({
+ fallback: 'index.html',
+ }),
- alias: {
- $docs: './src/docs',
- '@immich/ui': './src/lib/index.ts',
- '@immich/ui/*': './src/lib/*',
- },
- },
+ alias: {
+ $docs: './src/docs',
+ '@immich/ui': './src/lib/index.ts',
+ '@immich/ui/*': './src/lib/*',
+ },
+ },
};
export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6325965..8e5ebac 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,14 +4,14 @@ import { tailwindConfig } from './src/lib/theme/default.js';
const { colors, borderColor } = tailwindConfig();
export default {
- content: ['./src/**/*.{html,js,svelte,ts}'],
- darkMode: 'class',
- theme: {
- extend: {
- colors,
- borderColor,
- },
- },
+ content: ['./src/**/*.{html,js,svelte,ts}'],
+ darkMode: 'class',
+ theme: {
+ extend: {
+ colors,
+ borderColor,
+ },
+ },
- plugins: [],
+ plugins: [],
} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
index 6f788f1..8ed3dd7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,15 +1,15 @@
{
- "extends": "./.svelte-kit/tsconfig.json",
- "compilerOptions": {
- "allowJs": true,
- "checkJs": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "resolveJsonModule": true,
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true,
- "module": "NodeNext",
- "moduleResolution": "NodeNext"
- }
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "module": "NodeNext",
+ "moduleResolution": "NodeNext"
+ }
}
diff --git a/vite.config.ts b/vite.config.ts
index 10cba9d..7091418 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,5 +3,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
- plugins: [tailwindcss(), sveltekit()],
+ plugins: [tailwindcss(), sveltekit()],
});
- {#if headerChild}
- {@render header()}
- {/if}
+
diff --git a/src/lib/components/Card/CardBody.svelte b/src/lib/components/Card/CardBody.svelte
index 71516c2..8ecef57 100644
--- a/src/lib/components/Card/CardBody.svelte
+++ b/src/lib/components/Card/CardBody.svelte
@@ -1,16 +1,16 @@
+
+ {#if headerChild}
+ {@render header()}
+ {/if}
- {#if bodyChild && expanded}
-
- {@render bodyChild?.snippet()}
-
- {/if}
+ {#if bodyChild && expanded}
+
+ {@render bodyChild?.snippet()}
+
+ {/if}
- {#if footerChild}
-
+ {@render children()}
+
- {@render footerChild.snippet()}
-
- {/if}
+ {#if footerChild}
+
+ {@render footerChild.snippet()}
+
+ {/if}
- {@render children()}
-
- {#if label}
-
- {#if description}
- {description}
- {/if}
- {/if}
+ {#if label}
+
+ {#if description}
+ {description}
+ {/if}
+ {/if}
-
- {#snippet children({ checked, indeterminate })}
-
+
+ {#snippet children({ checked, indeterminate })}
+
diff --git a/src/lib/components/CloseButton/CloseButton.svelte b/src/lib/components/CloseButton/CloseButton.svelte
index 335f479..e2fb7d9 100644
--- a/src/lib/components/CloseButton/CloseButton.svelte
+++ b/src/lib/components/CloseButton/CloseButton.svelte
@@ -1,23 +1,18 @@
- {#if indeterminate}
-
- {/snippet}
-
+ {#if indeterminate}
+
+ {/snippet}
+ {@render children()}{@render children()}
diff --git a/src/lib/components/CommandPalette/CommandPalette.svelte b/src/lib/components/CommandPalette/CommandPalette.svelte
index 526db2e..2d8b6ec 100644
--- a/src/lib/components/CommandPalette/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette/CommandPalette.svelte
@@ -1,150 +1,145 @@
-
-
-
- commandPaletteManager.close()} class="md:hidden" />
-
-
+
+
+
+ commandPaletteManager.close()} class="md:hidden" />
+
+
- {#each commandPaletteManager.results as item, i (i)}
- commandPaletteManager.remove(i)}
- onSelect={() => commandPaletteManager.select(i)}
- />
- {/each}
-
- {/if}
-
-
+
-
+
-
+
+
-
- to select
-
+ {#if commandPaletteManager.results.length > 0}
+
+ {#each commandPaletteManager.results as item, i (i)}
+ commandPaletteManager.remove(i)}
+ onSelect={() => commandPaletteManager.select(i)}
+ />
+ {/each}
+
+ {/if}
+
+
+
+
-
+
-
+
+ to select
+
-
-
- to navigate
-
+
+
+ to navigate
+
-
-
- to close
-
-
+
+ to close
+
+
-
+
diff --git a/src/lib/components/ConfirmModal/ConfirmModal.svelte b/src/lib/components/ConfirmModal/ConfirmModal.svelte
index 8ffcb3d..35b18a1 100644
--- a/src/lib/components/ConfirmModal/ConfirmModal.svelte
+++ b/src/lib/components/ConfirmModal/ConfirmModal.svelte
@@ -1,57 +1,57 @@
{prompt}
- {/if} -{prompt}
+ {/if} +
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Field/Field.svelte b/src/lib/components/Field/Field.svelte
index 765bd00..4968cd0 100644
--- a/src/lib/components/Field/Field.svelte
+++ b/src/lib/components/Field/Field.svelte
@@ -1,31 +1,31 @@
- {@render children()}
- {#if helperTextChildren}
-
diff --git a/src/lib/components/FormatBytes/FormatBytes.svelte b/src/lib/components/FormatBytes/FormatBytes.svelte
index 17c24d2..225ad1d 100644
--- a/src/lib/components/FormatBytes/FormatBytes.svelte
+++ b/src/lib/components/FormatBytes/FormatBytes.svelte
@@ -1,16 +1,16 @@
{value}{separator}{unit}
diff --git a/src/lib/components/Heading/Heading.svelte b/src/lib/components/Heading/Heading.svelte
index 2dff050..a5c61ee 100644
--- a/src/lib/components/Heading/Heading.svelte
+++ b/src/lib/components/Heading/Heading.svelte
@@ -1,57 +1,51 @@
- {@render helperTextChildren.snippet()}
-
- {/if}
+ {@render children()}
+ {#if helperTextChildren}
+
+ {@render helperTextChildren.snippet()}
+
+ {/if}
-
- {@render children?.()}
-
-
+
+
+ {@render children?.()}
+
+
- {#if label}
-
- {/if}
+ {#if label}
+
+ {/if}
- {#if description}
- {description}
- {/if}
+ {#if description}
+ {description}
+ {/if}
-
diff --git a/src/lib/components/Kbd/Kbd.svelte b/src/lib/components/Kbd/Kbd.svelte
index 0f45473..5e0c0da 100644
--- a/src/lib/components/Kbd/Kbd.svelte
+++ b/src/lib/components/Kbd/Kbd.svelte
@@ -1,33 +1,33 @@
- {@render children?.()}
+ {@render children?.()}
diff --git a/src/lib/components/Label/Label.svelte b/src/lib/components/Label/Label.svelte
index 8c69d36..22616e5 100644
--- a/src/lib/components/Label/Label.svelte
+++ b/src/lib/components/Label/Label.svelte
@@ -1,12 +1,12 @@
diff --git a/src/lib/components/Link/Link.svelte b/src/lib/components/Link/Link.svelte
index cf0cc60..585deca 100644
--- a/src/lib/components/Link/Link.svelte
+++ b/src/lib/components/Link/Link.svelte
@@ -1,33 +1,26 @@
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/LoadingSpinner/LoadingSpinner.svelte b/src/lib/components/LoadingSpinner/LoadingSpinner.svelte
index 7550e0a..8df839d 100644
--- a/src/lib/components/LoadingSpinner/LoadingSpinner.svelte
+++ b/src/lib/components/LoadingSpinner/LoadingSpinner.svelte
@@ -1,54 +1,54 @@
- {#if leadingIcon}
-
- {#if isIconLike(leadingIcon)}
-
- {/if}
+
+ {#if leadingIcon}
+ {trailingText}
- {/if}
+
+ {#if trailingText}
+ {trailingText}
+ {/if}
- {#if trailingIcon}
-
+ {#if trailingIcon}
+
+ {#if isIconLike(leadingIcon)}
+
+ {/if}
-
- {#if trailingText}
-
- {#if isIconLike(trailingIcon)}
-
- {/if}
-
+ {#if isIconLike(trailingIcon)}
+
+ {/if}
+
-
+
diff --git a/src/lib/components/Logo/Logo.svelte b/src/lib/components/Logo/Logo.svelte
index d4b5130..eb701b8 100644
--- a/src/lib/components/Logo/Logo.svelte
+++ b/src/lib/components/Logo/Logo.svelte
@@ -1,66 +1,66 @@
-
-
- {#if headerChildren}
- {@render headerChildren.snippet()}
- {:else if title}
-
+
+ {
+ if (e.key === 'Escape') {
+ e.stopPropagation();
+ e.preventDefault();
+ if (closeOnEsc) {
+ handleClose();
+ }
+ }
+ }}
+ onclick={handleCloseOnClick}
+ class={cleanClass('fixed start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4')}
+ >
+
-
+ {#if footerChildren}
+
+ {@render footerChildren.snippet()}
+
+ {/if}
+
+
+
- {#if typeof icon === 'string'}
- {title}
- handleClose()} />
-
- {/if}
-
+
+
+ {#if headerChildren}
+ {@render headerChildren.snippet()}
+ {:else if title}
+
-
- {@render bodyChildren?.snippet()}
-
+
+ {@render bodyChildren?.snippet()}
+
- {#if footerChildren}
-
- {@render footerChildren.snippet()}
-
- {/if}
-
-
-
+ {#if typeof icon === 'string'}
+ {title}
+ handleClose()} />
+
+ {/if}
+
-
diff --git a/src/lib/components/Navbar/NavbarItem.svelte b/src/lib/components/Navbar/NavbarItem.svelte
index 727ede2..9d76ab1 100644
--- a/src/lib/components/Navbar/NavbarItem.svelte
+++ b/src/lib/components/Navbar/NavbarItem.svelte
@@ -1,73 +1,71 @@
- {title}
+{title}
- {#if iconProps}
-
+
+ {#if iconProps}
+
diff --git a/src/lib/components/PasswordInput/PasswordInput.svelte b/src/lib/components/PasswordInput/PasswordInput.svelte
index f597b82..a39fc0b 100644
--- a/src/lib/components/PasswordInput/PasswordInput.svelte
+++ b/src/lib/components/PasswordInput/PasswordInput.svelte
@@ -1,38 +1,36 @@
- {#snippet trailingIcon()}
- {#if value?.length > 0}
-
- {@render children()}
+ {@render children()}
diff --git a/src/lib/components/Stack/VStack.svelte b/src/lib/components/Stack/VStack.svelte
index a2d696a..1cb8897 100644
--- a/src/lib/components/Stack/VStack.svelte
+++ b/src/lib/components/Stack/VStack.svelte
@@ -1,10 +1,10 @@
- {#if children}
- {@render children()}
- {:else}
- {text}
- {/if}
+ {#if children}
+ {@render children()}
+ {:else}
+ {text}
+ {/if}
diff --git a/src/lib/components/Switch/Switch.svelte b/src/lib/components/Switch/Switch.svelte
index 2c110c7..947b806 100644
--- a/src/lib/components/Switch/Switch.svelte
+++ b/src/lib/components/Switch/Switch.svelte
@@ -1,110 +1,109 @@
- {#if label}
-
- {/snippet}
-
-
- {#if description}
- {description}
- {/if}
-
- {/if}
-
-
-
-
-
+ {#if label}
+
+ {/snippet}
+
+
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+
+
+
- {#if label}
-
- {/if}
+ {#if label}
+
+ {/if}
- {#if description}
- {description}
- {/if}
+ {#if description}
+ {description}
+ {/if}
-
diff --git a/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
index 6d8d733..6d7a1ff 100644
--- a/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher/ThemeSwitcher.svelte
@@ -1,52 +1,39 @@
-
-
+
+
+
-
- {/if}
- {@render children?.()}
- {#if trailingIcon}
-
+
+ {/if}
+ {@render children?.()}
+ {#if trailingIcon}
+
-
- {:else}
- {@render content()}
- {/if}
-
+
+ {#if loading}
+
+
+ {:else}
+ {@render content()}
+ {/if}
+
{:else}
-
-
- {:else}
- {@render content()}
- {/if}
-
+
+ {:else}
+ {@render content()}
+ {/if}
+
- {#if label}
-
- {/if}
+ {#if label}
+
+ {/if}
-
-
-
-
- {#snippet trailingIcon()}
-
-
-
-
-
-
-
- {#each options as { value, label, disabled }, i (i + value)}
-
- {#snippet children({ selected })}
-
- {/each}
-
-
-
-
-
-
+
+
+
+
+ {#snippet trailingIcon()}
+
+
+
+
+
+
+
+ {#each options as { value, label, disabled }, i (i + value)}
+
+ {#snippet children({ selected })}
+
+ {/each}
+
+
+
+
+
+
diff --git a/src/lib/internal/Text.svelte b/src/lib/internal/Text.svelte
index 9559811..b63fb17 100644
--- a/src/lib/internal/Text.svelte
+++ b/src/lib/internal/Text.svelte
@@ -1,60 +1,52 @@
- {label}
-
- {#if selected}
-
-
- {/if}
- {/snippet}
-
+ {label}
+
+ {#if selected}
+
+
+ {/if}
+ {/snippet}
+
-
diff --git a/src/lib/site/SiteFooterLink.svelte b/src/lib/site/SiteFooterLink.svelte
index 872a236..47566df 100644
--- a/src/lib/site/SiteFooterLink.svelte
+++ b/src/lib/site/SiteFooterLink.svelte
@@ -1,21 +1,21 @@
-
-
-
+ This project is available under GNU AGPL v3 license.
+ Privacy should not be a luxury
+
+
+
-
- Social
-
+
+ Miscellaneous
+
+
+
+
+
- This project is available under GNU AGPL v3 license.
- Privacy should not be a luxury
-
-
-
+
+
+ Social
+
-
- Download
-
+
+ Download
+
-
- Company
-
+
+ Company
+
-
- Sites
-
+
+ Sites
+
-
- Miscellaneous
-
-
-
- commandPaletteManager.open()}
- leadingIcon={mdiMagnify}
- placeholder="Search..."
- class="bg-subtle! rounded-full border px-2 py-2"
- trailingIcon={mdiSlashForwardBox}
- />
-
-
+ commandPaletteManager.open()}
+ leadingIcon={mdiMagnify}
+ placeholder="Search..."
+ class="bg-subtle! rounded-full border px-2 py-2"
+ trailingIcon={mdiSlashForwardBox}
+ />
+
+
- page.url.pathname === '/'}
- />
- {#each componentGroups as group (group.title)}
-
-
+ page.url.pathname === '/'}
+ />
+ {#each componentGroups as group (group.title)}
+
+
- {@render children?.()}
-
-
+ {@render children?.()}
+
+ npm i --save-dev @immich/ui
+ npm i --save-dev @immich/ui
- This is an alert
-This is an alert
+This is an alert
-This is an alert
+No icon
-No icon
+
-
-
+
+
+
-
-
-
+
+
-
- Header
-
-
+
+
+
-
-
+
+ Header
+
+
- Content
-
-
+ Content
+
+
-
-
-
+
+
-
- Header
-
-
+
+
+
-
-
+
+
-
-
+
+ Header
+
+
- Sidebar
-
-
+ Sidebar
+
+
- Content
-
-
+ Content
+
+
-
-
-
+
+
- Header
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
+
+ Header
+
+
-
-
-
+
+
+
- Size
-
+
+ Tiny
- Small
- Medium
- Large
- Giant
-
+ Size
+
-
- Tiny
+ Small
+ Medium
+ Large
+ Giant
+
- Round
-
-
-
-
-
-
+
+
+ Round
+
+
+
+
+
+
-
-
- Semi-Rounded
-
-
-
-
-
-
+
+
+ Semi-Rounded
+
+
+
+
+
+
-
-
- Rectangle
-
-
-
-
-
-
+
+
+ Rectangle
+
+
+
+
+
+
console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
- console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
+ console.log('hello world!')
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
- Theme:
-
+ {JSON.stringify(values, null, 2)}
-
+ Theme:
+
{JSON.stringify(values, null, 2)}
+
-
diff --git a/src/routes/components/navbar/GroupExample.svelte b/src/routes/components/navbar/GroupExample.svelte
index df0dbab..5dd365e 100644
--- a/src/routes/components/navbar/GroupExample.svelte
+++ b/src/routes/components/navbar/GroupExample.svelte
@@ -1,11 +1,11 @@
-
diff --git a/src/routes/components/navbar/VariantExample.svelte b/src/routes/components/navbar/VariantExample.svelte
index 50ba394..07f4a55 100644
--- a/src/routes/components/navbar/VariantExample.svelte
+++ b/src/routes/components/navbar/VariantExample.svelte
@@ -1,9 +1,9 @@
-
diff --git a/src/routes/components/password-input/+page.svelte b/src/routes/components/password-input/+page.svelte
index b90d7a1..860f613 100644
--- a/src/routes/components/password-input/+page.svelte
+++ b/src/routes/components/password-input/+page.svelte
@@ -1,27 +1,27 @@
-
-
-
-
-
+
+
+
+
+
+
-
- Theme:
-
+ {JSON.stringify(value, null, 2)}
-
+ Theme:
+
{JSON.stringify(value, null, 2)}
+