@sealcode/sealgen 0.19.3 → 0.19.5

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

@@ -0,0 +1,10 @@
+import { FlatTemplatable } from "tempstream";
+import { FormControlContext } from "./form-control.js";
+import { FormFieldControl } from "./form-field-control.js";
+import { FormField } from "../fields/field.js";
+export declare class Hybrid extends FormFieldControl {
+    main_field: FormField;
+    subfields: Record<string, FormField>;
+    constructor(main_field: FormField, subfields: Record<string, FormField>);
+    render(fctx: FormControlContext): Promise<FlatTemplatable>;
+}

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

@@ -16,6 +16,7 @@ export type SimpleInputOptions = {
     step?: number;
     suffix?: string;
     pattern?: string;
+    inputmode?: string;
 };
 export declare class SimpleInput<Options extends SimpleInputOptions = SimpleInputOptions> extends FormFieldControl {
     field: FormField<boolean, any>;

package/@types/forms/fields/field.d.ts

@@ -32,11 +32,13 @@ export type FieldParseResult<T> = {
 export declare abstract class FormField<Required extends boolean = boolean, ParsedValue = unknown, DefaultFormControl extends FormControl = FormControl, SealiousValue = any> {
     readonly required: Required;
     name: string;
+    label: string;
     constructor(required: Required);
     predicate: Predicate;
     mapToFilter: (parsed: ParsedValue) => unknown;
     init(): Promise<void>;
     setName(name: string): this;
+    setLabel(label: string): this;
     _validate(ctx: Context, value: ParsedValue): Promise<FormFieldValidationResponse>;
     abstract getEmptyValue(): ParsedValue;
     isValueValid(_ctx: Context, _value: ParsedValue): Promise<FormFieldValidationResponse>;

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

@@ -20,6 +20,8 @@ export * from "./markdown.js";
 export * from "./multiple-files.js";
 export * from "./number.js";
 export * from "./password.js";
+export * from "./phone-number.js";
+export * from "./phone-number-with-country-code.js";
 export * from "./pick-from-list-sealious.js";
 export * from "./pick-from-list.js";
 export * from "./regexp.js";

package/@types/forms/fields/get-field-for-sealious.d.ts

@@ -26,6 +26,7 @@ import { ExtractedFieldInfo } from "../../utils/extract-fields-from-collection.j
 import { EnumMultipleSealious } from "./enum-multiple-sealious.js";
 import { URLField } from "./url.js";
 import { Image } from "./image.js";
-export type SealiousToFormField<T> = T extends SealiousFieldTypes.Boolean ? BooleanField<false> : T extends SealiousFieldTypes.Color ? Color<false> : T extends SealiousFieldTypes.ControlAccess<infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.Date ? DateField<false> : T extends SealiousFieldTypes.DateTime ? DateTime<false> : T extends SealiousFieldTypes.DeepReverseSingleReference ? DeepReverseSingleReferenceList | DeepReverseSingleReferenceTable : T extends SealiousFieldTypes.DisallowUpdate<any, any, any, infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.Email ? EmailField<false> : T extends SealiousFieldTypes.Enum<any> ? PickFromListSealious<false> : T extends SealiousFieldTypes.EnumMultiple<infer R> ? R extends string[] ? EnumMultipleSealious<R> : TextBasedSimpleField<false> : T extends SealiousFieldTypes.File ? File<false> : T extends SealiousFieldTypes.Float ? Float<false> : T extends SealiousFieldTypes.HTML ? HTML<false> : T extends SealiousFieldTypes.Image ? Image<false> : T extends SealiousFieldTypes.Int ? Int<false> : T extends SealiousFieldTypes.JsonObject ? JSONField<false> : T extends SealiousFieldTypes.JDD ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.Password ? Password<false> : T extends SealiousFieldTypes.ReverseSingleReference ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.SecretToken ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.SettableBy<infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.SingleReference ? SingleReference<Collection, boolean, T> : T extends SealiousFieldTypes.Text ? Text<false> : T extends SealiousFieldTypes.Username ? CollectionField<SealiousFieldTypes.Username, false> : T extends SealiousFieldTypes.ValueExistingInCollection ? SimpleFormField<false> : T extends SealiousFieldTypes.ValueNotExistingInCollection ? SimpleFormField<false> : T extends SealiousRequiredField<any, any, any> ? SimpleFormField<false> : T extends SealiousFieldTypes.Url ? URLField<false> : T extends SealiousFieldTypes.Money ? SimpleFormField<false> : T extends SealiousFieldTypes.Markdown ? Markdown<false> : T extends SealiousFieldTypes.Coordinates ? Coordinates<false> : T extends SealiousFieldTypes.StructuredArray<infer R> ? StructuredArrayField<R> : TextBasedSimpleField<any>;
+import { PhoneNumberWithCountryCode } from "./phone-number-with-country-code.js";
+export type SealiousToFormField<T> = T extends SealiousFieldTypes.Boolean ? BooleanField<false> : T extends SealiousFieldTypes.Color ? Color<false> : T extends SealiousFieldTypes.ControlAccess<infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.Date ? DateField<false> : T extends SealiousFieldTypes.DateTime ? DateTime<false> : T extends SealiousFieldTypes.DeepReverseSingleReference ? DeepReverseSingleReferenceList | DeepReverseSingleReferenceTable : T extends SealiousFieldTypes.DisallowUpdate<any, any, any, infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.Email ? EmailField<false> : T extends SealiousFieldTypes.Enum<any> ? PickFromListSealious<false> : T extends SealiousFieldTypes.EnumMultiple<infer R> ? R extends string[] ? EnumMultipleSealious<R> : TextBasedSimpleField<false> : T extends SealiousFieldTypes.File ? File<false> : T extends SealiousFieldTypes.Float ? Float<false> : T extends SealiousFieldTypes.HTML ? HTML<false> : T extends SealiousFieldTypes.Image ? Image<false> : T extends SealiousFieldTypes.Int ? Int<false> : T extends SealiousFieldTypes.JsonObject ? JSONField<false> : T extends SealiousFieldTypes.JDD ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.Password ? Password<false> : T extends SealiousFieldTypes.PhoneNumber ? PhoneNumberWithCountryCode<false> : T extends SealiousFieldTypes.ReverseSingleReference ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.SecretToken ? TextBasedSimpleField<false, SimpleInput> : T extends SealiousFieldTypes.SettableBy<infer R> ? SealiousToFormField<R> : T extends SealiousFieldTypes.SingleReference ? SingleReference<Collection, boolean, T> : T extends SealiousFieldTypes.Text ? Text<false> : T extends SealiousFieldTypes.Username ? CollectionField<SealiousFieldTypes.Username, false> : T extends SealiousFieldTypes.ValueExistingInCollection ? SimpleFormField<false> : T extends SealiousFieldTypes.ValueNotExistingInCollection ? SimpleFormField<false> : T extends SealiousRequiredField<any, any, any> ? SimpleFormField<false> : T extends SealiousFieldTypes.Url ? URLField<false> : T extends SealiousFieldTypes.Money ? SimpleFormField<false> : T extends SealiousFieldTypes.Markdown ? Markdown<false> : T extends SealiousFieldTypes.Coordinates ? Coordinates<false> : T extends SealiousFieldTypes.StructuredArray<infer R> ? StructuredArrayField<R> : TextBasedSimpleField<any>;
 export declare function sealiousToFormField<SF extends SealiousField<any>>(sealious_field: SF): SealiousToFormField<SF>;
 export declare function sealiousFieldInfoToFormField(field_info: ExtractedFieldInfo): Promise<FormField>;

package/@types/forms/fields/phone-number-with-country-code.d.ts

@@ -0,0 +1,10 @@
+import { Context } from "koa";
+import { FieldTypes as SealiousFieldTypes } from "sealious";
+import { FormControl } from "../controls/controls.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult, FormField } from "./field.js";
+export declare class PhoneNumberWithCountryCode<Required extends boolean> extends FormField<Required, SealiousFieldTypes.PhoneNumberValue> {
+    getEmptyValue(): SealiousFieldTypes.PhoneNumberValue;
+    parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<SealiousFieldTypes.PhoneNumberValue>>;
+    getControl(): FormControl;
+}

package/@types/forms/fields/phone-number.d.ts

@@ -0,0 +1,17 @@
+import { Context } from "koa";
+import { FormControl } from "../controls/controls.js";
+import { FormDataValue } from "../form-types.js";
+import { FormField } from "./field.js";
+export declare class PhoneNumberWithoutCountryCode<Required extends boolean> extends FormField<Required, string> {
+    getEmptyValue(): string;
+    parse(ctx: Context, raw_value: FormDataValue): Promise<{
+        parsable: true;
+        parsed_value: string;
+        error: null;
+    } | {
+        parsable: false;
+        parsed_value: null;
+        error: string;
+    }>;
+    getControl(): FormControl;
+}

package/@types/forms/fields/simple-form-field.d.ts

@@ -8,8 +8,10 @@ import { FormControlContext } from "../controls/form-control.js";
 export declare abstract class SimpleFormField<Required extends boolean, DefaultControl extends FormControl = SimpleInput, Parsed = string> extends FormField<Required, Parsed, DefaultControl> {
     type: string;
     predicate: import("@sealcode/ts-predicates").Predicate<string>;
+    placeholder: string;
     constructor(required: Required, type?: string);
     sealiousValueToForm(_ctx: Context, value: unknown): Promise<FormDataValue>;
+    setPlaceholder(placeholder: string): this;
 }
 export declare class TextBasedSimpleField<Required extends boolean, DefaultControl extends FormControl = SimpleInput> extends SimpleFormField<Required, DefaultControl, string | null> {
     parse(_: Context, raw_value: FormDataValue): Promise<FieldParseResult<string>>;

package/@types/utils/input-wrapper.d.ts

@@ -1,3 +1,5 @@
 import { FlatTemplatable } from "tempstream";
+import { FormField } from "../index.js";
 export declare function getRequiredClass(isRequired: boolean): string;
 export declare function inputWrapper(type: string, modifiers: string[], input: FlatTemplatable): Promise<string>;
+export declare function autoWrapInput(field: FormField, input: FlatTemplatable): Promise<string>;

package/lib/forms/controls/checkboxed-list-input.js

@@ -2,7 +2,7 @@ import { tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
 import { FormFieldControl } from "./form-field-control.js";
 class CheckboxedListInput extends FormFieldControl {
-  constructor(field, options = { label: field.name }) {
+  constructor(field, options = { label: field.label || field.name }) {
     super([field]);
     this.field = field;
     this.options = options;
@@ -52,7 +52,7 @@ class CheckboxedListInput extends FormFieldControl {
         ...this.generateCountBasedClasses(options.length)
       ],
       tempstream`<label
-					>${this.options.label || this.field.name}</label
+					>${this.options.label || this.field.label || this.field.name}</label
 				>
 				${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
 				<ul>

package/lib/forms/controls/dropdown.js

@@ -3,7 +3,7 @@ import { attribute } from "../../sanitize.js";
 import { SimpleInput } from "./simple-input.js";
 class FreeformDropdown extends SimpleInput {
   constructor(field, _generateOptions, options = {
-    label: field.name,
+    label: field.label || field.name,
     autosubmit: false,
     autocomplete: true
   }) {
@@ -36,7 +36,7 @@ class FreeformDropdown extends SimpleInput {
     );
     return (
       /* HTML */
-      tempstream`<select ${attributes_str}>
+      tempstream`<select ${attributes_str} autocomplete="off">
 			${Promise.resolve(this.generateOptions(ctx)).then(
         (options) => options.map(
           ({ value, label }) => `<option value="${attribute(value)}" ${(value || "") == picked_value ? "selected" : ""}>${label}</option>`
@@ -48,7 +48,7 @@ class FreeformDropdown extends SimpleInput {
 }
 class Dropdown extends FreeformDropdown {
   constructor(field, options = {
-    label: field.name,
+    label: field.label || field.name,
     autosubmit: false,
     autocomplete: true
   }) {

package/lib/forms/controls/hybrid.js

@@ -0,0 +1,41 @@
+import { tempstream } from "tempstream";
+import { FormControlContext } from "./form-control.js";
+import { FormFieldControl } from "./form-field-control.js";
+import { autoWrapInput } from "../../utils/input-wrapper.js";
+class Hybrid extends FormFieldControl {
+  constructor(main_field, subfields) {
+    super(Object.values(subfields));
+    this.main_field = main_field;
+    this.subfields = subfields;
+    for (const [field_name, field] of Object.entries(subfields)) {
+      field.setName(`${main_field.name}[${field_name}]`);
+    }
+  }
+  async render(fctx) {
+    const raw_values = fctx.data.raw_values[this.main_field.name] || {};
+    const new_fctx = new FormControlContext(
+      fctx.ctx,
+      {
+        raw_values,
+        messages: [],
+        field_messages: {}
+      },
+      [],
+      fctx.field_name_prefix,
+      fctx.form_id,
+      fctx.validate
+    );
+    return tempstream`<fieldset><legend>${this.main_field.label || this.main_field.name}</legend>${Object.values(
+      this.subfields
+    ).map(
+      async (subfield) => tempstream`${autoWrapInput(
+        subfield,
+        await subfield.getControl().render(new_fctx)
+      )}`
+    )}</fieldset>`;
+  }
+}
+export {
+  Hybrid
+};
+//# sourceMappingURL=hybrid.js.map

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

@@ -164,7 +164,9 @@ class MultipleFiles extends FormFieldControl {
       "multiple-files",
       ["multiple-files", this.field.name, ...this.getClassModifiers()],
       tempstream`
-				<label>${this.options.label || this.field.name}</label>
+				<label
+					>${this.options.label || this.field.label || this.field.name}</label
+				>
 				<ul class="multiple-files__list">
 					${files.map(
         ([item, file]) => this.renderFileItem(item, file)

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

@@ -2,6 +2,7 @@ import { tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
 import { renderAttributes } from "../../utils/render-attributes.js";
 import { FormFieldControl } from "./form-field-control.js";
+import { SimpleFormField } from "../fields/simple-form-field.js";
 class SimpleInput extends FormFieldControl {
   constructor(field, options) {
     super([field]);
@@ -15,12 +16,15 @@ class SimpleInput extends FormFieldControl {
     return this.options.type || "text";
   }
   getLabel() {
-    return this.options.label != void 0 ? this.options.label : this.field.name;
+    return this.options.label != void 0 ? this.options.label : this.field.label || this.field.name;
   }
   getID() {
     return this.options.id || this.field.name;
   }
   getPlaceholder() {
+    if (this.field instanceof SimpleFormField && this.field.placeholder) {
+      return this.field.placeholder;
+    }
     return this.options.placeholder === "" ? "" : this.options.placeholder || this.getType();
   }
   async getInputAttributes(fctx) {
@@ -42,7 +46,8 @@ class SimpleInput extends FormFieldControl {
       ...required ? [["required", true]] : [],
       ...!this.options.autocomplete ? [["autocomplete", "off"]] : [],
       ...this.options.step ? [["step", this.options.step]] : [],
-      ["aria-invalid", String(!valid)]
+      ["aria-invalid", String(!valid)],
+      ...this.options.inputmode ? [["inputmode", this.options.inputmode]] : []
     ]);
   }
   async postInput(_) {

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

@@ -1,7 +1,7 @@
 import { FreeformDropdown } from "./dropdown.js";
 class SingleReferenceDropdown extends FreeformDropdown {
   constructor(field, options = {
-    label: field.name,
+    label: field.label || field.name,
     autosubmit: false,
     autocomplete: true
   }) {

package/lib/forms/controls/table.js

@@ -88,7 +88,7 @@ class Table extends FormControl {
       ...rows.length >= 20 ? ["form-input__wrapper--options-count--20-or-more"] : []
     ].join(" ")}"
 		>
-			<label>${this.options.label}</label>
+			<label>${this.options.label || this.table_field.label}</label>
 			<div class="table__wrapper">
 				<table>
 					<tbody>

package/lib/forms/fields/boolean.js

@@ -44,7 +44,7 @@ class Boolean extends FormField {
     return false;
   }
   getControl() {
-    return new Checkbox(this, { label: this.name });
+    return new Checkbox(this, { label: this.label || this.name });
   }
   async getSealiousCreateValue(fctx) {
     const { parsed } = await this.getParsedValue(

package/lib/forms/fields/checkboxed-list.js

@@ -44,7 +44,9 @@ class CheckboxedListField extends FormField {
     return {};
   }
   getControl() {
-    return new CheckboxedListInput(this, { label: this.name });
+    return new CheckboxedListInput(this, {
+      label: this.label || this.name
+    });
   }
 }
 export {

package/lib/forms/fields/coordinates.js

@@ -35,7 +35,7 @@ class Coordinates extends SimpleFormField {
   }
   getControl() {
     return new SimpleInput(this, {
-      label: this.name,
+      label: this.label || this.name,
       type: this.type
     });
   }

package/lib/forms/fields/date.js

@@ -15,7 +15,10 @@ class DateField extends SimpleFormField {
     };
   }
   getControl() {
-    return new SimpleInput(this, { label: this.name, type: this.type });
+    return new SimpleInput(this, {
+      label: this.label || this.name,
+      type: this.type
+    });
   }
   async getSealiousCreateValue(fctx) {
     const { parsed } = await this.getParsedValue(

package/lib/forms/fields/datetime.js

@@ -26,7 +26,7 @@ class DateTime extends SimpleFormField {
   }
   getControl() {
     return new SimpleInput(this, {
-      label: this.name,
+      label: this.label || this.name,
       type: this.type
     });
   }

package/lib/forms/fields/deep-reverse-single-reference-table.js

@@ -31,7 +31,7 @@ class DeepReverseSingleReferenceTable extends Table {
   }
   getControl() {
     return new TableControl(this, {
-      label: this.name,
+      label: this.label || this.name,
       allow_adding: false,
       subfield_controls: {
         selected: this.columns.selected.getControl(),

package/lib/forms/fields/email.js

@@ -17,7 +17,10 @@ class EmailField extends RegExpField {
     this.error_message = message;
   }
   getControl() {
-    return new SimpleInput(this, { label: this.name, type: "email" });
+    return new SimpleInput(this, {
+      label: this.label || this.name,
+      type: "email"
+    });
   }
 }
 export {

package/lib/forms/fields/field.js

@@ -18,6 +18,10 @@ class FormField {
     this.name = name;
     return this;
   }
+  setLabel(label) {
+    this.label = label;
+    return this;
+  }
   async _validate(ctx, value) {
     if (value === "" || value === null || value === void 0) {
       if (this.required) {

package/lib/forms/fields/fields.js

@@ -20,6 +20,8 @@ export * from "./markdown.js";
 export * from "./multiple-files.js";
 export * from "./number.js";
 export * from "./password.js";
+export * from "./phone-number.js";
+export * from "./phone-number-with-country-code.js";
 export * from "./pick-from-list-sealious.js";
 export * from "./pick-from-list.js";
 export * from "./regexp.js";

package/lib/forms/fields/get-field-for-sealious.js

@@ -25,6 +25,7 @@ import extract_fields_from_collection from "../../utils/extract-fields-from-coll
 import { EnumMultipleSealious } from "./enum-multiple-sealious.js";
 import { URLField } from "./url.js";
 import { Image } from "./image.js";
+import { PhoneNumberWithCountryCode } from "./phone-number-with-country-code.js";
 function sealiousToFormField(sealious_field) {
   if (sealious_field instanceof SealiousFieldTypes.Boolean) {
     return new BooleanField(
@@ -106,6 +107,11 @@ function sealiousToFormField(sealious_field) {
   if (sealious_field instanceof SealiousFieldTypes.Password) {
     return new Password(sealious_field.required);
   }
+  if (sealious_field instanceof SealiousFieldTypes.PhoneNumber) {
+    return new PhoneNumberWithCountryCode(
+      sealious_field.required
+    );
+  }
   if (sealious_field instanceof SealiousFieldTypes.SettableBy) {
     return sealiousToFormField(
       sealious_field.virtual_field
@@ -184,6 +190,8 @@ async function sealiousFieldInfoToFormField(field_info) {
       return new JSONField(field_info.is_required);
     case "password":
       return new Password(field_info.is_required);
+    case "phone-number":
+      return new PhoneNumberWithCountryCode(field_info.is_required);
     case "single-reference":
       return new SingleReference(false, {});
     case "text":

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

@@ -0,0 +1,50 @@
+import * as countryCodes from "country-codes-list";
+import { FieldTypes as SealiousFieldTypes } from "sealious";
+import { Hybrid } from "../controls/hybrid.js";
+import { FormField } from "./field.js";
+import { PickFromListField } from "./pick-from-list.js";
+import { PhoneNumberWithoutCountryCode } from "./phone-number.js";
+class PhoneNumberWithCountryCode extends FormField {
+  getEmptyValue() {
+    return new SealiousFieldTypes.PhoneNumberValue("48", "0000000");
+  }
+  async parse(ctx, raw_value) {
+    try {
+      return {
+        parsable: true,
+        parsed_value: SealiousFieldTypes.PhoneNumberValue.fromInput(
+          ctx.$context,
+          raw_value
+        ),
+        error: null
+      };
+    } catch (e) {
+      return {
+        parsable: false,
+        parsed_value: null,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        error: e.message
+      };
+    }
+  }
+  getControl() {
+    return new Hybrid(this, {
+      country_code: new PickFromListField(
+        true,
+        async () => countryCodes.all().sort(
+          (a, b) => a.countryCallingCode < b.countryCallingCode ? -1 : 1
+        ).map((code) => ({
+          value: code.countryCallingCode,
+          label: "+" + code.countryCallingCode + " " + code.flag
+        }))
+      ).setLabel("Country code"),
+      number: new PhoneNumberWithoutCountryCode(true).setLabel(
+        "Phone number"
+      )
+    });
+  }
+}
+export {
+  PhoneNumberWithCountryCode
+};
+//# sourceMappingURL=phone-number-with-country-code.js.map

package/lib/forms/fields/phone-number.js

@@ -0,0 +1,33 @@
+import { SimpleInput } from "../controls/controls.js";
+import { FormField } from "./field.js";
+class PhoneNumberWithoutCountryCode extends FormField {
+  getEmptyValue() {
+    return "000 000 000";
+  }
+  async parse(ctx, raw_value) {
+    if (typeof raw_value == "string") {
+      return {
+        parsable: true,
+        parsed_value: raw_value.replaceAll(/[^0-9]/, "").replace(/(\d{3})(?=\d)/g, "$1 ").trim(),
+        error: null
+      };
+    } else {
+      return {
+        parsable: false,
+        parsed_value: null,
+        error: "Expected string"
+      };
+    }
+  }
+  getControl() {
+    return new SimpleInput(this, {
+      inputmode: "tel",
+      type: "text",
+      placeholder: "123 456 789"
+    });
+  }
+}
+export {
+  PhoneNumberWithoutCountryCode
+};
+//# sourceMappingURL=phone-number.js.map

package/lib/forms/fields/regexp.js

@@ -37,7 +37,7 @@ class RegExpField extends FormField {
     return this.default_value || "";
   }
   getControl() {
-    return new SimpleInput(this, { label: this.name });
+    return new SimpleInput(this, { label: this.label || this.name });
   }
   async getSealiousCreateValue(fctx) {
     const { parsed } = await this.getParsedValue(

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

@@ -13,6 +13,10 @@ class SimpleFormField extends FormField {
     }
     return String(value);
   }
+  setPlaceholder(placeholder) {
+    this.placeholder = placeholder;
+    return this;
+  }
 }
 class TextBasedSimpleField extends SimpleFormField {
   async parse(_, raw_value) {
@@ -36,7 +40,7 @@ class TextBasedSimpleField extends SimpleFormField {
   }
   getControl() {
     return new SimpleInput(this, {
-      label: this.name,
+      label: this.label || this.name,
       type: this.type
     });
   }
@@ -65,7 +69,7 @@ class NumberBasedSimpleField extends SimpleFormField {
   }
   getControl() {
     return new SimpleInput(this, {
-      label: this.name,
+      label: this.label || this.name,
       type: this.type
     });
   }

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

@@ -4,7 +4,7 @@ import { toPascalCase } from "js-convert-case";
 class SingleReference extends CollectionField {
   getControl() {
     return new SingleReferenceDropdown(this, {
-      label: this.name,
+      label: this.label || this.name,
       getLabel: (item) => item.id
     });
   }

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

@@ -18,7 +18,7 @@ class StructuredArray extends Table {
   }
   getControl() {
     return new TableControl(this, {
-      label: this.name,
+      label: this.label || this.name,
       subfield_controls: Object.fromEntries(
         Object.entries(this.columns).map(([column_name, subfield]) => [
           column_name,

package/lib/forms/fields/table.js

@@ -70,7 +70,7 @@ class Table extends FormField {
   }
   getControl() {
     return new TableControl(this, {
-      label: this.name,
+      label: this.label || this.name,
       subfield_controls: Object.fromEntries(
         Object.entries(this.columns).map(([column_name, field]) => [
           column_name,

package/lib/utils/input-wrapper.js

@@ -1,4 +1,5 @@
 import { tempstream } from "tempstream";
+import { toKebabCase } from "js-convert-case";
 function getRequiredClass(isRequired) {
   return isRequired ? "required" : "";
 }
@@ -14,7 +15,19 @@ async function inputWrapper(type, modifiers, input) {
 		${input}
 	</div>`;
 }
+async function autoWrapInput(field, input) {
+  return inputWrapper(
+    toKebabCase(field.constructor.name),
+    [
+      `type--` + toKebabCase(field.constructor.name),
+      `name--` + toKebabCase(field.name),
+      getRequiredClass(field.required)
+    ],
+    input
+  );
+}
 export {
+  autoWrapInput,
   getRequiredClass,
   inputWrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.3",
+	"version": "0.19.5",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -66,6 +66,7 @@
 		"@sealcode/ts-predicates": "^0.4.3",
 		"chokidar": "^3.6.0",
 		"colord": "^2.9.3",
+		"country-codes-list": "^2.0.0",
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.20.0",
 		"escape-goat": "^4.0.0",

package/src/forms/controls/checkboxed-list-input.ts

@@ -12,7 +12,7 @@ export class CheckboxedListInput<
 > extends FormFieldControl {
 	constructor(
 		public field: CheckboxedListField<boolean, Values>,
-		public options: { label: string } = { label: field.name }
+		public options: { label: string } = { label: field.label || field.name }
 	) {
 		super([field]);
 	}
@@ -67,7 +67,9 @@ export class CheckboxedListInput<
 				...this.generateCountBasedClasses(options.length),
 			],
 			tempstream /* HTML */ `<label
-					>${this.options.label || this.field.name}</label
+					>${this.options.label ||
+					this.field.label ||
+					this.field.name}</label
 				>
 				${~valid && fctx.validate
 					? `<div class="input__error">${message}</div>`

package/src/forms/controls/dropdown.ts

@@ -20,7 +20,7 @@ export class FreeformDropdown extends SimpleInput {
 		public field: FormField<boolean, string | null>,
 		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
 		public options: DropdownOptions = {
-			label: field.name,
+			label: field.label || field.name,
 			autosubmit: false,
 			autocomplete: true,
 		}
@@ -61,7 +61,7 @@ export class FreeformDropdown extends SimpleInput {
 			ctx,
 			data
 		);
-		return /* HTML */ tempstream`<select ${attributes_str}>
+		return /* HTML */ tempstream`<select ${attributes_str} autocomplete="off">
 			${Promise.resolve(this.generateOptions(ctx)).then((options) =>
 				options.map(
 					({ value, label }) =>
@@ -78,7 +78,7 @@ export class Dropdown extends FreeformDropdown {
 	constructor(
 		public field: PickFromListField<boolean>,
 		public options: DropdownOptions = {
-			label: field.name,
+			label: field.label || field.name,
 			autosubmit: false,
 			autocomplete: true,
 		}