Page MenuHomeSealhub
Files F7511446

simple-input.ts
No OneTemporary
Actions

simple-input.ts
View Options

import { BaseContext } from "koa";
import { FormField, SimpleFormField } from "../field";
import { FormData, FormDataValue } from "../form";
import { FormFieldControl } from "./controls";
export class SimpleInput extends FormFieldControl {
constructor(
public field: SimpleFormField,
public options: {
id?: string;
label?: string;
autocomplete?: boolean;
type?:
| "color"
| "date"
| "email"
| "file"
| "month"
| "number"
| "password"
| "search"
| "tel"
| "text"
| "time"
| "url"
| "week";
value?: string;
placeholder?: string;
readonly?: boolean;
step?: number;
} = {}
) {
super([field]);
}
async render<Fields extends Record<string, FormField>>(
ctx: BaseContext,
data: Record<string, FormDataValue>
) {
const id = this.options.id || this.field.name;
const label = this.options.label || this.field.name;
const type = this.options.type || "text";
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const { parsed, raw, valid, message } = await this.field.getValue(
ctx,
data
);
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const placeholder = this.options.placeholder || type;
const readonly = this.options.readonly || false;
const required = this.field.required;
return /* HTML */ `<div class="input">
<label for="${id}">${label}</label>
<input
id="${id}"
type="${type}"
name="${this.field.name}"
value="${parsed === undefined
? raw == undefined
? ""
: raw.toString()
: parsed}"
placeholder="${placeholder}"
${readonly ? "readonly" : ""}
${required ? "required" : ""}
${!this.options.autocomplete ? `autocomplete="off"` : ""}
${this.options.step ? `step="${this.options.step}"` : ""}
/>
${~valid ? `<div class="input__error">${message}</div>` : ""}
</div>`;
}
}

File Metadata

Mime Type
text/x-java
Expires
Mon, Jul 21, 00:23 (1 d, 15 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
837938
Default Alt Text
simple-input.ts (1 KB)

Event Timeline