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

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

@@ -1,289 +0,0 @@
-import '@material/web/icon/icon.js'
-import './record-view'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxPopup } from '@operato/popup'
-
-import { DataGrist } from '../data-grist'
-import { ColumnConfig, GristRecord, ValidationReason } from '../types'
-import { RecordView } from './record-view'
-
-@customElement('ox-record-creator')
-export class OxRecordCreator extends LitElement {
-  static styles = [
-    css`
-      ::slotted([slot='popup']) {
-        display: none;
-      }
-    `
-  ]
-
-  @state() grist?: DataGrist
-
-  @property({ type: Object }) callback?: (record: GristRecord) => boolean
-  @property({ type: Object }) customPopupCallback?: (popup: any) => boolean
-  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
-  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false
-
-  constructor() {
-    super()
-
-    this.addEventListener('click', (e: Event) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      if (this.lightPopup) {
-        this.openLightPopup()
-      } else {
-        this.openPopup()
-      }
-    })
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.grist = this.closest('ox-grist') as DataGrist
-  }
-
-  render() {
-    return html`
-      <slot></slot>
-      <slot name="popup"></slot>
-    `
-  }
-
-  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {
-    const columns = this.grist!.compiledConfig.columns
-    const invalidFields: { field: string; reason: ValidationReason }[] = []
-
-    columns
-      .filter(column => !column.hidden)
-      .forEach(column => {
-        if (
-          column.record?.mandatory &&
-          (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')
-        ) {
-          invalidFields.push({
-            field: column.name,
-            reason: ValidationReason.MANDATORY
-          })
-        }
-      })
-
-    return invalidFields
-  }
-
-  openLightPopup() {
-    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
-    const slottedElements = slot?.assignedElements({ flatten: true })
-    const originalContent = slottedElements?.[0] as HTMLElement
-
-    if (originalContent) {
-      this.lightPopupCustomCreator(originalContent)
-    } else {
-      this.lightPopupRecordView()
-    }
-  }
-
-  openPopup() {
-    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
-    const slottedElements = slot?.assignedElements({ flatten: true })
-    const originalContent = slottedElements?.[0] as HTMLElement
-
-    if (originalContent) {
-      this.popupCustomCreator(originalContent)
-    } else {
-      this.popupRecordView()
-    }
-  }
-
-  lightPopupRecordView() {
-    const config = this.grist!.compiledConfig
-    var title = 'create'
-    const rowIndex = -1
-    var record: GristRecord = {}
-    const columns = config.columns
-
-    var popup = OxPopup.open({
-      template: html`
-        <div title>${title}</div>
-        <ox-record-view
-          @field-change=${(e: CustomEvent) => {
-            const view = e.currentTarget as RecordView
-
-            var { after, before, column, record, row } = (e as CustomEvent).detail as {
-              after: any
-              before: any
-              column: ColumnConfig
-              record: GristRecord
-              row: number
-            }
-
-            var validation = column.validation
-            if (validation && typeof validation == 'function') {
-              if (!validation.call(this, after, before, record, column)) {
-                return
-              }
-            }
-
-            view.record = {
-              ...record,
-              [column.name]: after
-            }
-          }}
-          .columns=${columns}
-          .record=${record}
-          .rowIndex=${rowIndex}
-          @reset=${(e: Event) => {
-            const view = e.currentTarget as RecordView
-            view.record = {}
-          }}
-          @cancel=${(e: Event) => {
-            popup.close()
-          }}
-          @ok=${async (e: Event) => {
-            const view = e.currentTarget as RecordView
-
-            const invalidFields = await this.validateRecord(view.record)
-            if (invalidFields.length > 0) {
-              view.setFocusOnInvalid(invalidFields)
-              return false
-            }
-
-            popup.close()
-
-            this.dispatchEvent(
-              new CustomEvent('ok', {
-                bubbles: true,
-                composed: true,
-                detail: view.record
-              })
-            )
-          }}
-        ></ox-record-view>
-      `,
-      parent: document.body,
-      preventCloseOnBlur: this.preventCloseOnBlur
-    })
-  }
-
-  popupRecordView() {
-    const config = this.grist!.compiledConfig
-    const rowIndex = -1
-    var record: GristRecord = {}
-    const columns = config.columns
-
-    var title = 'create'
-
-    var recordView = document.createElement('ox-record-view') as RecordView
-
-    recordView.columns = columns
-    recordView.record = record
-    recordView.rowIndex = rowIndex
-
-    document.dispatchEvent(
-      new CustomEvent('open-popup', {
-        detail: {
-          template: recordView,
-          options: {
-            backdrop: true,
-            size: 'large',
-            title
-          },
-          callback: (popup: any) => {
-            recordView.addEventListener('reset', (e: Event) => {
-              const view = e.currentTarget as RecordView
-              view.record = {}
-            })
-
-            recordView.addEventListener('cancel', (e: Event) => {
-              popup.close()
-            })
-
-            recordView.addEventListener('ok', async (e: Event) => {
-              const view = e.currentTarget as RecordView
-
-              const invalidFields = await this.validateRecord(view.record)
-              if (invalidFields.length > 0) {
-                view.setFocusOnInvalid(invalidFields)
-                return false
-              }
-
-              if (await this.callback?.(view.record)) {
-                popup.close()
-              } else {
-                console.error('validation failed')
-              }
-            })
-
-            recordView.addEventListener('field-change', async (e: Event) => {
-              const view = e.currentTarget as RecordView
-
-              var { after, before, column, record, row } = (e as CustomEvent).detail as {
-                after: any
-                before: any
-                column: ColumnConfig
-                record: GristRecord
-                row: number
-              }
-
-              var validation = column.validation
-              if (validation && typeof validation == 'function') {
-                if (!(await validation.call(this, after, before, record, column))) {
-                  return
-                }
-              }
-
-              view.record = {
-                ...record,
-                [column.name]: after
-              }
-            })
-
-            popup.onclosed = () => {}
-          }
-        }
-      })
-    )
-  }
-
-  lightPopupCustomCreator(originalContent: HTMLElement) {
-    const title = 'create'
-    const popupContent = originalContent.cloneNode(true) as HTMLElement
-    popupContent.removeAttribute('slot')
-
-    OxPopup.open({
-      template: html`
-        <div title>${title}</div>
-        ${popupContent}
-      `,
-      parent: document.body,
-      preventCloseOnBlur: this.preventCloseOnBlur
-    })
-
-    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행
-  }
-
-  popupCustomCreator(originalContent: HTMLElement) {
-    const title = 'create'
-    const popupContent = originalContent.cloneNode(true) as HTMLElement
-    popupContent.removeAttribute('slot')
-
-    document.dispatchEvent(
-      new CustomEvent('open-popup', {
-        detail: {
-          template: popupContent,
-          options: {
-            backdrop: true,
-            size: 'large',
-            title
-          },
-          callback: this.customPopupCallback
-        }
-      })
-    )
-  }
-}

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

