@operato/data-grist 8.0.0-beta.0 → 8.0.0-beta.1

package/src/editors/ox-grist-editor-image.ts

@@ -1,31 +0,0 @@
-import '@operato/input/ox-input-image.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-image')
-export class OxGristEditorImage extends OxGristEditor {
-  get editorTemplate() {
-    return html` <ox-input-image .value=${this.value}></ox-input-image> `
-  }
-
-  _onchange(e: Event) {
-    e.stopPropagation()
-
-    const input = e.target as HTMLInputElement
-
-    // value가 image file object인지, image url인지 확인
-    if (input.files?.[0]) {
-      this._dirtyValue = this.formatFromEditor(input.files[0])
-    } else {
-      this._dirtyValue = this.formatFromEditor(input.value)
-    }
-
-    this._onfocusout()
-  }
-
-  formatFromEditor(value: any) {
-    return value
-  }
-}

package/src/editors/ox-grist-editor-month.ts

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-month')
-export class OxGristEditorMonth extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="month" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor-multiple-select.ts

@@ -1,57 +0,0 @@
-import '@operato/input/ox-select.js'
-import '@operato/input/ox-checkbox.js'
-import '@operato/popup/ox-popup-list.js'
-
-import { html, css } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-
-@customElement('ox-grist-editor-multiple-select')
-export class OxGristEditorMultipleSelect extends OxGristEditor {
-  static styles = [
-    ...OxGristEditor.styles,
-    css`
-      :host {
-        overflow: visible;
-      }
-    `
-  ]
-
-  get editorTemplate() {
-    var rowOptionField = this.record[this.column.record.rowOptionField || '']
-    var { options = [] } = rowOptionField ? rowOptionField : this.column.record
-
-    if (typeof options == 'function') {
-      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field) || []
-    }
-
-    options = options.map((option: any) => {
-      switch (typeof option) {
-        case 'string':
-          return {
-            display: option,
-            value: option
-          }
-        case 'object':
-          return {
-            display: option.display,
-            value: option.value
-          }
-        default:
-          return option
-      }
-    })
-
-    return html`
-      <ox-select .value=${this.value} style="width: 100%;">
-        <ox-popup-list multiple attr-selected="checked">
-          ${options.map(
-            (option: { display: string; value: string }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
-          )}
-        </ox-popup-list>
-      </ox-select>
-    `
-  }
-}

package/src/editors/ox-grist-editor-number.ts

@@ -1,27 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-import { parseToNumberOrNull } from '@operato/utils'
-
-@customElement('ox-grist-editor-number')
-export class OxGristEditorNumber extends OxGristEditor {
-  get inlineEditable() {
-    return true
-  }
-
-  formatFromEditor(value: any) {
-    const parsed = parseToNumberOrNull(value) ?? null
-
-    if (parsed !== null && this.column.type == 'integer') {
-      return Math.floor(parsed)
-    }
-
-    return parsed
-  }
-
-  get editorTemplate() {
-    var { min = -Infinity, max = Infinity } = this.column.record.options || {}
-
-    return html` <input type="number" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `
-  }
-}

package/src/editors/ox-grist-editor-password.ts

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-password')
-export class OxGristEditorPassword extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="password" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor-select.ts

@@ -1,55 +0,0 @@
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { until } from 'lit/directives/until.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-import { SelectOption, SelectOptionObject } from '../types.js'
-
-function buildOptions(options: SelectOption[], value: any) {
-  const selectOptionObjects = options.map(option => {
-    switch (typeof option) {
-      case 'string':
-        return {
-          display: option,
-          value: option
-        }
-      case 'object':
-        return {
-          display: option.display || option.name,
-          value: option.value
-        }
-      default:
-        return option
-    }
-  }) as SelectOptionObject[]
-
-  return html`
-    <select>
-      ${selectOptionObjects.map(
-        (option: any) => html`
-          <option ?selected=${option.value == value} value=${option.value}>${option.display}</option>
-        `
-      )}
-    </select>
-  `
-}
-
-@customElement('ox-grist-editor-select')
-export class OxGristEditorSelect extends OxGristEditor {
-  get editorTemplate() {
-    var rowOptionField = this.record[this.column.record.rowOptionField || '']
-    var { options = [] } = rowOptionField ? rowOptionField : this.column.record
-
-    if (typeof options == 'function') {
-      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)
-
-      if (options instanceof Promise) {
-        return html`${until(options.then(options => buildOptions(options, this.value)))}`
-      } else {
-        return buildOptions((options || []) as SelectOption[], this.value)
-      }
-    } else {
-      return buildOptions((options || []) as SelectOption[], this.value)
-    }
-  }
-}

package/src/editors/ox-grist-editor-tel.ts

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-tel')
-export class OxGristEditorTel extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="tel" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor-text.ts

