@operato/data-grist 2.0.0-alpha.136 → 2.0.0-alpha.139

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

@@ -348,8 +348,6 @@ export class DataGridBody extends LitElement {
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 
-    this.addEventListener('wheel', this._onWheelEvent.bind(this))
-
     const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')
     this.style.setProperty(
       '--focused-background-image',
@@ -380,26 +378,6 @@ export class DataGridBody extends LitElement {
     ) as DataGridField
   }
 
-  _onWheelEvent(e: WheelEvent) {
-    if (this.scrollHeight <= this.clientHeight) {
-      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
-      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)
-
-      var maxScrollLeft = this.scrollWidth - this.clientWidth
-
-      var atStart = this.scrollLeft === 0
-      var atEnd = this.scrollLeft === maxScrollLeft
-
-      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는
-      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용
-      if ((atStart && delta > 0) || (atEnd && delta < 0)) {
-        return true
-      }
-
-      e.preventDefault()
-    }
-  }
-
   startEditTarget(row: number, column: number, valueWith: string | null = null) {
     var { editable } = this.columns.filter(column => !column.hidden)[column].record
     if (typeof editable === 'function') {

package/src/data-grist.ts

@@ -319,7 +319,7 @@ export class DataGrist extends LitElement implements DataConsumer {
   }
 
   public applyUpdatedConfiguration() {
-    if (!this.personalConfig) {
+    if (!this.personalConfig || !this.config) {
       return
     }
 

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

@@ -73,7 +73,7 @@ class DataReportHeader extends LitElement {
 
   private throttledNotifier?: (idx: number, width: number) => void
 
-  _onWheelEvent(e: WheelEvent) {
+  onWheelEvent(e: WheelEvent) {
     if (this.scrollWidth > this.clientWidth) {
       var delta = Math.max(-1, Math.min(1, e.deltaY || 0))
       this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)
@@ -94,7 +94,7 @@ class DataReportHeader extends LitElement {
   }
 
   firstUpdated() {
-    this.addEventListener('wheel', this._onWheelEvent.bind(this))
+    this.addEventListener('wheel', this.onWheelEvent.bind(this))
   }
 
   async updated(changed: PropertyValues<this>) {

package/src/filters/filters-form.ts

@@ -264,7 +264,12 @@ export class OxFiltersForm extends LitElement {
   }
 
   applyUpdatedConfiguration() {
+    if (!this.config) {
+      return
+    }
+
     const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
+
     this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {
       const filter = columnConfig.filter as FilterConfigObject
       return filter!.operator !== 'search'

package/stories/barcode-input-filter.stories.ts

@@ -159,6 +159,16 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
       mode="GRID"

package/stories/bounded-select-filters.stories.ts

@@ -294,6 +294,16 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/stories/bounded-select-record.stories.ts

@@ -297,6 +297,16 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/stories/creatable-only-column.stories.ts

@@ -189,6 +189,16 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/stories/default-filters.stories.ts

@@ -185,6 +185,16 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/stories/dynamic-editable.stories.ts

@@ -217,6 +217,16 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"

package/stories/empty-sorters.stories.ts

@@ -126,6 +126,16 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       mode="GRID"

package/stories/explicit-fetch.stories.ts

@@ -131,6 +131,16 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       mode="GRID"

package/stories/fixed-column.stories.ts

@@ -355,6 +355,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       mode="GRID"
       .config=${config}

package/stories/grid-setting.stories.ts

@@ -407,6 +407,16 @@ const Template: Story<ArgTypes> = ({
       ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .mode=${mode}
       .config=${config}

package/stories/grist-modes.stories.ts

@@ -352,9 +352,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: string
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  fetchHandler: object
+  fetchHandler: FetchHandler
 }
 
 const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
@@ -380,6 +380,16 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       .mode=${mode}

package/stories/group-header.stories.ts

@@ -385,6 +385,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       mode="GRID"
       .config=${config}

package/stories/textarea.stories.ts

@@ -12,13 +12,14 @@ import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 import {
   ColumnConfig,
   FetchHandler,
+  FetchOption,
   GristClassifier,
   GristEventHandlerSet,
   GristRecord,
   ValidationCallback
 } from '../src/types.js'
 
-const fetchHandler: FetchHandler = async ({ page, limit }) => {
+const fetchHandler: FetchHandler = async ({ page, limit }: FetchOption) => {
   var total = 3
   var start = (page! - 1) * limit!
 
@@ -186,9 +187,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: string
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  fetchHandler: object
+  fetchHandler: FetchHandler
 }
 
 const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
@@ -214,6 +215,16 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       .mode=${mode}

package/stories/tree-column-with-checkbox.stories.ts

@@ -239,6 +239,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       mode="GRID"
       .config=${config}

package/stories/tree-column.stories.ts

@@ -238,6 +238,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       mode="GRID"
       .config=${config}