refac

Author: tjbck

src/lib/components/common/ConfirmDialog.svelte

@@ -11,6 +11,7 @@
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { marked } from 'marked';
 	import SensitiveInput from './SensitiveInput.svelte';
+	import NativeSelect from './NativeSelect.svelte';
 
 	export let title = '';
 	export let message = '';
@@ -24,6 +25,7 @@
 	export let inputPlaceholder = '';
 	export let inputValue = '';
 	export let inputType = '';
+	export let inputOptions: ({ label?: string; value: string } | string)[] = [];
 
 	let _inputValue = inputValue;
 
@@ -147,6 +149,14 @@
 										required={true}
 									/>
 								</div>
+							{:else if inputType === 'select' && inputOptions.length}
+								<NativeSelect
+									className="w-full mt-2 rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-900 outline-hidden"
+									bind:value={_inputValue}
+									options={inputOptions}
+									placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Select an option')}
+									required
+								/>
 							{:else}
 								<textarea
 									bind:value={_inputValue}

src/lib/components/common/NativeSelect.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let value = '';
+	export let options: ({ label?: string; value: string } | string)[] = [];
+	export let placeholder = '';
+	export let className = '';
+	export let required = false;
+</script>
+
+<select
+	class={className}
+	bind:value
+	{required}
+	on:change={() => {
+		dispatch('change');
+	}}
+>
+	{#if placeholder}
+		<option value="" disabled>{placeholder}</option>
+	{/if}
+
+	{#each options as option}
+		{@const optionValue = typeof option === 'object' && option !== null ? option.value : option}
+		{@const optionLabel =
+			typeof option === 'object' && option !== null ? (option.label ?? option.value) : option}
+		<option value={optionValue} selected={optionValue === value}>{optionLabel}</option>
+	{/each}
+</select>

src/lib/components/common/Valves.svelte

@@ -8,6 +8,7 @@
 
 	import Switch from './Switch.svelte';
 	import SensitiveInput from './SensitiveInput.svelte';
+	import NativeSelect from './NativeSelect.svelte';
 	import MapSelector from './Valves/MapSelector.svelte';
 
 	export let valvesSpec = null;
@@ -122,29 +123,16 @@
 									/>
 								</div>
 							{:else if valvesSpec.properties[property]?.input?.type === 'select' && valvesSpec.properties[property]?.input?.options}
-								<select
-									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+								<NativeSelect
+									className="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
 									bind:value={valves[property]}
+									options={valvesSpec.properties[property].input.options}
+									placeholder={valvesSpec.properties[property]?.description ??
+										$i18n.t('Select an option')}
 									on:change={() => {
 										dispatch('change');
 									}}
-								>
-									<option value="" disabled
-										>{valvesSpec.properties[property]?.description ??
-											$i18n.t('Select an option')}</option
-									>
-									{#each valvesSpec.properties[property].input.options as option}
-										{#if typeof option === 'object' && option !== null}
-											<option value={option.value} selected={option.value === valves[property]}>
-												{option.label ?? option.value}
-											</option>
-										{:else}
-											<option value={option} selected={option === valves[property]}>
-												{option}
-											</option>
-										{/if}
-									{/each}
-								</select>
+								/>
 							{:else if valvesSpec.properties[property]?.input?.type === 'color'}
 								<div class="flex items-center space-x-2">
 									<div class="relative size-6">