@sealcode/sealgen 0.19.17 → 0.19.18

package/@types/controllers/sealgen-table.stimulus.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+export default class TableController extends Controller {
+    static targets: string[];
+    tableTarget: HTMLTableElement;
+    templateTarget: HTMLTemplateElement;
+    getTbody(): HTMLTableSectionElement;
+    addRow(): void;
+    swapRows(e: MouseEvent): void;
+}

package/@types/forms/controls/table.d.ts

@@ -10,6 +10,7 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
         [field_name in keyof F]: FormControl;
     };
     allow_removing?: boolean;
+    allow_reordering?: boolean;
     label_add?: string;
     label: string;
     label_remove?: string;
@@ -36,4 +37,5 @@ export declare class Table<F extends Record<string, FormField>> extends FormCont
     setLabel(value: string): this;
     setRemoveLabel(value: string): this;
     setAddLabel(value: string): this;
+    setAllowReordering(value: boolean): this;
 }

package/lib/controllers/sealgen-table.stimulus.js

@@ -0,0 +1,98 @@
+import { Controller } from "stimulus";
+class TableController extends Controller {
+  static {
+    this.targets = ["table", "template"];
+  }
+  getTbody() {
+    const tbody = this.element.closest("turbo-frame")?.querySelector("tbody");
+    if (!tbody) {
+      throw new Error("tbody not found");
+    }
+    return tbody;
+  }
+  getRowIndex(tr) {
+    let result = 0;
+    for (const child of Array.from(this.getTbody().children)) {
+      if (child == tr) {
+        return result;
+      }
+      result++;
+    }
+    return -1;
+  }
+  addRow() {
+    const tbody = this.getTbody();
+    const orig_template = this.templateTarget.innerHTML;
+    const placeholder = this.element.getAttribute("data-table-placeholder");
+    if (!placeholder) {
+      throw new Error("Could not find placeholder attribute");
+    }
+    this.templateTarget.innerHTML = orig_template.replaceAll(
+      placeholder,
+      String(tbody.querySelectorAll("tr").length)
+    );
+    tbody.appendChild(this.templateTarget.cloneNode(true).content);
+    this.templateTarget.innerHTML = orig_template;
+    this.reindex();
+  }
+  swapRows(index_a, index_b) {
+    const tbody = this.getTbody();
+    const [a, b] = [index_a, index_b].sort().reverse();
+    tbody.insertBefore(tbody.children[a], tbody.children[b]);
+    this.reindex();
+  }
+  moveUp(e) {
+    const target = e.target;
+    const tr = target.closest("tr");
+    if (!tr) {
+      console.error("Not within a tr");
+      return;
+    }
+    const index_a = this.getRowIndex(tr);
+    if (index_a < 0) {
+      return;
+    }
+    const index_b = index_a - 1;
+    this.swapRows(index_a, index_b);
+  }
+  moveDown(e) {
+    const target = e.target;
+    const tr = target.closest("tr");
+    if (!tr) {
+      console.error("Not within a tr");
+      return;
+    }
+    const index_a = this.getRowIndex(tr);
+    if (index_a < 0) {
+      return;
+    }
+    const index_b = index_a + 1;
+    this.swapRows(index_a, index_b);
+  }
+  reindex() {
+    let result = 0;
+    for (const tr of Array.from(this.getTbody().children)) {
+      tr.querySelectorAll("input").forEach((input) => {
+        input.setAttribute(
+          "name",
+          (input.getAttribute("name") || "").replace(
+            /[(\d+)](?!.*\d)/,
+            // last number in a regex
+            result.toString()
+          )
+        );
+      });
+      result++;
+    }
+    this.element.querySelectorAll(
+      `[data-action="sealgen-table#moveUp"], [data-action="sealgen-table#moveDown"]`
+    ).forEach((e) => e.disabled = false);
+    this.element.querySelectorAll(
+      'tr:first-child [data-action="sealgen-table#moveUp"], tr:last-child [data-action="sealgen-table#moveDown"]'
+    ).forEach((e) => e.disabled = true);
+  }
+}
+export {
+  TableController as default
+};
+//# sourceMappingURL=sealgen-table.stimulus.js.map

