Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-07-10 04:20:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-06-29 05:14:03 -05:00
parent c65b29ec0f
commit 422a4768ea
3 changed files with 48 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/common/ConfirmDialog.svelte
View File

@@ -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}

31
src/lib/components/common/NativeSelect.svelte Normal file
View File

@@ -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>

26
src/lib/components/common/Valves.svelte
View File

@@ -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">