native-document 1.0.263 → 1.0.265

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.263",
+  "version": "1.0.265",
   "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/i18n/service/I18nService.js

@@ -27,10 +27,18 @@ const I18nService = (function () {
 }());
 
 const tr = (key, params = {}) => {
+
     const isContainObservable = hasObservableParams(params);
-    const observable = isContainObservable
-        ? Observable.computed(() => I18nService.tr(key, getParams(params)), getObservableParams(params))
-        : Observable(I18nService.tr(key, params));
+    let observable = null;
+    if(key?.__$Observable) {
+        observable = isContainObservable
+            ? Observable.computed(() => I18nService.tr(key.val(), getParams(params)), [key, ...getObservableParams(params)])
+            : Observable.computed(() => I18nService.tr(key.val(), params), [key]);
+    } else {
+        observable = isContainObservable
+            ? Observable.computed(() => I18nService.tr(key, getParams(params)), getObservableParams(params))
+            : Observable(I18nService.tr(key, params));
+    }
 
     i18next.on('languageChanged', (lng) => {
         const data = isContainObservable ? getParams(params) : params;

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

@@ -37,7 +37,7 @@ const buildOptions = ($desc, instance) => {
         if(!$selected?.__$isObservable) {
             return false;
         }
-        return $selected.transform(v => v === optValue);
+        return $selected.transform(v => v.valueOf() === optValue?.valueOf());
     };
 
     const onSelect = (optValue) => {
@@ -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'}, [