@operato/property-editor 1.0.0-beta.9 → 1.0.0

package/src/ox-property-editor-options.ts

@@ -1,12 +1,16 @@
 import '@operato/input/ox-input-options.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-options')
 export class OxPropertyEditorOptions extends OxPropertyEditor {
-  editorTemplate() {
-    return html` <ox-input-options id="editor" .value=${this.value || []}></ox-input-options> `
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { fullwidth = false } = spec.editor || {}
+
+    return html` <ox-input-options id="editor" .value=${value || []} ?fullwidth=${fullwidth}></ox-input-options> `
   }
 }

package/src/ox-property-editor-partition-keys.ts

@@ -0,0 +1,18 @@
+import '@operato/input/ox-input-partition-keys.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
+
+@customElement('ox-property-editor-partition-keys')
+export class OxPropertyEditorPartitionKeys extends OxPropertyEditor {
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { fullwidth = true } = spec.editor || {}
+
+    return html`
+      <ox-input-partition-keys id="editor" .value=${value} ?fullwidth=${fullwidth}></ox-input-partition-keys>
+    `
+  }
+}

package/src/ox-property-editor-password.ts

@@ -1,10 +1,12 @@
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-password')
 export class OxPropertyEditorPassword extends OxPropertyEditor {
-  editorTemplate() {
-    return html` <input type="password" id="editor" .value=${this.value} placeholder=${this.placeholder || ''} /> `
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html` <input type="password" id="editor" .value=${value} placeholder=${spec.placeholder || ''} /> `
   }
 }

package/src/ox-property-editor-range.ts

@@ -1,16 +1,26 @@
 import '@operato/input/ox-input-range.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-range')
 export class OxPropertyEditorRange extends OxPropertyEditor {
-  editorTemplate() {
-    const { step, min, max } = this.property || {}
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { step, min, max } = spec.property || {}
+    const { fullwidth = false } = spec.editor || {}
 
     return html`
-      <ox-input-range id="editor" .value=${this.value} .step=${step} .min=${min} .max=${max}></ox-input-range>
+      <ox-input-range
+        id="editor"
+        .value=${value}
+        .step=${step}
+        .min=${min}
+        .max=${max}
+        ?fullwidth=${fullwidth}
+      ></ox-input-range>
     `
   }
 }

package/src/ox-property-editor-scene-component-id.ts

