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

package/src/data-card/data-card-field.ts

@@ -1,94 +0,0 @@
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
-
-@customElement('ox-card-field')
-export class DataCardField extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        position: relative;
-
-        white-space: nowrap;
-
-        font: inherit;
-      }
-
-      :host([thumbnail]) {
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      :host([thumbnail]) > * {
-        object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-      :host > * {
-        margin: var(--spacing-none);
-
-        overflow: hidden;
-
-        text-overflow: ellipsis;
-        text-align: left;
-      }
-
-      :host > *[center] {
-        flex: none;
-        margin: var(--spacing-none) auto;
-      }
-
-      :host([name]) label {
-        display: none;
-      }
-
-      label {
-        flex: none;
-        width: 33%;
-        padding-bottom: 2px;
-        font: var(--data-card-item-etc-label-font);
-        text-transform: capitalize;
-      }
-
-      :host([name]) > span,
-      label + a {
-        display: block;
-        min-width: 100%;
-      }
-
-      @media only screen and (max-width: 460px) {
-        *[center] {
-          margin: initial;
-        }
-      }
-    `
-  ]
-
-  @property({ attribute: true }) align?: string
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Object }) value?: object
-
-  render(): TemplateResult {
-    var { value, column, record, rowIndex } = this
-
-    var {
-      label,
-      record: { renderer: recordRenderer }
-    } = column
-
-    if (typeof label == 'object') {
-      let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`
-    } else {
-      return html`${recordRenderer(value, column, record, rowIndex, this)}`
-    }
-  }
-}

package/src/data-card/data-card-gutter-menu.ts

@@ -1,94 +0,0 @@
-import '@material/web/icon/icon.js'
-import './data-card-gutter.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { OxPopup } from '@operato/popup'
-
-import { ColumnConfig, GristRecord } from '../types.js'
-
-@customElement('ox-card-gutter-menu')
-class DataCardGutterMenu extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-    }
-
-    ::slotted(ox-popup) {
-      padding: var(--spacing-small);
-    }
-
-    md-icon {
-      flex: 1;
-      margin: var(--spacing-none);
-      border: var(--data-card-item-btn-border);
-      border-radius: var(--data-card-item-btn-border-radius);
-      padding: var(--data-card-item-btn-padding);
-      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-      background-color: transparent;
-      color: var(--grid-record-color);
-    }
-
-    md-icon:hover {
-      cursor: pointer;
-      background-color: var(--md-sys-color-primary);
-      color: var(--md-sys-color-on-primary);
-    }
-  `
-
-  @property({ type: Object }) gutters!: ColumnConfig[]
-  @property({ type: Number }) rowIndex!: number
-  @property({ type: Object }) record!: GristRecord
-  @property() clickHandler!: EventListener
-  @property() dblclickHandler!: EventListener
-
-  @query('md-icon') icon!: Element
-
-  render() {
-    return html`
-      <md-icon @click=${(e: Event) => this.open(e)}>more_horiz</md-icon>
-      <slot></slot>
-    `
-  }
-
-  menuRender() {
-    return html`
-      ${this.gutters.map(
-        gutter => html`
-          <ox-card-gutter
-            .rowIndex=${this.rowIndex}
-            .column=${gutter}
-            .record=${this.record}
-            .value=${this.record[gutter.name]}
-            menu
-            alive-on-select
-            @click=${(e: Event) => {
-              this.clickHandler(e)
-              // TODO close popup
-            }}
-            @dblclick=${(e: Event) => {
-              this.dblclickHandler(e)
-              // TODO close popup
-            }}
-          ></ox-card-gutter>
-        `
-      )}
-    `
-  }
-
-  open(e: Event) {
-    e.stopPropagation()
-
-    const bottom = (this.icon as HTMLElement).offsetHeight
-    const left = -4
-    const parent = this
-
-    OxPopup.open({
-      template: this.menuRender(),
-      bottom,
-      left,
-      parent
-    })
-  }
-}

package/src/data-card/data-card-gutter.ts

@@ -1,103 +0,0 @@
-import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
-
-@customElement('ox-card-gutter')
-export class DataCardGutter extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        background-color: transparent;
-        align-content: center;
-        align-items: center;
-        text-overflow: ellipsis;
-      }
-
-      :host([row-selector]) {
-        margin-right: auto;
-      }
-
-      * {
-        border: 0;
-        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
-        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
-
-        color: var(--md-sys-color-on-primary);
-        background-color: var(--md-sys-color-primary);
-        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));
-
-        padding: var(--spacing-small);
-      }
-
-      *:hover {
-        cursor: pointer;
-        color: var(--md-sys-color-on-secondary);
-        background-color: var(--md-sys-color-secondary);
-      }
-
-      :host([danger]) button {
-        color: var(--md-sys-color-on-error);
-        background-color: var(--md-sys-color-error);
-        border-color: var(--md-sys-color-error);
-      }
-
-      :host([danger]) button:hover {
-        color: var(--md-sys-color-error);
-        background-color: var(--md-sys-color-on-secondary);
-        border-color: var(--md-sys-color-on-secondary);
-      }
-
-      button {
-        display: flex;
-        gap: var(--spacing-small);
-        border: 0;
-        align-items: center;
-      }
-
-      button md-icon {
-        border: 0;
-        padding: 0;
-        background-color: unset;
-      }
-    `
-  ]
-
-  @property({ attribute: true }) align?: string
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Number }) rowIndex: number = -1
-  @property({ type: Object }) value?: object
-
-  render(): TemplateResult {
-    if (!this.column) {
-      return html``
-    }
-
-    var { value, column, record, rowIndex } = this
-    var { renderer } = column.record
-
-    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */
-    return html` ${renderer(value, column, record, rowIndex, this)} `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('column')) {
-      const { gutterName, danger } = this.column
-
-      if (gutterName == 'row-selector') {
-        this.setAttribute('row-selector', '')
-      } else {
-        this.removeAttribute('row-selector')
-      }
-
-      if (danger) {
-        this.setAttribute('danger', '')
-      } else {
-        this.removeAttribute('danger')
-      }
-    }
-  }
-}