@@ -1,257 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../data-grid/data-grid-field'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord, ValidationReason } from '../types'
-import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'
-import i18next from 'i18next'
-
-@customElement('ox-record-view-body')
-export class RecordViewBody extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-      }
-
-      :host > * {
-        align-self: stretch;
-      }
-
-      div[content] {
-        align-self: center;
-
-        display: grid;
-        grid-template-columns: 2fr 3fr 2fr 3fr;
-        grid-auto-rows: min-content;
-        grid-gap: var(--spacing-large) 0;
-
-        padding: var(--spacing-large) var(--spacing-huge);
-        font-size: 16px; /* for ios safari */
-        flex: 1;
-        width: 100%;
-        max-width: 1300px;
-        box-sizing: border-box;
-      }
-
-      label {
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-transform: capitalize;
-        padding: var(--record-view-item-padding);
-        font: var(--record-view-label-font);
-        color: var(--record-view-label-color);
-        text-align: right;
-        padding-right: var(--spacing-large);
-      }
-
-      label[wide] {
-        grid-column: 1 / 2;
-      }
-
-      label md-icon {
-        display: none;
-      }
-
-      label > span {
-        margin-left: auto;
-      }
-
-      label[editable] md-icon {
-        display: inline-block;
-        font-size: var(--record-view-label-icon-size);
-        opacity: 0.5;
-      }
-
-      ox-grid-field {
-        background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));
-        border: var(--record-view-grid-field-border);
-        border-radius: var(--md-sys-shape-corner-small);
-        padding: var(--spacing-tiny) var(--spacing-small);
-
-        font: var(--record-view-font);
-        color: var(--record-view-color);
-
-        max-width: 360px;
-      }
-
-      ox-grid-field[editing='true'] {
-        border: var(--record-view-edit-border);
-      }
-
-      ox-grid-field[wide] {
-        grid-column: 2 / 5;
-        width: 100%;
-        max-width: 986px;
-      }
-
-      :first-child + ox-grid-field {
-        color: var(--record-view-focus-color);
-        font-weight: bold;
-      }
-
-      .highlight-invalid {
-        position: relative;
-        padding: var(--spacing-tiny) var(--spacing-small);
-      }
-
-      .highlight-invalid::after {
-        content: attr(data-reason); /* 콘텐츠를 동적으로 변경하기 위해 data-reason 속성을 사용 */
-        color: red;
-        font-size: 12px;
-        position: absolute;
-        left: 0;
-        bottom: -8px; /* 라벨 아래쪽에 메시지를 표시 */
-      }
-
-      @media only screen and (max-width: 1000px) {
-        div[content] {
-          grid-template-columns: 2fr 3fr;
-          padding: var(--spacing-medium);
-        }
-
-        label[wide] {
-          grid-column: 1 / 2;
-        }
-
-        ox-grid-field[wide] {
-          grid-column: 2 / 3;
-          width: 100%;
-          max-width: 360px;
-        }
-      }
-
-      @media only screen and (max-width: 600px) {
-        div[content] {
-          grid-template-columns: 2fr 3fr;
-          padding: var(--spacing-medium);
-        }
-
-        label[wide] {
-          grid-column: 1 / 2;
-        }
-
-        ox-grid-field[wide] {
-          grid-column: 1 / 3;
-          width: 100%;
-          max-width: unset;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) columns: ColumnConfig[] = []
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Number }) rowIndex: number = -1
-
-  public currentTarget: any
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.setAttribute('tabindex', '0')
-
-    this.addEventListener('keydown', this._onKeyDown)
-    this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener('keydown', this._onKeyDown)
-  }
-
-  setFocus(fieldElement: HTMLElement) {
-    fieldElement?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
-  }
-
-  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
-    const allLabels = this.renderRoot.querySelectorAll('label')
-    allLabels.forEach((label: HTMLLabelElement) => {
-      label.classList.remove('highlight-invalid')
-      label.removeAttribute('data-reason')
-    })
-
-    // 유효성 검사를 통과하지 못한 필드에 대해 처리
-    invalidFields.forEach(({ field, reason }, index) => {
-      const labelElement = this.renderRoot.querySelector(`[data-name="${field}"]`) as HTMLLabelElement
-      const fieldElement = this.renderRoot.querySelector(`[data-name="${field}"] + ox-grid-field`) as HTMLInputElement
-
-      // 동적으로 data-reason 속성을 설정하여 메시지를 변경
-      if (labelElement) {
-        labelElement.classList.add('highlight-invalid')
-        labelElement.setAttribute('data-reason', '(' + i18next.t(`text.validation-reason.${reason}`) + ')')
-      }
-
-      // 첫 번째 필드에 포커스 설정
-      if (index === 0 && fieldElement) {
-        this.setFocus(fieldElement)
-      }
-    })
-  }
-
-  _onKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Tab') {
-      const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))
-      const focused = this.renderRoot.querySelector('ox-grid-field[editing]')
-      const focusedIndex = fields.findIndex(field => field === focused)
-
-      let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)
-
-      if (nextIndex >= fields.length || nextIndex < 0) {
-        return // Let the default behavior happen if it's the last or first element
-      }
-
-      event.preventDefault()
-      const nextField = fields[nextIndex] as HTMLInputElement
-      nextField && this.setFocus(nextField)
-    }
-  }
-
-  render() {
-    var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')
-    var record = this.record
-    var rowIndex = this.rowIndex
-
-    return html`
-      <div content>
-        ${columns.map((column, index) => {
-          let { editable, mandatory, wide } = column.record
-          if (typeof editable === 'function') {
-            editable = editable.call(this, record[column.name], column, record, rowIndex, this)
-          }
-
-          let dirtyFields = record['__dirtyfields__'] || {}
-
-          return html`
-            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>
-              <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
-              <md-icon>edit</md-icon>
-            </label>
-            <ox-grid-field
-              .rowIndex=${rowIndex}
-              .column=${column}
-              .record=${record}
-              .value=${record[column.name]}
-              ?dirty=${!!dirtyFields[column.name]}
-              ?tabstop=${!!editable}
-              ?wide=${wide}
-            ></ox-grid-field>
-          `
-        })}
-      </div>
-    `
-  }
-
-  _renderLabel(column: ColumnConfig) {
-    var { renderer } = column.header
-    var title = renderer.call(this, column)
-
-    return html` ${title} `
-  }
-}

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

