@operato/data-grist 8.0.0-alpha.8 → 8.0.0-beta.1

package/src/editors/ox-input-tree.ts

@@ -1,226 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { PropertyValues, css, html, nothing } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { OxFormField } from '@operato/input'
-import { GristRecord } from '../types'
-
-@customElement('ox-input-tree')
-export class OxInputTree extends OxFormField {
-  static styles = css`
-    :host {
-      overflow: hidden;
-    }
-
-    div[wrap] {
-      flex: 1;
-
-      position: relative;
-
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      padding-left: calc(var(--tree-depth, 0) * 18px);
-    }
-
-    span[expander] {
-      display: inline-block;
-      vertical-align: middle;
-      width: 12px;
-      height: 20px;
-      cursor: pointer;
-      position: relative;
-    }
-
-    span[expander][collapsed]::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-25%, -50%) rotate(-90deg);
-      content: ' ';
-      border: 5px solid transparent;
-      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
-    }
-
-    span[expander][expanded]::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -25%);
-      content: ' ';
-      border: 5px solid transparent;
-      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
-    }
-
-    span[checkbox] {
-      display: inline-block;
-      vertical-align: middle;
-      width: 12px;
-      height: 20px;
-      cursor: pointer;
-      position: relative;
-    }
-
-    span[checkbox]::before {
-      cursor: pointer;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      content: ' ';
-      display: block;
-      width: 10px;
-      height: 10px;
-      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
-      border-radius: 2px;
-    }
-
-    span[checkbox][checked='checked']::before {
-      background-color: var(--md-sys-color-on-primary-container, #1890ff);
-      border-color: var(--md-sys-color-on-primary-container, #1890ff);
-    }
-
-    span[checkbox][checked='checked']::after {
-      position: absolute;
-      content: ' ';
-      display: block;
-      top: 50%;
-      left: 50%;
-      width: 3px;
-      height: 7px;
-      border: 2px solid #fff;
-      border-top: none;
-      border-left: none;
-      -webkit-transform: translate(-50%, -50%) rotate(45deg);
-      -ms-transform: translate(-50%, -50%) rotate(45deg);
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-
-    span[checkbox][checked='half-checked']::before {
-      background-color: var(--md-sys-color-on-primary-container, #1890ff);
-      border-color: var(--md-sys-color-on-primary-container, #1890ff);
-    }
-
-    span[checkbox][checked='half-checked']::after {
-      position: absolute;
-      content: ' ';
-      display: block;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 10px;
-      height: 2px;
-      background-color: var(--md-sys-color-surface);
-    }
-
-    span[label] {
-      flex: 1;
-    }
-
-    input {
-      width: 100%;
-      height: 100%;
-      border: 0;
-      background-color: transparent;
-      box-sizing: border-box;
-    }
-
-    input:focus {
-      outline: none;
-    }
-  `
-
-  @property({ type: Object }) record!: GristRecord
-  @property({ type: Boolean }) selectable?: boolean
-
-  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'
-  @state() private expanded?: boolean = false
-
-  @query('input') input!: HTMLInputElement
-
-  render() {
-    var { __children__ } = this.record
-
-    const expandable = __children__ && __children__.length > 0
-
-    return html`
-      <div wrap>
-        ${expandable
-          ? html`
-              <span
-                expander
-                @click=${this.onClickExpander.bind(this)}
-                ?expanded=${this.expanded}
-                ?collapsed=${!this.expanded}
-              ></span>
-            `
-          : html`<span expander></span>`}
-        ${this.selectable
-          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`
-          : nothing}
-
-        <span label
-          ><input
-            value=${ifDefined(this.value)}
-            @change=${(e: Event) => {
-              e.stopPropagation()
-              this.value = (e.target as HTMLInputElement).value
-              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-            }}
-            focus
-        /></span>
-
-        <!-- <span label>${this.value}</span> -->
-      </div>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    var { __depth__, __check_in_tree__, __expanded__ } = this.record
-    this.checked = __check_in_tree__
-    this.expanded = __expanded__
-
-    this.style.setProperty('--tree-depth', String(__depth__))
-  }
-
-  focus() {
-    this.input.focus()
-  }
-
-  select() {
-    this.input.select()
-  }
-
-  onClickCheckbox(e: MouseEvent) {
-    e.stopPropagation()
-
-    this.dispatchEvent(
-      new CustomEvent('check-in-tree', {
-        bubbles: true,
-        composed: true,
-        detail: this.record
-      })
-    )
-
-    this.requestUpdate()
-  }
-
-  onClickExpander(e: MouseEvent) {
-    e.stopPropagation()
-
-    this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
-        bubbles: true,
-        composed: true,
-        detail: this.record
-      })
-    )
-
-    this.requestUpdate()
-  }
-}

