@sealcode/sealgen 0.8.11 → 0.8.13

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

@@ -21,5 +21,6 @@ export * from "./collapsible-field-group";
 export * from "./collapsible-checkbox-group";
 export * from "./autocomplete";
 export * from "./file";
+export * from "./photo";
 export * from "./multiple-files";
 export * from "./number";

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

@@ -1,14 +1,15 @@
+/// <reference types="node" />
 import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
 import { FileContainer } from "../fields/file";
 import { FormDataValue } from "../form";
 import { SimpleInput } from "./simple-input";
 export declare class File extends SimpleInput<FileContainer> {
     getType(): string;
-    preInput(ctx: Context, data: Record<string, FormDataValue>): Promise<string>;
-    getInputAttributes(ctx: Context, data: Record<string, FormDataValue>, field_prefix: string, form_id: string): Promise<{
-        name: string;
-        required: boolean | "";
-        value: boolean;
-        onchange: string;
-    }>;
+    renderFilePreview(ctx: Context, file_data: {
+        id?: string;
+        filename?: string;
+    }): Promise<FlatTemplatable>;
+    preInput(ctx: Context, data: Record<string, FormDataValue>): Promise<import("stream").Readable>;
+    getInputAttributes(ctx: Context, data: Record<string, FormDataValue>, field_prefix: string, form_id: string): Promise<Record<string, string | boolean>>;
 }

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

@@ -0,0 +1,20 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { File } from "./file";
+import { FileContainer, FormField } from "../fields/field";
+import { SimpleInputOptions } from "./simple-input";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+import { FormDataValue } from "../form";
+export declare class Photo extends File {
+    field: FormField<boolean, FileContainer>;
+    imageRouter: KoaResponsiveImageRouter;
+    constructor(field: FormField<boolean, FileContainer>, imageRouter: KoaResponsiveImageRouter, options?: SimpleInputOptions);
+    getImgStyle(): Promise<string>;
+    renderFilePreview(ctx: Context, file_data: {
+        id?: string;
+        filename?: string;
+    }): Promise<FlatTemplatable>;
+    getInputAttributes(ctx: Context, data: Record<string, FormDataValue>, field_prefix: string, form_id: string): Promise<{
+        onchange: string;
+    }>;
+}

package/lib/forms/controls/controls.js

@@ -47,6 +47,7 @@ __exportStar(require("./collapsible-field-group"), exports);
 __exportStar(require("./collapsible-checkbox-group"), exports);
 __exportStar(require("./autocomplete"), exports);
 __exportStar(require("./file"), exports);
+__exportStar(require("./photo"), exports);
 __exportStar(require("./multiple-files"), exports);
 __exportStar(require("./number"), exports);
 //# sourceMappingURL=controls.js.map

package/lib/forms/controls/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/forms/controls/controls.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA;AACzB,2EAAwE;AAA/D,sIAAA,wBAAwB,OAAA;AACjC,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,4CAA0B;AAC1B,6CAA2B;AAC3B,6CAA2B;AAC3B,0CAAwB;AACxB,oDAAkC;AAClC,mDAAiC;AACjC,4DAA0C;AAC1C,+DAA6C;AAC7C,iDAA+B;AAC/B,yCAAuB;AACvB,mDAAiC;AACjC,2CAAyB"}
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/forms/controls/controls.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA;AACzB,2EAAwE;AAA/D,sIAAA,wBAAwB,OAAA;AACjC,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,4CAA0B;AAC1B,6CAA2B;AAC3B,6CAA2B;AAC3B,0CAAwB;AACxB,oDAAkC;AAClC,mDAAiC;AACjC,4DAA0C;AAC1C,+DAA6C;AAC7C,iDAA+B;AAC/B,yCAAuB;AACvB,0CAAwB;AACxB,mDAAiC;AACjC,2CAAyB"}

package/lib/forms/controls/file.js

