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

package/src/record-view/record-view.ts

@@ -1,122 +0,0 @@
-import '@material/web/icon/icon.js'
-import './record-view-body'
-import '@operato/input/ox-input-file.js'
-import '../data-grid/data-grid-field'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord, ValidationReason } from '../types'
-
-import { RecordViewBody } from './record-view-body'
-
-@customElement('ox-record-view')
-export class RecordView extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--record-view-background-color);
-      }
-
-      ox-record-view-body {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      [footer] {
-        text-align: right;
-        background-color: var(--record-view-footer-background);
-        box-shadow: var(--context-toolbar-shadow-line);
-      }
-
-      [footer] button {
-        display: inline-block;
-        align-items: center;
-        justify-content: center;
-
-        background-color: transparent;
-        border: var(--record-view-footer-button-border);
-        border-width: var(--record-view-footer-button-border-width);
-        padding: var(--spacing-tiny) var(--spacing-medium);
-        color: var(--record-view-footer-button-color);
-        font-size: var(--md-sys-typescale-title-medium-size, 1rem);
-        line-height: 2;
-      }
-
-      [footer] button * {
-        vertical-align: middle;
-      }
-
-      [footer] button md-icon {
-        --md-icon-size: var(--icon-size-small);
-        margin-right: var(--spacing-small, 4px);
-      }
-
-      [footer] button[ok] {
-        background-color: var(--record-view-footer-focus-background);
-      }
-    `
-  ]
-
-  @property({ type: Array }) columns: ColumnConfig[] = []
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Number }) rowIndex: number = -1
-
-  @query('ox-record-view-body') body!: RecordViewBody
-
-  render() {
-    return html`
-      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
-      </ox-record-view-body>
-      <div footer>
-        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>
-        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>
-        <button @click=${this.onOK.bind(this)} ok><md-icon>task_alt</md-icon><span>OK</span></button>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.setAttribute('tabindex', '0')
-  }
-
-  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
-    this.body.setFocusOnInvalid(invalidFields)
-  }
-
-  onReset() {
-    this.focus()
-
-    this.dispatchEvent(
-      new CustomEvent('reset', {
-        detail: this.record
-      })
-    )
-  }
-
-  onCancel() {
-    this.focus()
-
-    this.dispatchEvent(
-      new CustomEvent('cancel', {
-        detail: this.record
-      })
-    )
-  }
-
-  onOK() {
-    this.focus()
-
-    this.dispatchEvent(
-      new CustomEvent('ok', {
-        detail: this.record
-      })
-    )
-  }
-}

package/src/renderers/index.ts

@@ -1,14 +0,0 @@
-export * from './registry.js'
-
-export * from './ox-grist-renderer.js'
-export * from './ox-grist-renderer-boolean.js'
-export * from './ox-grist-renderer-color.js'
-export * from './ox-grist-renderer-date.js'
-export * from './ox-grist-renderer-link.js'
-export * from './ox-grist-renderer-password.js'
-export * from './ox-grist-renderer-progress.js'
-export * from './ox-grist-renderer-text.js'
-export * from './ox-grist-renderer-select.js'
-export * from './ox-grist-renderer-image.js'
-export * from './ox-grist-renderer-file.js'
-export * from './ox-grist-renderer-json5.js'

package/src/renderers/ox-grist-renderer-boolean.ts

@@ -1,43 +0,0 @@
-import { FieldRenderer } from '../types'
-import { html } from 'lit'
-
-export const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {
-  let { editable } = column.record
-  if (typeof editable === 'function') {
-    editable = editable.call(field, value, column, record, rowIndex, field)
-  }
-
-  return html`
-    <input
-      type="checkbox"
-      .checked=${!!value && !!String(value).match(/true/i)}
-      ?disabled=${!editable}
-      @pointerdown=${(e: Event) => {
-        /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */
-        e.stopPropagation()
-      }}
-      @click=${(e: Event) => {
-        e.stopPropagation()
-        /*
-         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.
-         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.
-         *
-         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.
-         */
-        field.dispatchEvent(
-          new CustomEvent('field-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              before: value,
-              after: (e.target as HTMLInputElement).checked,
-              column: column,
-              record: record,
-              row: rowIndex
-            }
-          })
-        )
-      }}
-    />
-  `
-}

package/src/renderers/ox-grist-renderer-color.ts