package/src/editors/registry.ts

@@ -1,80 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, FieldEditor, GristRecord } from '../types'
-import { OxGristEditor } from './ox-grist-editor'
-import { OxGristEditorCheckbox } from './ox-grist-editor-checkbox'
-import { OxGristEditorColor } from './ox-grist-editor-color'
-import { OxGristEditorDate } from './ox-grist-editor-date'
-import { OxGristEditorDateTime } from './ox-grist-editor-datetime'
-import { OxGristEditorEmail } from './ox-grist-editor-email'
-import { OxGristEditorFile } from './ox-grist-editor-file'
-import { OxGristEditorImage } from './ox-grist-editor-image'
-import { OxGristEditorMonth } from './ox-grist-editor-month'
-import { OxGristEditorMultipleSelect } from './ox-grist-editor-multiple-select'
-import { OxGristEditorNumber } from './ox-grist-editor-number'
-import { OxGristEditorPassword } from './ox-grist-editor-password'
-import { OxGristEditorSelect } from './ox-grist-editor-select'
-import { OxGristEditorTel } from './ox-grist-editor-tel'
-import { OxGristEditorText } from './ox-grist-editor-text'
-import { OxGristEditorTextarea } from './ox-grist-editor-textarea'
-import { OxGristEditorTime } from './ox-grist-editor-time'
-import { OxGristEditorTree } from './ox-grist-editor-tree'
-import { OxGristEditorWeek } from './ox-grist-editor-week'
-
-var EDITORS: { [name: string]: { new (): OxGristEditor } } = {
-  string: OxGristEditorText,
-  text: OxGristEditorText,
-  textarea: OxGristEditorTextarea,
-  email: OxGristEditorEmail,
-  tel: OxGristEditorTel,
-  password: OxGristEditorPassword,
-  integer: OxGristEditorNumber,
-  float: OxGristEditorNumber,
-  number: OxGristEditorNumber,
-  select: OxGristEditorSelect,
-  boolean: OxGristEditorCheckbox,
-  checkbox: OxGristEditorCheckbox,
-  month: OxGristEditorMonth,
-  week: OxGristEditorWeek,
-  date: OxGristEditorDate,
-  time: OxGristEditorTime,
-  datetime: OxGristEditorDateTime,
-  color: OxGristEditorColor,
-  progress: OxGristEditorNumber,
-  link: OxGristEditorText,
-  image: OxGristEditorImage,
-  file: OxGristEditorFile,
-  'string[]': OxGristEditorMultipleSelect,
-  tree: OxGristEditorTree
-}
-
-export function registerEditor(type: string, editor: { new (): OxGristEditor }) {
-  EDITORS[type] = editor
-}
-
-export function unregisterEditor(type: string) {
-  delete EDITORS[type]
-}
-
-export function getEditors(): { [name: string]: { new (): OxGristEditor } } {
-  return { ...EDITORS }
-}
-
-export function getEditor(type: string): FieldEditor {
-  if (typeof type == 'function') {
-    return type
-  }
-
-  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {
-    var clazz = EDITORS[type || 'text'] || OxGristEditorText
-
-    var element = new clazz()
-
-    element.value = value
-    element.record = record
-    element.column = column
-    element.row = rowIndex
-    element.field = field
-
-    return element
-  }
-}

package/src/empty-note.ts

