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

package/src/filters/registry.ts

@@ -1,56 +0,0 @@
-import { FilterSelectRenderer } from '../types.js'
-import { FilterCheckbox } from './filter-checkbox.js'
-import { FilterInputBarcode } from './filter-input-barcode.js'
-import { FilterInput } from './filter-input.js'
-import { FilterRangeDate } from './filter-range-date.js'
-import { FilterRangeNumber } from './filter-range-number.js'
-import { FilterSelectButtons } from './filter-select-buttons.js'
-import { FilterSelect } from './filter-select.js'
-
-var RENDERERS: {
-  [name: string]: FilterSelectRenderer[]
-} = {
-  string: [FilterInput],
-  text: [FilterInput],
-  email: [FilterInput],
-  tel: [FilterInput],
-  integer: [FilterInput, FilterRangeNumber],
-  float: [FilterInput, FilterRangeNumber],
-  number: [FilterInput, FilterRangeNumber],
-  select: [FilterSelect],
-  'select-buttons': [FilterSelectButtons],
-  boolean: [FilterCheckbox],
-  checkbox: [FilterCheckbox],
-  month: [FilterInput, FilterRangeDate],
-  week: [FilterInput, FilterRangeDate],
-  date: [FilterInput, FilterRangeDate],
-  time: [FilterInput, FilterRangeDate],
-  datetime: [FilterInput, FilterRangeDate],
-  color: [FilterInput],
-  progress: [FilterInput, FilterRangeNumber],
-  link: [FilterInput],
-  image: [FilterInput],
-  json5: [FilterInput],
-  scanner: [FilterInputBarcode],
-  barcode: [FilterInputBarcode]
-}
-
-export function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {
-  RENDERERS[type] = renderer
-}
-
-export function unregisterFilterRenderer(type: string): void {
-  delete RENDERERS[type]
-}
-
-export function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] } {
-  return { ...RENDERERS }
-}
-
-export function getFilterRenderer(type: string): FilterSelectRenderer[] {
-  if (typeof type === 'function') {
-    return type
-  }
-
-  return RENDERERS[type || 'text'] || [FilterInput]
-}

package/src/formatters/date-formatter.ts

@@ -1,3 +0,0 @@
-export const DateFormatter = (value: any): string => {
-  return ''
-}

package/src/formatters/index.ts

@@ -1 +0,0 @@
-export * from './registry'

package/src/formatters/number-formatter.ts

@@ -1,3 +0,0 @@
-export const NumberFormatter = (value: any): string => {
-  return ''
-}

package/src/formatters/registry.ts

@@ -1,30 +0,0 @@
-import { NOOP } from '../const'
-import { DateFormatter } from './date-formatter'
-import { NumberFormatter } from './number-formatter'
-import { TextFormatter } from './text-formatter'
-
-var FORMATTERS: { [name: string]: (value: any) => string } = {
-  number: NumberFormatter,
-  date: DateFormatter,
-  text: TextFormatter
-}
-
-export function registerFormatter(type: string, formatter: (value: any) => string) {
-  FORMATTERS[type] = formatter
-}
-
-export function unregisterFormatter(type: string) {
-  delete FORMATTERS[type]
-}
-
-export function getFormatters() {
-  return { ...FORMATTERS }
-}
-
-export function getFormatter(type: string) {
-  if (typeof type == 'function') {
-    return type
-  }
-
-  return FORMATTERS[type] || NOOP
-}

package/src/formatters/text-formatter.ts

@@ -1,3 +0,0 @@
-export const TextFormatter = (value: any): string => {
-  return ''
-}

package/src/gutters/gutter-button.ts

