@operato/data-grist 2.0.0-alpha.137 → 2.0.0-alpha.140

package/src/data-manipulator.ts

@@ -22,7 +22,7 @@ export class DataManipulator extends LitElement {
   constructor() {
     super()
 
-    this.addEventListener('select-record-change', e => {
+    this.addEventListener('select-record-change', async e => {
       var {
         records: selectedRecords,
         added = [],
@@ -41,7 +41,7 @@ export class DataManipulator extends LitElement {
     })
 
     /* field change processing */
-    this.addEventListener('field-change', e => {
+    this.addEventListener('field-change', async e => {
       var { after, before, column, record, row } = (e as CustomEvent).detail as {
         after: any
         before: any
@@ -50,7 +50,7 @@ export class DataManipulator extends LitElement {
         row: number
       }
 
-      this.onFieldChange({ after, before, column, record, row })
+      await this.onFieldChange({ after, before, column, record, row })
     })
 
     /* record reset processing */
@@ -76,7 +76,7 @@ export class DataManipulator extends LitElement {
     this.addEventListener('add-child-node', (e: Event) => this.addChildNode((e as CustomEvent).detail as GristRecord))
   }
 
-  onFieldChange({
+  async onFieldChange({
     after,
     before,
     column,
@@ -96,7 +96,7 @@ export class DataManipulator extends LitElement {
 
     var validation = column.validation
     if (validation && typeof validation == 'function') {
-      if (!validation.call(this, after, before, record, column)) {
+      if (!(await validation.call(this, after, before, record, column))) {
         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/types.ts

@@ -377,7 +377,12 @@ export type ColumnConfig = {
  * @param {ColumnConfig} column - The configuration of the column being edited.
  * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.
  */
-export type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean
+export type ValidationCallback = (
+  after: any,
+  before: any,
+  record: GristRecord,
+  column: ColumnConfig
+) => boolean | Promise<boolean>
 
 /**
  * Configuration options for column labels.

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

@@ -17,6 +17,7 @@ import {
 } from '../src/types.js'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -176,20 +177,18 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
+
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -355,6 +354,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

@@ -23,6 +23,7 @@ import {
   PersonalGristPreference,
   ValidationCallback
 } from '../src/types.js'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -181,20 +182,17 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -407,6 +405,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

@@ -17,6 +17,7 @@ import {
   GristRecord,
   ValidationCallback
 } from '../src/types.js'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -175,20 +176,17 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -352,9 +350,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 +378,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

@@ -17,6 +17,7 @@ import {
   GristRecord,
   ValidationCallback
 } from '../src/types.js'
+import { OxPrompt } from '@operato/popup'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -186,20 +187,17 @@ const config = {
       filter: 'search',
       sortable: true,
       width: 130,
-      validation: function (after, before, record, column) {
+      validation: (async (after, before, record, column) => {
         if (after.indexOf('@') == -1) {
-          document.dispatchEvent(
-            new CustomEvent('notify', {
-              detail: {
-                type: 'error',
-                message: `invalid value - ${after}`
-              }
-            })
-          )
-          return false
+          return await OxPrompt.open({
+            title: '잘못된 이메일 포맷',
+            text: '그래도 변경하시겠습니까?',
+            cancelButton: { text: 'No' },
+            confirmButton: { text: 'Yes' }
+          })
         }
         return true
-      } as ValidationCallback
+      }) as ValidationCallback
     },
     {
       type: 'boolean',
@@ -385,6 +383,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}