@@ -1,15 +0,0 @@
-import { html } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-export const OxGristRendererColor: FieldRenderer = (value, column, record, rowIndex, field) => {
-  value = value == null ? '#000' : value
-
-  return html`
-    <div
-      style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};"
-    >
-      ${value ? html`<p>${value}</p>` : html`<p>&nbsp</p>`}
-    </div>
-  `
-}

package/src/renderers/ox-grist-renderer-date.ts

@@ -1,62 +0,0 @@
-import { FieldRenderer } from '../types'
-import { html } from 'lit'
-
-// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
-const DATETIME_OPTIONS = {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  hour12: false
-}
-
-const DATE_OPTIONS = {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric'
-}
-
-const TIME_OPTIONS = {
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-}
-
-const OPTIONS = {
-  datetime: DATETIME_OPTIONS,
-  time: TIME_OPTIONS,
-  date: DATE_OPTIONS
-}
-
-function getsec(time: string): number {
-  var arr = time.split(':')
-  return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0)
-}
-
-/* 
-  TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다. 
-  따라서, 이 경우는 타임존에 대한 처리가 불필요하다.
-*/
-export const OxGristRendererDate: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
-    return ''
-  }
-
-  if (!isNaN(Number(value))) value = Number(value)
-
-  var options = column.record.options || OPTIONS[column.type as 'datetime' | 'date' | 'time']
-  var formatter = new Intl.DateTimeFormat(navigator.language, options)
-
-  switch (column.type) {
-    case 'datetime':
-    case 'date':
-      value = formatter.format(new Date(value))
-      break
-    case 'time':
-    default:
-  }
-
-  return value ? html`<span>${value}</span>` : html`<span>&nbsp</span>`
-}

package/src/renderers/ox-grist-renderer-file.ts

@@ -1,31 +0,0 @@
-import { html, nothing } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-function download(file: { mimetype: string; name: string; fullpath: string }) {
-  const element = document.createElement('a')
-  element.setAttribute('href', file.fullpath)
-  element.setAttribute('download', file.name!)
-  document.body.appendChild(element)
-  element.click()
-}
-
-export const OxGristRendererFile: FieldRenderer = (value, column, record, rowIndex, field) => {
-  let text: string
-
-  if (!value) {
-    return html`<span>&nbsp;</span>`
-  } else if (typeof value === 'string') {
-    return html`<span>${value}</span>`
-  } else {
-    const files = value as { mimetype: string; name: string; fullpath: string }[]
-    return html`<span
-      >${files.map(
-        (file, idx) => html`
-          <a @click=${() => download(file)} file><md-icon>description</md-icon>${file.name}</a>
-          ${files.length - 1 == idx ? html`</br>` : nothing}
-        `
-      )}</span
-    >`
-  }
-}

package/src/renderers/ox-grist-renderer-image.ts

@@ -1,27 +0,0 @@
-import { FieldRenderer } from '../types'
-import { html } from 'lit'
-
-const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href
-
-export const OxGristRendererImage: FieldRenderer = (value, column, record, rowIndex, field) => {
-  let src: string
-
-  if (!value) {
-    src = IMAGE_FALLBACK
-  } else if (typeof value === 'string') {
-    src = value
-  } else {
-    src = URL.createObjectURL(value)
-    requestAnimationFrame(() => URL.revokeObjectURL(src))
-  }
-
-  const { width, height } = column.record.options || {}
-
-  return html` <img
-    src=${src}
-    width=${width}
-    height=${height}
-    style="object-fit: contain; max-width: 100%;"
-    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
-  />`
-}

package/src/renderers/ox-grist-renderer-json5.ts

@@ -1,36 +0,0 @@
-import JSON5 from 'json5'
-import { html } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-function onmouseover(e: Event) {
-  const element = e.target as HTMLPreElement
-  var parsed
-  try {
-    parsed = JSON5.parse(element.textContent!)
-  } catch {}
-
-  element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))
-
-  const rect = element.getBoundingClientRect()
-  element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)
-  element.style.setProperty('--tooltip-left', `${rect.left}px`)
-}
-
-function onmouseout(e: Event) {
-  const element = e.target as HTMLPreElement
-  element.removeAttribute('data-tooltip')
-}
-
-export const OxGristRendererJson5: FieldRenderer = (value, column, record, rowIndex, field) => {
-  var parsed: any = value
-
-  if (typeof value === 'string') {
-    try {
-      parsed = JSON5.parse(value)
-    } catch {}
-  }
-
-  const text = parsed == null ? '' : JSON5.stringify(parsed)
-  return html`<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`
-}