@@ -1,18 +1,16 @@
 import '@operato/input/ox-input-scene-component-id.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-scene-component-id')
 export class OxPropertyEditorSceneComponentId extends OxPropertyEditor {
-  editorTemplate() {
+  editorTemplate(value: any, spec: PropertySpec) {
     return html`
-      <ox-input-scene-component-id
-        id="editor"
-        .value=${this.value}
-        .property=${this.property}
-      ></ox-input-scene-component-id>
+      <ox-input-scene-component-id id="editor" .value=${value} .property=${spec.property}></ox-input-scene-component-id>
     `
   }
 }

package/src/ox-property-editor-select.ts

@@ -1,10 +1,11 @@
 import '@operato/input/ox-select.js'
 import '@operato/popup/ox-popup-list.js'
 
-import { css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
 
 import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
+import { PropertySpec } from './types.js'
 
 type Option = { display: string; value: any } | string
 
@@ -22,6 +23,8 @@ export class OxPropertyEditorSelect extends OxPropertyEditor {
     `
   ]
 
+  @query('ox-select') oxSelect!: LitElement
+
   async connectedCallback() {
     super.connectedCallback()
 
@@ -31,21 +34,24 @@ export class OxPropertyEditorSelect extends OxPropertyEditor {
         ...this.property,
         options: await options.apply(this)
       }
+      await this.updateComplete
+      this.oxSelect.requestUpdate()
     }
   }
 
-  editorTemplate() {
-    var options = this.property?.options as Option[]
+  editorTemplate(value: any, spec: PropertySpec) {
+    var options = spec.property?.options as Option[]
     if (!(options instanceof Array)) {
       options = []
     }
+    const { fullwidth = false } = spec.editor || {}
 
     return html`
-      <ox-select id="editor" .value=${this.value} placeholder=${this.placeholder}>
+      <ox-select id="editor" .value=${value} placeholder=${spec.placeholder} ?fullwidth=${fullwidth}>
         <ox-popup-list with-search>
           ${options.map(
             item => html`
-              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(this.value, item)}>
+              <div option value=${this._getOptionValue(item)} ?selected=${this._isSelected(value, item)}>
                 ${this._getOptionDisplay(item) || html`&nbsp;`}
               </div>
             `

package/src/ox-property-editor-solid-colorstops.ts

@@ -1,20 +1,24 @@
 import '@operato/input/ox-input-color-stops.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-solid-colorstops')
 export class OxPropertyEditorSolidColorStops extends OxPropertyEditor {
-  editorTemplate() {
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { fullwidth = true } = spec.editor || {}
+
     return html`
       <ox-input-color-stops
         id="editor"
         type="solid"
-        .value=${this.value}
-        .min=${this.property && this.property.min}
-        .max=${this.property && this.property.max}
-        fullwidth
+        .value=${value}
+        .min=${spec.property && spec.property.min}
+        .max=${spec.property && spec.property.max}
+        ?fullwidth=${fullwidth}
       >
       </ox-input-color-stops>
     `

package/src/ox-property-editor-string.ts

@@ -1,10 +1,12 @@
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-string')
 export class OxPropertyEditorString extends OxPropertyEditor {
-  editorTemplate() {
-    return html` <input type="text" id="editor" .value=${this.value || ''} placeholder=${this.placeholder || ''} /> `
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html` <input type="text" id="editor" .value=${value || ''} placeholder=${spec.placeholder || ''} /> `
   }
 }

package/src/ox-property-editor-table.ts

@@ -1,12 +1,16 @@
 import '@operato/input/ox-input-table.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-table')
 export class OxPropertyEditorString extends OxPropertyEditor {
-  editorTemplate() {
-    return html` <ox-input-table id="editor" .property=${this.property} fullwidth></ox-input-table> `
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { fullwidth = true } = spec.editor || {}
+
+    return html` <ox-input-table id="editor" .property=${spec.property} ?fullwidth=${fullwidth}></ox-input-table> `
   }
 }

package/src/ox-property-editor-textarea.ts

@@ -1,20 +1,24 @@
 import '@operato/input/ox-input-code.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-textarea')
 export class OxPropertyEditorTextArea extends OxPropertyEditor {
-  editorTemplate() {
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { fullwidth = true } = spec.editor || {}
+
     return html`
       <ox-input-code
         id="editor"
-        .value=${this.value}
-        mode=${this.property?.mode || ''}
-        tab-size=${this.property?.tabSize || ''}
-        tab-as-space=${this.property?.tabAsSpace || 'false'}
-        fullwidth
+        .value=${value}
+        mode=${spec.property?.mode || ''}
+        tab-size=${spec.property?.tabSize || ''}
+        tab-as-space=${spec.property?.tabAsSpace || 'false'}
+        ?fullwidth=${fullwidth}
       >
       </ox-input-code>
     `

package/src/ox-property-editor-value-map.ts

@@ -1,18 +1,26 @@
 import '@operato/input/ox-input-value-map.js'
 
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-value-map')
 export class OxPropertyEditorValueMap extends OxPropertyEditor {
-  editorTemplate() {
-    const { value, property } = this
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { property } = spec
     const valuetype = property?.valuetype || 'string'
     /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
+    const { fullwidth = true } = spec.editor || {}
 
     return html`
-      <ox-input-value-map id="editor" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-map>
+      <ox-input-value-map
+        id="editor"
+        .valuetype=${valuetype}
+        .value=${value}
+        ?fullwidth=${fullwidth}
+      ></ox-input-value-map>
     `
   }
 }

package/src/ox-property-editor-value-ranges.ts

@@ -4,16 +4,23 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-value-ranges')
 export class OxPropertyEditorValueRanges extends OxPropertyEditor {
-  editorTemplate() {
-    const { value, property } = this
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { property } = spec
     const valuetype = property?.valuetype || 'string'
     /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
+    const { fullwidth = true } = spec.editor || {}
 
     return html`
-      <ox-input-value-ranges id="editor" .valuetype=${valuetype} .value=${value} fullwidth></ox-input-value-ranges>
+      <ox-input-value-ranges
+        id="editor"
+        .valuetype=${valuetype}
+        .value=${value}
+        ?fullwidth=${fullwidth}
+      ></ox-input-value-ranges>
     `
   }
 }

package/src/ox-property-editor-work-shift.ts

@@ -4,12 +4,14 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 import { OxPropertyEditor } from './ox-property-editor.js'
+import { PropertySpec } from './types.js'
 
 @customElement('ox-property-editor-work-shift')
-export class OxPropertyEditorValueRanges extends OxPropertyEditor {
-  editorTemplate() {
-    const { value } = this
+export class OxPropertyEditorWorkShift extends OxPropertyEditor {
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { editor } = spec
+    const { fullwidth = true } = editor || {}
 
-    return html` <ox-input-work-shift id="editor" .value=${value} fullwidth></ox-input-work-shift> `
+    return html` <ox-input-work-shift id="editor" .value=${value} ?fullwidth=${fullwidth}></ox-input-work-shift> `
   }
 }

package/src/ox-property-editor.ts

@@ -1,9 +1,11 @@
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import deepClone from 'lodash-es/cloneDeep'
 
+import { EditorProperty, PropertySpec } from './types'
+
 export class OxPropertyEditor extends LitElement {
   static registry: { [type: string]: string } = {}
 
@@ -25,6 +27,7 @@ export class OxPropertyEditor extends LitElement {
         display: grid;
         grid-template-columns: repeat(10, 1fr);
         grid-gap: 5px;
+        grid-auto-rows: minmax(24px, auto);
 
         align-items: center;
 
@@ -60,10 +63,9 @@ export class OxPropertyEditor extends LitElement {
         text-align: left;
       }
 
-      :host > select,
-      :host > ox-select,
-      :host > input[type='text'],
-      :host > input[type='number'] {
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
@@ -88,15 +90,38 @@ export class OxPropertyEditor extends LitElement {
         justify-self: end;
         align-self: center;
       }
+
+      ox-input-code,
+      ox-input-data {
+        height: 300px;
+      }
+
+      :host > div {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+
+      div[data-index] {
+        display: flex;
+        min-height: 24px;
+      }
+
+      div[data-index] > * {
+        flex: 1;
+      }
     `
   ]
 
   @property({ type: Object }) value: any
   @property({ type: String }) type!: string
+  @property({ type: String, attribute: true, reflect: true }) name!: string
   @property({ type: String }) label!: string
   @property({ type: String }) placeholder?: string
-  @property({ type: Object }) property: any
+  @property({ type: Object }) property?: any
+  @property({ type: Object }) editor?: EditorProperty
   @property({ type: Object }) host: any
+  @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]
   @property({ type: Object }) observe?: (value: any) => void
 
   connectedCallback() {
@@ -105,13 +130,26 @@ export class OxPropertyEditor extends LitElement {
     this.renderRoot.addEventListener('change', this._valueChanged.bind(this))
   }
 
-  editorTemplate(props: { [key: string]: any }) {
+  editorTemplate(value: any, spec: PropertySpec): TemplateResult<1> {
     return html``
   }
 
   render() {
+    const { value, quantifier } = this
+    const [min = 1, max = 1] = quantifier || [1, 1]
+
     return html`
-      ${this.editorTemplate(this)}
+      ${max <= 1
+        ? this.editorTemplate(value, this)
+        : html`
+            <div ?fullwidth=${this.editor?.fullwidth}>
+              ${new Array(max)
+                .fill('')
+                .map(
+                  (_, idx) => html` <div editor data-index=${idx}>${this.editorTemplate(value?.[idx], this)}</div> `
+                )}
+            </div>
+          `}
       ${this.label
         ? html`
             <label for="editor">
@@ -154,8 +192,19 @@ export class OxPropertyEditor extends LitElement {
 
   _valueChanged(e: Event) {
     e.stopPropagation()
-
-    this.value = this.makeup((e.target as any)[this.valueProperty])
+    const editor = e.target as HTMLInputElement
+
+    const [min = 1, max = 1] = this.quantifier || []
+    const value = this.makeup((editor as any)[this.valueProperty])
+
+    if (max > 1) {
+      const index = Number(editor.closest('[data-index]')?.getAttribute('data-index'))
+      var array: any[] = this.value instanceof Array ? [...this.value] : []
+      array[index] = value
+      this.value = array
+    } else {
+      this.value = value
+    }
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
 

package/src/types.ts

@@ -1,8 +1,14 @@
+export type EditorProperty = {
+  fullwidth?: boolean
+}
+
 export type PropertySpec = {
   type: string
   label: string
   name: string
   placeholder?: string
   property?: any
+  editor?: EditorProperty
+  quantifier?: [min: number, max: number]
   observe?: (value: any) => void
 }