gradio/frontend

1<script lang="ts">2	import { onMount } from "svelte";3 4	let {5		value,6		type,7		selected = false8	}: {9		value: string | null;10		type: "gallery" | "table";11		selected?: boolean;12	} = $props();13 14	let size = $state(0);15	let el: HTMLDivElement | undefined = $state();16 17	function set_styles(element: HTMLElement, el_width: number): void {18		element.style.setProperty(19			"--local-text-width",20			`${el_width && el_width < 150 ? el_width : 200}px`21		);22		element.style.whiteSpace = "unset";23	}24 25	function truncate_text(text: string | null, max_length = 60): string {26		if (!text) return "";27		const str = String(text);28		if (str.length <= max_length) return str;29		return str.slice(0, max_length) + "...";30	}31 32	onMount(() => {33		if (el) set_styles(el, size);34	});35</script>36 37<div38	bind:clientWidth={size}39	bind:this={el}40	class:table={type === "table"}41	class:gallery={type === "gallery"}42	class:selected43>44	{truncate_text(value)}45</div>46 47<style>48	.gallery {49		padding: var(--size-1) var(--size-2);50	}51 52	div {53		overflow: hidden;54		min-width: var(--local-text-width);55 56		white-space: nowrap;57	}58</style>59