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

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

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

package/src/handlers/registry.ts

@@ -1,42 +0,0 @@
-import { GristEventHandler } from '../types'
-import { ContextMenuTreeMutation } from './contextmenu-tree-mutation'
-import { MoveDown } from './move-down'
-import { MoveUp } from './move-up'
-import { RecordCopy } from './record-copy'
-import { RecordDelete } from './record-delete'
-import { RecordViewHandler } from './record-view-handler'
-import { SelectRow } from './select-row'
-import { SelectRowToggle } from './select-row-toggle'
-
-var HANDLERS: {
-  [name: string]: GristEventHandler
-} = {
-  'record-view': RecordViewHandler as GristEventHandler,
-  'select-row': SelectRow as GristEventHandler,
-  'select-row-toggle': SelectRowToggle as GristEventHandler,
-  'move-up': MoveUp as GristEventHandler,
-  'move-down': MoveDown as GristEventHandler,
-  'record-copy': RecordCopy as GristEventHandler,
-  'record-delete': RecordDelete as GristEventHandler,
-  'contextmenu-tree-mutation': ContextMenuTreeMutation as GristEventHandler
-}
-
-export function registerGristEventHandler(type: string, handler: GristEventHandler) {
-  HANDLERS[type] = handler
-}
-
-export function unregisterGristEventHandler(type: string) {
-  delete HANDLERS[type]
-}
-
-export function getGristEventHandlers() {
-  return { ...HANDLERS }
-}
-
-export function getGristEventHandler(type: string | GristEventHandler): GristEventHandler {
-  if (typeof type == 'function') {
-    return type
-  }
-
-  return HANDLERS[type]
-}

package/src/handlers/select-row-toggle.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 SelectRowToggle = function (
-  columns: ColumnConfig[],
-  data: GristData,
-  column: ColumnConfig,
-  record: GristRecord,
-  rowIndex: number,
-  field: DataGridField
-): void {
-  field?.dispatchEvent(
-    new CustomEvent('select-record-change', {
-      bubbles: true,
-      composed: true,
-      detail: record['__selected__']
-        ? {
-            removed: [record]
-          }
-        : {
-            added: [record]
-          }
-    })
-  )
-}

package/src/handlers/select-row.ts

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

package/src/index.ts

@@ -1,17 +0,0 @@
-export * from './types'
-
-export * from './configure/zero-config'
-export * from './data-grist'
-export * from './data-report'
-
-export * from './editors'
-export * from './renderers'
-export * from './handlers'
-export * from './formatters'
-export * from './gutters'
-export * from './filters'
-export * from './sorters/sorters-control'
-export * from './record-view'
-export * from './personalizer'
-
-export * from './utils/list-param'

package/src/personalizer/index.ts

@@ -1 +0,0 @@
-export * from './ox-grist-personalizer'

package/src/personalizer/ox-grist-filter-personalizer.ts