package/lib/forms/controls/table.js

@@ -49,19 +49,17 @@ class Table extends FormControl {
 				 ${this.options.allow_removing ? (
           /* HTML */
           `<td>
-									<button
-										onclick="this.closest('tr').remove()"
-									>
-										remove
-									</button>
-									<noscript>
-										<input
-											type="submit"
-											data-turbo-frame="${this.getFrameID()}"
-											value="${this.options.label_remove || "remove"}"
-											form="${fctx.form_id}"
-											formnovalidate
-											formaction="${this.getActionURL(
+								<button onclick="this.closest('tr').remove()">
+									remove
+								</button>
+								<noscript>
+									<input
+										type="submit"
+										data-turbo-frame="${this.getFrameID()}"
+										value="${this.options.label_remove || "remove"}"
+										form="${fctx.form_id}"
+										formnovalidate
+										formaction="${this.getActionURL(
             this.table_field.name,
             {
               remove: {
@@ -69,9 +67,19 @@ class Table extends FormControl {
               }
             }
           )}"
-										/>
-									</noscript>
-								</td>`
+									/>
+								</noscript>
+							</td>`
+        ) : ""}${this.options.allow_reordering ? (
+          /* HTML */
+          `<td>
+								<button data-action="sealgen-table#moveUp">
+									\u2191
+								</button>
+								<button data-action="sealgen-table#moveDown">
+									\u2193
+								</button>
+							</td>`
         ) : ""}
 			 </tr>`
       );
@@ -89,13 +97,17 @@ class Table extends FormControl {
     ].join(" ")}"
 		>
 			<label>${this.options.label || this.table_field.label}</label>
-			<div class="table__wrapper">
-				<table>
+			<div
+				class="table__wrapper"
+				data-controller="sealgen-table"
+				data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
+			>
+				<table data-sealgen-table-target="table">
 					<tbody>
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template>
+				<template data-sealgen-table-target="template">
 					${make_row(null, TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER)}
 				</template>
 
@@ -104,19 +116,17 @@ class Table extends FormControl {
     this.options.allow_adding ? (
       /* HTML */
       `<button
-									data-controller="table-add-button"
-									data-action="click->table-add-button#addRow"
-									data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
-								>
-									${this.options.label_add || "add"}
-								</button>
-								<noscript>
-									<input
-										type="submit"
-										value="add"
-										form="${fctx.form_id}"
-										formnovalidate
-										formaction="${this.getActionURL(
+								data-action="click->sealgen-table#addRow"
+							>
+								${this.options.label_add || "add"}
+							</button>
+							<noscript>
+								<input
+									type="submit"
+									value="add"
+									form="${fctx.form_id}"
+									formnovalidate
+									formaction="${this.getActionURL(
         this.table_field.name,
         {
           insert: {
@@ -125,8 +135,8 @@ class Table extends FormControl {
           }
         }
       )}"
-									/>
-								</noscript>`
+								/>
+							</noscript>`
     ) : ""}
 			</div>
 		</turbo-frame>`;
@@ -144,7 +154,7 @@ class Table extends FormControl {
     router.post("/", async (ctx, next) => {
       const action = ctx.$body.action;
       const field_name = ctx.$body.field_name;
-      if (!is(action, predicates.object) || !is(field_name, predicates.string)) {
+      if (!is(action, predicates.object) || !is(field_name, predicates.string) || field_name !== this.table_field.name) {
         await next();
         return;
       }
@@ -154,10 +164,6 @@ class Table extends FormControl {
         },
         action
       )) {
-        if (field_name !== this.table_field.name) {
-          await next();
-          return;
-        }
         if (!ctx.$body[this.table_field.name]) {
           ctx.$body[this.table_field.name] = {};
         }
@@ -169,10 +175,6 @@ class Table extends FormControl {
         },
         action
       )) {
-        if (field_name !== this.table_field.name) {
-          await next();
-          return;
-        }
         if (!ctx.$body[this.table_field.name]) {
           ctx.$body[this.table_field.name] = {};
         }
@@ -221,6 +223,10 @@ class Table extends FormControl {
     this.options.label_add = value;
     return this;
   }
+  setAllowReordering(value) {
+    this.options.allow_reordering = value;
+    return this;
+  }
 }
 export {
   TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,

package/lib/mount.js

@@ -10,19 +10,17 @@ async function handleHtmlPromise(ctx, next) {
 }
 function mount(router, url, mountable, use_dummy_app = false, file_manager = use_dummy_app ? new FileManager("/tmp", "/uploaded_files") : void 0) {
   const raw_url = typeof url === "string" ? url : url.rawURL;
-  const imageRouter = new KoaResponsiveImageRouter({
-    staticPath: "/tmp",
-    thumbnailSize: 10,
-    cacheManagerResolutionThreshold: 10,
-    imageStoragePath: "/tmp",
-    smartCropStoragePath: "/tmp"
-  });
-  const fileManager = new FileManager("/tmp", "/uploaded_files");
   const args = use_dummy_app ? [
     async (ctx, next) => {
       ctx.$app = {
-        fileManager,
-        imageRouter,
+        fileManager: new FileManager("/tmp", "/uploaded_files"),
+        imageRouter: new KoaResponsiveImageRouter({
+          staticPath: "/tmp",
+          thumbnailSize: 10,
+          cacheManagerResolutionThreshold: 10,
+          imageStoragePath: "/tmp",
+          smartCropStoragePath: "/tmp"
+        }),
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         Logger: new Proxy(
           {},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.17",
+	"version": "0.19.18",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/controllers/sealgen-table.stimulus.ts

@@ -0,0 +1,115 @@
+/// <reference lib="dom" />
+import { Controller } from "stimulus";
+
+export default class TableController extends Controller {
+	static targets = ["table", "template"];
+	declare tableTarget: HTMLTableElement;
+	declare templateTarget: HTMLTemplateElement;
+
+	getTbody() {
+		const tbody = this.element
+			.closest("turbo-frame")
+			?.querySelector("tbody");
+		if (!tbody) {
+			throw new Error("tbody not found");
+		}
+		return tbody;
+	}
+
+	getRowIndex(tr: HTMLTableRowElement) {
+		let result = 0;
+		for (const child of Array.from(this.getTbody().children)) {
+			if (child == tr) {
+				return result;
+			}
+			result++;
+		}
+		return -1;
+	}
+
+	addRow() {
+		const tbody = this.getTbody();
+		const orig_template = this.templateTarget.innerHTML;
+		const placeholder = this.element.getAttribute("data-table-placeholder");
+		if (!placeholder) {
+			throw new Error("Could not find placeholder attribute");
+		}
+		this.templateTarget.innerHTML = orig_template.replaceAll(
+			placeholder,
+			String(tbody.querySelectorAll("tr").length)
+		);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+		tbody.appendChild((this.templateTarget.cloneNode(true) as any).content);
+		this.templateTarget.innerHTML = orig_template;
+		this.reindex();
+	}
+
+	swapRows(index_a: number, index_b: number) {
+		const tbody = this.getTbody();
+		const [a, b] = [index_a, index_b].sort().reverse(); // we want them in descending order
+		tbody.insertBefore(tbody.children[a], tbody.children[b]);
+		this.reindex();
+	}
+
+	moveUp(e: MouseEvent) {
+		const target = e.target as HTMLButtonElement;
+		const tr = target.closest("tr");
+		if (!tr) {
+			console.error("Not within a tr");
+			return;
+		}
+		const index_a = this.getRowIndex(tr);
+		if (index_a < 0) {
+			return;
+		}
+		const index_b = index_a - 1;
+		this.swapRows(index_a, index_b);
+	}
+
+	moveDown(e: MouseEvent) {
+		const target = e.target as HTMLButtonElement;
+		const tr = target.closest("tr");
+		if (!tr) {
+			console.error("Not within a tr");
+			return;
+		}
+		const index_a = this.getRowIndex(tr);
+		if (index_a < 0) {
+			return;
+		}
+		const index_b = index_a + 1;
+		this.swapRows(index_a, index_b);
+	}
+
+	reindex() {
+		let result = 0;
+
+		// assign proper number to each input within a tr by changing input names
+		for (const tr of Array.from(this.getTbody().children)) {
+			tr.querySelectorAll("input").forEach((input) => {
+				input.setAttribute(
+					"name",
+					(input.getAttribute("name") || "").replace(
+						/[(\d+)](?!.*\d)/, // last number in a regex
+						result.toString()
+					)
+				);
+			});
+			result++;
+		}
+
+		// disable up/down buttons for first/last items
+		// first reset all states to enabled
+		this.element
+			.querySelectorAll(
+				`[data-action="sealgen-table#moveUp"], [data-action="sealgen-table#moveDown"]`
+			)
+			.forEach((e: HTMLButtonElement) => (e.disabled = false));
+		// then disable the ones at the top and bottom
+		this.element
+			.querySelectorAll(
+				'tr:first-child [data-action="sealgen-table#moveUp"], tr:last-child [data-action="sealgen-table#moveDown"]'
+			)
+			.forEach((e: HTMLButtonElement) => (e.disabled = true));
+	}
+}

package/src/forms/controls/table.ts

@@ -21,6 +21,7 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
 		[field_name in keyof F]: FormControl;
 	};
 	allow_removing?: boolean;
+	allow_reordering?: boolean;
 	label_add?: string;
 	label: string;
 	label_remove?: string;
@@ -62,8 +63,8 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 				| null,
 			row_index: number | string
 		) => {
-			return typeof row_index == "number"
-				? {
+			return typeof row_index == "number" ?
+					{
 						data: {
 							raw_values:
 								(Object.fromEntries(
@@ -78,7 +79,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 							field_messages: {},
 						},
 					}
-				: {};
+				:	{};
 		};
 
 		const make_row = async (
@@ -89,7 +90,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 						>;
 				  }
 				| null,
-			row_index: number | string
+			row_index: number | string // when string, it's a placeholder, it will not parse as a number
 		) => {
 			return /* HTML */ tempstream`<tr>
 				 ${Promise.all(
@@ -108,33 +109,42 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 							)
 					)}
 				 ${
-						this.options.allow_removing
-							? /* HTML */ `<td>
-									<button
-										onclick="this.closest('tr').remove()"
-									>
-										remove
-									</button>
-									<noscript>
-										<input
-											type="submit"
-											data-turbo-frame="${this.getFrameID()}"
-											value="${this.options
-												.label_remove || "remove"}"
-											form="${fctx.form_id}"
-											formnovalidate
-											formaction="${this.getActionURL(
-												this.table_field.name,
-												{
-													remove: {
-														index: row_index,
-													},
-												}
-											)}"
-										/>
-									</noscript>
-								</td>`
-							: ""
+						this.options.allow_removing ?
+							/* HTML */ `<td>
+								<button onclick="this.closest('tr').remove()">
+									remove
+								</button>
+								<noscript>
+									<input
+										type="submit"
+										data-turbo-frame="${this.getFrameID()}"
+										value="${this.options.label_remove ||
+										"remove"}"
+										form="${fctx.form_id}"
+										formnovalidate
+										formaction="${this.getActionURL(
+											this.table_field.name,
+											{
+												remove: {
+													index: row_index,
+												},
+											}
+										)}"
+									/>
+								</noscript>
+							</td>`
+						:	""
+					}${
+						this.options.allow_reordering ?
+							/* HTML */ `<td>
+								<button data-action="sealgen-table#moveUp">
+									↑
+								</button>
+								<button data-action="sealgen-table#moveDown">
+									↓
+								</button>
+							</td>`
+						:	""
 					}
 			 </tr>`;
 		};
@@ -145,60 +155,62 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 				"form-input__wrapper",
 				"form-input__wrapper--type--table",
 				"form-input__wrapper--options-count--" + rows.length.toString(),
-				...(rows.length >= 5
-					? ["form-input__wrapper--options-count--5-or-more"]
-					: []),
-				...(rows.length >= 10
-					? ["form-input__wrapper--options-count--10-or-more"]
-					: []),
-				...(rows.length >= 15
-					? ["form-input__wrapper--options-count--15-or-more"]
-					: []),
-				...(rows.length >= 20
-					? ["form-input__wrapper--options-count--20-or-more"]
-					: []),
+				...(rows.length >= 5 ?
+					["form-input__wrapper--options-count--5-or-more"]
+				:	[]),
+				...(rows.length >= 10 ?
+					["form-input__wrapper--options-count--10-or-more"]
+				:	[]),
+				...(rows.length >= 15 ?
+					["form-input__wrapper--options-count--15-or-more"]
+				:	[]),
+				...(rows.length >= 20 ?
+					["form-input__wrapper--options-count--20-or-more"]
+				:	[]),
 			].join(" ")}"
 		>
 			<label>${this.options.label || this.table_field.label}</label>
-			<div class="table__wrapper">
-				<table>
+			<div
+				class="table__wrapper"
+				data-controller="sealgen-table"
+				data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
+			>
+				<table data-sealgen-table-target="table">
 					<tbody>
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template>
+				<template data-sealgen-table-target="template">
 					${make_row(null, TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER)}
 				</template>
 
 				${
 					/* because of https://github.com/ljharb/qs/issues/252 we have to
 					put the indexes in the field names */
-					this.options.allow_adding
-						? /* HTML */ `<button
-									data-controller="table-add-button"
-									data-action="click->table-add-button#addRow"
-									data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
-								>
-									${this.options.label_add || "add"}
-								</button>
-								<noscript>
-									<input
-										type="submit"
-										value="add"
-										form="${fctx.form_id}"
-										formnovalidate
-										formaction="${this.getActionURL(
-											this.table_field.name,
-											{
-												insert: {
-													index: rows.length,
-													value: {},
-												},
-											}
-										)}"
-									/>
-								</noscript>`
-						: ""
+					this.options.allow_adding ?
+						/* HTML */ `<button
+								data-action="click->sealgen-table#addRow"
+							>
+								${this.options.label_add || "add"}
+							</button>
+							<noscript>
+								<input
+									type="submit"
+									value="add"
+									form="${fctx.form_id}"
+									formnovalidate
+									formaction="${this.getActionURL(
+										this.table_field.name,
+										{
+											insert: {
+												index: rows.length,
+												value: {},
+											},
+										}
+									)}"
+								/>
+							</noscript>`
+					:	""
 				}
 			</div>
 		</turbo-frame>`;
@@ -221,11 +233,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 			const field_name = ctx.$body.field_name;
 			if (
 				!is(action, predicates.object) ||
-				!is(field_name, predicates.string)
+				!is(field_name, predicates.string) ||
+				field_name !== this.table_field.name
 			) {
 				await next();
 				return;
 			}
+
 			if (
 				this.options.allow_adding &&
 				hasShape(
@@ -235,16 +249,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					action
 				)
 			) {
-				if (field_name !== this.table_field.name) {
-					await next();
-					return;
-				}
 				if (!ctx.$body[this.table_field.name]) {
 					ctx.$body[this.table_field.name] = {};
 				}
 				(ctx.$body[this.table_field.name] as any)[action.insert.index] =
 					await this.options.make_new_row(ctx);
 			}
+
 			if (
 				hasShape(
 					{
@@ -253,10 +264,6 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					action
 				)
 			) {
-				if (field_name !== this.table_field.name) {
-					await next();
-					return;
-				}
 				if (!ctx.$body[this.table_field.name]) {
 					ctx.$body[this.table_field.name] = {};
 				}
@@ -270,6 +277,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					)
 				);
 			}
+
 			ctx.override_reaction = {
 				action: "stay",
 				content: await form.render(
@@ -310,4 +318,9 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 		this.options.label_add = value;
 		return this;
 	}
+
+	setAllowReordering(value: boolean) {
+		this.options.allow_reordering = value;
+		return this;
+	}
 }

package/src/mount.ts

@@ -25,16 +25,6 @@ export function mount(
 ): void {
 	const raw_url = typeof url === "string" ? url : url.rawURL;
 
-	const imageRouter = new KoaResponsiveImageRouter({
-		staticPath: "/tmp",
-		thumbnailSize: 10,
-		cacheManagerResolutionThreshold: 10,
-		imageStoragePath: "/tmp",
-		smartCropStoragePath: "/tmp",
-	});
-
-	const fileManager = new FileManager("/tmp", "/uploaded_files");
-
 	const args =
 		use_dummy_app ?
 			[
@@ -44,8 +34,14 @@ export function mount(
 					// regard
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 					ctx.$app = {
-						fileManager,
-						imageRouter,
+						fileManager: new FileManager("/tmp", "/uploaded_files"),
+						imageRouter: new KoaResponsiveImageRouter({
+							staticPath: "/tmp",
+							thumbnailSize: 10,
+							cacheManagerResolutionThreshold: 10,
+							imageStoragePath: "/tmp",
+							smartCropStoragePath: "/tmp",
+						}),
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 						Logger: new Proxy(
 							{},

package/lib/controllers/table-add-button.stimulus.js

@@ -1,35 +0,0 @@
-import { Controller } from "stimulus";
-class table_add_button_stimulus_default extends Controller {
-  constructor() {
-    super(...arguments);
-    this.defaultRowsNumber = 20;
-  }
-  static {
-    this.targets = ["textarea"];
-  }
-  addRow() {
-    const template = this.element.closest("turbo-frame")?.querySelector("template");
-    if (!template) {
-      throw new Error("Couldn't find template");
-    }
-    const tbody = this.element.closest("turbo-frame")?.querySelector("tbody");
-    if (!tbody) {
-      throw new Error("tbody not found");
-    }
-    const orig_template = template.innerHTML;
-    const placeholder = this.element.getAttribute("data-table-placeholder");
-    if (!placeholder) {
-      throw new Error("Could find placeholder attribute");
-    }
-    template.innerHTML = orig_template.replaceAll(
-      placeholder,
-      String(tbody.querySelectorAll("tr").length)
-    );
-    tbody.appendChild(template.cloneNode(true).content);
-    template.innerHTML = orig_template;
-  }
-}
-export {
-  table_add_button_stimulus_default as default
-};
-//# sourceMappingURL=table-add-button.stimulus.js.map

package/src/controllers/table-add-button.stimulus.ts

@@ -1,35 +0,0 @@
-/// <reference lib="dom" />
-import { Controller } from "stimulus";
-
-export default class extends Controller {
-	static targets = ["textarea"];
-	defaultRowsNumber = 20;
-
-	addRow() {
-		const template = this.element
-			.closest("turbo-frame")
-			?.querySelector("template");
-		if (!template) {
-			throw new Error("Couldn't find template");
-		}
-		const tbody = this.element
-			.closest("turbo-frame")
-			?.querySelector("tbody");
-		if (!tbody) {
-			throw new Error("tbody not found");
-		}
-
-		const orig_template = template.innerHTML;
-		const placeholder = this.element.getAttribute("data-table-placeholder");
-		if (!placeholder) {
-			throw new Error("Could find placeholder attribute");
-		}
-		template.innerHTML = orig_template.replaceAll(
-			placeholder,
-			String(tbody.querySelectorAll("tr").length)
-		);
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
-		tbody.appendChild((template.cloneNode(true) as any).content);
-		template.innerHTML = orig_template;
-	}
-}