@immich/ui 0.58.1 → 0.58.3

package/dist/components/Modal/Modal.svelte

@@ -10,10 +10,11 @@
   import Logo from '../Logo/Logo.svelte';
   import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
+  import { modalState } from '../../state/modal-state.svelte.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
-  import { tick, type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -74,21 +75,28 @@
   const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
   const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-  const handleClose = async () => {
-    // wait for bits-ui to complete its event cycle
-    await tick();
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    onClose?.();
-  };
-
   let cardRef = $state<HTMLElement | null>(null);
 
   const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
   const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
+
+  let layer = $state<number>();
+  const isHidden = $derived(layer !== modalState.layer);
+
+  const onOpenChangeComplete = (isOpen: boolean) => {
+    if (!isOpen && !isHidden) {
+      onClose?.();
+    }
+  };
+
+  onMount(() => {
+    layer = modalState.incrementLayer();
+
+    return () => modalState.decrementLayer();
+  });
 </script>
 
-<Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
+<Dialog.Root open={!isHidden} {onOpenChangeComplete}>
   <Dialog.Portal>
     <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
@@ -111,7 +119,7 @@
                     <Logo variant="icon" size="tiny" />
                   {/if}
                   <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-                  <CloseButton class="-me-2" onclick={() => handleClose()} />
+                  <CloseButton class="-me-2" onclick={() => onClose?.()} />
                 </div>
               {/if}
             </CardHeader>

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -2,11 +2,15 @@
   import InternalSelect from '../../internal/Select.svelte';
   import type { MultiSelectProps, SelectItem } from '../../types.js';
 
-  let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
+  let { onChange, onItemChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    onChange?.(items);
+  const handleChange = (values: T[]) => {
+    onChange?.(values);
+  };
+
+  const handleItemChange = (items: SelectItem<T>[]) => {
+    onItemChange?.(items);
   };
 </script>
 
-<InternalSelect multiple bind:values onChange={handleChange} {...restProps} />
+<InternalSelect multiple bind:values onItemChange={handleItemChange} onChange={handleChange} {...restProps} />

package/dist/components/Select/Select.svelte

@@ -2,14 +2,18 @@
   import InternalSelect from '../../internal/Select.svelte';
   import type { SelectItem, SelectProps } from '../../types.js';
 
-  let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+  let { onChange, onItemChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
   let values = $derived(value ? [value] : []);
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    value = items[0];
+  const handleChange = (values: T[]) => {
+    value = values[0];
     onChange?.(value);
   };
+
+  const handleItemChange = (items: SelectItem<T>[]) => {
+    onItemChange?.(items[0]);
+  };
 </script>
 
-<InternalSelect bind:values onChange={handleChange} {...restProps} />
+<InternalSelect bind:values onChange={handleChange} onItemChange={handleItemChange} {...restProps} />

package/dist/internal/Select.svelte

@@ -12,9 +12,10 @@
 
   type Props = {
     multiple?: boolean;
-    values: SelectItem<T>[];
+    values: T[];
     asLabel?: (items: SelectItem<T>[]) => string;
-    onChange?: (values: SelectItem<T>[]) => void;
+    onChange?: (values: T[]) => void;
+    onItemChange?: (items: SelectItem<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
@@ -24,6 +25,7 @@
     multiple = false,
     values = $bindable([]),
     onChange,
+    onItemChange,
     asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
@@ -40,13 +42,16 @@
     });
   };
 
-  const options = $derived(asOptions(data));
-
   const context = getFieldContext();
   const { invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
+  const options = $derived(asOptions(data));
 
-  const selectedLabel = $derived(asLabel(values));
+  const findOption = (value: string) => options.find((option) => option.value === value);
+  const valuesToOptions = (values: T[]) =>
+    values.map(findOption).filter((item): item is SelectItem<T> => Boolean(item));
+
+  const selectedLabel = $derived(asLabel(valuesToOptions(values)));
 
   const triggerStyles = tv({
     base: 'w-full gap-1 rounded-lg py-0 text-start focus-visible:outline-none',
@@ -68,15 +73,15 @@
     }
   });
 
-  const findOption = (value: string) => options.find((option) => option.value === value);
-
-  const onValueChange = (items: string[] | string) => {
-    values = (Array.isArray(items) ? items : [items]).map(findOption).filter((item) => item !== undefined);
+  const onValueChange = (newValues: string[] | string) => {
+    values = (Array.isArray(newValues) ? newValues : [newValues]) as T[];
+    const items = values.map((value) => findOption(value)).filter((item): item is SelectItem<T> => item !== undefined);
 
     onChange?.(values);
+    onItemChange?.(items);
   };
 
-  let internalValue = $derived(multiple ? values.map(({ value }) => value) : (values[0]?.value ?? ''));
+  let internalValue = $derived(multiple ? values : (values[0] ?? ''));
 </script>
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>

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

@@ -3,9 +3,10 @@ import { Select } from 'bits-ui';
 declare function $$render<T extends string>(): {
     props: {
         multiple?: boolean;
-        values: SelectItem<T>[];
+        values: T[];
         asLabel?: (items: SelectItem<T>[]) => string;
-        onChange?: (values: SelectItem<T>[]) => void;
+        onChange?: (values: T[]) => void;
+        onItemChange?: (items: SelectItem<T>[]) => void;
     } & SelectCommonProps<T>;
     exports: {};
     bindings: "values";

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

@@ -1,5 +1,5 @@
-import { type Component, type ComponentProps } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { type Component, type ComponentProps } from 'svelte';
 type OnCloseData<T> = T extends {
     onClose: (data: infer R) => void;
 } ? unknown extends R ? void : R : T extends {

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

@@ -1,5 +1,5 @@
-import { mount, unmount } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { mount, unmount } from 'svelte';
 class ModalManager {
     show(Component, ...props) {
         return this.open(Component, ...props).onClose;
@@ -10,8 +10,7 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                // make sure bits-ui clean up finishes before resolving
-                setTimeout(() => resolve(args[0]), 10);
+                resolve(args[0]);
             };
             modal = mount(Component, {
                 target: document.body,

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

@@ -8,6 +8,7 @@ declare class ToastManager {
     open(item: ToastItem, options?: ToastOptions): void;
     mount(): Promise<void>;
     unmount(): Promise<void>;
+    primary(item?: string | ToastShow, options?: ToastOptions): void;
     success(item?: string | ToastShow, options?: ToastOptions): void;
     info(item?: string | ToastShow, options?: ToastOptions): void;
     warning(item?: string | ToastShow, options?: ToastOptions): void;

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

@@ -48,6 +48,9 @@ class ToastManager {
             await unmount(this.#ref);
         }
     }
+    primary(item, options) {
+        this.show({ title: t('toast_success_title'), color: 'primary', ...expand(item) }, options);
+    }
     success(item, options) {
         this.show({ title: t('toast_success_title'), color: 'success', ...expand(item) }, options);
     }

package/dist/site/constants.d.ts

@@ -45,6 +45,6 @@ export declare const siteCommands: {
     iconClass: string;
     title: string;
     description: string;
-    onAction: () => any;
+    onAction: () => Promise<void>;
     searchText: string;
 }[];

package/dist/site/constants.js

@@ -1,5 +1,4 @@
-import { goto } from '$app/navigation';
-import { asText } from '../utilities/common.js';
+import { asText, navigateTo } from '../utilities/common.js';
 import { mdiOpenInNew } from '@mdi/js';
 export const Constants = {
     Socials: {
@@ -134,6 +133,6 @@ export const siteCommands = [
     iconClass: 'text-indigo-700 dark:text-indigo-200',
     title: site.title,
     description: site.description,
-    onAction: () => goto(site.href),
+    onAction: () => navigateTo(site.href),
     searchText: asText('Site', 'Link', site.title, site.description, site.href),
 }));

package/dist/state/modal-state.svelte.d.ts

@@ -0,0 +1,8 @@
+declare class ModalState {
+    #private;
+    get layer(): number;
+    incrementLayer(): number;
+    decrementLayer(): number;
+}
+export declare const modalState: ModalState;
+export {};

package/dist/state/modal-state.svelte.js

@@ -0,0 +1,16 @@
+class ModalState {
+    #layer = $state(0);
+    get layer() {
+        return this.#layer;
+    }
+    incrementLayer() {
+        return ++this.#layer;
+    }
+    decrementLayer() {
+        if (this.#layer < 1) {
+            throw new Error('Tried to decrement the modal layer <0');
+        }
+        return --this.#layer;
+    }
+}
+export const modalState = new ModalState();

package/dist/types.d.ts

@@ -165,12 +165,14 @@ export type SelectCommonProps<T extends string> = {
     class?: string;
 };
 export type SelectProps<T extends string> = SelectCommonProps<T> & {
-    value?: SelectItem<T>;
-    onChange?: (value: SelectItem<T>) => void;
+    value?: T;
+    onChange?: (value: T) => void;
+    onItemChange?: (item: SelectItem<T>) => void;
 };
 export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
-    values?: SelectItem<T>[];
-    onChange?: (values: SelectItem<T>[]) => void;
+    values?: T[];
+    onChange?: (values: T[]) => void;
+    onItemChange?: (items: SelectItem<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/dist/utilities/common.d.ts

@@ -1,5 +1,6 @@
 import { MenuItemType, type ActionItem, type IfLike } from '../types.js';
 import type { DateTime } from 'luxon';
+export declare const navigateTo: (url: string) => Promise<void>;
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
 export type Metadata = {

package/dist/utilities/common.js

@@ -1,3 +1,4 @@
+import { goto } from '$app/navigation';
 import { env } from '$env/dynamic/public';
 import { MenuItemType } from '../types.js';
 const getImmichApp = (host) => {
@@ -9,6 +10,16 @@ const getImmichApp = (host) => {
     }
     return host.split('.')[0];
 };
+export const navigateTo = async (url) => {
+    const resolvedUrl = resolveUrl(url);
+    const external = isExternalLink(resolvedUrl);
+    if (external) {
+        window.open(resolvedUrl, '_blank', 'noreferrer');
+    }
+    else {
+        await goto(resolvedUrl);
+    }
+};
 export const resolveUrl = (url, currentHostname) => {
     if (!isExternalLink(url)) {
         return url;

package/package.json

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