@thi.ng/rdom-forms 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:03Z
+- **Last updated**: 2023-12-12T15:03:05Z
 - **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.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.2.0) (2023-12-11)
+
+#### 🚀 Features
+
+- update range() value label handling ([41f97d3](https://github.com/thi-ng/umbrella/commit/41f97d3))
+- add value type generics for selectXX/multiSelectXX ([55d9897](https://github.com/thi-ng/umbrella/commit/55d9897))
+- make attribs type-specifc ([5c6de7f](https://github.com/thi-ng/umbrella/commit/5c6de7f))
+
+#### 🩹 Bug fixes
+
+- fix trigger() event handler ([9faaf26](https://github.com/thi-ng/umbrella/commit/9faaf26))
+
 ## [0.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-forms@0.1.0) (2023-12-09)
 
 #### 🚀 Features

package/README.md

@@ -68,7 +68,7 @@ For Node.js REPL:
 const rdomForms = await import("@thi.ng/rdom-forms");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.13 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.18 KB
 
 ## Dependencies
 
@@ -81,13 +81,18 @@ Package sizes (brotli'd, pre-treeshake): ESM: 2.13 KB
 
 ## Usage examples
 
-One project in this repo's
+Several projects in this repo's
 [/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
-directory is using this package:
-
-| Screenshot                                                                                                          | Description                                         | Live demo                                          | Source                                                                          |
-|:--------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------|:---------------------------------------------------|:--------------------------------------------------------------------------------|
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/> | Basic usage of the declarative rdom-forms generator | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen) |
+directory are using this package:
+
+| Screenshot                                                                                                               | Description                                                                 | Live demo                                               | Source                                                                               |
+|:-------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------|:--------------------------------------------------------|:-------------------------------------------------------------------------------------|
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/big-font.png" width="240"/>          | Large ASCII font text generator using @thi.ng/rdom                          | [Demo](https://demo.thi.ng/umbrella/big-font/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/big-font)          |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/dominant-colors.png" width="240"/>   | Color palette generation via dominant color extraction from uploaded images | [Demo](https://demo.thi.ng/umbrella/dominant-colors/)   | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/dominant-colors)   |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-colormatrix.jpg" width="240"/> | Matrix-based image color adjustments                                        | [Demo](https://demo.thi.ng/umbrella/pixel-colormatrix/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-colormatrix) |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-sorting.png" width="240"/>     | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel            | [Demo](https://demo.thi.ng/umbrella/pixel-sorting/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-sorting)     |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/>      | Basic usage of the declarative rdom-forms generator                         | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen)      |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/>    | rdom & hiccup-canvas interop test                                           | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous)    |
 
 ## API
 

package/api.d.ts

@@ -1,5 +1,5 @@
-import type { Predicate } from "@thi.ng/api";
-import type { Attribs, FormAttribs, InputFileAttribs, InputRadioAttribs } from "@thi.ng/hiccup-html";
+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 { ComponentLike } from "@thi.ng/rdom";
 import type { ISubscriber, ISubscription } from "@thi.ng/rstream";
 export interface CommonAttribs {
@@ -42,6 +42,7 @@ export interface Value extends FormItem, Partial<CommonAttribs> {
     desc?: any;
     required?: boolean;
     readonly?: boolean;
+    attribs?: Partial<InputAttribs>;
 }
 export interface WithPresets<T> {
     /**
@@ -57,11 +58,11 @@ export interface Num extends Value, WithPresets<number> {
     size?: number;
     step?: number;
     value?: ISubscription<number, number>;
+    attribs?: Partial<InputNumericAttribs>;
 }
 export interface Range extends Omit<Num, "type" | "placeholder" | "size"> {
     type: "range";
-    vlabel?: boolean;
-    vlabelPrec?: number;
+    vlabel?: boolean | number | Fn<number, string>;
 }
 export interface Str extends Value, WithPresets<string> {
     type: "str";
@@ -71,6 +72,7 @@ export interface Str extends Value, WithPresets<string> {
     placeholder?: string;
     size?: number;
     value?: ISubscription<string, string>;
+    attribs?: Partial<InputTextAttribs>;
 }
 export interface Email extends Omit<Str, "type"> {
     type: "email";
@@ -93,6 +95,7 @@ export interface Text extends Value {
     rows?: number;
     placeholder?: string;
     value?: ISubscription<string, string>;
+    attribs?: Partial<TextAreaAttribs>;
 }
 export interface Color extends Value, WithPresets<string> {
     type: "color";
@@ -120,6 +123,7 @@ export interface Month extends Omit<DateTime, "type" | "list"> {
 export interface Select<T> extends Value {
     items: (T | SelectItem<T> | SelectItemGroup<T>)[];
     value?: ISubscription<T, T>;
+    attribs?: Partial<Omit<SelectAttribs, "multiple">>;
 }
 export interface SelectItemGroup<T> {
     name: string;
@@ -130,21 +134,22 @@ export interface SelectItem<T> {
     label?: string;
     desc?: string;
 }
-export interface SelectStr extends Select<string> {
+export interface SelectStr<T extends string = string> extends Select<T> {
     type: "selectStr";
 }
-export interface SelectNum extends Select<number> {
+export interface SelectNum<T extends number = number> extends Select<T> {
     type: "selectNum";
 }
 export interface MultiSelect<T> extends Value {
     items: (T | SelectItem<T> | SelectItemGroup<T>)[];
     value?: ISubscription<T[], T[]>;
     size?: number;
+    attribs?: Partial<Omit<SelectAttribs, "multiple">>;
 }
-export interface MultiSelectStr extends MultiSelect<string> {
+export interface MultiSelectStr<T extends string = string> extends MultiSelect<T> {
     type: "multiSelectStr";
 }
-export interface MultiSelectNum extends MultiSelect<number> {
+export interface MultiSelectNum<T extends number = number> extends MultiSelect<T> {
     type: "multiSelectNum";
 }
 export interface Toggle extends Value {
@@ -155,10 +160,12 @@ export interface Trigger extends Value {
     type: "trigger";
     title: string;
     value?: ISubscriber<boolean>;
+    attribs?: Partial<InputCheckboxAttribs>;
 }
 export interface Radio<T> extends Value {
     items: (T | SelectItem<T>)[];
     value?: ISubscription<T, T>;
+    attribs?: Partial<InputRadioAttribs>;
 }
 export interface RadioNum extends Radio<number> {
     type: "radioNum";
@@ -171,11 +178,13 @@ export interface FileVal extends Value {
     accept?: string[];
     capture?: InputFileAttribs["capture"];
     value?: ISubscriber<File>;
+    attribs?: Partial<InputFileAttribs>;
 }
 export interface MultiFileVal extends Value {
     type: "multiFile";
     accept?: string[];
     value?: ISubscriber<FileList>;
+    attribs?: Partial<InputFileAttribs>;
 }
 type KnownTypes = Color | Container | DateTime | DateVal | Email | FileVal | Group | Month | MultiFileVal | MultiSelectNum | MultiSelectStr | Num | Password | Phone | Range | SelectNum | SelectStr | Str | Text | Time | Toggle | Trigger | UrlVal | Week;
 /**
@@ -212,7 +221,12 @@ export interface TypeAttribs extends Record<KnownTypes["type"], Partial<Attribs>
     /**
      * Attribs for {@link range} label elements
      */
-    rangeLabelAttribs: Partial<Attribs>;
+    rangeLabel: Partial<Attribs>;
+    /**
+     * Attribs for the wrapper element of a single {@link range} widget (incl.
+     * input element and optional value label)
+     */
+    rangeWrapper: Partial<Attribs>;
     [id: string]: Partial<Attribs>;
 }
 export interface FormOpts extends CommonAttribs {
@@ -271,6 +285,18 @@ export interface BehaviorOpts {
      * @defaultValue false
      */
     radioLabelBefore: boolean;
+    /**
+     * Number of fractional digits for range sliders.
+     *
+     * @defaultValue 2
+     */
+    rangeLabelFmt: number | Fn<number, string>;
+    /**
+     * If true, the label for toggle widgets will come before the actual
+     * input element. By default, the order is reversed.
+     *
+     * @defaultValue false
+     */
     toggleLabelBefore: boolean;
 }
 export {};

package/api.js

@@ -1 +0,0 @@
-export {};

package/compile.d.ts

@@ -24,8 +24,6 @@ export declare const email: (spec: PartialSpec<Email> | ReadonlyPartialSpec<Emai
 export declare const file: (spec: PartialSpec<FileVal> | ReadonlyPartialSpec<FileVal, never>) => FileVal;
 export declare const month: (spec: PartialSpec<Month> | ReadonlyPartialSpec<Month, string>) => Month;
 export declare const multiFile: (spec: PartialSpec<MultiFileVal> | ReadonlyPartialSpec<MultiFileVal, never>) => MultiFileVal;
-export declare const multiSelectNum: (spec: PartialSpec<MultiSelectNum> | ReadonlyPartialSpec<MultiSelectNum, number>) => MultiSelectNum;
-export declare const multiSelectStr: (spec: PartialSpec<MultiSelectStr> | ReadonlyPartialSpec<MultiSelectStr, string>) => MultiSelectStr;
 export declare const num: (spec: PartialSpec<Num> | ReadonlyPartialSpec<Num, number>) => Num;
 export declare const password: (spec: PartialSpec<Password> | ReadonlyPartialSpec<Password, string>) => Password;
 export declare const phone: (spec: PartialSpec<Email> | ReadonlyPartialSpec<Email, string>) => Email;
@@ -33,8 +31,6 @@ export declare const radioNum: (spec: PartialSpec<RadioNum> | ReadonlyPartialSpe
 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 search: (spec: PartialSpec<Str> | ReadonlyPartialSpec<Str, string>) => Str;
-export declare const selectNum: (spec: PartialSpec<SelectNum> | ReadonlyPartialSpec<SelectNum, number>) => SelectNum;
-export declare const selectStr: (spec: PartialSpec<SelectStr> | ReadonlyPartialSpec<SelectStr, string>) => SelectStr;
 export declare const str: (spec: PartialSpec<Str> | ReadonlyPartialSpec<Str, string>) => Str;
 export declare const text: (spec: PartialSpec<Text> | ReadonlyPartialSpec<Text, string>) => Text;
 export declare const time: (spec: PartialSpec<Time> | ReadonlyPartialSpec<Time, string>) => Time;
@@ -42,6 +38,10 @@ export declare const toggle: (spec: PartialSpec<Toggle> | ReadonlyPartialSpec<To
 export declare const trigger: (spec: PartialSpec<Trigger> | ReadonlyPartialSpec<Trigger, string>) => Trigger;
 export declare const url: (spec: PartialSpec<UrlVal> | ReadonlyPartialSpec<UrlVal, string>) => UrlVal;
 export declare const week: (spec: PartialSpec<Week> | ReadonlyPartialSpec<Week, string>) => Week;
+export declare const selectNum: <T extends number = number>(spec: PartialSpec<SelectNum<T>> | ReadonlyPartialSpec<SelectNum<T>, string>) => SelectNum<T>;
+export declare const selectStr: <T extends string = string>(spec: PartialSpec<SelectStr<T>> | ReadonlyPartialSpec<SelectStr<T>, string>) => SelectStr<T>;
+export declare const multiSelectNum: <T extends number = number>(spec: PartialSpec<MultiSelectNum<T>> | ReadonlyPartialSpec<MultiSelectNum<T>, string>) => MultiSelectNum<T>;
+export declare const multiSelectStr: <T extends string = string>(spec: PartialSpec<MultiSelectStr<T>> | ReadonlyPartialSpec<MultiSelectStr<T>, string>) => MultiSelectStr<T>;
 /**
  * Compiles given {@link FormItem} spec into a hiccup/rdom component, using
  * provided options to customize attributes and behaviors.

package/compile.js

@@ -4,136 +4,157 @@ import { isPlainObject } from "@thi.ng/checks/is-plain-object";
 import { isString } from "@thi.ng/checks/is-string";
 import { defmulti } from "@thi.ng/defmulti/defmulti";
 import { div } from "@thi.ng/hiccup-html/blocks";
-import { form as $form, button, checkbox, fieldset, inputColor, inputFile, inputNumber, inputRange, inputText, label, legend, optGroup, option, radio, select, textArea, } from "@thi.ng/hiccup-html/forms";
+import {
+  form as $form,
+  button,
+  checkbox,
+  fieldset,
+  inputColor,
+  inputFile,
+  inputNumber,
+  inputRange,
+  inputText,
+  label,
+  legend,
+  optGroup,
+  option,
+  radio,
+  select,
+  textArea
+} from "@thi.ng/hiccup-html/forms";
 import { span } from "@thi.ng/hiccup-html/inline";
 import { datalist } from "@thi.ng/hiccup-html/lists";
-import { $attribs, $input, $inputCheckbox, $inputFile, $inputFiles, $inputNum, $inputTrigger, $replace, } from "@thi.ng/rdom";
-export const form = (attribs, ...items) => ({
-    type: "form",
-    attribs,
-    items,
+import {
+  $attribs,
+  $input,
+  $inputCheckbox,
+  $inputFile,
+  $inputFiles,
+  $inputNum,
+  $inputTrigger,
+  $replace
+} from "@thi.ng/rdom";
+const form = (attribs, ...items) => ({
+  type: "form",
+  attribs,
+  items
 });
-export const container = (attribs, ...items) => ({
-    type: "container",
-    attribs,
-    items,
+const container = (attribs, ...items) => ({
+  type: "container",
+  attribs,
+  items
 });
-export const group = (spec, ...items) => ({
-    ...spec,
-    type: "group",
-    items,
+const group = (spec, ...items) => ({
+  ...spec,
+  type: "group",
+  items
 });
-export const custom = (body) => ({
-    type: "custom",
-    body,
+const custom = (body) => ({
+  type: "custom",
+  body
 });
 let __nextID = 0;
 const $ = (type, defaults) => (spec) => ({
-    id: spec.id || `${type}-${__nextID++}`,
-    type,
-    ...defaults,
-    ...spec,
+  id: spec.id || `${type}-${__nextID++}`,
+  type,
+  ...defaults,
+  ...spec
 });
-export const color = $("color");
-export const date = $("date");
-export const dateTime = $("dateTime");
-export const email = $("email", { autocomplete: true });
-export const file = $("file");
-export const month = $("month");
-export const multiFile = $("multiFile");
-export const multiSelectNum = $("multiSelectNum");
-export const multiSelectStr = $("multiSelectStr");
-export const num = $("num");
-export const password = $("password", { autocomplete: true });
-export const phone = $("tel", { autocomplete: true });
-export const radioNum = $("radioNum");
-export const radioStr = $("radioStr");
-export const range = $("range");
-export const search = $("search");
-export const selectNum = $("selectNum");
-export const selectStr = $("selectStr");
-export const str = $("str");
-export const text = $("text");
-export const time = $("time");
-export const toggle = $("toggle");
-export const trigger = $("trigger");
-export const url = $("url");
-export const week = $("week");
-/** @internal */
+const color = $("color");
+const date = $("date");
+const dateTime = $("dateTime");
+const email = $("email", { autocomplete: true });
+const file = $("file");
+const month = $("month");
+const multiFile = $("multiFile");
+const num = $("num");
+const password = $("password", { autocomplete: true });
+const phone = $("tel", { autocomplete: true });
+const radioNum = $("radioNum");
+const radioStr = $("radioStr");
+const range = $("range");
+const search = $("search");
+const str = $("str");
+const text = $("text");
+const time = $("time");
+const toggle = $("toggle");
+const trigger = $("trigger");
+const url = $("url");
+const week = $("week");
+const selectNum = (spec) => $("selectNum")(spec);
+const selectStr = (spec) => $("selectStr")(spec);
+const multiSelectNum = (spec) => $("multiSelectNum")(spec);
+const multiSelectStr = (spec) => $("multiSelectStr")(spec);
 const __genID = (id, opts) => opts.prefix ? opts.prefix + id : id;
-/** @internal */
-const __genLabel = (x, opts) => label({ ...opts.labelAttribs, ...x.labelAttribs, for: __genID(x.id, opts) }, x.label ?? x.id, x.desc ? span({ ...opts.descAttribs, ...x.descAttribs }, x.desc) : null);
-/** @internal */
+const __genLabel = (x, opts) => label(
+  { ...opts.labelAttribs, ...x.labelAttribs, for: __genID(x.id, opts) },
+  x.label ?? 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 })));
-/** @internal */
 const __genCommon = (val, opts) => {
-    const res = [];
-    if (val.label !== false && opts.behaviors?.labels !== false) {
-        res.push(__genLabel(val, opts));
-    }
-    if (val.list) {
-        res.push(__genList(__genID(val.id, opts), val.list));
-    }
-    return res;
+  const res = [];
+  if (val.label !== false && opts.behaviors?.labels !== false) {
+    res.push(__genLabel(val, opts));
+  }
+  if (val.list) {
+    res.push(__genList(__genID(val.id, opts), val.list));
+  }
+  return res;
 };
-/** @internal */
 const __attribs = (attribs, events, val, opts, value = "value") => {
-    const id = __genID(val.id, opts);
-    Object.assign(attribs, {
-        id,
-        name: val.name || val.id,
-        list: val.list ? id + "--list" : undefined,
-        required: val.required,
-        readonly: val.readonly,
-    }, val.attribs);
-    if (__useValues(opts)) {
-        if (!val.readonly) {
-            Object.assign(attribs, events);
-        }
-        if (value !== false) {
-            attribs[value] = val.value;
-        }
+  const id = __genID(val.id, opts);
+  Object.assign(
+    attribs,
+    {
+      id,
+      name: val.name || val.id,
+      list: val.list ? id + "--list" : void 0,
+      required: val.required,
+      readonly: val.readonly
+    },
+    val.attribs
+  );
+  if (__useValues(opts)) {
+    if (!val.readonly) {
+      Object.assign(attribs, events);
+    }
+    if (value !== false) {
+      attribs[value] = val.value;
     }
-    return attribs;
+  }
+  return attribs;
 };
-/** @internal */
-const __component = (val, opts, el, attribs, events, value = "value", ...body) => div({ ...opts.wrapperAttribs, ...val.wrapperAttribs }, ...__genCommon(val, opts), 
-// @ts-ignore extra args
-el(__attribs(attribs, events, val, opts, value), ...body));
-/** @internal */
+const __component = (val, opts, el, attribs, events, value = "value", ...body) => div(
+  { ...opts.wrapperAttribs, ...val.wrapperAttribs },
+  ...__genCommon(val, opts),
+  // @ts-ignore extra args
+  el(__attribs(attribs, events, val, opts, value), ...body)
+);
 const __edit = (val) => {
-    if (val.pattern) {
-        let match;
-        if (isFunction(val.pattern)) {
-            match = val.pattern;
-        }
-        else {
-            const re = isString(val.pattern)
-                ? new RegExp(val.pattern)
-                : val.pattern;
-            match = (x) => re.test(x);
-        }
-        return (e) => {
-            const target = e.target;
-            const body = target.value;
-            const ok = match(body);
-            if (ok)
-                val.value.next(body);
-            $attribs(target, { invalid: !ok });
-        };
+  if (val.pattern) {
+    let match;
+    if (isFunction(val.pattern)) {
+      match = val.pattern;
+    } else {
+      const re = isString(val.pattern) ? new RegExp(val.pattern) : val.pattern;
+      match = (x) => re.test(x);
     }
-    return $input(val.value);
+    return (e) => {
+      const target = e.target;
+      const body = target.value;
+      const ok = match(body);
+      if (ok)
+        val.value.next(body);
+      $attribs(target, { invalid: !ok });
+    };
+  }
+  return $input(val.value);
 };
 const __useValues = (opts) => opts.behaviors?.values !== false;
-/**
- * Compiles given {@link FormItem} spec into a hiccup/rdom component, using
- * provided options to customize attributes and behaviors.
- *
- * @remarks
- * This function is polymorphic and dynamically extensible for new/custom form
- * element types. See thi.ng/defmulti readme for instructions.
- */
-export const compileForm = defmulti((x) => x.type, {
+const compileForm = defmulti(
+  (x) => x.type,
+  {
     multiFile: "file",
     dateTime: "date",
     time: "date",
@@ -149,205 +170,353 @@ export const compileForm = defmulti((x) => x.type, {
     selectNum: "select",
     selectStr: "select",
     multiSelectNum: "multiSelect",
-    multiSelectStr: "multiSelect",
-}, {
+    multiSelectStr: "multiSelect"
+  },
+  {
     form: ($val, opts) => {
-        const val = $val;
-        return $form({ ...opts.typeAttribs?.form, ...val.attribs }, ...val.items.map((x) => compileForm(x, opts)));
+      const val = $val;
+      return $form(
+        { ...opts.typeAttribs?.form, ...val.attribs },
+        ...val.items.map((x) => compileForm(x, opts))
+      );
     },
     container: ($val, opts) => {
-        const val = $val;
-        return div({ ...opts.typeAttribs?.container, ...val.attribs }, ...val.items.map((x) => compileForm(x, opts)));
+      const val = $val;
+      return div(
+        { ...opts.typeAttribs?.container, ...val.attribs },
+        ...val.items.map((x) => compileForm(x, opts))
+      );
     },
     group: ($val, opts) => {
-        const val = $val;
-        const children = [];
-        if (val.label) {
-            children.push(legend({ ...opts.typeAttribs?.groupLabel }, val.label));
-        }
-        return fieldset({ ...opts.typeAttribs?.group, ...val.attribs }, ...children, ...val.items.map((x) => compileForm(x, opts)));
+      const val = $val;
+      const children = [];
+      if (val.label) {
+        children.push(
+          legend({ ...opts.typeAttribs?.groupLabel }, val.label)
+        );
+      }
+      return fieldset(
+        { ...opts.typeAttribs?.group, ...val.attribs },
+        ...children,
+        ...val.items.map((x) => compileForm(x, opts))
+      );
     },
     custom: (val) => val.body,
     toggle: ($val, opts) => {
-        const val = $val;
-        const label = __genLabel(val, opts);
-        const ctrl = checkbox(__attribs({ ...opts.typeAttribs?.toggle }, { onchange: $inputCheckbox($val.value) }, val, opts, "checked"));
-        return div({ ...opts.wrapperAttribs, ...val.wrapperAttribs }, ...(opts.behaviors?.toggleLabelBefore !== false
-            ? [label, ctrl]
-            : [ctrl, label]));
+      const val = $val;
+      const label2 = __genLabel(val, opts);
+      const ctrl = checkbox(
+        __attribs(
+          { ...opts.typeAttribs?.toggle },
+          { onchange: $inputCheckbox($val.value) },
+          val,
+          opts,
+          "checked"
+        )
+      );
+      return div(
+        { ...opts.wrapperAttribs, ...val.wrapperAttribs },
+        ...opts.behaviors?.toggleLabelBefore !== false ? [label2, ctrl] : [ctrl, label2]
+      );
     },
-    trigger: ($val, opts) => __component($val, opts, button, { ...opts.typeAttribs?.trigger }, { onchange: $inputTrigger($val.value) }, false, $val.title),
+    trigger: ($val, opts) => __component(
+      $val,
+      opts,
+      button,
+      { ...opts.typeAttribs?.trigger },
+      { onclick: $inputTrigger($val.value) },
+      false,
+      $val.title
+    ),
     radio: ($val, opts) => {
-        const val = $val;
-        const labelAttribs = {
-            ...opts.typeAttribs?.radioItemLabel,
-            ...val.labelAttribs,
-        };
-        const $option = ($item) => {
-            const item = isPlainObject($item) ? $item : { value: $item };
-            const id = val.id + "-" + item.value;
-            const label = __genLabel({
-                id,
-                label: item.label || item.value,
-                desc: item.desc,
-                labelAttribs,
-                descAttribs: val.descAttribs,
-            }, opts);
-            const ctrl = radio({
-                ...opts.typeAttribs?.radio,
-                ...val.attribs,
-                onchange: val.value && __useValues(opts)
-                    ? () => val.value.next(item.value)
-                    : undefined,
-                id: __genID(id, opts),
-                name: val.name || val.id,
-                checked: val.value && __useValues(opts)
-                    ? val.value.map((x) => x === item.value)
-                    : undefined,
-                value: item.value,
-            });
-            return div({ ...opts.typeAttribs?.radioItem }, ...(opts.behaviors?.radioLabelBefore
-                ? [label, ctrl]
-                : [ctrl, label]));
-        };
-        return div({
-            ...opts.wrapperAttribs,
-            ...opts.typeAttribs?.radioWrapper,
-            ...val.wrapperAttribs,
-        }, ...__genCommon(val, opts), div({ ...opts.typeAttribs?.radioItems }, ...val.items.map($option)));
+      const val = $val;
+      const labelAttribs = {
+        ...opts.typeAttribs?.radioItemLabel,
+        ...val.labelAttribs
+      };
+      const $option = ($item) => {
+        const item = isPlainObject($item) ? $item : { value: $item };
+        const id = val.id + "-" + item.value;
+        const label2 = __genLabel(
+          {
+            id,
+            label: item.label || item.value,
+            desc: item.desc,
+            labelAttribs,
+            descAttribs: val.descAttribs
+          },
+          opts
+        );
+        const ctrl = radio({
+          ...opts.typeAttribs?.radio,
+          ...val.attribs,
+          onchange: val.value && __useValues(opts) ? () => val.value.next(item.value) : void 0,
+          id: __genID(id, opts),
+          name: val.name || val.id,
+          checked: val.value && __useValues(opts) ? val.value.map((x) => x === item.value) : void 0,
+          value: item.value
+        });
+        return div(
+          { ...opts.typeAttribs?.radioItem },
+          ...opts.behaviors?.radioLabelBefore ? [label2, ctrl] : [ctrl, label2]
+        );
+      };
+      return div(
+        {
+          ...opts.wrapperAttribs,
+          ...opts.typeAttribs?.radioWrapper,
+          ...val.wrapperAttribs
+        },
+        ...__genCommon(val, opts),
+        div(
+          { ...opts.typeAttribs?.radioItems },
+          ...val.items.map($option)
+        )
+      );
     },
-    color: ($val, opts) => __component($val, opts, inputColor, { ...opts.typeAttribs?.color }, { onchange: $input($val.value) }),
+    color: ($val, opts) => __component(
+      $val,
+      opts,
+      inputColor,
+      { ...opts.typeAttribs?.color },
+      { onchange: $input($val.value) }
+    ),
     file: ($val, opts) => {
-        const val = $val;
-        const isMulti = val.id.startsWith("multi");
-        return __component(val, opts, inputFile, {
-            ...opts.typeAttribs?.num,
-            accept: val.accept,
-            capture: val.capture,
-            multiple: isMulti,
-        }, {
-            onchange: isMulti
-                ? $inputFiles($val.value)
-                : $inputFile(val.value),
-        }, false);
+      const val = $val;
+      const isMulti = val.id.startsWith("multi");
+      return __component(
+        val,
+        opts,
+        inputFile,
+        {
+          ...opts.typeAttribs?.num,
+          accept: val.accept,
+          capture: val.capture,
+          multiple: isMulti
+        },
+        {
+          onchange: isMulti ? $inputFiles($val.value) : $inputFile(val.value)
+        },
+        false
+      );
     },
     num: ($val, opts) => {
-        const val = $val;
-        return __component(val, opts, inputNumber, {
-            ...opts.typeAttribs?.num,
-            min: val.min,
-            max: val.max,
-            step: val.step,
-            placeholder: val.placeholder,
-            size: val.size,
-        }, { onchange: $inputNum(val.value) });
+      const val = $val;
+      return __component(
+        val,
+        opts,
+        inputNumber,
+        {
+          ...opts.typeAttribs?.num,
+          min: val.min,
+          max: val.max,
+          step: val.step,
+          placeholder: val.placeholder,
+          size: val.size
+        },
+        { onchange: $inputNum(val.value) }
+      );
     },
     range: ($val, opts) => {
-        const val = $val;
-        const edit = opts.behaviors?.rangeOnInput === false ? "onchange" : "oninput";
-        return div({ ...opts.wrapperAttribs, ...val.wrapperAttribs }, ...__genCommon(val, opts), div({}, inputRange(__attribs({
-            ...opts.typeAttribs?.range,
-            min: val.min,
-            max: val.max,
-            step: val.step,
-        }, { [edit]: $inputNum(val.value) }, val, opts)), val.value && val.vlabel !== false && __useValues(opts)
-            ? span({ ...opts.typeAttribs?.rangeLabel }, val.value.map((x) => x.toFixed(val.vlabelPrec ?? 3)))
-            : undefined));
+      const val = $val;
+      const edit = opts.behaviors?.rangeOnInput === false ? "onchange" : "oninput";
+      const children = [
+        inputRange(
+          __attribs(
+            {
+              ...opts.typeAttribs?.range,
+              min: val.min,
+              max: val.max,
+              step: val.step
+            },
+            { [edit]: $inputNum(val.value) },
+            val,
+            opts
+          )
+        )
+      ];
+      if (val.value && val.vlabel !== false && __useValues(opts)) {
+        const fmt = val.vlabel === true || val.vlabel === void 0 ? opts.behaviors?.rangeLabelFmt ?? 2 : val.vlabel;
+        children.push(
+          span(
+            { ...opts.typeAttribs?.rangeLabel },
+            val.value.map(
+              isFunction(fmt) ? fmt : (x) => x.toFixed(fmt)
+            )
+          )
+        );
+      }
+      return div(
+        { ...opts.wrapperAttribs, ...val.wrapperAttribs },
+        ...__genCommon(val, opts),
+        div({ ...opts.typeAttribs?.rangeWrapper }, ...children)
+      );
     },
     str: ($val, opts) => {
-        const val = $val;
-        const type = { dateTime: "datetime-local" }[$val.type] ||
-            ($val.type !== "str" ? $val.type : "text");
-        const edit = opts.behaviors?.strOnInput === false ? "onchange" : "oninput";
-        return __component(val, opts, inputText, {
-            ...(opts.typeAttribs?.[val.type] || opts.typeAttribs?.str),
-            type,
-            autocomplete: val.autocomplete,
-            minlength: val.min,
-            maxlength: val.max,
-            placeholder: val.placeholder,
-            pattern: isString(val.pattern) ? val.pattern : undefined,
-            size: val.size,
-        }, { [edit]: __edit(val) });
+      const val = $val;
+      const type = { dateTime: "datetime-local" }[$val.type] || ($val.type !== "str" ? $val.type : "text");
+      const edit = opts.behaviors?.strOnInput === false ? "onchange" : "oninput";
+      return __component(
+        val,
+        opts,
+        inputText,
+        {
+          ...opts.typeAttribs?.[val.type] || opts.typeAttribs?.str,
+          type,
+          autocomplete: val.autocomplete,
+          minlength: val.min,
+          maxlength: val.max,
+          placeholder: val.placeholder,
+          pattern: isString(val.pattern) ? val.pattern : void 0,
+          size: val.size
+        },
+        { [edit]: __edit(val) }
+      );
     },
     text: ($val, opts) => {
-        const val = $val;
-        const edit = opts.behaviors?.textOnInput === false ? "onchange" : "oninput";
-        return __component(val, opts, textArea, {
-            ...opts.typeAttribs?.text,
-            cols: val.cols,
-            rows: val.rows,
-            placeholder: val.placeholder,
-        }, { [edit]: $input(val.value) });
+      const val = $val;
+      const edit = opts.behaviors?.textOnInput === false ? "onchange" : "oninput";
+      return __component(
+        val,
+        opts,
+        textArea,
+        {
+          ...opts.typeAttribs?.text,
+          cols: val.cols,
+          rows: val.rows,
+          placeholder: val.placeholder
+        },
+        { [edit]: $input(val.value) }
+      );
     },
     date: ($val, opts) => {
-        const val = $val;
-        const type = { dateTime: "datetime-local" }[$val.type] || $val.type;
-        return __component(val, opts, inputText, {
-            ...(opts.typeAttribs?.[$val.type] ||
-                opts.typeAttribs?.date),
-            type,
-            min: val.min,
-            max: val.max,
-            step: val.step,
-        }, { onchange: $input(val.value) });
+      const val = $val;
+      const type = { dateTime: "datetime-local" }[$val.type] || $val.type;
+      return __component(
+        val,
+        opts,
+        inputText,
+        {
+          ...opts.typeAttribs?.[$val.type] || opts.typeAttribs?.date,
+          type,
+          min: val.min,
+          max: val.max,
+          step: val.step
+        },
+        { onchange: $input(val.value) }
+      );
     },
     select: ($val, opts) => {
-        const val = $val;
-        const isNumeric = val.type.endsWith("Num");
-        const $option = ($item, sel) => {
-            const item = isPlainObject($item) ? $item : { value: $item };
-            return option({
-                value: item.value,
-                selected: sel === item.value,
-            }, item.label || item.value);
-        };
-        const $select = (sel) => select(__attribs({
-            ...(opts.typeAttribs?.[val.type] ||
-                opts.typeAttribs?.select),
-        }, {
-            onchange: isNumeric
-                ? $inputNum(val.value)
-                : $input(val.value),
-        }, val, opts, false), ...val.items.map((item) => isPlainObject(item) && "items" in item
-            ? optGroup({ label: item.name }, ...item.items.map((i) => $option(i, sel)))
-            : $option(item, sel)));
-        return div({ ...opts.wrapperAttribs, ...val.wrapperAttribs }, ...__genCommon(val, opts), val.value && __useValues(opts)
-            ? $replace(val.value.map($select))
-            : $select());
+      const val = $val;
+      const isNumeric = val.type.endsWith("Num");
+      const $option = ($item, sel) => {
+        const item = isPlainObject($item) ? $item : { value: $item };
+        return option(
+          {
+            value: item.value,
+            selected: sel === item.value
+          },
+          item.label || item.value
+        );
+      };
+      const $select = (sel) => select(
+        __attribs(
+          {
+            ...opts.typeAttribs?.[val.type] || opts.typeAttribs?.select
+          },
+          {
+            onchange: isNumeric ? $inputNum(val.value) : $input(val.value)
+          },
+          val,
+          opts,
+          false
+        ),
+        ...val.items.map(
+          (item) => isPlainObject(item) && "items" in item ? optGroup(
+            { label: item.name },
+            ...item.items.map((i) => $option(i, sel))
+          ) : $option(item, sel)
+        )
+      );
+      return div(
+        { ...opts.wrapperAttribs, ...val.wrapperAttribs },
+        ...__genCommon(val, opts),
+        val.value && __useValues(opts) ? $replace(val.value.map($select)) : $select()
+      );
     },
     multiSelect: ($val, opts) => {
-        const val = $val;
-        const isNumeric = val.type.endsWith("Num");
-        const coerce = isNumeric
-            ? (x) => parseFloat(x.value)
-            : (x) => x.value;
-        const sel = val.value && __useValues(opts)
-            ? val.value.map((x) => (isArray(x) ? x : [x]))
-            : null;
-        const $option = ($item) => {
-            const item = isPlainObject($item) ? $item : { value: $item };
-            return option({
-                value: item.value,
-                selected: sel
-                    ? sel.map(($sel) => $sel.includes(item.value))
-                    : false,
-            }, item.label || item.value);
-        };
-        return __component(val, opts, select, {
-            ...(opts.typeAttribs?.[val.type] ||
-                opts.typeAttribs?.multiSelect),
-            multiple: true,
-            size: val.size,
-        }, {
-            onchange: (e) => {
-                val.value.next([
-                    ...e.target
-                        .selectedOptions,
-                ].map(coerce));
-            },
-        }, false, ...val.items.map((item) => isPlainObject(item) && "items" in item
-            ? optGroup({ label: item.name }, ...item.items.map($option))
-            : $option(item)));
-    },
-});
+      const val = $val;
+      const isNumeric = val.type.endsWith("Num");
+      const coerce = isNumeric ? (x) => parseFloat(x.value) : (x) => x.value;
+      const sel = val.value && __useValues(opts) ? val.value.map((x) => isArray(x) ? x : [x]) : null;
+      const $option = ($item) => {
+        const item = isPlainObject($item) ? $item : { value: $item };
+        return option(
+          {
+            value: item.value,
+            selected: sel ? sel.map(($sel) => $sel.includes(item.value)) : false
+          },
+          item.label || item.value
+        );
+      };
+      return __component(
+        val,
+        opts,
+        select,
+        {
+          ...opts.typeAttribs?.[val.type] || opts.typeAttribs?.multiSelect,
+          multiple: true,
+          size: val.size
+        },
+        {
+          onchange: (e) => {
+            val.value.next(
+              [
+                ...e.target.selectedOptions
+              ].map(coerce)
+            );
+          }
+        },
+        false,
+        ...val.items.map(
+          (item) => isPlainObject(item) && "items" in item ? optGroup(
+            { label: item.name },
+            ...item.items.map($option)
+          ) : $option(item)
+        )
+      );
+    }
+  }
+);
+export {
+  color,
+  compileForm,
+  container,
+  custom,
+  date,
+  dateTime,
+  email,
+  file,
+  form,
+  group,
+  month,
+  multiFile,
+  multiSelectNum,
+  multiSelectStr,
+  num,
+  password,
+  phone,
+  radioNum,
+  radioStr,
+  range,
+  search,
+  selectNum,
+  selectStr,
+  str,
+  text,
+  time,
+  toggle,
+  trigger,
+  url,
+  week
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom-forms",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Data-driven declarative & extensible HTML form generation",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,22 +35,34 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/checks": "^3.4.11",
-    "@thi.ng/defmulti": "^3.0.9",
-    "@thi.ng/hiccup-html": "^2.3.0",
-    "@thi.ng/rdom": "^0.13.3",
-    "@thi.ng/rstream": "^8.2.13"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/checks": "^3.4.12",
+    "@thi.ng/defmulti": "^3.0.10",
+    "@thi.ng/hiccup-html": "^2.3.1",
+    "@thi.ng/rdom": "^0.13.4",
+    "@thi.ng/rstream": "^8.2.14"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
     "typescript": "^5.3.2"
   },
   "keywords": [
-    "typescript"
+    "browser",
+    "component",
+    "declarative",
+    "dom",
+    "form",
+    "hiccup",
+    "html",
+    "rdom",
+    "rstream",
+    "reactive",
+    "typescript",
+    "ui"
   ],
   "publishConfig": {
     "access": "public"
@@ -83,5 +97,5 @@
     "status": "alpha",
     "year": 2023
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "22e36fa838e5431d40165384918b395603bbd92f\n"
 }