gradio/frontend

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 = Array.isArray(value);9	let is_empty = loaded && (value.length === 0 || value[0].length === 0);10</script>11 12{#if loaded}13	<!-- TODO: fix-->14	<!-- svelte-ignore a11y-no-static-element-interactions-->15	<div16		class:table={type === "table"}17		class:gallery={type === "gallery"}18		class:selected19		on:mouseenter={() => (hovered = true)}20		on:mouseleave={() => (hovered = false)}21	>22		{#if typeof value === "string"}23			{value}24		{:else if is_empty}25			<table class="">26				<tbody>27					<tr>28						<td>Empty</td>29					</tr>30				</tbody>31			</table>32		{:else}33			<table class="">34				<tbody>35					{#each value.slice(0, 3) as row, i}36						<tr>37							{#each row.slice(0, 3) as cell, j}38								<td>{cell}</td>39							{/each}40							{#if row.length > 3}41								<td>…</td>42							{/if}43						</tr>44					{/each}45				</tbody>46			</table>47			{#if value.length > 3}48				<div49					class="overlay"50					class:odd={index % 2 != 0}51					class:even={index % 2 == 0}52					class:button={type === "gallery"}53				></div>54			{/if}55		{/if}56	</div>57{/if}58 59<style>60	table {61		position: relative;62		border-collapse: collapse;63	}64 65	td {66		border: 1px solid var(--table-border-color);67		padding: var(--size-2);68		font-size: var(--text-sm);69		font-family: var(--font-mono);70	}71 72	.selected td {73		border-color: var(--border-color-accent);74	}75 76	.table {77		display: inline-block;78		margin: 0 auto;79	}80 81	.gallery td:first-child {82		border-left: none;83	}84 85	.gallery tr:first-child td {86		border-top: none;87	}88 89	.gallery td:last-child {90		border-right: none;91	}92 93	.gallery tr:last-child td {94		border-bottom: none;95	}96 97	.overlay {98		--gradient-to: transparent;99		position: absolute;100		bottom: 0;101		background: linear-gradient(to bottom, transparent, var(--gradient-to));102		width: var(--size-full);103		height: 50%;104	}105 106	/* i dont know what i've done here but it is what it is */107	.odd {108		--gradient-to: var(--table-even-background-fill);109	}110 111	.even {112		--gradient-to: var(--table-odd-background-fill);113	}114 115	.button {116		--gradient-to: var(--background-fill-primary);117	}118</style>119