@operato/data-grist 0.2.36 → 0.2.40

package/src/data-consumer.ts

@@ -1,9 +1,4 @@
-import { GristData } from './types'
-
-export type FetchHandler = (param?: { page?: number; limit?: number; sorters?: object[]; options?: object }) => {
-  total: number
-  records: object[]
-}
+import { FetchHandler, GristData } from './types'
 
 export interface DataConsumer extends EventTarget {
   data: any

package/src/data-grist.ts

@@ -3,22 +3,23 @@ import './data-list/data-list'
 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/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, queryAsync, state } from 'lit/decorators.js'
+import isEmpty from 'lodash-es/isEmpty'
+import isEqual from 'lodash-es/isEqual'
+
+import Headroom from '@operato/headroom'
+import { pulltorefresh } from '@operato/pull-to-refresh'
+import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
 
+import { buildConfig } from './configure/config-builder'
+import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'
 import { DataCard } from './data-card/data-card'
+import { DataConsumer } from './data-consumer'
 import { DataGrid } from './data-grid/data-grid'
 import { DataList } from './data-list/data-list'
 import { DataProvider } from './data-provider'
-import Headroom from '@operato/headroom'
-import { buildConfig } from './configure/config-builder'
-import isEmpty from 'lodash-es/isEmpty'
-import isEqual from 'lodash-es/isEqual'
-import { pulltorefresh } from '@operato/pull-to-refresh'
+import { FetchHandler, GristConfig, GristData, GristRecord } from './types'
 
 @customElement('ox-grist')
 export class DataGrist extends LitElement implements DataConsumer {
@@ -90,9 +91,8 @@ export class DataGrist extends LitElement implements DataConsumer {
   private dataProvider?: DataProvider
   private _pulltorefreshHandle?: any
   private _headroom?: Headroom
-  private _resizeObserver = new ResizeObserver(entries => {
-    this._adjustPaddingTop()
-  })
+  private orginPaddingTop?: string
+  private originMarginTop?: string
 
   @query('slot[name=headroom]') head!: HTMLElement
   @query('#grist') grist!: DataGrid | DataList | DataCard
@@ -104,7 +104,6 @@ export class DataGrist extends LitElement implements DataConsumer {
     this.dataProvider = new DataProvider(this)
 
     await this.updateComplete
-    this._resizeObserver.observe(this.head)
   }
 
   disconnectedCallback() {
@@ -112,7 +111,6 @@ export class DataGrist extends LitElement implements DataConsumer {
 
     this.dataProvider?.dispose()
     this._resetPullToRefresh()
-    this._resizeObserver.unobserve(this.head)
   }
 
   private _resetPullToRefresh() {
@@ -135,18 +133,31 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  private _adjustPaddingTop() {
-    this.grist.style.paddingTop = this.head.clientHeight + 'px'
-  }
-
   private _setHeadroom() {
     this._headroom?.destroy()
 
     if (this.grist && this.head) {
-      this._adjustPaddingTop()
+      const style = getComputedStyle(this.grist)
+
+      this.orginPaddingTop = style.paddingTop || '0'
+      this.originMarginTop = style.marginTop || '0'
+
+      console.log(this.orginPaddingTop, this.originMarginTop)
 
       this._headroom = new Headroom(this.head, {
-        scroller: this.grist
+        scroller: this.grist,
+        onTop: () => {
+          this.grist.style.paddingTop = this.orginPaddingTop!
+
+          this.originMarginTop = this.grist.style.marginTop
+          this.grist.style.marginTop = this.head.clientHeight + 'px'
+        },
+        onNotTop: () => {
+          this.grist.style.marginTop = this.originMarginTop!
+
+          this.orginPaddingTop = this.grist.style.paddingTop
+          this.grist.style.paddingTop = this.head.clientHeight + 'px'
+        }
       })
       this._headroom.init()
     }

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

@@ -1,8 +1,9 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
+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-list-field')
 export class DataListField extends LitElement {
   static styles = [
@@ -56,7 +57,7 @@ export class DataListField extends LitElement {
   @property({ type: Number }) rowIndex: number = -1
   @property({ type: Object }) value?: object
 
-  render() {
+  render(): TemplateResult {
     var { value, column, record, rowIndex } = this
 
     var {

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

@@ -1,11 +1,11 @@
 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/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
 import { dataListClickHandler } from './event-handlers/data-list-click-handler'
 import { dataListDblclickHandler } from './event-handlers/data-list-dblclick-handler'
 
@@ -41,12 +41,6 @@ export class DataList extends LitElement {
       slot {
         width: 100%;
       }
-
-      slot[name='headroom'] {
-        display: flex;
-        position: absolute;
-        top: 0;
-      }
     `
   ]
 

package/src/data-provider.ts

@@ -1,7 +1,6 @@
-import { DataConsumer, FetchHandler } from './data-consumer'
-import { GristRecord, SorterConfig } from './types'
-
 import { ZERO_RECORDS } from './configure/zero-config'
+import { DataConsumer } from './data-consumer'
+import { FetchHandler, FetchOption, GristRecord, SorterConfig } from './types'
 
 function EMPTY_FETCHHANDLER() {
   return {
@@ -92,14 +91,14 @@ export class DataProvider {
 
   get fetchHandler() {
     if (!this._fetchHandlerWrap) {
-      this._fetchHandlerWrap = async (...args: any[]) => {
+      this._fetchHandlerWrap = async (options: FetchOption) => {
         if (!this._fetchHandler) {
           return
         }
 
         try {
           this.consumer?.showSpinner()
-          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(...args)
+          return await (this._fetchHandler || EMPTY_FETCHHANDLER)(options)
         } finally {
           this.consumer?.hideSpinner()
         }

package/src/types.ts

@@ -1,12 +1,13 @@
+import { TemplateResult } from 'lit-html'
+
 import { DataCardField } from './data-card/data-card-field'
 import { DataCardGutter } from './data-card/data-card-gutter'
+import { RecordCard } from './data-card/record-card'
 import { DataGridField } from './data-grid/data-grid-field'
 import { DataListField } from './data-list/data-list-field'
 import { DataListGutter } from './data-list/data-list-gutter'
-import { DataReportField } from './data-report/data-report-field'
-import { RecordCard } from './data-card/record-card'
 import { RecordPartial } from './data-list/record-partial'
-import { TemplateResult } from 'lit-html'
+import { DataReportField } from './data-report/data-report-field'
 
 export type GristConfig = {
   columns: ColumnConfig[]
@@ -27,6 +28,14 @@ export type PaginationConfig = {
   infinite?: boolean
 }
 
+export type FetchOption = { page?: number; limit?: number; sorters?: object[]; options?: object }
+export type FetchHandler = (param: FetchOption) => {
+  page?: number
+  limit?: number
+  total: number
+  records: object[]
+}
+
 export type GristEventHandler = (
   columns: ColumnConfig[],
   data?: GristData,