@immich/ui 0.34.0 → 0.34.2

package/dist/components/Card/Card.svelte

@@ -32,7 +32,7 @@
   }: Props = $props();
 
   const containerStyles = tv({
-    base: 'w-full overflow-hidden shadow-sm',
+    base: 'flex w-full overflow-hidden shadow-sm',
     variants: {
       shape: {
         rectangle: '',
@@ -46,7 +46,7 @@
   });
 
   const cardStyles = tv({
-    base: 'flex h-full w-full flex-col',
+    base: 'flex grow flex-col',
     variants: {
       color: {
         primary: 'bg-primary/25 dark:bg-primary/25',

package/dist/components/Modal/Modal.svelte

@@ -25,11 +25,13 @@
     closeOnBackdropClick?: boolean;
     children: Snippet;
     onClose?: () => void;
+    onEscapeKeydown?: (event: KeyboardEvent) => void;
   };
 
   let {
     size = 'medium',
     onClose,
+    onEscapeKeydown,
     icon = true,
     title,
     class: className,
@@ -52,6 +54,20 @@
     },
   });
 
+  const modalContentStyles = tv({
+    base: 'fixed inset-0 m-auto flex max-h-dvh grow sm:p-4',
+    variants: {
+      size: {
+        tiny: 'sm:h-min md:max-w-sm',
+        small: 'sm:h-min md:max-w-md',
+        medium: 'sm:h-min md:max-w-(--breakpoint-sm)',
+        large: 'sm:h-min md:max-w-(--breakpoint-md)',
+        giant: 'sm:h-min md:max-w-(--breakpoint-lg)',
+        full: '',
+      },
+    },
+  });
+
   const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
   const headerChildren = $derived(getChildSnippet(ChildKey.ModalHeader));
   const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
@@ -67,32 +83,20 @@
 
   let cardRef = $state<HTMLElement | null>(null);
 
-  const handleCloseOnClick = (event: Event) => {
-    if (!closeOnBackdropClick || cardRef?.contains(event.target as Node)) {
-      return;
-    }
-
-    onClose?.();
-  };
+  const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
+  const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
 </script>
 
-<Dialog.Root open={true}>
+<Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
   <Dialog.Portal>
-    <Dialog.Overlay class="fixed start-0 top-0 flex h-dvh w-screen bg-black/30" />
+    <Dialog.Overlay class="fixed start-0 top-0 flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
-      onkeydown={(e) => {
-        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')}
+      {onEscapeKeydown}
+      {escapeKeydownBehavior}
+      {interactOutsideBehavior}
+      class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex h-full w-full flex-col items-center justify-center')}>
+      <div class={cleanClass('flex grow flex-col justify-center')}>
         <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
           <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
             {#if headerChildren}

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

@@ -10,6 +10,7 @@ type Props = {
     closeOnBackdropClick?: boolean;
     children: Snippet;
     onClose?: () => void;
+    onEscapeKeydown?: (event: KeyboardEvent) => void;
 };
 declare const Modal: import("svelte").Component<Props, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "license": "GNU Affero General Public License version 3",
   "scripts": {
     "create": "node scripts/create.js",
@@ -60,7 +60,6 @@
     "publint": "^0.3.0",
     "svelte": "^5.37.0",
     "svelte-check": "^4.0.0",
-    "svelte-highlight": "^7.8.4",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.34.1",
@@ -68,6 +67,7 @@
     "vitest": "^3.0.0"
   },
   "dependencies": {
+    "svelte-highlight": "^7.8.4",
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
     "luxon": "^3.7.2",
@@ -76,6 +76,6 @@
     "tailwind-variants": "^3.0.0"
   },
   "volta": {
-    "node": "22.19.0"
+    "node": "22.20.0"
   }
 }