@operato/board 0.4.7 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.4.7",
+  "version": "0.4.10",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "@operato/input": "^0.4.6",
     "@operato/markdown": "^0.4.6",
     "@operato/popup": "^0.4.6",
-    "@operato/property-editor": "^0.4.6",
+    "@operato/property-editor": "^0.4.9",
     "@operato/styles": "^0.4.6",
     "@operato/utils": "^0.4.6",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.8.2",
+    "@hatiolab/things-scene": "^2.8.6",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -106,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "abeb819898114d2d128a49906df8b289b83e0fa6"
+  "gitHead": "7cb0c0a4081888c3ba474376f2dce1d39d25b130"
 }

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

@@ -25,7 +25,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} />
@@ -38,12 +39,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>
@@ -54,7 +52,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"
@@ -69,7 +67,27 @@ class PropertyEventTap extends LitElement {
               ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}
             </datalist>
           `}
-      ${action == 'data-set' || action == 'value-set'
+      ${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" />
+
+            <datalist id="input-list">
+              ${this._getTargetList(action).map(item => html` <option .value=${item}></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'
         ? 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>
@@ -80,9 +98,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/'
@@ -97,6 +112,8 @@ class PropertyEventTap extends LitElement {
       case 'data-tristate':
       case 'data-set':
       case 'value-set':
+      case 'popup':
+      case 'modal-popup':
         let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []
         ids.unshift('(self)')
         return ids
@@ -124,9 +141,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/modeller/property-sidebar/styles/styles.ts

@@ -352,7 +352,7 @@ class PropertyStyles extends AbstractProperty {
       beginSize,
       end,
       endSize
-    } = this.value
+    } = this.value || {}
 
     return html`
       <fieldset>

package/src/ox-board-viewer.ts

@@ -401,8 +401,10 @@ export class BoardViewer extends LitElement {
     )
   }
 
-  onLinkGoto(targetBoardId: string, value: any, fromComponent: any) {
-    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: any) {