Page MenuHomeSealhub
Files F996211

component-input-table.ts
No OneTemporary
Actions

component-input-table.ts
View Options

/* eslint-disable @typescript-eslint/no-non-null-assertion */
import type { JDDContext, Table, TableData } from "@sealcode/jdd";
import { Markdown } from "@sealcode/jdd";
import { isTableHeader } from "@sealcode/jdd";
import type { StatefulPage } from "@sealcode/sealgen";
import type { Context } from "koa";
import { tempstream } from "tempstream";
import { ComponentInput } from "./component-input.js";
import type { ComponentPreviewActions } from "../component-preview-actions.js";
import type { JDDPageState } from "../jdd-page.js";
export async function ComponentInputTable<
State extends JDDPageState,
CellType,
HeaderType
>({
state,
arg_path,
ctx,
arg,
value,
page,
makeJDDContext,
makeAssetURL,
}: {
state: State;
ctx: Context;
arg_path: string[];
arg: Table<CellType, HeaderType>;
value: TableData<CellType, HeaderType>;
page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
makeJDDContext: (ctx: Context) => JDDContext;
makeAssetURL: (asset: string) => string;
}): Promise<string> {
if (!value) {
value = await arg.getEmptyValue(makeJDDContext(ctx));
}
const show_paste =
arg.cell_type instanceof Markdown &&
arg.header_type instanceof Markdown;
return tempstream/* HTML */ `<fieldset>
<legend>${arg_path.at(-1)!}</legend>
<div>
${show_paste
? /* HTML */ `<input
type="button"
value="paste"
placeholder="paste table here"
data-jdd-table-paste-argpath-value="${arg_path.join(
"."
)}"
data-controller="jdd-table-paste"
/>`
: ""}
<table
class="jdd-component-input--table"
style="position: relative; /* necessary for sticky th*/"
>
<tbody>
<tr>
<td></td>
${[...Array(arg.getColumnsCount(value)).keys()]
.map(
(column_index) => /* HTML */ `<th
class="sticky sticky--top subdued"
>
${page.makeActionButton(
state,
{
action: "remove_table_column",
label: "Remove column",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-delete-column.svg"
)}"
/>`,
},
arg_path,
column_index
)}
${column_index >=
arg.getColumnsCount(value) - 1
? ""
: page.makeActionButton(
state,
{
action: "move_table_column_right",
label: "Move column to the right",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-move-column-right.svg"
)}"
/>`,
},
arg_path,
column_index
)}
</th>`
)
.join("")}
</tr>
${value.rows.map(
(row, row_index) => tempstream/* HTML */ `<tr>
<td class="sticky sticky--left subdued">
<div
style="display: flex; flex-flow: column; row-gap: 5px;"
>
${page.makeActionButton(
state,
{
action: "remove_table_row",
label: "Remove row",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-delete-row.svg"
)}"
/>`,
},
arg_path,
row_index
)}
${page.makeActionButton(
state,
{
action: "move_table_row_down",
label: "Move this row down",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-move-row-down.svg"
)}"
/>`,
},
arg_path,
row_index
)}
</div>
</td>
${isTableHeader(row)
? /* HTML */ tempstream`<th
colspan="${arg.getColumnsCount(value).toString()}"
>
${ComponentInput({
state,
ctx,
arg_path: [
...arg_path,
"rows",
row_index.toString(),
"header_content",
],
arg: arg.header_type,
value: row.header_content,
page,
makeJDDContext,
makeAssetURL,
})}
</th>`
: row.cells.map(
(
cell,
cell_index
) => tempstream/* HTML */ `<td>
${ComponentInput({
ctx,
state,
arg_path: [
...arg_path,
"rows",
row_index.toString(),
"cells",
cell_index.toString(),
],
arg: arg.cell_type,
value: cell,
page,
makeJDDContext,
makeAssetURL,
})}
</td>`
)}
${row_index == 0
? /* HTML */ `<td
class="subdued"
rowspan="${value.rows.length.toString()}"
>
${page.makeActionButton(
state,
{
action: "add_table_column",
label: "Add column",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-add-column-right.svg"
)}"
/>`,
},
arg_path
)}
</td>`
: ""}
</tr>`
)}
<tr>
<td
class="subdued"
colspan="{(arg.getColumnsCount(value)"
+
1).toString()}
>
${page.makeActionButton(
state,
{
action: "add_table_row",
label: "Add table row",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-add-row-below.svg"
)}"
/>`,
},
arg_path,
arg.getColumnsCount(value),
undefined
)}
${page.makeActionButton(
state,
{
action: "add_table_row",
label: "Add table header",
content: /* HTML */ `<img
width="20"
height="20"
src="${makeAssetURL(
"icons/table-add-column-header-below.svg"
)}"
/>`,
},
arg_path,
arg.getColumnsCount(value),
"header"
)}
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>`;
}

File Metadata

Mime Type
text/html
Expires
Tue, Dec 24, 14:02 (1 d, 1 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
557110
Default Alt Text
component-input-table.ts (6 KB)

Event Timeline