@jinntec/fore 2.2.0 → 2.3.0

package/src/ui/fx-repeatitem.js

@@ -1,7 +1,6 @@
-import {Fore} from '../fore.js';
-import {foreElementMixin} from '../ForeElementMixin.js';
-import {FxFore} from "../fx-fore.js";
-import {withDraggability} from "../withDraggability.js";
+import { Fore } from '../fore.js';
+import ForeElementMixin from '../ForeElementMixin.js';
+import { withDraggability } from '../withDraggability.js';
 
 /**
  * `fx-repeat`
@@ -10,62 +9,59 @@ import {withDraggability} from "../withDraggability.js";
  * @customElement
  * @demo demo/index.html
  */
-export class FxRepeatitem extends withDraggability(foreElementMixin(HTMLElement), true) {
-    static get properties() {
-        return {
-            inited: {
-                type: Boolean,
-            },
-        };
-    }
-
-    constructor() {
-        super();
-        this.inited = false;
+export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
+  static get properties() {
+    return {
+      inited: {
+        type: Boolean,
+      },
+    };
+  }
 
-        this.addEventListener('click', this._dispatchIndexChange);
-        // this.addEventListener('focusin', this._handleFocus);
-        this.addEventListener('focusin', this._dispatchIndexChange);
+  constructor() {
+    super();
+    this.inited = false;
 
-        this.attachShadow({mode: 'open', delegatesFocus: true});
+    this.addEventListener('click', this._dispatchIndexChange);
+    // this.addEventListener('focusin', this._handleFocus);
+    this.addEventListener('focusin', this._dispatchIndexChange);
 
-        this.dropTarget = null;
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
 
-    }
+    this.dropTarget = null;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-        this.display = this.style.display;
+  connectedCallback() {
+    super.connectedCallback();
+    this.display = this.style.display;
 
-        const html = `
+    const html = `
            <slot></slot>
         `;
 
-        this.shadowRoot.innerHTML = `
+    this.shadowRoot.innerHTML = `
             ${html}
         `;
-        this.getOwnerForm().registerLazyElement(this);
+    this.getOwnerForm().registerLazyElement(this);
 
-        this.ref = `${this.parentNode.ref}`;
-
-        this.tabindex = 0;
-
-    }
+    this.ref = `${this.parentNode.ref}`;
 
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this._dispatchIndexChange);
-        this.removeEventListener('focusin', this._handleFocus);
-    }
+    this.tabindex = 0;
+  }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._dispatchIndexChange);
+    this.removeEventListener('focusin', this._handleFocus);
+  }
 
-    init() {
-        // console.log('repeatitem init model ', this.nodeset);
-        // this._initializeChildren(this);
-        this.inited = true;
-    }
+  init() {
+    // console.log('repeatitem init model ', this.nodeset);
+    // this._initializeChildren(this);
+    this.inited = true;
+  }
 
-    /*
+  /*
       getModelItem() {
       super.getModelItem();
       // console.log('modelItem in repeatitem ', this.getModelItem()[this.index]);
@@ -73,32 +69,43 @@ export class FxRepeatitem extends withDraggability(foreElementMixin(HTMLElement)
       }
     */
 
-    _dispatchIndexChange() {
-        this.dispatchEvent(
-            new CustomEvent('item-changed', {composed: false, bubbles: true, detail: {item: this, index: this.index}}),
-        );
+  _dispatchIndexChange() {
+    /**
+     * @type {import('./fx-repeat.js').FxRepeat}
+     */
+    const repeat = this.parentNode;
+    if (repeat.index === this.index) {
+      // The index did not really change if it did not change :wink:
+      return;
     }
-
-
-    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', '');
-            }
-        }
-        // Always recurse for these refreshes, especially when forced
-        Fore.refreshChildren(this, force);
+    this.dispatchEvent(
+      new CustomEvent('item-changed', {
+        composed: false,
+        bubbles: true,
+        detail: { item: this, index: this.index },
+      }),
+    );
+  }
+
+  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', '');
+      }
     }
+    // Always recurse for these refreshes, especially when forced
+    Fore.refreshChildren(this, force);
+  }
 }
 
 if (!customElements.get('fx-repeatitem')) {
-    window.customElements.define('fx-repeatitem', FxRepeatitem);
-}
+  window.customElements.define('fx-repeatitem', FxRepeatitem);
+}

package/src/ui/fx-switch.js

