@jinntec/fore 1.5.0 → 1.6.0

package/src/ui/fx-group.js

@@ -1,4 +1,3 @@
-import { html } from 'lit-element';
 import { Fore } from '../fore.js';
 // import XfAbstractControl from "./fx-abstract-control";
 import { FxContainer } from './fx-container.js';
@@ -36,7 +35,7 @@ class FxGroup extends FxContainer {
   }
 
   render() {
-    return html`
+    return `
       <slot></slot>
     `;
   }
@@ -52,10 +51,10 @@ class FxGroup extends FxContainer {
 
   initializeChildren(node) {
     const children = Array.from(node.children);
-    console.log('_initializeChildren ', children);
+    // console.log('_initializeChildren ', children);
 
     children.forEach(child => {
-      console.log('child ', child);
+      // console.log('child ', child);
 
       if (Fore.isUiElement(child.nodeName)) {
         child.init(this.model);

package/src/ui/fx-hint.js

@@ -1,10 +1,8 @@
-import { html, css } from 'lit-element';
-
 import XfAbstractControl from './abstract-control.js';
 
 export class FxHint extends XfAbstractControl {
   static get styles() {
-    return css`
+    return `
       :host {
         display: block;
         height: auto;
@@ -22,7 +20,7 @@ export class FxHint extends XfAbstractControl {
   }
 
   render() {
-    return html`
+    return `
       <slot></slot>
     `;
   }

package/src/ui/fx-inspector.js

