@operato/property-editor 7.1.31 → 7.1.32

package/src/ox-property-editor-unit-number.ts

@@ -1,33 +0,0 @@
-import '@operato/input/ox-input-unit-number.js'
-
-import { html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor } from './ox-property-editor.js'
-import { PropertySpec } from './types.js'
-
-@customElement('ox-property-editor-unit-number')
-export class OxPropertyEditorNumberUnit extends OxPropertyEditor {
-  override makeup(v: string) {
-    return Number(v)
-  }
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    const { step, min, max, unit, userUnit } = spec.property || {}
-
-    return html`
-      <ox-input-unit-number
-        id="editor"
-        type="number"
-        placeholder=${spec.placeholder || ''}
-        .stdUnit=${unit}
-        .userUnit=${userUnit || unit}
-        .value=${value}
-        .step=${step}
-        .min=${min}
-        .max=${max}
-        ?disabled=${this.disabled}
-      ></ox-input-unit-number>
-    `
-  }
-}

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

@@ -1,27 +0,0 @@
-import '@operato/input/ox-input-value-map.js'
-
-import { html, TemplateResult } 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(value: any, spec: PropertySpec): TemplateResult {
-    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=${fullwidth}
-        ?disabled=${this.disabled}
-      ></ox-input-value-map>
-    `
-  }
-}

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

@@ -1,27 +0,0 @@
-import '@operato/input/ox-input-value-ranges.js'
-
-import { html, TemplateResult } 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(value: any, spec: PropertySpec): TemplateResult {
-    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=${fullwidth}
-        ?disabled=${this.disabled}
-      ></ox-input-value-ranges>
-    `
-  }
-}

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

@@ -1,24 +0,0 @@
-import '@operato/input/ox-input-work-shift.js'
-
-import { html, TemplateResult } 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 OxPropertyEditorWorkShift extends OxPropertyEditor {
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    const { editor } = spec
-    const { fullwidth = true } = editor || {}
-
-    return html`
-      <ox-input-work-shift
-        id="editor"
-        .value=${value}
-        ?fullwidth=${fullwidth}
-        ?disabled=${this.disabled}
-      ></ox-input-work-shift>
-    `
-  }
-}

package/src/ox-property-editor.ts

@@ -1,243 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-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 } = {}
-
-  public static register(types: { [type: string]: string }) {
-    Object.keys(types).forEach(type => {
-      OxPropertyEditor.registry[type] = types[type]
-    })
-  }
-
-  public static getEditor(type: string): string {
-    return OxPropertyEditor.registry[type]
-  }
-
-  static styles = [
-    css`
-      :host {
-        margin: 5px;
-
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-
-        align-items: center;
-
-        color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));
-      }
-
-      :host > * {
-        box-sizing: border-box;
-
-        grid-column: span 7;
-        order: 2;
-
-        align-self: stretch;
-      }
-
-      :host > label {
-        grid-column: span 3;
-        order: 1;
-
-        text-align: right;
-
-        font: var(--label-font);
-        text-transform: capitalize;
-
-        align-self: center;
-      }
-
-      :host > input[type='checkbox'] ~ label,
-      :host > ox-checkbox ~ label {
-        grid-column: span 6;
-        order: 2;
-
-        text-align: left;
-      }
-
-      select,
-      ox-select,
-      input:not([type='checkbox']) {
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-      }
-
-      :host > legend {
-        grid-column: 1 / -1;
-
-        display: inline-block;
-
-        text-align: left;
-        text-transform: capitalize;
-      }
-
-      :host > [fullwidth] {
-        grid-column: 1 / -1;
-      }
-
-      :host > input[type='checkbox'],
-      :host > ox-checkbox {
-        grid-column: span 4;
-        order: 1;
-
-        justify-self: end;
-        align-self: center;
-      }
-
-      ox-input-code,
-      ox-input-data,
-      .multiline-input {
-        min-height: 300px;
-        border-radius: var(--spacing-small);
-      }
-
-      :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 }) editor?: EditorProperty
-  @property({ type: Object }) host: any
-  @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]
-  @property({ type: Object }) observeHandler?: (value: any) => void
-  @property({ type: Object }) defaultValue?: any
-  @property({ type: Object }) context?: any
-  @property({ type: Boolean }) disabled?: boolean
-
-  private observing: boolean = false
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))
-  }
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html``
-  }
-
-  getDefaultValue() {
-    return typeof this.defaultValue == 'function' ? this.defaultValue.call(this) : this.defaultValue
-  }
-
-  render() {
-    const { value = this.getDefaultValue(), quantifier } = this
-    const [min = 1, max = 1] = quantifier || [1, 1]
-
-    return html`
-      ${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"
-              @click=${() => {
-                const forElement = this.renderRoot.querySelector('#editor')!
-                const isCustomElement = forElement?.nodeName.includes('-')
-
-                if (isCustomElement) {
-                  ;(forElement as HTMLElement).click()
-                }
-              }}
-            >
-              <ox-i18n msgid=${this._computeLabelId(this.label)}>${this.label}</ox-i18n>
-            </label>
-          `
-        : html``}
-    `
-  }
-
-  @state() __by_me = false
-
-  shouldUpdate(changedProperties: any) {
-    if (this.__by_me) {
-      return false
-    }
-
-    if (changedProperties.has('value')) {
-      this.__by_me = true
-      this.value = this.makeup(this.value)
-      this.__by_me = false
-    }
-
-    return true
-  }
-
-  get valueProperty() {
-    return 'value'
-  }
-
-  makeup(v: any) {
-    return deepClone(v)
-  }
-
-  _computeLabelId(label: string) {
-    if (label.indexOf('label.') >= 0) return label
-
-    return 'label.' + label
-  }
-
-  _valueChanged(e: Event) {
-    e.stopPropagation()
-    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 }))
-
-    this.observe(this.value)
-  }
-
-  observe(value: any) {
-    if (this.observeHandler && !this.observing) {
-      this.observing = true
-      this.observeHandler.call(this, value)
-      this.observing = false
-    }
-  }
-}

