@sealcode/sealgen 0.14.14 → 0.14.16

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

@@ -2,11 +2,11 @@ import { File as SealiousFile, CollectionItem } from "sealious";
 import { FlatTemplatable } from "tempstream";
 import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
-import * as KoaResponsiveImageRouter from "koa-responsive-image-router";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 export declare class MultiplePhotos extends MultipleFiles {
     field: MultipleFilesField;
-    imageRouter: KoaResponsiveImageRouter.default;
-    constructor(field: MultipleFilesField, imageRouter: KoaResponsiveImageRouter.default, options?: Partial<MultipleFilesOptions>);
+    imageRouter: KoaResponsiveImageRouter;
+    constructor(field: MultipleFilesField, imageRouter: KoaResponsiveImageRouter, options?: Partial<MultipleFilesOptions>);
     getClassModifiers(): string[];
     getInputAttributes(): {
         accept: string;

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

@@ -4,17 +4,18 @@ import { File } from "./file.js";
 import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
-import * as KoaResponsiveImageRouter from "koa-responsive-image-router";
 import { FileContainer } from "../fields/file.js";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 export declare class Photo extends File {
     field: FormField<boolean, FileContainer>;
-    imageRouter: KoaResponsiveImageRouter.default;
-    constructor(field: FormField<boolean, FileContainer>, imageRouter: KoaResponsiveImageRouter.default, options?: SimpleInputOptions);
+    imageRouter: KoaResponsiveImageRouter;
+    constructor(field: FormField<boolean, FileContainer>, imageRouter: KoaResponsiveImageRouter, options?: SimpleInputOptions);
     getImgStyle(): Promise<string>;
     renderFilePreview(ctx: Context, file_data: {
         id?: string;
         filename?: string;
     } | null): Promise<FlatTemplatable>;
+    getWrapperModifiers(): string[];
     getInputAttributes(fctx: FormControlContext): Promise<{
         accept: string;
         onchange: string;

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

@@ -28,5 +28,6 @@ export declare class SimpleInput<ParsedValue, Options extends SimpleInputOptions
     getInputAttributes(fctx: FormControlContext): Promise<Record<string, string | boolean>>;
     postInput(_: Context): Promise<FlatTemplatable>;
     renderInput(_ctx: Context, attributes_str: string, _data: Record<string, FormDataValue>): Promise<FlatTemplatable>;
+    getWrapperModifiers(): string[];
     render<Fields extends Record<string, FormField>>(fctx: FormControlContext): Promise<FlatTemplatable>;
 }

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

@@ -19,10 +19,9 @@ class MultiplePhotos extends MultipleFiles {
     }
     return tempstream`<li>
 			<a href="${file.getURL()}" data-turbo="false">
-				${this.imageRouter.image({
-      path,
+				${this.imageRouter.image(path, {
       resolutions: [150, 300],
-      sizes_attr: "150px"
+      sizesAttr: "150px"
     })}
 			</a>
 			<span class="filename"> ${file.filename || "no filename"}</span>

package/dist/forms/controls/photo.js

@@ -22,17 +22,22 @@ class Photo extends File {
     }
     const file = await SealiousFile.fromID(ctx.$app, id);
     return tempstream`<div class="${class_name}">
-			${this.imageRouter.image({
+			${this.imageRouter.image(file.getDataPath(), {
       resolutions: [100],
-      sizes_attr: "100px",
-      path: file.getDataPath(),
-      img_style: await this.getImgStyle()
+      sizesAttr: "100px",
+      imgStyle: await this.getImgStyle()
     })}
 		</div>`;
   }
+  getWrapperModifiers() {
+    return [
+      ...super.getWrapperModifiers(),
+      "control-type__image",
+      "control-type__photo"
+    ];
+  }
   async getInputAttributes(fctx) {
     const original = await super.getInputAttributes(fctx);
-    const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
     return {
       ...original,
       accept: "image/*",

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

@@ -55,16 +55,23 @@ class SimpleInput extends FormFieldControl {
   async renderInput(_ctx, attributes_str, _data) {
     return `<input ${attributes_str} />`;
   }
+  getWrapperModifiers() {
+    return [
+      this.getID(),
+      this.getType(),
+      "type__" + this.getType(),
+      getRequiredClass(this.field.required)
+    ];
+  }
   async render(fctx) {
     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)],
+      this.getWrapperModifiers(),
       tempstream`
 				${label ? `<label for="${id}">${label}</label>` : ""}
 				${await this.preInput(fctx.ctx, fctx.data)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.14.14",
+	"version": "0.14.16",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -70,7 +70,7 @@
 	},
 	"peerDependencies": {
 		"koa": "^2.13.0",
-		"koa-responsive-image-router": "^0.2.6",
+		"koa-responsive-image-router": "^0.2.24",
 		"sealious": "^0.18.1"
 	}
 }

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

@@ -2,12 +2,12 @@ import { File as SealiousFile, CollectionItem } from "sealious";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
-import * as KoaResponsiveImageRouter from "koa-responsive-image-router";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 
 export class MultiplePhotos extends MultipleFiles {
 	constructor(
 		public field: MultipleFilesField,
-		public imageRouter: KoaResponsiveImageRouter.default,
+		public imageRouter: KoaResponsiveImageRouter,
 		options?: Partial<MultipleFilesOptions>
 	) {
 		super(field, options);
@@ -31,10 +31,9 @@ export class MultiplePhotos extends MultipleFiles {
 		}
 		return tempstream/* HTML */ `<li>
 			<a href="${file.getURL()}" data-turbo="false">
-				${this.imageRouter.image({
-					path,
+				${this.imageRouter.image(path, {
 					resolutions: [150, 300],
-					sizes_attr: "150px",
+					sizesAttr: "150px",
 				})}
 			</a>
 			<span class="filename"> ${file.filename || "no filename"}</span>

package/src/forms/controls/photo.ts

@@ -5,13 +5,13 @@ import { File as SealiousFile } from "sealious";
 import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
-import * as KoaResponsiveImageRouter from "koa-responsive-image-router";
 import { FileContainer } from "../fields/file.js";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
 
 export class Photo extends File {
 	constructor(
 		public field: FormField<boolean, FileContainer>,
-		public imageRouter: KoaResponsiveImageRouter.default,
+		public imageRouter: KoaResponsiveImageRouter,
 		options?: SimpleInputOptions
 	) {
 		super(field, options);
@@ -36,21 +36,27 @@ export class Photo extends File {
 		}
 		const file = await SealiousFile.fromID(ctx.$app, id);
 		return tempstream/* HTML */ `<div class="${class_name}">
-			${this.imageRouter.image({
+			${this.imageRouter.image(file.getDataPath(), {
 				resolutions: [100],
-				sizes_attr: "100px",
-				path: file.getDataPath(),
-				img_style: await this.getImgStyle(),
+				sizesAttr: "100px",
+				imgStyle: await this.getImgStyle(),
 			})}
 		</div>`;
 	}
 
+	getWrapperModifiers(): string[] {
+		return [
+			...super.getWrapperModifiers(),
+			"control-type__image",
+			"control-type__photo",
+		];
+	}
+
 	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/*",

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

@@ -117,19 +117,27 @@ export class SimpleInput<
 		return `<input ${attributes_str} />`;
 	}
 
+	getWrapperModifiers(): string[] {
+		return [
+			this.getID(),
+			this.getType(),
+			"type__" + this.getType(),
+			getRequiredClass(this.field.required),
+		];
+	}
+
 	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)],
+			this.getWrapperModifiers(),
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}
 				${await this.preInput(fctx.ctx, fctx.data)}