@jinntec/fore 2.6.0 → 2.7.0

package/src/ui/UIElement.js

@@ -1,21 +1,143 @@
 import ForeElementMixin from '../ForeElementMixin.js';
 import { Fore } from '../fore.js';
+import { evaluateXPath, evaluateXPathToBoolean, resolveId } from '../xpath-evaluation';
+import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
 
 export class UIElement extends ForeElementMixin {
   constructor() {
     super();
+
+    this._removeEventListeners = [];
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.ondemand = this.hasAttribute('on-demand') ? true : false;
+    this.ondemand = this.hasAttribute('on-demand');
     this.wasOnDemandInitially = this.ondemand;
+
     if (this.ondemand) {
       this.addEventListener('show-control', () => {
         this.removeAttribute('on-demand');
       });
       this.addTrashIcon();
     }
+
+    const ref = this.getAttribute('ref');
+    // TODO: make this smarter, handling multiple index functions etc
+    if (ref && ref.includes('index(')) {
+      const repeatId = ref.match(/index\(['"](?<repeatId>[^'"]*)['"]\)/)?.groups?.repeatId;
+      if (repeatId) {
+        /**
+         * @type {import('./fx-repeat.js').FxRepeat}
+         */
+        const repeat = resolveId(repeatId, this, 'fx-repeat');
+        const onRepeatItemChanged = () => {
+          this.getOwnerForm().addToBatchedNotifications(this);
+        };
+        repeat.addEventListener('item-changed', onRepeatItemChanged);
+        this._removeEventListeners.push(() =>
+          repeat.removeEventListener('item-changed', onRepeatItemChanged),
+        );
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.modelItem && typeof this.modelItem.removeObserver === 'function') {
+      console.log(`[UIElement] Removing observer for ref="${this.ref}"`);
+      this.modelItem.removeObserver(this);
+    }
+
+    for (const removeEventListener of this._removeEventListeners) {
+      removeEventListener();
+    }
+  }
+  /*
+  evalInContext() {
+    this.dependencies.resetDependencies();
+    const model = this.getModel();
+    if (!model) return;
+
+    const touchedNodes = new Set();
+    const domFacade = new DependencyNotifyingDomFacade(node => touchedNodes.add(node));
+
+    const context = this.getInScopeContext();
+    const result = evaluateXPath(this.ref, context, this, domFacade);
+    this.nodeset = Array.isArray(result) ? result : [result];
+
+    touchedNodes.forEach(node => {
+      const mi = model.getModelItem(node);
+      if (mi) {
+        mi.addObserver(this);
+        console.log(`[UIElement] Dynamically observing ${mi.path} due to XPath dependency`);
+      }
+    });
+
+    // Manually evaluate predicate parts to ensure detection
+    const predicateRegex = /\[(.*?)\]/g;
+    let match;
+    while ((match = predicateRegex.exec(this.ref)) !== null) {
+      const predicate = match[1];
+      try {
+        const predicateContext = model.getDefaultInstance().getDefaultContext();
+        const predDomFacade = new DependencyNotifyingDomFacade(n => touchedNodes.add(n));
+        evaluateXPathToBoolean(predicate, predicateContext, this, predDomFacade);
+
+        touchedNodes.forEach(node => {
+          const mi = model.getModelItem(node);
+          if (mi) {
+            mi.addObserver(this);
+            console.log(`[UIElement] Observing ${mi.path} (from predicate: ${predicate})`);
+          }
+        });
+      } catch (e) {
+        console.warn('Predicate evaluation failed for dependency tracking:', predicate, e);
+      }
+    }
+  }
+*/
+
+  attachObserver() {
+    const modelItem = this.getModelItem();
+    if (!modelItem || typeof modelItem.addObserver !== 'function') return;
+
+    if (!modelItem.observers) {
+      modelItem.observers = new Set();
+    }
+    if (modelItem.observers.has(this)) {
+      // console.log(`[UIElement] Observer already registered for ref="${this.ref}"`);
+      return;
+    }
+    modelItem.addObserver(this);
+    // console.log(`[UIElement] attaching observer for ref="${this.ref}"`, this);
+
+    // if (typeof this.update === 'function') {
+    //   this.update(modelItem);
+    // }
+  }
+
+  /**
+   * Called by ModelItem when it changes
+   * @param {import('../modelitem.js').ModelItem} modelItem - The ModelItem that changed
+   */
+  update(modelItem) {
+    if (this.isBound()) {
+      // console.log('[UIElement] update()', modelItem);
+      // this.getOwnerForm().addToBatchedNotifications(modelItem);
+      this.refresh();
+    }
+  }
+
+  // init() {
+  //   throw new Error('You have to implement the method init!');
+  // }
+
+  async refresh(force) {
+    console.log(`🔄 [UIElement] refresh() called for ref="${this.ref}"`);
+  }
+
+  async refreshChildren(force) {
+    await Fore.refreshChildren(this, force);
   }
 
   activate() {
@@ -45,16 +167,11 @@ export class UIElement extends ForeElementMixin {
   }
 
   addTrashIcon() {
-    // Only show icon if explicitly marked by control-menu
-
     if (!this.closest('[show-icon]')) return;
-
-    // const wrapper = this.shadowRoot.querySelector('.wrapper');
-    // if (!wrapper || wrapper.querySelector('.trash')) return;
     const trash = this.querySelector('.trash');
     if (trash) return;
+
     const icon = document.createElement('span');
-    // icon.innerHTML = '&#128465;'; // trash icon
     icon.innerHTML = `
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round"
@@ -62,10 +179,8 @@ export class UIElement extends ForeElementMixin {
     <path d="M17.94 17.94C16.13 19.12 14.13 20 12 20C7 20 2.73 15.88 1 12C1.6 10.66 2.43 9.47 3.46 8.48M10.58 10.58C10.21 11.01 10 11.5 10 12C10 13.11 10.89 14 12 14C12.5 14 12.99 13.79 13.42 13.42M6.53 6.53C7.87 5.54 9.39 5 12 5C17 5 21.27 9.12 23 12C22.4 13.34 21.57 14.53 20.54 15.52M1 1L23 23"/>
   </svg>
 `;
-
     icon.classList.add('trash');
     icon.setAttribute('title', 'Hide');
-    // icon.setAttribute('part', 'trash');
     icon.style.cursor = 'pointer';
     icon.style.marginLeft = '0.5em';
 
@@ -81,11 +196,11 @@ export class UIElement extends ForeElementMixin {
   }
 
   removeTrashIcon() {
-    debugger;
     const icon = this.querySelector('.trash');
     if (icon) icon.remove();
   }
 }
+
 if (!customElements.get('ui-element')) {
   customElements.define('ui-element', UIElement);
 }

package/src/ui/abstract-control.js

@@ -125,6 +125,7 @@ export default class AbstractControl extends UIElement {
       if (this.modelItem instanceof ModelItem) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
+        this.attachObserver();
         if (this.hasAttribute('as') && this.getAttribute('as') === 'node') {
           // console.log('as', this.nodeset);
           // this.modelItem.value = this.nodeset;
@@ -156,9 +157,11 @@ export default class AbstractControl extends UIElement {
         /*
         this is another case that highlights the fact that an init() function might make sense in general.
          */
+        /*
         if (!this.modelItem.boundControls.includes(this)) {
           this.modelItem.boundControls.push(this);
         }
+*/
 
         // console.log('>>>>>>>> abstract refresh ', this.control);
         // this.control[this.valueProp] = this.value;
@@ -318,9 +321,11 @@ export default class AbstractControl extends UIElement {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
+        this.getWidget().setAttribute('aria-invalid', 'false');
         this.removeAttribute('invalid');
       } else {
         this.setAttribute('invalid', '');
+        this.getWidget().setAttribute('aria-invalid', 'true');
         this.removeAttribute('valid');
         // ### constraint is invalid - handle alerts
         /*

package/src/ui/fx-case.js

@@ -70,7 +70,7 @@ export class FxCase extends FxContainer {
         // calls. Save all important state first.
         const { parentNode } = this;
         const replacement = await this._loadFromSrc();
-        if(!replacement){
+        if (!replacement) {
           Fore.dispatch(this, 'error', {
             detail: {
               message: `HTML page couldn't be loaded`,
@@ -81,9 +81,21 @@ export class FxCase extends FxContainer {
         await parentNode.replaceCase(this, replacement);
       }
       const model = ownerForm.getModel();
-      model.updateModel();
-      ownerForm.refresh(true);
+      ownerForm.addToBatchedNotifications(this);
+      ownerForm.refresh(false);
     });
+    this.addEventListener('deselect', (event) => {
+      const ownerForm = this.getOwnerForm();
+      ownerForm.addToBatchedNotifications(event.target);
+    });
+  }
+
+  async refresh(force) {
+    console.log(`🔄 fx-case ${this.id} refresh`, force);
+    await super.refresh(force);
+    if (!this.isBound()) {
+      Fore.refreshChildren(this, force);
+    }
   }
 
   /**

package/src/ui/fx-container.js

@@ -78,9 +78,14 @@ export class FxContainer extends UIElement {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
+      /*
       if (this.modelItem && !this.modelItem.boundControls.includes(this)) {
         this.modelItem.boundControls.push(this);
       }
+*/
+      if (this.modelItem) {
+        this.attachObserver();
+      }
       this.handleModelItemProperties();
     }
 

package/src/ui/fx-control-menu.js

@@ -121,28 +121,37 @@ export class FxControlMenu extends XfAbstractControl {
     this.updateMenu();
   }
 
+  _getScopedContainer() {
+    const repeatItem = this.closest('fx-repeatitem');
+    if (repeatItem) return repeatItem;
+
+    if (this.selectExpr) {
+      return document.querySelector(this.selectExpr);
+    }
+
+    return null;
+  }
+
   updateMenu() {
-    const container = document.querySelector(this.selectExpr);
+    const container = this._getScopedContainer();
     if (!container) return;
 
     let targets = [];
-
+    // ✅ Include container itself if it has on-demand
     if (container.hasAttribute('on-demand')) {
-      if (container.nodeName === 'FX-REPEAT') {
-        // If it's an <fx-repeat> with on-demand, use only the container
-        targets = [container];
-      } else {
-        // If it's not <fx-repeat>, include container and inner [on-demand] targets
-        targets = [container, ...container.querySelectorAll('[on-demand]')];
-      }
-    } else {
-      // If container is not on-demand, only look for inner [on-demand]
-      targets = Array.from(container.querySelectorAll('[on-demand]'));
+      targets.push(container);
     }
+
+    // ✅ Also include any descendant [on-demand] controls if not within repeat
+    if (container.nodeName !== 'FX-REPEAT') {
+      const innerTargets = Array.from(container.querySelectorAll('[on-demand]'));
+      targets.push(...innerTargets);
+    }
+
     this._currentTargets = targets;
-    this.menuEl.innerHTML = ''; // Clear menu
+    this.menuEl.innerHTML = '';
 
-    // Find the slotted button
+    // Find the button to disable if needed
     const slot = this.shadowRoot.querySelector('slot');
     const assignedNodes = slot.assignedNodes({ flatten: true });
     const button = assignedNodes.find(

package/src/ui/fx-control.js

@@ -3,12 +3,15 @@ import {
   evaluateXPath,
   evaluateXPathToString,
   evaluateXPathToFirstNode,
+  evaluateXPathToBoolean,
 } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
 import { ModelItem } from '../modelitem.js';
 import { debounce } from '../events.js';
 import { FxModel } from '../fx-model.js';
+import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
+import { extractPredicateDependencies } from '../extract-predicate-deps.js';
 
 const WIDGETCLASS = 'widget';
 
@@ -238,6 +241,7 @@ export default class FxControl extends XfAbstractControl {
    * @param val the new value to be set
    */
   setValue(val) {
+    console.log('Control.setValue', val, 'on', this);
     const modelitem = this.getModelItem();
 
     if (this.getAttribute('class')) {
@@ -265,9 +269,11 @@ export default class FxControl extends XfAbstractControl {
     const setval = this.shadowRoot.getElementById('setvalue');
     setval.setValue(modelitem, val);
 
+    /*
     if (this.modelItem instanceof ModelItem && !this.modelItem?.boundControls.includes(this)) {
       this.modelItem.boundControls.push(this);
     }
+*/
 
     setval.actionPerformed(false);
     // this.visited = true;
@@ -287,6 +293,9 @@ export default class FxControl extends XfAbstractControl {
       });
     }
     // this.getOwnerForm().refresh();
+    const body = this.closest('body');
+    const outerfore = body.querySelector('fx-fore');
+    outerfore.refresh(true);
   }
 
   renderHTML(ref) {
@@ -496,6 +505,8 @@ export default class FxControl extends XfAbstractControl {
           imported.model = imported.querySelector('fx-model');
           imported.model.updateModel();
 
+          // Ensure initialRun is true for the first refresh
+          imported.initialRun = true;
           imported.refresh(true);
         },
         { once: true },
@@ -535,15 +546,15 @@ export default class FxControl extends XfAbstractControl {
     return this.querySelector('template');
   }
 
-  async refresh(force) {
-    // console.log('fx-control refresh', this);
+  async refresh(force = false) {
+    console.log('🔄 fx-control refresh', this);
     super.refresh(force);
     // console.log('refresh template', this.template);
     // const {widget} = this;
 
     // ### if we find a ref on control we have a 'select' control of some kind
     const widget = this.getWidget();
-    this._handleBoundWidget(widget);
+    this._handleBoundWidget(widget, force);
     this._handleDataAttributeBinding();
     Fore.refreshChildren(this, force);
   }
@@ -558,7 +569,7 @@ export default class FxControl extends XfAbstractControl {
     if (dataRefd && dataRefd.closest('fx-control') === this) {
       this.boundList = dataRefd;
       const ref = dataRefd.getAttribute('data-ref');
-      this._handleBoundWidget(dataRefd);
+      this._handleBoundWidget(dataRefd, true); //todo: revisit !!! observer
     }
   }
 
@@ -570,7 +581,8 @@ export default class FxControl extends XfAbstractControl {
    * @param widget the widget to handle
    * @private
    */
-  _handleBoundWidget(widget) {
+  _handleBoundWidget(widget, force = false) {
+    // console.log('_handleBoundWidget', widget);
     if (this.boundInitialized && this.static) return;
 
     const ref = widget.hasAttribute('ref')
@@ -581,15 +593,24 @@ export default class FxControl extends XfAbstractControl {
       // ### eval nodeset for list control
       const inscope = getInScopeContext(this, ref);
       // const nodeset = evaluateXPathToNodes(ref, inscope, this);
-      const nodeset = evaluateXPath(ref, inscope, this);
 
-      // ### clear items
-      const { children } = widget;
-      Array.from(children).forEach(child => {
-        if (child.nodeName.toLowerCase() !== 'template') {
-          child.parentNode.removeChild(child);
-        }
-      });
+      const touchedNodes = new Set();
+      const domFacade = new DependencyNotifyingDomFacade(node => touchedNodes.add(node));
+
+      const nodeset = evaluateXPath(ref, inscope, this, domFacade);
+
+      const contextNode = Array.isArray(inscope) ? inscope[0] : inscope;
+      // console.log('Extracting model', this.getModel());
+      // console.log('Extracting model inited', this.getModel().inited);
+      const model = this.getModel();
+      if (!contextNode) return;
+      // console.log('Extracting predicate deps from ref:', ref);
+      extractPredicateDependencies(
+        ref,
+        model,
+        mi => mi.addObserver(this),
+        node => model.getModelItem(node),
+      );
 
       // ### bail out when nodeset is array and empty
       if (Array.isArray(nodeset) && nodeset.length === 0) return;
@@ -597,6 +618,19 @@ export default class FxControl extends XfAbstractControl {
       // ### build the items
       const { template } = this;
       if (template) {
+        // ### clear items
+        // if (force === true || !this.boundInitialized) {
+        if (force === true) {
+          const { children } = widget;
+          Array.from(children).forEach(child => {
+            if (child.nodeName.toLowerCase() !== 'template') {
+              child.parentNode.removeChild(child);
+            }
+          });
+        } else {
+          return;
+        }
+
         // ### handle 'selection'  open and insert an empty option in that case
         if (
           this.widget.nodeName === 'SELECT' &&
@@ -656,7 +690,7 @@ export default class FxControl extends XfAbstractControl {
 
     const valueExpr = valueAttribute;
     const cutted = valueExpr.substring(1, valueExpr.length - 1);
-    const evaluated = evaluateXPathToString(cutted, node, newEntry);
+    const evaluated = evaluateXPathToString(cutted, node, this);
     newEntry.setAttribute('value', evaluated);
 
     if (this.value === evaluated) {
@@ -675,8 +709,14 @@ export default class FxControl extends XfAbstractControl {
     //  ### <<< needs rework
   }
 
+  /**
+   *
+   * @param {string} optionLabel
+   * @param {Node} node
+   * @param {HTMLElement} newEntry
+   */
   evalLabel(optionLabel, node, newEntry) {
-    const labelExpr = optionLabel.substring(1, optionLabel.length - 1);
+    const labelExpr = optionLabel.trim().substring(1, optionLabel.length - 1);
     if (!labelExpr) return;
 
     const label = evaluateXPathToString(labelExpr, node, this);

package/src/ui/fx-items.js

@@ -60,11 +60,13 @@ export class FxItems extends FxControl {
       e.preventDefault;
       e.stopPropagation();
       const items = this.querySelectorAll('[value]');
+      /*
       let target;
       if (e.target.nodeName === 'LABEL') {
         target = resolveId(e.target.getAttribute('for'), this);
         target.checked = !target.checked;
       }
+*/
 
       let val = '';
       Array.from(items).forEach(item => {
@@ -145,12 +147,16 @@ export class FxItems extends FxControl {
       evaluated = node[cutted];
     }
 
-    // adding space around value to allow matching of 'words'
-    const spaced = ` ${evaluated} `;
-    const valAttr = ` ${this.getAttribute('value')} `;
     input.value = evaluated;
     input.setAttribute('id', id);
-    if (valAttr.indexOf(spaced) !== -1) {
+    // Normalize the current value (remove newlines, tabs, excessive spaces)
+    const currentValue = (this.getAttribute('value') || '').replace(/\s+/g, ' ').trim();
+    const valueList = currentValue.split(/\s+/); // Split on whitespace
+
+    // Check if the value is in the space-separated list of values
+    // const currentValue = this.getAttribute('value') || '';
+    // const valueList = currentValue.split(/\s+/);
+    if (valueList.includes(evaluated)) {
       input.checked = true;
     }
   }