@operato/property-panel 9.0.0-beta.41 → 9.0.0-beta.43

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/property-panel",
   "description": "Webcomponent property-panel following open-wc recommendations",
   "author": "heartyoh",
-  "version": "9.0.0-beta.41",
+  "version": "9.0.0-beta.43",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -104,5 +104,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c26a973cda0341dd57d55f320bf5d1c1ef002124"
+  "gitHead": "1ec5808ee69aea5f9fd84b47a9e037f620e2112c"
 }

package/src/property-panel/effects/property-event-hover-emphasize.ts

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
+
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { Properties } from '@hatiolab/things-scene'
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { convert } from './value-converter.js'
+
+/**
+ * 컴포넌트의 강조 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-event-hover-emphasize
+ *    @change="${e => { this.emphasize = e.target.value }}"
+ *    value="${this.emphasize}"
+ *  ></property-event-hover-emphasize>
+ */
+
+export class PropertyEventHoverEmphasize extends LitElement {
+  static styles = [
+    PropertyGridStyles,
+    css`
+      :host {
+        display: flex;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+  }
+
+  render() {
+    const { distance, lineWidth, animation, color, fillStyle } = this.value || {}
+
+    return html`
+      <div class="property-grid">
+        <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
+        <ox-input-color value-key="fillStyle" .value=${fillStyle}> </ox-input-color>
+
+        <label class="icon-only-label color"><md-icon>border_color</md-icon></label>
+        <ox-input-color value-key="color" .value=${color}> </ox-input-color>
+
+        <label> <ox-i18n msgid="label.emphasize-distance">emphasize distance</ox-i18n> </label>
+        <input type="number" value-key="distance" .value=${distance} />
+
+        <label> <ox-i18n msgid="label.emphasize-line-width">line width</ox-i18n> </label>
+        <input type="number" value-key="lineWidth" .value=${lineWidth} />
+      </div>
+    `
+  }
+
+  onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    this.value = {
+      ...this.value,
+      [key]: convert(element)
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/property-panel/effects/property-event-hover.ts

@@ -5,21 +5,27 @@
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
 
 import { convert } from './value-converter.js'
+import { PropertyEventHoverEmphasize } from './property-event-hover-emphasize.js'
 
 const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']
 
-export class PropertyEventHover extends LitElement {
+export class PropertyEventHover extends ScopedElementsMixin(LitElement) {
   static styles = [
     PropertyGridStyles,
     css`
+      property-event-hover-emphasize {
+        padding-bottom: var(--spacing-large);
+      }
+
       datalist option.cursor-auto {
         cursor: auto;
       }
@@ -65,6 +71,14 @@ export class PropertyEventHover extends LitElement {
   @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
+  private useEmphasize: boolean = false
+
+  static get scopedElements() {
+    return {
+      'property-event-hover-emphasize': PropertyEventHoverEmphasize
+    }
+  }
+
   firstUpdated() {
     this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
   }
@@ -72,14 +86,36 @@ export class PropertyEventHover extends LitElement {
   render() {
     var { action, value = '', target = '', emphasize, restore } = this.value || {}
 
+    if (emphasize === true) {
+      emphasize = {
+        distance: 0,
+        animation: false
+      }
+    } else if (emphasize === false) {
+      emphasize = null
+    }
+
+    this.useEmphasize = !!emphasize
+
     return html`
       <div class="property-grid">
-        <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
-        <label for="checkbox-emphasize" class="checkbox-label">
+        <input id="checkbox-use-emphasize" type="checkbox" value-key="use-emphasize" .checked=${!!this.useEmphasize} />
+        <label for="checkbox-use-emphasize" class="checkbox-label">
           <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
         </label>
 
-        <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+        ${!!this.useEmphasize
+          ? html`
+              <property-event-hover-emphasize
+                id="emphasize"
+                class="fullwidth"
+                value-key="emphasize"
+                .value=${emphasize}
+              ></property-event-hover-emphasize>
+            `
+          : nothing}
+
+        <label> <ox-i18n msgid="label.hover-action">hover action</ox-i18n> </label>
         <select id="tap-select" value-key="action" .value=${action || ''}>
           <option value=""></option>
           <option value="popup">popup target board</option>
@@ -131,7 +167,7 @@ export class PropertyEventHover extends LitElement {
 
         <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
         <label for="checkbox-restore" class="checkbox-label">
-          <ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
+          <ox-i18n msgid="label.reset-on-leave">restore on leave</ox-i18n>
         </label>
       </div>
     `
@@ -202,9 +238,16 @@ export class PropertyEventHover extends LitElement {
       return
     }
 
-    this.value = {
-      ...this.value,
-      [key]: convert(element)
+    if (key == 'use-emphasize') {
+      this.value = {
+        ...this.value,
+        emphasize: (element as HTMLInputElement).checked ? {} : null
+      }
+    } else {
+      this.value = {
+        ...this.value,
+        [key]: convert(element)
+      }
     }
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))

package/src/property-panel/effects/property-event-tap.ts

@@ -47,7 +47,7 @@ export class PropertyEventTap extends LitElement {
         <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
         <label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
 
-        <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.tap-action">tap action</ox-i18n> </label>
         <select
           id="tap-select"
           value-key="action"

package/translations/en.json

@@ -243,7 +243,10 @@
   "label.duration": "Duration",
   "label.email-id": "email ID",
   "label.email_address": "Email Address",
-  "label.emphasize": "Emphasize",
+  "label.emphasize": "emphasize",
+  "label.emphasize-animation": "emphasize animation",
+  "label.emphasize-distance": "border gap",
+  "label.emphasize-line-width": "border width",
   "label.end-alpha": "End Alpha",
   "label.end-angle": "end angle",
   "label.end-size": "end size",
@@ -281,6 +284,7 @@
   "label.hide-rack-frame": "hide rack frame",
   "label.horizontal": "horizontal",
   "label.hour-width": "Hour Width",
+  "label.hover-action": "hover action",
   "label.hover-event": "Hover Event",
   "label.href": "href",
   "label.id": "ID",
@@ -429,7 +433,7 @@
   "label.requester": "requester",
   "label.reset-password": "Reset Password",
   "label.reset_password": "Reset Password",
-  "label.restore-on-leave": "restore on leave",
+  "label.reset-on-leave": "reset on leave",
   "label.retain": "retain",
   "label.retention": "retention",
   "label.reverse": "reverse",
@@ -518,6 +522,7 @@
   "label.tab-active-index": "tab active index",
   "label.tab-reference": "tab reference",
   "label.tag": "tag",
+  "label.tap-action": "tap action",
   "label.tap-event": "Tap Event",
   "label.target": "target",
   "label.target-axis": "Target Axis",

package/translations/ja.json

@@ -248,6 +248,9 @@
   "label.email-id": "メールID",
   "label.email_address": "メール",
   "label.emphasize": "強調",
+  "label.emphasize-animation": "強調アニメーション",
+  "label.emphasize-distance": "強調距離",
+  "label.emphasize-line-width": "強調線幅",
   "label.end-alpha": "終了透明度",
   "label.end-angle": "端の角度",
   "label.end-size": "端のサイズ",
@@ -285,6 +288,7 @@
   "label.hide-rack-frame": "ラック フレーム非表示",
   "label.horizontal": "横",
   "label.hour-width": "時針の厚さ",
+  "label.hover-action": "ホバー アクション",
   "label.hover-event": "ホバー イベント",
   "label.href": "href",
   "label.id": "ID",
@@ -432,7 +436,7 @@
   "label.requester": "申請者",
   "label.reset-password": "暗号リセット",
   "label.reset_password": "パースワード リセット",
-  "label.restore-on-leave": "出る時元の状態に復旧",
+  "label.reset-on-leave": "出る時元の状態に復旧",
   "label.retain": "維持",
   "label.retention": "維持期間",
   "label.reverse": "逆方向",
@@ -521,6 +525,7 @@
   "label.tab-active-index": "アクティブ タブ インデックス",
   "label.tab-reference": "タブ参照",
   "label.tag": "タグ",
+  "label.tap-action": "タップ アクション",
   "label.tap-event": "タブ イベント",
   "label.target": "対象",
   "label.target-axis": "対象軸",

package/translations/ko.json

@@ -248,6 +248,9 @@
   "label.email-id": "이메일 ID",
   "label.email_address": "메일",
   "label.emphasize": "강조",
+  "label.emphasize-animation": "강조 라인 애니메이션",
+  "label.emphasize-distance": "강조 라인 거리",
+  "label.emphasize-line-width": "강조 라인 두께",
   "label.end-alpha": "종료 투명도",
   "label.end-angle": "끝부분 각도",
   "label.end-size": "끝 크기",
@@ -285,6 +288,7 @@
   "label.hide-rack-frame": "랙 기둥 숨기기",
   "label.horizontal": "가로",
   "label.hour-width": "시침 두께",
+  "label.hover-action": "호버 액션",
   "label.hover-event": "호버 이벤트",
   "label.href": "href",
   "label.id": "ID",
@@ -432,7 +436,7 @@
   "label.requester": "신청자",
   "label.reset-password": "암호초기화",
   "label.reset_password": "비밀번호 초기화",
-  "label.restore-on-leave": "나갈 때 원상태로 복구",
+  "label.reset-on-leave": "나갈 때 원상태로 복구",
   "label.retain": "유지",
   "label.retention": "유지기간",
   "label.reverse": "역방향",
@@ -521,6 +525,7 @@
   "label.tab-active-index": "활성탭 인덱스",
   "label.tab-reference": "탭 참조",
   "label.tag": "태그",
+  "label.tap-action": "탭 액션",
   "label.tap-event": "탭 이벤트",
   "label.target": "대상",
   "label.target-axis": "대상 축",

package/translations/ms.json

@@ -236,6 +236,10 @@
   "label.edit_group": "Edit Kumpulan",
   "label.email": "E-mel",
   "label.email_verified": "E-mel Disahkan",
+  "label.emphasize": "Tekankan",
+  "label.emphasize-animation": "Animasi Garis Penekanan",
+  "label.emphasize-distance": "Jarak Garis Penekanan",
+  "label.emphasize-line-width": "Lebar Garis Penekanan",
   "label.enable": "Aktifkan",
   "label.enter-verification-code": "Masukkan Kod Pengesahan",
   "label.environment": "Persekitaran",

package/translations/zh.json

@@ -246,6 +246,9 @@
   "label.email-id": "邮件ID",
   "label.email_address": "邮件地址",
   "label.emphasize": "强调",
+  "label.emphasize-animation": "强调线动画",
+  "label.emphasize-distance": "强调线距离",
+  "label.emphasize-line-width": "强调线宽度",
   "label.end-alpha": "结束阿尔法",
   "label.end-angle": "结束角度",
   "label.end-size": "结束大小",
@@ -283,6 +286,7 @@
   "label.hide-rack-frame": "隐藏货架框",
   "label.horizontal": "水平对齐",
   "label.hour-width": "时针厚度",
+  "label.hover-action": "悬停操作",
   "label.hover-event": "悬停事件",
   "label.href": "href",
   "label.id": "ID",
@@ -431,7 +435,7 @@
   "label.requester": "申请人",
   "label.reset-password": "重置密码",
   "label.reset_password": "重置密码",
-  "label.restore-on-leave": "离开时恢复",
+  "label.reset-on-leave": "离开时恢复",
   "label.retain": "保持",
   "label.retention": "保存期间",
   "label.reverse": "反转",
@@ -520,6 +524,7 @@
   "label.tab-active-index": "标签激活指数",
   "label.tab-reference": "标签参考",
   "label.tag": "标签",
+  "label.tap-action": "点击操作",
   "label.tap-event": "点击事件",
   "label.target": "目标",
   "label.target-axis": "对象轴",