@@ -1,86 +0,0 @@
-import { RecordCard } from '../data-card/record-card'
-import { DataGridBody } from '../data-grid/data-grid-body'
-import { DataGridField } from '../data-grid/data-grid-field'
-import { RecordPartial } from '../data-list/record-partial'
-import { RecordView } from '../record-view/record-view'
-import { ColumnConfig, GristRecord } from '../types'
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-
-export const RecordViewHandler = function (
-  columns: ColumnConfig[],
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField | RecordCard | RecordPartial | DataGridBody,
-  popupOptions: { [key: string]: any },
-  closeCallback?: () => void
-): RecordView {
-  var recordView = document.createElement('ox-record-view') as RecordView
-
-  recordView.columns = columns
-  recordView.record = record
-  recordView.rowIndex = rowIndex
-
-  document.dispatchEvent(
-    new CustomEvent('open-popup', {
-      detail: {
-        template: recordView,
-        options: {
-          backdrop: true,
-          size: 'large',
-          title: record['name'],
-          ...popupOptions
-        },
-        callback: (popup: any) => {
-          recordView.addEventListener('field-change', (e: Event) => {
-            field.dispatchEvent(
-              new CustomEvent('field-change', {
-                bubbles: true,
-                composed: true,
-                detail: (e as any).detail
-              })
-            )
-          })
-
-          recordView.addEventListener('reset', (e: Event) => {
-            field.dispatchEvent(
-              new CustomEvent('record-reset', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  record: record,
-                  row: rowIndex
-                }
-              })
-            )
-          })
-
-          recordView.addEventListener('cancel', (e: Event) => {
-            field.dispatchEvent(
-              new CustomEvent('record-reset', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  record: record,
-                  row: rowIndex
-                }
-              })
-            )
-            popup.close()
-          })
-
-          recordView.addEventListener('ok', (e: Event) => {
-            popup.close()
-          })
-
-          popup.onclosed = closeCallback
-        }
-      }
-    } as any)
-  )
-
-  return recordView
-}