@@ -1,46 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-empty-note')
-export class EmptyNote extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      text-align: center;
-    }
-
-    md-icon {
-      font: var(--oops-note-icon-font);
-      color: var(--oops-note-icon-color);
-      border: var(--oops-note-icon-border);
-      border-radius: var(--oops-note-icon-border-radius);
-      padding: var(--oops-note-icon-padding);
-    }
-
-    [titler] {
-      margin: var(--oops-note-title-margin);
-      font: var(--oops-note-title-font);
-      color: var(--oops-note-title-color);
-      text-transform: capitalize;
-    }
-
-    [description] {
-      font: var(--oops-note-description-font);
-      color: var(--oops-note-description-color);
-    }
-  `
-
-  @property() icon?: string
-  @property() title!: string
-  @property() description?: string
-
-  render() {
-    return html`
-      ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : html``}
-      <div titler>${this.title}</div>
-      ${this.description ? html`<div description>${this.description}</div>` : html``}
-    `
-  }
-}

package/src/filters/filter-checkbox.ts

@@ -1,49 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-
-import { html } from 'lit-html'
-
-import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
-
-export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
-  const { name, header, label, filter } = column
-
-  const { label: filterLabel, operator } = filter! as FilterConfigObject
-
-  const labelText =
-    filterLabel !== undefined
-      ? filterLabel
-      : typeof label === 'object' && label.renderer
-        ? label.renderer(column)
-        : header.renderer(column) || name
-
-  // 텍스트 형태로 받았을시 의도가 boolean이면 boolean 타입으로 변환
-  if (value === 'false') {
-    value = false;
-  } else if (value === 'true') {
-    value = true;
-  }
-
-  return html`
-    <ox-checkbox
-      name=${column.name}
-      ?checked=${value}
-      indeterminatable
-      ?indeterminate=${value === undefined}
-      left-label
-      @change=${(e: CustomEvent) => {
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name,
-              operator,
-              value: (e.target as Element & { checked: boolean | undefined }).checked
-            }
-          })
-        )
-      }}
-      ><label filter-title><span>${labelText}</span></label></ox-checkbox
-    >
-  `
-}

package/src/filters/filter-input-barcode.ts

@@ -1,34 +0,0 @@
-import '@operato/input/ox-input-barcode.js'
-
-import { html } from 'lit-html'
-
-import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
-
-export const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const { englishOnly, selectAfterChange } = filter.options || {}
-
-  return html`
-    <ox-input-barcode
-      name=${column.name}
-      ?english-only=${englishOnly}
-      ?select-after-change=${selectAfterChange}
-      .value=${value == null ? '' : value}
-      @change=${(e: CustomEvent) => {
-        const input = e.target as HTMLInputElement
-        input.dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: input.value
-            }
-          })
-        )
-      }}
-      filter-input
-    ></ox-input-barcode>
-  `
-}

package/src/filters/filter-input.ts

@@ -1,30 +0,0 @@
-import { html } from 'lit-html'
-
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
-export const FilterInput: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const type = filter?.type || column.type
-
-  return html`
-    <input
-      type=${type as any}
-      name=${column.name}
-      .value=${value == null ? '' : value}
-      @change=${(e: CustomEvent) => {
-        const input = e.target as HTMLInputElement
-        input.dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: input.value
-            }
-          })
-        )
-      }}
-    />
-  `
-}

package/src/filters/filter-range-date.ts

@@ -1,81 +0,0 @@
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
-import { html } from 'lit-html'
-
-function formatDate(type: string, date: Date) {
-  var year = date.getFullYear()
-  var month = ('0' + (date.getMonth() + 1)).slice(-2)
-  var day = ('0' + date.getDate()).slice(-2)
-  var hours = ('0' + date.getHours()).slice(-2)
-  var minutes = ('0' + date.getMinutes()).slice(-2)
-
-  var formatDate = year + '-' + month + '-' + day
-
-  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
-}
-
-export const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-
-  var [from, to] = value instanceof Array ? value : []
-
-  var type: any = filter?.type || column.type
-  if (type === 'datetime') {
-    type = 'datetime-local'
-  }
-
-  from = formatDate(type, new Date(from))
-  to = formatDate(type, new Date(to))
-
-  return html`
-    <input
-      name=${column.name}
-      type=${type}
-      .value=${from}
-      from
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-    />
-    ~
-    <input
-      name=${column.name}
-      type=${type}
-      .value=${to}
-      to
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-    />
-  `
-}

package/src/filters/filter-range-number.ts

@@ -1,64 +0,0 @@
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
-import { html } from 'lit-html'
-
-export const FilterRangeNumber: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const type = filter?.type || column.type
-
-  const [from, to] = value instanceof Array ? value : []
-
-  return html`
-    <input
-      name=${column.name}
-      type="number"
-      placeholder="minimum"
-      .value=${from}
-      from
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-    />
-    ~
-    <input
-      name=${column.name}
-      type="number"
-      placeholder="maximum"
-      .value=${to}
-      to
-      @keyup=${(e: KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: Array.from(
-                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
-              ).map(input => (input as HTMLInputElement).value)
-            }
-          })
-        )
-      }}
-    />
-  `
-}

package/src/filters/filter-select-buttons.ts

@@ -1,60 +0,0 @@
-import '@operato/input/ox-input-select-buttons.js'
-
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
-import { html } from 'lit-html'
-
-export const FilterSelectButtons: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const operator = filter?.operator
-
-  var options = filter?.options || column.record.options || []
-
-  if (typeof options === 'function') {
-    if (!filter?.options) {
-      console.warn(
-        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
-      )
-    }
-    options = options.call(column, owner)
-  }
-
-  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-input-select-buttons
-      name=${column.name}
-      .value=${value}
-      .options=${options}
-      ?multiple=${operator === 'in'}
-      @change=${(e: CustomEvent) => {
-        ;(e.target as HTMLElement).dispatchEvent(
-          new CustomEvent('filter-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              name: column.name,
-              operator: filter.operator,
-              value: (e.target as HTMLInputElement).value
-            }
-          })
-        )
-      }}
-    ></ox-input-select-buttons>
-  `
-}