@@ -1,51 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, nothing } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { ColumnConfig, FieldRenderer, GristRecord, HeaderRenderer } from '../types'
-
-export class GutterButton {
-  static instance(config: Partial<ColumnConfig> = { type: 'gutter', gutterName: 'button' }) {
-    var { icon = 'edit', title, iconOnly = true } = config
-
-    var iconFn = typeof icon == 'function' ? icon : (record?: GristRecord) => icon
-    var titleFn = typeof title == 'function' ? title : (record?: GristRecord) => title
-
-    return Object.assign(
-      {},
-      {
-        type: 'gutter',
-        gutterName: 'button',
-        width: 26,
-        resizable: false,
-        sortable: false,
-        header: {
-          renderer: function (column) {
-            const title = titleFn()
-            const icon = iconFn()
-
-            return iconOnly ? html` <md-icon title=${ifDefined(title)}>${icon}</md-icon> ` : title
-          } as HeaderRenderer
-        },
-        record: {
-          align: 'center',
-          renderer: function (value, column, record, rowIndex, field) {
-            const title = titleFn(record)
-            const icon = iconFn(record)
-
-            return iconOnly
-              ? html` <md-icon title=${ifDefined(title && titleFn(record))}>${iconFn(record)}</md-icon> `
-              : title || icon
-                ? html`<button><md-icon>${iconFn(record)}</md-icon>${titleFn(record)}</button>`
-                : nothing
-          } as FieldRenderer
-        },
-        forGrid: true,
-        forList: true,
-        forCard: true
-      },
-      config
-    )
-  }
-}

package/src/gutters/gutter-dirty.ts

@@ -1,96 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ColumnConfig, FieldRenderer, GristEventHandler } from '../types'
-
-@customElement('ox-gutter-dirty-element')
-class GutterDirtyElement extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      margin: auto;
-    }
-
-    md-icon {
-      width: var(--grid-record-dirty-icon-size);
-      height: var(--grid-record-dirty-icon-size);
-      border-radius: 50%;
-      opacity: 0.8;
-    }
-
-    [add] {
-      background-color: var(--md-sys-color-on-primary-container);
-    }
-
-    [remove] {
-      background-color: var(--md-sys-color-error);
-    }
-
-    [done] {
-      background-color: var(--status-info-color);
-    }
-  `
-
-  @property({ type: String }) value?: string
-
-  render() {
-    switch (this.value) {
-      case '+':
-        return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `
-      case '-':
-        return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `
-      case 'M':
-        return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `
-      default:
-        return ''
-    }
-  }
-}
-
-const INLINESTYLE =
-  'font-size: var(--grid-record-fontsize); vertical-align: middle; color: var(--grid-record-dirty-color)'
-
-export class GutterDirty {
-  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__dirty__' }) {
-    return Object.assign(
-      {},
-      {
-        type: 'gutter',
-        name: '__dirty__',
-        gutterName: 'dirty',
-        width: 30,
-        resizable: false,
-        sortable: false,
-        header: '',
-        record: {
-          align: 'center',
-          renderer: function (value, column, record, rowIndex, field) {
-            return value ? html` <ox-gutter-dirty-element value=${value}></ox-gutter-dirty-element> ` : html``
-          } as FieldRenderer
-        },
-        forGrid: true,
-        forList: false,
-        forCard: false,
-        handlers: {
-          dblclick: ((columns, data, column, record, rowIndex, target) => {
-            target.dispatchEvent(
-              new CustomEvent('set-select-block', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  startRow: rowIndex,
-                  startColumn: 0,
-                  endRow: rowIndex,
-                  endColumn: -1
-                }
-              })
-            )
-          }) as GristEventHandler
-        }
-      },
-      config
-    )
-  }
-}

package/src/gutters/gutter-row-selector.ts

