@jinntec/fore 2.1.1 → 2.3.0

package/src/ui/fx-dialog.js

@@ -39,10 +39,10 @@ export class FxDialog extends HTMLElement {
         this.classList.remove('show');
       });
     }
-    this.setAttribute('role','dialog');
-    this.setAttribute('aria-modal','false');
+    this.setAttribute('role', 'dialog');
+    this.setAttribute('aria-modal', 'false');
 
-/*
+    /*
     this.addEventListener('transitionend', () => {
       console.log('transitionend');
       // this.style.display = 'none';

package/src/ui/fx-droptarget.js

@@ -1,9 +1,8 @@
-import { foreElementMixin } from '../ForeElementMixin.js';
+import ForeElementMixin from '../ForeElementMixin.js';
 import { withDraggability } from '../withDraggability.js';
 
-class FxDroptarget extends withDraggability(foreElementMixin(HTMLElement)) {
-}
+class FxDroptarget extends withDraggability(ForeElementMixin) {}
 
 if (!customElements.get('fx-droptarget')) {
-    window.customElements.define('fx-droptarget', FxDroptarget);
+  window.customElements.define('fx-droptarget', FxDroptarget);
 }

package/src/ui/fx-group.js

@@ -33,10 +33,12 @@ class FxGroup extends FxContainer {
     super();
     this.collapse = false;
   }
+
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role','group');
+    this.setAttribute('role', 'group');
   }
+
   render() {
     return `
       <slot></slot>
@@ -89,7 +91,7 @@ class FxGroup extends FxContainer {
 
   async refresh(force) {
     super.refresh(force);
-    Fore.refreshChildren(this,force);
+    Fore.refreshChildren(this, force);
   }
 }
 

package/src/ui/fx-hint.js

@@ -1,5 +1,8 @@
 import XfAbstractControl from './abstract-control.js';
 
+/**
+ * @deprecated - can easily be substituted with template expression and usual <span>.
+ */
 export class FxHint extends XfAbstractControl {
   static get styles() {
     return `

package/src/ui/fx-inspector.js

@@ -86,7 +86,7 @@ export class FxInspector extends HTMLElement {
 
   update() {
     // console.log('update');
-    try{
+    try {
       const pre = this.shadowRoot.querySelectorAll('pre');
       // console.log('pre', pre);
       const fore = this.closest('fx-fore');
@@ -100,7 +100,7 @@ export class FxInspector extends HTMLElement {
           element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
         }
       });
-    }catch (e){
+    } catch (e) {
       console.warn('caught problem in inspector', e.message);
     }
   }
@@ -116,7 +116,7 @@ export class FxInspector extends HTMLElement {
             <slot></slot>
             <span class="handle"></span>
                 ${instances.map(
-                  (instance) => `
+                  instance => `
                   <details>
                       <summary>${instance.id}</summary>
                       <pre id="${instance.id}"></pre>
@@ -138,9 +138,9 @@ export class FxInspector extends HTMLElement {
   }
 
   serializeDOM(data) {
-    if(!data){
+    if (!data) {
       console.warn('no data to serialize');
-      return ;
+      return;
     }
     // console.log('serializeDOM', data);
     const ser = new XMLSerializer().serializeToString(data);

package/src/ui/fx-items.js

@@ -1,10 +1,10 @@
-import { evaluateXPath,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";
+import { XPathUtil } from '../xpath-util.js';
 
 /**
- * FxItems provices a templated list over its bound nodes. It is not standalone but expects to be used
+ * FxItems provides a templated list over its bound nodes. It is not standalone but expects to be used
  * within an fx-control element.
  *
  *
@@ -52,10 +52,10 @@ export class FxItems extends FxControl {
       const items = this.querySelectorAll('[value]');
 
       if (e.target.nodeName === 'LABEL') {
-	      const target = resolveId(e.target.getAttribute('for'), this);
-	      target.focus();
+        const target = resolveId(e.target.getAttribute('for'), this);
+        target.focus();
       }
-	});
+    });
     this.addEventListener('click', e => {
       e.preventDefault;
       e.stopPropagation();
@@ -122,10 +122,10 @@ export class FxItems extends FxControl {
     const lblExpr = Fore.getExpression(label.textContent);
 
     // ### xml / JSON
-    if(node.nodeType){
+    if (node.nodeType) {
       const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
       label.textContent = lblEvaluated;
-    } else{
+    } else {
       const labelExpr = Fore.getExpression(lblExpr);
       label.textContent = node[labelExpr];
     }
@@ -139,9 +139,9 @@ export class FxItems extends FxControl {
     // const cutted = expr.substring(1, expr.length - 1);
     const cutted = Fore.getExpression(expr);
     let evaluated;
-    if(node.nodeType){
-      evaluated =  evaluateXPathToString(cutted, node, newEntry);
-    }else{
+    if (node.nodeType) {
+      evaluated = evaluateXPathToString(cutted, node, newEntry);
+    } else {
       evaluated = node[cutted];
     }
 

package/src/ui/fx-output.js

@@ -8,7 +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,
@@ -63,7 +63,7 @@ export class FxOutput extends XfAbstractControl {
     // console.log('widget ', this.widget);
     this.mediatype = this.hasAttribute('mediatype') ? this.getAttribute('mediatype') : null;
 
-/*
+    /*
     this.addEventListener('slotchange', e => {
       console.log('slotchange ', e);
     });
@@ -121,27 +121,25 @@ export class FxOutput extends XfAbstractControl {
 
     if (this.mediatype === 'html') {
       if (this.modelItem.node) {
-
         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 tmpDoc = new DOMParser().parseFromString(node, 'text/html');
         const theNode = tmpDoc.body.childNodes;
         // console.log('actual node', theNode)
-        Array.from(theNode).forEach(n =>{
+        Array.from(theNode).forEach(n => {
           valueWrapper.append(n);
         });
         // valueWrapper.append(theNode);
 
         // valueWrapper.innerHTML=node;
-/*
+        /*
         if (node.nodeType) {
           this.appendChild(node);
           return;
@@ -151,7 +149,7 @@ export class FxOutput extends XfAbstractControl {
           this.appendChild(obj[1]);
         });
 */
-/*
+        /*
         Object.entries(node).map(obj => {
           // valueWrapper.appendChild(obj[1]);
           this.appendChild(obj[1]);
@@ -168,11 +166,11 @@ export class FxOutput extends XfAbstractControl {
       return;
     }
 
-    if(this.mediatype === 'image'){
+    if (this.mediatype === 'image') {
       const img = document.createElement('img');
-		img.setAttribute('src',this.value);
-		// Reset the output before adding the image
-		this.innerHTML = '';
+      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

@@ -2,8 +2,8 @@ import { Fore } from '../fore.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
-import {foreElementMixin} from "../ForeElementMixin.js";
-import {withDraggability} from "../withDraggability.js";
+import ForeElementMixin from '../ForeElementMixin.js';
+import { withDraggability } from '../withDraggability.js';
 
 /**
  * `fx-repeat`
@@ -20,7 +20,7 @@ import {withDraggability} from "../withDraggability.js";
  *
  * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
  */
-export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLElement), false) {
+export class FxRepeatAttributes extends withDraggability(ForeElementMixin, false) {
   static get properties() {
     return {
       ...super.properties,
@@ -39,8 +39,8 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
       repeatIndex: {
         type: Number,
       },
-      repeatSize:{
-        type:Number,
+      repeatSize: {
+        type: Number,
       },
       nodeset: {
         type: Array,
@@ -52,13 +52,13 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
     super();
     this.ref = '';
     this.dataTemplate = [];
-    this.isDraggable=null;
+    this.isDraggable = null;
     this.focusOnCreate = '';
     this.initDone = false;
     this.repeatIndex = 1;
     this.nodeset = [];
     this.inited = false;
-    this.host= {};
+    this.host = {};
     this.index = 1;
     this.repeatSize = 0;
     this.attachShadow({ mode: 'open', delegatesFocus: true });
@@ -72,7 +72,6 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
     super.repeatSize = size;
   }
 
-
   setIndex(index) {
     // console.log('new repeat index ', index);
     this.index = index;
@@ -89,14 +88,14 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
   }
 
   get index() {
-        return parseInt(this.getAttribute('index'), 10);
+    return parseInt(this.getAttribute('index'), 10);
   }
 
   set index(idx) {
     this.setAttribute('index', idx);
   }
 
-  _getRepeatedItems(){
+  _getRepeatedItems() {
     const refd = this.querySelector('[data-ref]');
     return refd.children;
   }
@@ -133,12 +132,10 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
 
     // if (this.getOwnerForm().lazyRefresh) {
     this.mutationObserver = new MutationObserver(mutations => {
-
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
-
-          const instance = XPathUtil.resolveInstance(this,this.ref);
+          const instance = XPathUtil.resolveInstance(this, this.ref);
           const path = XPathUtil.getPath(added, instance);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
@@ -199,7 +196,7 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
     return inited;
   }
 
-  _getRef(){
+  _getRef() {
     return this.getAttribute('ref');
   }
 
@@ -231,7 +228,6 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
   }
 
   async refresh(force) {
-
     if (!this.inited) this.init();
     this._evalNodeset();
 
@@ -256,7 +252,6 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
         // this._fadeOut(itemToRemove);
         // Fore.fadeOutElement(itemToRemove)
         this.getOwnerForm().someInstanceDataStructureChanged = true;
-
       }
     }
 
@@ -265,19 +260,18 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
         // add new repeatitem
 
         const clonedTemplate = this._clone();
-        if(!clonedTemplate) return;
+        if (!clonedTemplate) return;
 
         // ### cloned templates are always appended to the binding element - the one having the data-ref
         const bindingElement = this.querySelector('[data-ref]');
         bindingElement.appendChild(clonedTemplate);
         clonedTemplate.classList.add('fx-repeatitem');
-        clonedTemplate.setAttribute('index',position);
+        clonedTemplate.setAttribute('index', position);
 
         clonedTemplate.addEventListener('click', this._dispatchIndexChange);
         // this.addEventListener('focusin', this._handleFocus);
         clonedTemplate.addEventListener('focusin', this._dispatchIndexChange);
 
-
         // this._initVariables(clonedTemplate);
 
         // newItem.nodeset = this.nodeset[position - 1];
@@ -310,9 +304,13 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
   }
 
   _dispatchIndexChange() {
-      this.dispatchEvent(
-          new CustomEvent('item-changed', { composed: false, bubbles: true, detail: { item: this , index:this.index } }),
-      );
+    this.dispatchEvent(
+      new CustomEvent('item-changed', {
+        composed: false,
+        bubbles: true,
+        detail: { item: this, index: this.index },
+      }),
+    );
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -349,13 +347,12 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
   }
 
   async _initTemplate() {
-
     // 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');
 
-/*
+    /*
     if (this.template === null) {
       // console.error('### no template found for this repeat:', this.id);
       // todo: catch this on form element
@@ -368,14 +365,13 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
       );
     }
 */
-    if(!this.template) {
+    if (!this.template) {
       return;
     }
 
     this.shadowRoot.appendChild(this.template);
   }
 
-
   _initVariables(newRepeatItem) {
     const inScopeVariables = new Map(this.inScopeVariables);
     newRepeatItem.setInScopeVariables(inScopeVariables);
@@ -391,7 +387,7 @@ export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLEl
 
   _clone() {
     this.template = this.shadowRoot.querySelector('template');
-    if(!this.template) return;
+    if (!this.template) return;
     return this.template.content.firstElementChild.cloneNode(true);
   }