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

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/record-view/record-creator.ts

@@ -145,7 +145,7 @@ export class RecordCreator extends LitElement {
               }
             })
 
-            recordView.addEventListener('field-change', (e: Event) => {
+            recordView.addEventListener('field-change', async (e: Event) => {
               const view = e.currentTarget as RecordView
 
               var { after, before, column, record, row } = (e as CustomEvent).detail as {
@@ -158,7 +158,7 @@ export class RecordCreator 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/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/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',

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',

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',

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',