@jinntec/fore 1.10.3 → 2.0.0

package/src/ui/fx-container.js

@@ -1,5 +1,6 @@
 import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
+import {Fore} from "../fore.js";
 
 /**
  * `fx-container` -
@@ -7,12 +8,23 @@ import { foreElementMixin } from '../ForeElementMixin.js';
  *
  */
 export class FxContainer extends foreElementMixin(HTMLElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+/*
+      src: {
+        type: String,
+      },
+*/
+    };
+  }
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
   }
 
   connectedCallback() {
+    this.src = this.hasAttribute('src') ? this.getAttribute('src'):null;
     const style = `
         :host {
             display: block;
@@ -51,6 +63,16 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (!force && this.hasAttribute('refresh-on-view')) return;
     // console.log('### FxContainer.refresh on : ', this);
 
+    // if loading from 'src' needs to be done do it now
+/*
+    if(this.src){
+      await Fore.loadForeFromSrc(this,this.src,'fx-group')
+          .then(foreElement =>{
+            this.getOwnerForm().registerLazyElement(foreElement);
+            foreElement.refresh();
+          })
+    }
+*/
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();

package/src/ui/fx-control.js

@@ -48,6 +48,9 @@ export default class FxControl extends XfAbstractControl {
             },
             initial: {
                 type: Boolean
+            },
+            src:{
+                type: String
             }
         };
     }
@@ -62,7 +65,7 @@ export default class FxControl extends XfAbstractControl {
 
     connectedCallback() {
         this.initial = this.hasAttribute('initial') ? this.getAttribute('initial') : null;
-        this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
+        this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
         this.loaded = false;
         this.initialNode = null;
         this.debounceDelay = this.hasAttribute('debounce') ? this.getAttribute('debounce') : null;
@@ -263,7 +266,7 @@ export default class FxControl extends XfAbstractControl {
         } else (
             Fore.dispatch(this, "warn", {'message': 'trying to replace a node that is neither an Attribute, Elemment or Text node'})
         )
-        this.getOwnerForm().refresh();
+        // this.getOwnerForm().refresh();
     }
 
     renderHTML(ref) {
@@ -374,8 +377,8 @@ export default class FxControl extends XfAbstractControl {
             return;
         }
 
-        // ### when there's a url Fore is used as widget and will be loaded from external file
-        if (this.url && !this.loaded && this.modelItem.relevant) {
+        // ### when there's a src Fore is used as widget and will be loaded from external file
+        if (this.src && !this.loaded && this.modelItem.relevant) {
             // ### evaluate initial data if necessary
 
             if (this.initial) {
@@ -383,8 +386,8 @@ export default class FxControl extends XfAbstractControl {
                 // console.log('initialNodes', this.initialNode);
             }
 
-            // ### load the markup from Url
-            await this._loadForeFromUrl();
+            // ### load the markup from src
+            await this._loadForeFromSrc();
             this.loaded = true;
 
             // ### replace default instance of embedded Fore with initial nodes
@@ -393,20 +396,13 @@ export default class FxControl extends XfAbstractControl {
             return;
         }
 
-        /*
-        if(this.url && !this.loaded){
-          this._loadForeFromUrl();
-          this.loaded=true;
-          return;
-        }
-    */
         if (widget.value !== this.value) {
             widget.value = this.value;
         }
     }
 
     /**
-     * loads an external Fore from an HTML file given by `url` attribute and embed it as child of this control.
+     * loads an external Fore from an HTML file given by `src` attribute and embed it as child of this control.
      *
      * Will look for the `<fx-fore>` element within the returned HTML file and return that element.
      *
@@ -415,13 +411,13 @@ export default class FxControl extends XfAbstractControl {
      * todo: dispatch link error
      * @private
      */
-    async _loadForeFromUrl() {
+    async _loadForeFromSrc() {
         console.info(
-            `%cFore is processing URL ${this.url}`,
+            `%cControl ref="${this.ref}" is loading ${this.src}`,
             "background:#64b5f6; color:white; padding:0.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
         );
         try {
-            const response = await fetch(this.url, {
+            const response = await fetch(this.src, {
                 method: 'GET',
                 credentials: this.credentials,
                 mode: 'cors',
@@ -457,10 +453,12 @@ export default class FxControl extends XfAbstractControl {
 						this.initialNode = evaluateXPathToFirstNode(this.initial, this.nodeset, this);
 
                         doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
-                        defaultInst.setInstanceData(doc);
+                            defaultInst.instanceData = doc;
                     }
-                    imported.getModel().updateModel();
-                    imported.refresh();
+                        imported.model = imported.querySelector('fx-model');
+                        imported.model.updateModel();
+
+                        imported.refresh(true);
                 },
                 {once: true},
             );
@@ -477,23 +475,19 @@ export default class FxControl extends XfAbstractControl {
                 dummy.replaceWith(imported);
             }
 
-
             if (!theFore) {
-                this.dispatchEvent(
-                    new CustomEvent('error', {
-                        detail: {
-                            message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
-                        },
-                    }),
-                );
+                Fore.dispatch('error', {
+                    detail: {
+                        message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
+                    }
+                });
             }
-            this.dispatchEvent(new CustomEvent('loaded', {detail: {fore: theFore}}));
+            Fore.dispatch('loaded', {detail: {fore: theFore}});
         } catch (error) {
             // console.log('error', error);
             Fore.dispatch(this, 'error', {
                 origin: this,
-                message: `control couldn't be loaded from url '${this.url}'`,
-                expr:xpath,
+                message: `control couldn't be loaded from src '${this.src}'`,
                 level:'Error'
             });
 

