misc/formgen
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[mod]

Browse source
This commit is contained in:
fenris 2026-04-22 22:53:40 +02:00
parent e2f5f1bcc7
commit 51c684c896
13 changed files with 126 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/logic/helpers/json_schema.ts
View file

@ -129,6 +129,10 @@ namespace formgen.helpers.json_schema
* @see https://json-schema.org/understanding-json-schema/reference/annotations * @see https://json-schema.org/understanding-json-schema/reference/annotations
*/ */
title ?: string; title ?: string;
/**
* @see https://json-schema.org/understanding-json-schema/reference/annotations
*/
description ?: string;
/** /**
* @see https://json-schema.org/understanding-json-schema/reference/generic * @see https://json-schema.org/understanding-json-schema/reference/generic
*/ */

40
source/logic/info.ts Normal file
View file

@ -0,0 +1,40 @@
namespace formgen.info
{
/**
*/
export class class_info
{
/**
*/
private content : string;
/**
*/
public constructor(
content : string
)
{
this.content = content;
}
/**
*/
public setup(
element_target : Element
) : Promise<void>
{
const element_bubble : Element = document.createElement("span");
element_bubble.classList.add("formgen-info");
element_bubble.setAttribute("title", this.content);
element_bubble.textContent = "(?)";
element_target.appendChild(element_bubble);
return Promise.resolve<void>(undefined);
}
}
}

7
source/logic/input/_factory.ts
View file

@ -220,6 +220,7 @@ namespace formgen.input
new class_input_checkbox( new class_input_checkbox(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -238,6 +239,7 @@ namespace formgen.input
new class_input_number( new class_input_number(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -256,6 +258,7 @@ namespace formgen.input
new class_input_number( new class_input_number(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -279,6 +282,7 @@ namespace formgen.input
new class_input_date( new class_input_date(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -290,6 +294,7 @@ namespace formgen.input
new class_input_time( new class_input_time(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -304,6 +309,7 @@ namespace formgen.input
new class_input_text( new class_input_text(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );
@ -317,6 +323,7 @@ namespace formgen.input
new class_input_text( new class_input_text(
{ {
"label": (schema_adjusted.title ?? fallback_label ?? null), "label": (schema_adjusted.title ?? fallback_label ?? null),
"hint": (schema_adjusted.description ?? null),
} }
) )
); );

26
source/logic/input/checkbox.ts
View file

@ -16,6 +16,11 @@ namespace formgen.input
private label : (null | string); private label : (null | string);
/**
*/
private hint : (null | string);
/** /**
*/ */
private element_input : (null | Element); private element_input : (null | Element);
@ -27,11 +32,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -40,6 +47,7 @@ namespace formgen.input
{ {
this.additional_classes = ["formgen-input-checkbox"].concat(additional_classes); this.additional_classes = ["formgen-input-checkbox"].concat(additional_classes);
this.label = label; this.label = label;
this.hint = hint;
this.element_input = null; this.element_input = null;
} }
@ -47,7 +55,7 @@ namespace formgen.input
/** /**
* [implementation] * [implementation]
*/ */
public setup( public async setup(
target : Element target : Element
) : Promise<void> ) : Promise<void>
{ {
@ -61,18 +69,22 @@ namespace formgen.input
} }
// label // label
{ {
if (this.label === null) const element_label : Element = document.createElement("label");
element_label.setAttribute("for", id);
element_label.textContent = (this.label ?? "");
// hint
{
if (this.hint === null)
{ {
// do nothing // do nothing
} }
else else
{ {
const element_label : Element = document.createElement("label"); await (new formgen.info.class_info(this.hint)).setup(element_label);
element_label.setAttribute("for", id);
element_label.textContent = this.label;
element_container.appendChild(element_label);
} }
} }
element_container.appendChild(element_label);
}
// input // input
{ {
const element_input : Element = document.createElement("input"); const element_input : Element = document.createElement("input");
@ -82,7 +94,7 @@ namespace formgen.input
this.element_input = element_input; this.element_input = element_input;
} }
target.appendChild(element_container); target.appendChild(element_container);
return Promise.resolve<void>(undefined); // return Promise.resolve<void>(undefined);
} }

3
source/logic/input/color.ts
View file

@ -13,11 +13,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -30,6 +32,7 @@ namespace formgen.input
(raw) => raw, (raw) => raw,
{ {
"label": label, "label": label,
"hint": hint,
"additional_classes": ["formgen-input-color"].concat(additional_classes), "additional_classes": ["formgen-input-color"].concat(additional_classes),
} }
); );

3
source/logic/input/date.ts
View file

@ -13,11 +13,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -30,6 +32,7 @@ namespace formgen.input
(raw) => raw, (raw) => raw,
{ {
"label": label, "label": label,
"hint": hint,
"additional_classes": ["formgen-input-date"].concat(additional_classes), "additional_classes": ["formgen-input-date"].concat(additional_classes),
} }
); );

3
source/logic/input/number.ts
View file

@ -12,11 +12,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -29,6 +31,7 @@ namespace formgen.input
(raw) => parseInt(raw), (raw) => parseInt(raw),
{ {
"label": label, "label": label,
"hint": hint,
"additional_classes": ["formgen-input-number"].concat(additional_classes), "additional_classes": ["formgen-input-number"].concat(additional_classes),
} }
); );

26
source/logic/input/simple.ts
View file

@ -31,6 +31,11 @@ namespace formgen.input
private label : (null | string); private label : (null | string);
/**
*/
private hint : (null | string);
/** /**
*/ */
private element_input : (null | Element); private element_input : (null | Element);
@ -45,11 +50,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -61,6 +68,7 @@ namespace formgen.input
this.value_decode = value_decode; this.value_decode = value_decode;
this.additional_classes = additional_classes; this.additional_classes = additional_classes;
this.label = label; this.label = label;
this.hint = hint;
this.element_input = null; this.element_input = null;
} }
@ -68,7 +76,7 @@ namespace formgen.input
/** /**
* [implementation] * [implementation]
*/ */
public setup( public async setup(
element_target : Element element_target : Element
) : Promise<void> ) : Promise<void>
{ {
@ -82,18 +90,22 @@ namespace formgen.input
} }
// label // label
{ {
if (this.label === null) const element_label : Element = document.createElement("label");
element_label.setAttribute("for", id);
element_label.textContent = (this.label ?? "");
// hint
{
if (this.hint === null)
{ {
// do nothing // do nothing
} }
else else
{ {
const element_label : Element = document.createElement("label"); await (new formgen.info.class_info(this.hint)).setup(element_label);
element_label.setAttribute("for", id);
element_label.textContent = this.label;
element_container.appendChild(element_label);
} }
} }
element_container.appendChild(element_label);
}
// input // input
{ {
const element_input : Element = document.createElement("input"); const element_input : Element = document.createElement("input");
@ -103,7 +115,7 @@ namespace formgen.input
this.element_input = element_input; this.element_input = element_input;
} }
element_target.appendChild(element_container); element_target.appendChild(element_container);
return Promise.resolve<void>(undefined); // return Promise.resolve<void>(undefined);
} }

