@jinntec/fore 2.4.1 → 2.5.0

package/index.js

@@ -32,6 +32,8 @@ import './src/tools/fx-devtools.js';
 import './src/tools/fx-dom-inspector.js';
 import './src/lab/fore-component.js';
 import './src/tools/fx-json-instance.js';
+import './tools/fx-lens.js';
+import './src/ui/fx-upload.js';
 // import './src/tools/fx-minimap.js';
 
 // import './src/ui/fx-checkbox-group.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -49,7 +49,7 @@
     "@skypack/package-check": "^0.2.2",
     "@types/cypress": "^1.1.3",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "cypress": "^13.3.0",
+    "cypress": "^13.16.0",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",

package/resources/fore.css

@@ -8,7 +8,7 @@
         --inspector-pre-bg: var(--paper-grey-100);
         --inspector-color: var(--paper-grey-800);
         --inspector-instance-height: 200px;
-        --inspector-handle-bg: var(--paper-blue-500);
+        --inspector-handle-bg: var(--paper-blue-700);
         --inspector-handle-width: 30px;
     }
 

package/src/ForeElementMixin.js

@@ -56,7 +56,7 @@ export default class ForeElementMixin extends HTMLElement {
     super();
     this.context = null;
     this.model = null;
-    this.modelItem = {};
+    this.modelItem = null;
     this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
     /**
      * @type {Map<string, import('./fx-var.js').FxVariable>}
@@ -230,9 +230,6 @@ export default class ForeElementMixin extends HTMLElement {
    * @returns {import('./modelitem.js').ModelItem}
    */
   getModelItem() {
-    // return this.model.bindingMap.find(m => m.refnode === this.nodeset);
-    // return this.getModel().bindingMap.find(m => m.refnode === this.nodeset);
-
     const mi = this.getModel().getModelItem(this.nodeset);
     if (mi) {
       this.modelItem = mi;
@@ -248,12 +245,21 @@ export default class ForeElementMixin extends HTMLElement {
         existed = this.getModel().getModelItem(this.nodeset);
       }
     } else {
-      existed = this.getModel().getModelItem(this.nodeset);
+      existed = this.nodeset ? this.getModel().getModelItem(this.nodeset) : null;
     }
 
     if (!existed) {
-      return FxModel.lazyCreateModelItem(this.getModel(), this.ref, this.nodeset);
+      const lazyCreatedModelItem = FxModel.lazyCreateModelItem(
+        this.getModel(),
+        this.ref,
+        this.nodeset,
+        this,
+      );
+      this.modelItem = lazyCreatedModelItem;
+      return lazyCreatedModelItem;
     }
+    this.modelItem = existed;
+
     return existed;
   }
 

package/src/actions/abstract-action.js

@@ -214,6 +214,27 @@ export class AbstractAction extends ForeElementMixin {
   async execute(e) {
     if(!this.getModel().modelConstructed) return;
     // console.log(this, this.event);
+    if(this.event){
+      if(this.event === 'submit-done'){
+        console.info(
+            `%csubmit-done ${this.event} #${this?.parentNode?.id}`,
+            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        );
+      }else{
+        console.info(
+            `%cexecuting ${this.constructor.name} ${this.event}`,
+            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        );
+      }
+
+    }else{
+      console.info(
+          `%cexecuting ${this.constructor.name}`,
+          'background:limegreen; color:black; margin-left:1rem; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          this
+      );
+    }
+
 
     if (e && e.target.nodeType !== Node.DOCUMENT_NODE && e.target !== window) {
       /*
@@ -247,6 +268,12 @@ export class AbstractAction extends ForeElementMixin {
 
     // Outermost handling
     if (FxFore.outermostHandler === null) {
+      console.log(
+          `%coutermost Action on ${this.getOwnerForm().id}`,
+          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+          this,
+      );
+
       FxFore.outermostHandler = this;
       this.dispatchEvent(
         new CustomEvent('outermost-action-start', {
@@ -378,6 +405,12 @@ export class AbstractAction extends ForeElementMixin {
     this.currentEvent = null;
     this.actionPerformed();
     if (FxFore.outermostHandler === this) {
+      console.log(
+          `%cfinalizing outermost Action on ${this.getOwnerForm().id}`,
+          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+          this,
+      );
+
       FxFore.outermostHandler = null;
       /*
                         console.info(

package/src/actions/fx-delete.js

@@ -63,8 +63,8 @@ class FxDelete extends AbstractAction {
       parent = nodesToDelete.parentNode;
       this._deleteNode(parent, nodesToDelete);
     }
-
-    await Fore.dispatch(instance, 'deleted', { ref: path, deletedNodes: nodesToDelete });
+    const foreId = this.getOwnerForm().id;
+    await Fore.dispatch(instance, 'deleted', { ref: path, deletedNodes: nodesToDelete , instanceId:instanceId, foreId:foreId});
     this.needsUpdate = true;
   }
 

package/src/actions/fx-insert.js

@@ -251,6 +251,8 @@ export class FxInsert extends AbstractAction {
       'inserted-nodes': originSequenceClone,
       'insert-location-node': insertLocationNode,
       position: this.position,
+      instanceId:instanceId,
+      foreId:this.getOwnerForm().id
     });
 
     // todo: this actually should dispatch to respective instance

package/src/actions/fx-send.js

@@ -87,12 +87,10 @@ class FxSend extends AbstractAction {
     }
 
     await submission.submit();
-    /*
             if(submission.replace === 'instance'){
               this.getModel().updateModel();
               this.getOwnerForm().refresh();
             }
-        */
     // if not of type fx-submission signal error
   }
 

package/src/actions/fx-setvalue.js

@@ -92,13 +92,17 @@ export default class FxSetvalue extends AbstractAction {
 
       if (newVal?.nodeType) {
         if (newVal.nodeType === Node.ELEMENT_NODE) {
-          item.value = newVal.textContent;
+          item.value = newVal;
         }
         if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
           item.value = newVal.getValue();
         }
+        if(newVal.nodeType === Node.TEXT_NODE){
+          item.value = newVal.textContent;
+        }
       } else {
         item.value = newVal;
+        item.node.textContent = newVal;
       }
       this.getModel().changed.push(modelItem);
       this.needsUpdate = true;

package/src/fore.js

@@ -320,7 +320,8 @@ export class Fore {
                 }
                 // console.log('refreshing', element, element?.ref);
                 // console.log('refreshing ',element);
-            } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
+            } else if (!(element.inert === true) ) {
+                // testing for inert catches model and action elements and should just leave updateable html elements
                 Fore.refreshChildren(element, force);
             }
         }

package/src/fx-bind.js

@@ -306,9 +306,9 @@ export class FxBind extends ForeElementMixin {
 
     // const path = fx.evaluateXPath('path()',node);
     // const path = this.getPath(node);
-    const instance = XPathUtil.resolveInstance(this, this.ref);
+    const instanceId = XPathUtil.resolveInstance(this, this.ref);
 
-    const path = XPathUtil.getPath(node, instance);
+    const path = XPathUtil.getPath(node, instanceId);
     // const shortPath = this.shortenPath(path);
 
     // ### constructing default modelitem - will get evaluated during recalculate()
@@ -325,6 +325,7 @@ export class FxBind extends ForeElementMixin {
       this.type,
       targetNode,
       this,
+      instanceId
     );
 
     const alert = this.getAlert();