@jinntec/fore 1.0.0 → 1.1.0

package/index.js

@@ -27,6 +27,7 @@ import './src/ui/fx-items.js';
 // action classes
 import './src/actions/fx-append.js';
 import './src/actions/fx-delete.js';
+import './src/actions/fx-setfocus.js';
 import './src/actions/fx-insert.js';
 import './src/actions/fx-message.js';
 import './src/actions/fx-setvalue.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.0.0",
-  "description": "Fore - Forms for the Web",
+  "version": "1.1.0",
+  "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
     "access": "public"
@@ -90,7 +90,9 @@
     "XQuery",
     "form",
     "xforms",
-    "html form"
+    "html form",
+    "declarative",
+    "user interface"
   ],
   "author": "Joern Turner",
   "license": "MIT",

package/resources/fore.css

@@ -45,6 +45,11 @@ fx-alert{
     font-size: 0.9rem;
 }
 
+/* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
+fx-case{
+    display: none;
+}
+
 fx-model, fx-model *, fx-model ::slotted(fx-instance), fx-instance{
     display:none;
 }

package/src/ForeElementMixin.js

@@ -107,7 +107,7 @@ export const foreElementMixin = superclass =>
       if (this.hasAttribute('ref')) {
         inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
       }
-      if (!inscopeContext) {
+      if (!inscopeContext && this.getModel().instances.length !== 0) {
         // ### always fall back to default context with there's neither a 'context' or 'ref' present
         inscopeContext = this.getModel()
           .getDefaultInstance()

package/src/actions/abstract-action.js

@@ -117,9 +117,22 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
     // console.log('executing', this);
     // console.log('executing e', e);
     // console.log('executing e phase', e.eventPhase);
+    if(e && e.code){
+      const vars = new Map();
+      vars.set('code',e.code);
+      this.setInScopeVariables(vars);
+    }
+
     if (e && e.detail) {
       this.detail = e.detail;
-      // console.log('#### detail', e.detail);
+      const vars = new Map();
+      Object.keys(e.detail).forEach(function(key,index) {
+        // key: the name of the object key
+        // index: the ordinal position of the key within the object
+        vars.set(key,e.detail[key]);
+      });
+      console.log("event detail vars", vars);
+      this.setInScopeVariables(vars);
     }
     this.needsUpdate = false;
 

package/src/actions/fx-confirm.js

@@ -1,4 +1,4 @@
-import { FxAction } from './fx-action.js';
+import {AbstractAction} from "./abstract-action";
 
 /**
  * `fx-confirm`
@@ -7,7 +7,7 @@ import { FxAction } from './fx-action.js';
  * @customElement
  * @demo demo/project.html
  */
-export class FxConfirm extends FxAction {
+export class FxConfirm extends AbstractAction {
   connectedCallback() {
     this.message = this.hasAttribute('message') ? this.getAttribute('message') : null;
   }

package/src/actions/fx-refresh.js

@@ -16,6 +16,10 @@ class FxRefresh extends AbstractAction {
         return;
       }
     }
+    if(this.hasAttribute('force')){
+      this.getOwnerForm().forceRefresh();
+      return;
+    }
     this.getOwnerForm().refresh();
   }
 }

package/src/actions/fx-replace.js

@@ -2,6 +2,7 @@
 import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import getInScopeContext from "../getInScopeContext";
 
 /**
  * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
@@ -34,12 +35,14 @@ export default class FxReplace extends AbstractAction {
   perform() {
     super.perform();
     console.log('replace action');
-    if (!this.nodeset) {
-      return;
-    }
+    // console.log('replace action variables', this.inScopeVariables);
+    // if (!this.nodeset) {
+    //   return;
+    // }
     const target = evaluateXPathToFirstNode(this.with, this.nodeset, this);
     if (!target) return;
 
+
     this.replace(this.nodeset, target);
   }
 
@@ -59,6 +62,8 @@ export default class FxReplace extends AbstractAction {
       const cloned = replaceWith.cloneNode(true);
       toReplace.replaceWith(cloned);
     }
+    // const modelitem = this.getModelItem();
+    // this.getModel().changed.push(modelitem);
     this.needsUpdate = true;
   }
 }

package/src/actions/fx-setfocus.js

@@ -0,0 +1,37 @@
+import {AbstractAction} from "./abstract-action";
+import {resolveId} from "../xpath-evaluation";
+
+/**
+ * `fx-setfocus`
+ * Set the focus to a target control.
+ *
+ * @customElement
+ */
+export class FxSetfocus extends AbstractAction {
+  connectedCallback() {
+      super.connectedCallback();
+      this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
+  }
+
+  perform() {
+      console.log('setting focus', this.control);
+      // super.perform();
+
+      // const targetElement = resolveId(this.control, this);
+      const selector = '#'+this.control;
+      let targetElement = document.querySelector(selector);
+      const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
+      if(repeatitem){
+        // targetElement is repeated
+        // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
+        const repeat = repeatitem.parentNode;
+        targetElement = repeat.querySelector('[repeat-index] ' + selector);
+
+      }
+      targetElement.getWidget().focus();
+  }
+}
+
+if (!customElements.get('fx-setfocus')) {
+  window.customElements.define('fx-setfocus', FxSetfocus);
+}

package/src/actions/fx-show.js

@@ -18,7 +18,11 @@ export class FxShow extends FxAction {
   }
 
   perform() {
-    resolveId(this.dialog, this).open();
+    const targetDlg = resolveId(this.dialog,this);
+    if(!targetDlg){
+      console.error('target dialog with given id does not exist',this.dialog);
+    }
+    targetDlg.open();
   }
 }
 

package/src/fore.js

@@ -131,6 +131,7 @@ export class Fore {
             resolve('done');
           }
           if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+            // console.log('refreshing', element, element?.ref);
             // console.log('refreshing ',element);
             element.refresh();
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
@@ -227,7 +228,7 @@ export class Fore {
       bubbles: true,
       detail,
     });
-    console.log('firing', event);
+    console.log('dispatching', event);
     target.dispatchEvent(event);
   }
 

package/src/functions/fx-function.js

@@ -83,7 +83,12 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
         break;
       }
 
+      case 'text/xquf':
+      case 'text/xquery':
       case 'text/xpath': {
+        const language = type === 'text/xpath' ?
+            'XPath3.1' : type === 'text/xquery' ?
+            'XQuery3.1' : 'XQueryUpdate3.1';
         const fun = (domFacade, ...args) =>
           evaluateXPath(
             this.functionBody,
@@ -93,6 +98,7 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
               variablesByName[paramPart.variableName.replace('$', '')] = args[i];
               return variablesByName;
             }, {}),
+			  {language}
           );
         registerCustomXPathFunction(
           functionIdentifier,