@sealcode/sealgen 0.19.25 → 0.19.28

package/@types/src/utils/with-fallback.d.ts

@@ -0,0 +1,2 @@
+export declare function withFallback<T1, T2 extends NonNullable<unknown>>(value1: T1, value2: T2): NonNullable<T1> | T2;
+export declare function withFallback<T1, T2, T3 extends NonNullable<unknown>>(value1: T1, value2: T2, value3?: T3): NonNullable<T2> | T3;

package/@types/src/utils/wrap-attributes.d.ts

@@ -0,0 +1,3 @@
+export declare function needsQuotes(str: string): boolean;
+export declare function wrapAttribute(name: string): string;
+export declare function wrapKeyName(name: string): string;

package/@types/src/utils/write-file.d.ts

@@ -0,0 +1 @@
+export declare function writeFile(path: string, content: string): Promise<void>;

package/lib/add-crud.test.js

@@ -10,7 +10,7 @@ describe("add crud test", () => {
   after(async () => {
     await page.close();
   });
-  it.only("Generate simple sealious crud", async function() {
+  it("Generate simple sealious crud", async function() {
     const test_app = await RealAppTest.init();
     const path = "/sample";
     await test_app.runSealgenCommand(`add-collection --collection_name=sealcode-test`);

package/lib/add-route.js

@@ -46,9 +46,7 @@ async function addRoute(params, app_directory = process.cwd()) {
     }
   ]);
   const { action, url, mode } = response;
-  const extension = ["list", "lpr", "page", "sreact", "jdd-editor"].includes(
-    mode
-  ) ? "tsx" : "ts";
+  const extension = ["list", "lpr", "page", "sreact", "jdd-editor"].includes(mode) ? "tsx" : "ts";
   const base_file_name = escape_url_params(url) || "index";
   const file_path = target_locreq.resolve(
     `src/back/routes/${base_file_name}.${mode}.${extension}`

package/lib/builders/backend-ts-builder.js

@@ -14,7 +14,7 @@ class BackendTSBuilder extends Builder {
     return "backend-ts";
   }
   ownsFile(file_path) {
-    return (file_path.endsWith(".ts") || file_path.endsWith(".tsx")) && !file_path.endsWith("src/back/collections/collections.ts") && !file_path.endsWith("src/back/routes/routes.ts") && !file_path.endsWith("src/back/routes/urls.ts") && !file_path.endsWith("stimulus.ts") && !file_path.startsWith("src/front");
+    return (file_path.endsWith(".ts") || file_path.endsWith(".tsx")) && !file_path.endsWith("src/back/collections/collections.ts") && !file_path.endsWith("src/back/routes/routes.ts") && !file_path.endsWith("src/back/routes/urls.ts") && !file_path.endsWith("src/back/jdd-components/components.ts") && !file_path.endsWith("stimulus.ts") && !file_path.startsWith("src/front");
   }
   async dispose() {
   }

package/lib/builders/colors-builder.js

@@ -401,15 +401,14 @@ class ColorsBuilder extends Builder {
 						document.addEventListener("click", (event) => {
 							const box = event.target.closest(".color-box");
 							if (box) {
-								const css_var = box.classList.contains(
-									"is-main"
-								)
-									? \`var(--color-\${box.getAttribute(
+								const css_var =
+									box.classList.contains("is-main") ?
+										\`var(--color-\${box.getAttribute(
 											"data-color-group-name"
 										)}-\${box.getAttribute(
 											"data-color-name"
 										)})\`
-									: \`var(--color-\${box.getAttribute(
+									:	\`var(--color-\${box.getAttribute(
 											"data-color-group-name"
 										)}-\${box.getAttribute(
 											"data-color-name"

package/lib/forms/controls/file.js

@@ -63,7 +63,7 @@ class File extends SimpleInput {
     return {
       ...original,
       name: this.field.name + "[new]",
-      required: original.required && !parsed?.old,
+      required: original.required && !parsed?.old || false,
       value: false
     };
   }

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

@@ -40,9 +40,7 @@ class MultipleFiles extends FormFieldControl {
         files = [files];
       }
       await Promise.all(
-        files.map(
-          (file) => this.addFileAssociation(ctx, file)
-        )
+        files.map((file) => this.addFileAssociation(ctx, file))
       );
       ctx.body = this.renderFrame(
         ctx,
@@ -51,7 +49,10 @@ class MultipleFiles extends FormFieldControl {
     });
   }
   async deleteFileAssociation(ctx, file_item_id) {
-    await ctx.$app.collections[this.field.collection_field.referencing_collection].removeByID(ctx.$context, file_item_id);
+    await this.getReferencingCollection().removeByID(
+      ctx.$context,
+      file_item_id
+    );
   }
   async addFileAssociation(ctx, file) {
     const file_field = this.getFileField();
@@ -63,7 +64,7 @@ class MultipleFiles extends FormFieldControl {
       [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);
+    await this.getReferencingCollection().create(ctx.$context, body);
   }
   getFrameRelativeURL() {
     return `${this.field.name}_files`;

package/lib/forms/controls/single-reference.js

@@ -8,7 +8,7 @@ class SingleReferenceDropdown extends FreeformDropdown {
     super(
       field,
       async (ctx) => {
-        const { items } = await ctx.$app.collections[field.sealiousField.target_collection].list(ctx.$context).fetch();
+        const { items } = await this.getCollection(ctx).list(ctx.$context).fetch();
         return [
           { value: "", label: "--" },
           ...items.map((item) => ({
@@ -22,6 +22,9 @@ class SingleReferenceDropdown extends FreeformDropdown {
     this.field = field;
     this.options = options;
   }
+  getCollection(ctx) {
+    return ctx.$app.collections[this.field.sealiousField.target_collection];
+  }
   setOptionLabelGetter(getter) {
     this.options.getLabel = getter;
     return this;

package/lib/forms/fields/file.js

@@ -27,21 +27,21 @@ class File extends FormField {
         raw_value,
         "old",
         predicates.instanceOf(PathFilePointer)
-      ) ? await ctx.$app.fileManager.toPointer(
-        raw_value.old
-      ) : null;
+      ) ? await ctx.$app.fileManager.toPointer(raw_value.old) : null;
       const new_file = hasFieldOfType(
         raw_value,
         "new",
         predicates.or(
-          predicates.array(predicates.instanceOf(PathFilePointer)),
+          predicates.array(
+            predicates.instanceOf(PathFilePointer)
+          ),
           predicates.instanceOf(PathFilePointer)
         )
       ) ? Array.isArray(raw_value.new) ? raw_value.new[0] : raw_value.new : null;
       result = {
         parsable: true,
         error: null,
-        parsed_value: { old: old_file, new: new_file }
+        parsed_value: { old: old_file, new: new_file || null }
       };
     }
     return result;

package/lib/forms/fields/image.js

@@ -2,9 +2,7 @@ import { Image as ImageControl } from "../controls/image.js";
 import { File as FileField } from "./file.js";
 class Image extends FileField {
   getControl() {
-    return new ImageControl(
-      this
-    );
+    return new ImageControl(this);
   }
 }
 export {

package/lib/forms/fields/phone-number-with-country-code.js

@@ -22,7 +22,6 @@ class PhoneNumberWithCountryCode extends FormField {
       return {
         parsable: false,
         parsed_value: null,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         error: e.message
       };
     }

package/lib/forms/fields/simple-form-field.js

@@ -39,7 +39,7 @@ class TextBasedSimpleField extends SimpleFormField {
   }
   async postSealiousCreate(_ctx, _created_item, _formData) {
   }
-  async postSealiousEdit(ctx, _edited_item, _formData) {
+  async postSealiousEdit(_ctx, _edited_item, _formData) {
   }
   getControl() {
     return new SimpleInput(this, {

package/lib/forms/fields/structured-array.js

@@ -53,8 +53,7 @@ class StructuredArray extends Table {
                 key,
                 await form_subfield.sealiousValueToForm(
                   ctx,
-                  value,
-                  {}
+                  value
                 )
               ];
             })

package/lib/get-fonts.js

@@ -75,7 +75,11 @@ async function getFonts(_ = {}) {
     fonts_css_file_path,
     content.replace(/@font-face {/g, "@font-face {\nfont-display: swap;")
   );
-  await unlink("public/fonsta.config.json");
+  try {
+    await unlink("public/fonsta.config.json");
+  } catch {
+    console.info("No fonsta config present, using just google fonts");
+  }
   await rmdir("public/tmp");
   console.info("Downloaded new fonts pack from Font Squirrel");
   console.info("Downloaded new fonts pack");

package/lib/page/mountable-with-fields.js

@@ -10,8 +10,7 @@ class MountableWithFields extends Mountable {
     this.field_names_prefix = "";
     // useful for multiform, where many forms are merged into one and field assignment is made using the prefix
     this.form_id = "";
-    if (!this.fields)
-      this.fields = {};
+    this.fields = {};
   }
   /** most routes should be setup using .mount(), but mount runs before
          initialization so we don't yet have controls, app, etc ready for dynamic

package/lib/page/mountable-with-fields.test.js

@@ -16,7 +16,7 @@ describe("mountable-with-fields", () => {
       async onSubmit(ctx, form_values) {
         const data = await this.getParsedValues(ctx);
         data.not_required?.trim();
-        data.required.trim();
+        (data.required || "").trim();
         const { parsed: data2 } = await this.fields.not_required.getParsedValue(
           ctx,
           form_values.raw_values

package/lib/page/sealious-list.js

@@ -29,7 +29,9 @@ class SealiousItemListPage extends ListPage {
       }
     }
     if (Object.keys(filters).length) {
-      list.filter(filters);
+      list.filter(
+        filters
+      );
     }
   }
   async makeQuery(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.25",
+	"version": "0.19.28",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -55,8 +55,8 @@
 		"playwright": "^1.29.2",
 		"source-map-support": "^0.5.21",
 		"ts-node": "^10.9.1",
-		"typescript": "5.9",
-		"typescript-eslint": "^8.44.0",
+		"typescript": "6.0.3",
+		"typescript-eslint": "8.70",
 		"wait-port": "^1.0.4"
 	},
 	"types": "./@types/index.d.ts",

package/src/add-route.ts

@@ -54,20 +54,18 @@ export async function addRoute(
 	]);
 
 	const { action, url, mode } = response as Record<string, string>;
-	const extension = ["list", "lpr", "page", "sreact", "jdd-editor"].includes(
-		mode
-	)
-		? "tsx"
-		: "ts";
+	const extension =
+		["list", "lpr", "page", "sreact", "jdd-editor"].includes(mode!) ? "tsx"
+		:	"ts";
 
-	const base_file_name = escape_url_params(url) || "index";
+	const base_file_name = escape_url_params(url!) || "index";
 	const file_path = target_locreq.resolve(
 		`src/back/routes/${base_file_name}.${mode}.${extension}`
 	);
 	const test_file_path = target_locreq.resolve(
 		`src/back/routes/${base_file_name}.test.ts`
 	);
-	const template = Templates[mode];
+	const template = Templates[mode!];
 
 	if (!template) {
 		throw new Error(`Could not get template ${mode}`);
@@ -78,7 +76,7 @@ export async function addRoute(
 		return;
 	}
 	await fs.mkdir(resolve(file_path, "../"), { recursive: true });
-	await fs.writeFile(file_path, await template(action, file_path));
+	await fs.writeFile(file_path, await template(action!, file_path));
 	console.info(`${file_path} created`);
 	console.info(`${test_file_path} created`);
 	await generateRoutes();

package/src/build.ts

@@ -126,8 +126,7 @@ export async function buildProject({
 		await build(watch);
 	} catch (e) {
 		console.error("CAUGHT!");
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-		console.error(e.message);
+		console.error((e as Error).message);
 		if (!watch) {
 			process.exit(1);
 		}

package/src/builders/colors-builder.ts

@@ -91,9 +91,9 @@ export class ColorsBuilder extends Builder {
 		}) {
 			const c = colord(color);
 			return /* HTML */ `<div
-				class="color-box ${c.isDark() ? "is-dark" : ""} ${is_main
-					? "is-main"
-					: ""} ${c.toHsl().l > 90 ? "is-almost-white" : ""}"
+				class="color-box ${c.isDark() ? "is-dark" : ""} ${is_main ?
+					"is-main"
+				:	""} ${c.toHsl().l > 90 ? "is-almost-white" : ""}"
 				style="background-color: ${color}; order: ${parseInt(shade_no)}"
 				data-color-name="${name}"
 				data-color-group-name="${group_name}"
@@ -107,7 +107,7 @@ export class ColorsBuilder extends Builder {
 			key == "brand" ? -1 : 11
 		)) {
 			html_colors += `<h2>${group_name}</h2><div class="group">`;
-			const colors = color_groups[group_name];
+			const colors = color_groups[group_name]!;
 			for (const [color_name, color_info] of Object.entries(colors)) {
 				html_colors += `<h3>${color_name}</h3><div class="shades">`;
 				const main_color = color_info.color;
@@ -156,7 +156,7 @@ export class ColorsBuilder extends Builder {
 
 		function colorCodeFind(color_varibale_name: string) {
 			const parts = color_varibale_name.split("-").slice(2);
-			const colorGroup = parts[1];
+			const colorGroup = parts[1]!;
 			const colorName = parts.slice(2).join("-").replace(/\)$/, "");
 			const colorCode = color_groups[colorGroup]?.[colorName]?.color;
 
@@ -171,8 +171,8 @@ export class ColorsBuilder extends Builder {
 		) {
 			let roundedContrast = "";
 			if (fg !== "") {
-				const fg_code = colorCodeFind(fg);
-				const bg_code = colorCodeFind(bg);
+				const fg_code = colorCodeFind(fg)!;
+				const bg_code = colorCodeFind(bg)!;
 				const contrast = hex(fg_code, bg_code);
 				roundedContrast = Math.round(contrast).toString();
 			}
@@ -430,15 +430,14 @@ export class ColorsBuilder extends Builder {
 						document.addEventListener("click", (event) => {
 							const box = event.target.closest(".color-box");
 							if (box) {
-								const css_var = box.classList.contains(
-									"is-main"
-								)
-									? \`var(--color-\${box.getAttribute(
+								const css_var =
+									box.classList.contains("is-main") ?
+										\`var(--color-\${box.getAttribute(
 											"data-color-group-name"
 										)}-\${box.getAttribute(
 											"data-color-name"
 										)})\`
-									: \`var(--color-\${box.getAttribute(
+									:	\`var(--color-\${box.getAttribute(
 											"data-color-group-name"
 										)}-\${box.getAttribute(
 											"data-color-name"

package/src/cli.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 import yargs from "yargs/yargs";
 import { addCollection } from "./add-collection.js";
 import { addJDDComponent } from "./add-jdd-component.js";
@@ -16,10 +17,8 @@ import {
 	registerExternalStyles,
 } from "./register-external.js";
 
-const actions: Record<
-	string,
-	(args: Record<string, string | boolean>) => Promise<void> | undefined
-> = {
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+const actions: Record<string, (args: any) => Promise<void> | undefined> = {
 	"add-collection": addCollection,
 	"add-route": addRoute,
 	"add-crud": addCRUD,
@@ -47,5 +46,5 @@ void (async function () {
 	const action = process.argv.at(2);
 	const fn = actions[action || "default"] || actions.default;
 	const args = yargs(process.argv).argv as Record<string, string | boolean>;
-	await fn(args);
+	await fn!(args);
 })();

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

@@ -47,7 +47,7 @@ export default class TableController extends Controller {
 	swapRows(index_a: number, index_b: number) {
 		const tbody = this.getTbody();
 		const [a, b] = [index_a, index_b].sort().reverse(); // we want them in descending order
-		tbody.insertBefore(tbody.children[a], tbody.children[b]);
+		tbody.insertBefore(tbody.children[a!]!, tbody.children[b!]!);
 		this.reindex();
 	}
 
@@ -101,13 +101,13 @@ export default class TableController extends Controller {
 		// disable up/down buttons for first/last items
 		// first reset all states to enabled
 		this.element
-			.querySelectorAll(
+			.querySelectorAll<HTMLButtonElement>(
 				`[data-action="sealgen-table#moveUp"], [data-action="sealgen-table#moveDown"]`
 			)
 			.forEach((e: HTMLButtonElement) => (e.disabled = false));
 		// then disable the ones at the top and bottom
 		this.element
-			.querySelectorAll(
+			.querySelectorAll<HTMLButtonElement>(
 				'tr:first-child [data-action="sealgen-table#moveUp"], tr:last-child [data-action="sealgen-table#moveDown"]'
 			)
 			.forEach((e: HTMLButtonElement) => (e.disabled = true));

package/src/forms/controls/dropdown.ts

@@ -15,9 +15,9 @@ export type DropdownOptions = {
 
 export type DropdownOption = { value: string; label: string };
 
-export class FreeformDropdown extends SimpleInput {
+export class FreeformDropdown<ParsedValue> extends SimpleInput {
 	constructor(
-		public field: FormField<boolean, string | null>,
+		public field: FormField<boolean, ParsedValue | null>,
 		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
 		public options: DropdownOptions = {
 			label: field.label || field.name,
@@ -39,15 +39,15 @@ export class FreeformDropdown extends SimpleInput {
 		return {
 			...original,
 			...Object.fromEntries([
-				...(this.options.autosubmit
-					? [
-							[
-								"onchange",
-								((original.onchange as string | undefined) ||
-									"") + ";this.form.submit();",
-							],
-						]
-					: []),
+				...(this.options.autosubmit ?
+					[
+						[
+							"onchange",
+							((original.onchange as string | undefined) || "") +
+								";this.form.submit();",
+						],
+					]
+				:	[]),
 			]),
 		} as Record<string, string>;
 	}
@@ -74,9 +74,11 @@ export class FreeformDropdown extends SimpleInput {
 	}
 }
 
-export class Dropdown extends FreeformDropdown {
+export class Dropdown<
+	Required extends boolean,
+> extends FreeformDropdown<string> {
 	constructor(
-		public field: PickFromListField<boolean>,
+		public field: PickFromListField<Required>,
 		public options: DropdownOptions = {
 			label: field.label || field.name,
 			autosubmit: false,

package/src/forms/controls/file.ts

@@ -79,7 +79,7 @@ export class File extends SimpleInput {
 		return {
 			...original,
 			name: this.field.name + "[new]",
-			required: original.required && !parsed?.old,
+			required: (original.required && !parsed?.old) || false,
 			value: false,
 		};
 	}

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

@@ -44,7 +44,7 @@ export class MultipleFiles extends FormFieldControl {
 		router.post(
 			this.getFrameRelativeURL() + "/delete/:file_item_id",
 			async (ctx) => {
-				await this.deleteFileAssociation(ctx, ctx.params.file_item_id);
+				await this.deleteFileAssociation(ctx, ctx.params.file_item_id!);
 				ctx.body = this.renderFrame(
 					ctx,
 					await this.renderFrameContent(ctx)
@@ -62,9 +62,7 @@ export class MultipleFiles extends FormFieldControl {
 				files = [files];
 			}
 			await Promise.all(
-				files.map((file) =>
-					this.addFileAssociation(ctx, file as unknown as FilePointer)
-				)
+				files.map((file) => this.addFileAssociation(ctx, file))
 			);
 			ctx.body = this.renderFrame(
 				ctx,
@@ -74,9 +72,10 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	async deleteFileAssociation(ctx: Context, file_item_id: string) {
-		await ctx.$app.collections[
-			this.field.collection_field.referencing_collection
-		].removeByID(ctx.$context, file_item_id);
+		await this.getReferencingCollection().removeByID(
+			ctx.$context,
+			file_item_id
+		);
 	}
 
 	async addFileAssociation(ctx: Context, file: FilePointer) {
@@ -90,9 +89,7 @@ export class MultipleFiles extends FormFieldControl {
 				await this.field.getItemId(ctx),
 			[file_field.name]: file,
 		};
-		await ctx.$app.collections[
-			this.field.collection_field.referencing_collection
-		].create(ctx.$context, body);
+		await this.getReferencingCollection().create(ctx.$context, body);
 	}
 
 	getFrameRelativeURL() {
@@ -124,7 +121,7 @@ export class MultipleFiles extends FormFieldControl {
 		const result =
 			this.field.collection_field.app.collections[
 				this.field.collection_field.referencing_collection
-			];
+			]!;
 		return result;
 	}
 
@@ -203,7 +200,7 @@ export class MultipleFiles extends FormFieldControl {
 			.ids([item_id])
 			.attach({ [this.field.collection_field.name]: true })
 			.fetch();
-		return item
+		return item!
 			.getAttachments(this.field.collection_field.name)
 			.filter((f) => f);
 	}

package/src/forms/controls/number.ts

@@ -5,8 +5,8 @@ import { SimpleInput, SimpleInputOptions } from "./simple-input.js";
 export type NumberOptions = SimpleInputOptions & Partial<{ step: number }>;
 
 export class Number extends SimpleInput {
-	field: NumberField;
-	options: NumberOptions;
+	field!: NumberField;
+	options!: NumberOptions;
 	constructor(field: NumberField, options: NumberOptions) {
 		super(field, options);
 	}
@@ -22,12 +22,12 @@ export class Number extends SimpleInput {
 		return {
 			...original,
 			...Object.fromEntries([
-				...(this.field.options.min
-					? [["min", this.field.options.min]]
-					: []),
-				...(this.field.options.max
-					? [["max", this.field.options.max]]
-					: []),
+				...(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]] : []),
 			]),
 		} as Record<string, string>;

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

@@ -1,17 +1,27 @@
-import { FieldTypes as SealiousFieldTypes } from "sealious";
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Context } from "koa";
+import {
+	Field as SealiousField,
+	FieldTypes as SealiousFieldTypes,
+} from "sealious";
 import { CollectionField } from "../fields/collection-field.js";
 import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
 import { Collection, CollectionItem } from "sealious";
+import { FormField } from "../../index.js";
+
+export type ExtractFieldDecoded<F extends SealiousField<any, any, any>> =
+	F extends SealiousField<infer T, unknown, unknown> ? T : never;
 
 export class SingleReferenceDropdown<
 	TargetCollection extends Collection,
-	F extends SealiousFieldTypes.SingleReference,
+	SealiousField extends SealiousFieldTypes.SingleReference,
 	Required extends boolean,
-> extends FreeformDropdown {
+> extends FreeformDropdown<ExtractFieldDecoded<SealiousField>> {
 	constructor(
-		public field: CollectionField<F, Required>,
+		public field: CollectionField<SealiousField, Required>,
 		public options: DropdownOptions & {
-			getLabel?: (item: CollectionItem<Collection>) => string;
+			getLabel?: (item: CollectionItem<TargetCollection>) => string;
 		} = {
 			label: field.label || field.name,
 			autosubmit: false,
@@ -19,20 +29,17 @@ export class SingleReferenceDropdown<
 		}
 	) {
 		super(
-			field,
+			field as FormField<any, any>,
 			async (ctx) => {
-				const { items } = await ctx.$app.collections[
-					field.sealiousField.target_collection
-				]
+				const { items } = await this.getCollection(ctx)
 					.list(ctx.$context)
 					.fetch();
 				return [
 					{ value: "", label: "--" },
 					...items.map((item) => ({
 						value: item.id,
-						label: options.getLabel
-							? options.getLabel(item)
-							: item.id,
+						label:
+							options.getLabel ? options.getLabel(item) : item.id,
 					})),
 				];
 			},
@@ -40,6 +47,12 @@ export class SingleReferenceDropdown<
 		);
 	}
 
+	getCollection(ctx: Context) {
+		return ctx.$app.collections[
+			this.field.sealiousField.target_collection
+		]! as TargetCollection;
+	}
+
 	setOptionLabelGetter(
 		getter: (item: CollectionItem<TargetCollection>) => string
 	): this {