@immich/ui 0.58.2 → 0.58.3

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -2,11 +2,15 @@
   import InternalSelect from '../../internal/Select.svelte';
   import type { MultiSelectProps, SelectItem } from '../../types.js';
 
-  let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
+  let { onChange, onItemChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    onChange?.(items);
+  const handleChange = (values: T[]) => {
+    onChange?.(values);
+  };
+
+  const handleItemChange = (items: SelectItem<T>[]) => {
+    onItemChange?.(items);
   };
 </script>
 
-<InternalSelect multiple bind:values onChange={handleChange} {...restProps} />
+<InternalSelect multiple bind:values onItemChange={handleItemChange} onChange={handleChange} {...restProps} />

package/dist/components/Select/Select.svelte

@@ -2,14 +2,18 @@
   import InternalSelect from '../../internal/Select.svelte';
   import type { SelectItem, SelectProps } from '../../types.js';
 
-  let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+  let { onChange, onItemChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
   let values = $derived(value ? [value] : []);
 
-  const handleChange = (items: SelectItem<T>[]) => {
-    value = items[0];
+  const handleChange = (values: T[]) => {
+    value = values[0];
     onChange?.(value);
   };
+
+  const handleItemChange = (items: SelectItem<T>[]) => {
+    onItemChange?.(items[0]);
+  };
 </script>
 
-<InternalSelect bind:values onChange={handleChange} {...restProps} />
+<InternalSelect bind:values onChange={handleChange} onItemChange={handleItemChange} {...restProps} />

package/dist/internal/Select.svelte

@@ -12,9 +12,10 @@
 
   type Props = {
     multiple?: boolean;
-    values: SelectItem<T>[];
+    values: T[];
     asLabel?: (items: SelectItem<T>[]) => string;
-    onChange?: (values: SelectItem<T>[]) => void;
+    onChange?: (values: T[]) => void;
+    onItemChange?: (items: SelectItem<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
@@ -24,6 +25,7 @@
     multiple = false,
     values = $bindable([]),
     onChange,
+    onItemChange,
     asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
@@ -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(data));
 
-  const selectedLabel = $derived(asLabel(values));
+  const findOption = (value: string) => options.find((option) => option.value === value);
+  const valuesToOptions = (values: T[]) =>
+    values.map(findOption).filter((item): item is SelectItem<T> => Boolean(item));
+
+  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,15 @@
     }
   });
 
-  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 SelectItem<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

@@ -3,9 +3,10 @@ import { Select } from 'bits-ui';
 declare function $$render<T extends string>(): {
     props: {
         multiple?: boolean;
-        values: SelectItem<T>[];
+        values: T[];
         asLabel?: (items: SelectItem<T>[]) => string;
-        onChange?: (values: SelectItem<T>[]) => void;
+        onChange?: (values: T[]) => void;
+        onItemChange?: (items: SelectItem<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

@@ -165,12 +165,14 @@ export type SelectCommonProps<T extends 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;
+    onItemChange?: (item: SelectItem<T>) => void;
 };
 export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
-    values?: SelectItem<T>[];
-    onChange?: (values: SelectItem<T>[]) => void;
+    values?: T[];
+    onChange?: (values: T[]) => void;
+    onItemChange?: (items: SelectItem<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/package.json

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