native-document 1.0.295 → 1.0.296

package/package.json

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

package/src/core/data/observable-helpers/observable.is-to.js

@@ -301,6 +301,10 @@ ObservableItem.prototype.toBoolean = function () {
     return $checker(this, x => !!x);
 };
 
+ObservableItem.prototype.toNumber = function () {
+    return $checker(this, Number);
+};
+
 /**
  * Returns a derived observable that emits a string with the placeholder replaced by the current value.
  * Alias: toFormatted

package/src/core/data/observable-helpers/observable.prototypes.js

@@ -64,7 +64,7 @@ ObservableItem.prototype.is = function(callbackOrValue) {
     if(typeof callbackOrValue === 'function') {
         return new ObservableChecker(this, callbackOrValue);
     }
-    return new ObservableChecker(this, (value) => value === callbackOrValue);
+    return this.isEqualTo(callbackOrValue);
 };
 ObservableItem.prototype.select = ObservableItem.prototype.check;
 

package/src/ui/components/list/item/ListItemRender.js

@@ -25,15 +25,35 @@ export default function ListItemRender($desc, instance) {
 
     const $list = instance.$parent;
 
-    // Checkbox — réactif via ShowIf
     const selectedValues = $list.$description.selectedValues;
     const value          = $desc.value ?? instance;
     const isChecked      = selectedValues ? selectedValues.isIncludes(value) : null;
 
+
     if($list.$description?.selectable || $desc.selected) {
         const selectedSource = $desc.selected ?? isChecked;
         props.class.add('is-selected', selectedSource);
         props['aria-selected'] = selectedSource;
+
+        if(selectedSource.__$Observable) {
+            selectedSource.subscribe((isSelected) => {
+                const $values = $list.$description.selectedValues;
+                if (!$values) return;
+                const value = $desc.value ?? instance;
+
+                if(isSelected) {
+                    if(!$values.includes(value)) {
+                        if (!$list.$description.multiSelect.val()) {
+                            $values.clear();
+                        }
+                        $values.push(value);
+                    }
+                } else {
+                    $values.removeItem(value);
+                }
+            });
+        }
+
     }
 
     if ($list?.$description?.selectByCheckbox) {
@@ -48,26 +68,21 @@ export default function ListItemRender($desc, instance) {
         );
     }
 
+
+
     if ($desc.icon) {
         frontContent.push(Span({ class: 'list-item-icon' }, $desc.icon));
     }
 
     frontContent.push(buildBody($desc));
 
-    // Select indicator — réactif via isIncludes
     if ($list?.$description?.selectByClick) {
-        const selectedValues = $list.$description.selectedValues;
-        const value          = $desc.value ?? instance;
-        const isSelected     = selectedValues ? selectedValues.isIncludes(value) : null;
-
-        if (isSelected) {
-            frontContent.push(
-                Span({
-                    class: isSelected.transform((s) => 'list-item-indicator' + (s ? ' is-visible' : '')),
-                    'aria-hidden': 'true',
-                }, $desc.isSelectedIcon)
-            );
-        }
+        frontContent.push(
+            Span({
+                class: isChecked.transform((s) => 'list-item-indicator' + (s ? ' is-visible' : '')),
+                'aria-hidden': 'true',
+            }, $desc.isSelectedIcon)
+        );
     }
 
     if ($desc.trailing) {

package/types/observable.d.ts

@@ -138,6 +138,7 @@ export interface ObservableItem<T = any> {
     toTrimmed(): ObservableChecker<string>;
     toBoolean(): ObservableChecker<boolean>;
     toLiteral(template: string, placeholder?: string): ObservableChecker<string>;
+    toNumber(): ObservableChecker<number>;
     toFormatted(template: string, placeholder?: string): ObservableChecker<string>;
     toProperty<U = any>(path: string): ObservableChecker<U>;
     toLength(): ObservableChecker<number>;