@operato/property-panel 9.0.0-beta.22 → 9.0.0-beta.28

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.22",
+  "version": "9.0.0-beta.28",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -63,10 +63,10 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^9.0.0-beta.21",
+    "@operato/attachment": "^9.0.0-beta.28",
     "@operato/i18n": "^9.0.0-beta.20",
-    "@operato/input": "^9.0.0-beta.21",
-    "@operato/styles": "^9.0.0-beta.21",
+    "@operato/input": "^9.0.0-beta.28",
+    "@operato/styles": "^9.0.0-beta.28",
     "@operato/utils": "^9.0.0-beta.20",
     "lit": "^3.1.2"
   },
@@ -104,5 +104,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "633906ba9b2e209fc2880445fd4ac2b80ab486c5"
+  "gitHead": "ddb7c9c9f18b08fdec009cbffdea291031d05c0e"
 }

package/src/property-panel/data-binding/data-binding-mapper.ts

@@ -219,7 +219,7 @@ export class DataBindingMapper extends LitElement {
           <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
         </ox-buttons-radio>
 
-        <div class="property-full-bleed" rule-editors ?hidden=${mapping.rule == 'value'}>
+        <div class="fullwidth" rule-editors ?hidden=${mapping.rule == 'value'}>
           <data-binding-value-map
             value-key="map"
             .value=${this.rule.map || {}}
@@ -237,7 +237,7 @@ export class DataBindingMapper extends LitElement {
           </data-binding-value-range>
 
           <ox-input-code
-            class="property-full-bleed"
+            class="fullwidth"
             value-key="eval"
             id="eval-editor"
             .value=${this.rule.eval || ''}

package/src/property-panel/effects/property-animation.ts

@@ -44,7 +44,7 @@ export class PropertyAnimation extends LitElement {
 
     return html`
       <div class="property-grid">
-        <label>Animation Type</label>
+        <label>Animation</label>
         <select value-key="type" .value=${value.type}>
           <option value="">None</option>
           <option value="rotation">Rotation</option>

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

@@ -121,7 +121,7 @@ export class PropertyEventHover extends LitElement {
           ? html`
               <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
               <ox-input-data
-                class="custom-editor property-full-bleed"
+                class="custom-editor fullwidth"
                 value-key="value"
                 .value=${value}
                 fullwidth

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

@@ -146,7 +146,7 @@ export class PropertyEventTap extends LitElement {
             ? html`
                 <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
                 <ox-input-data
-                  class="custom-editor property-full-bleed"
+                  class="custom-editor fullwidth"
                   value-key="value"
                   .value=${value}
                   fullwidth

package/src/property-panel/specifics/specific-properties-builder.ts

@@ -7,8 +7,7 @@ import '@operato/app/property-editor.js' /* for registering property editors */
 import { html, LitElement, PropertyValues } from 'lit'
 import { property } from 'lit/decorators.js'
 
-import { Properties } from '@hatiolab/things-scene'
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+import { CSSStyles, OxPropertyEditor, PropertySpec } from '@operato/property-editor'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
@@ -58,8 +57,8 @@ function convertValue(type: string, value: any) {
 }
 
 export class SpecificPropertiesBuilder extends LitElement {
-  @property({ type: Object }) value: any
-  @property({ type: Array }) props: any[] = []
+  @property({ type: Object }) value: { [name: string]: any } = {}
+  @property({ type: Array }) props?: PropertySpec[]
   @property({ type: Object }) propertyEditor: any
 
   render() {
@@ -71,21 +70,24 @@ export class SpecificPropertiesBuilder extends LitElement {
   }
 
   updated(changes: PropertyValues<this>) {
-    changes.has('props') && this._onPropsChanged(this.props)
-    changes.has('value') && this._setValues()
+    changes.has('props') && this.onPropsChanged(this.props || [])
+    changes.has('value') && this.setValues()
   }
 
-  _onPropsChanged(props: any[]) {
+  private onPropsChanged(props: PropertySpec[]) {
+    const specs = this.props || []
+
     this.textContent = ''
-    ;(props || []).forEach((spec: PropertySpec) => {
-      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled } = spec
+    specs.forEach((spec: PropertySpec) => {
+      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } =
+        spec
 
-      let elementType = OxPropertyEditor.getEditor(type)
+      const elementType = OxPropertyEditor.getEditor(type)
       if (!elementType) {
         console.warn('Property Editor not defined', type)
         return
       }
-      let element = document.createElement(elementType) as OxPropertyEditor
+      const element = document.createElement(elementType) as OxPropertyEditor
 
       element.label = label
       element.type = type
@@ -103,13 +105,19 @@ export class SpecificPropertiesBuilder extends LitElement {
       element.setAttribute('property-editor', 'true')
       element.disabled = disabled
 
+      if (styles) {
+        Object.keys(styles).forEach((key: string) => {
+          element.style[key as keyof CSSStyles] = styles[key as keyof CSSStyles]
+        })
+      }
+
       this.appendChild(element)
     })
   }
 
-  _setValues() {
+  private setValues() {
     this.value &&
-      Array.from(this.querySelectorAll('[name]')).forEach((prop: Properties) => {
+      Array.from(this.querySelectorAll('[name]')).forEach((prop: { [name: string]: any }) => {
         let name = prop.getAttribute('name')
         if (!name) {
           return
@@ -123,7 +131,7 @@ export class SpecificPropertiesBuilder extends LitElement {
       })
   }
 
-  onValueChanged(e: Event) {
+  private onValueChanged(e: Event) {
     e.stopPropagation()
     var target = e.target as Element
 
@@ -137,7 +145,7 @@ export class SpecificPropertiesBuilder extends LitElement {
     this.value[name] = prop.value
 
     prop.observe(prop.value)
-    this._setValues()
+    this.setValues()
 
     this.dispatchEvent(
       new CustomEvent('property-change', {

package/src/property-panel/styles/styles.ts

@@ -119,19 +119,19 @@ export class PropertyStyles extends AbstractProperty {
 
           <ox-font-selector class="custom-editor" value-key="fontFamily" .value=${fontFamily}></ox-font-selector>
 
-          <label class="property-onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
-          <input type="number" value-key="fontSize" .value=${fontSize} class="property-onethird-input" />
+          <label class="onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
+          <input type="number" value-key="fontSize" .value=${fontSize} class="onethird-editor" />
 
-          <label class="property-onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
-          <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-onethird-input" />
+          <label class="onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
+          <input type="number" value-key="lineHeight" .value=${lineHeight} class="onethird-editor" />
 
-          <label class="property-onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
-          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-onethird-input" />
+          <label class="onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
+          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="onethird-editor" />
 
-          <label class="property-twothird-label icon-only-label"><md-icon>format_color_text</md-icon></label>
-          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-twothird-input"> </ox-input-color>
+          <label class="twothird-label icon-only-label"><md-icon>format_color_text</md-icon></label>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="twothird-editor"> </ox-input-color>
 
-          <div class="property-onethird-full btn-group" @click=${this.onButtonGroupClick}>
+          <div class="onethird-full btn-group" @click=${this.onButtonGroupClick}>
             <md-icon value-key="bold" ?active=${bold}>format_bold</md-icon>
             <md-icon value-key="italic" ?active=${italic}>format_italic</md-icon>
           </div>
@@ -154,11 +154,11 @@ export class PropertyStyles extends AbstractProperty {
         </legend>
 
         <div class="property-grid">
-          <label class="property-half-label icon-only-label"><md-icon>line_weight</md-icon></label>
-          <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
+          <label class="half-label icon-only-label"><md-icon>line_weight</md-icon></label>
+          <input type="number" value-key="lineWidth" .value=${lineWidth} class="half-editor" />
 
-          <label class="property-half-label icon-only-label"><md-icon>border_color</md-icon></label>
-          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
+          <label class="half-label icon-only-label"><md-icon>border_color</md-icon></label>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="half-editor"> </ox-input-color>
 
           <label>
             <ox-i18n msgid="label.line-type">line type</ox-i18n>