@sealcode/sealgen 0.8.14 → 0.8.16

package/@types/components/components.d.ts

@@ -1 +1,2 @@
 export * from "./tabs";
+export * from "./toggle-modal";

package/@types/components/toggle-modal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="node" />
+import { FlatTemplatable } from "tempstream";
+export declare function toggleModal(options: {
+    name: string;
+    contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
+    contentUnwrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
+}): import("stream").Readable;

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

@@ -24,3 +24,4 @@ export * from "./file";
 export * from "./photo";
 export * from "./multiple-files";
 export * from "./number";
+export * from "./multiple-photos";

package/@types/forms/controls/multiple-files.d.ts

@@ -15,6 +15,7 @@ export declare class MultipleFiles extends FormFieldControl {
     field: MultipleFilesField;
     options: MultipleFilesOptions;
     constructor(field: MultipleFilesField, options?: MultipleFilesOptions);
+    getClassModifiers(): string[];
     mount(router: Router): void;
     deleteFileAssociation(ctx: Context, file_item_id: string): Promise<void>;
     addFileAssociation(ctx: Context, file: SealiousFile): Promise<void>;
@@ -25,7 +26,14 @@ export declare class MultipleFiles extends FormFieldControl {
     getReferencingCollection(): Collection;
     getFileField(): SealiousField | null;
     extractFileFromItem(item: CollectionItem): Promise<SealiousFile | null>;
+    renderFileItemPreview(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
     renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable;
     getFileItems(ctx: Context): Promise<CollectionItem<any>[]>;
+    getInputAttributes(): {
+        type: string;
+        name: string;
+        multiple: boolean;
+    };
     renderFrameContent(ctx: Context): Promise<FlatTemplatable>;
 }

package/@types/forms/controls/multiple-photos.d.ts

@@ -0,0 +1,18 @@
+import { File as SealiousFile, CollectionItem } from "sealious";
+import { FlatTemplatable } from "tempstream";
+import { MultipleFiles, MultipleFilesOptions } from "./multiple-files";
+import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+export declare class MultiplePhotos extends MultipleFiles {
+    field: MultipleFilesField;
+    imageRouter: KoaResponsiveImageRouter;
+    constructor(field: MultipleFilesField, imageRouter: KoaResponsiveImageRouter, options?: MultipleFilesOptions);
+    getClassModifiers(): string[];
+    getInputAttributes(): {
+        accept: string;
+        type: string;
+        name: string;
+        multiple: boolean;
+    };
+    renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+}

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

@@ -15,6 +15,7 @@ export declare class Photo extends File {
         filename?: string;
     }): Promise<FlatTemplatable>;
     getInputAttributes(ctx: Context, data: Record<string, FormDataValue>, field_prefix: string, form_id: string): Promise<{
+        accept: string;
         onchange: string;
     }>;
 }

package/@types/forms/controls/simple-input.d.ts

@@ -24,7 +24,6 @@ export declare class SimpleInput<ParsedValue, Options extends SimpleInputOptions
     getID(): string;
     getPlaceholder(): string;
     getInputAttributes(ctx: Context, data: Record<string, FormDataValue>, field_prefix: string, form_id: string): Promise<Record<string, string | boolean>>;
-    renderAttributes(attrs: Record<string, string | boolean>): string;
     postInput(ctx: Context): Promise<FlatTemplatable>;
     renderInput(ctx: Context, attributes_str: string, data: Record<string, FormDataValue>): Promise<FlatTemplatable>;
     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>;

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

@@ -17,7 +17,7 @@ export declare abstract class Tickable<T extends unknown> extends FormFieldContr
     type: "checkbox" | "radio";
     abstract getValueAttribute(ctx: Context, data: Record<string, FormDataValue>, value: T): string;
     abstract isChecked(ctx: Context, data: Record<string, FormDataValue>, value: T): boolean;
-    makeInputID(): string;
+    makeInputID(ctx: Context, data: Record<string, FormDataValue>, value: T): string;
     getWrapperClasses(ctx: Context, data: Record<string, FormDataValue>, value: T): string[];
     render<Fields extends Record<string, FormField>>(ctx: Context, data: Record<string, FormDataValue>, _: unknown[], field_prefix: string, form_id: string, show_field_errors: boolean): Promise<FlatTemplatable>;
 }

package/@types/utils/make-slug.d.ts

@@ -0,0 +1 @@
+export declare function makeSlug(t: string): string;

package/@types/utils/render-attributes.d.ts

@@ -0,0 +1 @@
+export declare function renderAttributes(attrs: Record<string, string | boolean>): string;

package/@types/utils/utils.d.ts

@@ -7,3 +7,5 @@ export { exec } from "./exec";
 export { importPath, curryImportPath } from "./import-path";
 export { listCollections } from "./list-collections";
 export { walkDir } from "./walk";
+export * from "./make-slug";
+export * from "./render-attributes";

package/lib/components/components.js

@@ -11,4 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./toggle-modal"), exports);
 //# sourceMappingURL=components.js.map

package/lib/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB;AACvB,iDAA+B"}

