native-document 1.0.263 → 1.0.264

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.263",
+  "version": "1.0.264",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/form/field/types/RadioField.js

@@ -72,10 +72,12 @@ RadioField.prototype.constructor = RadioField;
 
 /**
  * @param {Array<{ value: *, label: NdChild, props?: GlobalAttributes }>} opts
+ * @param {() => ({value: *, label: NdChild, props?: GlobalAttributes})} optionMapper
  * @returns {this}
  */
-RadioField.prototype.options = function(opts) {
+RadioField.prototype.options = function(opts, optionMapper) {
     this.$description.options = opts;
+    this.$description.optionMapper = optionMapper;
     return this;
 };
 

package/src/core/data/ObservableObject.js

@@ -37,7 +37,7 @@ export const ObservableObject = function(target, configs = { }) {
         },
         set(value) {
             this.set(value);
-        }
+        },
     });
 };
 

package/src/ui/components/form/fields/RadioFieldRender.js

@@ -48,9 +48,11 @@ const buildOptions = ($desc, instance) => {
     };
 
     const buildOption = ($desc, option) => {
-        const optValue = option.value ?? option;
-        const optLabel = option.label ?? option;
-        const optId    = ($desc.id || $desc.name) + '-' + optValue;
+        const dataSource = $desc.optionMapper ? $desc.optionMapper(option) : option;
+        const optValue = dataSource.value ?? option;
+        const optLabel = dataSource.label ?? option;
+        const optId    = ($desc.id || $desc.name).valueOf() + '-' + optValue;
+        const $isSelected = isSelected(optValue);
 
         const input = Input({
             class:    'field-radio',
@@ -58,14 +60,14 @@ const buildOptions = ($desc, instance) => {
             id:       optId,
             name:     $desc.name,
             value:    optValue,
-            checked:  isSelected(optValue),
+            checked:  $isSelected,
             disabled: $desc.disabled,
         });
 
         input.nd.onChange(() => onSelect(optValue));
 
         if($desc.renderItem) {
-            return Div({class: 'field-radio-wrapper'}, $desc.renderItem(input, option));
+            return Div({class: 'field-radio-wrapper'}, $desc.renderItem(input, option, { $isSelected }));
         }
 
         return Div({class: 'field-radio-wrapper'}, [