@immich/ui 0.36.0 → 0.37.0

package/dist/components/AnnouncementBanner/AnnouncementBanner.svelte

@@ -5,7 +5,8 @@
   import type { IconLike, Size, TextColor } from '../../types.js';
   import { cleanClass, resolveIcon } from '../../utilities/internal.js';
   import { mdiAlertCircleOutline, mdiAlertOutline, mdiCheckAll, mdiInformationOutline, mdiPartyPopper } from '@mdi/js';
-  import type { Snippet } from 'svelte';
+  import { DateTime } from 'luxon';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -13,6 +14,8 @@
     color?: TextColor;
     size?: Size;
     icon?: IconLike | false;
+    since?: DateTime;
+    until?: DateTime;
     center?: boolean;
     children?: Snippet;
     content?: Snippet;
@@ -26,13 +29,13 @@
         false: '',
       },
       color: {
-        primary: 'bg-primary/15 text-primary dark:bg-primary/10',
-        secondary: 'bg-dark/15 text-dark dark:bg-dark/10',
+        primary: 'bg-primary/20 text-primary dark:bg-primary/25',
+        secondary: 'bg-dark/20 text-dark dark:bg-dark/25',
         muted: 'bg-subtle text-subtle dark:bg-subtle',
-        info: 'bg-info/15 text-info dark:bg-info/10',
-        warning: 'bg-warning/15 text-warning dark:bg-warning/10',
-        danger: 'bg-danger/15 text-danger dark:bg-danger/10',
-        success: 'bg-success/15 text-success dark:bg-success/10',
+        info: 'bg-info/20 text-info dark:bg-info/25',
+        warning: 'bg-warning/20 text-warning dark:bg-warning/25',
+        danger: 'bg-danger/20 text-danger dark:bg-danger/25',
+        success: 'bg-success/20 text-success dark:bg-success/25',
       },
     },
   });
@@ -43,6 +46,8 @@
     class: className,
     center = false,
     icon: iconOverride,
+    since,
+    until,
     content,
     children,
     ...restProps
@@ -75,19 +80,37 @@
       },
     },
   });
+
+  let now = $state(DateTime.now());
+  let isStarted = $derived(since ? now >= since : true);
+  let isFinished = $derived(until ? now <= until : true);
+  let isVisible = $derived(isStarted && isFinished);
+  let timer: ReturnType<typeof setInterval>;
+
+  onMount(() => {
+    timer = setInterval(() => (now = DateTime.now()), 1000);
+  });
+
+  onDestroy(() => {
+    if (timer) {
+      clearInterval(timer);
+    }
+  });
 </script>
 
