@immich/ui 0.49.2 → 0.49.3

package/dist/components/Toast/ToastPanel.svelte

@@ -2,16 +2,25 @@
   import Toast from './Toast.svelte';
   import { zIndex } from '../../constants.js';
   import { isCustomToast } from '../../services/toast-manager.svelte.js';
-  import type { ToastId, ToastItem } from '../../types.js';
+  import type { ToastPanelProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { twMerge } from 'tailwind-merge';
 
-  type Props = {
-    items: Array<ToastItem & ToastId>;
-  };
+  const { items, class: className, ...props }: ToastPanelProps = $props();
 
-  const { items }: Props = $props();
+  const isEmpty = $derived(items.length === 0);
 </script>
 
-<div class="absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4 {zIndex.ToastPanel}">
+<div
+  class={twMerge(
+    cleanClass(
+      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+      zIndex.ToastPanel,
+      className,
+    ),
+  )}
+  {...props}
+>
   {#each items as item (item.id)}
     {#if isCustomToast(item)}
       <item.component {...item.props} />

package/dist/components/Toast/ToastPanel.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { ToastId, ToastItem } from '../../types.js';
-type Props = {
-    items: Array<ToastItem & ToastId>;
-};
-declare const ToastPanel: import("svelte").Component<Props, {}, "">;
+import type { ToastPanelProps } from '../../types.js';
+declare const ToastPanel: import("svelte").Component<ToastPanelProps, {}, "">;
 type ToastPanel = ReturnType<typeof ToastPanel>;
 export default ToastPanel;

package/dist/services/toast-manager.svelte.d.ts

@@ -1,16 +1,17 @@
-import type { ToastCustom, ToastItem, ToastOptions, ToastShow } from '../types.js';
+import type { ToastCustom, ToastItem, ToastOptions, ToastPanelProps, ToastShow } from '../types.js';
 export declare const isCustomToast: (item: ToastItem) => item is ToastCustom;
 declare class ToastManager {
     #private;
     show(item: ToastShow, options?: ToastOptions): void;
     custom(item: ToastCustom, options?: ToastOptions): void;
+    setOptions(options: Omit<ToastPanelProps, 'items'>): void;
     open(item: ToastItem, options?: ToastOptions): void;
+    mount(): Promise<void>;
     unmount(): Promise<void>;
     success(item?: string | ToastShow, options?: ToastOptions): void;
     info(item?: string | ToastShow, options?: ToastOptions): void;
     warning(item?: string | ToastShow, options?: ToastOptions): void;
     danger(item?: string | ToastShow, options?: ToastOptions): void;
-    mount(): Promise<void>;
     private remove;
 }
 export declare const toastManager: ToastManager;

package/dist/services/toast-manager.svelte.js

@@ -13,6 +13,9 @@ class ToastManager {
     custom(item, options) {
         return this.open(item, options);
     }
+    setOptions(options) {
+        Object.assign(this.#props, options);
+    }
     open(item, options) {
         const { timeout = 3000, closable = true, id = generateId() } = options || {};
         const toast = item;
@@ -32,6 +35,14 @@ class ToastManager {
             setTimeout(() => this.remove(toast), timeout);
         }
     }
+    async mount() {
+        if (!this.#ref) {
+            this.#ref = await mount(ToastPanel, {
+                target: document.body,
+                props: this.#props,
+            });
+        }
+    }
     async unmount() {
         if (this.#ref) {
             await unmount(this.#ref);
@@ -49,14 +60,6 @@ class ToastManager {
     danger(item, options) {
         this.show({ title: t('toast_danger_title'), color: 'danger', ...expand(item) }, options);
     }
-    async mount() {
-        if (!this.#ref) {
-            this.#ref = await mount(ToastPanel, {
-                target: document.body,
-                props: this.#props,
-            });
-        }
-    }
     remove(target) {
         this.#props.items = this.#props.items.filter((item) => item.id !== target.id);
     }

package/dist/types.d.ts

@@ -181,6 +181,9 @@ export type ToastContainerProps = ToastCommonProps & {
     shape?: Shape;
     size?: ContainerSize;
 } & Omit<HTMLAttributes<HTMLElement>, 'title' | 'color' | 'size'>;
+export type ToastPanelProps = {
+    items: Array<ToastItem & ToastId>;
+} & HTMLAttributes<HTMLDivElement>;
 export type ToastProps = ToastContentProps & ToastContainerProps;
 type Closable = {
     onClose: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.49.2",
+  "version": "0.49.3",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",