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

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}
-      @mousedown=${(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>`
-}

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

@@ -1,189 +0,0 @@
-import { PropertyValues, css, html, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { OxGristRenderer } from './ox-grist-renderer'
-
-@customElement('ox-grist-tree-renderer')
-export class OxGristRendererTree extends OxGristRenderer {
-  static styles = css`
-    :host {
-      overflow: hidden;
-    }
-
-    div[wrap] {
-      position: relative;
-
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      width: 100%;
-      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[label] {
-      flex: 1;
-    }
-
-    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);
-    }
-  `
-
-  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'
-  @state() private expanded?: boolean = false
-
-  get rendererTemplate() {
-    var { selectable = false } = this.column.record.options || {}
-    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>`}
-        ${selectable
-          ? html` <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>`
-          : nothing}
-
-        <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__))
-  }
-
-  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()
-  }
-
-  get editableOnClick() {
-    return false
-  }
-}

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

@@ -1,35 +0,0 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { customElement, property } from 'lit/decorators.js'
-
-import { DataGridField } from '../data-grid/data-grid-field'
-
-const STYLE = css``
-
-@customElement('ox-grist-renderer')
-export class OxGristRenderer 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
-
-  render() {
-    return this.rendererTemplate
-  }
-
-  async firstUpdated() {
-    const align = this.column.record.align
-    if (align) {
-      this.style.textAlign = align
-    }
-  }
-
-  get rendererTemplate() {
-    return html``
-  }
-}