@operato/grist-editor 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-popup-i18n-label-input.ts

@@ -1,98 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-i18n-label.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-i18n-label-input')
-export class OxPopupValueMapInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-i18n-label {
-        flex: 1;
-        overflow-y: auto;
-        padding: var(--padding-default);
-      }
-
-      span {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: Array }) languages: { code: string; display: string }[] = []
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-
-  render() {
-    return html`
-      <ox-input-i18n-label .value=${this.value} .languages=${this.languages} @change=${this.onChange.bind(this)}>
-      </ox-input-i18n-label>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    /* 
-      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
-      layout의 구성에 변화가 발생하면, 다시 render된다.
-      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
-      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
-      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
-      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
-      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
-      => 
-      이런 이유로, Object.assign(...)을 사용하였다.
-    */
-
-    if (!this.value || typeof this.value !== 'object') {
-      this.value = {}
-    }
-
-    for (let key in this.value) {
-      delete this.value[key]
-    }
-
-    Object.assign(this.value, e.detail)
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

package/src/ox-popup-parameters-builder.ts

@@ -1,112 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-parameters-builder')
-export class OxPopupParametersBuilder extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-parameters-builder {
-        flex: 1;
-        overflow-y: auto;
-
-        display: flex;
-        flex-direction: column;
-      }
-
-      span {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: Object }) props: any
-  @property({ type: Object }) host: any
-  @property({ type: Object }) context: any
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-
-  render() {
-    var props = this.props instanceof Array ? this.props : []
-
-    return html`
-      ${props.length > 0
-        ? html`
-            <ox-parameters-builder
-              .value=${this.value}
-              .props=${props}
-              .host=${this.host}
-              .context=${this.context}
-              @property-change=${this.onChange.bind(this)}
-            >
-            </ox-parameters-builder>
-          `
-        : html` <span><ox-i18n msgid="text.no properties to set"></ox-i18n></span> `}
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    /* 
-      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
-      layout의 구성에 변화가 발생하면, 다시 render된다.
-      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
-      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
-      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
-      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
-      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
-      => 
-      이런 이유로, Object.assign(...)을 사용하였다.
-    */
-    if (!this.value) {
-      this.value = {}
-    }
-
-    for (let key in this.value) {
-      delete this.value[key]
-    }
-    Object.assign(this.value, e.detail)
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

package/src/ox-popup-partition-keys-input.ts

@@ -1,97 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-partition-keys.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-partition-keys-input')
-export class OxPopupPartitionKeysInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-partition-keys {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px;
-      }
-
-      span {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: String }) valuetype: string = 'string'
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-
-  render() {
-    return html`
-      <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    /* 
-      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
-      layout의 구성에 변화가 발생하면, 다시 render된다.
-      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
-      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
-      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
-      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
-      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
-      => 
-      이런 이유로, Object.assign(...)을 사용하였다.
-    */
-
-    if (!this.value || typeof this.value !== 'object') {
-      this.value = {}
-    }
-
-    for (let key in this.value) {
-      delete this.value[key]
-    }
-
-    Object.assign(this.value, e.detail)
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

package/src/ox-popup-value-map-input.ts

@@ -1,105 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import '@operato/input/ox-input-value-map.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-value-map-input')
-export class OxPopupValueMapInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-value-map {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      span {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: String }) valuetype: string = 'string'
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-  @property({ type: String, attribute: 'default-value' }) defaultValue?: string
-
-  render() {
-    return html`
-      <ox-input-value-map
-        .value=${this.value}
-        keytype="string"
-        .valuetype=${this.valuetype}
-        .defaultValue=${this.defaultValue}
-        @change=${this.onChange.bind(this)}
-      >
-      </ox-input-value-map>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    /* 
-      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
-      layout의 구성에 변화가 발생하면, 다시 render된다.
-      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
-      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
-      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
-      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
-      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
-      => 
-      이런 이유로, Object.assign(...)을 사용하였다.
-    */
-
-    if (!this.value) {
-      this.value = {}
-    }
-
-    for (let key in this.value) {
-      delete this.value[key]
-    }
-
-    Object.assign(this.value, e.detail)
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

package/src/ox-popup-value-ranges-input.ts

@@ -1,104 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-value-ranges.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-value-ranges-input')
-export class OxPopupValueRangesInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-input-value-ranges {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      span {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: String }) valuetype: string = 'string'
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-  @property({ type: String, attribute: 'default-value' }) defaultValue?: string
-
-  render() {
-    return html`
-      <ox-input-value-ranges
-        .value=${this.value}
-        keytype="string"
-        .valuetype=${this.valuetype}
-        .defaultValue=${this.defaultValue}
-        @change=${this.onChange.bind(this)}
-      >
-      </ox-input-value-ranges>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-        </button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    /* 
-      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
-      layout의 구성에 변화가 발생하면, 다시 render된다.
-      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
-      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
-      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
-      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
-      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
-      => 
-      이런 이유로, Object.assign(...)을 사용하였다.
-    */
-
-    if (!this.value) {
-      this.value = {}
-    }
-
-    for (let key in this.value) {
-      delete this.value[key]
-    }
-
-    Object.assign(this.value, e.detail)
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}