1 files changed, 55 insertions, 0 deletions
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
new file mode 100644
index 0000000..83f026c
--- /dev/null
+++ b/frontend/src/lib/components/Select.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { ListItem } from '$lib/Utils';
+	/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-explicit-any */
+
+	// @ts-ignore
+	import Svelecte from 'svelecte';
+
+	let inputId: string;
+	let valueAsObject = false;
+	let multiple = false;
+
+	type Value = (number | string | ListItem)[] | number | string | ListItem | undefined | null;
+
+	export let clearable = false;
+	export let placeholder = 'Select...';
+	export let options: ListItem[] | undefined;
+	export let value: Value;
+
+	export { inputId as id, valueAsObject as object, multiple as multi };
+
+	function optionsPlaceholder(from: Value) {
+		if (from === undefined || from === null) return [];
+
+		return Array.isArray(from) ? value : [value];
+	}
+</script>
+
+{#if options !== null && options !== undefined}
+	<Svelecte
+		virtualList
+		valueField="id"
+		labelField="name"
+		{options}
+		{multiple}
+		{clearable}
+		{inputId}
+		{valueAsObject}
+		{placeholder}
+		bind:value
+	/>
+{:else}
+	<Svelecte
+		virtualList
+		valueField="id"
+		labelField="name"
+		disabled
+		options={optionsPlaceholder(value)}
+		{multiple}
+		{clearable}
+		{inputId}
+		{valueAsObject}
+		{placeholder}
+		{value}
+	/>
+{/if}