Anki/ts/routes/import-csv/Preview.svelte
Abdo bf46a5f08c
Update to Svelte 5 (#3292)
* Update to Svelte 5

* Fix `<tr> is invalid inside <table>`

* Update sveltekit-svg to match svelte version

Fixes deck options failing to load, and a bunch of warnings with
./yarn dev

* Fix graph tooltips

* Fix editor loading

* Fix MathJax editor not loading

* Formatting

* Fix new formatting errors

* Merge remote-tracking branch 'origin/main' into svelte5

* Remove slot inside EditorToolbar

I think this is just stray code left over from a refactor, but I'm
not 100% sure.

Fixes
Error: Object literal may only specify known properties, and 'children' does not exist in type '{ size: number; wrap: boolean; api?: Partial<EditorToolbarAPI> | undefined; }'. (ts)
<div class="note-editor">
    <EditorToolbar {size} {wrap} api={toolbar}>
        <slot slot="notetypeButtons" name="notetypeButtons" />

* Fix component typing error

* Comment out svelte/internal exports, so editor loads

* Fix image occlusions in editor

* Revert "Remove slot inside EditorToolbar"

This reverts commit b3095e07ac,
which prevented the Preview button from showing in the browser.

This will break our tests again.

* Update vite

* Disable routes/tmp for now

* Fix references issue in routes/tmp
2024-09-25 18:49:07 +10:00

70 lines
1.5 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { type ImportCsvState } from "./lib";
export let state: ImportCsvState;
const metadata = state.metadata;
const columnOptions = state.columnOptions;
</script>
<div class="outer">
<table class="preview">
<thead>
<tr>
{#each $columnOptions.slice(1) as { label, shortLabel }}
<th>
{shortLabel || label}
</th>
{/each}
</tr>
</thead>
<tbody>
{#each $metadata.preview as row}
<tr>
{#each row.vals as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
<style lang="scss">
.outer {
overflow: auto;
}
.preview {
border-collapse: collapse;
white-space: nowrap;
th,
td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--border-subtle);
padding: 0.25rem 0.5rem;
max-width: 15em;
}
th {
background: var(--border);
text-align: center;
}
tr {
&:nth-child(even) {
background: var(--canvas);
}
}
td {
text-align: start;
}
}
</style>