@@ -1,89 +0,0 @@
-import { html } from 'lit'
-
-import { DataCard } from '../data-card/data-card'
-import { DataGrid } from '../data-grid/data-grid'
-import { DataList } from '../data-list/data-list'
-import { ColumnConfig, FieldRenderer, HeaderRenderer } from '../types'
-
-export class GutterRowSelector {
-  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__selected__' }) {
-    return Object.assign(
-      {},
-      {
-        type: 'gutter',
-        name: '__selected__',
-        gutterName: 'row-selector',
-        width: 30,
-        resizable: false,
-        sortable: false,
-        header: {
-          renderer: function (this: DataGrid | DataList | DataCard, column) {
-            var checked = ((this.data || {}).records || []).find(record => record['__selected__'])
-
-            return html`
-              <input
-                type="checkbox"
-                .checked=${!!checked}
-                @change=${(e: Event) => {
-                  let selected = column.multiple ? (e.target as HTMLInputElement).checked : false
-
-                  this.dispatchEvent(
-                    new CustomEvent('select-all-change', {
-                      bubbles: true,
-                      composed: true,
-                      detail: {
-                        selected
-                      }
-                    })
-                  )
-
-                  e.stopPropagation()
-                }}
-              />
-            `
-          } as HeaderRenderer
-        },
-        record: {
-          align: 'center',
-          renderer: function (value, column, record, rowIndex, field) {
-            return html`
-              <input
-                type=${column.multiple ? 'checkbox' : 'radio'}
-                .checked=${!!value}
-                @click=${(e: Event) => {
-                  e.stopPropagation()
-                }}
-                @change=${(e: Event) => {
-                  let selected = (e.target as HTMLInputElement).checked
-
-                  let detail = column.multiple
-                    ? {
-                        added: selected ? [record] : [],
-                        removed: selected ? [] : [record]
-                      }
-                    : {
-                        records: selected ? [record] : []
-                      }
-
-                  field.dispatchEvent(
-                    new CustomEvent('select-record-change', {
-                      bubbles: true,
-                      composed: true,
-                      detail
-                    })
-                  )
-
-                  e.stopPropagation()
-                }}
-              />
-            `
-          } as FieldRenderer
-        },
-        forGrid: true,
-        forList: true,
-        forCard: true
-      },
-      config
-    )
-  }
-}

package/src/gutters/gutter-sequence.ts

@@ -1,54 +0,0 @@
-import { DataCard } from '../data-card/data-card'
-import { DataGrid } from '../data-grid/data-grid'
-import { DataList } from '../data-list/data-list'
-import { ColumnConfig, ColumnWidthCallback, FieldRenderer, GristEventHandler } from '../types'
-
-export class GutterSequence {
-  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__seq__' }) {
-    return {
-      type: 'gutter',
-      name: '__seq__',
-      getterType: 'sequence',
-      width: function (this: DataGrid | DataList | DataCard, column): string {
-        if (this.data) {
-          var { limit = 0, page = 1, records = [] } = this.data || {}
-          var lastIndex = (page - 1) * limit + records.length
-        } else {
-          var lastIndex = 100
-        }
-
-        /* 1ch의 폭은 해당 폰트 0의 폭을 의미함. Arial이 약 8px이며, 정수로 떨어지지 않을 수 있으므로, 다소 여유있게 10px을 기준으로 함. */
-        return `${Math.max(String(lastIndex).length * 10, 20)}px`
-      } as ColumnWidthCallback,
-      resizable: false,
-      sortable: false,
-      header: '#',
-      record: {
-        renderer: function (value, column, record, rowIndex, field) {
-          return value
-        } as FieldRenderer,
-        align: 'right'
-      },
-      forGrid: true,
-      forList: false,
-      forCard: false,
-      handlers: {
-        dblclick: ((columns, data, column, record, rowIndex, target) => {
-          target.dispatchEvent(
-            new CustomEvent('set-select-block', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                startRow: rowIndex,
-                startColumn: 0,
-                endRow: rowIndex,
-                endColumn: -1
-              }
-            })
-          )
-        }) as GristEventHandler
-      },
-      ...config
-    }
-  }
-}

package/src/gutters/index.ts

@@ -1 +0,0 @@
-export * from './registry'

package/src/gutters/registry.ts

@@ -1,32 +0,0 @@
-import { ColumnConfig } from '../types'
-import { GutterButton } from './gutter-button'
-import { GutterDirty } from './gutter-dirty'
-import { GutterRowSelector } from './gutter-row-selector'
-import { GutterSequence } from './gutter-sequence'
-
-var GUTTERS: { [name: string]: any } = {
-  sequence: GutterSequence,
-  'row-selector': GutterRowSelector,
-  button: GutterButton,
-  dirty: GutterDirty
-}
-
-export function registerGutter(name: string, gutter: any) {
-  GUTTERS[name] = gutter
-}
-
-export function unregisterGutter(name: string) {
-  delete GUTTERS[name]
-}
-
-export function getGutters() {
-  return { ...GUTTERS }
-}
-
-export const generateGutterColumn = (config: ColumnConfig) => {
-  var clazz = GUTTERS[config.gutterName || '']
-
-  if (clazz) {
-    return clazz.instance(config)
-  }
-}

package/src/handlers/contextmenu-tree-mutation.ts