package/src/ui/fx-inspector.js

@@ -86,19 +86,23 @@ export class FxInspector extends HTMLElement {
 
   update() {
     // console.log('update');
-    const pre = this.shadowRoot.querySelectorAll('pre');
-    // console.log('pre', pre);
-    const fore = this.closest('fx-fore');
+    try{
+      const pre = this.shadowRoot.querySelectorAll('pre');
+      // console.log('pre', pre);
+      const fore = this.closest('fx-fore');
 
-    Array.from(pre).forEach(element => {
-      const inst = fore.getModel().getInstance(element.getAttribute('id'));
-      if (inst.getAttribute('type') === 'xml') {
-        element.innerText = this.serializeDOM(inst.instanceData);
-      }
-      if (inst.getAttribute('type') === 'json') {
-        element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
-      }
-    });
+      Array.from(pre).forEach(element => {
+        const inst = fore.getModel().getInstance(element.getAttribute('id'));
+        if (inst.getAttribute('type') === 'xml') {
+          element.innerText = this.serializeDOM(inst.instanceData);
+        }
+        if (inst.getAttribute('type') === 'json') {
+          element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
+        }
+      });
+    }catch (e){
+      console.warn('caught problem in inspector', e.message);
+    }
   }
 
   render(style) {

package/src/ui/fx-repeat.js

@@ -279,7 +279,8 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
-        this.getOwnerForm().someInstanceDataStructureChanged = true;
+	  // Tell the owner form we might have new template expressions here
+	  this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
       }
     }
 

package/src/ui/fx-switch.js

@@ -42,10 +42,12 @@ class FxSwitch extends FxContainer {
     `;
     this.cases = [];
     this.formerCase=null;
+    this.selectedCase = null;
+
   }
 
   async refresh(force) {
-    super.refresh();
+    super.refresh(force);
     // console.log('refresh on switch ');
     if(this.cases.length === 0){
       this.cases = Array.from(this.querySelectorAll(':scope > fx-case'));
@@ -98,7 +100,6 @@ class FxSwitch extends FxContainer {
    * @param caseElement the fx-case element to activate
    */
   toggle(caseElement) {
-    this.formerCase = this.selectedCase;
     this.selectedCase = caseElement;
     Array.from(this.cases).forEach(c => {
       if (c === this.selectedCase) {
@@ -117,6 +118,10 @@ class FxSwitch extends FxContainer {
       this.selectedCase = caseElement;
     }
     this._dispatchEvents();
+    this.formerCase = this.selectedCase;
+
+    // Tell the owner form we might have new template expressions here
+    this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
   }
 }