@@ -1,192 +0,0 @@
-import '@material/web/button/outlined-button.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { OxPopupList } from '@operato/popup'
-
-import { FilterConfigObject, FilterPreference, PersonalGristPreference } from '../types.js'
-
-import { OxFiltersForm } from '../filters/filters-form'
-
-@customElement('ox-grist-filter-personalizer')
-export class OxGristFilterPersonalizer extends LitElement {
-  static styles = [
-    css`
-      md-icon {
-        --md-icon-size: 16px;
-        width: 36px;
-        height: 36px;
-        color: var(--md-sys-color-secondary-container);
-        cursor: pointer;
-
-        display: flex;
-        place-content: center;
-        place-items: center;
-        position: relative;
-
-        &:hover {
-          color: var(--md-sys-color-primary-container);
-        }
-      }
-
-      md-ripple {
-        border-radius: 50%;
-        inset: unset;
-        height: 36px;
-        width: 36px;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: true }) debug: boolean = false
-
-  @state() private preference?: PersonalGristPreference
-
-  render() {
-    return html`
-      <md-icon
-        @click=${async (e: MouseEvent) => {
-          const form = this.closest('ox-filters-form') as OxFiltersForm
-          const { filterColumns, personalFilters = [] } = form
-          const queryFilters = await form.getQueryFilters()
-
-          this.preference = {
-            filters: (
-              personalFilters.map((filter: FilterPreference) => {
-                const originFilterColumn =
-                  filter.name == 'search'
-                    ? { filter: { name: 'search' } }
-                    : filterColumns.find(f => f.name == filter.name)
-
-                if (!originFilterColumn) {
-                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */
-                  return
-                }
-
-                const { value } = originFilterColumn.filter! as FilterConfigObject
-
-                return {
-                  name: filter.name,
-                  hidden: filter.hidden,
-                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */
-                  value: value ?? queryFilters.find(f => f.name == filter.name)?.value
-                }
-              }) || []
-            ).filter(Boolean) as FilterPreference[]
-          }
-
-          const template = html`
-            <div class="personalizer-header" slot="header">
-              <md-icon
-                style="margin-left: auto;"
-                @click=${async (e: MouseEvent) => {
-                  if (form.personalConfigProvider) {
-                    form.personalConfig = await form.personalConfigProvider.save(this.preference)
-                  }
-                  popup.close()
-                }}
-                title=${String(i18next.t('button.save'))}
-                >keep</md-icon
-              ><md-icon
-                @click=${async (e: MouseEvent) => {
-                  if (form.personalConfigProvider) {
-                    form.personalConfig = this.preference = {}
-                    await form.personalConfigProvider.reset()
-                  }
-                  popup.close()
-                }}
-                title=${String(i18next.t('button.delete'))}
-                >keep_off</md-icon
-              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
-                >close</md-icon
-              >
-            </div>
-
-            ${this.preference?.filters!.map(
-              filter => html`
-                <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
-                  >${filter.name}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
-                    >☰</span
-                  ></ox-checkbox
-                >
-              `
-            )}
-          `
-
-          const popup = OxPopupList.open({
-            template,
-            multiple: true,
-            sortable: true,
-            debug: this.debug,
-            attrSelected: 'checked',
-            top: e.pageY,
-            left: e.pageX,
-            styles: css`
-              :host {
-                width: 240px;
-                min-height: 300px;
-                max-height: 80%;
-                overflow: auto;
-              }
-
-              ::slotted(.personalizer-header) {
-                --md-icon-size: 1.4em;
-
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                text-transform: capitalize;
-                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-              }
-
-              ::slotted([option]) {
-                position: relative;
-                user-select: none;
-              }
-            `
-          })
-
-          popup.onselect = (e: Event) => {
-            const selected = (e as CustomEvent).detail
-
-            const pconfig: PersonalGristPreference = { ...form.personalConfig }
-            const pfilters = this.preference?.filters!
-
-            pconfig.filters = pfilters.map(filter => {
-              return {
-                name: filter.name,
-                hidden: selected.indexOf(filter.name) == -1,
-                value: filter.value
-              }
-            })
-
-            form.personalConfig = this.preference = pconfig
-
-            form.applyUpdatedConfiguration()
-          }
-
-          popup.addEventListener('sorted', (e: Event) => {
-            const sorted = (e as CustomEvent).detail as HTMLElement[]
-
-            const pconfig: PersonalGristPreference = { ...form.personalConfig }
-            const pfilters = this.preference?.filters!
-
-            pconfig.filters = sorted
-              .map(element => {
-                const name = (element as HTMLInputElement).value
-                return pfilters.find(filter => filter.name == name)!
-              })
-              .filter(Boolean)
-
-            form.personalConfig = this.preference = pconfig
-
-            form.applyUpdatedConfiguration()
-          })
-        }}
-        >settings<md-ripple></md-ripple
-      ></md-icon>
-    `
-  }
-}

package/src/personalizer/ox-grist-personalizer.ts

@@ -1,226 +0,0 @@
-import '@material/web/button/outlined-button.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { OxPopupList } from '@operato/popup'
-import { OxCheckbox } from '@operato/input'
-
-import { ColumnConfig, PersonalGristPreference } from '../types'
-import { DataGrist } from '../data-grist'
-
-@customElement('ox-grist-personalizer')
-export class OxGristPersonalizer extends LitElement {
-  static styles = [
-    css`
-      md-icon {
-        --md-icon-size: 14px;
-        width: 16px;
-        height: 16px;
-        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));
-        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
-        border-radius: 0px 0px 7px 7px;
-        cursor: pointer;
-        padding-top: var(--spacing-small);
-
-        &:hover {
-          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));
-          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: true }) debug: boolean = false
-
-  @state() private preference?: PersonalGristPreference
-
-  render() {
-    return html`
-      <md-icon
-        @click=${(e: MouseEvent) => {
-          const grist = this.closest('ox-grist') as DataGrist
-
-          const { config, compiledConfig, sorters, pagination, mode } = grist
-          const { columns: compiledColumns } = compiledConfig
-
-          const columns = compiledColumns
-            .filter(ccolumn => {
-              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)
-              return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable
-            })
-            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)
-
-          this.preference = {
-            columns: columns.map(column => {
-              return {
-                name: column.name,
-                hidden: column.hidden,
-                width: column.width
-              }
-            }),
-            sorters,
-            pagination: {
-              ...pagination,
-              limit: grist.getCurrentLimit()
-            },
-            mode
-          }
-
-          const template = html`
-            <div class="personalizer-header" slot="header">
-              <div
-                style=${`
-                  display: flex;
-                  align-items: center;
-                  margin: 0 0 0 auto;
-                  min-height: 1.4em;
-                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
-                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
-                  border-radius: var(--md-sys-shape-corner-small);
-                  padding: 0 var(--spacing-small);
-                  cursor: pointer;
-                `}
-                @click=${async (e: MouseEvent) => {
-                  if (grist.personalConfigProvider) {
-                    const { mode, columns, sorters, pagination } = this.preference || {}
-                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({
-                      mode,
-                      columns,
-                      sorters,
-                      pagination
-                    })
-                  }
-                  popup.close()
-                }}
-              >
-                ${String(i18next.t('button.save'))}
-              </div>
-              <div
-                style=${`
-                  display: flex;
-                  align-items: center;
-                  margin: 0 0 0 var(--spacing-small, 4px);
-                  min-height: 1.4em;
-                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
-                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
-                  border-radius: var(--md-sys-shape-corner-small);
-                  padding: 0 var(--spacing-small);
-                  cursor: pointer;
-                `}
-                @click=${async (e: MouseEvent) => {
-                  if (grist.personalConfigProvider) {
-                    grist.personalConfig = this.preference = {}
-                    await grist.personalConfigProvider.reset()
-                  }
-                  popup.close()
-                }}
-              >
-                ${String(i18next.t('button.delete'))}
-              </div>
-              <md-icon
-                style=${`
-                  --md-icon-size: 1.2em;
-                  margin-left: var(--spacing-tiny, 2px);
-                  cursor: pointer;
-                `}
-                @click=${async (e: MouseEvent) => popup.close()}
-                title=${String(i18next.t('button.close'))}
-                >close</md-icon
-              >
-            </div>
-
-            ${columns.map(
-              column => html`
-                <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
-                  >${column.header.renderer(column)}<span
-                    style="position: absolute; right: 10px; cursor: row-resize;opacity:.5"
-                    handle
-                    >☰</span
-                  ></ox-checkbox
-                >
-              `
-            )}
-          `
-
-          const popup = OxPopupList.open({
-            template,
-            multiple: true,
-            sortable: true,
-            debug: this.debug,
-            attrSelected: 'checked',
-            top: e.pageY,
-            left: e.pageX,
-            styles: css`
-              :host {
-                width: 240px;
-                min-height: 300px;
-                max-height: 80%;
-                overflow: auto;
-              }
-
-              ::slotted(.personalizer-header) {
-                --md-icon-size: 1.4em;
-
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                text-transform: capitalize;
-                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-              }
-
-              ::slotted([option]) {
-                position: relative;
-                user-select: none;
-              }
-            `
-          })
-
-          popup.onselect = (e: Event) => {
-            const selected = (e as CustomEvent).detail
-
-            const pconfig: PersonalGristPreference = grist.personalConfig || {}
-            const pcolumns = this.preference?.columns || columns
-
-            pconfig.columns = pcolumns.map(column => {
-              return {
-                name: column.name,
-                hidden: selected.indexOf(column.name) == -1,
-                width: column.width
-              }
-            })
-
-            this.preference = pconfig
-
-            grist.personalConfig = this.preference
-
-            grist.applyUpdatedConfiguration()
-          }
-
-          popup.addEventListener('sorted', (e: Event) => {
-            const sorted = (e as CustomEvent).detail as HTMLElement[]
-
-            const pconfig: PersonalGristPreference = grist.personalConfig || {}
-
-            pconfig.columns = sorted.map(element => {
-              const name = (element as OxCheckbox).value
-              return {
-                name,
-                hidden: !element.hasAttribute('checked'),
-                width: columns.find(column => column.name == name)?.width
-              }
-            })
-
-            this.preference = pconfig
-
-            grist.personalConfig = this.preference
-
-            grist.applyUpdatedConfiguration()
-          })
-        }}
-        >settings</md-icon
-      >
-    `
-  }
-}

