@immich/ui 0.54.0 → 0.56.0

package/dist/components/BasicModal/BasicModal.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Modal from '../Modal/Modal.svelte';
+  import ModalBody from '../Modal/ModalBody.svelte';
+  import ModalFooter from '../Modal/ModalFooter.svelte';
+  import { t } from '../../services/translation.svelte.js';
+  import type { Color, ModalSize } from '../../types.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    title: string;
+    icon?: string | boolean;
+    closeText?: string;
+    closeColor?: Color;
+    size?: ModalSize;
+    onClose: () => void;
+    children: Snippet;
+  };
+
+  let {
+    title,
+    icon,
+    closeText = t('close'),
+    closeColor = 'secondary',
+    size = 'small',
+    onClose = () => {},
+    children,
+  }: Props = $props();
+</script>
+
+<Modal {title} {onClose} {size} {icon}>
+  <ModalBody {children} />
+  <ModalFooter>
+    <Button shape="round" color={closeColor} fullWidth onclick={onClose}>
+      {closeText}
+    </Button>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,14 @@
+import type { Color, ModalSize } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    icon?: string | boolean;
+    closeText?: string;
+    closeColor?: Color;
+    size?: ModalSize;
+    onClose: () => void;
+    children: Snippet;
+};
+declare const BasicModal: import("svelte").Component<Props, {}, "">;
+type BasicModal = ReturnType<typeof BasicModal>;
+export default BasicModal;

package/dist/components/ConfirmModal/ConfirmModal.svelte

@@ -11,13 +11,12 @@
   interface Props {
     title?: string;
     icon?: string | boolean;
-    prompt?: string;
+    prompt?: string | Snippet;
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
     size?: ModalSize;
     onClose: (confirmed: boolean) => void;
-    promptSnippet?: Snippet;
   }
 
   let {
@@ -29,7 +28,6 @@
     disabled = false,
     size = 'small',
     onClose,
-    promptSnippet,
   }: Props = $props();
 
   const handleConfirm = () => {
@@ -39,8 +37,10 @@
 
 <Modal {title} onClose={() => onClose(false)} {size} {icon}>
   <ModalBody>
-    {#if promptSnippet}{@render promptSnippet()}{:else}
+    {#if typeof prompt === 'string'}
       <p>{prompt}</p>
+    {:else}
+      {@render prompt()}
     {/if}
   </ModalBody>
 

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

@@ -3,13 +3,12 @@ import type { Snippet } from 'svelte';
 interface Props {
     title?: string;
     icon?: string | boolean;
-    prompt?: string;
+    prompt?: string | Snippet;
     confirmText?: string;
     confirmColor?: Color;
     disabled?: boolean;
     size?: ModalSize;
     onClose: (confirmed: boolean) => void;
-    promptSnippet?: Snippet;
 }
 declare const ConfirmModal: import("svelte").Component<Props, {}, "">;
 type ConfirmModal = ReturnType<typeof ConfirmModal>;

package/dist/components/FormModal/FormModal.svelte

@@ -14,12 +14,15 @@
     icon?: string | boolean;
     submitText?: string;
     submitColor?: Color;
+    cancelText?: string;
+    cancelColor?: Color;
     disabled?: boolean;
     size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
+    onReset?: (event: Event) => void;
     onSubmit: (event: SubmitEvent) => void;
-    children: Snippet;
+    children: Snippet<[{ formId: string }]>;
   };
 
   let {
@@ -27,10 +30,13 @@
     icon,
     submitText = t('save'),
     submitColor = 'primary',
+    cancelText = t('cancel'),
+    cancelColor = 'secondary',
     disabled = false,
     size = 'small',
     preventDefault = true,
     onClose = () => {},
+    onReset,
     onSubmit,
     children,
   }: Props = $props();
@@ -43,19 +49,27 @@
     onSubmit(event);
   };
 
+  const onreset = (event: Event) => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+
+    onReset?.(event);
+  };
+
   const formId = generateId();
 </script>
 
 <Modal {title} {onClose} {size} {icon}>
   <ModalBody>
-    <form {onsubmit} id={formId}>
-      {@render children()}
+    <form {onsubmit} {onreset} id={formId}>
+      {@render children({ formId })}
     </form>
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={onClose}>
-        {t('cancel')}
+      <Button shape="round" color={cancelColor} fullWidth onclick={onClose}>
+        {cancelText}
       </Button>
       <Button shape="round" type="submit" tabindex={1} color={submitColor} fullWidth {disabled} form={formId}>
         {submitText}

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

@@ -5,12 +5,17 @@ type Props = {
     icon?: string | boolean;
     submitText?: string;
     submitColor?: Color;
+    cancelText?: string;
+    cancelColor?: Color;
     disabled?: boolean;
     size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
+    onReset?: (event: Event) => void;
     onSubmit: (event: SubmitEvent) => void;
-    children: Snippet;
+    children: Snippet<[{
+        formId: string;
+    }]>;
 };
 declare const FormModal: import("svelte").Component<Props, {}, "">;
 type FormModal = ReturnType<typeof FormModal>;

package/dist/components/Textarea/Textarea.svelte

@@ -59,6 +59,17 @@
       element.style.minHeight = '0';
       element.style.height = 'auto';
       element.style.height = `${element.scrollHeight}px`;
+
+      // Show scrollbar only if there is a max-height and content exceeds it
+      const maxHeight = Number.parseFloat(getComputedStyle(element).maxHeight);
+      const hasMaxHeight = maxHeight !== undefined;
+      if (hasMaxHeight && element.scrollHeight > maxHeight) {
+        element.style.overflow = 'auto';
+      } else if (hasMaxHeight && element.scrollHeight <= maxHeight) {
+        element.style.overflow = 'hidden';
+      } else {
+        element.style.overflow = '';
+      }
     }
   };
 

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as BasicModal } from './components/BasicModal/BasicModal.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as BasicModal } from './components/BasicModal/BasicModal.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.1.0"
   },
   "volta": {
-    "node": "24.11.1"
+    "node": "24.12.0"
   },
   "scripts": {
     "create": "node scripts/create.js",