@jinntec/fore 2.9.0 → 3.1.0

package/src/ui/fx-items.js

@@ -7,8 +7,6 @@ import { XPathUtil } from '../xpath-util.js';
  * FxItems provides a templated list over its bound nodes. It is not standalone but expects to be used
  * within an fx-control element.
  *
- *
- *
  * @demo demo/selects3.html
  */
 export class FxItems extends FxControl {
@@ -56,22 +54,19 @@ export class FxItems extends FxControl {
         target.focus();
       }
     });
+
     this.addEventListener('click', e => {
-      e.preventDefault;
+      e.preventDefault; // keep as-is (do not change behavior here)
       e.stopPropagation();
       const items = this.querySelectorAll('[value]');
-      /*
-      let target;
-      if (e.target.nodeName === 'LABEL') {
-        target = resolveId(e.target.getAttribute('for'), this);
-        target.checked = !target.checked;
-      }
-*/
 
       let val = '';
       Array.from(items).forEach(item => {
         if (item.checked) {
-          val += ` ${item.getAttribute('value')}`;
+          // ROOT FIX: for generated inputs, attribute "value" may still be "{value}".
+          // The DOM property .value is the authoritative one.
+          const v = item.value != null ? item.value : item.getAttribute('value');
+          val += ` ${v}`;
         }
       });
       this.setAttribute('value', val.trim());
@@ -90,6 +85,11 @@ export class FxItems extends FxControl {
     return this;
   }
 
+  async refresh(force = false) {
+    super.refresh(force);
+    // console.log('fx-items.refresh() called');
+  }
+
   async updateWidgetValue() {
     // console.log('setting items value');
 
@@ -108,8 +108,6 @@ export class FxItems extends FxControl {
    * attention: limitations here: assumes that there's an `label` element plus an element with an `value`
    * attribute which it will update.
    *
-   *
-   *
    * @param newEntry
    * @param node
    */
@@ -123,14 +121,12 @@ export class FxItems extends FxControl {
     const label = newEntry.querySelector('label');
     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];
-    }
+    // ROOT FIX: JSON lens nodes are objects; do NOT use direct JS property access.
+    // Always go through evaluateXPathToString() for JSON too.
+    const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
+    // console.log('lblEvaluated ', lblEvaluated);
+    label.textContent = lblEvaluated;
+
     label.setAttribute('for', id);
 
     // ### handle the 'value'
@@ -138,24 +134,22 @@ export class FxItems extends FxControl {
     const input = newEntry.querySelector('[value]');
     // getting expr
     const expr = input.value;
-    // 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];
-    }
 
+    // ROOT FIX: same here
+    const evaluated = evaluateXPathToString(cutted, node, this);
+    // console.log('evaluated ', lblEvaluated);
+
+    // Set both property and attribute so *any* downstream code path works
     input.value = evaluated;
+    input.setAttribute('value', evaluated);
+
     input.setAttribute('id', id);
+
     // Normalize the current value (remove newlines, tabs, excessive spaces)
     const currentValue = (this.getAttribute('value') || '').replace(/\s+/g, ' ').trim();
     const valueList = currentValue.split(/\s+/); // Split on whitespace
 
-    // Check if the value is in the space-separated list of values
-    // const currentValue = this.getAttribute('value') || '';
-    // const valueList = currentValue.split(/\s+/);
     if (valueList.includes(evaluated)) {
       input.checked = true;
     }
@@ -164,4 +158,4 @@ export class FxItems extends FxControl {
 
 if (!customElements.get('fx-items')) {
   customElements.define('fx-items', FxItems);
-}
+}

package/src/ui/fx-output.js

@@ -119,49 +119,19 @@ 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);
+      // JSON instances use a lens, so modelItem.node is null — fall back to this.value
+      const source = this.modelItem.node ?? this.value;
+      if (source) {
+        if (source.nodeType) {
+          valueWrapper.append(source);
           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 => {
+        // parse string as HTML
+        const tmpDoc = new DOMParser().parseFromString(source, 'text/html');
+        Array.from(tmpDoc.body.childNodes).forEach(n => {
           valueWrapper.append(n);
         });
-        // valueWrapper.append(theNode);
-
-        // valueWrapper.innerHTML=node;
-        /*
-        if (node.nodeType) {
-          this.appendChild(node);
-          return;
-        }
-        Object.entries(node).map(obj => {
-          // 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;
-
-      // this.shadowRoot.appendChild(this.value);
       return;
     }
 

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

@@ -344,7 +344,7 @@ export class FxRepeatAttributes extends withDraggability(RepeatBase, false) {
     // Fore.refreshChildren(clone,true);
     const fore = this.getOwnerForm();
     if (!fore.lazyRefresh || force) {
-      Fore.refreshChildren(this, force);
+      await Fore.refreshChildren(this, force);
     }
     // this.style.display = 'block';
     // this.style.display = this.display;