@operato/board 1.4.39 → 1.4.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.39",
+  "version": "1.4.41",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "e2c0291a2c1050d911df43414b4eefc7cd939157"
+  "gitHead": "f08abc45b71c195fb3b8e4db2d001acc8f7fe40a"
 }

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

@@ -5,8 +5,9 @@
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 
@@ -14,7 +15,50 @@ import { EffectsSharedStyle } from './effects-shared-style.js'
 import { convert } from './value-converter'
 
 export class PropertyEventHover extends LitElement {
-  static styles = [EffectsSharedStyle]
+  static styles = [
+    EffectsSharedStyle,
+    css`
+      datalist option.cursor-auto {
+        cursor: auto;
+      }
+
+      datalist option.cursor-pointer {
+        cursor: pointer;
+      }
+
+      datalist option.cursor-default {
+        cursor: default;
+      }
+
+      datalist option.cursor-move {
+        cursor: move;
+      }
+
+      datalist option.cursor-text {
+        cursor: text;
+      }
+
+      datalist option.cursor-wait {
+        cursor: wait;
+      }
+
+      datalist option.cursor-help {
+        cursor: help;
+      }
+
+      datalist option.cursor-crosshair {
+        cursor: crosshair;
+      }
+
+      datalist option.cursor-not-allowed {
+        cursor: not-allowed;
+      }
+
+      datalist option.cursor-grab {
+        cursor: grab;
+      }
+    `
+  ]
 
   @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
@@ -36,11 +80,12 @@ export class PropertyEventHover extends LitElement {
       <select id="tap-select" value-key="action" .value=${action || ''}>
         <option value=""></option>
         <option value="popup">popup target board</option>
-        <option value="infoWindow">open infowindow</option>
+        <option value="info-window">open infowindow</option>
         <option value="data-toggle">toggle(true/false) target component data</option>
         <option value="data-tristate">tristate(0/1/2) target component data</option>
         <option value="data-set">set value to target component data</option>
         <option value="value-set">set value to target component value</option>
+        <option value="mouse-cursor">change mouse cursor to target style</option>
       </select>
 
       <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
@@ -59,7 +104,8 @@ export class PropertyEventHover extends LitElement {
 
             <datalist id="target-list">
               ${this._getTargetList(action).map(
-                ({ value, description }) => html` <option .value=${value}>${description}</option> `
+                ({ value, description, class: clazz }) =>
+                  html` <option .value=${value} class=${ifDefined(clazz)}>${description}</option> `
               )}
             </datalist>
           `}
@@ -90,7 +136,7 @@ export class PropertyEventHover extends LitElement {
     }
   }
 
-  _getTargetList(action: string): { value: string; description: string }[] {
+  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {
     switch (action) {
       case 'data-toggle':
       case 'data-tristate':
@@ -105,7 +151,8 @@ export class PropertyEventHover extends LitElement {
           []
         ids.unshift({ value: '(self)', description: 'self component' })
         return ids
-      case 'infoWindow':
+
+      case 'info-window':
         return (
           (this.scene &&
             this.scene.ids
@@ -118,6 +165,14 @@ export class PropertyEventHover extends LitElement {
               })) ||
           []
         )
+
+      case 'mouse-cursor':
+        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(
+          style => {
+            return { value: style, class: `cursor-${style}` }
+          }
+        )
+
       default:
         return []
     }