package/src/renderers/ox-grist-renderer-link.ts

@@ -1,17 +0,0 @@
-import { html } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-export const OxGristRendererLink: FieldRenderer = (value, column, record, rowIndex, field) => {
-  var { href, target } = column.record.options || {}
-
-  value = value == null ? '' : value
-
-  if (typeof href == 'function') {
-    href = href(value, column, record, rowIndex, field)
-  }
-
-  return target
-    ? html` <a style="text-decoration:none;color:inherit" href=${href || value} target=${target}>${value}&nbsp;</a> `
-    : html` <a style="text-decoration:none;color:inherit" href=${href || value}>${value}&nbsp;</a> `
-}

package/src/renderers/ox-grist-renderer-password.ts

@@ -1,7 +0,0 @@
-import { html } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-export const OxGristRendererPassword: FieldRenderer = (value, column, record, rowIndex, field) => {
-  return html`<span>********</span>`
-}

package/src/renderers/ox-grist-renderer-progress.ts

@@ -1,45 +0,0 @@
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxGristRenderer } from './ox-grist-renderer'
-
-@customElement('ox-grist-progress-renderer')
-export class OxGristRendererProgress extends OxGristRenderer {
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-
-      width: 100%;
-    }
-
-    #border {
-      display: block;
-      position: absolute;
-
-      height: 100%;
-      width: 100%;
-      box-sizing: border-box;
-
-      border: var(--grist-input-progress-border);
-      background-color: var(--grist-input-progress-background);
-    }
-
-    #bar {
-      background-color: var(--grist-input-progress-bar-background);
-      text-align: left;
-      color: var(--grist-input-progress-bar-color);
-    }
-  `
-
-  get rendererTemplate() {
-    var { min = 0, max = 100 } = this.column.record.options || {}
-    var value = Number(this.value)
-    var progress = isNaN(value) ? 0 : Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)))
-
-    return html`
-      <div id="border"></div>
-      <div id="bar" style="width:${progress}%">&nbsp;${progress}</div>
-    `
-  }
-}

package/src/renderers/ox-grist-renderer-select.ts

@@ -1,58 +0,0 @@
-import { html } from 'lit'
-import { until } from 'lit/directives/until.js'
-
-import { FieldRenderer, SelectOption, SelectOptionObject } from '../types'
-
-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[]
-
-  var res = selectOptionObjects
-    ? selectOptionObjects.filter((option: any) => option.value == String(value == null ? '' : value))
-    : []
-
-  if (res.length) {
-    return html`<span>${res[0].display || res[0].name || ''}</span>`
-  }
-  return html`<span>${value}</span>`
-}
-
-export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (value == null) {
-    return ''
-  }
-
-  var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]
-  var options = rowOptionField?.options ? rowOptionField.options : column.record.options
-
-  if (!options) {
-    console.error(`options value for select '${column.name}' column is mandatory.`)
-  } else if (typeof options == 'function') {
-    options = options.call(null, value, column, record, rowIndex, field)
-
-    if (options instanceof Promise) {
-      return html`${until(
-        options.then(options => buildOptions(options, value)),
-        value
-      )}`
-    } else {
-      return buildOptions((options || []) as SelectOption[], value)
-    }
-  } else {
-    return buildOptions((options || []) as SelectOption[], value)
-  }
-}

package/src/renderers/ox-grist-renderer-text.ts

@@ -1,16 +0,0 @@
-import { html } from 'lit'
-
-import { format as formatter } from '@operato/utils'
-
-import { FieldRenderer } from '../types'
-
-export const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {
-  var { format } = column.record || {}
-
-  var text = value == null ? '' : value
-  if (format) {
-    text = formatter(format, text)
-  }
-
-  return html`<span data-reactive-tooltip>${text}&nbsp;</span>`
-}

package/src/renderers/ox-grist-renderer-textarea.ts

@@ -1,7 +0,0 @@
-import { html } from 'lit'
-
-import { FieldRenderer } from '../types'
-
-export const OxGristRendererTextarea: FieldRenderer = (value, column, record, rowIndex, field) => {
-  return html`<span style="height:auto;white-space: pre-wrap;word-wrap:break-word;">${value}&nbsp;</span>`
-}