package/src/data-card/data-card.ts

@@ -1,154 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../empty-note'
-import './record-card'
-
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { DataManipulator } from '../data-manipulator'
-import { GristRecord } from '../types'
-
-@customElement('ox-card')
-export class DataCard extends DataManipulator {
-  static styles = [
-    css`
-      :host {
-        overflow-y: auto;
-        padding: var(--spacing-medium);
-
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        grid-template-rows: min-content;
-        grid-gap: var(--spacing-large);
-      }
-
-      [selected-row] {
-        background-color: var(--grid-record-selected-background-color);
-      }
-
-      #upward {
-        --md-icon-size: var(--icon-size-large);
-        position: absolute;
-        top: var(--data-card-fab-position-vertical);
-        right: var(--data-card-fab-position-horizontal);
-        background-color: rgba(255, 255, 255, 0.7);
-        border-radius: var(--md-sys-shape-corner-large);
-        color: var(--data-card-fab-color);
-        box-shadow: var(--data-card-fab-shadow);
-        padding: var(--spacing-small);
-      }
-
-      slot {
-        width: 100%;
-      }
-
-      ox-empty-note {
-        display: block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      [card][emphasized-row],
-      [card][emphasized-row][focused] {
-        background-color: var(--grid-record-emphasized-background-color);
-        color: var(--grid-record-emphasized-color);
-      }
-
-      @media screen and (max-width: 460px) {
-        #setting {
-          grid-template-columns: 1fr;
-          grid-template-rows: 1fr 1fr;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) empty?: boolean
-
-  @state() private _records: GristRecord[] = []
-  @state() private isTop: boolean = false
-
-  private _total: number = 0
-  private _limit: number = 20
-  private _page: number = 1
-
-  firstUpdated(changes: PropertyValues<this>) {
-    this.isTop = true
-
-    /* infinite scrolling */
-    this.addEventListener('scroll', e => {
-      const totalScrollHeight = this.scrollHeight
-      const screenHeight = this.offsetHeight
-      const currentScrollTop = this.scrollTop
-
-      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {
-        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */
-        var lastPage = Math.ceil(this._total / this._limit)
-
-        if (this._page < lastPage) {
-          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))
-        }
-      }
-
-      this.isTop = this.scrollTop == 0
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('config')) {
-      this._records = []
-      this._page = 1
-    }
-
-    if (changes.has('data')) {
-      this._records = this.data.records
-      this._total = this.data.total || 0
-      this._limit = this.data.limit || 20
-      this._page = this.data.page || 0
-    }
-  }
-
-  render() {
-    var { classifier } = this.config.rows
-    var records = this._records || []
-
-    if (this.config && this.config.rows.appendable) {
-      records = [...records, { __dirty__: '+' }]
-    }
-
-    return html`
-      ${records.map((record, rowIndex) => {
-        var { emphasized } = classifier.call(null, record, rowIndex) || {}
-
-        return html`
-          <ox-record-card
-            .config=${this.config}
-            .data=${this.data}
-            .record=${record}
-            .rowIndex=${rowIndex}
-            .emphasized=${emphasized}
-            ?selected-row=${record['__selected__']}
-            ?dirty=${record['__dirty__']}
-            card
-          ></ox-record-card>
-        `
-      })}
-      ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
-      ${this.isTop
-        ? html``
-        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
-    `
-  }
-
-  gotoTop(e: Event) {
-    this.scrollTop = 0
-
-    e.stopPropagation()
-  }
-
-  get pullToRefreshTarget() {
-    return this
-  }
-}

package/src/data-card/event-handlers/record-card-click-handler.ts

@@ -1,34 +0,0 @@
-import { DataCardField } from '../data-card-field'
-import { DataCardGutter } from '../data-card-gutter'
-import { RecordCard } from '../record-card'
-
-/**
- * ox-record-card 의 click handler
- *
- * - handler의 this 는 ox-record-card임.
- */
-export function recordCardClickHandler(this: RecordCard, e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-  var target = (e.target as Element).closest('ox-card-field, ox-card-gutter') as DataCardField | DataCardGutter
-  var { column, rowIndex } = target || {}
-
-  /* do column click handler */
-  if (column) {
-    var { click } = column.handlers
-    if (click) {
-      click(this.config.columns, this.data, column, this.record, rowIndex, target)
-      return
-    }
-  }
-
-  /* do rows click handler */
-  var { click: rowsClick } = this.config.rows.handlers
-  if (rowsClick) {
-    rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)
-  } else {
-    /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
-    this.config.rows.editable && this.popupRecordView()
-  }
-}

package/src/data-card/event-handlers/record-card-dblclick-handler.ts

@@ -1,34 +0,0 @@
-import { DataCardField } from '../data-card-field'
-import { DataCardGutter } from '../data-card-gutter'
-import { RecordCard } from '../record-card'
-
-/**
- * ox-record-card 의 dblclick handler
- *
- * - handler의 this 는 ox-record-card임.
- */
-export function recordCardDblClickHandler(this: RecordCard, e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
-  var target = (e.target as Element).closest('ox-card-field, ox-card-gutter') as DataCardField | DataCardGutter
-
-  var { column, record, rowIndex } = target || {}
-
-  if (column && column.type == 'gutter') {
-    /*
-     * Gutter가 클릭된 경우
-     * TODO ox-record-card의 dblclick handling의 성능을 확인하고,
-     * gutter에 dblclick를 적용할 수 있는 지 확인한 후에 활성화하자.
-     */
-    /* do column click handler */
-    // var { dblclick } = column.handlers
-    // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
-    // return
-  } else {
-    var { dblclick: rowsDblClick } = this.config.rows.handlers
-    if (rowsDblClick) {
-      rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target)
-    }
-  }
-}