@jinntec/fore 2.5.0 → 2.6.0

package/src/ui/UIElement.js

@@ -0,0 +1,91 @@
+import ForeElementMixin from '../ForeElementMixin.js';
+import { Fore } from '../fore.js';
+
+export class UIElement extends ForeElementMixin {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.ondemand = this.hasAttribute('on-demand') ? true : false;
+    this.wasOnDemandInitially = this.ondemand;
+    if (this.ondemand) {
+      this.addEventListener('show-control', () => {
+        this.removeAttribute('on-demand');
+      });
+      this.addTrashIcon();
+    }
+  }
+
+  activate() {
+    console.log('UIElement.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    if (this.isBound()) {
+      this.refresh(true);
+    }
+    Fore.dispatch(this, 'show-group', {});
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === 'on-demand') {
+      this.ondemand = newValue !== null;
+      if (!newValue && !this.wasOnDemandInitially) {
+        this.removeTrashIcon();
+      } else {
+        this.wasOnDemandInitially = true;
+        this.addTrashIcon();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ['on-demand'];
+  }
+
+  addTrashIcon() {
+    // Only show icon if explicitly marked by control-menu
+
+    if (!this.closest('[show-icon]')) return;
+
+    // const wrapper = this.shadowRoot.querySelector('.wrapper');
+    // if (!wrapper || wrapper.querySelector('.trash')) return;
+    const trash = this.querySelector('.trash');
+    if (trash) return;
+    const icon = document.createElement('span');
+    // icon.innerHTML = '🗑'; // trash icon
+    icon.innerHTML = `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.94 17.94C16.13 19.12 14.13 20 12 20C7 20 2.73 15.88 1 12C1.6 10.66 2.43 9.47 3.46 8.48M10.58 10.58C10.21 11.01 10 11.5 10 12C10 13.11 10.89 14 12 14C12.5 14 12.99 13.79 13.42 13.42M6.53 6.53C7.87 5.54 9.39 5 12 5C17 5 21.27 9.12 23 12C22.4 13.34 21.57 14.53 20.54 15.52M1 1L23 23"/>
+  </svg>
+`;
+
+    icon.classList.add('trash');
+    icon.setAttribute('title', 'Hide');
+    // icon.setAttribute('part', 'trash');
+    icon.style.cursor = 'pointer';
+    icon.style.marginLeft = '0.5em';
+
+    icon.addEventListener('click', e => {
+      e.stopPropagation();
+      this.setAttribute('on-demand', 'true');
+      this.style.display = 'none';
+      document.dispatchEvent(new CustomEvent('update-control-menu'));
+      Fore.dispatch(this, 'hide-control', {});
+    });
+
+    this.appendChild(icon);
+  }
+
+  removeTrashIcon() {
+    debugger;
+    const icon = this.querySelector('.trash');
+    if (icon) icon.remove();
+  }
+}
+if (!customElements.get('ui-element')) {
+  customElements.define('ui-element', UIElement);
+}

package/src/ui/abstract-control.js

@@ -1,9 +1,9 @@
 import '../fx-model.js';
