File size: 1,360 Bytes
8fdc036 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<script lang="ts">
import { onMount } from "svelte";
import { Image } from "@gradio/image/shared";
import type { FileData } from "@gradio/client";
export let value: { text: string; files: FileData[] } = {
text: "",
files: []
};
export let type: "gallery" | "table";
export let selected = false;
let size: number;
let el: HTMLDivElement;
function set_styles(element: HTMLElement, el_width: number): void {
if (!element || !el_width) return;
el.style.setProperty(
"--local-text-width",
`${el_width < 150 ? el_width : 200}px`
);
el.style.whiteSpace = "unset";
}
onMount(() => {
set_styles(el, size);
});
</script>
<div
bind:clientWidth={size}
bind:this={el}
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
>
<p>{value.text ? value.text : ""}</p>
{#each value.files as file}
{#if file.mime_type && file.mime_type.includes("image")}
<Image src={file.url} alt="" />
{:else}
{file.path}
{/if}
{/each}
</div>
<style>
.gallery {
padding: var(--size-1) var(--size-2);
display: flex;
align-items: center;
gap: 20px;
overflow-x: auto;
}
div {
overflow: hidden;
min-width: var(--local-text-width);
white-space: nowrap;
}
:global(img) {
width: 100px;
height: 100px;
}
div > :global(p) {
font-size: var(--text-lg);
white-space: normal;
}
</style>
|