@jinntec/fore 2.5.0 → 2.7.0

package/src/ui/fx-repeatitem.js

@@ -1,6 +1,7 @@
 import { Fore } from '../fore.js';
-import ForeElementMixin from '../ForeElementMixin.js';
+// import ForeElementMixin from '../ForeElementMixin.js';
 import { withDraggability } from '../withDraggability.js';
+import { UIElement } from './UIElement.js';
 
 /**
  * `fx-repeat`
@@ -9,9 +10,9 @@ import { withDraggability } from '../withDraggability.js';
  * @customElement
  * @demo demo/index.html
  *
- * @extends {ForeElementMixin}
+ * @extends {UIElement}
  */
-export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
+export class FxRepeatitem extends withDraggability(UIElement, true) {
   static get properties() {
     return {
       ...super.properties,
@@ -32,6 +33,8 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
     this.attachShadow({ mode: 'open', delegatesFocus: true });
 
     this.dropTarget = null;
+    // TODO: rename to position?
+    this.index = -1;
   }
 
   connectedCallback() {
@@ -72,7 +75,7 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
       }
     */
 
-  _dispatchIndexChange() {
+  async _dispatchIndexChange() {
     /**
      * @type {import('./fx-repeat.js').FxRepeat}
      */
@@ -81,31 +84,31 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
       // The index did not really change if it did not change :wink:
       return;
     }
-    this.dispatchEvent(
+    await this.dispatchEvent(
       new CustomEvent('item-changed', {
         composed: false,
         bubbles: true,
         detail: { item: this, index: this.index },
       }),
     );
+
+    // Refresh after all of the listeners for that item-changed have had their turn to update!
+    this.getOwnerForm().refresh();
   }
 
-  refresh(force) {
-    this.modelItem = this.getModelItem();
-    // ### register ourselves as boundControl
-    if (!this.modelItem.boundControls.includes(this)) {
-      this.modelItem.boundControls.push(this);
-
-      if (this.modelItem && !this.modelItem.relevant) {
-        this.removeAttribute('relevant');
-        this.setAttribute('nonrelevant', '');
-      } else {
-        this.removeAttribute('nonrelevant');
-        this.setAttribute('relevant', '');
-      }
+  async refresh(force = false) {
+    // this.modelItem = this.getModelItem();
+    this.attachObserver();
+    // console.log('🔄 repeatitem modelitem', this.getModelItem());
+
+    if (this.modelItem && !this.modelItem.relevant) {
+      this.removeAttribute('relevant');
+      this.setAttribute('nonrelevant', '');
+    } else {
+      this.removeAttribute('nonrelevant');
+      this.setAttribute('relevant', '');
     }
-    // Always recurse for these refreshes, especially when forced
-    Fore.refreshChildren(this, force);
+    await Fore.refreshChildren(this, force);
   }
 }
 

package/src/ui/fx-switch.js

@@ -48,7 +48,7 @@ class FxSwitch extends FxContainer {
 
   async refresh(force) {
     super.refresh(force);
-    // console.log('refresh on switch ');
+    console.log('🔄 fx-switch refresh', force);
     if (this.cases.length === 0) {
       this.cases = Array.from(this.querySelectorAll(':scope > fx-case'));
     }
@@ -65,7 +65,7 @@ class FxSwitch extends FxContainer {
   }
 
   _dispatchEvents() {
-    if(this.selectedCase === this.formerCase) return;
+    if (this.selectedCase === this.formerCase) return;
     if (this.formerCase && this.formerCase !== this.selectedCase) {
       Fore.dispatch(this.formerCase, 'deselect', {});
     }
@@ -75,7 +75,7 @@ class FxSwitch extends FxContainer {
   }
 
   _resetVisited() {
-    if(this.visitedResetted) return;
+    if (this.visitedResetted) return;
 
     const visited = this.selectedCase.querySelectorAll('.visited');
     Array.from(visited).forEach(v => {
@@ -95,6 +95,8 @@ class FxSwitch extends FxContainer {
         this.toggle(caseElem);
       }
     });
+
+    this.attachObserver();
   }
 
   /**

package/src/ui/fx-upload.js

@@ -18,7 +18,6 @@ const WIDGETCLASS = 'widget';
  * @customElement
  */
 
-
 export default class FxUpload extends XfAbstractControl {
   constructor() {
     super();
@@ -41,9 +40,8 @@ export default class FxUpload extends XfAbstractControl {
     };
   }
   connectedCallback() {
-
     this.updateEvent = 'change';
-    this.accept = this.hasAttribute('accept') ? this.getAttribute('accept'):'';
+    this.accept = this.hasAttribute('accept') ? this.getAttribute('accept') : '';
     this.label = this.hasAttribute('label') ? this.getAttribute('label') : null;
     const style = `
             :host{
@@ -75,16 +73,16 @@ export default class FxUpload extends XfAbstractControl {
     // ### convenience marker event
     if (this.debounceDelay) {
       listenOn.addEventListener(
-          this.updateEvent,
-          debounce(
-              this,
-              () => {
-                // console.log('eventlistener ', this.updateEvent);
-                // console.info('handling Event:', event.type, listenOn);
-                this._importUploadedContent();
-              },
-              this.debounceDelay,
-          ),
+        this.updateEvent,
+        debounce(
+          this,
+          () => {
+            // console.log('eventlistener ', this.updateEvent);
+            // console.info('handling Event:', event.type, listenOn);
+            this._importUploadedContent();
+          },
+          this.debounceDelay,
+        ),
       );
     } else {
       listenOn.addEventListener(this.updateEvent, async event => {
@@ -94,31 +92,34 @@ export default class FxUpload extends XfAbstractControl {
     this.boundInitialized = false;
     this.fileNameExpr = this.getAttribute('filename');
     this.mimetypeExpr = this.getAttribute('mimetype');
-
   }
 
   async _importUploadedContent(event) {
-    console.log('_importUploadedContent',event);
+    console.log('_importUploadedContent', event);
     const file = event.target.files[0];
 
     this.evalInContext();
     // update file ref
-    const fileNode = evaluateXPathToFirstNode(this.fileNameExpr,this.nodeset,this.getOwnerForm());
-    if(fileNode){
+    const fileNode = evaluateXPathToFirstNode(this.fileNameExpr, this.nodeset, this.getOwnerForm());
+    if (fileNode) {
       this.fileName = fileNode.nodeValue = file.name;
     }
     this.mimetype = file.type;
 
     // update mediatype
-    const mimetypeNode = evaluateXPathToFirstNode(this.mimetypeExpr,this.nodeset, this.getOwnerForm());
-    if(mimetypeNode){
+    const mimetypeNode = evaluateXPathToFirstNode(
+      this.mimetypeExpr,
+      this.nodeset,
+      this.getOwnerForm(),
+    );
+    if (mimetypeNode) {
       mimetypeNode.nodeValue = this.mimetype;
     }
 
     let content = await this._readFile(file);
     // const setval = this.shadowRoot.getElementById('setvalue');
-    console.log('content',content);
-    if(file.type.endsWith('xml')){
+    console.log('content', content);
+    if (file.type.endsWith('xml')) {
       const uploadedXML = new DOMParser().parseFromString(content, 'application/xml');
       content = uploadedXML.firstElementChild;
     }
@@ -132,30 +133,27 @@ export default class FxUpload extends XfAbstractControl {
       const reader = new FileReader();
 
       // Determine how to read the file based on MIME type
-      const isTextFile = file.type.startsWith("text/");
-      const readMethod = isTextFile ? "readAsText" : "readAsDataURL";
+      const isTextFile = file.type.startsWith('text/');
+      const readMethod = isTextFile ? 'readAsText' : 'readAsDataURL';
 
       reader.onload = () => {
         const result = reader.result;
         // If it's a binary file, return only the Base64 content without the MIME prefix
         if (!isTextFile) {
-          const base64Content = result.split(",")[1]; // Remove MIME prefix
+          const base64Content = result.split(',')[1]; // Remove MIME prefix
           resolve(base64Content);
         } else {
           resolve(result); // Return plain text
         }
       };
 
-      reader.onerror = () => reject(new Error("Error reading file"));
+      reader.onerror = () => reject(new Error('Error reading file'));
 
       // Start reading the file
       reader[readMethod](file);
     });
   }
 
-
-
-
   /**
    * updates the model with a new value by executing it's `<fx-setvalue>` action.
    *
@@ -165,15 +163,15 @@ export default class FxUpload extends XfAbstractControl {
    * @param val the new value to be set
    */
   setValue(val) {
-    this.value=val;
+    this.value = val;
     const modelitem = this.getModelItem();
 
-    if(this.mimetype.endsWith('xml')){
+    if (this.mimetype.endsWith('xml')) {
       this.nodeset.textContent = '';
-      this.nodeset.append(document.importNode(val,true));
-    }else{
+      this.nodeset.append(document.importNode(val, true));
+    } else {
       modelitem.value = val;
-      if(this.mimetype.startsWith('text/')){
+      if (this.mimetype.startsWith('text/')) {
         const cdata = this.nodeset.ownerDocument.createCDATASection(val);
         this.nodeset.textContent = '';
         this.nodeset.append(cdata);
@@ -183,7 +181,6 @@ export default class FxUpload extends XfAbstractControl {
       }
     }
 
-
     if (this.getAttribute('class')) {
       this.classList.add('visited');
     } else {
@@ -198,16 +195,18 @@ export default class FxUpload extends XfAbstractControl {
     // const setval = this.shadowRoot.getElementById('setvalue');
     // setval.setValue(modelitem, val);
 
+    /* deprecated
     if (this.modelItem instanceof ModelItem && !this.modelItem?.boundControls.includes(this)) {
       this.modelItem.boundControls.push(this);
     }
+*/
     const model = this.getModel();
     Fore.dispatch(this, 'value-changed', {
       path: this.modelItem.path,
       value: this.modelItem.value,
-      oldvalue: "",
-      instanceId:this.modelItem.instanceId,
-      foreId:this.getOwnerForm().id
+      oldvalue: '',
+      instanceId: this.modelItem.instanceId,
+      foreId: this.getOwnerForm().id,
     });
     this.getModel().updateModel();
     this.getOwnerForm().refresh(true);
@@ -215,7 +214,6 @@ export default class FxUpload extends XfAbstractControl {
     // console.log('data', this.getOwnerForm().getModel().getDefaultInstanceData());
   }
 
-
   renderHTML(ref) {
     return `
             ${this.label ? `${this.label}` : ''}
@@ -267,8 +265,6 @@ export default class FxUpload extends XfAbstractControl {
     Fore.refreshChildren(this, force);
   }
 
-
-
   evalLabel(optionLabel, node, newEntry) {
     const labelExpr = optionLabel.substring(1, optionLabel.length - 1);
     if (!labelExpr) return;