-import ForeElementMixin from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import { UIElement } from './UIElement.js';
 
 function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
   if (oldNodeValue === null) {
@@ -13,7 +13,7 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
   if the oldControlValue is null we know the widget is used for the first time and is not considered
   a value change.
   */
-  if(oldControlValue === null) return false;
+  if (oldControlValue === null) return false;
 
   if (newControlValue && oldControlValue && newControlValue.nodeType && oldControlValue.nodeType) {
     return newControlValue.outerHTML !== oldControlValue.outerHTML;
@@ -31,7 +31,7 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
  * is a general base class for control elements.
  *
  */
-export default class AbstractControl extends ForeElementMixin {
+export default class AbstractControl extends UIElement {
   constructor() {
     super();
     this.value = null;
@@ -41,6 +41,7 @@ export default class AbstractControl extends ForeElementMixin {
     this.widget = null;
     this.visited = false;
     this.force = false;
+    this.ondemand = false;
     // this.attachShadow({ mode: 'open' });
   }
 
@@ -54,11 +55,13 @@ export default class AbstractControl extends ForeElementMixin {
    */
   async refresh(force) {
     if (force) this.force = true;
-    // console.log('### AbstractControl.refresh on : ', this);
 
     // Save the old value of this control. this may be the stringified version, contrast to the node in `nodeset`
     const oldValue = this.value;
 
+    // if (this.ondemand && !this.value) return;
+    // console.log('### AbstractControl.refresh on : ', this);
+
     // if(this.repeated) return
     if (this.isNotBound()) return;
 
@@ -170,14 +173,14 @@ export default class AbstractControl extends ForeElementMixin {
         // if oldVal is null we haven't received a concrete value yet
 
         if (!(this.localName === 'fx-control' || this.localName === 'fx-upload')) return;
-        if (isDifferent(this.oldVal,  oldValue, this.value)) {
+        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: oldValue,
-            instanceId:this.modelItem.instanceId,
-            foreId:this.getOwnerForm().id
+            instanceId: this.modelItem.instanceId,
+            foreId: this.getOwnerForm().id,
           });
         }
       }

package/src/ui/fx-container.js

@@ -1,12 +1,12 @@
 import '../fx-model.js';
-import ForeElementMixin from '../ForeElementMixin.js';
+import { UIElement } from './UIElement.js';
 
 /**
  * `fx-container` -
  * is a general class for container elements.
  *
  */
-export class FxContainer extends ForeElementMixin {
+export class FxContainer extends UIElement {
   static get properties() {
     return {
       ...super.properties,
@@ -24,6 +24,8 @@ export class FxContainer extends ForeElementMixin {
   }
 
   connectedCallback() {
+    super.connectedCallback();
+
     this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
     const style = `
         :host {
@@ -41,7 +43,7 @@ export class FxContainer extends ForeElementMixin {
             </style>
             ${html}
     `;
-    if(this.ref !== ''){
+    if (this.ref !== '') {
       this.getOwnerForm().registerLazyElement(this);
     }
 

package/src/ui/fx-control-menu.js

@@ -0,0 +1,198 @@
+import XfAbstractControl from './abstract-control.js';
+
+/**
+ * This class finds and lists all elements with an 'on-demand' attribute and offers them
+ * in a popup list for activation. 'on-demand' is not a state like 'relevant' but just
+ * shows/hides controls on demand. The controls still behave as usual otherwise.
+ *
+ *
+ */
+export class FxControlMenu extends XfAbstractControl {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.selectExpr = this.getAttribute('select');
+
+    const style = `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .menu {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        background: white;
+        border: 1px solid #ccc;
+        padding: 0.5em;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        min-width: 10em;
+        white-space:nowrap;
+      }
+
+      .menu.visible {
+        display: block;
+      }
+
+      .menu a {
+        display: block;
+        padding: 0.25em 0.5em;
+        text-decoration: none;
+        color: black;
+        cursor: pointer;
+      }
+
+      .menu a:hover {
+        background-color: #eee;
+      }
+    `;
+
+    this.shadowRoot.innerHTML = `
+      <style>${style}</style>
+      <slot></slot>
+      <div class="menu" part="menu"></div>
+    `;
+
+    this.menuEl = this.shadowRoot.querySelector('.menu');
+
+    // Slotted button click
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', () => {
+      const nodes = slot.assignedNodes({ flatten: true });
+      const button = nodes.find(
+        node => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BUTTON',
+      );
+      if (button) {
+        button.addEventListener('click', e => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.updateMenu();
+          this.menuEl.classList.toggle('visible');
+        });
+      }
+    });
+
+    // Update menu on custom event
+    document.addEventListener('update-control-menu', () => {
+      this.updateMenu();
+    });
+
+    // Close on outside click
+    document.addEventListener('click', e => {
+      const inside = this.contains(e.target) || this.shadowRoot.contains(e.target);
+      if (!inside) {
+        this.menuEl.classList.remove('visible');
+      }
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        this.menuEl.classList.remove('visible');
+      }
+    });
+
+    if (this.getAttribute('mode') === 'hide-on-empty') {
+      this.getOwnerForm().addEventListener('ready', () => {
+        const container = document.querySelector(this.selectExpr);
+        if (!container) return;
+
+        const widgets = container.querySelectorAll('.widget');
+        widgets.forEach(widget => {
+          const value = widget.value?.trim();
+          const control = widget.closest('fx-control');
+          if (control && (value === '' || value == null)) {
+            control.setAttribute('on-demand', 'true');
+          }
+        });
+
+        // After marking empty controls, update the menu
+        this.updateMenu();
+      });
+    }
+
+    const container = document.querySelector(this.selectExpr);
+    container?.addEventListener('show-control', event => {
+      this.updateMenu();
+    });
+
+    this.updateMenu();
+  }
+
+  updateMenu() {
+    const container = document.querySelector(this.selectExpr);
+    if (!container) return;
+
+    let targets = [];
+
+    if (container.hasAttribute('on-demand')) {
+      if (container.nodeName === 'FX-REPEAT') {
+        // If it's an <fx-repeat> with on-demand, use only the container
+        targets = [container];
+      } else {
+        // If it's not <fx-repeat>, include container and inner [on-demand] targets
+        targets = [container, ...container.querySelectorAll('[on-demand]')];
+      }
+    } else {
+      // If container is not on-demand, only look for inner [on-demand]
+      targets = Array.from(container.querySelectorAll('[on-demand]'));
+    }
+    this._currentTargets = targets;
+    this.menuEl.innerHTML = ''; // Clear menu
+
+    // Find the slotted button
+    const slot = this.shadowRoot.querySelector('slot');
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    const button = assignedNodes.find(
+      node => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BUTTON',
+    );
+
+    if (button) {
+      button.disabled = targets.length === 0;
+    }
+
+    if (targets.length === 0) {
+      this.menuEl.classList.remove('visible');
+      return;
+    }
+
+    targets.forEach((el, index) => {
+      let label = el.getAttribute('aria-label');
+      if (!label) {
+        label = el.querySelector('label')?.textContent.trim() || `Item ${index + 1}`;
+      }
+      if (!label) {
+        console.warn(
+          'no label found - cannot create menu entry for ',
+          el,
+          ' - please add aria-label or label element to control',
+        );
+      }
+      const item = document.createElement('a');
+      item.href = '#';
+      item.textContent = label;
+
+      item.addEventListener('click', e => {
+        e.preventDefault();
+        if (typeof el.activate === 'function') {
+          el.activate();
+        }
+
+        this.menuEl.classList.remove('visible');
+
+        // Wait one frame to let DOM updates (like on-demand removal) take effect
+        requestAnimationFrame(() => {
+          this.updateMenu();
+        });
+      });
+
+      this.menuEl.appendChild(item);
+    });
+  }
+}
+
+if (!customElements.get('fx-control-menu')) {
+  customElements.define('fx-control-menu', FxControlMenu);
+}

package/src/ui/fx-control.js

@@ -56,7 +56,7 @@ export default class FxControl extends XfAbstractControl {
     };
   }
 
-  _getValueFromHtmlDom() {
+  _getValueOfWidget() {
     if (this.valueProp === 'selectedOptions') {
       // We have multiple! Just return that as space-separated for now
       return [...this.widget.selectedOptions].map(option => option.value).join(' ');
@@ -76,10 +76,25 @@ export default class FxControl extends XfAbstractControl {
       : 'blur';
     this.label = this.hasAttribute('label') ? this.getAttribute('label') : null;
     const style = `
-            :host{
-                display:inline-block;
-            }
-        `;
+      :host {
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        position: relative;
+      }
+      .trash {
+        position: absolute;
+        right:0;
+        top:0;
+        cursor: pointer;
+        color: #888;
+        font-size: 0.65rem;
+        align-self: center;
+      }
+      .trash:hover {
+        color: red;
+      }
+      `;
 
     this.credentials = this.hasAttribute('credentials')
       ? this.getAttribute('credentials')
@@ -136,7 +151,7 @@ export default class FxControl extends XfAbstractControl {
           // console.info('handling Event:', event.type, listenOn);
           // Cancel the default action, if needed
           event.preventDefault();
-          this.setValue(this._getValueFromHtmlDom());
+          this.setValue(this._getValueOfWidget());
         }
       });
       this.updateEvent = 'blur'; // needs to be registered too
@@ -149,19 +164,19 @@ export default class FxControl extends XfAbstractControl {
           () => {
             // console.log('eventlistener ', this.updateEvent);
             // console.info('handling Event:', event.type, listenOn);
-            this.setValue(this._getValueFromHtmlDom());
+            this.setValue(this._getValueOfWidget());
           },
           this.debounceDelay,
         ),
       );
     } else {
       listenOn.addEventListener(this.updateEvent, event => {
-        this.setValue(this._getValueFromHtmlDom());
+        this.setValue(this._getValueOfWidget());
       });
       listenOn.addEventListener(
         'blur',
         event => {
-          this.setValue(this._getValueFromHtmlDom());
+          this.setValue(this._getValueOfWidget());
         },
         { once: true },
       );
@@ -185,7 +200,22 @@ export default class FxControl extends XfAbstractControl {
     this.template = this.querySelector('template');
     this.boundInitialized = false;
     this.static = !!this.widget.hasAttribute('static');
-    // console.log('template',this.template);
+    super.connectedCallback();
+  }
+
+  /**
+   * activates a control that uses 'on-demand' attribute
+   */
+  activate() {
+    console.log('fx-control.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    this.refresh(true);
+    Fore.dispatch(this, 'show-control', {});
+    // Focus the widget after the control becomes visible
+    requestAnimationFrame(() => {
+      this.getWidget()?.focus();
+    });
   }
 
   _debounce(func, timeout = 300) {
@@ -239,7 +269,7 @@ export default class FxControl extends XfAbstractControl {
       this.modelItem.boundControls.push(this);
     }
 
-    setval.actionPerformed();
+    setval.actionPerformed(false);
     // this.visited = true;
   }
 
@@ -260,9 +290,11 @@ export default class FxControl extends XfAbstractControl {
   }
 
   renderHTML(ref) {
+    const showTrash = this.hasAttribute('on-demand');
+    const showIcon = this.closest('[show-icon]');
     return `
             ${this.label ? `${this.label}` : ''}
-            <slot></slot>
+              <slot></slot>
             ${
               this.hasAttribute('as') && this.getAttribute('as') === 'node'
                 ? '<fx-replace id="replace" ref=".">'
@@ -311,6 +343,13 @@ export default class FxControl extends XfAbstractControl {
    */
   async updateWidgetValue() {
     // this._getValueFromHtmlDom() = this.value;
+    if (this.value) {
+      // Fire and forget this: the value is set right away anyway
+      this.setAttribute('has-value', '');
+      Fore.dispatch(this, 'show-control');
+    } else {
+      this.removeAttribute('has-value');
+    }
 
     let { widget } = this;
     if (!widget) {
@@ -609,24 +648,29 @@ export default class FxControl extends XfAbstractControl {
   updateEntry(newEntry, node) {
     // ### >>> todo: needs rework this code is heavily assuming a select control with 'value' attribute - not generic at all yet.
 
-    // if (this.widget.nodeName !== 'SELECT') return;
-    const valueAttribute = this._getValueAttribute(newEntry);
+    const valueAttribute = newEntry.getAttribute('value');
     if (!valueAttribute) {
       // Fore.dispatch(this,'warn',{message:'no value attribute specified for template entry.'});
       return;
     }
 
-    const valueExpr = valueAttribute.value;
+    const valueExpr = valueAttribute;
     const cutted = valueExpr.substring(1, valueExpr.length - 1);
     const evaluated = evaluateXPathToString(cutted, node, newEntry);
-    valueAttribute.value = evaluated;
+    newEntry.setAttribute('value', evaluated);
 
     if (this.value === evaluated) {
       newEntry.setAttribute('selected', 'selected');
     }
 
+    if (newEntry.hasAttribute('title')) {
+      let titleExpr = newEntry.getAttribute('title');
+      titleExpr = titleExpr.substring(1, titleExpr.length - 1);
+      const evaluated = evaluateXPathToString(titleExpr, node, newEntry);
+      newEntry.setAttribute('title', evaluated);
+    }
     // ### set label
-    const optionLabel = newEntry.textContent;
+    const optionLabel = newEntry.textContent.trim();
     this.evalLabel(optionLabel, node, newEntry);
     //  ### <<< needs rework
   }

package/src/ui/fx-dialog.js

@@ -61,7 +61,7 @@ export class FxDialog extends HTMLElement {
     `;
   }
 
-  open() {
+  showModal() {
     window.addEventListener(
       'keyup',
       e => {
@@ -75,7 +75,7 @@ export class FxDialog extends HTMLElement {
     this.classList.add('show');
   }
 
-  async hide() {
+  async close() {
     await Fore.fadeOutElement(this, 400);
     this.classList.remove('show');
   }

package/src/ui/fx-group.js

@@ -95,6 +95,20 @@ class FxGroup extends FxContainer {
     // context item
     Fore.refreshChildren(this, !!force);
   }
+
+  // todo: this code should go
+  /**
+   * activates a control that uses 'on-demand' attribute
+   */
+  activate() {
+    console.log('fx-group.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    if (this.isBound()) {
+      this.refresh(true);
+    }
+    Fore.dispatch(this, 'show-group', {});
+  }
 }
 
 if (!customElements.get('fx-group')) {

package/src/ui/fx-repeat.js

@@ -6,6 +6,7 @@ import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
 import { withDraggability } from '../withDraggability.js';
+import { UIElement } from './UIElement.js';
 
 // import {DependencyNotifyingDomFacade} from '../DependencyNotifyingDomFacade';
 
@@ -25,7 +26,7 @@ import { withDraggability } from '../withDraggability.js';
  * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
  * @extends {ForeElementMixin}
  */
-export class FxRepeat extends withDraggability(ForeElementMixin, false) {
+export class FxRepeat extends withDraggability(UIElement, false) {
   static get properties() {
     return {
       ...super.properties,
@@ -80,7 +81,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
     const rItems = this.querySelectorAll(':scope > fx-repeatitem');
     this.applyIndex(rItems[this.index - 1]);
 
-    this.getOwnerForm().refresh({ reason: 'index-function' });
+    this.getOwnerForm().refresh({ reason: 'index-function', elementLocalnamesWithChanges: [] });
   }
 
   applyIndex(repeatItem) {
@@ -107,6 +108,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
     // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
+    this.dependencies.addXPath(this.ref);
     // this.ref = this._getRef();
     // console.log('### fx-repeat connected ', this.id);
     this.addEventListener('item-changed', e => {
@@ -171,6 +173,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
     const html = `
           <slot name="header"></slot>
           <slot></slot>
+          <slot name="footer"></slot>
         `;
     this.shadowRoot.innerHTML = `
             <style>
@@ -197,7 +200,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
 
   init() {
     // ### there must be a single 'template' child
-    console.log('##### repeat init ', this.id);
+    // console.log('##### repeat init ', this.id);
     // if(!this.inited) this.init();
     // does not use this.evalInContext as it is expecting a nodeset instead of single node
     this._evalNodeset();
@@ -321,6 +324,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
     // Fore.refreshChildren(clone,true);
     const fore = this.getOwnerForm();
     if (!fore.lazyRefresh || force) {
+      // Turn the possibly conditional force refresh into a forced one: we changed our children
       Fore.refreshChildren(this, force);
     }
     // this.style.display = 'block';
@@ -400,6 +404,12 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
 
       if (this.getOwnerForm().createNodes) {
         this.getOwnerForm().initData(repeatItem);
+        const repeatItemClone = repeatItem.nodeset.cloneNode(true);
+        this.clearTextValues(repeatItemClone);
+
+        // this.createdNodeset = repeatItem.nodeset.cloneNode(true);
+        this.createdNodeset = repeatItemClone;
+        // console.log('createdNodeset', this.createdNodeset)
       }
 
       if (repeatItem.index === 1) {
@@ -410,6 +420,26 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
       this._initVariables(repeatItem);
     });
   }
+  clearTextValues(node) {
+    if (!node) return;
+
+    // Clear text node content
+    if (node.nodeType === Node.TEXT_NODE) {
+      node.nodeValue = '';
+    }
+
+    // Clear all attribute values
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      for (const attr of Array.from(node.attributes)) {
+        attr.value = ''; // Clear attribute value
+      }
+    }
+
+    // Recursively clear child nodes
+    for (const child of node.childNodes) {
+      this.clearTextValues(child);
+    }
+  }
 
   _initVariables(newRepeatItem) {
     const inScopeVariables = new Map(this.inScopeVariables);