@sealcode/sealgen 0.19.2 → 0.19.4

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/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

@@ -1,4 +1,4 @@
-import { FormDataValue } from "../form-types.js";
+import { FormData, FormDataValue } from "../form-types.js";
 import { Context } from "koa";
 import { FieldParseResult, FormField } from "./field.js";
 import { SimpleInput } from "../controls/simple-input.js";
@@ -8,14 +8,16 @@ 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>>;
     getSealiousCreateValue(fctx: FormControlContext): Promise<string | null>;
-    postSealiousCreate(ctx: Context, created_item: CollectionItem<any>): Promise<void>;
-    postSealiousEdit(ctx: Context, edited_item: CollectionItem<any>): Promise<void>;
+    postSealiousCreate(_ctx: Context, _created_item: CollectionItem<any>, _formData: FormData): Promise<void>;
+    postSealiousEdit(ctx: Context, _edited_item: CollectionItem<any>, _formData: FormData): Promise<void>;
     getControl(): DefaultControl;
     getEmptyValue(): 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/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) {
@@ -30,13 +34,13 @@ class TextBasedSimpleField extends SimpleFormField {
     );
     return parsed || "";
   }
-  async postSealiousCreate(ctx, created_item) {
+  async postSealiousCreate(_ctx, _created_item, _formData) {
   }
-  async postSealiousEdit(ctx, edited_item) {
+  async postSealiousEdit(ctx, _edited_item, _formData) {
   }
   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.2",
+	"version": "0.19.4",
 	"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,
 		}

package/src/forms/controls/hybrid.ts

@@ -0,0 +1,44 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormControlContext } from "./form-control.js";
+import { FormFieldControl } from "./form-field-control.js";
+import { FormField } from "../fields/field.js";
+import { FormDataValue } from "../form-types.js";
+import { autoWrapInput } from "../../utils/input-wrapper.js";
+
+export class Hybrid extends FormFieldControl {
+	constructor(
+		public main_field: FormField,
+		public subfields: Record<string, FormField>
+	) {
+		super(Object.values(subfields));
+		for (const [field_name, field] of Object.entries(subfields)) {
+			field.setName(`${main_field.name}[${field_name}]`);
+		}
+	}
+
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const raw_values = (fctx.data.raw_values[this.main_field.name] ||
+			{}) as Record<string, FormDataValue>;
+		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>`;
+	}
+}

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

@@ -231,7 +231,11 @@ export class MultipleFiles extends FormFieldControl {
 			"multiple-files",
 			["multiple-files", this.field.name, ...this.getClassModifiers()],
 			tempstream /* HTML */ `
-				<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/src/forms/controls/simple-input.ts

@@ -6,6 +6,7 @@ import { FormField } from "../fields/field.js";
 import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
+import { SimpleFormField } from "../fields/simple-form-field.js";
 
 export type SimpleInputOptions = {
 	id?: string;
@@ -19,6 +20,7 @@ export type SimpleInputOptions = {
 	step?: number;
 	suffix?: string;
 	pattern?: string;
+	inputmode?: string;
 };
 
 export class SimpleInput<
@@ -48,7 +50,7 @@ export class SimpleInput<
 	getLabel(): string {
 		return this.options.label != undefined
 			? this.options.label
-			: this.field.name;
+			: this.field.label || this.field.name;
 	}
 
 	getID(): string {
@@ -56,6 +58,9 @@ export class SimpleInput<
 	}
 
 	getPlaceholder(): string {
+		if (this.field instanceof SimpleFormField && this.field.placeholder) {
+			return this.field.placeholder;
+		}
 		return this.options.placeholder === ""
 			? ""
 			: this.options.placeholder || this.getType();
@@ -83,6 +88,9 @@ export class SimpleInput<
 			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
 			...(this.options.step ? [["step", this.options.step]] : []),
 			["aria-invalid", String(!valid)],
+			...(this.options.inputmode
+				? [["inputmode", this.options.inputmode]]
+				: []),
 		]) as Record<string, string>;
 	}
 

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

@@ -13,7 +13,7 @@ export class SingleReferenceDropdown<
 		public options: DropdownOptions & {
 			getLabel?: (item: CollectionItem<Collection>) => string;
 		} = {
-			label: field.name,
+			label: field.label || field.name,
 			autosubmit: false,
 			autocomplete: true,
 		}

package/src/forms/controls/table.ts

@@ -159,7 +159,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					: []),
 			].join(" ")}"
 		>
-			<label>${this.options.label}</label>
+			<label>${this.options.label || this.table_field.label}</label>
 			<div class="table__wrapper">
 				<table>
 					<tbody>

package/src/forms/fields/boolean.ts

