@immich/ui 0.53.3 → 0.55.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/ContextMenu/ContextMenu.svelte

@@ -4,8 +4,8 @@
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
   import { type ActionItem, type ContextMenuProps, type MenuItems } from '../../types.js';
-  import { isMenuItemType } from '../../utilities/common.js';
-  import { cleanClass, isEnabled } from '../../utilities/internal.js';
+  import { isEnabled, isMenuItemType } from '../../utilities/common.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
   import { tv } from 'tailwind-variants';

package/dist/components/FormModal/FormModal.svelte

@@ -18,8 +18,9 @@
     size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
+    onReset?: (event: Event) => void;
     onSubmit: (event: SubmitEvent) => void;
-    children: Snippet;
+    children: Snippet<[{ formId: string }]>;
   };
 
   let {
@@ -31,6 +32,7 @@
     size = 'small',
     preventDefault = true,
     onClose = () => {},
+    onReset,
     onSubmit,
     children,
   }: Props = $props();
@@ -43,13 +45,21 @@
     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>

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

@@ -9,8 +9,11 @@ type Props = {
     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/ImageCarousel/ImageCarousel.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { zIndex } from '../../constants.js';
+  import { t } from '../../services/translation.svelte.js';
+  import type { CarouselImageItem, TranslationProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  type Props = {
+    items: CarouselImageItem[];
+    scrollBy?: number;
+    translations?: TranslationProps<'navigate_next' | 'navigate_previous'>;
+    class?: string;
+    child?: Snippet<[CarouselImageItem]>;
+  };
+
+  const { items, scrollBy = 400, translations, class: className, child = defaultChild }: Props = $props();
+
+  let shouldRender = $derived(items.length > 0);
+
+  let ref: HTMLElement | undefined = $state();
+  let offsetWidth = $state(0);
+  let innerWidth = $state(0);
+  let scrollPosition = $state(0);
+
+  let canScrollLeft = $derived(scrollPosition > 0);
+  let canScrollRight = $derived(Math.ceil(scrollPosition) < Math.floor(innerWidth - offsetWidth));
+
+  const onScroll = () => {
+    scrollPosition = ref?.scrollLeft ?? 0;
+  };
+
+  const scrollLeft = () => ref?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
+  const scrollRight = () => ref?.scrollBy({ left: scrollBy, behavior: 'smooth' });
+</script>
+
+{#snippet defaultChild(item: CarouselImageItem)}
+  <a
+    class="item-card relative me-2 inline-block aspect-3/4 h-54 rounded-xl last:me-0 max-md:h-37.5 md:me-4 md:aspect-4/3 xl:aspect-video"
+    href={item.href}
+  >
+    <img class="h-full w-full rounded-xl object-cover" src={item.src} alt={item.alt ?? item.title} draggable="false" />
+    <div
+      class="absolute start-0 top-0 h-full w-full rounded-xl bg-linear-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
+    ></div>
+    <p class="absolute start-4 bottom-2 text-lg text-white max-md:text-sm">
+      {item.title}
+    </p>
+  </a>
+{/snippet}
+
+{#if shouldRender}
+  <section
+    bind:this={ref}
+    bind:clientWidth={offsetWidth}
+    class={cleanClass('relative mt-3 overflow-x-scroll overflow-y-hidden whitespace-nowrap transition-all', className)}
+    style="scrollbar-width:none"
+    onscroll={onScroll}
+  >
+    {#if canScrollLeft || canScrollRight}
+      <div class="sticky start-0 {zIndex.CarouselImage}">
+        {#if canScrollLeft}
+          <div class="light absolute start-4 top-27 -translate-y-1/2 max-md:top-19" transition:fade={{ duration: 200 }}>
+            <IconButton
+              icon={mdiChevronLeft}
+              shape="round"
+              variant="outline"
+              color="secondary"
+              class="opacity-50 hover:opacity-100"
+              size="giant"
+              aria-label={t('navigate_previous', translations)}
+              onclick={scrollLeft}
+            />
+          </div>
+        {/if}
+        {#if canScrollRight}
+          <div
+            class="light absolute end-4 top-27 {zIndex.CarouselImage} -translate-y-1/2 max-md:top-19"
+            transition:fade={{ duration: 200 }}
+          >
+            <IconButton
+              icon={mdiChevronRight}
+              shape="round"
+              variant="outline"
+              color="secondary"
+              class="opacity-50 hover:opacity-100"
+              size="giant"
+              aria-label={t('navigate_next', translations)}
+              onclick={scrollRight}
+            />
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <div class="inline-block" bind:clientWidth={innerWidth}>
+      {#each items as item, i (item.id ?? i)}
+        {@render child(item)}
+      {/each}
+    </div>
+  </section>
+{/if}
+
+<style>
+  .item-card {
+    box-shadow:
+      rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { CarouselImageItem, TranslationProps } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    items: CarouselImageItem[];
+    scrollBy?: number;
+    translations?: TranslationProps<'navigate_next' | 'navigate_previous'>;
+    class?: string;
+    child?: Snippet<[CarouselImageItem]>;
+};
+declare const ImageCarousel: import("svelte").Component<Props, {}, "">;
+type ImageCarousel = ReturnType<typeof ImageCarousel>;
+export default ImageCarousel;

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/constants.d.ts

@@ -14,6 +14,7 @@ export declare enum ChildKey {
     ModalFooter = "modal-footer"
 }
 export declare const zIndex: {
+    CarouselImage: string;
     AppShellSidebar: string;
     ModalBackdrop: string;
     ModalContent: string;

package/dist/constants.js

@@ -15,6 +15,7 @@ export var ChildKey;
     ChildKey["ModalFooter"] = "modal-footer";
 })(ChildKey || (ChildKey = {}));
 export const zIndex = {
+    CarouselImage: 'z-1',
     AppShellSidebar: 'z-30',
     ModalBackdrop: 'z-40',
     ModalContent: 'z-50',

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';
@@ -42,6 +43,7 @@ export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as ImageCarousel } from './components/ImageCarousel/ImageCarousel.svelte';
 export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
@@ -76,6 +78,7 @@ export { default as ToastContent } from './components/Toast/ToastContent.svelte'
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
 export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
 export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
+export * from './actions/shortcut.js';
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';

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';
@@ -44,6 +45,7 @@ export { default as Heading } from './components/Heading/Heading.svelte';
 export { default as HelperText } from './components/HelperText/HelperText.svelte';
 export { default as Icon } from './components/Icon/Icon.svelte';
 export { default as IconButton } from './components/IconButton/IconButton.svelte';
+export { default as ImageCarousel } from './components/ImageCarousel/ImageCarousel.svelte';
 export { default as Input } from './components/Input/Input.svelte';
 export { default as Kbd } from './components/Kbd/Kbd.svelte';
 export { default as Label } from './components/Label/Label.svelte';
@@ -79,6 +81,7 @@ export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
 export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
 export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
 // helpers
+export * from './actions/shortcut.js';
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';

package/dist/services/command-palette-manager.svelte.js

@@ -1,7 +1,8 @@
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
 import { modalManager } from './modal-manager.svelte.js';
-import { asArray, generateId, getSearchString, isEnabled } from '../utilities/internal.js';
+import { isEnabled } from '../utilities/common.js';
+import { asArray, generateId, getSearchString } from '../utilities/internal.js';
 export const defaultProvider = ({ name, actions }) => ({
     name,
     onSearch: (query) => query ? actions.filter((action) => getSearchString(action).includes(query.toLowerCase())) : actions,

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

@@ -18,6 +18,8 @@ declare const defaultTranslations: {
     command_palette_to_navigate: string;
     command_palette_to_close: string;
     command_palette_to_show_all: string;
+    navigate_next: string;
+    navigate_previous: string;
     toast_success_title: string;
     toast_info_title: string;
     toast_warning_title: string;

package/dist/services/translation.svelte.js

@@ -25,6 +25,9 @@ const defaultTranslations = {
     command_palette_to_navigate: 'to navigate',
     command_palette_to_close: 'to close',
     command_palette_to_show_all: 'to show all',
+    // navigation
+    navigate_next: 'Next',
+    navigate_previous: 'Previous',
     toast_success_title: 'Success',
     toast_info_title: 'Info',
     toast_warning_title: 'Warning',

package/dist/types.d.ts

@@ -275,4 +275,11 @@ export type BreadcrumbItem = {
     title?: string;
     icon: IconLike;
 });
+export type CarouselImageItem = {
+    title: string;
+    href: string;
+    src: string;
+    alt?: string;
+    id?: string;
+};
 export {};

package/dist/utilities/common.d.ts

@@ -1,4 +1,4 @@
-import { MenuItemType, type ActionItem } from '../types.js';
+import { MenuItemType, type ActionItem, type IfLike } from '../types.js';
 import type { DateTime } from 'luxon';
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
@@ -32,3 +32,4 @@ export declare const resolveMetadata: (site: Metadata, page?: Metadata, article?
     } | undefined;
 };
 export declare const asText: (...items: unknown[]) => string;
+export declare const isEnabled: ({ $if }: IfLike) => boolean;

package/dist/utilities/common.js

@@ -67,3 +67,9 @@ export const asText = (...items) => {
         .join('|')
         .toLowerCase();
 };
+export const isEnabled = ({ $if }) => {
+    if (!$if) {
+        return true;
+    }
+    return !!$if();
+};

package/dist/utilities/internal.d.ts

@@ -1,4 +1,4 @@
-import type { ActionItem, Color, IconLike, IfLike, MaybeArray, TextColor } from '../types.js';
+import type { ActionItem, Color, IconLike, MaybeArray, TextColor } from '../types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;
@@ -9,6 +9,5 @@ export declare const resolveIcon: ({ icons, color, override, fallback, }: {
     override?: IconLike | false;
     icons: Partial<Record<Color | TextColor, string>>;
 }) => IconLike | undefined;
-export declare const isEnabled: ({ $if }: IfLike) => boolean;
 export declare const asArray: <T>(items?: MaybeArray<T>) => T[];
 export declare const getSearchString: ({ title, description, type, searchText }: ActionItem) => string;

package/dist/utilities/internal.js

@@ -25,6 +25,5 @@ export const resolveIcon = ({ icons, color, override, fallback, }) => {
     }
     return icons[color] ?? fallback;
 };
-export const isEnabled = ({ $if }) => $if?.() ?? true;
 export const asArray = (items) => (Array.isArray(items) ? items : items ? [items] : []);
 export const getSearchString = ({ title, description, type, searchText }) => searchText ?? asText(title, description, type);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.53.3",
+  "version": "0.55.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",