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

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``
-  }
-}

package/src/renderers/registry.ts

@@ -1,111 +0,0 @@
-import { DataCardField } from '../data-card/data-card-field.js'
-import { DataCardGutter } from '../data-card/data-card-gutter.js'
-import { RecordCard } from '../data-card/record-card.js'
-import { DataGridField } from '../data-grid/data-grid-field.js'
-import { DataListField } from '../data-list/data-list-field.js'
-import { DataListGutter } from '../data-list/data-list-gutter.js'
-import { RecordPartial } from '../data-list/record-partial.js'
-import { DataReportField } from '../data-report/data-report-field.js'
-import { ColumnConfig, FieldRenderer, GristRecord } from '../types.js'
-import { OxGristRendererBoolean } from './ox-grist-renderer-boolean.js'
-import { OxGristRendererColor } from './ox-grist-renderer-color.js'
-import { OxGristRendererDate } from './ox-grist-renderer-date.js'
-import { OxGristRendererFile } from './ox-grist-renderer-file.js'
-import { OxGristRendererImage } from './ox-grist-renderer-image.js'
-import { OxGristRendererJson5 } from './ox-grist-renderer-json5.js'
-import { OxGristRendererLink } from './ox-grist-renderer-link.js'
-import { OxGristRendererPassword } from './ox-grist-renderer-password.js'
-import { OxGristRendererProgress } from './ox-grist-renderer-progress.js'
-import { OxGristRendererSelect } from './ox-grist-renderer-select.js'
-import { OxGristRendererText } from './ox-grist-renderer-text.js'
-import { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'
-import { OxGristRendererTree } from './ox-grist-renderer-tree.js'
-import { OxGristRenderer } from './ox-grist-renderer.js'
-
-interface OxGristRendererConstructor {
-  new (): OxGristRenderer
-}
-
-function isClass(func: Function) {
-  return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func))
-}
-
-var RENDERERS: {
-  [name: string]: FieldRenderer | OxGristRendererConstructor
-} = {
-  string: OxGristRendererText,
-  text: OxGristRendererText,
-  textarea: OxGristRendererTextarea,
-  email: OxGristRendererText,
-  tel: OxGristRendererText,
-  password: OxGristRendererPassword,
-  integer: OxGristRendererText,
-  float: OxGristRendererText,
-  number: OxGristRendererText,
-  select: OxGristRendererSelect,
-  boolean: OxGristRendererBoolean,
-  checkbox: OxGristRendererBoolean,
-  month: OxGristRendererText,
-  week: OxGristRendererText,
-  date: OxGristRendererDate,
-  time: OxGristRendererDate,
-  datetime: OxGristRendererDate,
-  color: OxGristRendererColor,
-  progress: OxGristRendererProgress,
-  link: OxGristRendererLink,
-  image: OxGristRendererImage,
-  file: OxGristRendererFile,
-  json5: OxGristRendererJson5,
-  tree: OxGristRendererTree
-}
-
-export function registerRenderer(type: string, renderer: FieldRenderer) {
-  RENDERERS[type] = renderer
-}
-
-export function unregisterRenderer(type: string): void {
-  delete RENDERERS[type]
-}
-
-export function getRenderers(): { [name: string]: FieldRenderer | OxGristRendererConstructor } {
-  return { ...RENDERERS }
-}
-
-export function getRenderer(type: string | FieldRenderer): FieldRenderer {
-  if (typeof type === 'function') {
-    return type
-  }
-
-  var renderer: FieldRenderer | OxGristRendererConstructor = RENDERERS[type || 'text'] || OxGristRendererText
-
-  if (!isClass(renderer)) {
-    return renderer as FieldRenderer
-  }
-
-  return function (
-    value: any,
-    column: ColumnConfig,
-    record: GristRecord,
-    rowIndex: number,
-    field:
-      | DataGridField
-      | RecordCard
-      | DataCardGutter
-      | DataCardField
-      | DataListGutter
-      | DataListField
-      | RecordPartial
-      | DataReportField
-      | Element
-  ) {
-    var element: OxGristRenderer = new (renderer as OxGristRendererConstructor)() as any
-
-    element.value = value
-    element.record = record
-    element.column = column
-    element.row = rowIndex
-    element.field = field as DataGridField
-
-    return element as OxGristRenderer
-  }
-}

package/src/sorters/sorters-control.ts

@@ -1,143 +0,0 @@
-import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-
-import { DataGrist } from '../data-grist'
-import { ColumnConfig, GristConfig, SorterConfig } from '../types'
-
-@customElement('ox-sorters-control')
-export class SortersControl extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        white-space: nowrap;
-      }
-
-      [option] {
-        flex: 1;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-        padding: 3px var(--spacing-small);
-      }
-
-      [option] > span {
-        margin-right: auto;
-        text-transform: capitalize;
-        user-select: none;
-      }
-      [option] md-icon {
-        margin-left: var(--spacing-medium);
-        --md-icon-size: var(--fontsize-large);
-        color: var(--md-sys-color-on-primary-container);
-      }
-      [option] sub {
-        color: var(--md-sys-color-on-primary-container);
-      }
-    `
-  ]
-
-  @state() config!: GristConfig
-  @state() columns: ColumnConfig[] = []
-  @state() sorters: SorterConfig[] = []
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    const grist = this.closest('ox-grist') as DataGrist
-
-    if (grist) {
-      this.config = grist.compiledConfig
-      grist.addEventListener('config-change', (e: Event) => {
-        this.config = (e as CustomEvent).detail
-      })
-
-      grist.addEventListener('fetch-params-change', e => {
-        const { sorters, from } = (e as CustomEvent).detail || {}
-        if (from === 'sorters-control') {
-          return
-        }
-
-        sorters && (this.sorters = sorters)
-      })
-    }
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('config')) {
-      this.columns = this.config.columns.filter(column => column.sortable)
-      this.sorters = this.sorters || this.config.sorters || []
-    }
-  }
-
-  render(): TemplateResult {
-    const columns = this.columns
-
-    const current = this.sorters || []
-
-    return html`
-      ${columns.map(column => {
-        const { name } = column
-        var rank = current.findIndex(sorter => sorter.name === name) + 1
-        var desc = rank !== 0 ? current[rank - 1].desc : null
-
-        if (current.length <= 1) {
-          rank = 0
-        }
-
-        return html`
-          <div
-            option
-            @click=${(e: MouseEvent) => {
-              this.onChangeSort(name)
-            }}
-          >
-            <span>${column.header.renderer.call(this, column)}</span>
-            ${desc === null
-              ? html``
-              : html`
-                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>
-                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
-                `}
-          </div>
-        `
-      })}
-    `
-  }
-
-  onChangeSort(name: string) {
-    var sorters = [...this.sorters]
-
-    var idx = sorters.findIndex(sorter => sorter.name == name)
-    if (idx !== -1) {
-      let sorter = sorters[idx]
-      if (sorter.desc) {
-        sorters.splice(idx, 1)
-      } else {
-        sorter.desc = true
-      }
-    } else {
-      var sorter = {
-        name
-      }
-
-      sorters.push(sorter)
-    }
-
-    this.sorters = sorters
-
-    this.dispatchEvent(
-      new CustomEvent('fetch-params-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          sorters: this.sorters,
-          from: 'sorters-control'
-        }
-      })
-    )
-  }
-}