@jinntec/fore 1.0.0 → 1.1.0

package/src/fx-model.js

@@ -202,9 +202,14 @@ export class FxModel extends HTMLElement {
    * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
    */
   recalculate() {
+    if(!this.mainGraph){
+      return;
+    }
+
     console.group('### recalculate');
     console.log('changed nodes ', this.changed);
 
+
     console.time('recalculate');
     this.computes = 0;
 
@@ -215,7 +220,7 @@ export class FxModel extends HTMLElement {
         this.subgraph.addNode(modelItem.path, modelItem.node);
         // const dependents = this.mainGraph.dependantsOf(modelItem.path, false);
         // this._addSubgraphDependencies(modelItem.path);
-        if (this.mainGraph && this.mainGraph.hasNode(modelItem.path)) {
+        if (this.mainGraph.hasNode(modelItem.path)) {
           // const dependents = this.mainGraph.directDependantsOf(modelItem.path)
 
           const all = this.mainGraph.dependantsOf(modelItem.path, false);
@@ -245,7 +250,7 @@ export class FxModel extends HTMLElement {
       // ### compute the subgraph
       const ordered = this.subgraph.overallOrder(false);
       ordered.forEach(path => {
-        if (this.mainGraph && this.mainGraph.hasNode(path)) {
+        if (this.mainGraph.hasNode(path)) {
           const node = this.mainGraph.getNodeData(path);
           this.compute(node, path);
         }
@@ -371,8 +376,9 @@ export class FxModel extends HTMLElement {
    *
    */
   revalidate() {
-    console.group('### revalidate');
+    if(this.modelItems.length === 0) return true;
 
+    console.group('### revalidate');
     console.time('revalidate');
     let valid = true;
     this.modelItems.forEach(modelItem => {
@@ -402,6 +408,28 @@ export class FxModel extends HTMLElement {
             }
           }
         }
+        if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('required')) {
+          const required = bind.getAttribute('required');
+          if (required) {
+            const compute = evaluateXPathToBoolean(required, modelItem.node, this);
+            console.log('modelItem required computed: ', compute);
+            modelItem.required = compute;
+            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
+            if(!modelItem.node.textContent){
+               valid = false;
+            }
+            // if (!compute) valid = false;
+/*
+            if (!this.modelConstructed) {
+              // todo: get alert from attribute or child element
+              const alert = bind.getAlert();
+              if (alert) {
+                modelItem.addAlert(alert);
+              }
+            }
+*/
+          }
+        }
       }
     });
     console.timeEnd('revalidate');
@@ -428,7 +456,7 @@ export class FxModel extends HTMLElement {
   }
 
   getDefaultInstance() {
-    return this.instances[0];
+    return this?.instances[0];
   }
 
   getDefaultInstanceData() {

package/src/fx-submission.js

@@ -78,7 +78,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
     model.recalculate();
 
-    if (this.validate) {
+    if (this.validate==='true') {
       const valid = model.revalidate();
       if (!valid) {
         console.log('validation failed. Bubmission stopped');
@@ -145,18 +145,39 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
     // if (resolvedUrl === '#echo') {
     if (resolvedUrl.startsWith('#echo')) {
-      let data = null;
-      if (serialized && instance.type === 'xml') {
-        data = new DOMParser().parseFromString(serialized, 'application/xml');
-      }
-      if (serialized && instance.type === 'json') {
-        data = JSON.parse(serialized);
-      }
+      let data = this._parse(serialized, instance);
       this._handleResponse(data);
       // this.dispatch('submit-done', {});
       Fore.dispatch(this, 'submit-done', {});
       return;
     }
+
+    if(resolvedUrl.startsWith('localStore:') && this.method === 'post'){
+      // let data = this._parse(serialized, instance);
+      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+      localStorage.setItem(key,serialized);
+      Fore.dispatch(this, 'submit-done', {});
+      return;
+    }
+
+    if(resolvedUrl.startsWith('localStore:') && (this.method === 'consume' || this.method === 'get')){
+      // let data = this._parse(serialized, instance);
+      this.replace = 'instance';
+      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+      const serialized = localStorage.getItem(key);
+      if(!serialized){
+        Fore.dispatch(this, 'submit-error', { message: `Error reading key ${key} from localstorage` });
+        return;
+      }
+      let data = this._parse(serialized, instance);
+      this._handleResponse(data);
+      if(this.method === 'consume'){
+        localStorage.removeItem(key);
+      }
+      Fore.dispatch(this, 'submit-done', {});
+      return;
+    }
+
     // ### setting headers
     const headers = this._getHeaders();
     console.log('headers', headers);
@@ -209,6 +230,17 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     Fore.dispatch(this, 'submit-done', {});
   }
 
+  _parse(serialized, instance) {
+    let data = null;
+    if (serialized && instance.type === 'xml') {
+      data = new DOMParser().parseFromString(serialized, 'application/xml');
+    }
+    if (serialized && instance.type === 'json') {
+      data = JSON.parse(serialized);
+    }
+    return data;
+  }
+
   _serialize(instanceType, relevantNodes) {
     if (this.method === 'urlencoded-post') {
       // this.method = 'post';

package/src/relevance.js

@@ -21,8 +21,7 @@ export class Relevance {
     const mi = element.getModel().getModelItem(element.nodeset);
     if (mi && !mi.relevant) return null;
 
-    const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-    const root = doc.firstElementChild;
+    const root = element.nodeset.cloneNode(false);
 
     if (element.nodeset.children.length === 0 && Relevance._isRelevant(element, element.nodeset)) {
       return element.nodeset;

package/src/ui/abstract-control.js

@@ -56,7 +56,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         if (this.hasAttribute('as') && this.getAttribute('as') === 'node') {
           console.log('as', this.nodeset);
           this.modelItem.value = this.nodeset;
-          this.value = this.modelItem.value;
+          this.value = this.modelItem.node;
         } else {
           this.value = this.modelItem.value;
         }
@@ -135,8 +135,15 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip required', this.modelItem.required);
     this.widget = this.getWidget();
     // if (this.required !== this.modelItem.required) {
-    if (this.isRequired() !== this.modelItem.required) {
+    // if (this.isRequired() !== this.modelItem.required) {
       if (this.modelItem.required) {
+        if (this.getOwnerForm().ready){
+          if(this.widget.value === ''){
+            this.classList.add('isRequiredFalse');
+          }else{
+            this.classList.remove('isRequiredFalse');
+          }
+        }
         this.widget.setAttribute('required', '');
         this.setAttribute('required', '');
         this._dispatchEvent('required');
@@ -145,7 +152,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         this.removeAttribute('required');
         this._dispatchEvent('optional');
       }
-    }
+    // }
   }
 
   handleReadonly() {

package/src/ui/fx-case.js

@@ -26,7 +26,7 @@ class FxCase extends HTMLElement {
 
     const style = `
             :host {
-                display: none;
+                visibility: none;
             }
         `;
     const html = `
@@ -40,7 +40,6 @@ class FxCase extends HTMLElement {
             ${html}
     `;
 
-    this.style.display = 'none';
   }
 }
 

package/src/ui/fx-control.js

@@ -62,7 +62,15 @@ export default class FxControl extends XfAbstractControl {
 
     this.widget = this.getWidget();
     // console.log('widget ', this.widget);
+    let listenOn = this.widget // default: usually listening on widget
 
+    if(this.hasAttribute('listen-on')){
+      const q = this.getAttribute('listen-on');
+      const target = this.querySelector(q);
+      if(target){
+        listenOn = target;
+      }
+    }
     // ### convenience marker event
     if (this.updateEvent === 'enter') {
       this.widget.addEventListener('keyup', event => {
@@ -75,7 +83,7 @@ export default class FxControl extends XfAbstractControl {
       this.updateEvent = 'blur'; // needs to be registered too
     }
     if (this.debounceDelay) {
-      this.widget.addEventListener(
+      listenOn.addEventListener(
         this.updateEvent,
         debounce(() => {
           console.log('eventlistener ', this.updateEvent);
@@ -83,7 +91,7 @@ export default class FxControl extends XfAbstractControl {
         }, this.debounceDelay),
       );
     } else {
-      this.widget.addEventListener(this.updateEvent, () => {
+      listenOn.addEventListener(this.updateEvent, () => {
         console.log('eventlistener ', this.updateEvent);
         this.setValue(this.widget[this.valueProp]);
       });
@@ -141,13 +149,16 @@ export default class FxControl extends XfAbstractControl {
   setValue(val) {
     const modelitem = this.getModelItem();
 
-    if (modelitem?.readonly) return; // do nothing when modelItem is readonly
+    if (modelitem?.readonly){
+      console.warn('attempt to change readonly node', modelitem);
+      return; // do nothing when modelItem is readonly
+    }
 
     if (this.getAttribute('as') === 'node') {
       const widgetValue = this.getWidget().value;
       const replace = this.shadowRoot.getElementById('replace');
       replace.replace(this.nodeset, this.getWidget().value);
-      if (widgetValue && widgetValue !== modelitem.value) {
+      if (modelitem && widgetValue && widgetValue !== modelitem.value) {
         modelitem.value = widgetValue;
         replace.actionPerformed();
       }
@@ -238,15 +249,19 @@ export default class FxControl extends XfAbstractControl {
         widget.value = pretty;
       }
       if (as === 'node' && this.nodeset !== widget.value) {
-        const oldVal = this.nodeset.innerHTML;
+        // const oldVal = this.nodeset.innerHTML;
+        const oldVal = this.nodeset;
         if (widget.value) {
           if (oldVal !== this.widget.value) {
             console.log('changed');
+            widget.value = this.nodeset.cloneNode(true);
             return;
           }
         }
 
         widget.value = this.nodeset.cloneNode(true);
+        // todo: should be more like below but that can cause infinite loop when controll trigger update event due to calling a setter for property
+        // widget[this.valueProp] = this.nodeset.cloneNode(true);
         console.log('passed value to widget', widget.value);
       }
 
@@ -334,11 +349,13 @@ export default class FxControl extends XfAbstractControl {
           console.log('subcomponent ready', e.target);
           const defaultInst = theFore.querySelector('fx-instance');
           console.log('defaultInst', defaultInst);
-          const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-          // Note: Clone the input to prevent the inner fore from editing the outer node
-          doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
-          // defaultinst.setInstanceData(this.initialNode);
-          defaultInst.setInstanceData(doc);
+          if(this.initialNode){
+            const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+            // Note: Clone the input to prevent the inner fore from editing the outer node
+            doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
+            // defaultinst.setInstanceData(this.initialNode);
+            defaultInst.setInstanceData(doc);
+          }
           console.log('new data', defaultInst.getInstanceData());
           // theFore.getModel().modelConstruct();
           theFore.getModel().updateModel();
@@ -372,7 +389,7 @@ export default class FxControl extends XfAbstractControl {
 
   async refresh(force) {
     // console.log('fx-control refresh', this);
-    super.refresh();
+    super.refresh(force);
     // console.log('refresh template', this.template);
     // const {widget} = this;
 
@@ -418,6 +435,14 @@ export default class FxControl extends XfAbstractControl {
 
       // ### build the items
       if (this.template) {
+        if(this.widget.nodeName === "SELECT" &&
+            this.widget.hasAttribute('selection') &&
+            this.widget.getAttribute('selection') === 'open'){
+          const firstTemplateChild=this.template.firstElementChild;
+          const option = document.createElement('option');
+          this.widget.insertBefore(option,firstTemplateChild);
+        }
+
         if (nodeset.length) {
           // console.log('nodeset', nodeset);
           Array.from(nodeset).forEach(node => {

package/src/ui/fx-inspector.js

@@ -36,6 +36,7 @@ export class FxInspector extends HTMLElement {
             padding-left:var(--inspector-handle-width);
             color:var(--inspector-color);
             overflow:scroll;
+            height:100%;
           }
           pre{
             background:var(--inspector-pre-bg);
@@ -45,7 +46,7 @@ export class FxInspector extends HTMLElement {
           }
           .handle{
             display:block;
-            height:100vh;
+            height:100%;
             width:var(--inspector-handle-width);
             background:var(--inspector-handle-bg);
             opacity:0.7;
@@ -83,9 +84,9 @@ export class FxInspector extends HTMLElement {
   }
 
   update() {
-    console.log('update');
+    // console.log('update');
     const pre = this.shadowRoot.querySelectorAll('pre');
-    console.log('pre', pre);
+    // console.log('pre', pre);
     const fore = this.closest('fx-fore');
 
     Array.from(pre).forEach(element => {
@@ -111,7 +112,7 @@ export class FxInspector extends HTMLElement {
             <span class="handle"></span>
                 ${instances.map(
                   (instance, index) => `
-                  <details open>
+                  <details>
                       <summary>${instance.id}</summary>
                       <pre id="${instance.id}"></pre>
                   </details>
@@ -120,9 +121,10 @@ export class FxInspector extends HTMLElement {
             </div>
         `;
 
+/*
     const handle = this.shadowRoot.querySelector('.handle');
     handle.addEventListener('click', e => {
-      console.log('toggling');
+      // console.log('toggling');
       const { target } = e;
       if (this.hasAttribute('open')) {
         this.removeAttribute('open');
@@ -130,10 +132,11 @@ export class FxInspector extends HTMLElement {
         this.setAttribute('open', 'open');
       }
     });
+*/
   }
 
   serializeDOM(data) {
-    console.log('serializeDOM', data);
+    // console.log('serializeDOM', data);
     const ser = new XMLSerializer().serializeToString(data);
     return Fore.prettifyXml(ser);
   }

package/src/ui/fx-output.js

@@ -8,6 +8,7 @@ import getInScopeContext from '../getInScopeContext.js';
  * todo: review placing of value. should probably work with value attribute and not allow slotted content.
  */
 export class FxOutput extends XfAbstractControl {
+/*
   static get properties() {
     return {
       ...super.properties,
@@ -17,6 +18,7 @@ export class FxOutput extends XfAbstractControl {
     };
   }
 
+*/
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });

package/src/ui/fx-switch.js

@@ -39,7 +39,7 @@ class FxSwitch extends FxContainer {
   refresh() {
     super.refresh();
     console.log('refresh on switch ');
-    const cases = this.querySelectorAll('fx-case');
+    const cases = this.querySelectorAll(':scope > fx-case');
     if (this.isBound()) {
       Array.from(cases).forEach(caseElem => {
         const name = caseElem.getAttribute('name');
@@ -50,7 +50,7 @@ class FxSwitch extends FxContainer {
         }
       });
     } else {
-      const selected = this.querySelector('.selected-case');
+      const selected = this.querySelector(':scope > .selected-case');
       if (!selected) {
         cases[0].classList.add('selected-case');
       }