@operato/board 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^3.0.19",
+    "@hatiolab/things-scene": "^3.0.22",
     "@material/mwc-fab": "^0.26.1",
     "@material/mwc-icon": "^0.26.1",
     "@open-wc/eslint-config": "^4.3.0",
@@ -114,5 +114,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "94b3293141c884cf9d05303e4232cceacbffc577"
+  "gitHead": "708bac1eb001bd2aad5b289056031b841558eba6"
 }

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -224,7 +224,8 @@ export default class DataBindingMapper extends LitElement {
       />
       <datalist id="target-list">
         <option value="(self)"></option>
-        <option value="[key]"></option>
+        <option value="(key)"></option>
+        <option value="[propkey]"></option>
         ${this._componentIds.length
           ? html`
               ${this._componentIds.map(

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -29,7 +29,8 @@ class PropertyEventTap extends LitElement {
   }
 
   render() {
-    var { action, value = '', target = '', pressed } = this.value || {}
+    var { action, value = '', target = '', pressed, options } = this.value || {}
+    var { input = '(self)', output = true } = options || {}
 
     return html`
       <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
@@ -53,12 +54,9 @@ class PropertyEventTap extends LitElement {
         <option value="link-open">open new window for target link</option>
         <option value="link-move">move to target link</option>
         <option value="route-page">route to page</option>
-        <option value="popup">popup target board with data</option>
-        <option value="popup-with-value">popup target board with value</option>
-        <option value="modal-popup">modal popup target board with data</option>
-        <option value="modal-popup-with-value">modal popup target board with value</option>
+        <option value="popup">popup target board</option>
+        <option value="modal-popup">modal popup target board</option>
         <option value="close-scene">close current board</option>
-        <option value="close-scene-silently">close current board silently</option>
         <option value="infoWindow">open infowindow</option>
         <option value="toggle-info-window">toggle infowindow</option>
         <option value="data-toggle">toggle(true/false) target component data</option>
@@ -71,7 +69,7 @@ class PropertyEventTap extends LitElement {
 
       <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
 
-      ${action === 'goto' || action.includes('popup')
+      ${action === 'goto' || action?.includes('popup')
         ? html`
             <things-editor-board-selector
               value-key="target"
@@ -86,7 +84,7 @@ class PropertyEventTap extends LitElement {
               list="target-list"
               .placeholder=${this._getPlaceHoder(action)}
               @focusin=${() => {
-                this.targetList = this._getTargetList(action)
+                this.targetList = this._getInputList(action)
               }}
             />
 
@@ -96,7 +94,34 @@ class PropertyEventTap extends LitElement {
               )}
             </datalist>
           `}
-      ${action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'
+      ${action === 'goto' || action?.includes('popup')
+        ? html`
+            <label for="input"> <ox-i18n msgid="label.input-data">input</ox-i18n> </label>
+            <input
+              id="input"
+              value-key="input"
+              .value=${input}
+              list="input-list"
+              @focusin=${() => {
+                this.targetList = this._getInputList(action)
+              }}
+            />
+            <datalist id="input-list">
+              ${this.targetList.map(
+                ({ value, description }) => html` <option .value=${value}>${description}</option> `
+              )}
+            </datalist>
+            ${
+              /* currently 'goto' does not support returning result */
+              action?.includes('popup')
+                ? html` <input id="checkbox-output" type="checkbox" value-key="output" .checked=${output} />
+                    <label for="checkbox-output" class="checkbox-label">
+                      <ox-i18n msgid="label.will-get-return">will-get-return</ox-i18n>
+                    </label>`
+                : html``
+            }
+          `
+        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'
         ? html`
             <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
             <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
@@ -107,9 +132,6 @@ class PropertyEventTap extends LitElement {
 
   _getPlaceHoder(action: string) {
     switch (action) {
-      case 'popup':
-      case 'goto':
-        return 'SCENE-100'
       case 'link-open':
       case 'link-move':
         return 'http://www.hatiolab.com/'
@@ -118,12 +140,14 @@ class PropertyEventTap extends LitElement {
     }
   }
 
-  _getTargetList(action: string): { value: string; description: string }[] {
+  _getInputList(action: string): { value: string; description: string }[] {
     switch (action) {
       case 'data-toggle':
       case 'data-tristate':
       case 'data-set':
       case 'value-set':
+      case 'popup':
+      case 'modal-popup':
         let ids =
           (this.scene &&
             this.scene.ids.map(i => {
@@ -163,9 +187,27 @@ class PropertyEventTap extends LitElement {
       return
     }
 
-    this.value = {
-      ...this.value,
-      [key]: convert(element)
+    if (key === 'input' || key === 'output') {
+      var { options = {} } = this.value || {}
+
+      this.value = {
+        ...this.value,
+        options: {
+          ...options,
+          [key]: convert(element)
+        }
+      }
+    } else {
+      this.value = {
+        ...this.value,
+        [key]: convert(element)
+      }
+    }
+
+    var { action } = this.value
+    if (action !== 'goto' && !action?.includes('popup')) {
+      /* clear unused options */
+      delete this.value.options
     }
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))

package/src/ox-board-viewer.ts

@@ -422,8 +422,10 @@ export class BoardViewer extends LitElement {
     )
   }
 
-  onLinkGoto(targetBoardId: string, value: any, fromComponent: Component) {
-    this.showScene(targetBoardId, fromComponent.data)
+  onLinkGoto(targetBoardId: string, options: any, fromComponent: any) {
+    const { input, output } = options || { input: '(self)' }
+    const data = input && fromComponent.root.findFirst(input, fromComponent)?.data
+    this.showScene(targetBoardId, data)
   }
 
   onLinkOpen(url: string, value: any, fromComponent: Component) {