summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/components/Select.svelte
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--frontend/src/lib/components/Select.svelte55
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}