@@ -1,14 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.File = void 0;
+const tempstream_1 = require("tempstream");
 const simple_input_1 = require("./simple-input");
 class File extends simple_input_1.SimpleInput {
     getType() {
         return "file";
     }
+    async renderFilePreview(ctx, file_data) {
+        return file_data.filename || "";
+    }
     async preInput(ctx, data) {
         const { parsed } = await this.field.getValue(ctx, data);
-        return /* HTML */ ` ${parsed.old?.filename || ""}
+        return tempstream_1.tempstream /* HTML */ `${parsed.old
+            ? this.renderFilePreview(ctx, parsed.old)
+            : ""}
 			<input
 				type="hidden"
 				name="${this.field.name}[old][id]"
@@ -28,9 +34,6 @@ class File extends simple_input_1.SimpleInput {
             name: this.field.name + "[new]",
             required: original.required && !parsed.old,
             value: false,
-            onchange: (original.onchange || "") +
-                ";" +
-                "filename = this.value.split('\\\\').slice(-1)[0]; this.parentElement.style.setProperty('--filename', '\\'Wybrany plik: ' + filename + '\\'')",
         };
     }
 }

package/lib/forms/controls/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/forms/controls/file.ts"],"names":[],"mappings":";;;AAGA,iDAA6C;AAE7C,MAAa,IAAK,SAAQ,0BAA0B;IACnD,OAAO;QACN,OAAO,MAAM,CAAC;IACf,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,GAAY,EAAE,IAAmC;QAC/D,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO,UAAU,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,QAAQ,IAAI,EAAE;;;YAGtC,IAAI,CAAC,KAAK,CAAC,IAAI;aACd,MAAM,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE;;;;YAIrB,IAAI,CAAC,KAAK,CAAC,IAAI;aACd,MAAM,CAAC,GAAG,EAAE,QAAQ,IAAI,EAAE;MACjC,CAAC;IACN,CAAC;IAED,KAAK,CAAC,kBAAkB,CACvB,GAAY,EACZ,IAAmC,EACnC,YAAoB,EACpB,OAAe;QAEf,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,kBAAkB,CAC9C,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,OAAO,CACP,CAAC;QACF,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO;YACN,GAAG,QAAQ;YACX,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO;YAC/B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,GAAG;YAC1C,KAAK,EAAE,KAAK;YACZ,QAAQ,EACP,CAAC,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;gBACzB,GAAG;gBACH,8IAA8I;SAC/I,CAAC;IACH,CAAC;CACD;AA5CD,oBA4CC"}
+{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/forms/controls/file.ts"],"names":[],"mappings":";;;AACA,2CAAyD;AAGzD,iDAA6C;AAE7C,MAAa,IAAK,SAAQ,0BAA0B;IACnD,OAAO;QACN,OAAO,MAAM,CAAC;IACf,CAAC;IAED,KAAK,CAAC,iBAAiB,CACtB,GAAY,EACZ,SAA6C;QAE7C,OAAO,SAAS,CAAC,QAAQ,IAAI,EAAE,CAAC;IACjC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,GAAY,EAAE,IAAmC;QAC/D,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO,uBAAU,CAAA,UAAU,CAAC,GAAG,MAAM,CAAC,GAAG;YACvC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC;YACzC,CAAC,CAAC,EAAE;;;YAGI,IAAI,CAAC,KAAK,CAAC,IAAI;aACd,MAAM,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE;;;;YAIrB,IAAI,CAAC,KAAK,CAAC,IAAI;aACd,MAAM,CAAC,GAAG,EAAE,QAAQ,IAAI,EAAE;MACjC,CAAC;IACN,CAAC;IAED,KAAK,CAAC,kBAAkB,CACvB,GAAY,EACZ,IAAmC,EACnC,YAAoB,EACpB,OAAe;QAEf,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,kBAAkB,CAC9C,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,OAAO,CACP,CAAC;QACF,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO;YACN,GAAG,QAAQ;YACX,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO;YAC/B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,GAAG;YAC1C,KAAK,EAAE,KAAK;SACZ,CAAC;IACH,CAAC;CACD;AAjDD,oBAiDC"}

package/lib/forms/controls/photo.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Photo = void 0;
+const tempstream_1 = require("tempstream");
+const file_1 = require("./file");
+const sealious_1 = require("sealious");
+class Photo extends file_1.File {
+    constructor(field, imageRouter, options) {
+        super(field, options);
+        this.field = field;
+        this.imageRouter = imageRouter;
+    }
+    async getImgStyle() {
+        return "width: 100px; height: 100px; object-fit: contain";
+    }
+    async renderFilePreview(ctx, file_data) {
+        const { id, filename } = file_data;
+        const class_name = "file_preview";
+        if (!id) {
+            return `<div class="${class_name}"></div>`;
+        }
+        const file = await sealious_1.File.fromID(ctx.$app, id);
+        return tempstream_1.tempstream /* HTML */ `<div class="${class_name}">
+			${this.imageRouter.image({
+            resolutions: [100],
+            sizes_attr: "100px",
+            path: file.getDataPath(),
+            img_style: await this.getImgStyle(),
+        })}
+		</div>`;
+    }
+    async getInputAttributes(ctx, data, field_prefix, form_id) {
+        const original = (await super.getInputAttributes(ctx, data, field_prefix, form_id));
+        const { parsed } = await this.field.getValue(ctx, data);
+        return {
+            ...original,
+            onchange: (original.onchange || "") +
+                ";" +
+                `
+   const file = this.files[0];
+   const preview_container = this.parentElement.querySelector(".file_preview");
+   const target = this;
+   if (file) {
+	 const fileReader = new FileReader();
+	 fileReader.readAsDataURL(file);
+	 fileReader.addEventListener("load", function () {
+        preview_container.innerHTML = \`<img src="\${this.result}" style="${await this.getImgStyle()}" />\`;
+    });    
+}`
+                    .replaceAll("\n", " ")
+                    .replaceAll(`"`, "'"),
+        };
+    }
+}
+exports.Photo = Photo;
+//# sourceMappingURL=photo.js.map

package/lib/forms/controls/photo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo.js","sourceRoot":"","sources":["../../../src/forms/controls/photo.ts"],"names":[],"mappings":";;;AACA,2CAAyD;AACzD,iCAA8B;AAC9B,uCAAgD;AAMhD,MAAa,KAAM,SAAQ,WAAI;IAC9B,YACQ,KAAwC,EACxC,WAAqC,EAC5C,OAA4B;QAE5B,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAJf,UAAK,GAAL,KAAK,CAAmC;QACxC,gBAAW,GAAX,WAAW,CAA0B;IAI7C,CAAC;IAED,KAAK,CAAC,WAAW;QAChB,OAAO,kDAAkD,CAAC;IAC3D,CAAC;IAED,KAAK,CAAC,iBAAiB,CACtB,GAAY,EACZ,SAA6C;QAE7C,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;QACnC,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,IAAI,CAAC,EAAE,EAAE;YACR,OAAO,eAAe,UAAU,UAAU,CAAC;SAC3C;QACD,MAAM,IAAI,GAAG,MAAM,eAAY,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACrD,OAAO,uBAAU,CAAA,UAAU,CAAC,eAAe,UAAU;KAClD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YACxB,WAAW,EAAE,CAAC,GAAG,CAAC;YAClB,UAAU,EAAE,OAAO;YACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE;YACxB,SAAS,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;SACnC,CAAC;SACI,CAAC;IACT,CAAC;IAED,KAAK,CAAC,kBAAkB,CACvB,GAAY,EACZ,IAAmC,EACnC,YAAoB,EACpB,OAAe;QAEf,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAK,CAAC,kBAAkB,CAC/C,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,OAAO,CACP,CAAqC,CAAC;QACvC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO;YACN,GAAG,QAAQ;YACX,QAAQ,EACP,CAAC,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;gBACzB,GAAG;gBACH;;;;;;;;4EAQwE,MAAM,IAAI,CAAC,WAAW,EAAE;;EAElG;qBACI,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC;qBACrB,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;SACvB,CAAC;IACH,CAAC;CACD;AAlED,sBAkEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.8.11",
+	"version": "0.8.13",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -52,6 +52,7 @@
 	"peerDependencies": {
 		"@koa/router": "^10.1.1",
 		"koa": "^2.13.0",
+		"koa-responsive-image-router": "^0.2.2",
 		"sealious": "^0.17.9"
 	}
 }