@@ -1,80 +0,0 @@
-import { html } from 'lit'
-import { OxPopupMenu } from '@operato/popup'
-
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
-function dispatchEvent(field: DataGridField, event: string) {
-  field.dispatchEvent(
-    new CustomEvent(event, {
-      bubbles: true,
-      composed: true,
-      detail: field.record
-    })
-  )
-}
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-export const ContextMenuTreeMutation = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField,
-  event: Event
-): void {
-  const e = event as PointerEvent
-  if (!('pageX' in e && 'pageY' in e)) {
-    return
-  }
-
-  e.preventDefault()
-
-  OxPopupMenu.open({
-    template: html`
-      <ox-popup-menuitem
-        label="add sibling node"
-        @click=${() => {
-          dispatchEvent(field, 'add-sibling-node')
-        }}
-      >
-        <md-icon slot="icon">add</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="add child node"
-        @click=${() => {
-          dispatchEvent(field, 'add-child-node')
-        }}
-      >
-        <md-icon slot="icon">playlist_add</md-icon>
-      </ox-popup-menuitem>
-
-      <div separator></div>
-
-      <ox-popup-menuitem
-        label="collapse all"
-        @click=${() => {
-          dispatchEvent(field, 'collapse-all')
-        }}
-      >
-        <md-icon slot="icon">unfold_less</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="expand all"
-        @click=${() => {
-          dispatchEvent(field, 'expand-all')
-        }}
-      >
-        <md-icon slot="icon">unfold_more</md-icon>
-      </ox-popup-menuitem>
-    `,
-    top: e.pageY,
-    left: e.pageX
-  })
-}

package/src/handlers/index.ts

@@ -1 +0,0 @@
-export * from './registry'

package/src/handlers/move-down.ts

@@ -1,44 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-
-export const MoveDown = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField
-): void {
-  var moveTo = rowIndex + 1
-  var length = data.records.length
-
-  if (rowIndex >= length || moveTo < 0 || moveTo >= length) {
-    return
-  }
-
-  data.records.splice(rowIndex, 1)
-  data.records.splice(moveTo, 0, record)
-
-  field.dispatchEvent(
-    new CustomEvent('record-change', {
-      bubbles: true,
-      composed: true
-    })
-  )
-
-  field.dispatchEvent(
-    new CustomEvent('focus-change', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        row: moveTo,
-        column: column
-      }
-    })
-  )
-}

package/src/handlers/move-up.ts

@@ -1,44 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-
-export const MoveUp = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField
-): void {
-  var moveTo = rowIndex - 1
-  var length = data.records.length
-
-  if (rowIndex >= length || moveTo < 0 || moveTo >= length) {
-    return
-  }
-
-  data.records.splice(rowIndex, 1)
-  data.records.splice(moveTo, 0, record)
-
-  field.dispatchEvent(
-    new CustomEvent('record-change', {
-      bubbles: true,
-      composed: true
-    })
-  )
-
-  field.dispatchEvent(
-    new CustomEvent('focus-change', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        row: moveTo,
-        column: column
-      }
-    })
-  )
-}

package/src/handlers/record-copy.ts

@@ -1,38 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-
-export const RecordCopy = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField
-): void {
-  if (rowIndex >= data.records.length) {
-    return
-  }
-
-  var copiedRecord = {
-    __dirty__: '+'
-  } as GristRecord
-
-  columns
-    .filter(column => column.record.editable)
-    .forEach(column => {
-      copiedRecord[column.name] = record[column.name]
-    })
-
-  data.records.splice(rowIndex + 1, 0, copiedRecord)
-  field.dispatchEvent(
-    new CustomEvent('record-change', {
-      bubbles: true,
-      composed: true
-    })
-  )
-}

package/src/handlers/record-delete.ts

@@ -1,30 +0,0 @@
-import { DataGridField } from '../data-grid/data-grid-field'
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
-/*
- * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
- * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
- */
-
-export const RecordDelete = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField
-): void {
-  if (rowIndex >= data.records.length) {
-    return
-  }
-
-  record.__dirty__ = '-'
-  data.records.splice(rowIndex, 1)
-
-  field.dispatchEvent(
-    new CustomEvent('record-change', {
-      bubbles: true,
-      composed: true
-    })
-  )
-}