@@ -68,7 +68,7 @@ export class Boolean<Required extends boolean> extends FormField<
 	}
 
 	public getControl(): Checkbox {
-		return new Checkbox(this, { label: this.name });
+		return new Checkbox(this, { label: this.label || this.name });
 	}
 
 	async getSealiousCreateValue(fctx: FormControlContext): Promise<boolean> {

package/src/forms/fields/checkboxed-list.ts

@@ -74,6 +74,8 @@ export class CheckboxedListField<
 	}
 
 	getControl(): CheckboxedListInput<Values> {
-		return new CheckboxedListInput(this, { label: this.name });
+		return new CheckboxedListInput(this, {
+			label: this.label || this.name,
+		});
 	}
 }

package/src/forms/fields/coordinates.ts

@@ -55,7 +55,7 @@ export class Coordinates<
 
 	getControl(): DefaultControl {
 		return new SimpleInput(this, {
-			label: this.name,
+			label: this.label || this.name,
 			type: this.type,
 		}) as unknown as DefaultControl;
 	}

package/src/forms/fields/date.ts

@@ -30,7 +30,10 @@ export class DateField<Required extends boolean> extends SimpleFormField<
 	}
 
 	getControl(): SimpleInput<SimpleInputOptions> {
-		return new SimpleInput(this, { label: this.name, type: this.type });
+		return new SimpleInput(this, {
+			label: this.label || this.name,
+			type: this.type,
+		});
 	}
 
 	async getSealiousCreateValue(

package/src/forms/fields/datetime.ts

@@ -45,7 +45,7 @@ export class DateTime<Required extends boolean> extends SimpleFormField<
 
 	getControl(): SimpleInput {
 		return new SimpleInput(this, {
-			label: this.name,
+			label: this.label || this.name,
 			type: this.type,
 		});
 	}

package/src/forms/fields/deep-reverse-single-reference-table.ts

@@ -56,7 +56,7 @@ export class DeepReverseSingleReferenceTable extends Table<
 
 	getControl(): TableControl<any> {
 		return new TableControl(this, {
-			label: this.name,
+			label: this.label || this.name,
 			allow_adding: false,
 			subfield_controls: {
 				selected: this.columns.selected.getControl(),

package/src/forms/fields/email.ts

@@ -24,6 +24,9 @@ export class EmailField<
 	}
 
 	public getControl(): SimpleInput {
-		return new SimpleInput(this, { label: this.name, type: "email" });
+		return new SimpleInput(this, {
+			label: this.label || this.name,
+			type: "email",
+		});
 	}
 }

package/src/forms/fields/field.ts

@@ -66,6 +66,7 @@ export abstract class FormField<
 	SealiousValue = any,
 > {
 	name: string;
+	label: string;
 	constructor(public readonly required: Required) {}
 	predicate: Predicate = predicates.unknown;
 	mapToFilter: (parsed: ParsedValue) => unknown = (value) => value;
@@ -77,6 +78,11 @@ export abstract class FormField<
 		return this;
 	}
 
+	setLabel(label: string): this {
+		this.label = label;
+		return this;
+	}
+
 	public async _validate(
 		ctx: Context,
 		value: ParsedValue

package/src/forms/fields/fields.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/src/forms/fields/phone-number-with-country-code.ts

@@ -0,0 +1,59 @@
+import * as countryCodes from "country-codes-list";
+import { Context } from "koa";
+import { FieldTypes as SealiousFieldTypes } from "sealious";
+import { FormControl } from "../controls/controls.js";
+import { Hybrid } from "../controls/hybrid.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult, FormField } from "./field.js";
+import { PickFromListField } from "./pick-from-list.js";
+import { PhoneNumberWithoutCountryCode } from "./phone-number.js";
+
+export class PhoneNumberWithCountryCode<
+	Required extends boolean,
+> extends FormField<Required, SealiousFieldTypes.PhoneNumberValue> {
+	public getEmptyValue(): SealiousFieldTypes.PhoneNumberValue {
+		return new SealiousFieldTypes.PhoneNumberValue("48", "0000000");
+	}
+
+	async parse(
+		ctx: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<SealiousFieldTypes.PhoneNumberValue>> {
+		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 as string,
+			};
+		}
+	}
+
+	getControl(): FormControl {
+		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"
+			),
+		});
+	}
+}

package/src/forms/fields/phone-number.ts

@@ -0,0 +1,39 @@
+import { Context } from "koa";
+import { FormControl, SimpleInput } from "../controls/controls.js";
+import { FormDataValue } from "../form-types.js";
+import { FormField } from "./field.js";
+
+export class PhoneNumberWithoutCountryCode<
+	Required extends boolean,
+> extends FormField<Required, string> {
+	public getEmptyValue(): string {
+		return "000 000 000";
+	}
+
+	async parse(ctx: Context, raw_value: FormDataValue) {
+		if (typeof raw_value == "string") {
+			return {
+				parsable: <const>true,
+				parsed_value: raw_value
+					.replaceAll(/[^0-9]/, "")
+					.replace(/(\d{3})(?=\d)/g, "$1 ")
+					.trim(),
+				error: null,
+			};
+		} else {
+			return {
+				parsable: <const>false,
+				parsed_value: null,
+				error: "Expected string",
+			};
+		}
+	}
+
+	getControl(): FormControl {
+		return new SimpleInput(this, {
+			inputmode: "tel",
+			type: "text",
+			placeholder: "123 456 789",
+		});
+	}
+}

