gradio/frontend

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