@immich/ui 0.22.8 → 0.23.0

package/dist/components/Form/PasswordInput.svelte

@@ -26,8 +26,8 @@
 				class="me-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
-				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}
-				aria-label={t('showPassword', translations)}
+				title={isVisible ? t('hide_password', translations) : t('show_password', translations)}
+				aria-label={t('show_password', translations)}
 			/>
 		{/if}
 	{/snippet}

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -17,7 +17,7 @@
 		class?: string;
 		color?: Color;
 		variant?: Variants;
-		translations?: TranslationProps<'darkTheme'>;
+		translations?: TranslationProps<'dark_theme'>;
 		onChange?: (theme: Theme) => void;
 	};
 
@@ -47,7 +47,7 @@
 	icon={themeIcon}
 	onclick={handleToggleTheme}
 	class={cleanClass(className)}
-	aria-label={t('darkTheme', translations)}
+	aria-label={t('dark_theme', translations)}
 	role="switch"
 	aria-checked={theme.value === Theme.Dark}
 />

package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte.d.ts

@@ -4,7 +4,7 @@ type Props = {
     class?: string;
     color?: Color;
     variant?: Variants;
-    translations?: TranslationProps<'darkTheme'>;
+    translations?: TranslationProps<'dark_theme'>;
     onChange?: (theme: Theme) => void;
 };
 declare const ThemeSwitcher: import("svelte").Component<Props, {}, "">;

package/dist/index.d.ts

@@ -55,3 +55,4 @@ export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/modalManager.svelte.js';

package/dist/index.js

@@ -58,3 +58,4 @@ export * from './services/theme.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
+export * from './services/modalManager.svelte.js';

package/dist/internal/ConfirmModal.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Button, HStack, Modal, ModalBody, ModalFooter, t, type Color } from '../index.ts';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title?: string;
+		prompt?: string;
+		confirmText?: string;
+		confirmColor?: Color;
+		disabled?: boolean;
+		size?: 'small' | 'medium';
+		onClose: (confirmed: boolean) => void;
+		promptSnippet?: Snippet;
+	}
+
+	let {
+		title = t('confirm'),
+		prompt = t('prompt_default'),
+		confirmText = t('confirm'),
+		confirmColor = 'danger',
+		disabled = false,
+		size = 'small',
+		onClose,
+		promptSnippet,
+	}: Props = $props();
+
+	const handleConfirm = () => {
+		onClose(true);
+	};
+</script>
+
+<Modal {title} onClose={() => onClose(false)} {size}>
+	<ModalBody>
+		{#if promptSnippet}{@render promptSnippet()}{:else}
+			<p>{prompt}</p>
+		{/if}
+	</ModalBody>
+
+	<ModalFooter>
+		<HStack fullWidth>
+			<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
+				{t('cancel')}
+			</Button>
+			<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+				{confirmText}
+			</Button>
+		</HStack>
+	</ModalFooter>
+</Modal>

package/dist/internal/ConfirmModal.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Color } from '../index.ts';
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    prompt?: string;
+    confirmText?: string;
+    confirmColor?: Color;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    onClose: (confirmed: boolean) => void;
+    promptSnippet?: Snippet;
+}
+declare const ConfirmModal: import("svelte").Component<Props, {}, "">;
+type ConfirmModal = ReturnType<typeof ConfirmModal>;
+export default ConfirmModal;

package/dist/services/modalManager.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Component, type ComponentProps } from 'svelte';
+import ConfirmModal from '../internal/ConfirmModal.svelte';
+type OnCloseData<T> = T extends {
+    onClose: (data?: infer R) => void;
+} ? R | undefined : T extends {
+    onClose: (data: infer R) => void;
+} ? R : never;
+type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
+type StripValueIfOptional<T> = T extends undefined ? undefined : T;
+type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
+declare class ModalManager {
+    show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): Promise<StripValueIfOptional<OnCloseData<T>>>;
+    open<T extends object, K = OnCloseData<T>>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): {
+        onClose: Promise<StripValueIfOptional<K>>;
+        close: (args_0: StripValueIfOptional<K>) => Promise<void>;
+    };
+    showDialog(options: Omit<ComponentProps<typeof ConfirmModal>, 'onClose'>): Promise<boolean>;
+}
+export declare const modalManager: ModalManager;
+export {};

package/dist/services/modalManager.svelte.js

@@ -0,0 +1,32 @@
+import { mount, unmount } from 'svelte';
+import ConfirmModal from '../internal/ConfirmModal.svelte';
+class ModalManager {
+    show(Component, ...props) {
+        return this.open(Component, ...props).onClose;
+    }
+    open(Component, ...props) {
+        let modal = {};
+        let onClose;
+        const deferred = new Promise((resolve) => {
+            onClose = async (...args) => {
+                await unmount(modal);
+                resolve(args?.[0]);
+            };
+            modal = mount(Component, {
+                target: document.body,
+                props: {
+                    ...(props?.[0] ?? {}),
+                    onClose,
+                },
+            });
+        });
+        return {
+            onClose: deferred,
+            close: (...args) => onClose(args[0]),
+        };
+    }
+    showDialog(options) {
+        return this.show(ConfirmModal, options);
+    }
+}
+export const modalManager = new ModalManager();

package/dist/services/translation.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { TranslationProps } from '../types.js';
 declare const defaultTranslations: {
     close: string;
-    showPassword: string;
-    hidePassword: string;
-    darkTheme: string;
+    show_password: string;
+    hide_password: string;
+    dark_theme: string;
+    confirm: string;
+    prompt_default: string;
+    cancel: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -1,8 +1,11 @@
 const defaultTranslations = {
     close: 'Close',
-    showPassword: 'Show password',
-    hidePassword: 'Hide password',
-    darkTheme: 'Toggle dark theme',
+    show_password: 'Show password',
+    hide_password: 'Hide password',
+    dark_theme: 'Toggle dark theme',
+    confirm: 'Confirm',
+    prompt_default: 'Are you sure you want to do this?',
+    cancel: 'Cancel',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/types.d.ts

@@ -109,7 +109,7 @@ export type InputProps = BaseInputProps & {
     trailingIcon?: Snippet;
 };
 export type PasswordInputProps = BaseInputProps & {
-    translations?: TranslationProps<'showPassword' | 'hidePassword'>;
+    translations?: TranslationProps<'show_password' | 'hide_password'>;
     isVisible?: boolean;
 };
 export type SelectItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.22.8",
+	"version": "0.23.0",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",
@@ -44,14 +44,14 @@
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.13.0",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@tailwindcss/postcss": "^4.1.7",
 		"@tailwindcss/vite": "^4.1.7",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^10.0.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^3.9.3",
 		"globals": "^16.0.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
@@ -62,7 +62,7 @@
 		"svelte-highlight": "^7.8.0",
 		"tailwindcss": "^4.1.7",
 		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.15.0",
+		"typescript-eslint": "^8.34.1",
 		"vite": "^6.0.3",
 		"vitest": "^3.0.0"
 	},