-<div class={cleanClass(styles({ color, center }), className)} {...restProps}>
-  {#if content}
-    {@render content()}
-  {:else}
-    <div class="flex items-center gap-2">
-      {#if icon}
-        <Icon {icon} class={iconStyles({ color, size })} />
-      {/if}
-      <Text color="secondary" {size}>
-        {@render children?.()}
-      </Text>
-    </div>
-  {/if}
-</div>
+{#if isVisible}
+  <div class={cleanClass(styles({ color, center }), className)} {...restProps}>
+    {#if content}
+      {@render content()}
+    {:else}
+      <div class="flex items-center gap-2">
+        {#if icon}
+          <Icon {icon} class={iconStyles({ color, size })} />
+        {/if}
+        <Text color="secondary" {size}>
+          {@render children?.()}
+        </Text>
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -1,10 +1,13 @@
 import type { IconLike, Size, TextColor } from '../../types.js';
-import type { Snippet } from 'svelte';
+import { DateTime } from 'luxon';
+import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = {
     color?: TextColor;
     size?: Size;
     icon?: IconLike | false;
+    since?: DateTime;
+    until?: DateTime;
     center?: boolean;
     children?: Snippet;
     content?: Snippet;

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -58,11 +58,11 @@
 
 <svelte:window
   use:shortcuts={[
-    { shortcut: { key: 'k', meta: true }, preventDefault: true, onShortcut: handleOpen },
-    { shortcut: { key: 'k', ctrl: true }, preventDefault: true, onShortcut: handleOpen },
+    { shortcut: { key: 'k', meta: true }, onShortcut: handleOpen },
+    { shortcut: { key: 'k', ctrl: true }, onShortcut: handleOpen },
     { shortcut: { key: '/' }, preventDefault: true, onShortcut: handleOpen },
-    { shortcut: { key: 'ArrowUp' }, ignoreInputFields: false, onShortcut: handleUp },
-    { shortcut: { key: 'ArrowDown' }, ignoreInputFields: false, onShortcut: handleDown },
+    { shortcut: { key: 'ArrowUp' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleUp },
+    { shortcut: { key: 'ArrowDown' }, preventDefault: false, ignoreInputFields: false, onShortcut: handleDown },
     { shortcut: { key: 'k', ctrl: true }, ignoreInputFields: false, onShortcut: handleUp },
     { shortcut: { key: 'k', meta: true }, ignoreInputFields: false, onShortcut: handleUp },
     { shortcut: { key: 'j', ctrl: true }, ignoreInputFields: false, onShortcut: handleDown },

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import type { NumberInputProps } from '../../types.js';
+
+  let { value = $bindable<number>(), color = 'secondary', size, ...props }: NumberInputProps = $props();
+
+  const getValue = () => String(value ?? 0);
+  const setValue = (newValue: string) => {
+    const parsed = parseFloat(newValue);
+    if (isNaN(parsed)) {
+      return;
+    }
+    value = parsed;
+  };
+</script>
+
+<Input bind:value={getValue, setValue} {size} type="number" {color} {...props} />

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

@@ -0,0 +1,4 @@
+import type { NumberInputProps } from '../../types.js';
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';

package/dist/index.js

@@ -51,6 +51,7 @@ export { default as ModalHeader } from './components/Modal/ModalHeader.svelte';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.svelte';
 export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
+export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';

package/dist/types.d.ts

@@ -102,23 +102,23 @@ export type FieldContext = {
     required?: boolean;
     readOnly?: boolean;
 } & LabelProps;
-type BaseInputProps = {
+type BaseInputProps<T> = {
     ref?: HTMLInputElement | null;
     class?: string;
-    value?: string;
     size?: Size;
+    value?: T;
     shape?: Shape;
     inputSize?: HTMLInputAttributes['size'];
-} & Omit<HTMLInputAttributes, 'size' | 'type'>;
-export type InputProps = BaseInputProps & {
-    containerRef?: HTMLElement | null;
-    type?: HTMLInputAttributes['type'];
     leadingIcon?: IconLike | Snippet;
     trailingIcon?: IconLike | Snippet;
     trailingText?: string;
+    containerRef?: HTMLElement | null;
+} & Omit<HTMLInputAttributes, 'size' | 'type' | 'value'>;
+export type InputProps = BaseInputProps<string> & {
+    type?: HTMLInputAttributes['type'];
 };
-export type PasswordInputProps = BaseInputProps & {
-    ref?: HTMLInputElement | null;
+export type NumberInputProps = BaseInputProps<number>;
+export type PasswordInputProps = BaseInputProps<string> & {
     translations?: TranslationProps<'show_password' | 'hide_password'>;
     isVisible?: boolean;
 };

package/dist/utilities/common.d.ts

@@ -1,4 +1,4 @@
-import { DateTime } from 'luxon';
+import type { DateTime } from 'luxon';
 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,5 +1,4 @@
 import { env } from '$env/dynamic/public';
-import { DateTime } from 'luxon';
 const getImmichApp = (host) => {
     if (!host || !host.endsWith('immich.app')) {
         return false;

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@immich/ui",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "license": "GNU Affero General Public License version 3",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/immich-app/ui.git"
+  },
   "scripts": {
     "create": "node scripts/create.js",
     "start": "npm run start:dev",