@@ -41,41 +41,41 @@ class FxSwitch extends FxContainer {
         ${html}
     `;
     this.cases = [];
-    this.formerCase=null;
+    this.formerCase = null;
     this.selectedCase = null;
-
   }
 
   async refresh(force) {
     super.refresh(force);
     // console.log('refresh on switch ');
-    if(this.cases.length === 0){
+    if (this.cases.length === 0) {
       this.cases = Array.from(this.querySelectorAll(':scope > fx-case'));
     }
 
     if (this.isBound()) {
       this._handleBoundSwitch();
     }
-    if(!this.selectedCase){
+    if (!this.selectedCase) {
       this.selectedCase = this.cases[0]; // first is always default
       this.toggle(this.selectedCase);
     }
 
-    Fore.refreshChildren(this.selectedCase,force);
+    Fore.refreshChildren(this.selectedCase, force);
   }
 
-  _dispatchEvents(){
-    if(this.formerCase && this.formerCase !== this.selectedCase){
-      Fore.dispatch(this.formerCase,'deselect',{});
+  _dispatchEvents() {
+    if(this.selectedCase === this.formerCase) return;
+    if (this.formerCase && this.formerCase !== this.selectedCase) {
+      Fore.dispatch(this.formerCase, 'deselect', {});
     }
-    if(this.selectedCase.classList.contains('selected-case')){
-      Fore.dispatch(this.selectedCase,'select',{});
+    if (this.selectedCase.classList.contains('selected-case')) {
+      Fore.dispatch(this.selectedCase, 'select', {});
     }
   }
 
-  _resetVisited(){
+  _resetVisited() {
     const visited = this.selectedCase.querySelectorAll('.visited');
-    Array.from(visited).forEach(v =>{
+    Array.from(visited).forEach(v => {
       v.classList.remove('visited');
     });
   }
@@ -93,11 +93,35 @@ class FxSwitch extends FxContainer {
     });
   }
 
+  /**
+   * Replace an old case with a new case element.
+   *
+   * @param {import('./fx-case.js').FxCase} oldCase
+   * @param {import('./fx-case.js').FxCase} newCase
+   */
+  async replaceCase(oldCase, newCase) {
+    this.cases.splice(this.cases.indexOf(oldCase), 1, newCase);
+
+    if (oldCase === this.selectedCase) {
+      this.selectedCase = newCase;
+      this.formerCase = newCase;
+      newCase.classList.add('selected-case');
+      newCase.classList.remove('deselected-case');
+      newCase.inert = false;
+      // Tell the owner form we might have new template expressions here
+      this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
+    } else {
+      newCase.classList.add('deselected-case');
+      newCase.classList.remove('selected-case');
+      newCase.inert = true;
+    }
+  }
+
   /**
    * Activates a fx-case element by switching CSS classes.
    * Dispatches 'select' and 'deselect' events as appropriate.
    *
-   * @param caseElement the fx-case element to activate
+   * @param {import('./fx-case.js').FxCase} caseElement the fx-case element to activate
    */
   toggle(caseElement) {
     this.selectedCase = caseElement;
@@ -114,7 +138,7 @@ class FxSwitch extends FxContainer {
       }
     });
 
-    if(this.selectedCase !== caseElement){
+    if (this.selectedCase !== caseElement) {
       this.selectedCase = caseElement;
     }
     this._dispatchEvents();
@@ -122,6 +146,7 @@ class FxSwitch extends FxContainer {
 
     // Tell the owner form we might have new template expressions here
     this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
+    this.getOwnerForm().getModel().updateModel();
   }
 }
 

package/src/ui/fx-trigger.js

@@ -23,10 +23,10 @@ export class FxTrigger extends XfAbstractControl {
     const slot = this.shadowRoot.querySelector('slot');
     slot.addEventListener('slotchange', () => {
       const elements = slot.assignedElements({ flatten: true });
-      if(!elements[0].getAttribute('tabindex')){
+      if (!elements[0].getAttribute('tabindex')) {
         elements[0].setAttribute('tabindex', '0');
       }
-      if(elements[0].nodeName !== 'BUTTON'){
+      if (elements[0].nodeName !== 'BUTTON') {
         elements[0].setAttribute('role', 'button');
       }
 
@@ -34,7 +34,7 @@ export class FxTrigger extends XfAbstractControl {
 
       this.addEventListener('mousedown', e => {
         console.log('target', e.target.nodeName);
-          e.target.focus();
+        e.target.focus();
       });
 
       if (this.debounceDelay) {
@@ -108,7 +108,7 @@ export class FxTrigger extends XfAbstractControl {
           // We are handling the event. Stop it from going further
           e.preventDefault();
           e.stopPropagation();
-          if(e.type && child.event && e.type !== child.event) return;
+          if (e.type && child.event && e.type !== child.event) return;
         }
         // eslint-disable-next-line no-await-in-loop
         await child.execute(e);