3
source/logic/input/text.ts
View file

@ -12,11 +12,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -29,6 +31,7 @@ namespace formgen.input
(raw) => raw, (raw) => raw,
{ {
"label": label, "label": label,
"hint": hint,
"additional_classes": ["formgen-input-text"].concat(additional_classes), "additional_classes": ["formgen-input-text"].concat(additional_classes),
} }
); );

3
source/logic/input/time.ts
View file

@ -13,11 +13,13 @@ namespace formgen.input
{ {
"additional_classes": additional_classes = [], "additional_classes": additional_classes = [],
"label": label = null, "label": label = null,
"hint": hint = null,
} }
: :
{ {
additional_classes ?: Array<string>, additional_classes ?: Array<string>,
label ?: (null | string); label ?: (null | string);
hint ?: (null | string);
} }
= =
{ {
@ -30,6 +32,7 @@ namespace formgen.input
(raw) => raw, (raw) => raw,
{ {
"label": label, "label": label,
"hint": hint,
"additional_classes": ["formgen-input-time"].concat(additional_classes), "additional_classes": ["formgen-input-time"].concat(additional_classes),
} }
); );

1
source/structure.html
View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="logic.js"></script> <script type="text/javascript" src="logic.js"></script>
<script type="text/javascript">formgen.entry();</script> <script type="text/javascript">formgen.entry();</script>
<link rel="stylesheet" type="text/css" href="style.css"/> <link rel="stylesheet" type="text/css" href="style.css"/>

12
source/style.css
View file

@ -60,6 +60,16 @@ body
margin-bottom: 16px; margin-bottom: 16px;
} }
.formgen-info
{
cursor: help;
margin: 2px;
font-weight: bold;
/*
font-size: 75%;
*/
}
.formgen-input > label .formgen-input > label
{ {
display: block; display: block;
@ -115,7 +125,7 @@ body
margin-bottom: 8px; margin-bottom: 8px;
} }
.formgen-input-group-field-marked > .formgen-input > label::after .formgen-input-group-field-marked > .formgen-input > label::before
{ {
content: "* "; content: "* ";
} }

1
tools/build
View file

@ -20,6 +20,7 @@ ${cmd_tsc} \
${dir_source}/logic/helpers/list.ts \ ${dir_source}/logic/helpers/list.ts \
${dir_source}/logic/helpers/map.ts \ ${dir_source}/logic/helpers/map.ts \
${dir_source}/logic/helpers/json_schema.ts \ ${dir_source}/logic/helpers/json_schema.ts \
${dir_source}/logic/info.ts \
${dir_source}/logic/input/_interface.ts \ ${dir_source}/logic/input/_interface.ts \
${dir_source}/logic/input/empty.ts \ ${dir_source}/logic/input/empty.ts \
${dir_source}/logic/input/wrapper.ts \ ${dir_source}/logic/input/wrapper.ts \