@immich/ui 0.61.4 → 0.62.1

package/dist/actions/shortcut.js

@@ -1,3 +1,4 @@
+import { on } from 'svelte/events';
 export const shortcutLabel = (shortcut) => {
     let label = '';
     if (shortcut.ctrl) {
@@ -71,6 +72,9 @@ export const shortcut = (node, option) => {
 /** Binds multiple keyboard shortcuts to node */
 export const shortcuts = (node, options) => {
     function onKeydown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         const ignoreShortcut = shouldIgnoreEvent(event);
         for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
             if (ignoreInputFields && ignoreShortcut) {
@@ -85,13 +89,13 @@ export const shortcuts = (node, options) => {
             }
         }
     }
-    node.addEventListener('keydown', onKeydown);
+    const off = on(node, 'keydown', onKeydown);
     return {
         update(newOptions) {
             options = newOptions;
         },
         destroy() {
-            node.removeEventListener('keydown', onKeydown);
+            off();
         },
     };
 };

package/dist/common/context.svelte.d.ts

@@ -58,12 +58,6 @@ export declare const getFieldContext: () => () => {
     'bind:focused'?: boolean | undefined | null;
     'bind:offsetWidth'?: number | undefined | null;
     'bind:offsetHeight'?: number | undefined | null;
-    'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
-    'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
-    'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
     'aria-activedescendant'?: string | undefined | null;
     'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;

package/dist/components/Card/Card.svelte

@@ -2,6 +2,7 @@
   import { setChildContext } from '../../common/context.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
   import { ChildKey } from '../../constants.js';
+  import { t } from '../../services/translation.svelte.js';
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
@@ -114,7 +115,7 @@
           variant="ghost"
           shape="round"
           size="large"
-          aria-label="Expand"
+          aria-label={t('expand')}
         />
       </div>
     </button>

package/dist/components/Modal/Modal.svelte

@@ -89,6 +89,11 @@
     }
   };
 
+  const handleEscapeKeydown = (event: KeyboardEvent) => {
+    event.stopImmediatePropagation();
+    onEscapeKeydown?.(event);
+  };
+
   onMount(() => {
     layer = modalState.incrementLayer();
 
@@ -100,7 +105,7 @@
   <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
-      {onEscapeKeydown}
+      onEscapeKeydown={handleEscapeKeydown}
       {escapeKeydownBehavior}
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}

package/dist/index.d.ts

@@ -102,8 +102,10 @@ export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
+export * from './state/locale-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/index.js

@@ -105,9 +105,11 @@ export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
+export * from './state/locale-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 // site
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/internal/DatePicker.svelte

@@ -4,6 +4,8 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Label from '../components/Label/Label.svelte';
   import { zIndex } from '../constants.js';
+  import { t } from '../services/translation.svelte.js';
+  import { getLocale } from '../state/locale-state.svelte.js';
   import { styleVariants } from '../styles.js';
   import type { Shape, Size } from '../types.js';
   import { cleanClass, generateId } from '../utilities/internal.js';
@@ -75,6 +77,7 @@
     maxValue={maxDate}
     bind:value={date}
     readonly={readOnly}
+    locale={getLocale()}
     {disabled}
   >
     <DatePicker.Input
@@ -102,7 +105,7 @@
             {size}
             icon={mdiCalendar}
             {disabled}
-            aria-label="Open calendar"
+            aria-label={t('open_calendar')}
           />
         </DatePicker.Trigger>
       {/snippet}

package/dist/internal/Select.svelte

@@ -4,6 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import { zIndex } from '../constants.js';
+  import { t } from '../services/translation.svelte.js';
   import type { SelectCommonProps, SelectOption } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
@@ -107,7 +108,7 @@
             class="m-1"
             icon={mdiChevronDown}
             {disabled}
-            aria-label="Expand"
+            aria-label={t('expand')}
           />
         {/snippet}
       </Input>

package/dist/services/command-palette-manager.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ActionItem, MaybePromise, TranslationProps } from '../types.js';
-export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all' | 'global'>;
+export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
 export type ActionProvider = {
     name: string;
     onSearch: (query?: string) => MaybePromise<ActionItem[]>;

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

@@ -1,8 +1,10 @@
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
 import { modalManager } from './modal-manager.svelte.js';
+import { isModalOpen } from '../state/modal-state.svelte.js';
 import { isEnabled } from '../utilities/common.js';
 import { asArray, generateId, getSearchString } from '../utilities/internal.js';
+import { on } from 'svelte/events';
 export const defaultProvider = ({ name, actions }) => ({
     name,
     onSearch: (query) => query ? actions.filter((action) => getSearchString(action).includes(query.toLowerCase())) : actions,
@@ -30,7 +32,7 @@ class CommandPaletteManager {
                 { shortcut: { key: 'k', ctrl: true }, onShortcut: () => this.open() },
                 { shortcut: { key: '/' }, preventDefault: true, onShortcut: () => this.open() },
             ]);
-            document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
+            on(document.body, 'keydown', (event) => this.#handleKeydown(event));
         }
     }
     setTranslations(translations = {}) {
@@ -51,6 +53,9 @@ class CommandPaletteManager {
         void this.#onSearch(query);
     }
     async #handleKeydown(event) {
+        if (event.defaultPrevented || isModalOpen()) {
+            return;
+        }
         const actions = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch())));
         for (const action of actions.flat()) {
             if (!asArray(action.shortcuts).some((shortcut) => matchesShortcut(event, shortcut))) {
@@ -67,6 +72,7 @@ class CommandPaletteManager {
                 event.preventDefault();
             }
             action?.onAction(action);
+            return;
         }
     }
     async #onClose(action) {

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

@@ -9,7 +9,6 @@ declare const defaultTranslations: {
     code_copied: string;
     search_placeholder: string;
     search_no_results: string;
-    search_recently_used: string;
     prompt_default: string;
     show_password: string;
     hide_password: string;
@@ -22,13 +21,13 @@ declare const defaultTranslations: {
     command_palette_to_show_all: string;
     navigate_next: string;
     navigate_previous: string;
+    open_calendar: string;
     toast_success_title: string;
     toast_info_title: string;
     toast_warning_title: string;
     toast_danger_title: string;
     save: string;
     supporter: string;
-    global: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -11,7 +11,6 @@ const defaultTranslations = {
     // search
     search_placeholder: 'Search...',
     search_no_results: 'No results',
-    search_recently_used: 'Recently used',
     // modal
     prompt_default: 'Are you sure you want to do this?',
     // password input
@@ -30,13 +29,14 @@ const defaultTranslations = {
     // navigation
     navigate_next: 'Next',
     navigate_previous: 'Previous',
+    // date picker
+    open_calendar: 'Open calendar',
     toast_success_title: 'Success',
     toast_info_title: 'Info',
     toast_warning_title: 'Warning',
     toast_danger_title: 'Error',
     save: 'Save',
     supporter: 'Supporter',
-    global: 'Global',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

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

@@ -0,0 +1,2 @@
+export declare const getLocale: () => string | undefined;
+export declare const setLocale: (newLocale: string) => void;

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

@@ -0,0 +1,5 @@
+let locale = $state();
+export const getLocale = () => locale;
+export const setLocale = (newLocale) => {
+    locale = newLocale;
+};

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

@@ -5,4 +5,5 @@ declare class ModalState {
     decrementLayer(): number;
 }
 export declare const modalState: ModalState;
+export declare const isModalOpen: () => boolean;
 export {};

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

@@ -14,3 +14,4 @@ class ModalState {
     }
 }
 export const modalState = new ModalState();
+export const isModalOpen = () => modalState.layer > 0;

package/package.json

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