@jinntec/fore 1.0.0-5 → 1.2.0

package/src/actions/fx-hide.js

@@ -1,5 +1,6 @@
-import { FxAction } from './fx-action.js';
-import {AbstractAction} from "./abstract-action";
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
+import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-hide`
@@ -11,14 +12,16 @@ import {AbstractAction} from "./abstract-action";
 export class FxHide extends AbstractAction {
   connectedCallback() {
     this.dialog = this.getAttribute('dialog');
-    if(!this.dialog){
-      this.dispatch('error',{message:'dialog does not exist'})
+    if (!this.dialog) {
+      Fore.dispatch(this, 'error', { message: 'dialog does not exist' });
     }
   }
 
   perform() {
-    document.getElementById(this.dialog).hide();
+    resolveId(this.dialog, this).hide();
   }
 }
 
-window.customElements.define('fx-hide', FxHide);
+if (!customElements.get('fx-hide')) {
+  window.customElements.define('fx-hide', FxHide);
+}

package/src/actions/fx-insert.js

@@ -1,7 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
 import getInScopeContext from '../getInScopeContext.js';
 import {
-  evaluateXPath,
   evaluateXPathToNodes,
   evaluateXPathToFirstNode,
   evaluateXPathToNumber,
@@ -47,6 +46,12 @@ export class FxInsert extends AbstractAction {
       // ### if there's an origin attribute use it
       let originTarget;
       try {
+        /*
+        todo: discuss where to pass vars from event.detail into function context
+         */
+        // this.setInScopeVariables(this.detail);
+
+        // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
         originTarget = evaluateXPathToFirstNode(this.origin, inscope, this.getOwnerForm());
         if (Array.isArray(originTarget) && originTarget.length === 0) {
           console.warn('invalid origin for this insert action - ignoring...', this);
@@ -88,15 +93,19 @@ export class FxInsert extends AbstractAction {
     let inscope;
     // ### 'context' attribute takes precedence over 'ref'
     let targetSequence;
-    if(this.hasAttribute('context')){
+    if (this.hasAttribute('context')) {
       inscope = getInScopeContext(this.getAttributeNode('context'), this.getAttribute('context'));
-      targetSequence = evaluateXPathToNodes(this.getAttribute('context'), inscope, this.getOwnerForm());
+      targetSequence = evaluateXPathToNodes(
+        this.getAttribute('context'),
+        inscope,
+        this.getOwnerForm(),
+      );
     }
 
-    if(this.hasAttribute('ref')){
-      if(inscope){
+    if (this.hasAttribute('ref')) {
+      if (inscope) {
         targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
-      }else{
+      } else {
         inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
         targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
       }
@@ -117,7 +126,6 @@ export class FxInsert extends AbstractAction {
       index = 1;
       console.log('appended', inscope);
     } else {
-
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
       if (this.hasAttribute('at')) {
         // todo: eval 'at'
@@ -137,7 +145,11 @@ export class FxInsert extends AbstractAction {
         index = 1;
 
         insertLocationNode = targetSequence;
-        const context = evaluateXPath('count(preceding::*)', targetSequence, this.getOwnerForm());
+        const context = evaluateXPathToNumber(
+          'count(preceding::*)',
+          targetSequence,
+          this.getOwnerForm(),
+        );
         // console.log('context', context);
         index = context + 1;
         // index = targetSequence.findIndex(insertLocationNode);
@@ -152,14 +164,13 @@ export class FxInsert extends AbstractAction {
         // insertLocationNode.parentNode.append(originSequence);
         // const nextSibl = insertLocationNode.nextSibling;
         index += 1;
-        if(this.hasAttribute('context') && this.hasAttribute('ref')){
+        if (this.hasAttribute('context') && this.hasAttribute('ref')) {
           // index=1;
           inscope.append(originSequenceClone);
-        }else if(this.hasAttribute('context')){
-          const contextAttr = this.getAttribute('context');
-          index=1;
+        } else if (this.hasAttribute('context')) {
+          index = 1;
           insertLocationNode.prepend(originSequenceClone);
-        }else{
+        } else {
           insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
         }
       }
@@ -232,4 +243,6 @@ export class FxInsert extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-insert', FxInsert);
+if (!customElements.get('fx-insert')) {
+  window.customElements.define('fx-insert', FxInsert);
+}

package/src/actions/fx-message.js

@@ -61,4 +61,6 @@ class FxMessage extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-message', FxMessage);
+if (!customElements.get('fx-message')) {
+  window.customElements.define('fx-message', FxMessage);
+}

package/src/actions/fx-refresh.js

@@ -1,4 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
+import { Fore } from '../fore.js';
+import {resolveId} from "../xpath-evaluation.js";
 
 /**
  * `fx-refresh`
@@ -8,8 +10,29 @@ import { AbstractAction } from './abstract-action.js';
  */
 class FxRefresh extends AbstractAction {
   perform() {
+    if (this.hasAttribute('self')) {
+      const control = Fore.getClosest('fx-control', this);
+      if (control) {
+        control.refresh();
+        return;
+      }
+    }
+    if(this.hasAttribute('force')){
+      this.getOwnerForm().forceRefresh();
+      return;
+    }
+    if(this.hasAttribute('control')){
+      const targetId = this.getAttribute('control');
+      const ctrl = resolveId(targetId, this);
+      if (Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
+        ctrl.refresh();
+      }
+      return;
+    }
     this.getOwnerForm().refresh();
   }
 }
 
-window.customElements.define('fx-refresh', FxRefresh);
+if (!customElements.get('fx-refresh')) {
+  window.customElements.define('fx-refresh', FxRefresh);
+}

package/src/actions/fx-replace.js

@@ -0,0 +1,74 @@
+// import { FxAction } from './fx-action.js';
+import '../fx-model.js';
+import { AbstractAction } from './abstract-action.js';
+import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import getInScopeContext from "../getInScopeContext";
+
+/**
+ * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
+ *
+ * @customElement
+ */
+export default class FxReplace extends AbstractAction {
+  static get properties() {
+    return {
+      ...super.properties,
+      with: {
+        type: String,
+      },
+      replaceNode: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this.with = '';
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    this.with = this.getAttribute('with');
+  }
+
+  perform() {
+    super.perform();
+    console.log('replace action');
+    // console.log('replace action variables', this.inScopeVariables);
+    // if (!this.nodeset) {
+    //   return;
+    // }
+    const target = evaluateXPathToFirstNode(this.with, this.nodeset, this);
+    if (!target) return;
+
+
+    this.replace(this.nodeset, target);
+  }
+
+  replace(toReplace, replaceWith) {
+    console.log('replace', toReplace, replaceWith);
+    if (!toReplace || !replaceWith) return; // bail out silently
+    if (!toReplace.nodeName || !replaceWith.nodeName) {
+      console.warn('fx-replace: one argument is not a node');
+      return;
+    }
+
+    if (toReplace.nodeType === Node.ATTRIBUTE_NODE) {
+      const { ownerElement } = toReplace;
+      ownerElement.setAttribute(replaceWith.nodeName, replaceWith.textContent);
+      ownerElement.removeAttribute(toReplace.nodeName);
+      console.log('owner', ownerElement);
+    } else if (toReplace.nodeType === Node.ELEMENT_NODE) {
+      const cloned = replaceWith.cloneNode(true);
+      toReplace.replaceWith(cloned);
+    }
+    // const modelitem = this.getModelItem();
+    // this.getModel().changed.push(modelitem);
+    this.needsUpdate = true;
+  }
+}
+
+if (!customElements.get('fx-replace')) {
+  window.customElements.define('fx-replace', FxReplace);
+}

package/src/actions/fx-return.js

@@ -0,0 +1,42 @@
+import { AbstractAction } from './abstract-action.js';
+
+/**
+ * `fx-return`
+ * returns data from a nested Fore to it's host Fore.
+ *
+ * behaves like a `<fx-submission @replace='instance' with `targetref` and respects relevance processing.
+ *
+ * `targetref` will be the `ref` of the host control.
+ *
+ * todo: deos not relevant selection yet
+ *
+ * @customElement
+ */
+export class FxReturn extends AbstractAction {
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    // const nonrelevant = this.hasAttribute('nonrelevant') ? this.getAttribute('nonrelevant') : null;
+  }
+
+  perform() {
+    super.perform();
+    console.log('performing return with nodes', this.nodeset);
+
+    /*
+    ### note that this event does not use Fore.dispatch as the event uses 'composed:true' to let the event travel
+    up through the shadowRoot and being catched in outer form.
+    */
+    const event = new CustomEvent('return', {
+      composed: true,
+      bubbles: true,
+      detail: { nodeset: this.nodeset },
+    });
+    this.getOwnerForm().dispatchEvent(event);
+  }
+}
+
+if (!customElements.get('fx-return')) {
+  window.customElements.define('fx-return', FxReturn);
+}