package/src/forms/fields/regexp.ts

@@ -59,7 +59,7 @@ export class RegExpField<Required extends boolean> extends FormField<
 	}
 
 	public getControl(): SimpleInput {
-		return new SimpleInput(this, { label: this.name });
+		return new SimpleInput(this, { label: this.label || this.name });
 	}
 
 	async getSealiousCreateValue(fctx: FormControlContext): Promise<string> {

package/src/forms/fields/simple-form-field.ts

@@ -1,5 +1,5 @@
 /* eslint @typescript-eslint/no-unused-vars: off */
-import { FormDataValue } from "../form-types.js";
+import { FormData, FormDataValue } from "../form-types.js";
 import { Context } from "koa";
 import { predicates } from "@sealcode/ts-predicates";
 import { FieldParseResult, FormField } from "./field.js";
@@ -14,6 +14,7 @@ export abstract class SimpleFormField<
 	Parsed = string,
 > extends FormField<Required, Parsed, DefaultControl> {
 	predicate = predicates.string;
+	public placeholder: string;
 
 	constructor(
 		required: Required,
@@ -32,6 +33,11 @@ export abstract class SimpleFormField<
 		// eslint-disable-next-line @typescript-eslint/no-base-to-string
 		return String(value) as FormDataValue;
 	}
+
+	setPlaceholder(placeholder: string) {
+		this.placeholder = placeholder;
+		return this;
+	}
 }
 
 export class TextBasedSimpleField<
@@ -61,20 +67,22 @@ export class TextBasedSimpleField<
 	}
 
 	async postSealiousCreate(
-		ctx: Context,
+		_ctx: Context,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		created_item: CollectionItem<any>
+		_created_item: CollectionItem<any>,
+		_formData: FormData
 	): Promise<void> {}
 
 	async postSealiousEdit(
 		ctx: Context,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		edited_item: CollectionItem<any>
+		_edited_item: CollectionItem<any>,
+		_formData: FormData
 	): Promise<void> {}
 
 	getControl(): DefaultControl {
 		return new SimpleInput(this, {
-			label: this.name,
+			label: this.label || this.name,
 			type: this.type,
 		}) as unknown as DefaultControl;
 	}
@@ -115,7 +123,7 @@ export class NumberBasedSimpleField<
 
 	getControl(): DefaultControl {
 		return new SimpleInput(this, {
-			label: this.name,
+			label: this.label || this.name,
 			type: this.type,
 		}) as unknown as DefaultControl;
 	}

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

@@ -13,7 +13,7 @@ export class SingleReference<
 > extends CollectionField<F, Required> {
 	getControl(): SingleReferenceDropdown<TargetCollection, F, Required> {
 		return new SingleReferenceDropdown(this, {
-			label: this.name,
+			label: this.label || this.name,
 			getLabel: (item) => item.id,
 		});
 	}

package/src/forms/fields/structured-array.ts

@@ -55,7 +55,7 @@ export class StructuredArray<
 				SealiousFields[name]
 			>;
 		}>(this as any, {
-			label: this.name,
+			label: this.label || this.name,
 			subfield_controls: Object.fromEntries(
 				Object.entries(this.columns).map(([column_name, subfield]) => [
 					column_name as keyof SealiousFields,

package/src/forms/fields/table.ts

@@ -98,7 +98,7 @@ export class Table<F extends Record<string, FormField>> extends FormField<
 
 	getControl(): TableControl<F> {
 		return new TableControl<F>(this, {
-			label: this.name,
+			label: this.label || this.name,
 			subfield_controls: Object.fromEntries(
 				Object.entries(this.columns).map(([column_name, field]) => [
 					column_name as keyof F,

package/src/utils/input-wrapper.ts

@@ -1,4 +1,6 @@
 import { FlatTemplatable, tempstream } from "tempstream";
+import { FormField } from "../index.js";
+import { toKebabCase } from "js-convert-case";
 
 export function getRequiredClass(isRequired: boolean): string {
 	return isRequired ? "required" : "";
@@ -21,3 +23,15 @@ export async function inputWrapper(
 		${input}
 	</div>`;
 }
+
+export async function autoWrapInput(field: FormField, input: FlatTemplatable) {
+	return inputWrapper(
+		toKebabCase(field.constructor.name),
+		[
+			`type--` + toKebabCase(field.constructor.name),
+			`name--` + toKebabCase(field.name),
+			getRequiredClass(field.required),
+		],
+		input
+	);
+}