@jinntec/fore 1.0.0-4 → 1.1.0

package/src/actions/fx-replace.js

@@ -0,0 +1,73 @@
+// 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) {
+    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,23 +1,25 @@
-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();
-    }
-
-*/
-  execute() {
+  perform() {
+    super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();
@@ -25,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,
@@ -91,7 +91,9 @@ function createDFS(edges, leavesOnly, result, circular) {
           // return;
           // console.log('‘circular path: ' + currentPath);
           // throw new DepGraphCycleError(currentPath);
-          // throw new Error(currentPath);
+
+          // Stop all processing. This form is broken and we should not break the browser
+          throw new Error(`Cyclic at ${currentPath}`);
         }
 
         inCurrentPath[node] = true;

package/src/drawdown.js

@@ -4,72 +4,67 @@
  */
 
 function markdown(src) {
-  var rx_lt = /</g;
-  var rx_gt = />/g;
-  var rx_space = /\t|\r|\uf8ff/g;
-  var rx_escape = /\\([\\\|`*_{}\[\]()#+\-~])/g;
-  var rx_hr = /^([*\-=_] *){3,}$/gm;
-  var rx_blockquote = /\n *&gt; *([^]*?)(?=(\n|$){2})/g;
-  var rx_list = /\n( *)(?:[*\-+]|((\d+)|([a-z])|[A-Z])[.)]) +([^]*?)(?=(\n|$){2})/g;
-  var rx_listjoin = /<\/(ol|ul)>\n\n<\1>/g;
-  var rx_highlight = /(^|[^A-Za-z\d\\])(([*_])|(~)|(\^)|(--)|(\+\+)|`)(\2?)([^<]*?)\2\8(?!\2)(?=\W|_|$)/g;
-  var rx_code = /\n((```|~~~).*\n?([^]*?)\n?\2|((    .*?\n)+))/g;
-  var rx_link = /((!?)\[(.*?)\]\((.*?)( ".*")?\)|\\([\\`*_{}\[\]()#+\-.!~]))/g;
-  var rx_table = /\n(( *\|.*?\| *\n)+)/g;
-  var rx_thead = /^.*\n( *\|( *\:?-+\:?-+\:? *\|)* *\n|)/;
-  var rx_row = /.*\n/g;
-  var rx_cell = /\||(.*?[^\\])\|/g;
-  var rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
-  var rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
-  var rx_stash = /-\d+\uf8ff/g;
+  const rx_lt = /</g;
+  const rx_gt = />/g;
+  const rx_space = /\t|\r|\uf8ff/g;
+  const rx_escape = /\\([\\\|`*_{}\[\]()#+\-~])/g;
+  const rx_hr = /^([*\-=_] *){3,}$/gm;
+  const rx_blockquote = /\n *&gt; *([^]*?)(?=(\n|$){2})/g;
+  const rx_list = /\n( *)(?:[*\-+]|((\d+)|([a-z])|[A-Z])[.)]) +([^]*?)(?=(\n|$){2})/g;
+  const rx_listjoin = /<\/(ol|ul)>\n\n<\1>/g;
+  const rx_highlight = /(^|[^A-Za-z\d\\])(([*_])|(~)|(\^)|(--)|(\+\+)|`)(\2?)([^<]*?)\2\8(?!\2)(?=\W|_|$)/g;
+  const rx_code = /\n((```|~~~).*\n?([^]*?)\n?\2|(( {4}.*?\n)+))/g;
+  const rx_link = /((!?)\[(.*?)\]\((.*?)( ".*")?\)|\\([\\`*_{}\[\]()#+\-.!~]))/g;
+  const rx_table = /\n(( *\|.*?\| *\n)+)/g;
+  const rx_thead = /^.*\n( *\|( *\:?-+\:?-+\:? *\|)* *\n|)/;
+  const rx_row = /.*\n/g;
+  const rx_cell = /\||(.*?[^\\])\|/g;
+  const rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
+  const rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
+  const rx_stash = /-\d+\uf8ff/g;
 
   function replace(rex, fn) {
     src = src.replace(rex, fn);
   }
 
   function element(tag, content) {
-    return '<' + tag + '>' + content + '</' + tag + '>';
+    return `<${tag}>${content}</${tag}>`;
   }
 
   function blockquote(src) {
-    return src.replace(rx_blockquote, function(all, content) {
-      return element('blockquote', blockquote(highlight(content.replace(/^ *&gt; */gm, ''))));
-    });
+    return src.replace(rx_blockquote, (all, content) =>
+      element('blockquote', blockquote(highlight(content.replace(/^ *&gt; */gm, '')))),
+    );
   }
 
   function list(src) {
-    return src.replace(rx_list, function(all, ind, ol, num, low, content) {
-      var entry = element(
+    return src.replace(rx_list, (all, ind, ol, num, low, content) => {
+      const entry = element(
         'li',
         highlight(
           content
-            .split(RegExp('\n ?' + ind + '(?:(?:\\d+|[a-zA-Z])[.)]|[*\\-+]) +', 'g'))
+            .split(RegExp(`\n ?${ind}(?:(?:\\d+|[a-zA-Z])[.)]|[*\\-+]) +`, 'g'))
             .map(list)
             .join('</li><li>'),
         ),
       );
 
-      return (
-        '\n' +
-        (ol
-          ? '<ol start="' +
-            (num
-              ? ol + '">'
-              : parseInt(ol, 36) -
-                9 +
-                '" style="list-style-type:' +
-                (low ? 'low' : 'upp') +
-                'er-alpha">') +
-            entry +
-            '</ol>'
-          : element('ul', entry))
-      );
+      return `\n${
+        ol
+          ? `<ol start="${
+              num
+                ? `${ol}">`
+                : `${parseInt(ol, 36) - 9}" style="list-style-type:${low ? 'low' : 'upp'}er-alpha">`
+            }${entry}</ol>`
+          : element('ul', entry)
+      }`;
     });
   }
 
   function highlight(src) {
-    return src.replace(rx_highlight, function(all, _, p1, emp, sub, sup, small, big, p2, content) {
-      return (
+    return src.replace(
+      rx_highlight,
+      (all, _, p1, emp, sub, sup, small, big, p2, content) =>
         _ +
         element(
           emp
@@ -88,19 +83,18 @@ function markdown(src) {
             ? 'big'
             : 'code',
           highlight(content),
-        )
-      );
-    });
+        ),
+    );
   }
 
   function unesc(str) {
     return str.replace(rx_escape, '$1');
   }
 
-  var stash = [];
-  var si = 0;
+  const stash = [];
+  let si = 0;
 
-  src = '\n' + src + '\n';
+  src = `\n${src}\n`;
 
   replace(rx_lt, '&lt;');
   replace(rx_gt, '&gt;');
@@ -117,56 +111,47 @@ function markdown(src) {
   replace(rx_listjoin, '');
 
   // code
-  replace(rx_code, function(all, p1, p2, p3, p4) {
-    stash[--si] = element('pre', element('code', p3 || p4.replace(/^    /gm, '')));
-    return si + '\uf8ff';
+  replace(rx_code, (all, p1, p2, p3, p4) => {
+    stash[--si] = element('pre', element('code', p3 || p4.replace(/^ {4}/gm, '')));
+    return `${si}\uf8ff`;
   });
 
   // link or image
-  replace(rx_link, function(all, p1, p2, p3, p4, p5, p6) {
+  replace(rx_link, (all, p1, p2, p3, p4, p5, p6) => {
     stash[--si] = p4
       ? p2
-        ? '<img src="' + p4 + '" alt="' + p3 + '"/>'
-        : '<a href="' + p4 + '">' + unesc(highlight(p3)) + '</a>'
+        ? `<img src="${p4}" alt="${p3}"/>`
+        : `<a href="${p4}">${unesc(highlight(p3))}</a>`
       : p6;
-    return si + '\uf8ff';
+    return `${si}\uf8ff`;
   });
 
   // table
-  replace(rx_table, function(all, table) {
-    var sep = table.match(rx_thead)[1];
-    return (
-      '\n' +
-      element(
-        'table',
-        table.replace(rx_row, function(row, ri) {
-          return row == sep
-            ? ''
-            : element(
-                'tr',
-                row.replace(rx_cell, function(all, cell, ci) {
-                  return ci ? element(sep && !ri ? 'th' : 'td', unesc(highlight(cell || ''))) : '';
-                }),
-              );
-        }),
-      )
-    );
+  replace(rx_table, (all, table) => {
+    const sep = table.match(rx_thead)[1];
+    return `\n${element(
+      'table',
+      table.replace(rx_row, (row, ri) =>
+        row == sep
+          ? ''
+          : element(
+              'tr',
+              row.replace(rx_cell, (all, cell, ci) =>
+                ci ? element(sep && !ri ? 'th' : 'td', unesc(highlight(cell || ''))) : '',
+              ),
+            ),
+      ),
+    )}`;
   });
 
   // heading
-  replace(rx_heading, function(all, _, p1, p2) {
-    return _ + element('h' + p1.length, unesc(highlight(p2)));
-  });
+  replace(rx_heading, (all, _, p1, p2) => _ + element(`h${p1.length}`, unesc(highlight(p2))));
 
   // paragraph
-  replace(rx_para, function(all, content) {
-    return element('p', unesc(highlight(content)));
-  });
+  replace(rx_para, (all, content) => element('p', unesc(highlight(content))));
 
   // stash
-  replace(rx_stash, function(all) {
-    return stash[parseInt(all)];
-  });
+  replace(rx_stash, all => stash[parseInt(all)]);
 
   return src.trim();
 }