package/src/actions/fx-send.js

@@ -45,4 +45,6 @@ class FxSend extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-send', FxSend);
+if (!customElements.get('fx-send')) {
+  window.customElements.define('fx-send', FxSend);
+}

package/src/actions/fx-setfocus.js

@@ -0,0 +1,37 @@
+import {AbstractAction} from "./abstract-action";
+import {resolveId} from "../xpath-evaluation";
+
+/**
+ * `fx-setfocus`
+ * Set the focus to a target control.
+ *
+ * @customElement
+ */
+export class FxSetfocus extends AbstractAction {
+  connectedCallback() {
+      super.connectedCallback();
+      this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
+  }
+
+  perform() {
+      console.log('setting focus', this.control);
+      // super.perform();
+
+      // const targetElement = resolveId(this.control, this);
+      const selector = '#'+this.control;
+      let targetElement = document.querySelector(selector);
+      const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
+      if(repeatitem){
+        // targetElement is repeated
+        // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
+        const repeat = repeatitem.parentNode;
+        targetElement = repeat.querySelector('[repeat-index] ' + selector);
+
+      }
+      targetElement.getWidget().focus();
+  }
+}
+
+if (!customElements.get('fx-setfocus')) {
+  window.customElements.define('fx-setfocus', FxSetfocus);
+}

