gradio

1
<script lang="ts">
2
	export let scale: number | null = null;
3
	export let gap = true;
4
	export let min_width = 0;
5
	export let elem_id = "";
6
	export let elem_classes: string[] = [];
7
	export let visible = true;
8
	export let variant: "default" | "panel" | "compact" = "default";
9
</script>
10

11
<div
12
	id={elem_id}
13
	class={elem_classes.join(" ")}
14
	class:gap
15
	class:compact={variant === "compact"}
16
	class:panel={variant === "panel"}
17
	class:hide={!visible}
18
	style:flex-grow={scale}
19
	style:min-width="calc(min({min_width}px, 100%))"
20
>
21
	<slot />
22
</div>
23

24
<style>
25
	div {
26
		display: flex;
27
		position: relative;
28
		flex-direction: column;
29
	}
30

31
	div > :global(*),
32
	div > :global(.form > *) {
33
		width: var(--size-full);
34
	}
35

36
	.gap {
37
		gap: var(--layout-gap);
38
	}
39

40
	.hide {
41
		display: none;
42
	}
43

44
	.compact > :global(*),
45
	.compact :global(.box) {
46
		border-radius: 0;
47
	}
48

49
	.compact,
50
	.panel {
51
		border: solid var(--panel-border-width) var(--panel-border-color);
52
		border-radius: var(--container-radius);
53
		background: var(--panel-background-fill);
54
		padding: var(--spacing-lg);
55
	}
56
</style>
57