@jinntec/fore 2.5.0 → 2.7.0

package/src/ui/UIElement.js

@@ -0,0 +1,206 @@
+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');
+    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() {
+    console.log('UIElement.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    if (this.isBound()) {
+      this.refresh(true);
+    }
+    Fore.dispatch(this, 'show-group', {});
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === 'on-demand') {
+      this.ondemand = newValue !== null;
+      if (!newValue && !this.wasOnDemandInitially) {
+        this.removeTrashIcon();
+      } else {
+        this.wasOnDemandInitially = true;
+        this.addTrashIcon();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ['on-demand'];
+  }
+
+  addTrashIcon() {
+    if (!this.closest('[show-icon]')) return;
+    const trash = this.querySelector('.trash');
+    if (trash) return;
+
+    const icon = document.createElement('span');
+    icon.innerHTML = `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    <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.style.cursor = 'pointer';
+    icon.style.marginLeft = '0.5em';
+
+    icon.addEventListener('click', e => {
+      e.stopPropagation();
+      this.setAttribute('on-demand', 'true');
+      this.style.display = 'none';
+      document.dispatchEvent(new CustomEvent('update-control-menu'));
+      Fore.dispatch(this, 'hide-control', {});
+    });
+
+    this.appendChild(icon);
+  }
+
+  removeTrashIcon() {
+    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

@@ -1,9 +1,9 @@
 import '../fx-model.js';
-import ForeElementMixin from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import { UIElement } from './UIElement.js';
 
 function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
   if (oldNodeValue === null) {
@@ -13,7 +13,7 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
   if the oldControlValue is null we know the widget is used for the first time and is not considered
   a value change.
   */
-  if(oldControlValue === null) return false;
+  if (oldControlValue === null) return false;
 
   if (newControlValue && oldControlValue && newControlValue.nodeType && oldControlValue.nodeType) {
     return newControlValue.outerHTML !== oldControlValue.outerHTML;
@@ -31,7 +31,7 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
  * is a general base class for control elements.
  *
  */
-export default class AbstractControl extends ForeElementMixin {
+export default class AbstractControl extends UIElement {
   constructor() {
     super();
     this.value = null;
@@ -41,6 +41,7 @@ export default class AbstractControl extends ForeElementMixin {
     this.widget = null;
     this.visited = false;
     this.force = false;
+    this.ondemand = false;
     // this.attachShadow({ mode: 'open' });
   }
 
@@ -54,11 +55,13 @@ export default class AbstractControl extends ForeElementMixin {
    */
   async refresh(force) {
     if (force) this.force = true;
-    // console.log('### AbstractControl.refresh on : ', this);
 
     // Save the old value of this control. this may be the stringified version, contrast to the node in `nodeset`
     const oldValue = this.value;
 
+    // if (this.ondemand && !this.value) return;
+    // console.log('### AbstractControl.refresh on : ', this);
+
     // if(this.repeated) return
     if (this.isNotBound()) return;
 
@@ -122,6 +125,7 @@ export default class AbstractControl extends ForeElementMixin {
       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;
@@ -153,9 +157,11 @@ export default class AbstractControl extends ForeElementMixin {
         /*
         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;
@@ -170,14 +176,14 @@ export default class AbstractControl extends ForeElementMixin {
         // if oldVal is null we haven't received a concrete value yet
 
         if (!(this.localName === 'fx-control' || this.localName === 'fx-upload')) return;
-        if (isDifferent(this.oldVal,  oldValue, this.value)) {
+        if (isDifferent(this.oldVal, oldValue, this.value)) {
           const model = this.getModel();
           Fore.dispatch(this, 'value-changed', {
             path: this.modelItem.path,
             value: this.modelItem.value,
             oldvalue: oldValue,
-            instanceId:this.modelItem.instanceId,
-            foreId:this.getOwnerForm().id
+            instanceId: this.modelItem.instanceId,
+            foreId: this.getOwnerForm().id,
           });
         }
       }
@@ -315,9 +321,11 @@ export default class AbstractControl extends ForeElementMixin {
         // 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

@@ -1,12 +1,12 @@
 import '../fx-model.js';
-import ForeElementMixin from '../ForeElementMixin.js';
+import { UIElement } from './UIElement.js';
 
 /**
  * `fx-container` -
  * is a general class for container elements.
  *
  */
-export class FxContainer extends ForeElementMixin {
+export class FxContainer extends UIElement {
   static get properties() {
     return {
       ...super.properties,
@@ -24,6 +24,8 @@ export class FxContainer extends ForeElementMixin {
   }
 
   connectedCallback() {
+    super.connectedCallback();
+
     this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
     const style = `
         :host {
@@ -41,7 +43,7 @@ export class FxContainer extends ForeElementMixin {
             </style>
             ${html}
     `;
-    if(this.ref !== ''){
+    if (this.ref !== '') {
       this.getOwnerForm().registerLazyElement(this);
     }
 
@@ -76,9 +78,14 @@ export class FxContainer extends ForeElementMixin {
     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

@@ -0,0 +1,207 @@
+import XfAbstractControl from './abstract-control.js';
+
+/**
+ * This class finds and lists all elements with an 'on-demand' attribute and offers them
+ * in a popup list for activation. 'on-demand' is not a state like 'relevant' but just
+ * shows/hides controls on demand. The controls still behave as usual otherwise.
+ *
+ *
+ */
+export class FxControlMenu extends XfAbstractControl {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.selectExpr = this.getAttribute('select');
+
+    const style = `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .menu {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        background: white;
+        border: 1px solid #ccc;
+        padding: 0.5em;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        min-width: 10em;
+        white-space:nowrap;
+      }
+
+      .menu.visible {
+        display: block;
+      }
+
+      .menu a {
+        display: block;
+        padding: 0.25em 0.5em;
+        text-decoration: none;
+        color: black;
+        cursor: pointer;
+      }
+
+      .menu a:hover {
+        background-color: #eee;
+      }
+    `;
+
+    this.shadowRoot.innerHTML = `
+      <style>${style}</style>
+      <slot></slot>
+      <div class="menu" part="menu"></div>
+    `;
+
+    this.menuEl = this.shadowRoot.querySelector('.menu');
+
+    // Slotted button click
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', () => {
+      const nodes = slot.assignedNodes({ flatten: true });
+      const button = nodes.find(
+        node => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BUTTON',
+      );
+      if (button) {
+        button.addEventListener('click', e => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.updateMenu();
+          this.menuEl.classList.toggle('visible');
+        });
+      }
+    });
+
+    // Update menu on custom event
+    document.addEventListener('update-control-menu', () => {
+      this.updateMenu();
+    });
+
+    // Close on outside click
+    document.addEventListener('click', e => {
+      const inside = this.contains(e.target) || this.shadowRoot.contains(e.target);
+      if (!inside) {
+        this.menuEl.classList.remove('visible');
+      }
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        this.menuEl.classList.remove('visible');
+      }
+    });
+
+    if (this.getAttribute('mode') === 'hide-on-empty') {
+      this.getOwnerForm().addEventListener('ready', () => {
+        const container = document.querySelector(this.selectExpr);
+        if (!container) return;
+
+        const widgets = container.querySelectorAll('.widget');
+        widgets.forEach(widget => {
+          const value = widget.value?.trim();
+          const control = widget.closest('fx-control');
+          if (control && (value === '' || value == null)) {
+            control.setAttribute('on-demand', 'true');
+          }
+        });
+
+        // After marking empty controls, update the menu
+        this.updateMenu();
+      });
+    }
+
+    const container = document.querySelector(this.selectExpr);
+    container?.addEventListener('show-control', event => {
+      this.updateMenu();
+    });
+
+    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 = this._getScopedContainer();
+    if (!container) return;
+
+    let targets = [];
+    // ✅ Include container itself if it has on-demand
+    if (container.hasAttribute('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 = '';
+
+    // Find the button to disable if needed
+    const slot = this.shadowRoot.querySelector('slot');
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    const button = assignedNodes.find(
+      node => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BUTTON',
+    );
+
+    if (button) {
+      button.disabled = targets.length === 0;
+    }
+
+    if (targets.length === 0) {
+      this.menuEl.classList.remove('visible');
+      return;
+    }
+
+    targets.forEach((el, index) => {
+      let label = el.getAttribute('aria-label');
+      if (!label) {
+        label = el.querySelector('label')?.textContent.trim() || `Item ${index + 1}`;
+      }
+      if (!label) {
+        console.warn(
+          'no label found - cannot create menu entry for ',
+          el,
+          ' - please add aria-label or label element to control',
+        );
+      }
+      const item = document.createElement('a');
+      item.href = '#';
+      item.textContent = label;
+
+      item.addEventListener('click', e => {
+        e.preventDefault();
+        if (typeof el.activate === 'function') {
+          el.activate();
+        }
+
+        this.menuEl.classList.remove('visible');
+
+        // Wait one frame to let DOM updates (like on-demand removal) take effect
+        requestAnimationFrame(() => {
+          this.updateMenu();
+        });
+      });
+
+      this.menuEl.appendChild(item);
+    });
+  }
+}
+
+if (!customElements.get('fx-control-menu')) {
+  customElements.define('fx-control-menu', FxControlMenu);
+}