@operato/data-grist 0.2.31 → 0.2.36

package/src/data-grid/data-grid.ts

@@ -2,8 +2,9 @@ import './data-grid-header'
 import './data-grid-body'
 import './data-grid-footer'
 
+import { ColumnConfig, GristConfig, GristData, GristRecord, PaginationConfig } from '../types'
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { DataGridHeader } from './data-grid-header'

package/src/data-grist.ts

@@ -4,9 +4,10 @@ import './data-card/data-card'
 import './empty-note'
 
 import { DataConsumer, FetchHandler } from './data-consumer'
+import { GristConfig, GristData, GristRecord } from './types'
 import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'
 import { customElement, property, query, queryAsync, state } from 'lit/decorators.js'
 
 import { DataCard } from './data-card/data-card'
@@ -87,37 +88,44 @@ export class DataGrist extends LitElement implements DataConsumer {
   @state() private _showSpinner: boolean = false
 
   private dataProvider?: DataProvider
-  private pulltorefreshHandle?: any
-  private headroom?: Headroom
+  private _pulltorefreshHandle?: any
+  private _headroom?: Headroom
+  private _resizeObserver = new ResizeObserver(entries => {
+    this._adjustPaddingTop()
+  })
 
   @query('slot[name=headroom]') head!: HTMLElement
   @query('#grist') grist!: DataGrid | DataList | DataCard
   @queryAsync('#wrap') private wrap!: Promise<HTMLElement>
 
-  connectedCallback() {
+  async connectedCallback() {
     super.connectedCallback()
 
     this.dataProvider = new DataProvider(this)
+
+    await this.updateComplete
+    this._resizeObserver.observe(this.head)
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
     this.dataProvider?.dispose()
-    this.resetPullToRefresh()
+    this._resetPullToRefresh()
+    this._resizeObserver.unobserve(this.head)
   }
 
-  private resetPullToRefresh() {
-    if (this.pulltorefreshHandle) {
-      this.pulltorefreshHandle()
-      delete this.pulltorefreshHandle
+  private _resetPullToRefresh() {
+    if (this._pulltorefreshHandle) {
+      this._pulltorefreshHandle()
+      delete this._pulltorefreshHandle
     }
   }
 
-  private async setPullToRefresh() {
-    this.resetPullToRefresh()
+  private async _setPullToRefresh() {
+    this._resetPullToRefresh()
     if (this.fetchHandler) {
-      this.pulltorefreshHandle = pulltorefresh({
+      this._pulltorefreshHandle = pulltorefresh({
         container: await this.wrap,
         scrollable: this.grist.pullToRefreshTarget,
         refresh: () => {
@@ -127,17 +135,20 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  setHeadroom() {
-    this.headroom?.destroy()
+  private _adjustPaddingTop() {
+    this.grist.style.paddingTop = this.head.clientHeight + 'px'
+  }
+
+  private _setHeadroom() {
+    this._headroom?.destroy()
 
     if (this.grist && this.head) {
-      var originPaddingTop = parseFloat(getComputedStyle(this.grist, null).getPropertyValue('padding-top'))
-      this.grist.style.paddingTop = this.head.clientHeight + originPaddingTop + 'px'
+      this._adjustPaddingTop()
 
-      this.headroom = new Headroom(this.head, {
+      this._headroom = new Headroom(this.head, {
         scroller: this.grist
       })
-      this.headroom.init()
+      this._headroom.init()
     }
   }
 
@@ -227,7 +238,7 @@ export class DataGrist extends LitElement implements DataConsumer {
 
     if (changes.has('mode')) {
       needToSetPullToRefresh = true
-      this.setHeadroom()
+      this._setHeadroom()
     }
 
     if (changes.has('selectedRecords')) {
@@ -250,7 +261,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
 
     if (needToSetPullToRefresh) {
-      await this.setPullToRefresh()
+      await this._setPullToRefresh()
     }
   }
 
@@ -354,7 +365,7 @@ export class DataGrist extends LitElement implements DataConsumer {
   /**
    * Forced internal data to be reflected on the screen
    * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
-Therefore, it will be deprecated.
+   * Therefore, it will be deprecated.
    * @deprecated
    * @method
    */

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

@@ -1,5 +1,6 @@
+import { ColumnConfig, GristRecord } from '../types'
 import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/config-types'
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 @customElement('ox-list-field')
@@ -60,14 +61,14 @@ export class DataListField extends LitElement {
 
     var {
       label,
-      record: { renderer: recordRenderer }
+      record: { renderer: fieldRenderer }
     } = column
 
     if (typeof label == 'object') {
       let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`<label>${labelRenderer()}</label>${fieldRenderer(value, column, record, rowIndex, this)}`
     } else {
-      return html`${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`${fieldRenderer(value, column, record, rowIndex, this)}`
     }
   }
 }

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

@@ -1,11 +1,12 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/config-types'
+import { ColumnConfig, GristRecord } from '../types'
+import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
 @customElement('ox-list-gutter')
-class DataListGutter extends LitElement {
+export class DataListGutter extends LitElement {
   static styles = [
     css`
       :host {
@@ -45,7 +46,7 @@ class DataListGutter extends LitElement {
     return this.hasAttribute('editing')
   }
 
-  render() {
+  render(): TemplateResult {
     if (!this.column) {
       return html``
     }

package/src/data-list/data-list.ts

@@ -1,8 +1,9 @@
 import '@material/mwc-icon'
 import './record-partial'
 
+import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 import { dataListClickHandler } from './event-handlers/data-list-click-handler'

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

@@ -1,3 +1,5 @@
+import { ColumnConfig, GristRecord } from '../../types'
+
 import { RecordPartial } from '../record-partial'
 
 /**

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

@@ -1,3 +1,5 @@
+import { ColumnConfig, GristRecord } from '../../types'
+
 import { RecordPartial } from '../record-partial'
 
 /**

package/src/data-list/event-handlers/record-partial-long-press-handler.ts

@@ -1,3 +1,5 @@
+import { ColumnConfig, GristRecord } from '../../types'
+
 import { RecordPartial } from '../record-partial'
 
 /**

package/src/data-list/record-partial.ts

@@ -4,8 +4,9 @@ import './data-list-gutter'
 import './data-list-field'
 import '../record-view'
 
+import { GristConfig, GristData, GristRecord } from '../types'
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 import { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'

package/src/data-provider.ts

@@ -1,6 +1,7 @@
 import { DataConsumer, FetchHandler } from './data-consumer'
+import { GristRecord, SorterConfig } from './types'
 
-import { ZERO_RECORDS } from './configure/config-types'
+import { ZERO_RECORDS } from './configure/zero-config'
 
 function EMPTY_FETCHHANDLER() {
   return {

package/src/data-report/data-report-body.ts

@@ -1,7 +1,8 @@
 import './data-report-field'
 
+import { ColumnConfig, GristConfig, GristData } from '../types'
 import { LitElement, PropertyValues, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'

package/src/data-report/data-report-component.ts

@@ -1,8 +1,9 @@
 import './data-report-header'
 import './data-report-body'
 
+import { ColumnConfig, GristConfig, GristData } from '../types'
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'

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

@@ -1,5 +1,6 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/config-types'
+import { ColumnConfig, GristRecord } from '../types'
+import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 const DEFAULT_TEXT_ALIGN = 'left'
@@ -51,7 +52,7 @@ export class DataReportField extends LitElement {
   @property({ type: Number }) columnIndex: number = -1
   @property({ type: Object }) value: any
 
-  render() {
+  render(): TemplateResult {
     if (!this.column) {
       return html``
     }

package/src/data-report/data-report-header.ts

@@ -1,5 +1,6 @@
+import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
 import { LitElement, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 import { supportsPassive } from '../utils'

package/src/data-report.ts

@@ -1,8 +1,9 @@
 import './data-report/data-report-component'
 
+import { GristConfig, GristData, GristRecord, GroupConfig } from './types'
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { ScrollbarStyles, SpinnerStyles } from '@operato/styles'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/config-types'
+import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'
 import { customElement, property, query, queryAsync, state } from 'lit/decorators.js'
 
 import { DataConsumer } from './data-consumer'

package/src/editors/input-editors.ts

@@ -1,5 +1,6 @@
+import { ColumnConfig, GristRecord } from '../types'
 import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/config-types'
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { DataGridField } from '../data-grid/data-grid-field'

package/src/editors/registry.ts

@@ -15,6 +15,7 @@ import {
   TimeInput,
   WeekInput
 } from './input-editors'
+import { ColumnConfig, FieldEditor, GristRecord } from '../types'
 
 import { DataGridField } from '../data-grid/data-grid-field'
 

package/src/filters/index.ts

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

package/src/filters/list-select.ts

@@ -0,0 +1,14 @@
+import '@operato/popup'
+
+import { FilterSelectRenderer } from '../types'
+import { html } from 'lit-html'
+
+export const ListSelect: FilterSelectRenderer = (column, owner) => {
+  const options = column.filter?.options
+
+  return html`
+    <ox-popup-list .config=${column} multiple attr-selected="checked" popup>
+      ${options?.map((option: string) => html` <ox-checkbox option value="${option}">${option}</ox-checkbox> `)}
+    </ox-popup-list>
+  `
+}

package/src/filters/registry.ts

@@ -0,0 +1,48 @@
+import { FilterSelectRenderer } from '../types'
+import { ListSelect } from './list-select'
+
+var RENDERERS: {
+  [name: string]: FilterSelectRenderer
+} = {
+  string: ListSelect,
+  text: ListSelect,
+  email: ListSelect,
+  tel: ListSelect,
+  password: ListSelect,
+  integer: ListSelect,
+  float: ListSelect,
+  number: ListSelect,
+  select: ListSelect,
+  boolean: ListSelect,
+  checkbox: ListSelect,
+  month: ListSelect,
+  week: ListSelect,
+  date: ListSelect,
+  time: ListSelect,
+  datetime: ListSelect,
+  color: ListSelect,
+  progress: ListSelect,
+  link: ListSelect,
+  image: ListSelect,
+  json5: ListSelect
+}
+
+export function registerRenderer(type: string, renderer: FilterSelectRenderer) {
+  RENDERERS[type] = renderer
+}
+
+export function unregisterRenderer(type: string): void {
+  delete RENDERERS[type]
+}
+
+export function getRenderers(): { [name: string]: FilterSelectRenderer } {
+  return { ...RENDERERS }
+}
+
+export function getRenderer(type: string | FilterSelectRenderer): FilterSelectRenderer {
+  if (typeof type == 'function') {
+    return type
+  }
+
+  return RENDERERS[type || 'text'] || ListSelect
+}

package/src/gutters/gutter-button.ts

@@ -1,5 +1,7 @@
 import '@material/mwc-icon'
 
+import { FieldRenderer, HeaderRenderer } from '../types'
+
 import { html } from 'lit'
 
 export class GutterButton {

package/src/gutters/gutter-dirty.ts

@@ -1,5 +1,6 @@
 import '@material/mwc-icon'
 
+import { ColumnConfig, FieldRenderer } from '../types'
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 

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

@@ -1,3 +1,5 @@
+import { FieldRenderer, HeaderRenderer } from '../types'
+
 import { DataCard } from '../data-card/data-card'
 import { DataGrid } from '../data-grid/data-grid'
 import { DataList } from '../data-list/data-list'

package/src/gutters/gutter-sequence.ts

@@ -1,3 +1,5 @@
+import { ColumnWidthCallback, FieldRenderer } from '../types'
+
 import { DataCard } from '../data-card/data-card'
 import { DataGrid } from '../data-grid/data-grid'
 import { DataList } from '../data-list/data-list'

package/src/gutters/registry.ts

@@ -1,3 +1,4 @@
+import { ColumnConfig } from '../types'
 import { GutterButton } from './gutter-button'
 import { GutterDirty } from './gutter-dirty'
 import { GutterRowSelector } from './gutter-row-selector'

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

@@ -1,5 +1,7 @@
 import '../record-view/record-view'
 
+import { ColumnConfig, GristData, GristRecord } from '../types'
+
 import { DataGridField } from '../data-grid/data-grid-field'
 import { html } from 'lit'
 

package/src/handlers/registry.ts

@@ -1,3 +1,4 @@
+import { GristEventHandler } from '../types'
 import { RecordViewHandler } from './record-view-handler'
 import { SelectRow } from './select-row'
 import { SelectRowToggle } from './select-row-toggle'

package/src/handlers/select-row-toggle.ts

@@ -1,3 +1,5 @@
+import { ColumnConfig, GristData, GristRecord } from '../types'
+
 import { DataGridField } from '../data-grid/data-grid-field'
 
 /*

package/src/handlers/select-row.ts

@@ -1,3 +1,5 @@
+import { ColumnConfig, GristData, GristRecord } from '../types'
+
 import { DataGridField } from '../data-grid/data-grid-field'
 
 /*

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './configure/zero-config'
 export * from './data-grist'
 export * from './data-report'
 
@@ -6,3 +7,6 @@ export * from './renderers'
 export * from './handlers'
 export * from './formatters'
 export * from './gutters'
+
+export * from './interfaces'
+export * from './search-form'

package/src/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './ox-search-field'
+export * from './ox-grist-search-form'

package/src/interfaces/ox-grist-search-form.ts

@@ -0,0 +1,7 @@
+export type QueryFilterRangeValue = [from: number, to: number]
+
+export type QueryFilter = {
+  name: string
+  operator?: string
+  value: any
+}

package/src/interfaces/ox-search-field.ts

@@ -0,0 +1,52 @@
+export type OXSearchFieldType = 'select' | 'checkbox' | 'text' | 'number'
+
+export interface OXFieldOptionProps {
+  name?: string
+  value: string
+}
+
+export interface OXBasicFieldProps {
+  name: string
+  type?: OXSearchFieldType
+  hidden?: boolean
+  id?: string
+  placeholder?: string
+  handlers?: Record<string, (event: Event) => void>
+  defaultValue?: any
+  operator?: string
+}
+
+export interface OXTextFieldProps extends OXBasicFieldProps {
+  defaultValue?: string
+}
+
+export interface OXNumberFieldProps extends OXBasicFieldProps {
+  min?: number
+  max?: number
+  step: number
+  defaultValue?: number
+}
+
+export interface OXObjectFieldProps extends OXBasicFieldProps {
+  field: string
+  queryName: string
+  defaultValue?: Record<string, any>
+}
+
+export interface OXSelectFieldProps extends OXBasicFieldProps {
+  searchEnable?: boolean
+  options: OXFieldOptionProps[]
+  defaultValue?: any
+}
+
+export interface OXCheckboxFieldProps extends OXBasicFieldProps {
+  indeterminate?: boolean
+  defaultValue?: boolean
+}
+
+export type OXSearchFieldProps =
+  | OXTextFieldProps
+  | OXNumberFieldProps
+  | OXObjectFieldProps
+  | OXSelectFieldProps
+  | OXCheckboxFieldProps

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

@@ -1,11 +1,12 @@
 import '@material/mwc-icon'
 import '../data-grid/data-grid-field'
 
+import { ColumnConfig, GristRecord } from '../types'
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { DataGridField } from '../data-grid/data-grid-field'
-import { ZERO_RECORD } from '../configure/config-types'
+import { ZERO_RECORD } from '../configure/zero-config'
 
 const KEY_ENTER = 13
 const KEY_ESC = 27

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

@@ -1,10 +1,11 @@
 import '@material/mwc-icon'
 import './record-view-body'
 
+import { ColumnConfig, GristRecord } from '../types'
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ZERO_RECORD } from '../configure/config-types'
+import { ZERO_RECORD } from '../configure/zero-config'
 
 @customElement('ox-record-view')
 export class RecordView extends LitElement {

package/src/renderers/boolean-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
 export const BooleanRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {

package/src/renderers/color-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
 export const ColorRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {

package/src/renderers/date-renderer.ts

@@ -1,3 +1,5 @@
+import { FieldRenderer } from '../types'
+
 // TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
 const DATETIME_OPTIONS = {
   year: 'numeric',

package/src/renderers/image-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
 export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {

package/src/renderers/json5-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import JSON5 from 'json5'
 import { html } from 'lit'
 

package/src/renderers/link-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
 export const LinkRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {

package/src/renderers/password-renderer.ts

@@ -1,3 +1,5 @@
+import { FieldRenderer } from '../types'
+
 export const PasswordRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
   return Array(String(value).length).fill('*').join('')
 }

package/src/renderers/progress-renderer.ts

@@ -1,6 +1,8 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { FieldRenderer } from '../types'
+
 @customElement('ox-grist-progress-renderer')
 class DataGristProgressRenderer extends LitElement {
   static styles = css`

package/src/renderers/registry.ts

@@ -1,6 +1,7 @@
 import { BooleanRenderer } from './boolean-renderer'
 import { ColorRenderer } from './color-renderer'
 import { DateRenderer } from './date-renderer'
+import { FieldRenderer } from '../types'
 import { ImageRenderer } from './image-renderer'
 import { Json5Renderer } from './json5-renderer'
 import { LinkRenderer } from './link-renderer'

package/src/renderers/select-renderer.ts

@@ -1,3 +1,5 @@
+import { FieldRenderer } from '../types'
+
 export const SelectRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
   if (!value) {
     return ''

package/src/renderers/text-renderer.ts

@@ -1,3 +1,4 @@
+import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
 export const TextRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {