@immich/ui 0.22.6 → 0.22.8

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -4,12 +4,11 @@
 
 	type T = SelectItem;
 
-	let { value = $bindable(), onChange, ...restProps }: MultiSelectProps<T> = $props();
+	let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
 	const handleChange = (items: T[]) => {
-		value = items;
-		onChange?.(value);
+		onChange?.(items);
 	};
 </script>
 
-<InternalSelect multiple onChange={handleChange} {...restProps} />
+<InternalSelect multiple bind:values onChange={handleChange} {...restProps} />

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

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

package/dist/components/Select/Select.svelte

@@ -4,12 +4,14 @@
 
 	type T = SelectItem;
 
-	let { value = $bindable(), onChange, ...restProps }: SelectProps<T> = $props();
+	let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
+
+	let values = $derived(value ? [value] : []);
 
 	const handleChange = (items: T[]) => {
-		value = items[0] as T;
+		value = items[0];
 		onChange?.(value);
 	};
 </script>
 
-<InternalSelect onChange={handleChange} {...restProps} />
+<InternalSelect bind:values onChange={handleChange} {...restProps} />

package/dist/components/Stack/Stack.svelte

@@ -8,6 +8,8 @@
 		direction = 'column',
 		wrap = false,
 		class: className,
+		fullWidth,
+		fullHeight,
 		gap = 2,
 		children,
 	}: StackProps = $props();
@@ -24,6 +26,14 @@
 				center: 'items-center',
 				end: 'items-end',
 			},
+			fullWidth: {
+				true: 'w-full',
+				false: '',
+			},
+			fullHeight: {
+				true: 'h-full',
+				false: '',
+			},
 			gap: {
 				0: 'gap-0',
 				1: 'gap-1',
@@ -50,6 +60,8 @@
 			direction,
 			gap,
 			wrap,
+			fullHeight,
+			fullWidth,
 		}),
 		className,
 	)}

package/dist/internal/Select.svelte

@@ -14,7 +14,7 @@
 
 	type Props = {
 		multiple?: boolean;
-		values?: T[];
+		values: T[];
 		asLabel?: (items: T[]) => string;
 		onChange?: (values: T[]) => void;
 	} & SelectCommonProps<T>;
@@ -22,7 +22,6 @@
 	let {
 		data,
 		shape,
-		color = 'primary',
 		size = 'medium',
 		multiple = false,
 		values = $bindable([]),
@@ -73,6 +72,10 @@
 
 		onChange?.(values);
 	};
+
+	let internalValue = $derived(
+		multiple ? values.map(({ value }) => value) : (values[0]?.value ?? ''),
+	);
 </script>
 
 <div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
@@ -80,7 +83,11 @@
 		<Label id={labelId} for={inputId} {label} {...labelProps} />
 	{/if}
 
-	<Select.Root type={multiple ? 'multiple' : 'single'} {onValueChange}>
+	<Select.Root
+		type={multiple ? 'multiple' : 'single'}
+		bind:value={internalValue as never}
+		{onValueChange}
+	>
 		<Select.Trigger
 			{disabled}
 			class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
@@ -92,7 +99,6 @@
 					id={inputId}
 					{size}
 					{shape}
-					{color}
 					{placeholder}
 					value={selectedLabel}
 					readonly

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

@@ -3,7 +3,7 @@ import { Select } from 'bits-ui';
 type T = SelectItem;
 type Props = {
     multiple?: boolean;
-    values?: T[];
+    values: T[];
     asLabel?: (items: T[]) => string;
     onChange?: (values: T[]) => void;
 } & SelectCommonProps<T>;

package/dist/types.d.ts

@@ -120,7 +120,6 @@ export type SelectItem = {
 export type SelectCommonProps<T extends SelectItem> = {
     data: string[] | T[];
     size?: Size;
-    color?: Color;
     shape?: Shape;
     placeholder?: string;
     class?: string;
@@ -130,7 +129,7 @@ export type SelectProps<T extends SelectItem> = SelectCommonProps<T> & {
     onChange?: (value: T) => void;
 };
 export type MultiSelectProps<T extends SelectItem> = SelectCommonProps<T> & {
-    value?: T[];
+    values?: T[];
     onChange?: (values: T[]) => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@immich/ui",
-	"version": "0.22.6",
+	"version": "0.22.8",
 	"license": "GNU Affero General Public License version 3",
 	"scripts": {
 		"create": "node scripts/create.js",