package/src/record-view/event-handlers/record-view-body-click-handler.ts

@@ -1,33 +0,0 @@
-import { DataGridField } from '../../data-grid/data-grid-field'
-import { RecordViewBody } from '../record-view-body'
-
-/**
- * ox-record-view-body 의 click handler
- *
- * - handler의 this 는 ox-record-view-body임.
- */
-export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {
-  e.stopPropagation()
-
-  /* target should be 'ox-grid-field' */
-  var target = e.target as DataGridField
-
-  if (this.currentTarget) {
-    this.focus()
-    this.currentTarget.removeAttribute('editing')
-  }
-
-  let editable = target?.column?.record.editable
-  if (typeof editable === 'function') {
-    editable = editable.call(this, target.value, target.column, target.record, target.rowIndex, this)
-  }
-
-  if (target.tagName !== 'OX-GRID-FIELD' || !editable) {
-    this.focus()
-    this.currentTarget = null
-    return
-  }
-
-  this.currentTarget = target
-  target.setAttribute('editing', 'true')
-}

package/src/record-view/event-handlers/record-view-body-keydown-handler.ts

@@ -1,26 +0,0 @@
-import { RecordViewBody } from '../record-view-body'
-
-/**
- * ox-record-view-body 의 keydown handler
- *
- * - handler의 this 는 ox-record-view-body임.
- */
-export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {
-  switch ((e as KeyboardEvent).key) {
-    case 'Esc':
-    case 'Escape':
-    /* TODO 편집이 취소되어야 한다. */
-    case 'Enter':
-      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
-      this.focus()
-
-      if (this.currentTarget) {
-        this.currentTarget.removeAttribute('editing')
-      }
-
-      this.currentTarget = null
-
-      break
-    default:
-  }
-}

package/src/record-view/index.ts

@@ -1,2 +0,0 @@
-export * from './record-view'
-export * from './ox-record-creator'