@sealcode/sealgen 0.8.47 → 0.8.48

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

@@ -1,256 +0,0 @@
-import Router from "@koa/router";
-import {
-	Collection,
-	CollectionItem,
-	File as SealiousFile,
-	Field as SealiousField,
-} from "sealious";
-import { Context } from "koa";
-import { inputWrapper } from "../../utils/input-wrapper";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
-import { FormFieldControl } from "./form-field-control";
-import { is, predicates } from "@sealcode/ts-predicates";
-import { renderAttributes } from "../../utils/render-attributes";
-import { FormControlContext } from "./form-control";
-
-export type MultipleFilesOptions = {
-	label?: string;
-	uploadLabel?: string;
-	getAdditionalFields: (
-		ctx: Context,
-		file: SealiousFile
-	) => Promise<Record<string, unknown>>;
-};
-
-export class MultipleFiles extends FormFieldControl {
-	public options: MultipleFilesOptions;
-	constructor(
-		public field: MultipleFilesField,
-		options?: Partial<MultipleFilesOptions>
-	) {
-		super([field]);
-		this.options = { getAdditionalFields: async () => ({}), ...options };
-	}
-
-	getClassModifiers(): string[] {
-		return [];
-	}
-
-	mount(router: Router) {
-		router.get(this.getFrameRelativeURL(), async (ctx) => {
-			ctx.body = this.renderFrame(
-				ctx,
-				await this.renderFrameContent(ctx)
-			);
-		});
-
-		router.post(
-			this.getFrameRelativeURL() + "/delete/:file_item_id",
-			async (ctx) => {
-				await this.deleteFileAssociation(ctx, ctx.params.file_item_id);
-				ctx.body = this.renderFrame(
-					ctx,
-					await this.renderFrameContent(ctx)
-				);
-			}
-		);
-
-		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-			let files = ctx.$body.files as SealiousFile | SealiousFile[];
-			if (!files || !is(files, predicates.object)) {
-				ctx.body = "Missing files";
-				return;
-			}
-			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)
-			);
-		});
-	}
-
-	async deleteFileAssociation(ctx: Context, file_item_id: string) {
-		await ctx.$app.collections[
-			this.field.collection_field.referencing_collection
-		].removeByID(ctx.$context, file_item_id);
-	}
-
-	async addFileAssociation(ctx: Context, file: SealiousFile) {
-		const file_field = this.getFileField();
-		if (!file_field) {
-			throw new Error("No file field in referencing collection");
-		}
-		const body = {
-			...(await this.options.getAdditionalFields(ctx, file)),
-			[this.field.collection_field.referencing_field]:
-				await this.field.getItemId(ctx),
-			[file_field.name]: file,
-		};
-		await ctx.$app.collections[
-			this.field.collection_field.referencing_collection
-		].create(ctx.$context, body);
-	}
-
-	getFrameRelativeURL() {
-		return `${this.field.name}_files`;
-	}
-
-	getFrameID(): string {
-		// the "A" is necessary here
-		return `A${this.field.name}__multiple-fields-control`;
-	}
-
-	renderFrame(ctx: Context, content?: FlatTemplatable) {
-		return tempstream/* HTML */ `<turbo-frame
-			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
-			id="${this.getFrameID()}"
-			target="_top"
-		>
-			${content || ""}
-		</turbo-frame>`;
-	}
-
-	render(
-		fctx: FormControlContext
-	): FlatTemplatable | Promise<FlatTemplatable> {
-		return this.renderFrame(fctx.ctx, "");
-	}
-
-	getReferencingCollection() {
-		const result =
-			this.field.collection_field.app.collections[
-				this.field.collection_field.referencing_collection
-			];
-		return result;
-	}
-
-	getFileField(): SealiousField | null {
-		for (const [_, field] of Object.entries(
-			this.getReferencingCollection().fields
-		)) {
-			if (field.handles_large_data) {
-				return field;
-			}
-		}
-		return null;
-	}
-
-	async extractFileFromItem(
-		item: CollectionItem
-	): Promise<SealiousFile | null> {
-		const sealious_field = this.getFileField();
-		if (!sealious_field) {
-			return null;
-		}
-		return await SealiousFile.fromID(
-			(item.collection as Collection).app,
-			item.get(sealious_field.name).id
-		);
-	}
-
-	async renderFileItemPreview(
-		_fileItem: CollectionItem,
-		file: SealiousFile
-	): Promise<FlatTemplatable> {
-		return file.filename || "no filename";
-	}
-
-	async renderFileItem(
-		fileItem: CollectionItem,
-		file: SealiousFile
-	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `<li class="file-list-item">
-			<a
-				class="file-list-item__preview"
-				href="${file.getURL()}"
-				data-turbo="false"
-			>
-				${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 {
-			items: [item],
-		} = await this.field.collection_field.collection
-			.list(ctx.$context)
-			.ids([item_id])
-			.attach({ [this.field.collection_field.name]: true })
-			.fetch();
-		return item
-			.getAttachments(this.field.collection_field.name)
-			.filter((f) => f);
-	}
-
-	getInputAttributes() {
-		return { type: "file", name: "files", multiple: true };
-	}
-
-	async renderFrameContent(ctx: Context): Promise<FlatTemplatable> {
-		const files = (
-			await Promise.all(
-				(
-					await this.getFileItems(ctx)
-				)
-					.filter((item) => item) // filter out undefineds
-					.map(async (item) => [
-						item,
-						await this.extractFileFromItem(item),
-					])
-			)
-		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
-
-		return inputWrapper(
-			["multiple-files", this.field.name, ...this.getClassModifiers()],
-			tempstream/* HTML */ `
-				<label>${this.options.label || this.field.name}</label>
-				<ul class="multiple-files__list">
-					${files.map(([item, file]) =>
-						this.renderFileItem(item, file)
-					)}
-				</ul>
-				<form
-					action="${this.getFrameRelativeURL()}/add"
-					method="POST"
-					enctype="multipart/form-data"
-					data-turbo-frame="${this.getFrameID()}"
-				>
-					<input ${renderAttributes(this.getInputAttributes())} />
-					<input
-						type="submit"
-						value="${this.options.uploadLabel || "Upload"}"
-						class="file-list-action"
-					/>
-				</form>
-			`
-		);
-	}
-}

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

@@ -1,44 +0,0 @@
-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?: Partial<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/number.ts

@@ -1,38 +0,0 @@
-import { Context } from "koa";
-import { FlatTemplatable } from "tempstream";
-import { FormField, NumberField } from "../fields/field";
-import { FormDataValue } from "../form";
-import { FormControlContext } from "./form-control";
-import { SimpleInput, SimpleInputOptions } from "./simple-input";
-
-export type NumberOptions = SimpleInputOptions & Partial<{ step: number }>;
-
-export class Number extends SimpleInput<number | null> {
-	field: NumberField;
-	options: NumberOptions;
-	constructor(field: NumberField, options: NumberOptions) {
-		super(field, options);
-	}
-
-	getType() {
-		return "number";
-	}
-
-	async getInputAttributes(
-		fctx: FormControlContext
-	): Promise<Record<string, string | boolean>> {
-		const original = await super.getInputAttributes(fctx);
-		return {
-			...original,
-			...Object.fromEntries([
-				...(this.field.options.min
-					? [["min", this.field.options.min]]
-					: []),
-				...(this.field.options.max
-					? [["max", this.field.options.max]]
-					: []),
-				...(this.options.step ? [["step", this.options.step]] : []),
-			]),
-		};
-	}
-}

package/src/forms/controls/photo.ts

@@ -1,74 +0,0 @@
-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 { FormControlContext } from "./form-control";
-
-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 } | null
-	): Promise<FlatTemplatable> {
-		const class_name = "file_preview";
-		const empty_container = `<div class="${class_name}"></div>`;
-		if (!file_data) {
-			return empty_container;
-		}
-		const { id } = file_data;
-		if (!id) {
-			return empty_container;
-		}
-		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(fctx: FormControlContext) {
-		const original = (await super.getInputAttributes(fctx)) as Record<
-			string,
-			string | boolean
-		>;
-		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
-		return {
-			...original,
-			accept: "image/*",
-			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/radio.ts

@@ -1,43 +0,0 @@
-import { Context } from "koa";
-import { FormField } from "../fields/field";
-import { FormDataValue } from "../form";
-import { Tickable } from "./tickable";
-
-export class Radio extends Tickable<string> {
-	type = <const>"radio";
-
-	constructor(
-		public field: FormField<boolean, string>,
-		public value: string,
-		options: { label?: string }
-	) {
-		super(field, options);
-	}
-
-	makeInputID(): string {
-		return this.field.name + "-" + this.value.replaceAll(/\W/g, "-");
-	}
-
-	getValueAttribute(): string {
-		return this.value;
-	}
-
-	getWrapperClasses(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		value: string
-	): string[] {
-		return [
-			...super.getWrapperClasses(ctx, data, value),
-			this.value.replaceAll(/\W/g, "-"),
-		];
-	}
-
-	isChecked(
-		_ctx: Context,
-		_data: Record<string, FormDataValue>,
-		value: string
-	): boolean {
-		return this.value === value;
-	}
-}

package/src/forms/controls/reverse-single-reference.ts

@@ -1,50 +0,0 @@
-// import { FormControl } from "./form-control";
-// import { FormFieldControl } from "./form-field-control";
-// import { ReverseSingleReference as ReverseSingleReferenceField } from "../fields/field";
-// import { Context } from "koa";
-// import { Fields } from "../..";
-// import { ArrayControl } from "./array";
-
-// export class ReverseSingleReference extends ArrayControl {
-// 	//
-// 	//
-// 	// this isn't finished yet
-// 	//
-// 	//
-
-// 	constructor(
-// 		public field: ReverseSingleReferenceField,
-// 		public item_controls: Array<FormControl | UnboundControlStorage>
-// 	) {
-// 		super(field, item_controls);
-// 	}
-
-// 	async getItems(ctx: Context) {
-// 		const target_id = await this.getTargetItemID(ctx);
-// 		const { items } = await this.field.sealious_field
-// 			.getReferencingCollection()
-// 			.list(ctx.$context)
-// 			.filter({
-// 				[this.field.sealious_field.referencing_field]: target_id,
-// 			})
-// 			.fetch();
-// 		return items;
-// 	}
-
-// 	makeSubfield(fieldname: string) {
-// 		const collection = this.field.sealious_field.getReferencingCollection();
-// 		if (!collection.fields[fieldname]) {
-// 			return null;
-// 		}
-// 		return new Fields.CollectionField(false, collection.fields[fieldname]);
-// 	}
-
-// 	async add(ctx: Context): Promise<void> {
-// 		const collection = this.field.sealious_field.getReferencingCollection();
-// 		await collection.create(ctx.$context, {
-// 			[this.field.sealious_field.referencing_field]:
-// 				await this.getTargetItemID(ctx),
-// 			...(await this.getDefaultItemBody()),
-// 		});
-// 	}
-// }

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

@@ -1,148 +0,0 @@
-import { Context } from "koa";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
-import { renderAttributes } from "../../utils/render-attributes";
-import { FormField } from "../fields/field";
-import { FormDataValue } from "../form";
-import { FormFieldControl } from "./controls";
-import { FormControlContext } from "./form-control";
-
-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;
-	suffix?: string;
-};
-
-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.options.placeholder || this.getType();
-	}
-
-	async getInputAttributes(
-		fctx: FormControlContext
-	): Promise<Record<string, string | boolean>> {
-		const readonly = this.options.readonly || false;
-		const required = this.field.required;
-		const { parsed, raw, valid } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
-		return Object.fromEntries([
-			<const>["id", this.getID()],
-			<const>["type", this.getType()],
-			<const>["name", `${fctx.field_name_prefix}${this.field.name}`],
-			<const>[
-				"value",
-				!valid && raw
-					? raw.toString()
-					: parsed !== undefined && parsed !== null
-					? ((parsed as any)?.toString() as string) || ""
-					: "",
-			],
-			...(fctx.form_id ? [["form", fctx.form_id]] : []),
-			<const>["placeholder", this.getPlaceholder()],
-			...(readonly ? [["readonly", true]] : []),
-			...(required ? [["required", true]] : []),
-			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
-			...(this.options.step ? [["step", this.options.step]] : []),
-		]);
-	}
-
-	async postInput(_: Context): Promise<FlatTemplatable> {
-		return this.options.suffix
-			? /* HTML */ `<span class="suffix">${this.options.suffix}</span>`
-			: "";
-	}
-
-	async renderInput(
-		_ctx: Context,
-		attributes_str: string,
-		_data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		return `<input ${attributes_str} />`;
-	}
-
-	async render<Fields extends Record<string, FormField>>(
-		fctx: FormControlContext
-	): Promise<FlatTemplatable> {
-		const id = this.getID();
-		const label = this.getLabel();
-		const type = this.getType();
-
-		const { valid, message } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
-		return inputWrapper(
-			[id, type, getRequiredClass(this.field.required)],
-			tempstream/* HTML */ `
-				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(fctx.ctx, fctx.data)}
-				${this.renderInput(
-					fctx.ctx,
-					renderAttributes(await this.getInputAttributes(fctx)),
-					fctx.data
-				)}
-				${this.postInput(fctx.ctx)}
-				${~valid && !this.options.hide_errors && fctx.validate
-					? `<div class="input__error">${message}</div>`
-					: ""}
-			`
-		);
-	}
-}