package/lib/components/toggle-modal.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleModal = void 0;
+const tempstream_1 = require("tempstream");
+const utils_1 = require("../utils/utils");
+function toggleModal(options) {
+    const { contentWrapped, contentUnwrapped, name } = options;
+    const id = utils_1.makeSlug(name);
+    return tempstream_1.tempstream /* HTML */ `<style>
+			.toggle-modal__wrapped {
+				display: none;
+			}
+
+			@media (max-width: 960px) {
+				.toggle-modal__wrapped {
+					display: block;
+				}
+				.toggle-modal__unwrapped {
+					display: none;
+				}
+
+				#${id} {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__wrapped {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__unwrapped {
+					display: block;
+					position: fixed;
+					height: 100vh;
+					width: 100vw;
+					top: 0;
+					left: 0;
+					background-color: white;
+					z-index: 99;
+					overflow-y: scroll;
+				}
+			}
+		</style>
+		<div class="toggle-modal toggle-modal--${id}">
+			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
+			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
+			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
+		</div>`;
+}
+exports.toggleModal = toggleModal;
+//# sourceMappingURL=toggle-modal.js.map

package/lib/components/toggle-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-modal.js","sourceRoot":"","sources":["../../src/components/toggle-modal.ts"],"names":[],"mappings":";;;AAAA,2CAAyD;AACzD,0CAA0C;AAE1C,SAAgB,WAAW,CAAC,OAM3B;IACA,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC3D,MAAM,EAAE,GAAG,gBAAQ,CAAC,IAAI,CAAC,CAAC;IAC1B,OAAO,uBAAU,CAAA,UAAU,CAAC;;;;;;;;;;;;;OAatB,EAAE;;;;OAIF,EAAE;;;;OAIF,EAAE;;;;;;;;;;;;;2CAakC,EAAE;gBAC7B,EAAE,WAAW,EAAE;wCACS,cAAc,CAAC,EAAE,CAAC;0CAChB,gBAAgB,CAAC,EAAE,CAAC;SACrD,CAAC;AACV,CAAC;AAhDD,kCAgDC"}

package/lib/forms/controls/controls.js

@@ -50,4 +50,5 @@ __exportStar(require("./file"), exports);
 __exportStar(require("./photo"), exports);
 __exportStar(require("./multiple-files"), exports);
 __exportStar(require("./number"), exports);
