File size: 2,097 Bytes
0bd62e5 |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<script lang="ts">
export let value: (string | number)[][] | string;
export let type: "gallery" | "table";
export let selected = false;
export let index: number;
let hovered = false;
let loaded = Array.isArray(value);
</script>
{#if loaded}
<!-- TODO: fix-->
<!-- svelte-ignore a11y-no-static-element-interactions-->
<div
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
on:mouseenter={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}
>
{#if typeof value === "string"}
{value}
{:else}
<table class="">
{#each value.slice(0, 3) as row, i}
<tr>
{#each row.slice(0, 3) as cell, j}
<td>{cell}</td>
{/each}
{#if row.length > 3}
<td>…</td>
{/if}
</tr>
{/each}
{#if value.length > 3}
<div
class="overlay"
class:odd={index % 2 != 0}
class:even={index % 2 == 0}
class:button={type === "gallery"}
/>
{/if}
</table>
{/if}
</div>
{/if}
<style>
table {
position: relative;
}
td {
border: 1px solid var(--table-border-color);
padding: var(--size-2);
font-size: var(--text-sm);
font-family: var(--font-mono);
}
.selected td {
border-color: var(--border-color-accent);
}
.table {
display: inline-block;
margin: 0 auto;
}
.gallery td:first-child {
border-left: none;
}
.gallery tr:first-child td {
border-top: none;
}
.gallery td:last-child {
border-right: none;
}
.gallery tr:last-child td {
border-bottom: none;
}
.overlay {
--gradient-to: transparent;
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, transparent, var(--gradient-to));
width: var(--size-full);
height: 50%;
}
/* i dont know what i've done here but it is what it is */
.odd {
--gradient-to: var(--table-even-background-fill);
}
.even {
--gradient-to: var(--table-odd-background-fill);
}
.button {
--gradient-to: var(--background-fill-primary);
}
</style>
|