@thi.ng/rdom-forms 1.0.63 → 1.1.0

package/README.md

@@ -132,7 +132,7 @@ Browser ESM import:
 
 [JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.30 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.34 KB
 
 ## Dependencies
 

package/api.d.ts

@@ -70,7 +70,7 @@ export interface Num extends Value, WithPresets<number> {
     placeholder?: StringAttrib;
     size?: number;
     step?: number | "any";
-    value?: ISubscription<number, number>;
+    value?: number | ISubscription<number, number>;
     attribs?: Partial<InputNumericAttribs>;
 }
 export interface Range extends Omit<Num, "type" | "placeholder" | "size"> {
@@ -84,7 +84,7 @@ export interface Str extends Value, WithPresets<string> {
     pattern?: string | RegExp | Predicate<string>;
     placeholder?: StringAttrib;
     size?: number;
-    value?: ISubscription<string, string>;
+    value?: string | ISubscription<string, string>;
     attribs?: Partial<InputTextAttribs>;
 }
 export interface Email extends Omit<Str, "type"> {
@@ -107,19 +107,19 @@ export interface Text extends Value {
     cols?: number;
     rows?: number;
     placeholder?: StringAttrib;
-    value?: ISubscription<string, string>;
+    value?: string | ISubscription<string, string>;
     attribs?: Partial<TextAreaAttribs>;
 }
 export interface Color extends Value, WithPresets<string> {
     type: "color";
-    value?: ISubscription<string, string>;
+    value?: string | ISubscription<string, string>;
 }
 export interface DateTime extends Value, WithPresets<string> {
     type: "dateTime";
     min?: string;
     max?: string;
     step?: number;
-    value?: ISubscription<string, string>;
+    value?: string | ISubscription<string, string>;
 }
 export interface DateVal extends Omit<DateTime, "type"> {
     type: "date";
@@ -135,7 +135,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>;
+    value?: T | ISubscription<T, T>;
     attribs?: Partial<Omit<SelectAttribs, "multiple">>;
 }
 export interface SelectItemGroup<T> {
@@ -155,7 +155,7 @@ export interface SelectNum<T extends number = number> extends Select<T> {
 }
 export interface MultiSelect<T> extends Value {
     items: (T | SelectItem<T> | SelectItemGroup<T>)[];
-    value?: ISubscription<T[], T[]>;
+    value?: T | ISubscription<T[], T[]>;
     size?: number;
     attribs?: Partial<Omit<SelectAttribs, "multiple">>;
 }
@@ -167,7 +167,7 @@ export interface MultiSelectNum<T extends number = number> extends MultiSelect<T
 }
 export interface Toggle extends Value {
     type: "toggle";
-    value?: ISubscription<boolean, boolean>;
+    value?: boolean | ISubscription<boolean, boolean>;
     attribs?: Partial<InputCheckboxAttribs>;
 }
 export interface Trigger extends Value {
@@ -188,7 +188,7 @@ export interface Reset extends Omit<Value, "required" | "readonly"> {
 }
 export interface Radio<T> extends Value {
     items: (T | SelectItem<T>)[];
-    value?: ISubscription<T, T>;
+    value?: T | ISubscription<T, T>;
     attribs?: Partial<InputRadioAttribs>;
 }
 export interface RadioNum extends Radio<number> {

package/compile.js

@@ -36,6 +36,7 @@ import {
   $inputTrigger,
   $replace
 } from "@thi.ng/rdom";
+import { isSubscriptionLike } from "@thi.ng/rstream/checks";
 const form = (attribs, ...items) => ({
   type: "form",
   attribs,
@@ -216,7 +217,7 @@ const compileForm = defmulti(
       const ctrl = checkbox(
         __attribs(
           { ...opts.typeAttribs?.toggle },
-          { onchange: $inputCheckbox($val.value) },
+          isSubscriptionLike(val.value) ? { onchange: $inputCheckbox(val.value) } : {},
           val,
           opts,
           "checked"
@@ -277,7 +278,7 @@ const compileForm = defmulti(
           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,
+          checked: isSubscriptionLike(val.value) && __useValues(opts) ? val.value.map((x) => x === item.value) : void 0,
           value: item.value
         });
         return div(
@@ -303,7 +304,11 @@ const compileForm = defmulti(
       opts,
       inputColor,
       { ...opts.typeAttribs?.color },
-      { onchange: $input($val.value) }
+      isSubscriptionLike($val.value) ? {
+        onchange: $input(
+          $val.value
+        )
+      } : {}
     ),
     file: ($val, opts) => {
       const val = $val;
@@ -338,7 +343,7 @@ const compileForm = defmulti(
           placeholder: val.placeholder,
           size: val.size
         },
-        { onchange: $inputNum(val.value) }
+        isSubscriptionLike(val.value) ? { onchange: $inputNum(val.value) } : {}
       );
     },
     range: ($val, opts) => {
@@ -353,7 +358,7 @@ const compileForm = defmulti(
               max: val.max,
               step: val.step
             },
-            { [edit]: $inputNum(val.value) },
+            isSubscriptionLike(val.value) ? { [edit]: $inputNum(val.value) } : {},
             val,
             opts
           )
@@ -361,14 +366,16 @@ const compileForm = defmulti(
       ];
       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)
+        if (isSubscriptionLike(val.value)) {
+          children.push(
+            span(
+              { ...opts.typeAttribs?.rangeLabel },
+              val.value.map(
+                isFunction(fmt) ? fmt : (x) => x.toFixed(fmt)
+              )
             )
-          )
-        );
+          );
+        }
       }
       return div(
         { ...opts.wrapperAttribs, ...val.wrapperAttribs },
@@ -394,7 +401,7 @@ const compileForm = defmulti(
           pattern: isString(val.pattern) ? val.pattern : void 0,
           size: val.size
         },
-        { [edit]: __edit(val) }
+        isSubscriptionLike(val.value) ? { [edit]: __edit(val) } : {}
       );
     },
     text: ($val, opts) => {
@@ -410,7 +417,7 @@ const compileForm = defmulti(
           rows: val.rows,
           placeholder: val.placeholder
         },
-        { [edit]: $input(val.value) }
+        isSubscriptionLike(val.value) ? { [edit]: $input(val.value) } : {}
       );
     },
     date: ($val, opts) => {
@@ -427,7 +434,7 @@ const compileForm = defmulti(
           max: val.max,
           step: val.step
         },
-        { onchange: $input(val.value) }
+        isSubscriptionLike(val.value) ? { onchange: $input(val.value) } : {}
       );
     },
     select: ($val, opts) => {
@@ -448,9 +455,9 @@ const compileForm = defmulti(
           {
             ...opts.typeAttribs?.[val.type] || opts.typeAttribs?.select
           },
-          {
+          isSubscriptionLike(val.value) ? {
             onchange: isNumeric ? $inputNum(val.value) : $input(val.value)
-          },
+          } : {},
           val,
           opts,
           false
@@ -465,14 +472,14 @@ const compileForm = defmulti(
       return div(
         { ...opts.wrapperAttribs, ...val.wrapperAttribs },
         ...__genCommon(val, opts),
-        val.value && __useValues(opts) ? $replace(val.value.map($select)) : $select()
+        isSubscriptionLike(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 sel = isSubscriptionLike(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(
@@ -492,7 +499,7 @@ const compileForm = defmulti(
           multiple: true,
           size: val.size
         },
-        {
+        isSubscriptionLike(val.value) ? {
           onchange: (e) => {
             val.value.next(
               [
@@ -500,7 +507,7 @@ const compileForm = defmulti(
               ].map(coerce)
             );
           }
-        },
+        } : {},
         false,
         ...val.items.map(
           (item) => isPlainObject(item) && "items" in item ? optGroup(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thi.ng/rdom-forms",
-	"version": "1.0.63",
+	"version": "1.1.0",
 	"description": "Data-driven declarative & extensible HTML form generation",
 	"type": "module",
 	"module": "./index.js",
@@ -44,8 +44,8 @@
 		"@thi.ng/checks": "^3.8.6",
 		"@thi.ng/defmulti": "^3.0.93",
 		"@thi.ng/hiccup-html": "^2.7.48",
-		"@thi.ng/rdom": "^1.7.79",
-		"@thi.ng/rstream": "^9.3.18"
+		"@thi.ng/rdom": "^1.7.81",
+		"@thi.ng/rstream": "^9.4.0"
 	},
 	"devDependencies": {
 		"esbuild": "^0.27.2",
@@ -99,5 +99,5 @@
 		"status": "alpha",
 		"year": 2023
 	},
-	"gitHead": "7a21075f27ba00b28a6eb77e70918a4c7f4e6e68\n"
+	"gitHead": "18e5911e6d52c86190706438b753de415379d3fa\n"
 }