@@ -1,4 +1,4 @@
-import { Fore } from '../fore.js';
+import { prettifyXml } from '../functions/common-function.js';
 
 /**
  * lists out all live instances in html 'details' and 'summary' elements.
@@ -92,10 +92,10 @@ export class FxInspector extends HTMLElement {
 
     Array.from(pre).forEach(element => {
       const inst = fore.getModel().getInstance(element.getAttribute('id'));
-      if (inst.type === 'xml') {
+      if (inst.getAttribute('type') === 'xml') {
         element.innerText = this.serializeDOM(inst.instanceData);
       }
-      if (inst.type === 'json') {
+      if (inst.getAttribute('type') === 'json') {
         element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
       }
     });
@@ -112,7 +112,7 @@ export class FxInspector extends HTMLElement {
             <slot></slot>
             <span class="handle"></span>
                 ${instances.map(
-                  (instance, index) => `
+                  (instance) => `
                   <details>
                       <summary>${instance.id}</summary>
                       <pre id="${instance.id}"></pre>
@@ -125,7 +125,6 @@ export class FxInspector extends HTMLElement {
     const handle = this.shadowRoot.querySelector('.handle');
     handle.addEventListener('click', e => {
       // console.log('toggling');
-      const { target } = e;
       if (this.hasAttribute('open')) {
         this.removeAttribute('open');
       } else {
@@ -141,7 +140,7 @@ export class FxInspector extends HTMLElement {
     }
     // console.log('serializeDOM', data);
     const ser = new XMLSerializer().serializeToString(data);
-    return Fore.prettifyXml(ser);
+    return prettifyXml(ser);
   }
 }
 

package/src/ui/fx-items.js

@@ -1,6 +1,7 @@
-import { evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
+import { evaluateXPath,evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
+import { XPathUtil} from "../xpath-util.js";
 
 /**
  * FxItems provices a templated list over its bound nodes. It is not standalone but expects to be used
@@ -27,10 +28,38 @@ export class FxItems extends FxControl {
 
   connectedCallback() {
     super.connectedCallback();
+    // Some other library is stealing focus when clicking on the label of a checkbox list.
+    // The browser should handle this, but we need to manually focus the checkbox if the label is pressed
+    // TODO: find a better solution
+    this.addEventListener('mousedown', e => {
+      // const items = this.querySelectorAll('[value]');
+
+      if (!Fore.isWidget(e.target)) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
 
-    this.addEventListener('click', e => {
+      if (e.target.nodeName === 'LABEL') {
+        const target = resolveId(e.target.getAttribute('for'), this);
+        target.focus();
+      }
+    });
+
+    // Some other library is stealing focus when clicking on the label of a checkbox list.
+    // The browser should handle this, but we need to manually focus the checkbox if the label is pressed
+    // TODO: find a better solution
+    this.addEventListener('mousedown', e => {
       const items = this.querySelectorAll('[value]');
 
+      if (e.target.nodeName === 'LABEL') {
+	      const target = resolveId(e.target.getAttribute('for'), this);
+	      target.focus();
+      }
+	});
+    this.addEventListener('click', e => {
+      e.preventDefault;
+      e.stopPropagation();
+      const items = this.querySelectorAll('[value]');
       let target;
       if (e.target.nodeName === 'LABEL') {
         target = resolveId(e.target.getAttribute('for'), this);
@@ -46,7 +75,7 @@ export class FxItems extends FxControl {
       this.setAttribute('value', val.trim());
 
       // ### check for parent control
-      const parentBind = Fore.getClosest('[ref]', this.parentNode);
+      const parentBind = XPathUtil.getClosest('[ref]', this.parentNode);
       if (!parentBind) return;
       const modelitem = parentBind.getModelItem();
       const setval = this.shadowRoot.getElementById('setvalue');
@@ -62,7 +91,7 @@ export class FxItems extends FxControl {
   async updateWidgetValue() {
     // console.log('setting items value');
 
-    const parentBind = Fore.getClosest('[ref]', this.parentNode);
+    const parentBind = XPathUtil.getClosest('[ref]', this.parentNode);
     if (parentBind) {
       this.value = parentBind.value;
     }
@@ -84,28 +113,40 @@ export class FxItems extends FxControl {
    */
   updateEntry(newEntry, node) {
     // console.log('fx-items updateEntry', this.value);
-    // super.updateEntry(newEntry,node);
 
-    // ### danger zone - highly specific - assumes knowledge of the template structure ###
-    // ### danger zone - highly specific - assumes knowledge of the template structure ###
-    // ### danger zone - highly specific - assumes knowledge of the template structure ###
+    // ### create unique id to connect label and input
+    const id = Fore.createUUID();
 
+    // ### handle 'label'
     const label = newEntry.querySelector('label');
-    label.textContent = node.textContent;
-
-    const id = Fore.createUUID();
+    const lblExpr = Fore.getExpression(label.textContent);
+
+    // ### xml / JSON
+    if(node.nodeType){
+      const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
+      label.textContent = lblEvaluated;
+    } else{
+      const labelExpr = Fore.getExpression(lblExpr);
+      label.textContent = node[labelExpr];
+    }
     label.setAttribute('for', id);
 
+    // ### handle the 'value'
     // getting element which has 'value' attr
     const input = newEntry.querySelector('[value]');
     // getting expr
     const expr = input.value;
-    const cutted = expr.substring(1, expr.length - 1);
-    const evaluated = evaluateXPathToString(cutted, node, newEntry);
+    // const cutted = expr.substring(1, expr.length - 1);
+    const cutted = Fore.getExpression(expr);
+    let evaluated;
+    if(node.nodeType){
+      evaluated =  evaluateXPathToString(cutted, node, newEntry);
+    }else{
+      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);

package/src/ui/fx-output.js

@@ -31,6 +31,7 @@ export class FxOutput extends XfAbstractControl {
     const style = `
           :host {
             display: inline-block;
+            max-width:100%;
           }
           #widget {
             display: inline-block;
@@ -38,14 +39,8 @@ export class FxOutput extends XfAbstractControl {
           .label{
             display: inline-block;
           }
-          table,tbody{
-            width:100%;
-          }
-          th{
-            text-align:left;
-          }
-          td{
-            padding-right:1rem;
+          #value{
+            max-width:100%;
           }
         `;
 
@@ -53,7 +48,7 @@ export class FxOutput extends XfAbstractControl {
             <slot name="label"></slot>
             
             <span id="value">
-                <slot></slot>
+                <slot name="default"></slot>
             </span>
         `;
 
@@ -117,7 +112,7 @@ export class FxOutput extends XfAbstractControl {
   async updateWidgetValue() {
     // console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
-
+    valueWrapper.innerHTML = '';
 
     // if (this.mediatype === 'markdown') {
     //   const md = markdown(this.nodeset);
@@ -126,13 +121,27 @@ export class FxOutput extends XfAbstractControl {
 
     if (this.mediatype === 'html') {
       if (this.modelItem.node) {
-        /*
-        valueWrapper.innerHTML = this.modelItem.node.outerHTML;
-        return;
-*/
 
+        const defaultSlot = this.shadowRoot.querySelector('#default');
         const { node } = this.modelItem;
+        if (node.nodeType) {
+
+          valueWrapper.append(node);
+          // this.appendChild(node);
+          return;
+        }
+
+        // ### try to parse as string
+        const tmpDoc = new DOMParser().parseFromString(node,'text/html');
+        const theNode = tmpDoc.body.childNodes;
+        // console.log('actual node', theNode)
+        Array.from(theNode).forEach(n =>{
+          valueWrapper.append(n);
+        });
+        // valueWrapper.append(theNode);
 
+        // valueWrapper.innerHTML=node;
+/*
         if (node.nodeType) {
           this.appendChild(node);
           return;
@@ -141,11 +150,19 @@ export class FxOutput extends XfAbstractControl {
           // valueWrapper.appendChild(obj[1]);
           this.appendChild(obj[1]);
         });
+*/
+/*
+        Object.entries(node).map(obj => {
+          // valueWrapper.appendChild(obj[1]);
+          this.appendChild(obj[1]);
+        });
+*/
+
         return;
       }
 
       // this.innerHTML = this.value.outerHTML;
-      valueWrapper.innerHTML = this.value.outerHTML;
+      // valueWrapper.innerHTML = this.value.outerHTML;
 
       // this.shadowRoot.appendChild(this.value);
       return;
@@ -153,8 +170,10 @@ export class FxOutput extends XfAbstractControl {
 
     if(this.mediatype === 'image'){
       const img = document.createElement('img');
-      img.setAttribute('src',this.value);
-      this.appendChild(img);
+		img.setAttribute('src',this.value);
+		// Reset the output before adding the image
+		this.innerHTML = '';
+      valueWrapper.appendChild(img);
       return;
     }
 

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

@@ -99,13 +99,13 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     return refd.children;
   }
   async connectedCallback() {
-    console.log('connectedCallback',this);
+    // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
     // this.ref = this._getRef();
     // console.log('### fx-repeat connected ', this.id);
     this.addEventListener('item-changed', e => {
-      console.log('handle index event ', e);
+      // console.log('handle index event ', e);
       const { item } = e.detail;
       const repeatedItems = this._getRepeatedItems();
       const idx = Array.from(repeatedItems).indexOf(item);
@@ -116,9 +116,6 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     document.addEventListener('index-changed', e => {
       e.stopPropagation();
       if (!e.target === this) return;
-      console.log('handle index event ', e);
-      // const { item } = e.detail;
-      // const idx = Array.from(this.children).indexOf(item);
       const { index } = e.detail;
       this.index = Number(index);
       this.applyIndex(this.children[index - 1]);
@@ -133,13 +130,11 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
 
     // if (this.getOwnerForm().lazyRefresh) {
     this.mutationObserver = new MutationObserver(mutations => {
-      console.log('mutations', mutations);
 
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
           const path = XPathUtil.getPath(added);
-          console.log('path mutated', path);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
           // const prev = mutations[0].previousSibling.previousElementSibling;
@@ -182,7 +177,7 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     // ### there must be a single 'template' child
 
     const inited = new Promise(resolve => {
-      console.log('##### repeat-attributes init ', this.id);
+      // 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();
@@ -231,12 +226,9 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
   }
 
   async refresh(force) {
-    // console.group('fx-repeat.refresh on', this.id);
 
     if (!this.inited) this.init();
-    console.time('repeat-refresh', this);
     this._evalNodeset();
-    // console.log('repeat refresh nodeset ', this.nodeset);
 
     let repeatItems = this.querySelectorAll('.fx-repeatitem');
     let repeatItemCount = repeatItems.length;
@@ -268,6 +260,7 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
         // add new repeatitem
 
         const clonedTemplate = this._clone();
+        if(!clonedTemplate) return;
 
         // ### cloned templates are always appended to the binding element - the one having the data-ref
         const bindingElement = this.querySelector('[data-ref]');
@@ -309,13 +302,9 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     // this.style.display = 'block';
     // this.style.display = this.display;
     this.setIndex(this.index);
-    console.timeEnd('repeat-refresh');
-
-    console.groupEnd();
   }
 
   _dispatchIndexChange() {
-    // console.log('_dispatchIndexChange on index ', this.index);
       this.dispatchEvent(
           new CustomEvent('item-changed', { composed: false, bubbles: true, detail: { item: this , index:this.index } }),
       );
@@ -355,15 +344,13 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
   }
 
   async _initTemplate() {
-    // const shadowTemplate = this.shadowRoot.querySelector('template');
-    // console.log('shadowtempl ', shadowTemplate);
 
     // const defaultSlot = this.shadowRoot.querySelector('slot');
     // todo: this is still weak - should handle that better maybe by an explicit slot?
     // this.template = this.firstElementChild;
     this.template = this.querySelector('template');
-    console.log('### init template for repeat ', this.id, this.template);
 
+/*
     if (this.template === null) {
       // console.error('### no template found for this repeat:', this.id);
       // todo: catch this on form element
@@ -375,31 +362,14 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
         }),
       );
     }
+*/
+    if(!this.template) {
+      return;
+    }
 
     this.shadowRoot.appendChild(this.template);
   }
 
-/*
-  _initRepeatItems() {
-    console.log('_initRepeatItems', this.nodeset);
-    // const model = this.getModel();
-    // this.textContent = '';
-    Array.from(this.nodeset).forEach((item, index) => {
-
-      const clone = this._clone();
-      this.appendChild(clone);
-/!*
-      this.appendChild(repeatItem);
-
-      if (item.index === 1) {
-        this.applyIndex(item);
-      }
-
-      this._initVariables(item);
-*!/
-    });
-  }
-*/
 
   _initVariables(newRepeatItem) {
     const inScopeVariables = new Map(this.inScopeVariables);
@@ -415,11 +385,8 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
   }
 
   _clone() {
-    // const content = this.template.content.cloneNode(true);
     this.template = this.shadowRoot.querySelector('template');
-    // this.template = this.querySelector('template');
-    // const content = this.template.content.cloneNode(true);
-    // return document.importNode(content, true);
+    if(!this.template) return;
     return this.template.content.firstElementChild.cloneNode(true);
   }
 

package/src/ui/fx-repeat.js

@@ -95,13 +95,12 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
   }
 
   connectedCallback() {
-    console.log('connectedCallback',this);
+    // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
     // this.ref = this._getRef();
     // console.log('### fx-repeat connected ', this.id);
     this.addEventListener('item-changed', e => {
-      console.log('handle index event ', e);
       const { item } = e.detail;
       const idx = Array.from(this.children).indexOf(item);
       this.applyIndex(this.children[idx]);
@@ -111,7 +110,6 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     document.addEventListener('index-changed', e => {
       e.stopPropagation();
       if (!e.target === this) return;
-      console.log('handle index event ', e);
       // const { item } = e.detail;
       // const idx = Array.from(this.children).indexOf(item);
       const { index } = e.detail;
@@ -128,13 +126,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
     // if (this.getOwnerForm().lazyRefresh) {
     this.mutationObserver = new MutationObserver(mutations => {
-      console.log('mutations', mutations);
+      // console.log('mutations', mutations);
 
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
           const path = XPathUtil.getPath(added);
-          console.log('path mutated', path);
+          // console.log('path mutated', path);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
           // const prev = mutations[0].previousSibling.previousElementSibling;
@@ -289,7 +287,6 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
     // this.repeatCount = contextSize;
     // console.log('repeatCount', this.repeatCount);
-    console.groupEnd();
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -365,7 +362,8 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       if (repeatItem.index === 1) {
         this.applyIndex(repeatItem);
       }
-
+      // console.log('*********repeat item created', repeatItem.nodeset)
+      Fore.dispatch(this,'item-created',{nodeset:repeatItem.nodeset, pos:index+1});
       this._initVariables(repeatItem);
     });
   }

package/src/ui/fx-switch.js

@@ -15,6 +15,10 @@ class FxSwitch extends FxContainer {
       }
     */
 
+  constructor() {
+    super();
+    this.formerCase = {};
+  }
   connectedCallback() {
     if (super.connectedCallback) {
       super.connectedCallback();
@@ -39,11 +43,11 @@ class FxSwitch extends FxContainer {
     super.refresh();
     // console.log('refresh on switch ');
     const cases = this.querySelectorAll(':scope > fx-case');
-    let selectedCase;
+    let selectedCase = cases[0]; // first is always default
     if (this.isBound()) {
       Array.from(cases).forEach(caseElem => {
         const name = caseElem.getAttribute('name');
-        if (name === this.modelItem.value) {
+        if (name === this.modelItem?.value) {
           Fore.dispatch(caseElem,'select',{});
           caseElem.classList.add('selected-case');
           selectedCase = caseElem;
@@ -58,13 +62,20 @@ class FxSwitch extends FxContainer {
       selectedCase = this.querySelector(':scope > .selected-case');
       // if none is selected select the first as default
       if (!selectedCase) {
-        selectedCase = cases[0];
+        selectedCase = cases[0]; // if nothing is selected use the first case
         Fore.dispatch(selectedCase,'select',{});
         selectedCase.classList.add('selected-case');
       }
     }
+    if(this.formerCase !== selectedCase){
+      const visited = selectedCase.querySelectorAll('.visited');
+      Array.from(visited).forEach(v =>{
+        v.classList.remove('visited');
+      });
+    }
 
     Fore.refreshChildren(selectedCase,force);
+    this.formerCase = selectedCase;
   }
 
   toggle(caseElement) {

package/src/ui/fx-trigger.js

@@ -1,5 +1,6 @@
 import XfAbstractControl from './abstract-control.js';
 import { leadingDebounce } from '../events.js';
+import {resolveId} from "../xpath-evaluation";
 
 export class FxTrigger extends XfAbstractControl {
   connectedCallback() {
@@ -28,6 +29,11 @@ export class FxTrigger extends XfAbstractControl {
 
       const element = elements[0];
 
+      this.addEventListener('mousedown', e => {
+        console.log('target', e.target.nodeName);
+          e.target.focus();
+      });
+
       if (this.debounceDelay) {
         this.addEventListener(
           'click',
@@ -85,7 +91,7 @@ export class FxTrigger extends XfAbstractControl {
     // todo: support readonly for trigger not executing the action
     const repeatedItem = this.closest('fx-repeatitem');
     if (repeatedItem) {
-      console.log('repeated click');
+      // console.log('repeated click');
       repeatedItem.click();
     }
 
@@ -95,6 +101,12 @@ export class FxTrigger extends XfAbstractControl {
     for (let i = 0; i < this.children.length; i += 1) {
       const child = this.children[i];
       if (typeof child.execute === 'function') {
+        if (e) {
+          // We are handling the event. Stop it from going further
+          e.preventDefault();
+          e.stopPropagation();
+          if(e.type && child.event && e.type !== child.event) return;
+        }
         // eslint-disable-next-line no-await-in-loop
         await child.execute(e);
         // child.execute(e);