@thi.ng/rdom-forms 0.2.33 → 0.3.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-03-13T14:04:31Z
+- **Last updated**: 2024-03-28T10:57:28Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,18 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+### [0.3.1](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.3.1) (2024-03-28)
+
+#### 🩹 Bug fixes
+
+- fix multiFile() handling/detection ([5339339](https://github.com/thi-ng/umbrella/commit/5339339))
+
+## [0.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.3.0) (2024-03-27)
+
+#### 🚀 Features
+
+- add hidden(), reset() & submit() field types ([3304ee4](https://github.com/thi-ng/umbrella/commit/3304ee4))
+
 ## [0.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.2.0) (2023-12-11)
 
 #### 🚀 Features

package/README.md

@@ -15,6 +15,8 @@
 > GitHub](https://github.com/sponsors/postspectacular). Thank you! ❤️
 
 - [About](#about)
+- [Examples](#examples)
+  - [Login form](#login-form)
 - [Status](#status)
 - [Related packages](#related-packages)
 - [Installation](#installation)
@@ -38,9 +40,67 @@ can then be used with
 for static (or SSR) HTML generation via
 [thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup).
 
-All generated form elements are unstyled by default, but can be fully customized (in various stages) via user-provided options.
+All generated form elements are unstyled by default, but can be fully customized
+(in various stages) via user-provided options.
+
+## Examples
+
+Please see the [rdom-formgen example
+project](https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-formgen),
+which demonstrates **all** supported elements and various customization
+options...
+
+### Login form
+
+```ts tangle:export/readme1.ts
+import {
+    compileForm, form, hidden, password, str, submit
+} from "@thi.ng/rdom-forms";
+
+// compile form from given field descriptions
+const loginForm = compileForm(
+    form({ action: "/login", method: "post" },
+        // string input
+        str({ id: "user", label: "Username", desc: "or email address" }),
+        // password
+        password({ id: "pass", label: "Password", desc: "min. 8 characters", min: 8 }),
+        // hidden form value
+        hidden({ name: "target", value: "user-home" }),
+        submit({ title: "Login", label: "" })
+    ),
+    {
+        // disable reactive value subscriptions
+        behaviors: { values: false },
+        // customize attribs for label descriptions
+        descAttribs: { class: "desc" }
+    }
+);
+
+// use thi.ng/hiccup to serialize as HTML
+import { serialize } from "@thi.ng/hiccup";
+
+console.log(serialize(loginForm));
+```
+
+Resulting output (reformatted):
 
-Please see the example project linked further below, which demonstrates all currently provided elements...
+```html
+<form action="/login" method="post">
+    <div>
+        <label for="user">Username<span class="desc">or email address</span></label>
+        <input type="text" id="user" name="user" />
+    </div>
+    <div>
+        <label for="pass">Password<span class="desc">min. 8 characters</span></label>
+        <input type="password" autocomplete minlength="8" id="pass" name="pass" />
+    </div>
+    <input type="hidden" id="target" name="target" value="user-home" />
+    <div>
+        <label for="submit-0"></label>
+        <input type="submit" value="Login" id="submit-0" name="submit-0" />
+    </div>
+</form>
+```
 
 ## Status
 
@@ -72,7 +132,7 @@ For Node.js REPL:
 const rdomForms = await import("@thi.ng/rdom-forms");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.18 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.28 KB
 
 ## Dependencies
 

package/api.d.ts

@@ -1,5 +1,5 @@
 import type { Fn, Predicate } from "@thi.ng/api";
-import type { Attribs, FormAttribs, InputAttribs, InputCheckboxAttribs, InputFileAttribs, InputNumericAttribs, InputRadioAttribs, InputTextAttribs, SelectAttribs, TextAreaAttribs } from "@thi.ng/hiccup-html";
+import type { Attribs, FormAttribs, InputAttribs, InputCheckboxAttribs, InputFileAttribs, InputNumericAttribs, InputRadioAttribs, InputSubmitAttribs, InputTextAttribs, SelectAttribs, StringAttrib, TextAreaAttribs } from "@thi.ng/hiccup-html";
 import type { ComponentLike } from "@thi.ng/rdom";
 import type { ISubscriber, ISubscription } from "@thi.ng/rstream";
 export interface CommonAttribs {
@@ -44,6 +44,11 @@ export interface Value extends FormItem, Partial<CommonAttribs> {
     readonly?: boolean;
     attribs?: Partial<InputAttribs>;
 }
+export interface HiddenValue extends Omit<FormItem, "attribs"> {
+    id?: string;
+    name: string;
+    value: StringAttrib;
+}
 export interface WithPresets<T> {
     /**
      * Array of possible preset values.
@@ -155,12 +160,23 @@ export interface MultiSelectNum<T extends number = number> extends MultiSelect<T
 export interface Toggle extends Value {
     type: "toggle";
     value?: ISubscription<boolean, boolean>;
+    attribs?: Partial<InputCheckboxAttribs>;
 }
 export interface Trigger extends Value {
     type: "trigger";
     title: string;
     value?: ISubscriber<boolean>;
-    attribs?: Partial<InputCheckboxAttribs>;
+}
+export interface Submit extends Omit<Value, "required" | "readonly"> {
+    type: "submit";
+    title: string;
+    value?: ISubscriber<boolean>;
+    attribs?: Partial<InputSubmitAttribs>;
+}
+export interface Reset extends Omit<Value, "required" | "readonly"> {
+    type: "submit";
+    title: string;
+    value?: ISubscriber<boolean>;
 }
 export interface Radio<T> extends Value {
     items: (T | SelectItem<T>)[];

package/compile.d.ts

@@ -2,13 +2,14 @@ import type { MultiFn2 } from "@thi.ng/defmulti";
 import type { Attribs, FormAttribs } from "@thi.ng/hiccup-html";
 import { type ComponentLike } from "@thi.ng/rdom";
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { Color, Container, Custom, DateTime, DateVal, Email, FileVal, Form, FormItem, FormOpts, Group, Month, MultiFileVal, MultiSelectNum, MultiSelectStr, Num, Password, RadioNum, RadioStr, Range, SelectNum, SelectStr, Str, Text, Time, Toggle, Trigger, UrlVal, Value, Week } from "./api.js";
+import type { Color, Container, Custom, DateTime, DateVal, Email, FileVal, Form, FormItem, FormOpts, Group, HiddenValue, Month, MultiFileVal, MultiSelectNum, MultiSelectStr, Num, Password, RadioNum, RadioStr, Range, Reset, SelectNum, SelectStr, Str, Submit, Text, Time, Toggle, Trigger, UrlVal, Value, Week } from "./api.js";
 export declare const form: (attribs: Partial<FormAttribs>, ...items: FormItem[]) => Form;
 export declare const container: (attribs: Partial<Attribs>, ...items: FormItem[]) => Container;
 export declare const group: (spec: Omit<Group, "type" | "id" | "items"> & {
     id?: string;
 }, ...items: FormItem[]) => Group;
 export declare const custom: (body: ComponentLike) => Custom;
+export declare const hidden: (spec: Omit<HiddenValue, "type">) => HiddenValue;
 export type PartialSpec<T extends Value> = Omit<T, "type" | "id"> & {
     id?: string;
 };
@@ -30,8 +31,10 @@ export declare const phone: (spec: PartialSpec<Email> | ReadonlyPartialSpec<Emai
 export declare const radioNum: (spec: PartialSpec<RadioNum> | ReadonlyPartialSpec<RadioNum, number>) => RadioNum;
 export declare const radioStr: (spec: PartialSpec<RadioStr> | ReadonlyPartialSpec<RadioStr, string>) => RadioStr;
 export declare const range: (spec: PartialSpec<Range> | ReadonlyPartialSpec<Range, number>) => Range;
+export declare const reset: (spec: PartialSpec<Reset> | ReadonlyPartialSpec<Reset, string>) => Reset;
 export declare const search: (spec: PartialSpec<Str> | ReadonlyPartialSpec<Str, string>) => Str;
 export declare const str: (spec: PartialSpec<Str> | ReadonlyPartialSpec<Str, string>) => Str;
+export declare const submit: (spec: PartialSpec<Submit> | ReadonlyPartialSpec<Submit, string>) => Submit;
 export declare const text: (spec: PartialSpec<Text> | ReadonlyPartialSpec<Text, string>) => Text;
 export declare const time: (spec: PartialSpec<Time> | ReadonlyPartialSpec<Time, string>) => Time;
 export declare const toggle: (spec: PartialSpec<Toggle> | ReadonlyPartialSpec<Toggle, boolean>) => Toggle;

package/compile.js

@@ -13,6 +13,8 @@ import {
   inputFile,
   inputNumber,
   inputRange,
+  inputReset,
+  inputSubmit,
   inputText,
   label,
   legend,
@@ -53,6 +55,10 @@ const custom = (body) => ({
   type: "custom",
   body
 });
+const hidden = (spec) => ({
+  type: "hidden",
+  ...spec
+});
 let __nextID = 0;
 const $ = (type, defaults) => (spec) => ({
   id: spec.id || `${type}-${__nextID++}`,
@@ -73,8 +79,10 @@ const phone = $("tel", { autocomplete: true });
 const radioNum = $("radioNum");
 const radioStr = $("radioStr");
 const range = $("range");
+const reset = $("reset");
 const search = $("search");
 const str = $("str");
+const submit = $("submit");
 const text = $("text");
 const time = $("time");
 const toggle = $("toggle");
@@ -88,7 +96,7 @@ const multiSelectStr = (spec) => $("multiSelectStr")(spec);
 const __genID = (id, opts) => opts.prefix ? opts.prefix + id : id;
 const __genLabel = (x, opts) => label(
   { ...opts.labelAttribs, ...x.labelAttribs, for: __genID(x.id, opts) },
-  x.label ?? x.id,
+  x.label != void 0 ? x.label || null : x.id,
   x.desc ? span({ ...opts.descAttribs, ...x.descAttribs }, x.desc) : null
 );
 const __genList = (id, list) => datalist({ id: id + "--list" }, ...list.map((value) => option({ value })));
@@ -202,6 +210,10 @@ const compileForm = defmulti(
       );
     },
     custom: (val) => val.body,
+    hidden: ($val) => {
+      const { id, name, value } = $val;
+      return inputText({ type: "hidden", id: id ?? name, name, value });
+    },
     toggle: ($val, opts) => {
       const val = $val;
       const label2 = __genLabel(val, opts);
@@ -228,6 +240,22 @@ const compileForm = defmulti(
       false,
       $val.title
     ),
+    submit: ($val, opts) => __component(
+      $val,
+      opts,
+      inputSubmit,
+      { ...opts.typeAttribs?.submit, value: $val.title },
+      { onclick: $inputTrigger($val.value) },
+      false
+    ),
+    reset: ($val, opts) => __component(
+      $val,
+      opts,
+      inputReset,
+      { ...opts.typeAttribs?.reset, value: $val.title },
+      { onclick: $inputTrigger($val.value) },
+      false
+    ),
     radio: ($val, opts) => {
       const val = $val;
       const labelAttribs = {
@@ -283,7 +311,7 @@ const compileForm = defmulti(
     ),
     file: ($val, opts) => {
       const val = $val;
-      const isMulti = val.id.startsWith("multi");
+      const isMulti = val.type.startsWith("multi");
       return __component(
         val,
         opts,
@@ -499,6 +527,7 @@ export {
   file,
   form,
   group,
+  hidden,
   month,
   multiFile,
   multiSelectNum,
@@ -509,10 +538,12 @@ export {
   radioNum,
   radioStr,
   range,
+  reset,
   search,
   selectNum,
   selectStr,
   str,
+  submit,
   text,
   time,
   toggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom-forms",
-  "version": "0.2.33",
+  "version": "0.3.1",
   "description": "Data-driven declarative & extensible HTML form generation",
   "type": "module",
   "module": "./index.js",
@@ -36,19 +36,19 @@
     "tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.30",
-    "@thi.ng/checks": "^3.5.4",
-    "@thi.ng/defmulti": "^3.0.33",
-    "@thi.ng/hiccup-html": "^2.4.15",
-    "@thi.ng/rdom": "^1.1.18",
-    "@thi.ng/rstream": "^8.3.16"
+    "@thi.ng/api": "^8.9.31",
+    "@thi.ng/checks": "^3.5.5",
+    "@thi.ng/defmulti": "^3.0.34",
+    "@thi.ng/hiccup-html": "^2.5.0",
+    "@thi.ng/rdom": "^1.1.20",
+    "@thi.ng/rstream": "^8.3.18"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.42.3",
-    "esbuild": "^0.20.1",
+    "@microsoft/api-extractor": "^7.43.0",
+    "esbuild": "^0.20.2",
     "rimraf": "^5.0.5",
     "typedoc": "^0.25.12",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.3"
   },
   "keywords": [
     "browser",
@@ -97,5 +97,5 @@
     "status": "alpha",
     "year": 2023
   },
-  "gitHead": "16686bb40f7bd7a14a5d1304e353a82cb0069a1a\n"
+  "gitHead": "db5f5a5d1b223a8e6b4999d67836678038fd3560\n"
 }