@immich/ui 0.58.2 → 0.58.4

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -1,12 +1,16 @@
 <script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
-  import type { MultiSelectProps, SelectItem } from '../../types.js';
+  import type { MultiSelectProps, SelectOption } from '../../types.js';
 
-  let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
+  let { onChange, onSelect, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    onChange?.(items);
+  const handleChange = (values: T[]) => {
+    onChange?.(values);
+  };
+
+  const handleSelect = (items: SelectOption<T>[]) => {
+    onSelect?.(items);
   };
 </script>
 
-<InternalSelect multiple bind:values onChange={handleChange} {...restProps} />
+<InternalSelect multiple bind:values onSelect={handleSelect} onChange={handleChange} {...restProps} />

package/dist/components/Select/Select.svelte

@@ -1,15 +1,19 @@
 <script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
-  import type { SelectItem, SelectProps } from '../../types.js';
+  import type { SelectOption, SelectProps } from '../../types.js';
 
-  let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+  let { onChange, onSelect, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
-  let values = $derived(value ? [value] : []);
+  let values = $derived(value === null || value === undefined ? [] : [value]);
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    value = items[0];
+  const handleChange = (values: T[]) => {
+    value = values[0];
     onChange?.(value);
   };
+
+  const handleSelect = (items: SelectOption<T>[]) => {
+    onSelect?.(items[0]);
+  };
 </script>
 
-<InternalSelect bind:values onChange={handleChange} {...restProps} />
+<InternalSelect bind:values onChange={handleChange} onSelect={handleSelect} {...restProps} />

package/dist/internal/Select.svelte

@@ -4,7 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import { zIndex } from '../constants.js';
-  import type { SelectCommonProps, SelectItem } from '../types.js';
+  import type { SelectCommonProps, SelectOption } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
   import { Select } from 'bits-ui';
@@ -12,27 +12,29 @@
 
   type Props = {
     multiple?: boolean;
-    values: SelectItem<T>[];
-    asLabel?: (items: SelectItem<T>[]) => string;
-    onChange?: (values: SelectItem<T>[]) => void;
+    values: T[];
+    asLabel?: (items: SelectOption<T>[]) => string;
+    onChange?: (values: T[]) => void;
+    onSelect?: (items: SelectOption<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
-    data,
+    options: optionsOrItems,
     shape,
     size: initialSize,
     multiple = false,
     values = $bindable([]),
     onChange,
-    asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
+    onSelect: onItemChange,
+    asLabel = (options: SelectOption<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
   }: Props = $props();
 
-  const asOptions = (items: string[] | SelectItem<T>[]) => {
+  const asOptions = (items: string[] | SelectOption<T>[]) => {
     return items.map((item) => {
       if (typeof item === 'string') {
-        return { value: item, label: item } as SelectItem<T>;
+        return { value: item, label: item } as SelectOption<T>;
       }
 
       const label = item.label ?? item.value;
@@ -40,13 +42,16 @@
     });
   };
 
-  const options = $derived(asOptions(data));
-
   const context = getFieldContext();
   const { invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
+  const options = $derived(asOptions(optionsOrItems));
+
+  const findOption = (value: string) => options.find((option) => option.value === value);
+  const valuesToOptions = (values: T[]) =>
+    values.map(findOption).filter((item): item is SelectOption<T> => Boolean(item));
 
-  const selectedLabel = $derived(asLabel(values));
+  const selectedLabel = $derived(asLabel(valuesToOptions(values)));
 
   const triggerStyles = tv({
     base: 'w-full gap-1 rounded-lg py-0 text-start focus-visible:outline-none',
@@ -68,15 +73,17 @@
     }
   });
 
-  const findOption = (value: string) => options.find((option) => option.value === value);
-
-  const onValueChange = (items: string[] | string) => {
-    values = (Array.isArray(items) ? items : [items]).map(findOption).filter((item) => item !== undefined);
+  const onValueChange = (newValues: string[] | string) => {
+    values = (Array.isArray(newValues) ? newValues : [newValues]) as T[];
+    const items = values
+      .map((value) => findOption(value))
+      .filter((item): item is SelectOption<T> => item !== undefined);
 
     onChange?.(values);
+    onItemChange?.(items);
   };
 
-  let internalValue = $derived(multiple ? values.map(({ value }) => value) : (values[0]?.value ?? ''));
+  let internalValue = $derived(multiple ? values : (values[0] ?? ''));
 </script>
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>

package/dist/internal/Select.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { SelectCommonProps, SelectItem } from '../types.js';
+import type { SelectCommonProps, SelectOption } from '../types.js';
 import { Select } from 'bits-ui';
 declare function $$render<T extends string>(): {
     props: {
         multiple?: boolean;
-        values: SelectItem<T>[];
-        asLabel?: (items: SelectItem<T>[]) => string;
-        onChange?: (values: SelectItem<T>[]) => void;
+        values: T[];
+        asLabel?: (items: SelectOption<T>[]) => string;
+        onChange?: (values: T[]) => void;
+        onSelect?: (items: SelectOption<T>[]) => void;
     } & SelectCommonProps<T>;
     exports: {};
     bindings: "values";

package/dist/services/toast-manager.svelte.d.ts

@@ -8,6 +8,7 @@ declare class ToastManager {
     open(item: ToastItem, options?: ToastOptions): void;
     mount(): Promise<void>;
     unmount(): Promise<void>;
+    primary(item?: string | ToastShow, options?: ToastOptions): void;
     success(item?: string | ToastShow, options?: ToastOptions): void;
     info(item?: string | ToastShow, options?: ToastOptions): void;
     warning(item?: string | ToastShow, options?: ToastOptions): void;

package/dist/services/toast-manager.svelte.js

@@ -48,6 +48,9 @@ class ToastManager {
             await unmount(this.#ref);
         }
     }
+    primary(item, options) {
+        this.show({ title: t('toast_success_title'), color: 'primary', ...expand(item) }, options);
+    }
     success(item, options) {
         this.show({ title: t('toast_success_title'), color: 'success', ...expand(item) }, options);
     }

package/dist/types.d.ts

@@ -152,25 +152,27 @@ export type TextareaProps = {
     shape?: Shape;
     grow?: boolean;
 } & HTMLTextareaAttributes;
-export type SelectItem<T extends string = string> = {
+export type SelectOption<T extends string = string> = {
     label?: string;
     value: T;
     disabled?: boolean;
 };
 export type SelectCommonProps<T extends string> = {
-    data: string[] | SelectItem<T>[];
+    options: string[] | SelectOption<T>[];
     size?: Size;
     shape?: Shape;
     placeholder?: string;
     class?: string;
 };
 export type SelectProps<T extends string> = SelectCommonProps<T> & {
-    value?: SelectItem<T>;
-    onChange?: (value: SelectItem<T>) => void;
+    value?: T;
+    onChange?: (value: T) => void;
+    onSelect?: (options: SelectOption<T>) => void;
 };
 export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
-    values?: SelectItem<T>[];
-    onChange?: (values: SelectItem<T>[]) => void;
+    values?: T[];
+    onChange?: (values: T[]) => void;
+    onSelect?: (options: SelectOption<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/package.json

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