@jinntec/fore 3.2.1 → 3.3.1

package/src/modelitem.js

@@ -28,8 +28,10 @@ export class ModelItem {
   constructor(path, ref, nodeOrLens, bind, instance, fore) {
     this.path = path;
     this.ref = ref;
-    this.readonly = ModelItem.READONLY_DEFAULT;
-    this.relevant = ModelItem.RELEVANT_DEFAULT;
+    this._readonly = ModelItem.READONLY_DEFAULT;
+    this._relevant = ModelItem.RELEVANT_DEFAULT;
+    // undefined = not yet resolved; null = resolved, no ancestor ModelItem found
+    this._parentModelItem = undefined;
     this.required = ModelItem.REQUIRED_DEFAULT;
     this.constraint = ModelItem.CONSTRAINT_DEFAULT;
     this.type = ModelItem.TYPE_DEFAULT;
@@ -44,6 +46,7 @@ export class ModelItem {
     this.instanceId = instance;
     this.fore = fore;
     this.changed = false;
+    this.nativeValid = true;
 
     // console.log('[ModelItem] created:', this.path);
 
@@ -64,6 +67,112 @@ export class ModelItem {
     this.state = {}; // evaluated expression results
   }
 
+  /**
+   * `readonly` is inherited down the instance tree per XForms semantics: a node is
+   * readonly if its own bind says so, or if any ancestor node is readonly.
+   */
+  get readonly() {
+    return this._readonly || !!this.getParentModelItem()?.readonly;
+  }
+
+  set readonly(val) {
+    this._readonly = val;
+  }
+
+  /**
+   * `relevant` is inherited down the instance tree per XForms semantics: a node is
+   * relevant only if its own bind says so AND its parent is (effectively) relevant.
+   */
+  get relevant() {
+    if (!this._relevant) return false;
+    const parent = this.getParentModelItem();
+    return parent ? parent.relevant : true;
+  }
+
+  set relevant(val) {
+    this._relevant = val;
+  }
+
+  /**
+   * Resolves and caches the nearest ancestor ModelItem, walking past instance
+   * nodes that have no ModelItem of their own. Handles both XML DOM nodes
+   * (`node.parentNode`) and JSON lens nodes (`lens.parent`).
+   * @returns {ModelItem|null}
+   */
+  getParentModelItem() {
+    if (this._parentModelItem !== undefined) return this._parentModelItem;
+
+    // `bind` is only set for ModelItems created from an explicit <fx-bind ref="...">.
+    // Lazily-created ModelItems (e.g. controls without a dedicated bind - the exact
+    // case this inheritance walk needs to cover) have no `bind`, so fall back to
+    // resolving the owning FxModel through the fx-fore element instead.
+    const model = this.bind?.model || this.fore?.getModel?.();
+    // `Attr.parentNode` is always null per the DOM spec - attribute nodes only
+    // expose their owning element via `ownerElement`. Without this, readonly/
+    // relevant inheritance silently breaks for every attribute-bound ModelItem.
+    let current;
+    if (this.lens) {
+      current = this.lens.parent;
+    } else if (this.node?.nodeType === Node.ATTRIBUTE_NODE) {
+      current = this.node.ownerElement;
+    } else {
+      current = this.node?.parentNode;
+    }
+
+    while (current) {
+      if (
+        current.nodeType === Node.DOCUMENT_NODE ||
+        current.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+      ) {
+        break;
+      }
+
+      const mi = model?.getModelItem(current);
+      if (mi) {
+        this._parentModelItem = mi;
+        return mi;
+      }
+
+      current = current.__jsonlens__ === true ? current.parent : current.parentNode;
+    }
+
+    this._parentModelItem = null;
+    return null;
+  }
+
+  getDebugInfo() {
+    return {
+      path: this.path,
+      ref: this.ref,
+      instanceId: this.instanceId,
+      type: this.type,
+
+      value: this.value,
+
+      facets: {
+        readonly: this.readonly,
+        relevant: this.relevant,
+        required: this.required,
+        constraint: this.constraint,
+        changed: this.changed,
+      },
+
+      backing: this.lens
+          ? 'json-lens'
+          : this.node
+              ? 'xml-node'
+              : 'unknown',
+
+      observerCount: this.observers?.size || 0,
+      boundControlCount: this.boundControls?.length || 0,
+      dependencyCount: this.dependencies?.size || 0,
+      alertCount: this.alerts?.length || 0,
+
+      stateExpressions: this.stateExpressions,
+      state: this.state,
+    };
+  }
+
   get value() {
     if (this.lens) return this.lens.get();
     if (!this.node) return null;
@@ -278,4 +387,5 @@ export class ModelItem {
 
     return [];
   }
+
 }

package/src/ui/abstract-control.js

@@ -320,13 +320,13 @@ export default class AbstractControl extends UIElement {
 
   handleReadonly() {
     // console.log('mip readonly', this.modelItem.isReadonly);
-    if (this.isReadonly() !== this.modelItem.readonly) {
-      if (this.modelItem.readonly) {
+    const effectiveReadonly = this.modelItem.readonly || this.isHostReadonly();
+    if (this.isReadonly() !== effectiveReadonly) {
+      if (effectiveReadonly) {
         this.widget.setAttribute('readonly', '');
         this.setAttribute('readonly', '');
         this._dispatchEvent('readonly');
-      }
-      if (!this.modelItem.readonly) {
+      } else {
         this.widget.removeAttribute('readonly');
         this.removeAttribute('readonly');
         this._dispatchEvent('readwrite');
@@ -334,6 +334,17 @@ export default class AbstractControl extends UIElement {
     }
   }
 
+  /**
+   * A control embedded via `src` (a whole nested `fx-fore` used as widget) has its
+   * own independent model, so it cannot see the readonly state of the outer
+   * ModelItem it represents. When the outer control becomes readonly, it marks its
+   * widget (the nested `fx-fore`) with a `readonly` attribute; nested controls pick
+   * that up here by checking their nearest enclosing `fx-fore`.
+   */
+  isHostReadonly() {
+    return !!this.closest('fx-fore')?.hasAttribute('readonly');
+  }
+
   // todo - review alert handling altogether. There could be potentially multiple ones in model
   // TODO: both required and handleValid set valid attrs and aria attrs. Duplicate code
   handleValid() {
@@ -343,7 +354,8 @@ export default class AbstractControl extends UIElement {
     const hasValue = this.modelItem.value !== '';
     const isRequired = this.modelItem.required;
     const isValidAccordingToRequired = isRequired ? hasValue : true;
-    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired;
+    const nativeValid = this.modelItem.nativeValid !== false;
+    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired && nativeValid;
 
     if (this.isValid() !== isValidNow) {
       if (isValidNow) {

package/src/ui/fx-control.js

@@ -1,3 +1,4 @@
+import { createTypedValueFactory, domFacade as fontoDomFacade } from 'fontoxpath';
 import XfAbstractControl from './abstract-control.js';
 import {
   evaluateXPath,
@@ -10,8 +11,10 @@ import { debounce } from '../events.js';
 import { FxModel } from '../fx-model.js';
 import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
 import { extractPredicateDependencies } from '../extract-predicate-deps.js';
+import '../fx-instance.js';
 
 const WIDGETCLASS = 'widget';
+const typedValueFactory = createTypedValueFactory('item()*');
 
 /**
  * `fx-control`
@@ -542,6 +545,11 @@ export default class FxControl extends XfAbstractControl {
         dummy.replaceWith(imported);
       }
 
+      // `this.widget` was cached as the placeholder `dummy` input on init(); that
+      // node is now detached, so readonly/required handling would silently target
+      // a removed element. Point it at the embedded fx-fore, which now acts as the widget.
+      this.widget = imported;
+
       if (!theFore) {
         Fore.dispatch('error', {
           detail: {
@@ -568,12 +576,13 @@ export default class FxControl extends XfAbstractControl {
     try {
       this._isRefreshing = true;
       // console.log('🔄 fx-control refresh', this);
-      super.refresh(force);
+      await super.refresh(force);
       // console.log('refresh template', this.template);
       // const {widget} = this;
 
       // ### if we find a ref on control we have a 'select' control of some kind
       const widget = this.getWidget();
+      await this._loadDataSrc(widget);
       this._handleBoundWidget(widget, force);
       this._handleDataAttributeBinding();
     } finally {
@@ -582,6 +591,94 @@ export default class FxControl extends XfAbstractControl {
     await Fore.refreshChildren(this, force);
   }
 
+  /**
+   * Finds (or lazily creates) the anonymous `<fx-instance>` backing a
+   * `data-src` lookup document for the given URL, deduped per-model by URL.
+   *
+   * The created instance has no `id`, so it stays invisible to the global
+   * `$default`/`$<id>` variable mechanism. It is appended as the last child
+   * of the model, so it is never mistaken for the first/default instance
+   * (which assumes the model already declares its own default instance).
+   *
+   * @param {string} url
+   * @param {string|null} type
+   * @returns {import('../fx-instance.js').FxInstance}
+   * @private
+   */
+  _ensureDataSrcInstance(url, type) {
+    const model = this.getModel();
+    let instEl = Array.from(model.children).find(
+      el => el.localName === 'fx-instance' && el.getAttribute('data-src') === url,
+    );
+
+    if (!instEl) {
+      instEl = document.createElement('fx-instance');
+      instEl.setAttribute('data-src', url);
+      instEl.setAttribute('src', url);
+      if (type) {
+        instEl.setAttribute('type', type);
+      }
+      model.appendChild(instEl);
+      instEl._loadPromise = instEl.init();
+    }
+    return instEl;
+  }
+
+  /**
+   * Implements the `data-src` lookup-list shortcut: if the bound widget
+   * declares `data-src="<url>"`, lazily loads that document via an anonymous
+   * `<fx-instance>` and binds its root element as a control-local XPath
+   * variable (`$src` by default, or `$<data-id>`), available to this
+   * control's own `ref` and template expressions.
+   *
+   * @param {HTMLElement} widget
+   * @private
+   */
+  async _loadDataSrc(widget) {
+    const url = widget.getAttribute && widget.getAttribute('data-src');
+    if (!url) return;
+
+    const varName = widget.getAttribute('data-id') || 'src';
+
+    if (this._dataSrcUrl === url) return;
+    this._dataSrcUrl = url;
+
+    // ### bind to an empty sequence until loaded so `ref` evaluation doesn't
+    // throw on the not-yet-bound variable; `_handleBoundWidget` bails out
+    // gracefully on an empty nodeset.
+    this.inScopeVariables.set(varName, typedValueFactory([], fontoDomFacade));
+
+    const instEl = this._ensureDataSrcInstance(url, widget.getAttribute('data-type'));
+
+    try {
+      await (instEl._loadPromise ?? Promise.resolve());
+
+      // ### derive the xpath default namespace for `$src`/`$<data-id>` once per
+      // anonymous instance: an explicit `data-xpath-ns` override wins, otherwise
+      // fall back to the namespace the loaded document declares on its root element.
+      if (!instEl.hasAttribute('xpath-default-namespace')) {
+        const override = widget.getAttribute('data-xpath-ns');
+        const root = instEl.getDefaultContext();
+        const ns = override || (root && root.namespaceURI);
+        if (ns) {
+          instEl.setAttribute('xpath-default-namespace', ns);
+        }
+      }
+
+      this.inScopeVariables.set(
+        varName,
+        typedValueFactory([instEl.getDefaultContext()], fontoDomFacade),
+      );
+      this.refresh(true);
+    } catch (error) {
+      Fore.dispatch(this, 'error', {
+        origin: this,
+        message: `control couldn't load data-src '${url}'`,
+        level: 'Error',
+      });
+    }
+  }
+
   /**
    * handle non-Fore elements like 'select' and 'datalist' which have a 'data-ref' attribute
    * @private

package/src/ui/fx-items.js

@@ -56,8 +56,8 @@ export class FxItems extends FxControl {
     });
 
     this.addEventListener('click', e => {
-      e.preventDefault; // keep as-is (do not change behavior here)
-      e.stopPropagation();
+      // e.preventDefault(); // keep as-is (do not change behavior here)
+      // e.stopPropagation();
       const items = this.querySelectorAll('[value]');
 
       let val = '';
@@ -86,7 +86,7 @@ export class FxItems extends FxControl {
   }
 
   async refresh(force = false) {
-    super.refresh(force);
+    await super.refresh(force);
     // console.log('fx-items.refresh() called');
   }
 

package/src/xpath-evaluation.js

@@ -741,6 +741,41 @@ function findInstanceReferences(xpathQuery) {
   return instanceReferences;
 }
 
+/**
+ * Finds the anonymous `<fx-instance data-src="...">` (created by
+ * `fx-control._ensureDataSrcInstance`) backing a `$src`/`$<data-id>` variable
+ * referenced in `xpathQuery`, if any. Used so the namespace resolver can pick up
+ * that instance's `xpath-default-namespace` instead of inheriting it from the
+ * form's default instance.
+ */
+function findDataSrcInstance(xpathQuery, formElement) {
+  if (!formElement || typeof formElement.querySelectorAll !== 'function') return null;
+
+  const varNames = [...xpathQuery.matchAll(/\$([A-Za-z_][\w.-]*)/g)].map(m => m[1]);
+  if (varNames.length === 0) return null;
+
+  const widgets = Array.from(formElement.querySelectorAll('[data-src]')).filter(
+    widget => widget.closest('fx-control') === formElement,
+  );
+  if (widgets.length === 0) return null;
+
+  const model = typeof formElement.getModel === 'function' ? formElement.getModel() : null;
+  if (!model) return null;
+
+  for (const varName of varNames) {
+    const widget = widgets.find(w => (w.getAttribute('data-id') || 'src') === varName);
+    if (!widget) continue;
+
+    const url = widget.getAttribute('data-src');
+    const instance = Array.from(model.children).find(
+      el => el.localName === 'fx-instance' && el.getAttribute('data-src') === url,
+    );
+    if (instance) return instance;
+  }
+
+  return null;
+}
+
 function getCachedNamespaceResolver(xpath, node) {
   if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) return null;
   return createdNamespaceResolversByXPathQueryAndNode.get(xpath).get(node) || null;
@@ -776,6 +811,14 @@ export function createNamespaceResolver(xpathQuery, formElement) {
   };
 
   if (instanceReferences.length === 0) {
+    const dataSrcInstance = findDataSrcInstance(xpathQuery, formElement);
+    if (dataSrcInstance && dataSrcInstance.hasAttribute('xpath-default-namespace')) {
+      const xpathDefaultNamespace = dataSrcInstance.getAttribute('xpath-default-namespace');
+      const resolveNamespacePrefix = prefix => (!prefix ? xpathDefaultNamespace : undefined);
+      setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
+      return resolveNamespacePrefix;
+    }
+
     const ancestorComponent = closestRefExcludingSelf(formElement);
 
     if (ancestorComponent && ancestorComponent !== formElement) {