@@ -1,14 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-text')
-export class OxGristEditorText extends OxGristEditor {
-  get inlineEditable() {
-    return true
-  }
-
-  get editorTemplate() {
-    return html` <input type="text" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor-textarea.ts

@@ -1,16 +0,0 @@
-import '@operato/input/ox-input-textarea.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-textarea')
-export class OxGristEditorTextarea extends OxGristEditor {
-  get inlineEditable() {
-    return true
-  }
-
-  get editorTemplate() {
-    return html` <ox-input-textarea .value=${this.value}></ox-input-textarea> `
-  }
-}

package/src/editors/ox-grist-editor-time.ts

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-time')
-export class OxGristEditorTime extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="time" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor-tree.ts

@@ -1,27 +0,0 @@
-import './ox-input-tree'
-
-import { html, css } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-
-@customElement('ox-grist-editor-tree')
-export class OxGristEditorTree extends OxGristEditor {
-  static styles = [
-    css`
-      :host {
-        flex: 1;
-      }
-
-      ox-input-tree {
-        flex: 1;
-      }
-    `
-  ]
-
-  get editorTemplate() {
-    var { selectable } = this.column.record.options || {}
-
-    return html`<ox-input-tree .value=${this.value} .record=${this.record} ?selectable=${selectable}></ox-input-tree>`
-  }
-}

package/src/editors/ox-grist-editor-varname.ts

@@ -1,36 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-varname')
-export class OxGristEditorVarname extends OxGristEditor {
-  get inlineEditable() {
-    return true
-  }
-
-  get editorTemplate() {
-    return html`
-      <input
-        type="text"
-        .value=${this.value}
-        @input=${this.handleInput}
-        pattern="^[A-Za-z_][A-Za-z0-9_]*$"
-        title="Variable names must start with a letter or underscore and contain only letters, numbers, or underscores."
-      />
-    `
-  }
-
-  handleInput(event: KeyboardEvent) {
-    const input = event.target as HTMLInputElement
-    const regex = /^[A-Za-z_][A-Za-z0-9_]*$/
-
-    // Only allow valid characters as the user types
-    if (!regex.test(input.value)) {
-      // Keep only valid characters and start with a letter or underscore
-      input.value = input.value.replace(/[^A-Za-z0-9_]/g, '').replace(/^[^A-Za-z_]+/, '')
-    }
-
-    // Update the component's internal value state
-    this.value = input.value
-  }
-}

package/src/editors/ox-grist-editor-week.ts

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-week')
-export class OxGristEditorWeek extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="week" .value=${this.value} /> `
-  }
-}

package/src/editors/ox-grist-editor.ts

@@ -1,207 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristRecord } from '../types'
-import { getDefaultValue } from '@operato/time-calculator'
-
-const STYLE = css`
-  :host {
-    display: flex;
-
-    align-items: center;
-
-    width: 100%;
-    height: 100%;
-
-    border: 0;
-    background-color: transparent;
-
-    overflow: hidden;
-    justify-content: var(--data-grid-field-justify-content, flex-start);
-  }
-
-  :host > * {
-    display: flex;
-
-    width: 100%;
-    height: 100%;
-
-    border: 0;
-    background-color: transparent;
-
-    box-sizing: border-box;
-
-    align-items: center;
-  }
-
-  :host > style {
-    display: none;
-  }
-
-  :host > input {
-    color: var(--md-sys-color-on-background);
-  }
-
-  :host > input[type='checkbox'] {
-    width: initial;
-    margin: 0;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  input[type='file'] {
-    opacity: 0%;
-  }
-
-  @media screen and (max-width: 460px) {
-    :host > * {
-      border: initial;
-      background-color: initial;
-    }
-
-    *:focus {
-      outline: none;
-    }
-
-    input,
-    select,
-    textarea {
-      font-size: 16px;
-    }
-  }
-`
-
-@customElement('ox-grist-editor')
-export class OxGristEditor extends LitElement {
-  static styles = [STYLE]
-
-  @property({ type: Object }) value?: any
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Number }) rowIndex?: number
-  @property({ type: Object }) field?: DataGridField
-  @property({ type: Number }) row?: number
-
-  protected _dirtyValue?: any
-
-  render() {
-    return this.editorTemplate
-  }
-
-  get editor(): HTMLElement | null {
-    return this.renderRoot.firstElementChild as HTMLElement
-  }
-
-  get inlineEditable() {
-    return false
-  }
-
-  async firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onchange.bind(this))
-    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))
-    this.addEventListener('click', this._onclick.bind(this))
-    this.addEventListener('dblclick', this._ondblclick.bind(this))
-    this.addEventListener('keydown', this._onkeydown.bind(this))
-
-    /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */
-    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())
-    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())
-    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())
-
-    const { name = '' } = this.column
-    const { align, defaultValue } = this.column.record
-
-    if (align) {
-      this.style.textAlign = align
-      this.style.textAlignLast = align /* for select */
-    }
-
-    var currentValue = this.record[name]
-
-    if (typeof currentValue == 'undefined' && defaultValue) {
-      currentValue = getDefaultValue(defaultValue, this.record)
-    }
-
-    this.value = this._dirtyValue = this.formatForEditor(currentValue)
-
-    // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
-    const valueWith = this.inlineEditable && this.field?.valueWith
-    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)
-
-    requestAnimationFrame(() => {
-      this.focus()
-      !valueWith && this.select()
-    })
-  }
-
-  select() {
-    const editor = this.editor
-    if ((editor as HTMLInputElement)?.select) {
-      return (editor as HTMLInputElement).select()
-    }
-  }
-
-  focus() {
-    const editor = this.editor
-    if (editor) {
-      editor.focus()
-    }
-  }
-
-  formatForEditor(value: any): any {
-    return value == null ? '' : value
-  }
-
-  formatFromEditor(value: any): any {
-    return value
-  }
-
-  _onfocusout() {
-    // paste시 field-change는 Body에서 하므로 X
-    if (this.field?.isWorking === true) return
-
-    const { name = '' } = this.column
-    var currentValue = this.record[name] || ''
-
-    if (this._dirtyValue !== currentValue) {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: currentValue,
-            after: this._dirtyValue,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-  }
-
-  _onchange(e: Event): void {
-    e.stopPropagation()
-
-    const value = (e.target as any)?.value
-
-    this._dirtyValue = this.formatFromEditor(value)
-  }
-
-  _onkeydown(e: Event): void {}
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-  }
-
-  _ondblclick(e: Event): void {
-    e.stopPropagation()
-  }
-
-  get editorTemplate() {
-    return html``
-  }
-}