gradio

1
<script lang="ts">
2
	import type { Gradio } from "@gradio/utils";
3
	import { Block, BlockTitle } from "@gradio/atoms";
4
	import { StatusTracker } from "@gradio/statustracker";
5
	import type { LoadingStatus } from "@gradio/statustracker";
6

7
	export let label = "Dropdown";
8
	export let elem_id = "";
9
	export let elem_classes: string[] = [];
10
	export let visible = true;
11
	export let value: string | number;
12
	export let value_is_output = false;
13
	export let choices: [string, string | number][];
14
	export let show_label: boolean;
15
	export let scale: number | null = null;
16
	export let min_width: number | undefined = undefined;
17
	export let loading_status: LoadingStatus;
18
	export let gradio: Gradio<{
19
		change: string;
20
		input: never;
21
	}>;
22
	export let interactive: boolean;
23

24
	const container = true;
25
	let display_value: string;
26
	let candidate: [string, string | number][];
27

28
	function handle_change(): void {
29
		gradio.dispatch("change");
30
		if (!value_is_output) {
31
			gradio.dispatch("input");
32
		}
33
	}
34

35
	$: if (display_value) {
36
		candidate = choices.filter((choice) => choice[0] === display_value);
37
		value = candidate.length ? candidate[0][1] : "";
38
	}
39

40
	// When the value changes, dispatch the change event via handle_change()
41
	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
42
	$: value, handle_change();
43
</script>
44

45
<Block
46
	{visible}
47
	{elem_id}
48
	{elem_classes}
49
	padding={container}
50
	allow_overflow={false}
51
	{scale}
52
	{min_width}
53
>
54
	{#if loading_status}
55
		<StatusTracker
56
			autoscroll={gradio.autoscroll}
57
			i18n={gradio.i18n}
58
			{...loading_status}
59
		/>
60
	{/if}
61

62
	<label class:container>
63
		<BlockTitle {show_label} info={undefined}>{label}</BlockTitle>
64
		<select disabled={!interactive} bind:value={display_value}>
65
			{#each choices as choice}
66
				<option>{choice[0]}</option>
67
			{/each}
68
		</select>
69
	</label>
70
</Block>
71

72
<style>
73
	select {
74
		--ring-color: transparent;
75
		display: block;
76
		position: relative;
77
		outline: none !important;
78
		box-shadow:
79
			0 0 0 var(--shadow-spread) var(--ring-color),
80
			var(--shadow-inset);
81
		border: var(--input-border-width) solid var(--border-color-primary);
82
		border-radius: var(--radius-lg);
83
		background-color: var(--input-background-base);
84
		padding: var(--size-2-5);
85
		width: 100%;
86
		color: var(--color-text-body);
87
		font-size: var(--scale-00);
88
		line-height: var(--line-sm);
89
	}
90

91
	select:focus {
92
		--ring-color: var(--color-focus-ring);
93
		border-color: var(--input-border-color-focus);
94
	}
95

96
	select::placeholder {
97
		color: var(--color-text-placeholder);
98
	}
99

100
	select[disabled] {
101
		cursor: not-allowed;
102
		box-shadow: none;
103
	}
104
</style>
105