gradio

1
<script lang="ts">
2
	export let value: (string | number)[][] | string;
3
	export let type: "gallery" | "table";
4
	export let selected = false;
5
	export let index: number;
6

7
	let hovered = false;
8
	let loaded_value: (string | number)[][] | string = value;
9
	let loaded = Array.isArray(loaded_value);
10
</script>
11

12
{#if loaded}
13
	<!-- TODO: fix-->
14
	<!-- svelte-ignore a11y-no-static-element-interactions-->
15
	<div
16
		class:table={type === "table"}
17
		class:gallery={type === "gallery"}
18
		class:selected
19
		on:mouseenter={() => (hovered = true)}
20
		on:mouseleave={() => (hovered = false)}
21
	>
22
		{#if typeof loaded_value === "string"}
23
			{loaded_value}
24
		{:else}
25
			<table class="">
26
				{#each loaded_value.slice(0, 3) as row, i}
27
					<tr>
28
						{#each row.slice(0, 3) as cell, j}
29
							<td>{cell}</td>
30
						{/each}
31
						{#if row.length > 3}
32
							<td>…</td>
33
						{/if}
34
					</tr>
35
				{/each}
36
				{#if value.length > 3}
37
					<div
38
						class="overlay"
39
						class:odd={index % 2 != 0}
40
						class:even={index % 2 == 0}
41
						class:button={type === "gallery"}
42
					/>
43
				{/if}
44
			</table>
45
		{/if}
46
	</div>
47
{/if}
48

49
<style>
50
	table {
51
		position: relative;
52
	}
53

54
	td {
55
		border: 1px solid var(--table-border-color);
56
		padding: var(--size-2);
57
		font-size: var(--text-sm);
58
		font-family: var(--font-mono);
59
	}
60

61
	.selected td {
62
		border-color: var(--border-color-accent);
63
	}
64

65
	.table {
66
		display: inline-block;
67
		margin: 0 auto;
68
	}
69

70
	.gallery td:first-child {
71
		border-left: none;
72
	}
73

74
	.gallery tr:first-child td {
75
		border-top: none;
76
	}
77

78
	.gallery td:last-child {
79
		border-right: none;
80
	}
81

82
	.gallery tr:last-child td {
83
		border-bottom: none;
84
	}
85

86
	.overlay {
87
		--gradient-to: transparent;
88
		position: absolute;
89
		bottom: 0;
90
		background: linear-gradient(to bottom, transparent, var(--gradient-to));
91
		width: var(--size-full);
92
		height: 50%;
93
	}
94

95
	/* i dont know what i've done here but it is what it is */
96
	.odd {
97
		--gradient-to: var(--table-even-background-fill);
98
	}
99

100
	.even {
101
		--gradient-to: var(--table-odd-background-fill);
102
	}
103

104
	.button {
105
		--gradient-to: var(--background-fill-primary);
106
	}
107
</style>
108