package/src/forms/controls/controls.ts

@@ -21,5 +21,6 @@ export * from "./collapsible-field-group";
 export * from "./collapsible-checkbox-group";
 export * from "./autocomplete";
 export * from "./file";
+export * from "./photo";
 export * from "./multiple-files";
 export * from "./number";

package/src/forms/controls/file.ts

@@ -1,4 +1,5 @@
 import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { FileContainer } from "../fields/file";
 import { FormDataValue } from "../form";
 import { SimpleInput } from "./simple-input";
@@ -8,9 +9,18 @@ export class File extends SimpleInput<FileContainer> {
 		return "file";
 	}
 
+	async renderFilePreview(
+		ctx: Context,
+		file_data: { id?: string; filename?: string }
+	): Promise<FlatTemplatable> {
+		return file_data.filename || "";
+	}
+
 	async preInput(ctx: Context, data: Record<string, FormDataValue>) {
 		const { parsed } = await this.field.getValue(ctx, data);
-		return /* HTML */ ` ${parsed.old?.filename || ""}
+		return tempstream/* HTML */ `${parsed.old
+				? this.renderFilePreview(ctx, parsed.old)
+				: ""}
 			<input
 				type="hidden"
 				name="${this.field.name}[old][id]"
@@ -28,7 +38,7 @@ export class File extends SimpleInput<FileContainer> {
 		data: Record<string, FormDataValue>,
 		field_prefix: string,
 		form_id: string
-	) {
+	): Promise<Record<string, string | boolean>> {
 		const original = await super.getInputAttributes(
 			ctx,
 			data,
@@ -41,10 +51,6 @@ export class File extends SimpleInput<FileContainer> {
 			name: this.field.name + "[new]",
 			required: original.required && !parsed.old,
 			value: false,
-			onchange:
-				(original.onchange || "") +
-				";" +
-				"filename = this.value.split('\\\\').slice(-1)[0]; this.parentElement.style.setProperty('--filename', '\\'Wybrany plik: ' + filename + '\\'')",
 		};
 	}
 }

package/src/forms/controls/photo.ts

@@ -0,0 +1,76 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { File } from "./file";
+import { File as SealiousFile } from "sealious";
+import { FileContainer, FormField } from "../fields/field";
+import { SimpleInputOptions } from "./simple-input";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+import { FormDataValue } from "../form";
+
+export class Photo extends File {
+	constructor(
+		public field: FormField<boolean, FileContainer>,
+		public imageRouter: KoaResponsiveImageRouter,
+		options?: SimpleInputOptions
+	) {
+		super(field, options);
+	}
+
+	async getImgStyle() {
+		return "width: 100px; height: 100px; object-fit: contain";
+	}
+
+	async renderFilePreview(
+		ctx: Context,
+		file_data: { id?: string; filename?: string }
+	): Promise<FlatTemplatable> {
+		const { id, filename } = file_data;
+		const class_name = "file_preview";
+		if (!id) {
+			return `<div class="${class_name}"></div>`;
+		}
+		const file = await SealiousFile.fromID(ctx.$app, id);
+		return tempstream/* HTML */ `<div class="${class_name}">
+			${this.imageRouter.image({
+				resolutions: [100],
+				sizes_attr: "100px",
+				path: file.getDataPath(),
+				img_style: await this.getImgStyle(),
+			})}
+		</div>`;
+	}
+
+	async getInputAttributes(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		field_prefix: string,
+		form_id: string
+	) {
+		const original = (await super.getInputAttributes(
+			ctx,
+			data,
+			field_prefix,
+			form_id
+		)) as Record<string, string | boolean>;
+		const { parsed } = await this.field.getValue(ctx, data);
+		return {
+			...original,
+			onchange:
+				(original.onchange || "") +
+				";" +
+				`
+   const file = this.files[0];
+   const preview_container = this.parentElement.querySelector(".file_preview");
+   const target = this;
+   if (file) {
+	 const fileReader = new FileReader();
+	 fileReader.readAsDataURL(file);
+	 fileReader.addEventListener("load", function () {
+        preview_container.innerHTML = \`<img src="\${this.result}" style="${await this.getImgStyle()}" />\`;
+    });    
+}`
+					.replaceAll("\n", " ")
+					.replaceAll(`"`, "'"),
+		};
+	}
+}

package/src/forms/controls/#simple-input.ts#

@@ -1,172 +0,0 @@
-import { Context } from "koa";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { attribute } from "../../sanitize";
-import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
-import { FormField } from "../fields/field";
-import { FormDataValue, FormMessage } from "../form";
-import { FormFieldControl } from "./controls";
-
-export type SimpleInputOptions = {
-	id?: string;
-	label?: string;
-	autocomplete?: boolean;
-	hide_errors?: boolean;
-	type?:
-		| "color"
-		| "date"
-		| "email"
-		| "file"
-		| "month"
-		| "number"
-		| "password"
-		| "search"
-		| "tel"
-		| "text"
-		| "time"
-		| "url"
-		| "week";
-	value?: string;
-	placeholder?: string;
-	readonly?: boolean;
-	step?: number;
-};
-
-export class SimpleInput<
-	ParsedValue,
-	Options extends SimpleInputOptions = SimpleInputOptions
-> extends FormFieldControl {
-	options: SimpleInputOptions;
-	constructor(
-		public field: FormField<boolean, ParsedValue>,
-		options?: Options
-	) {
-		super([field]);
-		this.options = options || {};
-	}
-
-	async preInput(
-		_ctx: Context,
-		_data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		return "";
-	}
-
-	getType(): string {
-		return this.options.type || "text";
-	}
-
-	getLabel(): string {
-		return this.options.label != undefined
-			? this.options.label
-			: this.field.name;
-	}
-
-	getID(): string {
-		return this.options.id || this.field.name;
-	}
-
-	getPlaceholder(): string {
-		return (!this.options.placeholder )|| this.getType();
-	}
-
-	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
-	): Promise<Record<string, string | boolean>> {
-		const readonly = this.options.readonly || false;
-		const required = this.field.required;
-		const { parsed, raw, valid } = await this.field.getValue(ctx, data);
-		return Object.fromEntries([
-			<const>["id", this.getID()],
-			<const>["type", this.getType()],
-			<const>["name", `${field_prefix}${this.field.name}`],
-			<const>[
-				"value",
-				!valid && raw
-					? raw.toString()
-					: parsed !== undefined && parsed !== null
-					? ((parsed as any)?.toString() as string) || ""
-					: "",
-			],
-			...(form_id ? [["form", form_id]] : []),
-			<const>["placeholder", this.getPlaceholder()],
-			...(readonly ? [["readonly", true]] : []),
-			...(required ? [["required", true]] : []),
-			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
-			...(this.options.step ? [["step", this.options.step]] : []),
-		]);
-	}
-
-	renderAttributes(attrs: Record<string, string | boolean>) {
-		return Object.entries(attrs)
-			.map(([key, value]) => {
-				if (typeof value === "boolean") {
-					if (value) {
-						return key;
-					} else {
-						return "";
-					}
-				} else {
-					return `${key}="${attribute(value)}"`;
-				}
-			})
-			.join(" ");
-	}
-
-	async postInput(ctx: Context): Promise<FlatTemplatable> {
-		return "";
-	}
-
-	async renderInput(
-		ctx: Context,
-		attributes_str: string,
-		data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		return `<input ${attributes_str} />`;
-	}
-
-	async render<Fields extends Record<string, FormField>>(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		_messages: FormMessage[],
-		field_prefix: string,
-		form_id: string,
-		show_errors: boolean
-	): Promise<FlatTemplatable> {
-		const id = this.getID();
-		const label = this.getLabel();
-		const type = this.getType();
-
-		const { parsed, raw, valid, message } = await this.field.getValue(
-			ctx,
-			data
-		);
-		const placeholder = this.getPlaceholder();
-
-		return inputWrapper(
-			[id, type, getRequiredClass(this.field.required)],
-			tempstream/* HTML */ `
-				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(ctx, data)}
-				${this.renderInput(
-					ctx,
-					this.renderAttributes(
-						await this.getInputAttributes(
-							ctx,
-							data,
-							field_prefix,
-							form_id
-						)
-					),
-					data
-				)}
-				${this.postInput(ctx)}
-				${~valid && !this.options.hide_errors && show_errors
-					? `<div class="input__error">${message}</div>`
-					: ""}
-			`
-		);
-	}
-}