package/src/types.ts

@@ -1,23 +0,0 @@
-export type EditorProperty = {
-  fullwidth?: boolean
-}
-
-type WritableKeysOf<T> = {
-  [P in keyof T]: T[P] extends Readonly<T[P]> ? never : P
-}[keyof T]
-
-export type CSSStyles = Pick<CSSStyleDeclaration, WritableKeysOf<CSSStyleDeclaration>>
-
-export type PropertySpec = {
-  type: string
-  label: string
-  name: string
-  placeholder?: string
-  property?: any
-  editor?: EditorProperty
-  quantifier?: [min: number, max: number]
-  observe?: (value: any) => void
-  defaultValue?: any
-  disabled?: boolean
-  styles?: CSSStyles
-}

package/stories/ox-properties-dynamic-view.stories.ts

@@ -1,311 +0,0 @@
-import { TemplateResult, html } from 'lit'
-
-import '../src/ox-property-editor-3axis.js'
-import '../src/ox-property-editor-3dish.js'
-import '../src/ox-property-editor-angle.js'
-import '../src/ox-property-editor-checkbox.js'
-import '../src/ox-property-editor-color.js'
-import '../src/ox-property-editor-date.js'
-import '../src/ox-property-editor-datetime.js'
-import '../src/ox-property-editor-legend.js'
-import '../src/ox-property-editor-number.js'
-import '../src/ox-property-editor-unit-number.js'
-import '../src/ox-property-editor-password.js'
-import '../src/ox-property-editor-range.js'
-import '../src/ox-property-editor-select.js'
-import '../src/ox-property-editor-string.js'
-import '../src/ox-property-editor-image.js'
-import '../src/ox-property-editor-file.js'
-import '../src/ox-property-editor-multiple-colors.js'
-import '../src/ox-property-editor-crontab.js'
-import '../src/ox-property-editor-work-shift.js'
-import '../src/ox-property-editor-partition-keys.js'
-import '../src/ox-property-editor-key-values.js'
-import '../src/ox-property-editor-textarea.js'
-import '../src/ox-property-editor-options.js'
-import '../src/ox-property-editor-hashtags.js'
-import '../src/ox-property-editor-signature.js'
-
-import '../src/ox-properties-dynamic-view.js'
-
-import { OxPropertyEditor } from '../src/ox-property-editor.js'
-import { PropertySpec } from '../src/types.js'
-
-export default {
-  title: 'Properties Dynamic View',
-  component: 'ox-properties-dynamic-view',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-OxPropertyEditor.register({
-  legend: 'ox-property-editor-legend',
-  number: 'ox-property-editor-number',
-  'unit-number': 'ox-property-editor-unit-number',
-  slider: 'ox-property-editor-range',
-  password: 'ox-property-editor-password',
-  angle: 'ox-property-editor-angle',
-  string: 'ox-property-editor-string',
-  textarea: 'ox-property-editor-textarea',
-  javascript: 'ox-property-editor-textarea',
-  checkbox: 'ox-property-editor-checkbox',
-  boolean: 'ox-property-editor-checkbox',
-  select: 'ox-property-editor-select',
-  date: 'ox-property-editor-date',
-  datetime: 'ox-property-editor-datetime',
-  options: 'ox-property-editor-options',
-  data: 'ox-property-editor-data',
-  file: 'ox-property-editor-file',
-  image: 'ox-property-editor-image',
-  signature: 'ox-property-editor-signature',
-  'range-input': 'ox-property-editor-range',
-  'attachment-selector': 'ox-property-editor-attachment-selector',
-  'gltf-selector': 'ox-property-editor-attachment-selector',
-  'image-selector': 'ox-property-editor-image-selector',
-  color: 'ox-property-editor-color',
-  'solid-color-stops': 'ox-property-editor-solid-colorstops',
-  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
-  'multiple-color': 'ox-property-editor-multiple-colors',
-  map: 'ox-property-editor-value-map',
-  range: 'ox-property-editor-value-ranges',
-  graphql: 'ox-property-editor-graphql',
-  'editor-table': 'ox-property-editor-table',
-  'id-input': 'ox-property-editor-scene-component-id',
-  'font-selector': 'ox-property-editor-font-selector',
-  crontab: 'ox-property-editor-crontab',
-  shift: 'ox-property-editor-work-shift',
-  'partition-keys': 'ox-property-editor-partition-keys',
-  'key-values': 'ox-property-editor-key-values',
-  hashtags: 'ox-property-editor-hashtags',
-  '3axis': 'ox-property-editor-3axis',
-  '3dish': 'ox-property-editor-3dish'
-})
-
-const properties = [
-  {
-    type: 'string',
-    label: 'ABC',
-    name: 'ABC',
-    quantifier: [1, 20]
-  },
-  {
-    type: 'password',
-    label: 'PWD',
-    name: 'PWD'
-  },
-  {
-    type: 'select',
-    label: 'SLT',
-    name: 'SLT',
-    property: {
-      options: [
-        { display: '', value: '' },
-        { display: 'AAA', value: 'aaa' },
-        { display: 'BBB', value: 'bbb' }
-      ]
-    }
-  },
-  {
-    type: 'number',
-    label: 'N#',
-    name: 'N#'
-  },
-  {
-    type: 'unit-number',
-    label: 'NU',
-    name: 'NU',
-    property: {
-      unit: 'K'
-    }
-  },
-  {
-    type: 'checkbox',
-    label: 'XV',
-    name: 'XV'
-  },
-  {
-    type: 'angle',
-    label: 'Degree',
-    name: 'Degree'
-  },
-  {
-    type: 'date',
-    label: 'DD',
-    name: 'DD'
-  },
-  {
-    type: 'datetime',
-    label: 'DT',
-    name: 'DT'
-  },
-  {
-    type: 'legend',
-    label: '',
-    name: 'NEW-GROUP',
-    property: {
-      label: 'NEW-GROUP'
-    }
-  },
-  {
-    type: 'slider',
-    label: 'S',
-    name: 'S',
-    property: {
-      min: 30,
-      max: 300,
-      step: 10
-    }
-  },
-  {
-    type: 'textarea',
-    label: 'TA',
-    name: 'TA',
-    styles: {
-      flex: '1'
-    }
-  },
-  {
-    type: 'options',
-    label: 'OT',
-    name: 'OT',
-    editor: {
-      fullwidth: true
-    }
-  },
-  {
-    type: 'data',
-    label: 'DT',
-    name: 'DT'
-  },
-  {
-    type: 'color',
-    label: 'CL',
-    name: 'CL'
-  },
-  {
-    type: 'multiple-color',
-    label: 'CLS',
-    name: 'CLS'
-  },
-  {
-    type: 'image',
-    label: 'IM',
-    name: 'IM'
-  },
-  {
-    type: 'signature',
-    label: 'ST',
-    name: 'ST'
-  },
-  {
-    type: 'file',
-    label: 'FL',
-    name: 'FL',
-    property: {
-      multiple: true
-    }
-  },
-  {
-    type: 'crontab',
-    label: 'schedule',
-    name: 'schedule'
-  },
-  {
-    type: 'shift',
-    label: 'shift',
-    name: 'shift'
-  },
-  {
-    type: 'key-values',
-    label: 'key-values',
-    name: 'key-values'
-  },
-  {
-    type: 'hashtags',
-    label: 'hashtags',
-    name: 'hashtags'
-  },
-  {
-    type: '3dish',
-    label: '3dish',
-    name: '3dish'
-  }
-] as PropertySpec[]
-
-const value = {
-  ABC: [4, 3, 2, 1],
-  S: 290,
-  SLT: 'bbb',
-  NU: 1000,
-  IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',
-  ST: 'data:image/png;base64,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',
-  CLS: ['yello', 'green'],
-  schedule: '* * * * * *',
-  shift: [
-    {
-      name: 'DAY',
-      fromDate: -1,
-      fromTime: '22:00',
-      toDate: 0,
-      toTime: '06:00'
-    },
-    {
-      name: 'SWING',
-      fromDate: 0,
-      fromTime: '06:00',
-      toDate: 0,
-      toTime: '14:00'
-    },
-    {
-      name: 'NIGHT',
-      fromDate: 0,
-      fromTime: '14:00',
-      toDate: 0,
-      toTime: '22:00'
-    }
-  ],
-  hashtags: ['abc', 'def'],
-  '3dish': {
-    dimension: { x: 1, y: 1, z: 1 },
-    position: { x: 1, y: 1, z: 1 },
-    rotate: { x: 1, y: 1, z: 1 },
-    scale: { x: 1, y: 1, z: 1 }
-  }
-}
-
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <ox-properties-dynamic-view .props=${properties} .value=${value}></ox-properties-dynamic-view>
-`
-
-export const Regular = Template.bind({})