@jinntec/fore 2.5.0 → 2.6.0

package/src/actions/abstract-action.js

@@ -122,6 +122,7 @@ export class AbstractAction extends ForeElementMixin {
   disconnectedCallback() {}
 
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('inert', 'true');
     this.style.display = 'none';
     this.propagate = this.hasAttribute('propagate') ? this.getAttribute('propagate') : 'continue';
@@ -176,6 +177,7 @@ export class AbstractAction extends ForeElementMixin {
       }
     } else {
       this.targetElement = this.parentNode;
+      if(!this.targetElement || this.targetElement.nodeType !== Node.ELEMENT_NODE) return;
       this.targetElement.addEventListener(this.event, e => this.execute(e), {
         capture: this.phase === 'capture',
       });
@@ -212,30 +214,28 @@ export class AbstractAction extends ForeElementMixin {
    * @param e
    */
   async execute(e) {
-    if(!this.getModel().modelConstructed) return;
+    if (!this.getModel().modelConstructed) return;
     // console.log(this, this.event);
-    if(this.event){
-      if(this.event === 'submit-done'){
+    if (this.event) {
+      if (this.event === 'submit-done') {
         console.info(
-            `%csubmit-done ${this.event} #${this?.parentNode?.id}`,
-            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%csubmit-done ${this.event} #${this?.parentNode?.id}`,
+          'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
-      }else{
+      } else {
         console.info(
-            `%cexecuting ${this.constructor.name} ${this.event}`,
-            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%cexecuting ${this.constructor.name} ${this.event}`,
+          'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
       }
-
-    }else{
+    } else {
       console.info(
-          `%cexecuting ${this.constructor.name}`,
-          'background:limegreen; color:black; margin-left:1rem; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-          this
+        `%cexecuting ${this.constructor.name}`,
+        'background:limegreen; color:black; margin-left:1rem; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        this,
       );
     }
 
-
     if (e && e.target.nodeType !== Node.DOCUMENT_NODE && e.target !== window) {
       /*
              ### ignore event if there's a parent fore and the current element is NOT part of it. This avoids
@@ -260,7 +260,7 @@ export class AbstractAction extends ForeElementMixin {
     let resolveThisEvent = () => {};
     if (e && e.listenerPromises) {
       e.listenerPromises.push(
-        new Promise((resolve) => {
+        new Promise(resolve => {
           resolveThisEvent = resolve;
         }),
       );
@@ -269,9 +269,9 @@ export class AbstractAction extends ForeElementMixin {
     // Outermost handling
     if (FxFore.outermostHandler === null) {
       console.log(
-          `%coutermost Action on ${this.getOwnerForm().id}`,
-          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-          this,
+        `%coutermost Action on ${this.getOwnerForm().id}`,
+        'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
 
       FxFore.outermostHandler = this;
@@ -406,9 +406,9 @@ export class AbstractAction extends ForeElementMixin {
     this.actionPerformed();
     if (FxFore.outermostHandler === this) {
       console.log(
-          `%cfinalizing outermost Action on ${this.getOwnerForm().id}`,
-          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-          this,
+        `%cfinalizing outermost Action on ${this.getOwnerForm().id}`,
+        'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
 
       FxFore.outermostHandler = null;
@@ -467,8 +467,8 @@ export class AbstractAction extends ForeElementMixin {
       return;
     }
     if (
-      FxFore.outermostHandler
-      && !XPathUtil.contains(FxFore.outermostHandler.ownerDocument, FxFore.outermostHandler)
+      FxFore.outermostHandler &&
+      !XPathUtil.contains(FxFore.outermostHandler.ownerDocument, FxFore.outermostHandler)
     ) {
       // The old outermostHandler fell out of the document. An error has happened.
       // Just remove the old one and act like we are starting anew.
@@ -480,7 +480,7 @@ export class AbstractAction extends ForeElementMixin {
       // console.log('running update cycle for outermostHandler', this);
       model.recalculate();
       model.revalidate();
-      model.parentNode.refresh(true);
+      this.getOwnerForm().refresh(true);
       this.dispatchActionPerformed();
     } else if (this.needsUpdate) {
       // console.log('Update delayed!');

package/src/actions/fx-append.js

@@ -109,6 +109,8 @@ class FxAppend extends AbstractAction {
     const data = this._generateInstance(templ.content, rootNode);
     // console.log('_dataFromTemplate DATA', data);
     inscope.appendChild(data);
+    parentForm.signalChangeToElement(inscope.localName);
+    parentForm.signalChangeToElement(data.localName);
     // console.log('appended new item ', data);
     // return data;
   }

package/src/actions/fx-delete.js

@@ -52,19 +52,31 @@ class FxDelete extends AbstractAction {
       }),
     );
 
+    const fore = this.getOwnerForm();
+
     let parent;
     if (Array.isArray(nodesToDelete)) {
       if (nodesToDelete.length === 0) return;
       parent = nodesToDelete[0].parentNode;
+      fore.signalChangeToElement(parent.localName);
       nodesToDelete.forEach(item => {
         this._deleteNode(parent, item);
+        fore.signalChangeToElement(item.localName);
       });
     } else {
       parent = nodesToDelete.parentNode;
+      fore.signalChangeToElement(parent.localName);
+
       this._deleteNode(parent, nodesToDelete);
+      fore.signalChangeToElement(nodesToDelete.localName);
     }
-    const foreId = this.getOwnerForm().id;
-    await Fore.dispatch(instance, 'deleted', { ref: path, deletedNodes: nodesToDelete , instanceId:instanceId, foreId:foreId});
+
+    await Fore.dispatch(instance, 'deleted', {
+      ref: path,
+      deletedNodes: nodesToDelete,
+      instanceId,
+      foreId: fore.id,
+    });
     this.needsUpdate = true;
   }
 

package/src/actions/fx-hide.js

@@ -38,7 +38,7 @@ export class FxHide extends AbstractAction {
     );
 
     const dialog = resolveId(this.dialog, this);
-    dialog.hide();
+    dialog.close();
     Fore.dispatch(dialog, 'dialog-hidden', {});
   }
 }

package/src/actions/fx-insert.js

@@ -60,30 +60,6 @@ export class FxInsert extends AbstractAction {
     this.keepValues = !!this.hasAttribute('keep-values');
   }
 
-  _getOriginSequence(inscope, targetSequence) {
-    let originSequence;
-    if (this.origin) {
-      // ### if there's an origin attribute use it
-      let originTarget;
-      try {
-        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        if (Array.isArray(originTarget) && originTarget.length === 0) {
-          console.warn('invalid origin for this insert action - ignoring...', this);
-          originSequence = null;
-        }
-        originSequence = originTarget;
-      } catch (error) {
-        console.warn('invalid origin for this insert action - ignoring...', this);
-      }
-    } else if (targetSequence) {
-      // ### use last item of targetSequence
-      originSequence = targetSequence;
-      if (originSequence && !this.keepValues) {
-        this._clear(originSequence);
-      }
-    }
-    return originSequence;
-  }
 
   _cloneOriginSequence(inscope, targetSequence) {
     let originSequenceClone;
@@ -96,13 +72,25 @@ export class FxInsert extends AbstractAction {
          */
         // this.setInScopeVariables(this.detail);
 
-        // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        if (Array.isArray(originTarget) && originTarget.length === 0) {
-          console.warn('invalid origin for this insert action - ignoring...', this);
-          originSequenceClone = null;
+        /*
+        if in 'create-nodes' mode and origin targets a repeat, the repeat
+        we use the already during initData() created nodeset as a template for insertion
+         */
+        if(this.origin.startsWith('#') && this.getOwnerForm().createNodes){
+          const repeat = this.getOwnerForm().querySelector(this.origin);
+          originSequenceClone = repeat.createdNodeset.cloneNode(true);
+          if(!originSequenceClone){
+            console.error(`createdNodeset for repeat ${this.origin} does not exist`);
+          }
+        }else{
+          // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
+          originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
+          if (Array.isArray(originTarget) && originTarget.length === 0) {
+            console.warn('invalid origin for this insert action - ignoring...', this);
+            originSequenceClone = null;
+          }
+          originSequenceClone = originTarget.cloneNode(true);
         }
-        originSequenceClone = originTarget.cloneNode(true);
       } catch (error) {
         console.warn('invalid origin for this insert action - ignoring...', this);
       }
@@ -136,13 +124,11 @@ export class FxInsert extends AbstractAction {
     let targetSequence = [];
     const inscopeContext = getInScopeContext(this);
 
+    const fore = this.getOwnerForm();
+
     // ### 'context' attribute takes precedence over 'ref'
     if (this.hasAttribute('context')) {
-      [context] = evaluateXPathToNodes(
-        this.getAttribute('context'),
-        inscopeContext,
-        this.getOwnerForm(),
-      );
+      [context] = evaluateXPathToNodes(this.getAttribute('context'), inscopeContext, fore);
       inscope = inscopeContext;
     }
 
@@ -154,6 +140,8 @@ export class FxInsert extends AbstractAction {
         targetSequence = evaluateXPathToNodes(this.ref, inscope, this);
       }
     }
+    // const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
+
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
     if (!originSequenceClone) return; // if no origin back out without effect
 
@@ -165,12 +153,24 @@ export class FxInsert extends AbstractAction {
       if (context) {
         insertLocationNode = context;
         context.appendChild(originSequenceClone);
+        fore.signalChangeToElement(insertLocationNode.localName);
+        fore.signalChangeToElement(originSequenceClone.localName);
         index = 1;
       } else {
-        // No context. We can insert into the `inscope`.
-        insertLocationNode = inscope;
-        inscope.appendChild(originSequenceClone);
-        index = 1;
+
+        // No context but creating nodes from UI
+        if(!inscope && this.getOwnerForm().createNodes){
+          const repeat = this.getOwnerForm().querySelector(this.origin);
+          inscope = getInScopeContext(repeat, repeat.ref);
+          insertLocationNode = inscope;
+          inscope.appendChild(originSequenceClone);
+          index = inscope.length - 1;
+        }else{
+          insertLocationNode = inscope;
+          inscope.appendChild(originSequenceClone);
+          index = 1;
+        }
+
       }
     } else {
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
@@ -205,6 +205,8 @@ export class FxInsert extends AbstractAction {
       if (this.position && this.position === 'before') {
         // this.at -= 1;
         insertLocationNode.parentNode.insertBefore(originSequenceClone, insertLocationNode);
+        fore.signalChangeToElement(insertLocationNode.parentNode);
+        fore.signalChangeToElement(originSequenceClone.localName);
       }
 
       if (this.position && this.position === 'after') {
@@ -217,8 +219,12 @@ export class FxInsert extends AbstractAction {
         } else if (this.hasAttribute('context')) {
           index = 1;
           insertLocationNode.prepend(originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         } else {
           insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         }
       }
     }
@@ -251,8 +257,8 @@ export class FxInsert extends AbstractAction {
       'inserted-nodes': originSequenceClone,
       'insert-location-node': insertLocationNode,
       position: this.position,
-      instanceId:instanceId,
-      foreId:this.getOwnerForm().id
+      instanceId,
+      foreId: fore.id,
     });
 
     // todo: this actually should dispatch to respective instance

package/src/actions/fx-load.js

@@ -27,12 +27,13 @@ class FxLoad extends AbstractAction {
     super();
     this.attachShadow({ mode: 'open' });
     this.url = '';
+    this.replace=false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.attachTo = this.hasAttribute('attach-to') ? this.getAttribute('attach-to') : '_self';
-
+    this.replace = this.hasAttribute('replace') ? true : false;
     // Add a 'doneEvent' to block the action chain untill the event fired on the element we're
     // loading something into.
     this.awaitEvent = this.hasAttribute('await') ? this.getAttribute('await') : '';
@@ -88,7 +89,11 @@ class FxLoad extends AbstractAction {
             resolved.removeEventListener(this.awaitEvent, eventListener);
           };
 
-          resolved.appendChild(content);
+          if(this.replace){
+            this.parentNode.replaceChild(content,resolved);
+          }else{
+            resolved.appendChild(content);
+          }
           resolved.addEventListener(this.awaitEvent, eventListener);
 
           await waitForEvent;

package/src/actions/fx-setvalue.js

@@ -3,6 +3,7 @@ import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-setvalue`
@@ -10,106 +11,123 @@ import { Fore } from '../fore.js';
  * @customElement
  */
 export default class FxSetvalue extends AbstractAction {
-  static get properties() {
-    return {
-      ...super.properties,
-      ref: {
-        type: String,
-      },
-      valueAttr: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.ref = '';
-    this.valueAttr = '';
-  }
-
-  connectedCallback() {
-    if (super.connectedCallback) {
-      super.connectedCallback();
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            valueAttr: {
+                type: String,
+            },
+        };
     }
 
-    if (this.hasAttribute('ref')) {
-      this.ref = this.getAttribute('ref');
-    } else {
-      throw new Error('fx-setvalue must specify a "ref" attribute');
+    constructor() {
+        super();
+        this.ref = '';
+        this.valueAttr = '';
     }
-    this.valueAttr = this.getAttribute('value');
-  }
 
-  async perform() {
-    super.perform();
-    let { value } = this;
-    if (this.valueAttr !== null) {
-      [value] = evaluateXPath(this.valueAttr, this.nodeset, this, this.detail);
-    } else if (this.textContent !== '') {
-      value = this.textContent;
-    } else {
-      value = '';
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+
+        if (this.hasAttribute('ref')) {
+            this.ref = this.getAttribute('ref');
+        } else {
+            throw new Error('fx-setvalue must specify a "ref" attribute');
+        }
+        this.valueAttr = this.getAttribute('value');
     }
-    if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
-      value = value.nodeValue;
+
+    async perform() {
+        super.perform();
+        let { value } = this;
+        if (this.valueAttr !== null) {
+            const inscopeContext = getInScopeContext(this, this.valueAttr);
+            /*
+      todo: review @martin - shouldn't we always return a string value?
+      this comes down to the question if setvalue should only allow setting of strings
+      which i tend to agree. Can't remember a case where i wanted to set an attribute
+      or element (for json wouldn't make much sense either) - for cases like that
+      fx-replace would be more appropriate.
+
+      This is of practical relevance cause currently forces to append 'text()' to value expressions
+      or getting unexpected results.
+      */
+
+            [value] = evaluateXPath(
+                this.valueAttr,
+                inscopeContext,
+                this,
+                this.detail,
+            );
+        } else if (this.textContent !== '') {
+            value = this.textContent;
+        } else {
+            value = '';
+        }
+        if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
+            value = value.nodeValue;
+        }
+        const mi = this.getModelItem();
+        this.setValue(mi, value);
+        // todo: check this again - logically needsUpate should be set but makes tests fail
+        //  this.needsUpdate = true;
     }
-    const mi = this.getModelItem();
-    this.setValue(mi, value);
-    // todo: check this again - logically needsUpate should be set but makes tests fail
-    //  this.needsUpdate = true;
-  }
 
-  /**
-   * need to overwrite default dispatchExecute to do it ourselves. This is necessary for tracking control value changes
-   * which call setvalue directly without perform().
-   */
-  dispatchExecute() {}
+    /**
+     * need to overwrite default dispatchExecute to do it ourselves. This is necessary for tracking control value changes
+     * which call setvalue directly without perform().
+     */
+    dispatchExecute() {}
 
-  setValue(modelItem, newVal) {
-    const item = modelItem;
-    if (!item) return;
+    setValue(modelItem, newVal) {
+        const item = modelItem;
+        if (!item) return;
 
-    if (item.value !== newVal) {
-      // const path = XPathUtil.getPath(modelItem.node);
-      const path = Fore.getDomNodeIndexString(modelItem.node);
+        if (item.value !== newVal) {
+            // const path = XPathUtil.getPath(modelItem.node);
+            const path = Fore.getDomNodeIndexString(modelItem.node);
 
-      const ev = this.event;
-      const targetElem = this;
-      this.dispatchEvent(
-        new CustomEvent('execute-action', {
-          composed: true,
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            action: targetElem,
-            event: ev,
-            value: newVal,
-            path,
-          },
-        }),
-      );
+            const ev = this.event;
+            const targetElem = this;
+            this.dispatchEvent(
+                new CustomEvent('execute-action', {
+                    composed: true,
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        action: targetElem,
+                        event: ev,
+                        value: newVal,
+                        path,
+                    },
+                }),
+            );
 
-      if (newVal?.nodeType) {
-        if (newVal.nodeType === Node.ELEMENT_NODE) {
-          item.value = newVal;
-        }
-        if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
-          item.value = newVal.getValue();
-        }
-        if(newVal.nodeType === Node.TEXT_NODE){
-          item.value = newVal.textContent;
+            if (newVal?.nodeType) {
+                if (newVal.nodeType === Node.ELEMENT_NODE) {
+                    item.value = newVal;
+                }
+                if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
+                    item.value = newVal.getValue();
+                }
+                if (newVal.nodeType === Node.TEXT_NODE) {
+                    item.value = newVal.textContent;
+                }
+            } else {
+                item.value = newVal;
+                item.node.textContent = newVal;
+            }
+            this.getModel().changed.push(modelItem);
+            this.needsUpdate = true;
         }
-      } else {
-        item.value = newVal;
-        item.node.textContent = newVal;
-      }
-      this.getModel().changed.push(modelItem);
-      this.needsUpdate = true;
     }
-  }
 }
 
 if (!customElements.get('fx-setvalue')) {
-  window.customElements.define('fx-setvalue', FxSetvalue);
+    window.customElements.define('fx-setvalue', FxSetvalue);
 }

package/src/actions/fx-show.js

@@ -4,7 +4,9 @@ import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-show`
- * Displays a simple confirmation before actually executing the nested actions.
+ * to show a `<dialog>` with given id.
+ *
+ *
  *
  * @customElement
  * @event fx-show dispatched when dialog is shown
@@ -34,7 +36,7 @@ export class FxShow extends FxAction {
     if (!targetDlg) {
       console.error('target dialog with given id does not exist', this.dialog);
     }
-    targetDlg.open();
+    targetDlg.showModal();
     Fore.dispatch(targetDlg, 'dialog-shown', {});
   }
 }

package/src/fore.js

@@ -275,7 +275,7 @@ export class Fore {
    * recursively refreshes all UI Elements.
    *
    * @param {HTMLElement} startElement
-   * @param {(boolean|{reason:'index-function'})} force Whether to do a forced refresh. Forced
+   * @param {(boolean|{reason:'index-function', elementLocalnamesWithChanges: string[]})} force Whether to do a forced refresh. Forced
    * refreshes are very bad for performance, try to limit them. If the forced refresh is because index functions may change, it is better to pass the reason
    * @returns {Promise<void>}
    */
@@ -300,30 +300,47 @@ export class Fore {
       const { children } = startElement;
       if (children) {
         for (const element of Array.from(children)) {
-            if (element.nodeName.toUpperCase() === 'FX-FORE') {
-              break;
+          if (element.nodeName.toUpperCase() === 'FX-FORE') {
+            break;
+          }
+          if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+            /**
+             * @type {import('./ForeElementMixin.js').default}
+             */
+            const bound = element;
+            if (!force) {
+              continue;
+            }
+            if (force === true) {
+              // Unconditional force refresh
+              bound.refresh(force);
+              continue;
+            }
+            if (typeof force !== 'object') {
+              continue;
+            }
+            if (
+              force.reason === 'index-function' &&
+              bound.dependencies.isInvalidatedByIndexFunction()
+            ) {
+              bound.refresh(force);
+              continue;
             }
-            if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
-                /**
-                 * @type {import('./ForeElementMixin.js').default}
-                 */
-                if (
-                    force &&
-                    typeof force === 'object' &&
-                    force.reason === 'index-function' &&
-                    element._dependencies.isInvalidatedByIndexFunction()
-                ) {
-                    element.refresh(force);
-                    continue;
-                } else if (force === true) {
-                    element.refresh(force);
-                }
-                // console.log('refreshing', element, element?.ref);
-                // console.log('refreshing ',element);
-            } else if (!(element.inert === true) ) {
-                // testing for inert catches model and action elements and should just leave updateable html elements
-                Fore.refreshChildren(element, force);
+
+            if (
+              bound.dependencies.isInvalidatedByChildlistChanges(force.elementLocalnamesWithChanges)
+            ) {
+              bound.refresh(force);
+              continue;
             }
+
+            // console.log('refreshing', element, element?.ref);
+            // console.log('refreshing ',element);
+          }
+          if (!(element.inert === true)) {
+            // testing for inert catches model and action elements and should just leave updateable html elements
+            Fore.refreshChildren(element, force);
+          }
         }
       }
       resolve('done');