+__exportStar(require("./multiple-photos"), 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,0CAAwB;AACxB,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;AACzB,oDAAkC"}

package/lib/forms/controls/multiple-files.js

@@ -6,12 +6,16 @@ const input_wrapper_1 = require("../../utils/input-wrapper");
 const tempstream_1 = require("tempstream");
 const form_field_control_1 = require("./form-field-control");
 const ts_predicates_1 = require("@sealcode/ts-predicates");
+const render_attributes_1 = require("../../utils/render-attributes");
 class MultipleFiles extends form_field_control_1.FormFieldControl {
     constructor(field, options) {
         super([field]);
         this.field = field;
         this.options = options || {};
     }
+    getClassModifiers() {
+        return [];
+    }
     mount(router) {
         router.get(this.getFrameRelativeURL(), async (ctx) => {
             ctx.body = this.renderFrame(ctx, await this.renderFrameContent(ctx));
@@ -21,12 +25,15 @@ class MultipleFiles extends form_field_control_1.FormFieldControl {
             ctx.body = this.renderFrame(ctx, await this.renderFrameContent(ctx));
         });
         router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-            const file = ctx.$body.file;
-            if (!file || !ts_predicates_1.is(file, ts_predicates_1.predicates.object)) {
-                ctx.body = "Missing file";
+            let files = ctx.$body.files;
+            if (!files || !ts_predicates_1.is(files, ts_predicates_1.predicates.object)) {
+                ctx.body = "Missing files";
                 return;
             }
-            await this.addFileAssociation(ctx, file);
+            if (!Array.isArray(files)) {
+                files = [files];
+            }
+            await Promise.all(files.map((file) => this.addFileAssociation(ctx, file)));
             ctx.body = this.renderFrame(ctx, await this.renderFrameContent(ctx));
         });
     }
@@ -82,20 +89,34 @@ class MultipleFiles extends form_field_control_1.FormFieldControl {
         }
         return await sealious_1.File.fromID(item.collection.app, item.get(sealious_field.name).id);
     }
+    async renderFileItemPreview(fileItem, file) {
+        return file.filename || "no filename";
+    }
     async renderFileItem(fileItem, file) {
-        return /* HTML */ `<li>
-			<a href="${file.getURL()}" data-turbo="false">
-				${file.filename || "no filename"}
-			</a>
-			<form
-				data-turbo-frame="${this.getFrameID()}"
-				action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
-				method="POST"
+        return /* HTML */ `<li class="file-list-item">
+			<a
+				class="file-list-item__preview"
+				href="${file.getURL()}"
+				data-turbo="false"
 			>
-				<input type="submit" value="X" class="file-list-action" />
-			</form>
+				${this.renderFileItemPreview(fileItem, file)}
+			</a>
+			${this.renderFileRemoveButton(fileItem)}
 		</li>`;
     }
+    renderFileRemoveButton(fileItem) {
+        return /* HTML */ ` <form
+			data-turbo-frame="${this.getFrameID()}"
+			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
+			method="POST"
+		>
+			<input
+				type="submit"
+				value="X"
+				class="file-list-action file-list-item__button file-list-item__button--delete"
+			/>
+		</form>`;
+    }
     async getFileItems(ctx) {
         const item_id = await this.field.getItemId(ctx);
         const { items: [item], } = await this.field.collection_field.collection
@@ -107,14 +128,17 @@ class MultipleFiles extends form_field_control_1.FormFieldControl {
             .getAttachments(this.field.collection_field.name)
             .filter((f) => f);
     }
+    getInputAttributes() {
+        return { type: "file", name: "files", multiple: true };
+    }
     async renderFrameContent(ctx) {
         const files = (await Promise.all((await this.getFileItems(ctx)).map(async (item) => [
             item,
             await this.extractFileFromItem(item),
         ]))).filter(([_, f]) => f !== null);
-        return input_wrapper_1.inputWrapper(["multiple-files", this.field.name], tempstream_1.tempstream /* HTML */ `
+        return input_wrapper_1.inputWrapper(["multiple-files", this.field.name, ...this.getClassModifiers()], tempstream_1.tempstream /* HTML */ `
 				<label>${this.options.label || this.field.name}</label>
-				<ul>
+				<ul class="multiple-files__list">
 					${files.map(([item, file]) => this.renderFileItem(item, file))}
 				</ul>
 				<form
@@ -123,7 +147,7 @@ class MultipleFiles extends form_field_control_1.FormFieldControl {
 					enctype="multipart/form-data"
 					data-turbo-frame="${this.getFrameID()}"
 				>
-					<input type="file" name="file" />
+					<input ${render_attributes_1.renderAttributes(this.getInputAttributes())} />
 					<input
 						type="submit"
 						value="${this.options.uploadLabel || "Upload"}"

package/lib/forms/controls/multiple-files.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiple-files.js","sourceRoot":"","sources":["../../../src/forms/controls/multiple-files.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"multiple-files.js","sourceRoot":"","sources":["../../../src/forms/controls/multiple-files.ts"],"names":[],"mappings":"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"}

package/lib/forms/controls/multiple-photos.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiplePhotos = void 0;
+const tempstream_1 = require("tempstream");
+const multiple_files_1 = require("./multiple-files");
+class MultiplePhotos extends multiple_files_1.MultipleFiles {
+    constructor(field, imageRouter, options) {
+        super(field, options);
+        this.field = field;
+        this.imageRouter = imageRouter;
+    }
+    getClassModifiers() {
+        return ["multiple-files--photos"];
+    }
+    getInputAttributes() {
+        return { ...super.getInputAttributes(), accept: "image/*" };
+    }
+    async renderFileItem(fileItem, file) {
+        const path = file.getDataPath();
+        if (!path) {
+            return "missing file";
+        }
+        return tempstream_1.tempstream /* HTML */ `<li>
+			<a href="${file.getURL()}" data-turbo="false">
+				${this.imageRouter.image({
+            path,
+            resolutions: [150, 300],
+            sizes_attr: "150px",
+        })}
+			</a>
+			<span class="filename"> ${file.filename || "no filename"}</span>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+    }
+}
+exports.MultiplePhotos = MultiplePhotos;
+//# sourceMappingURL=multiple-photos.js.map

package/lib/forms/controls/multiple-photos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple-photos.js","sourceRoot":"","sources":["../../../src/forms/controls/multiple-photos.ts"],"names":[],"mappings":";;;AACA,2CAAyD;AACzD,qDAAuE;AAIvE,MAAa,cAAe,SAAQ,8BAAa;IAChD,YACQ,KAAyB,EACzB,WAAqC,EAC5C,OAA8B;QAE9B,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAJf,UAAK,GAAL,KAAK,CAAoB;QACzB,gBAAW,GAAX,WAAW,CAA0B;IAI7C,CAAC;IAED,iBAAiB;QAChB,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACnC,CAAC;IAED,kBAAkB;QACjB,OAAO,EAAE,GAAG,KAAK,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAC7D,CAAC;IAED,KAAK,CAAC,cAAc,CACnB,QAAwB,EACxB,IAAkB;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,IAAI,CAAC,IAAI,EAAE;YACV,OAAO,cAAc,CAAC;SACtB;QACD,OAAO,uBAAU,CAAA,UAAU,CAAC;cAChB,IAAI,CAAC,MAAM,EAAE;MACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YACxB,IAAI;YACJ,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACvB,UAAU,EAAE,OAAO;SACnB,CAAC;;6BAEuB,IAAI,CAAC,QAAQ,IAAI,aAAa;KACtD,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC;QAClC,CAAC;IACR,CAAC;CACD;AArCD,wCAqCC"}

package/lib/forms/controls/photo.js

@@ -34,6 +34,7 @@ class Photo extends file_1.File {
         const { parsed } = await this.field.getValue(ctx, data);
         return {
             ...original,
+            accept: "image/*",
             onchange: (original.onchange || "") +
                 ";" +
                 `

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

@@ -1 +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"}
+{"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,MAAM,EAAE,SAAS;YACjB,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;AAnED,sBAmEC"}

package/lib/forms/controls/simple-input.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleInput = void 0;
 const tempstream_1 = require("tempstream");
-const sanitize_1 = require("../../sanitize");
 const input_wrapper_1 = require("../../utils/input-wrapper");
+const render_attributes_1 = require("../../utils/render-attributes");
 const controls_1 = require("./controls");
 class SimpleInput extends controls_1.FormFieldControl {
     constructor(field, options) {
@@ -54,23 +54,6 @@ class SimpleInput extends controls_1.FormFieldControl {
             ...(this.options.step ? [["step", this.options.step]] : []),
         ]);
     }
-    renderAttributes(attrs) {
-        return Object.entries(attrs)
-            .map(([key, value]) => {
-            if (typeof value === "boolean") {
-                if (value) {
-                    return key;
-                }
-                else {
-                    return "";
-                }
-            }
-            else {
-                return `${key}="${sanitize_1.attribute(value)}"`;
-            }
-        })
-            .join(" ");
-    }
     async postInput(ctx) {
         return "";
     }
@@ -86,7 +69,7 @@ class SimpleInput extends controls_1.FormFieldControl {
         return input_wrapper_1.inputWrapper([id, type, input_wrapper_1.getRequiredClass(this.field.required)], tempstream_1.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.renderInput(ctx, render_attributes_1.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>`

package/lib/forms/controls/simple-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-input.js","sourceRoot":"","sources":["../../../src/forms/controls/simple-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"simple-input.js","sourceRoot":"","sources":["../../../src/forms/controls/simple-input.ts"],"names":[],"mappings":"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"}

package/lib/forms/controls/tickable.js

@@ -10,12 +10,14 @@ class Tickable extends controls_1.FormFieldControl {
         this.field = field;
         this.options = options;
     }
-    makeInputID() {
-        return this.options.id || this.field.name;
+    makeInputID(ctx, data, value) {
+        const value_attr = this.getValueAttribute(ctx, data, value);
+        return (this.options.id ||
+            this.field.name + (value_attr ? "--" + value_attr : ""));
     }
     getWrapperClasses(ctx, data, value) {
         return [
-            this.makeInputID(),
+            this.makeInputID(ctx, data, value),
             this.type,
             this.field.name.replaceAll(/\W/g, "-"),
             input_wrapper_1.getRequiredClass(this.field.required),
@@ -23,16 +25,16 @@ class Tickable extends controls_1.FormFieldControl {
         ];
     }
     async render(ctx, data, _, field_prefix, form_id, show_field_errors) {
-        const id = this.makeInputID();
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const { parsed, valid, message } = await this.field.getValue(ctx, data);
+        const value = this.getValueAttribute(ctx, data, parsed);
+        const id = this.makeInputID(ctx, data, parsed);
         const label = this.options.label != undefined
             ? this.options.label
             : this.field.name;
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        const { parsed, valid, message } = await this.field.getValue(ctx, data);
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const readonly = this.options.readonly || false;
         const required = this.field.required;
-        const value = this.getValueAttribute(ctx, data, parsed);
         return input_wrapper_1.inputWrapper(this.getWrapperClasses(ctx, data, parsed), 
         /* HTML */ `
 				<input

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

@@ -1 +1 @@
-{"version":3,"file":"tickable.js","sourceRoot":"","sources":["../../../src/forms/controls/tickable.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tickable.js","sourceRoot":"","sources":["../../../src/forms/controls/tickable.ts"],"names":[],"mappings":"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"}

package/lib/forms/fields/file.js

@@ -34,9 +34,8 @@ class File extends field_1.FormField {
                 raw_value.old.id
                 ? await sealious_1.File.fromID(ctx.$app, raw_value.old.id)
                 : null;
-            const new_file = ts_predicates_1.hasField("new", raw_value) &&
-                raw_value.new instanceof sealious_1.File
-                ? raw_value.new
+            const new_file = ts_predicates_1.hasFieldOfType(raw_value, "new", ts_predicates_1.predicates.array(ts_predicates_1.predicates.object)) && raw_value.new[0] instanceof sealious_1.File
+                ? raw_value.new[0]
                 : null;
             result = {
                 parsable: true,

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

@@ -1 +1 @@
-{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/forms/fields/file.ts"],"names":[],"mappings":";;;AAAA,2DAMiC;AAEjC,uCAAgD;AAEhD,mCAAsD;AAOtD,MAAa,IAA+B,SAAQ,iBAGnD;IACA,KAAK,CAAC,KAAK,CACV,GAAY,EACZ,SAAwB;QAExB,IAAI,MAAM,CAAC;QACX,IACC,SAAS,YAAY,eAAY;YACjC,CAAC,kBAAE,CAAC,SAAS,EAAE,0BAAU,CAAC,MAAM,CAAC;gBAChC,wBAAQ,CACP;oBACC,QAAQ,EAAE,0BAAU,CAAC,MAAM;oBAC3B,EAAE,EAAE,0BAAU,CAAC,MAAM;iBACrB,EACD,SAAS,CACT;gBACD,SAAS,CAAC,EAAE,CAAC,EACb;YACD,MAAM,IAAI,GAAG,MAAM,eAAY,CAAC,MAAM,CACrC,GAAG,CAAC,IAAI,EACR,SAAS,CAAC,EAAY,CACtB,CAAC;YACF,MAAM,GAAG;gBACR,YAAY,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE;gBACtC,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAY;aACtB,CAAC;SACF;aAAM,IAAI,CAAC,kBAAE,CAAC,SAAS,EAAE,0BAAU,CAAC,MAAM,CAAC,EAAE;YAC7C,MAAM,GAAG;gBACR,YAAY,EAAE,IAAI;gBAClB,KAAK,EAAE,wEAAwE;gBAC/E,QAAQ,EAAE,KAAc;aACxB,CAAC;SACF;aAAM;YACN,MAAM,QAAQ,GACb,8BAAc,CAAC,SAAS,EAAE,KAAK,EAAE,0BAAU,CAAC,MAAM,CAAC;gBACnD,wBAAQ,CACP,EAAE,EAAE,EAAE,0BAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,0BAAU,CAAC,MAAM,EAAE,EACtD,SAAS,CAAC,GAAG,CACb;gBACD,SAAS,CAAC,GAAG,CAAC,EAAE;gBACf,CAAC,CAAC,MAAM,eAAY,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvD,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,QAAQ,GACb,wBAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;gBAC1B,SAAS,CAAC,GAAG,YAAY,eAAY;gBACpC,CAAC,CAAC,SAAS,CAAC,GAAG;gBACf,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,GAAG;gBACR,QAAQ,EAAE,IAAY;gBACtB,KAAK,EAAE,IAAI;gBACX,YAAY,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE;aAC9C,CAAC;SACF;QACD,OAAO,MAAM,CAAC;IACf,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,GAAY,EAAE,IAAmC;QACvE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAClD,OAAO,MAAM,CAAC,GAAG,IAAI,SAAS,CAAC;IAChC,CAAC;IAED,aAAa;QACZ,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACjC,CAAC;CACD;AApED,oBAoEC"}
+{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/forms/fields/file.ts"],"names":[],"mappings":";;;AAAA,2DAMiC;AAEjC,uCAAgD;AAEhD,mCAAsD;AAOtD,MAAa,IAA+B,SAAQ,iBAGnD;IACA,KAAK,CAAC,KAAK,CACV,GAAY,EACZ,SAAwB;QAExB,IAAI,MAAM,CAAC;QACX,IACC,SAAS,YAAY,eAAY;YACjC,CAAC,kBAAE,CAAC,SAAS,EAAE,0BAAU,CAAC,MAAM,CAAC;gBAChC,wBAAQ,CACP;oBACC,QAAQ,EAAE,0BAAU,CAAC,MAAM;oBAC3B,EAAE,EAAE,0BAAU,CAAC,MAAM;iBACrB,EACD,SAAS,CACT;gBACD,SAAS,CAAC,EAAE,CAAC,EACb;YACD,MAAM,IAAI,GAAG,MAAM,eAAY,CAAC,MAAM,CACrC,GAAG,CAAC,IAAI,EACR,SAAS,CAAC,EAAY,CACtB,CAAC;YACF,MAAM,GAAG;gBACR,YAAY,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE;gBACtC,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAY;aACtB,CAAC;SACF;aAAM,IAAI,CAAC,kBAAE,CAAC,SAAS,EAAE,0BAAU,CAAC,MAAM,CAAC,EAAE;YAC7C,MAAM,GAAG;gBACR,YAAY,EAAE,IAAI;gBAClB,KAAK,EAAE,wEAAwE;gBAC/E,QAAQ,EAAE,KAAc;aACxB,CAAC;SACF;aAAM;YACN,MAAM,QAAQ,GACb,8BAAc,CAAC,SAAS,EAAE,KAAK,EAAE,0BAAU,CAAC,MAAM,CAAC;gBACnD,wBAAQ,CACP,EAAE,EAAE,EAAE,0BAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,0BAAU,CAAC,MAAM,EAAE,EACtD,SAAS,CAAC,GAAG,CACb;gBACD,SAAS,CAAC,GAAG,CAAC,EAAE;gBACf,CAAC,CAAC,MAAM,eAAY,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvD,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,QAAQ,GACb,8BAAc,CACb,SAAS,EACT,KAAK,EACL,0BAAU,CAAC,KAAK,CAAC,0BAAU,CAAC,MAAM,CAAC,CACnC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,eAAY;gBAC5C,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;gBAClB,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,GAAG;gBACR,QAAQ,EAAE,IAAY;gBACtB,KAAK,EAAE,IAAI;gBACX,YAAY,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE;aAC9C,CAAC;SACF;QACD,OAAO,MAAM,CAAC;IACf,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,GAAY,EAAE,IAAmC;QACvE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAClD,OAAO,MAAM,CAAC,GAAG,IAAI,SAAS,CAAC;IAChC,CAAC;IAED,aAAa;QACZ,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACjC,CAAC;CACD;AAvED,oBAuEC"}

package/lib/utils/make-slug.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSlug = void 0;
+function makeSlug(t) {
+    return t
+        .replaceAll(/\P{General_Category=Letter}/g, "-")
+        .replaceAll(/-+/g, "-");
+}
+exports.makeSlug = makeSlug;
+//# sourceMappingURL=make-slug.js.map

package/lib/utils/make-slug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-slug.js","sourceRoot":"","sources":["../../src/utils/make-slug.ts"],"names":[],"mappings":";;;AAAA,SAAgB,QAAQ,CAAC,CAAS;IACjC,OAAO,CAAC;SACN,UAAU,CAAC,8BAA8B,EAAE,GAAG,CAAC;SAC/C,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC1B,CAAC;AAJD,4BAIC"}

package/lib/utils/render-attributes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAttributes = void 0;
+const sanitize_1 = require("../sanitize");
+function renderAttributes(attrs) {
+    return Object.entries(attrs)
+        .map(([key, value]) => {
+        if (typeof value === "boolean") {
+            if (value) {
+                return key;
+            }
+            else {
+                return "";
+            }
+        }
+        else {
+            return `${key}="${sanitize_1.attribute(value)}"`;
+        }
+    })
+        .join(" ");
+}
+exports.renderAttributes = renderAttributes;
+//# sourceMappingURL=render-attributes.js.map

package/lib/utils/render-attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-attributes.js","sourceRoot":"","sources":["../../src/utils/render-attributes.ts"],"names":[],"mappings":";;;AAAA,0CAAwC;AAExC,SAAgB,gBAAgB,CAAC,KAAuC;IACvE,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SAC1B,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACrB,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC/B,IAAI,KAAK,EAAE;gBACV,OAAO,GAAG,CAAC;aACX;iBAAM;gBACN,OAAO,EAAE,CAAC;aACV;SACD;aAAM;YACN,OAAO,GAAG,GAAG,KAAK,oBAAS,CAAC,KAAK,CAAC,GAAG,CAAC;SACtC;IACF,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACb,CAAC;AAdD,4CAcC"}

package/lib/utils/utils.js

@@ -1,4 +1,14 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.walkDir = exports.listCollections = exports.curryImportPath = exports.importPath = exports.exec = exports.UrlWithNewParams = exports.naturalNumbers = exports.sleep = void 0;
 var sleep_1 = require("./sleep");
@@ -16,4 +26,6 @@ var list_collections_1 = require("./list-collections");
 Object.defineProperty(exports, "listCollections", { enumerable: true, get: function () { return list_collections_1.listCollections; } });
 var walk_1 = require("./walk");
 Object.defineProperty(exports, "walkDir", { enumerable: true, get: function () { return walk_1.walkDir; } });
+__exportStar(require("./make-slug"), exports);
+__exportStar(require("./render-attributes"), exports);
 //# sourceMappingURL=utils.js.map

package/lib/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";;;AAGA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA;AACzB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA4D;AAAnD,yGAAA,UAAU,OAAA;AAAE,8GAAA,eAAe,OAAA;AACpC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+BAAiC;AAAxB,+FAAA,OAAO,OAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAGA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA;AACzB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA4D;AAAnD,yGAAA,UAAU,OAAA;AAAE,8GAAA,eAAe,OAAA;AACpC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+BAAiC;AAAxB,+FAAA,OAAO,OAAA;AAChB,8CAA4B;AAC5B,sDAAoC"}

package/package.json

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

package/src/components/components.ts

@@ -1 +1,2 @@
 export * from "./tabs";
+export * from "./toggle-modal";

package/src/components/toggle-modal.ts

@@ -0,0 +1,52 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+import { makeSlug } from "../utils/utils";
+
+export function toggleModal(options: {
+	name: string;
+	contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
+	contentUnwrapped: (
+		id: string
+	) => FlatTemplatable | Promise<FlatTemplatable>;
+}) {
+	const { contentWrapped, contentUnwrapped, name } = options;
+	const id = makeSlug(name);
+	return tempstream/* HTML */ `<style>
+			.toggle-modal__wrapped {
+				display: none;
+			}
+
+			@media (max-width: 960px) {
+				.toggle-modal__wrapped {
+					display: block;
+				}
+				.toggle-modal__unwrapped {
+					display: none;
+				}
+
+				#${id} {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__wrapped {
+					display: none;
+				}
+
+				#${id}:checked ~ .toggle-modal__unwrapped {
+					display: block;
+					position: fixed;
+					height: 100vh;
+					width: 100vw;
+					top: 0;
+					left: 0;
+					background-color: white;
+					z-index: 99;
+					overflow-y: scroll;
+				}
+			}
+		</style>
+		<div class="toggle-modal toggle-modal--${id}">
+			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
+			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
+			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
+		</div>`;
+}

package/src/forms/controls/controls.ts

@@ -24,3 +24,4 @@ export * from "./file";
 export * from "./photo";
 export * from "./multiple-files";
 export * from "./number";
+export * from "./multiple-photos";

package/src/forms/controls/multiple-files.ts

@@ -12,6 +12,7 @@ import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./form-field-control";
 import { is, predicates } from "@sealcode/ts-predicates";
+import { renderAttributes } from "../../utils/render-attributes";
 
 export type MultipleFilesOptions = { label?: string; uploadLabel?: string };
 
@@ -25,6 +26,10 @@ export class MultipleFiles extends FormFieldControl {
 		this.options = options || {};
 	}
 
+	getClassModifiers(): string[] {
+		return [];
+	}
+
 	mount(router: Router) {
 		router.get(this.getFrameRelativeURL(), async (ctx) => {
 			ctx.body = this.renderFrame(
@@ -45,12 +50,22 @@ export class MultipleFiles extends FormFieldControl {
 		);
 
 		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-			const file = ctx.$body.file;
-			if (!file || !is(file, predicates.object)) {
-				ctx.body = "Missing file";
+			let files = ctx.$body.files as SealiousFile | SealiousFile[];
+			if (!files || !is(files, predicates.object)) {
+				ctx.body = "Missing files";
 				return;
 			}
-			await this.addFileAssociation(ctx, file as unknown as SealiousFile);
+			if (!Array.isArray(files)) {
+				files = [files];
+			}
+			await Promise.all(
+				files.map((file) =>
+					this.addFileAssociation(
+						ctx,
+						file as unknown as SealiousFile
+					)
+				)
+			);
 			ctx.body = this.renderFrame(
 				ctx,
 				await this.renderFrameContent(ctx)
@@ -141,24 +156,43 @@ export class MultipleFiles extends FormFieldControl {
 		);
 	}
 
+	async renderFileItemPreview(
+		fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		return file.filename || "no filename";
+	}
+
 	async renderFileItem(
 		fileItem: CollectionItem,
 		file: SealiousFile
 	): Promise<FlatTemplatable> {
-		return /* HTML */ `<li>
-			<a href="${file.getURL()}" data-turbo="false">
-				${file.filename || "no filename"}
-			</a>
-			<form
-				data-turbo-frame="${this.getFrameID()}"
-				action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
-				method="POST"
+		return /* HTML */ `<li class="file-list-item">
+			<a
+				class="file-list-item__preview"
+				href="${file.getURL()}"
+				data-turbo="false"
 			>
-				<input type="submit" value="X" class="file-list-action" />
-			</form>
+				${this.renderFileItemPreview(fileItem, file)}
+			</a>
+			${this.renderFileRemoveButton(fileItem)}
 		</li>`;
 	}
 
+	renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable {
+		return /* HTML */ ` <form
+			data-turbo-frame="${this.getFrameID()}"
+			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
+			method="POST"
+		>
+			<input
+				type="submit"
+				value="X"
+				class="file-list-action file-list-item__button file-list-item__button--delete"
+			/>
+		</form>`;
+	}
+
 	async getFileItems(ctx: Context) {
 		const item_id = await this.field.getItemId(ctx);
 		const {
@@ -173,6 +207,10 @@ export class MultipleFiles extends FormFieldControl {
 			.filter((f) => f);
 	}
 
+	getInputAttributes() {
+		return { type: "file", name: "files", multiple: true };
+	}
+
 	async renderFrameContent(ctx: Context): Promise<FlatTemplatable> {
 		const files = (
 			await Promise.all(
@@ -186,10 +224,10 @@ export class MultipleFiles extends FormFieldControl {
 		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
 
 		return inputWrapper(
-			["multiple-files", this.field.name],
+			["multiple-files", this.field.name, ...this.getClassModifiers()],
 			tempstream/* HTML */ `
 				<label>${this.options.label || this.field.name}</label>
-				<ul>
+				<ul class="multiple-files__list">
 					${files.map(([item, file]) =>
 						this.renderFileItem(item, file)
 					)}
@@ -200,7 +238,7 @@ export class MultipleFiles extends FormFieldControl {
 					enctype="multipart/form-data"
 					data-turbo-frame="${this.getFrameID()}"
 				>
-					<input type="file" name="file" />
+					<input ${renderAttributes(this.getInputAttributes())} />
 					<input
 						type="submit"
 						value="${this.options.uploadLabel || "Upload"}"

package/src/forms/controls/multiple-photos.ts

@@ -0,0 +1,44 @@
+import { File as SealiousFile, CollectionItem } from "sealious";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { MultipleFiles, MultipleFilesOptions } from "./multiple-files";
+import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+
+export class MultiplePhotos extends MultipleFiles {
+	constructor(
+		public field: MultipleFilesField,
+		public imageRouter: KoaResponsiveImageRouter,
+		options?: MultipleFilesOptions
+	) {
+		super(field, options);
+	}
+
+	getClassModifiers() {
+		return ["multiple-files--photos"];
+	}
+
+	getInputAttributes() {
+		return { ...super.getInputAttributes(), accept: "image/*" };
+	}
+
+	async renderFileItem(
+		fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		const path = file.getDataPath();
+		if (!path) {
+			return "missing file";
+		}
+		return tempstream/* HTML */ `<li>
+			<a href="${file.getURL()}" data-turbo="false">
+				${this.imageRouter.image({
+					path,
+					resolutions: [150, 300],
+					sizes_attr: "150px",
+				})}
+			</a>
+			<span class="filename"> ${file.filename || "no filename"}</span>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+	}
+}

package/src/forms/controls/photo.ts

@@ -55,6 +55,7 @@ export class Photo extends File {
 		const { parsed } = await this.field.getValue(ctx, data);
 		return {
 			...original,
+			accept: "image/*",
 			onchange:
 				(original.onchange || "") +
 				";" +

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

@@ -1,7 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
-import { attribute } from "../../sanitize";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
+import { renderAttributes } from "../../utils/render-attributes";
 import { FormField } from "../fields/field";
 import { FormDataValue, FormMessage } from "../form";
 import { FormFieldControl } from "./controls";
@@ -101,22 +101,6 @@ export class SimpleInput<
 		]);
 	}
 
-	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 "";
 	}
@@ -154,7 +138,7 @@ export class SimpleInput<
 				${await this.preInput(ctx, data)}
 				${this.renderInput(
 					ctx,
-					this.renderAttributes(
+					renderAttributes(
 						await this.getInputAttributes(
 							ctx,
 							data,

package/src/forms/controls/tickable.ts

@@ -36,8 +36,16 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 		value: T
 	): boolean;
 
-	makeInputID(): string {
-		return this.options.id || this.field.name;
+	makeInputID(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		value: T
+	): string {
+		const value_attr = this.getValueAttribute(ctx, data, value);
+		return (
+			this.options.id ||
+			this.field.name + (value_attr ? "--" + value_attr : "")
+		);
 	}
 
 	getWrapperClasses(
@@ -46,7 +54,7 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 		value: T
 	): string[] {
 		return [
-			this.makeInputID(),
+			this.makeInputID(ctx, data, value),
 			this.type,
 			this.field.name.replaceAll(/\W/g, "-"),
 			getRequiredClass(this.field.required),
@@ -62,19 +70,19 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 		form_id: string,
 		show_field_errors: boolean
 	): Promise<FlatTemplatable> {
-		const id = this.makeInputID();
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const { parsed, valid, message } = await this.field.getValue(ctx, data);
+		const value = this.getValueAttribute(ctx, data, parsed);
+		const id = this.makeInputID(ctx, data, parsed);
 		const label =
 			this.options.label != undefined
 				? this.options.label
 				: this.field.name;
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const { parsed, valid, message } = await this.field.getValue(ctx, data);
+
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
 
-		const value = this.getValueAttribute(ctx, data, parsed);
-
 		return inputWrapper(
 			this.getWrapperClasses(ctx, data, parsed),
 

package/src/forms/fields/file.ts

@@ -62,9 +62,12 @@ export class File<Required extends boolean> extends FormField<
 					? await SealiousFile.fromID(ctx.$app, raw_value.old.id)
 					: null;
 			const new_file =
-				hasField("new", raw_value) &&
-				raw_value.new instanceof SealiousFile
-					? raw_value.new
+				hasFieldOfType(
+					raw_value,
+					"new",
+					predicates.array(predicates.object)
+				) && raw_value.new[0] instanceof SealiousFile
+					? raw_value.new[0]
 					: null;
 			result = {
 				parsable: true as true,

package/src/forms/forms.scss

@@ -30,3 +30,47 @@
 		}
 	}
 }
+
+.form-input__wrapper--multiple-files--photos {
+	ul {
+		list-style: none;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		grid-gap: 10px;
+		margin-bottom: 20px;
+
+		li {
+			background-color: white;
+			box-shadow: 1px 1px 6px 0px #00000038;
+			padding: 10px;
+			display: grid;
+			grid-template-columns: 1fr 20px;
+			grid-template-rows: 20px auto min-content;
+			grid-row-gap: 10px;
+
+			a {
+				grid-row: 1/3;
+				grid-column: 1/3;
+
+				picture,
+				img {
+					width: 100%;
+					height: 150px;
+					object-fit: contain;
+				}
+			}
+
+			.filename {
+				grid-row: 3/4;
+				grid-column: 1/3;
+			}
+
+			form {
+				grid-row: 1/2;
+				grid-column: 2/3;
+				position: relative;
+				z-index: 2;
+			}
+		}
+	}
+}

package/src/utils/make-slug.ts

@@ -0,0 +1,5 @@
+export function makeSlug(t: string) {
+	return t
+		.replaceAll(/\P{General_Category=Letter}/g, "-")
+		.replaceAll(/-+/g, "-");
+}

package/src/utils/render-attributes.ts

@@ -0,0 +1,17 @@
+import { attribute } from "../sanitize";
+
+export function 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(" ");
+}

package/src/utils/utils.ts

@@ -8,3 +8,5 @@ export { exec } from "./exec";
 export { importPath, curryImportPath } from "./import-path";
 export { listCollections } from "./list-collections";
 export { walkDir } from "./walk";
+export * from "./make-slug";
+export * from "./render-attributes";