package/src/actions/fx-setvalue.js

@@ -1,7 +1,7 @@
 // import { FxAction } from './fx-action.js';
 import '../fx-model.js';
-import { AbstractAction } from './abstract-action.js';
-import { evaluateXPath } from '../xpath-evaluation.js';
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPath} from '../xpath-evaluation.js';
 
 /**
  * `fx-setvalue`
@@ -9,64 +9,71 @@ import { evaluateXPath } from '../xpath-evaluation.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 = '';
-  }
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            valueAttr: {
+                type: String,
+            },
+        };
+    }
 
-  connectedCallback() {
-    if (super.connectedCallback) {
-      super.connectedCallback();
+    constructor() {
+        super();
+        this.ref = '';
+        this.valueAttr = '';
     }
 
-    if (this.hasAttribute('ref')) {
-      this.ref = this.getAttribute('ref');
-    } else {
-      throw new Error('fx-setvalue must specify a "ref" attribute');
+    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');
     }
-    this.valueAttr = this.getAttribute('value');
-  }
 
-  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 = '';
+    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 = '';
+        }
+        console.log('value', value);
+        if (value.nodeType === Node.ATTRIBUTE_NODE) {
+            console.log('value', value.nodeValue);
+            value = value.nodeValue;
+        }
+        const mi = this.getModelItem();
+        this.setValue(mi, value);
     }
-    const mi = this.getModelItem();
-    this.setValue(mi, value);
-  }
 
-  setValue(modelItem, newVal) {
-    console.log('setvalue[1]  ', modelItem, newVal);
+    setValue(modelItem, newVal) {
+        console.log('setvalue[1]  ', modelItem, newVal);
 
-    const item = modelItem;
-    if (!item) return;
+        const item = modelItem;
+        if (!item) return;
 
-    if (item.value !== newVal) {
-      item.value = newVal;
-      this.getModel().changed.push(modelItem);
-      this.needsUpdate = true;
-      console.log('setvalue[2] ', item, newVal);
+        if (item.value !== newVal) {
+            item.value = newVal;
+            this.getModel().changed.push(modelItem);
+            this.needsUpdate = true;
+            console.log('setvalue[2] ', item, newVal);
+        }
     }
-  }
 }
 
-window.customElements.define('fx-setvalue', FxSetvalue);
+if (!customElements.get('fx-setvalue')) {
+    window.customElements.define('fx-setvalue', FxSetvalue);
+}

package/src/actions/fx-show.js

@@ -1,4 +1,6 @@
+import { Fore } from '../fore.js';
 import { FxAction } from './fx-action.js';
+import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-confirm`
@@ -10,14 +12,20 @@ import { FxAction } from './fx-action.js';
 export class FxShow extends FxAction {
   connectedCallback() {
     this.dialog = this.getAttribute('dialog');
-    if(!this.dialog){
-      this.dispatch('error',{message:'dialog does not exist'})
+    if (!this.dialog) {
+      Fore.dispatch(this, 'error', { message: 'dialog does not exist' });
     }
   }
 
   perform() {
-    document.getElementById(this.dialog).open();
+    const targetDlg = resolveId(this.dialog,this);
+    if(!targetDlg){
+      console.error('target dialog with given id does not exist',this.dialog);
+    }
+    targetDlg.open();
   }
 }
 
-window.customElements.define('fx-show', FxShow);
+if (!customElements.get('fx-show')) {
+  window.customElements.define('fx-show', FxShow);
+}

package/src/actions/fx-toggle.js

@@ -1,22 +1,23 @@
-import { FxAction } from './fx-action.js';
+import { AbstractAction } from './abstract-action.js';
 
 /**
  * `fx-toggle`
  *
  */
-class FxToggle extends FxAction {
+class FxToggle extends AbstractAction {
+  /*
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+*/
   connectedCallback() {
+    super.connectedCallback();
     if (this.hasAttribute('case')) {
       this.case = this.getAttribute('case');
     }
   }
 
-  /*
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
-
-*/
   perform() {
     super.perform();
     console.log('### fx-toggle.execute ');
@@ -26,7 +27,10 @@ class FxToggle extends FxAction {
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }
+    // this.needsUpdate = true;
   }
 }
 
-window.customElements.define('fx-toggle', FxToggle);
+if (!customElements.get('fx-toggle')) {
+  window.customElements.define('fx-toggle', FxToggle);
+}

package/src/actions/fx-update.js

@@ -12,4 +12,6 @@ class FxUpdate extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-update', FxUpdate);
+if (!customElements.get('fx-update')) {
+  window.customElements.define('fx-update', FxUpdate);
+}

package/src/dep_graph.js

@@ -80,7 +80,7 @@ function createDFS(edges, leavesOnly, result, circular) {
           currentPath.push(node);
           window.dispatchEvent(
             new CustomEvent('compute-exception', {
-              composed: true,
+              composed: false,
               bubbles: true,
               detail: {
                 path: currentPath,