@jinntec/fore 2.5.0 → 2.7.0

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';
 
@@ -56,7 +59,7 @@ export default class FxControl extends XfAbstractControl {
     };
   }
 
-  _getValueFromHtmlDom() {
+  _getValueOfWidget() {
     if (this.valueProp === 'selectedOptions') {
       // We have multiple! Just return that as space-separated for now
       return [...this.widget.selectedOptions].map(option => option.value).join(' ');
@@ -76,10 +79,25 @@ export default class FxControl extends XfAbstractControl {
       : 'blur';
     this.label = this.hasAttribute('label') ? this.getAttribute('label') : null;
     const style = `
-            :host{
-                display:inline-block;
-            }
-        `;
+      :host {
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        position: relative;
+      }
+      .trash {
+        position: absolute;
+        right:0;
+        top:0;
+        cursor: pointer;
+        color: #888;
+        font-size: 0.65rem;
+        align-self: center;
+      }
+      .trash:hover {
+        color: red;
+      }
+      `;
 
     this.credentials = this.hasAttribute('credentials')
       ? this.getAttribute('credentials')
@@ -136,7 +154,7 @@ export default class FxControl extends XfAbstractControl {
           // console.info('handling Event:', event.type, listenOn);
           // Cancel the default action, if needed
           event.preventDefault();
-          this.setValue(this._getValueFromHtmlDom());
+          this.setValue(this._getValueOfWidget());
         }
       });
       this.updateEvent = 'blur'; // needs to be registered too
@@ -149,19 +167,19 @@ export default class FxControl extends XfAbstractControl {
           () => {
             // console.log('eventlistener ', this.updateEvent);
             // console.info('handling Event:', event.type, listenOn);
-            this.setValue(this._getValueFromHtmlDom());
+            this.setValue(this._getValueOfWidget());
           },
           this.debounceDelay,
         ),
       );
     } else {
       listenOn.addEventListener(this.updateEvent, event => {
-        this.setValue(this._getValueFromHtmlDom());
+        this.setValue(this._getValueOfWidget());
       });
       listenOn.addEventListener(
         'blur',
         event => {
-          this.setValue(this._getValueFromHtmlDom());
+          this.setValue(this._getValueOfWidget());
         },
         { once: true },
       );
@@ -185,7 +203,22 @@ export default class FxControl extends XfAbstractControl {
     this.template = this.querySelector('template');
     this.boundInitialized = false;
     this.static = !!this.widget.hasAttribute('static');
-    // console.log('template',this.template);
+    super.connectedCallback();
+  }
+
+  /**
+   * activates a control that uses 'on-demand' attribute
+   */
+  activate() {
+    console.log('fx-control.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    this.refresh(true);
+    Fore.dispatch(this, 'show-control', {});
+    // Focus the widget after the control becomes visible
+    requestAnimationFrame(() => {
+      this.getWidget()?.focus();
+    });
   }
 
   _debounce(func, timeout = 300) {
@@ -208,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')) {
@@ -235,11 +269,13 @@ 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();
+    setval.actionPerformed(false);
     // this.visited = true;
   }
 
@@ -257,12 +293,17 @@ 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) {
+    const showTrash = this.hasAttribute('on-demand');
+    const showIcon = this.closest('[show-icon]');
     return `
             ${this.label ? `${this.label}` : ''}
-            <slot></slot>
+              <slot></slot>
             ${
               this.hasAttribute('as') && this.getAttribute('as') === 'node'
                 ? '<fx-replace id="replace" ref=".">'
@@ -311,6 +352,13 @@ export default class FxControl extends XfAbstractControl {
    */
   async updateWidgetValue() {
     // this._getValueFromHtmlDom() = this.value;
+    if (this.value) {
+      // Fire and forget this: the value is set right away anyway
+      this.setAttribute('has-value', '');
+      Fore.dispatch(this, 'show-control');
+    } else {
+      this.removeAttribute('has-value');
+    }
 
     let { widget } = this;
     if (!widget) {
@@ -457,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 },
@@ -496,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);
   }
@@ -519,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
     }
   }
 
@@ -531,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')
@@ -542,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;
@@ -558,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' &&
@@ -609,30 +682,41 @@ export default class FxControl extends XfAbstractControl {
   updateEntry(newEntry, node) {
     // ### >>> todo: needs rework this code is heavily assuming a select control with 'value' attribute - not generic at all yet.
 
-    // if (this.widget.nodeName !== 'SELECT') return;
-    const valueAttribute = this._getValueAttribute(newEntry);
+    const valueAttribute = newEntry.getAttribute('value');
     if (!valueAttribute) {
       // Fore.dispatch(this,'warn',{message:'no value attribute specified for template entry.'});
       return;
     }
 
-    const valueExpr = valueAttribute.value;
+    const valueExpr = valueAttribute;
     const cutted = valueExpr.substring(1, valueExpr.length - 1);
-    const evaluated = evaluateXPathToString(cutted, node, newEntry);
-    valueAttribute.value = evaluated;
+    const evaluated = evaluateXPathToString(cutted, node, this);
+    newEntry.setAttribute('value', evaluated);
 
     if (this.value === evaluated) {
       newEntry.setAttribute('selected', 'selected');
     }
 
+    if (newEntry.hasAttribute('title')) {
+      let titleExpr = newEntry.getAttribute('title');
+      titleExpr = titleExpr.substring(1, titleExpr.length - 1);
+      const evaluated = evaluateXPathToString(titleExpr, node, newEntry);
+      newEntry.setAttribute('title', evaluated);
+    }
     // ### set label
-    const optionLabel = newEntry.textContent;
+    const optionLabel = newEntry.textContent.trim();
     this.evalLabel(optionLabel, node, newEntry);
     //  ### <<< 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-dialog.js

@@ -61,7 +61,7 @@ export class FxDialog extends HTMLElement {
     `;
   }
 
-  open() {
+  showModal() {
     window.addEventListener(
       'keyup',
       e => {
@@ -75,7 +75,7 @@ export class FxDialog extends HTMLElement {
     this.classList.add('show');
   }
 
-  async hide() {
+  async close() {
     await Fore.fadeOutElement(this, 400);
     this.classList.remove('show');
   }

package/src/ui/fx-group.js

@@ -95,6 +95,20 @@ class FxGroup extends FxContainer {
     // context item
     Fore.refreshChildren(this, !!force);
   }
+
+  // todo: this code should go
+  /**
+   * activates a control that uses 'on-demand' attribute
+   */
+  activate() {
+    console.log('fx-group.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    if (this.isBound()) {
+      this.refresh(true);
+    }
+    Fore.dispatch(this, 'show-group', {});
+  }
 }
 
 if (!customElements.get('fx-group')) {

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;
     }
   }

package/src/ui/fx-repeat-attributes.js

@@ -2,8 +2,9 @@ import { Fore } from '../fore.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
-import ForeElementMixin from '../ForeElementMixin.js';
 import { withDraggability } from '../withDraggability.js';
+import { getPath } from '../xpath-path.js';
+import { RepeatBase } from './repeat-base.js';
 
 /**
  * `fx-repeat`
@@ -20,7 +21,7 @@ import { withDraggability } from '../withDraggability.js';
  *
  * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
  */
-export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false) {
+export class FxRepeatAttributes extends withDraggability(RepeatBase, false) {
   static get properties() {
     return {
       ...super.properties,
@@ -62,8 +63,23 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
     this.index = 1;
     this.repeatSize = 0;
     this.attachShadow({ mode: 'open', delegatesFocus: true });
+    /**
+     * @type {Map<Element, Node>} A lookup from a repeat item to the node it has associated
+     */
+    this._contextItemByRepeatItem = new Map();
   }
 
+  /**
+   * Get the context node for the given repeat item
+   *
+   * @param {Element} repeatItem
+   * @returns {Node} The node (if any) that is the active item for this repeat item
+   */
+  getContextForRepeatItem(repeatItem) {
+    return this._contextItemByRepeatItem.get(repeatItem);
+  }
+
+  /*
   get repeatSize() {
     return this.querySelectorAll(':scope > .fx-repeatitem').length;
   }
@@ -71,22 +87,66 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
   set repeatSize(size) {
     super.repeatSize = size;
   }
+*/
+
+  async init() {
+    // ### there must be a single 'template' child
+
+    const inited = new Promise(resolve => {
+      // console.log('##### repeat-attributes init ', this.id);
+      // if(!this.inited) this.init();
+      // does not use this.evalInContext as it is expecting a nodeset instead of single node
+      this._evalNodeset();
+      // console.log('##### ',this.id, this.nodeset);
+
+      this._initTemplate();
+      // this._initRepeatItems();
+
+      this.setAttribute('index', this.index);
+      this.inited = true;
+      resolve('done');
+    });
+
+    return inited;
+  }
+
+  _deleteHandler(deleted) {
+    super._deleteHandler(deleted);
+    const refd = this.querySelector('[data-ref]');
+    const rItems = refd ? refd.querySelectorAll(':scope > .fx-repeatitem') : [];
+
+    for (let i = 0; i < Math.min(this.nodeset.length, rItems.length); ++i) {
+      this._contextItemByRepeatItem.set(rItems[i], this.nodeset[i]);
+    }
+  }
 
   setIndex(index) {
-    // console.log('new repeat index ', index);
-    this.index = index;
     const refd = this.querySelector('[data-ref]');
-    const rItems = refd.querySelectorAll(':scope > *');
-    this.applyIndex(rItems[this.index - 1]);
+    const rItems = refd ? refd.querySelectorAll(':scope > .fx-repeatitem') : [];
+    const size = rItems.length;
+
+    const clamped = size === 0 ? 0 : Math.max(1, Math.min(index, size));
+    this.index = clamped;
+
+    if (size > 0) {
+      this.applyIndex(rItems[this.index - 1]);
+    } else {
+      this._removeIndexMarker(); // nothing selected
+    }
+
+    this.setAttribute('index', String(this.index));
   }
 
+  /*
   applyIndex(repeatItem) {
     this._removeIndexMarker();
     if (repeatItem) {
       repeatItem.setAttribute('repeat-index', '');
     }
   }
+*/
 
+  /*
   get index() {
     return parseInt(this.getAttribute('index'), 10);
   }
@@ -94,6 +154,7 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
   set index(idx) {
     this.setAttribute('index', idx);
   }
+*/
 
   _getRepeatedItems() {
     const refd = this.querySelector('[data-ref]');
@@ -101,6 +162,7 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
   }
 
   async connectedCallback() {
+    super.connectedCallback();
     // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
@@ -111,7 +173,8 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
       const { item } = e.detail;
       const repeatedItems = this._getRepeatedItems();
       const idx = Array.from(repeatedItems).indexOf(item);
-      this.applyIndex(repeatedItems[idx]);
+      this.setIndex(idx + 1);
+      // this.applyIndex(repeatedItems[idx]);
       this.index = idx + 1;
     });
     // todo: review - this is just used by append action - event consolidation ?
@@ -120,15 +183,7 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
       if (!e.target === this) return;
       const { index } = e.detail;
       this.index = Number(index);
-      this.applyIndex(this.children[index - 1]);
-    });
-    /*
-    document.addEventListener('insert', e => {
-      const nodes = e.detail.insertedNodes;
-      this.index = e.detail.position;
-      console.log('insert catched', nodes, this.index);
     });
-*/
 
     // if (this.getOwnerForm().lazyRefresh) {
     this.mutationObserver = new MutationObserver(mutations => {
@@ -136,7 +191,7 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
         const added = mutations[0].addedNodes[0];
         if (added) {
           const instance = XPathUtil.resolveInstance(this, this.ref);
-          const path = XPathUtil.getPath(added, instance);
+          const path = getPath(added, instance);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
           // const prev = mutations[0].previousSibling.previousElementSibling;
@@ -196,6 +251,10 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
     return inited;
   }
 
+  getRepeatItems() {
+    return Array.from(this.querySelectorAll(':scope [data-ref] > .fx-repeatitem'));
+  }
+
   _getRef() {
     return this.getAttribute('ref');
   }
@@ -248,6 +307,7 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
         // remove repeatitem
         const itemToRemove = repeatItems[position - 1];
         itemToRemove.parentNode.removeChild(itemToRemove);
+        this._contextItemByRepeatItem.delete(itemToRemove);
         this.getOwnerForm().unRegisterLazyElement(itemToRemove);
         // this._fadeOut(itemToRemove);
         // Fore.fadeOutElement(itemToRemove)
@@ -259,29 +319,15 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
       for (let position = repeatItemCount + 1; position <= contextSize; position += 1) {
         // add new repeatitem
 
-        const clonedTemplate = this._clone();
+        const clonedTemplate = this._createNewRepeatItem(position, this.nodeset[position - 1]);
         if (!clonedTemplate) return;
 
-        // ### cloned templates are always appended to the binding element - the one having the data-ref
-        const bindingElement = this.querySelector('[data-ref]');
-        bindingElement.appendChild(clonedTemplate);
-        clonedTemplate.classList.add('fx-repeatitem');
-        clonedTemplate.setAttribute('index', position);
-
-        clonedTemplate.addEventListener('click', this._dispatchIndexChange);
-        // this.addEventListener('focusin', this._handleFocus);
-        clonedTemplate.addEventListener('focusin', this._dispatchIndexChange);
-
-        // this._initVariables(clonedTemplate);
-
-        // newItem.nodeset = this.nodeset[position - 1];
-        // newItem.index = position;
         this.getOwnerForm().someInstanceDataStructureChanged = true;
       }
     }
 
     // ### update nodeset of repeatitems
-    repeatItems = this.querySelectorAll(':scope > .fx-repeatitem');
+    repeatItems = this.querySelectorAll('.fx-repeatitem');
     repeatItemCount = repeatItems.length;
 
     for (let position = 0; position < repeatItemCount; position += 1) {
@@ -291,6 +337,8 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
       if (item.nodeset !== this.nodeset[position]) {
         item.nodeset = this.nodeset[position];
       }
+
+      this._contextItemByRepeatItem.set(item, this.nodeset[position]);
     }
 
     // Fore.refreshChildren(clone,true);
@@ -385,10 +433,38 @@ export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false
     })(newRepeatItem);
   }
 
-  _clone() {
+  /**
+   * @override
+   *
+   * @param {number} insertionIndex - the one-based index of where to insert the new node
+   * @param {Node} node - The node related to this new repeat item
+   *
+   * @returns {HTMLElement}
+   */
+  _createNewRepeatItem(insertionIndex, node) {
     this.template = this.shadowRoot.querySelector('template');
-    if (!this.template) return;
-    return this.template.content.firstElementChild.cloneNode(true);
+    if (!this.template) return null;
+    const newNode = /** @type {HTMLElement} */ (
+      this.template.content.firstElementChild.cloneNode(true)
+    );
+
+    // ### cloned templates are always appended to the binding element - the one having the data-ref
+    const bindingElement = this.querySelector('[data-ref]');
+
+    const repeatItems = bindingElement.querySelectorAll('.fx-repeatitem');
+
+    const beforeNode = repeatItems[insertionIndex - 1] ?? null; // Null appends by default
+    bindingElement.insertBefore(newNode, beforeNode);
+    newNode.classList.add('fx-repeatitem');
+    // newNode.setAttribute('index', `${insertionIndex}`);
+
+    newNode.addEventListener('click', this._dispatchIndexChange);
+    // this.addEventListener('focusin', this._handleFocus);
+    newNode.addEventListener('focusin', this._dispatchIndexChange);
+
+    this._contextItemByRepeatItem.set(newNode, node);
+
+    return newNode;
   }
 
   _removeIndexMarker() {