native-document 1.0.286 → 1.0.288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.286",
+  "version": "1.0.288",
   "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.js

@@ -13,6 +13,7 @@ import ObservableResource from './ObservableResource';
 import {Formatters} from '../utils/formatters';
 import Ref from './Ref';
 import ObservableQuery from './ObservableQuery';
+import Slot from '../elements/anchor/Slot';
 
 /**
  *
@@ -274,6 +275,15 @@ ObservableItem.prototype.match = function(cases, fallback = null) {
     });
 };
 
+/**
+ * Wraps the current observable into a reactive UI Slot for element/node rendering.
+ *
+ * @returns {Slot}
+ */
+ObservableItem.prototype.asSlot = function() {
+    return Slot(this);
+};
+
 Observable.object = Observable.init;
 Observable.json = Observable.init;
 

package/src/core/elements/anchor/Slot.js

@@ -8,7 +8,16 @@ export default function Slot(content) {
     }
     this.$anchor = Anchor();
 
-    content && this.$anchor.setContent(content);
+    if(content) {
+        if(content.__$Observable) {
+            this.$anchor.set(content.val());
+            content.subscribe((value) => {
+                this.$anchor.set(value);
+            });
+            return;
+        }
+        this.$anchor.setContent(content);
+    }
 }
 
 

package/src/core/wrappers/ElementCreator.js

@@ -1,5 +1,7 @@
 import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from './AttributesWrapper';
 import PluginsManager from '../utils/plugins-manager';
+import Slot from '../elements/anchor/Slot';
+import Ref from '../data/Ref';
 
 let $textNodeCache = null;
 

package/src/ui/components/menu/helpers.js

@@ -125,7 +125,10 @@ export const setupInteraction = (listItem, el, submenuEl, orientation, interacti
 export function applyIsActive(instance, $description, props) {
     const root = instance.getRoot();
     if(root && root.$description.active) {
-        const isActive = root.active($description);
+        if(!(typeof root.$description.active === 'function')) {
+            return;
+        }
+        const isActive = root.$description.active($description);
         props.class.add({ 'is-active': isActive });
     }
 }

package/src/ui/components/menu/menu.css

@@ -86,6 +86,11 @@
         color: var(--menu-item-color-active);
     }
 
+    .is-active > & {
+        background: var(--menu-item-bg-selected);
+        color: var(--menu-item-color-active);
+    }
+
     .is-disabled > & {
         color: var(--menu-item-color-disabled);
         pointer-events: none;

package/types/elements.d.ts

@@ -5,6 +5,7 @@ import { NDElement } from './nd-element';
 import {AnchorAttributes,
     AudioAttributes, CanvasAttributes, DetailsAttributes, DialogAttributes, GlobalAttributes, OlAttributes,
     SourceAttributes, SvgAttributes, TrackAttributes, VideoAttributes, ThAttributes, ModAttributes, TdAttributes, TimeAttributes } from './globals';
+import {SlotInterface} from "./slot";
 
 // - Re-export all attribute types and utilities from globals
 export type {
@@ -57,6 +58,7 @@ export type ValidChild =
     | ObservableItem
     | NDElement
     | BindingHydrator
+    | SlotInterface
     | ValidChild[]
     | ((...args: any[]) => ValidChild);
 

package/types/observable.d.ts

@@ -1,6 +1,8 @@
 import { FilterResult, PredicateMap } from './filters';
 import Ref, {RefItem} from './ref';
 import {ObservableQueryInstance} from "./observable-query";
+import {ValidChild} from "./elements";
+import {SlotInterface} from "./slot";
 
 export type Unsubscribe = () => void;
 
@@ -98,6 +100,15 @@ export interface ObservableItem<T = any> {
         set?: (value: T) => any;
     }): this;
 
+    pick<A, B = null>(whenTrue: A, whenFalse?: B): ObservableChecker<A | B>;
+
+    match<R, F = null>(
+        cases: Record<string | number | symbol, R>,
+        fallback?: F
+    ): ObservableChecker<R | F>;
+
+    asSlot(initial?: ValidChild): SlotInterface;
+
     // -- comparison helpers (is*) -------------------------------------------------------------------------------------
 
     isEqualTo(value: T | ObservableItem<T>): ObservableChecker<boolean>;