@jinntec/fore 2.4.1 → 2.5.0

package/src/fx-model.js

@@ -51,7 +51,7 @@ export class FxModel extends HTMLElement {
             <slot></slot>
         `;
 
-/*
+    /*
       this.addEventListener('model-construct-done', () => {
         // this.modelConstructed = true;
         // console.log('model-construct-done fired ', this.modelConstructed);
@@ -65,12 +65,38 @@ export class FxModel extends HTMLElement {
     this.fore = this.parentNode;
   }
 
-  static lazyCreateModelItem(model, ref, node) {
+  /**
+   * @param {FxModel}           model        The model to create a model item for
+   * @param {string}            ref          The XPath ref that led to this model item
+   * @param {Node}              node         The node the XPath led to
+   * @param {ForeElementMixin}  formElement  The form element making this model. Used to resolve variables against
+   */
+  static lazyCreateModelItem(model, ref, node, formElement) {
     // console.log('lazyCreateModelItem ', node);
-
+    const instanceId = XPathUtil.resolveInstance(formElement, ref);
+
+    if (model.parentNode.createNodes && (node === null || node === undefined)) {
+      // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
+      const mi = new ModelItem(
+        undefined,
+        ref,
+        Fore.READONLY_DEFAULT,
+        false,
+        Fore.REQUIRED_DEFAULT,
+        Fore.CONSTRAINT_DEFAULT,
+        Fore.TYPE_DEFAULT,
+        null,
+        this,
+        instanceId,
+      );
+
+      // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
+      model.registerModelItem(mi);
+      return mi;
+    }
     let targetNode = {};
     if (node === null || node === undefined) return null;
-    if (node.nodeType === node.TEXT_NODE) {
+    if (node.nodeType === Node.TEXT_NODE) {
       // const parent = node.parentNode;
       // console.log('PARENT ', parent);
       targetNode = node.parentNode;
@@ -81,9 +107,7 @@ export class FxModel extends HTMLElement {
     // const path = fx.evaluateXPath('path()',node);
     let path;
     if (node.nodeType) {
-      const instance = XPathUtil.resolveInstance(model, ref);
-
-      path = XPathUtil.getPath(node, instance);
+      path = XPathUtil.getPath(node, instanceId);
     } else {
       path = null;
       targetNode = node;
@@ -101,6 +125,7 @@ export class FxModel extends HTMLElement {
       Fore.TYPE_DEFAULT,
       targetNode,
       this,
+      instanceId,
     );
 
     // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
@@ -118,7 +143,11 @@ export class FxModel extends HTMLElement {
    *
    */
   async modelConstruct() {
-    console.log(`### <<<<< dispatching model-construct for '${this.fore.id}' >>>>>`);
+    console.info(
+      `%cdispatching model-construct for #${this.parentNode.id}`,
+      'background:lightblue; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+    );
+
     // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
     Fore.dispatch(this, 'model-construct', { model: this });
 
@@ -132,25 +161,25 @@ export class FxModel extends HTMLElement {
 
       // Wait until all the instances are built
       await Promise.all(promises);
-            this.instances = Array.from(instances);
-            // console.log('_modelConstruct this.instances ', this.instances);
-			// Await until the model-construct-done event is handled off
-            this.modelConstructed = true;
-            await Fore.dispatch(this, 'model-construct-done', {model: this});
-            this.inited = true;
-            this.updateModel();
-        } else {
-            // ### if there's no instance one will created
-            console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
-            this.modelConstructed = true;
-            await this.dispatchEvent(
-                new CustomEvent('model-construct-done', {
-                    composed: false,
-                    bubbles: true,
-                    detail: {model: this},
-                }),
-            );
-        }
+      this.instances = Array.from(instances);
+      // console.log('_modelConstruct this.instances ', this.instances);
+      // Await until the model-construct-done event is handled off
+      this.modelConstructed = true;
+      await Fore.dispatch(this, 'model-construct-done', { model: this });
+      this.inited = true;
+      this.updateModel();
+    } else {
+      // ### if there's no instance one will created
+      console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
+      this.modelConstructed = true;
+      await this.dispatchEvent(
+        new CustomEvent('model-construct-done', {
+          composed: false,
+          bubbles: true,
+          detail: { model: this },
+        }),
+      );
+    }
 
     const functionlibImports = Array.from(this.querySelectorAll('fx-functionlib'));
     await Promise.all(functionlibImports.map(lib => lib.readyPromise));
@@ -416,7 +445,7 @@ export class FxModel extends HTMLElement {
             modelItem.required = compute;
             this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
             if (!modelItem.node.textContent) {
-/*
+              /*
               console.log(
                 'node is required but has no value ',
                 XPathUtil.getDocPath(modelItem.node),
@@ -438,7 +467,7 @@ export class FxModel extends HTMLElement {
         }
       }
     });
-    // console.log('modelItems after revalidate: ', this.modelItems);
+    console.log('modelItems after revalidate: ', this.modelItems);
     return valid;
   }
 
@@ -468,17 +497,17 @@ export class FxModel extends HTMLElement {
   /**
    * @returns {import('./fx-instance.js').FxInstance}
    */
-    getDefaultInstance() {
-/*
+  getDefaultInstance() {
+    /*
         if (this.instances.length === 0) {
             throw new Error('No instances defined. Fore cannot work without any <data/> elements.');
         }
 */
-        if (this.instances.length) {
-			return this.instances[0];
-		}
-		return this.getInstance('default');
+    if (this.instances.length) {
+      return this.instances[0];
     }
+    return this.getInstance('default');
+  }
 
   getDefaultInstanceData() {
     return this.instances[0].getInstanceData();

package/src/fx-submission.js

@@ -50,8 +50,8 @@ export class FxSubmission extends ForeElementMixin {
       ? this.getAttribute('mediatype')
       : 'application/xml';
 
-    this.responseMediatype = this.hasAttribute('response-mediatype')
-      ? this.getAttribute('response-mediatype')
+    this.responseMediatype = this.hasAttribute('responsemediatype')
+      ? this.getAttribute('responsemediatype')
       : this.mediatype;
     this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
 
@@ -83,7 +83,11 @@ export class FxSubmission extends ForeElementMixin {
   }
 
   async _submit() {
-    // console.log('submitting....', this.getAttribute('id'));
+    console.info(
+        `%csubmitting #${this.id}`,
+        'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+    );
+
     this.evalInContext();
     const model = this.getModel();
 
@@ -232,6 +236,11 @@ export class FxSubmission extends ForeElementMixin {
 
       if (!response.ok || response.status > 400) {
         // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+        console.info(
+            `%csubmit-error #${this.id}`,
+            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        );
+
         Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
         return;
       }
@@ -255,6 +264,13 @@ export class FxSubmission extends ForeElementMixin {
       // this.dispatch('submit-done', {});
       // console.log(`### <<<<< ${this.id} submit-done >>>>>`);
       Fore.dispatch(this, 'submit-done', {});
+/*
+      console.info(
+          `%csubmit-done #${this.id}`,
+          'background:green; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      );
+*/
+
     } catch (error) {
       Fore.dispatch(this, 'submit-error', { error: error.message });
     } finally {
@@ -354,13 +370,6 @@ export class FxSubmission extends ForeElementMixin {
   _handleResponse(data, resolvedUrl, contentType) {
     // console.log('_handleResponse ', data);
 
-    /*
-        // ### responses need to be handled depending on their type.
-        if(this.type === 'json'){
-
-        }
-    */
-
     const targetInstance = this._getTargetInstance();
 
     /*
@@ -386,16 +395,26 @@ export class FxSubmission extends ForeElementMixin {
     if (this.replace === 'instance') {
       if (targetInstance) {
         if (this.targetref) {
+
           const [theTarget] = evaluateXPath(
-            this.targetref,
-            targetInstance.instanceData.firstElementChild,
-            this,
+              this.targetref,
+              targetInstance.instanceData.firstElementChild,
+              this,
           );
           console.log('theTarget', theTarget);
-          const clone = data.firstElementChild;
-          const parent = theTarget.parentNode;
-          parent.replaceChild(clone, theTarget);
-          console.log('finally ', parent);
+          if(this.responseMediatype === 'application/xml' || this.responseMediatype === 'text/html'){
+            const clone = data.firstElementChild;
+            const parent = theTarget.parentNode;
+            parent.replaceChild(clone, theTarget);
+            console.log('finally ', parent);
+          }
+          if(this.responseMediatype.startsWith('text/')){
+            theTarget.textContent = data;
+          }
+          if(this.responseMediatype === 'application/json'){
+            console.warn('targetref is not supported for application/json responses')
+          }
+
         } else if (this.into) {
           const [theTarget] = evaluateXPath(
             this.into,
@@ -447,12 +466,22 @@ export class FxSubmission extends ForeElementMixin {
       }
       // document.getElementsByTagName('html')[0].innerHTML = data;
     }
-    if (this.replace === 'target' && contentType.startsWith('text/html')) {
+    if (this.replace === 'target') {
       // const target = this.getAttribute('target');
       const target = this._getProperty('target');
       const targetNode = document.querySelector(target);
       if (targetNode) {
-        targetNode.innerHTML = data;
+
+        if(contentType.startsWith('text/html')){
+          targetNode.innerHTML = data;
+        }
+        if(this.responseMediatype.startsWith('image/svg')){
+          const parser = new DOMParser();
+          const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+
+          const objectURL = URL.createObjectURL(data);
+          targetNode.src = objectURL;
+        }
       } else {
         Fore.dispatch(this, 'submit-error', {
           message: `targetNode for selector ${target} not found`,

package/src/getInScopeContext.js

@@ -48,7 +48,7 @@ function _getInitialContext(node, ref) {
   }
 
   if (XPathUtil.isAbsolutePath(ref)) {
-    const instanceId = XPathUtil.getInstanceId(ref);
+    const instanceId = XPathUtil.getInstanceId(ref, node);
     if (instanceId) {
       return model.getInstance(instanceId).getDefaultContext();
     }

package/src/modelitem.js

@@ -17,8 +17,9 @@ export class ModelItem {
    * @param {string} type - string expression to set a datatype
    * @param {Node} node - the node the 'ref' expression is referring to
    * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
+   * @param {string} instance - the fx-instance id having created this modelItem
    */
-  constructor(path, ref, readonly, relevant, required, constraint, type, node, bind) {
+  constructor(path, ref, readonly, relevant, required, constraint, type, node, bind,instance) {
     /**
      * @type {string}
      */
@@ -61,10 +62,11 @@ export class ModelItem {
      */
     this.alerts = [];
     /**
-     * @type {import('./ui/fx-control').default[]}
+     * @type {import('./ui/abstract-control').default[]}
      */
     this.boundControls = [];
     // this.value = this._getValue();
+    this.instanceId = instance;
   }
 
   /*
@@ -74,6 +76,9 @@ export class ModelItem {
 */
 
   get value() {
+    if (!this.node) {
+      return null;
+    }
     if (!this.node.nodeType) return this.node;
 
     if (this.node.nodeType === Node.ATTRIBUTE_NODE) {

package/src/ui/abstract-control.js

@@ -64,10 +64,10 @@ export default class AbstractControl extends ForeElementMixin {
 
     // await this.updateComplete;
     // await this.getWidget();
-    this.oldVal = this.nodeset ? this.nodeset : null;
-    // console.log('oldVal',this.oldVal);
 
     this.evalInContext();
+    this.oldVal = this.nodeset ? this.nodeset : null;
+    // console.log('oldVal',this.oldVal);
 
     // todo this if should be removed - see above
     if (this.isBound()) {
@@ -169,13 +169,15 @@ export default class AbstractControl extends ForeElementMixin {
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
         // if oldVal is null we haven't received a concrete value yet
 
-        if (this.localName !== 'fx-control') return;
+        if (!(this.localName === 'fx-control' || this.localName === 'fx-upload')) return;
         if (isDifferent(this.oldVal,  oldValue, this.value)) {
           const model = this.getModel();
           Fore.dispatch(this, 'value-changed', {
             path: this.modelItem.path,
             value: this.modelItem.value,
-            oldvalue: this.oldVal,
+            oldvalue: oldValue,
+            instanceId:this.modelItem.instanceId,
+            foreId:this.getOwnerForm().id
           });
         }
       }

package/src/ui/fx-container.js

@@ -41,8 +41,9 @@ export class FxContainer extends ForeElementMixin {
             </style>
             ${html}
     `;
-
-    this.getOwnerForm().registerLazyElement(this);
+    if(this.ref !== ''){
+      this.getOwnerForm().registerLazyElement(this);
+    }
 
     /*
     this.addEventListener('mousedown', e => {

package/src/ui/fx-control.js

@@ -37,6 +37,7 @@ export default class FxControl extends XfAbstractControl {
   constructor() {
     super();
     this.inited = false;
+    this.nodeset = null;
     this.attachShadow({ mode: 'open' });
   }
 
@@ -167,28 +168,7 @@ export default class FxControl extends XfAbstractControl {
     }
 
     this.addEventListener('return', e => {
-      // console.log('catched return action on ', this);
-      // console.log('return detail', e.detail);
-
-      // console.log('return triggered on ', this);
-      // console.log('this.ref', this.ref);
-      // console.log('current outer instance', this.getInstance());
-
-      /*
-                  console.log(
-                    '???? why ???? current nodeset should point to the node of the outer control',
-                    e.currentTarget.nodeset,
-                  );
-                  console.log(
-                    '???? why ???? current nodeset should point to the node of the outer control',
-                    this.nodeset,
-                  );
-            */
       const newNodes = e.detail.nodeset;
-      // console.log('new nodeset', newNodes);
-      // console.log('currentTarget', e.currentTarget);
-      // console.log('target', e.target);
-
       e.stopPropagation();
 
       this._replaceNode(newNodes);
@@ -347,9 +327,9 @@ export default class FxControl extends XfAbstractControl {
     }
 
     // ### value is bound to radio
-    if(this.widget.type === 'radio'){
+    if (this.widget.type === 'radio') {
       const matches = this.querySelector(`input[value=${this.value}]`);
-      if(matches){
+      if (matches) {
         matches.checked = true;
       }
       return;
@@ -367,7 +347,6 @@ export default class FxControl extends XfAbstractControl {
       return;
     }
 
-
     if (this.hasAttribute('as')) {
       const as = this.getAttribute('as');
 

package/src/ui/fx-repeat.js

@@ -298,6 +298,11 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
 
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
+
+        if (this.getOwnerForm().createNodes) {
+          this.getOwnerForm().initData(newItem);
+        }
+
         // Tell the owner form we might have new template expressions here
         this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
       }
@@ -393,6 +398,10 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
 
       this.appendChild(repeatItem);
 
+      if (this.getOwnerForm().createNodes) {
+        this.getOwnerForm().initData(repeatItem);
+      }
+
       if (repeatItem.index === 1) {
         this.applyIndex(repeatItem);
       }

package/src/ui/fx-repeatitem.js

@@ -8,10 +8,13 @@ import { withDraggability } from '../withDraggability.js';
  *
  * @customElement
  * @demo demo/index.html
+ *
+ * @extends {ForeElementMixin}
  */
 export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
   static get properties() {
     return {
+      ...super.properties,
       inited: {
         type: Boolean,
       },

package/src/ui/fx-select.js

@@ -0,0 +1,89 @@
+export class FxSelect extends HTMLElement {
+    constructor() {
+        super();
+
+        // Attach Shadow DOM to encapsulate the component
+        this.attachShadow({ mode: 'open' });
+
+        // Create and attach the <select> element
+        this.selectElement = document.createElement('select');
+        this.shadowRoot.appendChild(this.selectElement);
+
+        // Set default values
+        this.batchSize = parseInt(this.getAttribute('batch-size')) || 20;
+        this.size = parseInt(this.getAttribute('size')) || 5;
+        this.currentLoadedItems = 0;
+        this.hasMoreItems = true;  // Assume there are more items initially
+
+        // Set the size of the <select> element
+        this.selectElement.setAttribute('size', this.size);
+
+        // Bind the scroll event handler
+        this.handleScroll = this.handleScroll.bind(this);
+    }
+
+    connectedCallback() {
+        // Initial load of options
+        this.loadOptions(this.currentLoadedItems, this.batchSize);
+
+        // Attach scroll event listener
+        this.selectElement.addEventListener('scroll', this.handleScroll);
+    }
+
+    disconnectedCallback() {
+        // Clean up event listeners when the element is removed
+        this.selectElement.removeEventListener('scroll', this.handleScroll);
+    }
+
+    // Mock function to simulate fetching more options
+    fetchMoreItems(start, count) {
+        // Simulate an async fetch or data load (replace with real fetch if needed)
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const items = [];
+                for (let i = start; i < start + count; i++) {
+                    if (i < 200) { // Let's say we stop after 200 items (remove this limit for real use)
+                        items.push({ value: i, label: `Option ${i + 1}` });
+                    }
+                }
+                resolve(items);
+            }, 500);  // Simulate fetch delay
+        });
+    }
+
+    // Method to load a batch of options
+    async loadOptions(start, count) {
+        const fragment = document.createDocumentFragment();
+        const newItems = await this.fetchMoreItems(start, count);
+
+        if (newItems.length > 0) {
+            newItems.forEach(item => {
+                const option = document.createElement('option');
+                option.value = item.value;
+                option.textContent = item.label;
+                fragment.appendChild(option);
+            });
+
+            this.selectElement.appendChild(fragment);
+            this.currentLoadedItems += newItems.length;
+        } else {
+            // If no more items are returned, stop further loading
+            this.hasMoreItems = false;
+        }
+    }
+
+    // Scroll event handler to load more items
+    handleScroll() {
+        const { scrollTop, scrollHeight, clientHeight } = this.selectElement;
+        const isNearBottom = scrollTop + clientHeight >= scrollHeight - 10;
+
+        if (isNearBottom && this.hasMoreItems) {
+            this.loadOptions(this.currentLoadedItems, this.batchSize);
+        }
+    }
+}
+
+// Register the custom element
+if (!customElements.get('fx-select')) {
+    customElements.define('fx-select', FxSelect);
+}

package/src/ui/fx-switch.js

@@ -20,6 +20,7 @@ class FxSwitch extends FxContainer {
     this.formerCase = {};
     this.selectedCase = null;
     this.cases = null;
+    this.visitedResetted = false;
   }
 
   connectedCallback() {
@@ -74,10 +75,13 @@ class FxSwitch extends FxContainer {
   }
 
   _resetVisited() {
+    if(this.visitedResetted) return;
+
     const visited = this.selectedCase.querySelectorAll('.visited');
     Array.from(visited).forEach(v => {
       v.classList.remove('visited');
     });
+    this.visitedResetted = true;
   }
 
   /**