@operato/data-grist 8.0.0-alpha.51 → 8.0.0-alpha.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.51",
+  "version": "8.0.0-alpha.52",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-record-creator.js": "./dist/src/record-view/ox-record-creator.js",
     "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
@@ -41,7 +41,7 @@
         "dist/src/sorters/sorters-control.d.ts"
       ],
       "ox-record-creator.js": [
-        "dist/src/record-view/record-creator.d.ts"
+        "dist/src/record-view/ox-record-creator.d.ts"
       ],
       "ox-grist-personalizer.js": [
         "dist/src/personalizer/ox-grist-personalizer.d.ts"
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac94e729e3647d45c921be99f96f4c2e65cef797"
+  "gitHead": "704510726d5c6c6b07a828203e7cafa895c2cb5f"
 }

package/src/record-view/index.ts

@@ -1,2 +1,2 @@
 export * from './record-view'
-export * from './record-creator'
+export * from './ox-record-creator'

package/src/record-view/{record-creator.ts → ox-record-creator.ts}

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js'
 import './record-view'
 
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopup } from '@operato/popup'
@@ -11,10 +11,19 @@ import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { RecordView } from './record-view'
 
 @customElement('ox-record-creator')
-export class RecordCreator extends LitElement {
+export class OxRecordCreator extends LitElement {
+  static styles = [
+    css`
+      ::slotted([slot='popup']) {
+        display: none;
+      }
+    `
+  ]
+
   @state() grist?: DataGrist
 
-  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
+  @property({ type: Object }) callback?: (record: GristRecord) => boolean
+  @property({ type: Object }) customPopupCallback?: (popup: any) => boolean
   @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
   @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false
 
@@ -26,9 +35,9 @@ export class RecordCreator extends LitElement {
       e.stopPropagation()
 
       if (this.lightPopup) {
-        this.lightPopupRecordView()
+        this.openLightPopup()
       } else {
-        this.popupRecordView()
+        this.openPopup()
       }
     })
   }
@@ -40,26 +49,55 @@ export class RecordCreator extends LitElement {
   }
 
   render() {
-    return html`<slot></slot>`
+    return html`
+      <slot></slot>
+      <slot name="popup"></slot>
+    `
   }
 
   validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {
-    const columns = this.grist!.compiledConfig.columns;
-    const invalidFields: { field: string; reason: ValidationReason }[] = [];
+    const columns = this.grist!.compiledConfig.columns
+    const invalidFields: { field: string; reason: ValidationReason }[] = []
 
     columns.forEach(column => {
-      if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
+      if (
+        column.record?.mandatory &&
+        (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')
+      ) {
         invalidFields.push({
           field: column.name,
           reason: ValidationReason.MANDATORY
-        });
+        })
       }
-      // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.
-    });
+    })
 
     return invalidFields
   }
 
+  openLightPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.lightPopupCustomCreator(originalContent)
+    } else {
+      this.lightPopupRecordView()
+    }
+  }
+
+  openPopup() {
+    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement
+    const slottedElements = slot?.assignedElements({ flatten: true })
+    const originalContent = slottedElements?.[0] as HTMLElement
+
+    if (originalContent) {
+      this.popupCustomCreator(originalContent)
+    } else {
+      this.popupRecordView()
+    }
+  }
+
   lightPopupRecordView() {
     const config = this.grist!.compiledConfig
     var title = 'create'
@@ -105,17 +143,17 @@ export class RecordCreator extends LitElement {
             popup.close()
           }}
           @ok=${async (e: Event) => {
-              const view = e.currentTarget as RecordView
+            const view = e.currentTarget as RecordView
 
             // 레코드 밸리데이션 체크
-            const invalidFields = await this.validateRecord(view.record);
+            const invalidFields = await this.validateRecord(view.record)
             if (invalidFields.length > 0) {
               // const firstInvalidField = invalidFields[0];
               // if (firstInvalidField) {
               //   view.setFocus(firstInvalidField.field)
               // }
-              view.setFocusOnInvalid(invalidFields);
-              return false;
+              view.setFocusOnInvalid(invalidFields)
+              return false
             }
 
             popup.close()
@@ -172,23 +210,23 @@ export class RecordCreator extends LitElement {
               const view = e.currentTarget as RecordView
 
               // 레코드 밸리데이션 체크
-              const invalidFields = await this.validateRecord(view.record);
+              const invalidFields = await this.validateRecord(view.record)
               if (invalidFields.length > 0) {
-                const firstInvalidField = invalidFields[0];
+                const firstInvalidField = invalidFields[0]
                 if (firstInvalidField) {
-                  const fieldElement = view.renderRoot?.querySelector(`[name="${firstInvalidField}"]`);
+                  const fieldElement = view.renderRoot?.querySelector(`[name="${firstInvalidField}"]`)
                   if (fieldElement) {
-                    (fieldElement as HTMLElement).focus();
+                    ;(fieldElement as HTMLElement).focus()
                   }
                 }
-                return false;
+                return false
               }
-              
+
               if (await this.callback?.(view.record)) {
                 popup.close()
               } else {
                 // 밸리데이션 실패 시 처리
-                console.error('레코드 밸리데이션 실패');
+                console.error('레코드 밸리데이션 실패')
                 // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
               }
             })
@@ -223,4 +261,41 @@ export class RecordCreator extends LitElement {
       })
     )
   }
+
+  lightPopupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    OxPopup.open({
+      template: html`
+        <div title>${title}</div>
+        ${popupContent}
+      `,
+      parent: document.body,
+      preventCloseOnBlur: this.preventCloseOnBlur
+    })
+
+    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행
+  }
+
+  popupCustomCreator(originalContent: HTMLElement) {
+    const title = 'create'
+    const popupContent = originalContent.cloneNode(true) as HTMLElement
+    popupContent.removeAttribute('slot')
+
+    document.dispatchEvent(
+      new CustomEvent('open-popup', {
+        detail: {
+          template: popupContent,
+          options: {
+            backdrop: true,
+            size: 'large',
+            title
+          },
+          callback: this.customPopupCallback
+        }
+      })
+    )
+  }
 }

package/stories/accumulator-format.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/click-event-custom.stories.ts

@@ -0,0 +1,287 @@
+import '../src/index.js'
+import '../src/filters/filters-form.js'
+import '../src/sorters/sorters-control.js'
+import '../src/record-view/ox-record-creator.js'
+import '@operato/popup/ox-popup-list.js'
+import '@material/web/icon/icon.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+import { FetchHandler, FetchOption, GristEventHandler } from '../src/types.js'
+
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
+const fetchHandler: FetchHandler = async ({ page, limit }: FetchOption) => {
+  var total = 25
+  var start = (page! - 1) * limit!
+
+  await new Promise(resolve => setTimeout(resolve, 500))
+
+  return {
+    total,
+    records: Array(limit! * page! > total ? total % limit! : limit)
+      .fill('')
+      .map((item, idx) => {
+        return {
+          id: String(idx),
+          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+          accval: Math.random(),
+          accval2: Math.round(Math.random() * 15),
+          createdAt: Date.now(),
+          updatedAt: Date.now()
+        }
+      })
+  }
+}
+
+const config = {
+  columns: [
+    {
+      type: 'gutter',
+      gutterName: 'dirty'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'sequence'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'button',
+      icon: 'add',
+      title: 'add',
+      handlers: {
+        click: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - clicked')) as GristEventHandler,
+        dblclick: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - dblclicked')) as GristEventHandler,
+        contextmenu: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - contextmenued')) as GristEventHandler,
+        focus: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - focused')) as GristEventHandler
+      }
+    },
+    {
+      type: 'string',
+      name: 'id',
+      hidden: true
+    },
+    {
+      type: 'string',
+      name: 'name',
+      label: true,
+      header: 'name',
+      record: {
+        editable: true
+      },
+      filter: 'search',
+      sortable: true,
+      width: 120,
+      fixed: true
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: {
+        renderer: () => 'description',
+        style: 'text-transform: none;'
+      },
+      filter: 'search',
+      record: {
+        editable: true,
+        align: 'left'
+      },
+      width: 200
+    },
+    {
+      type: 'number',
+      name: 'accval',
+      label: true,
+      header: 'accval',
+      record: {
+        editable: true,
+        align: 'right',
+        defaultValue: 100,
+        format: '+$#,##0.00'
+      },
+      accumulator: 'avg',
+      sortable: true,
+      width: 130
+    },
+    {
+      type: 'number',
+      name: 'accval2',
+      label: true,
+      header: 'accval2',
+      record: {
+        editable: true,
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
+      },
+      accumulator: {
+        type: 'sum',
+        tag: true
+      },
+      sortable: true,
+      width: 130
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      record: {
+        editable: true,
+        defaultValue: {
+          name: 'now'
+        }
+      },
+      filter: 'between',
+      sortable: true,
+      width: 180
+    },
+    {
+      type: 'datetime',
+      name: 'createdAt',
+      header: 'created at',
+      record: {
+        editable: false
+      },
+      sortable: true,
+      width: 180
+    }
+  ],
+  rows: {
+    selectable: {
+      multiple: false
+    },
+    handlers: {
+      click: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - clicked')) as GristEventHandler,
+      dblclick: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - dblclicked')) as GristEventHandler,
+      contextmenu: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - contextmenued')) as GristEventHandler,
+      focus: ((columns, data, column, record, rowIndex, target, e) => console.log('row - focused')) as GristEventHandler
+    },
+    accumulator: true
+  },
+  sorters: [
+    {
+      name: 'name',
+      desc: true
+    }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200]
+  }
+}
+
+export default {
+  title: 'click events for custom popup in ox-grist',
+  component: 'ox-grist',
+  argTypes: {
+    config: { control: 'object' },
+    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
+    urlParamsSensitive: { control: 'boolean' },
+    withoutSearch: { control: 'boolean' },
+    preventCloseOnBlur: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  config: object
+  mode: 'GRID' | 'LIST' | 'CARD'
+  urlParamsSensitive: boolean
+  withoutSearch: boolean
+  preventCloseOnBlur: boolean
+  fetchHandler: FetchHandler
+}
+
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  withoutSearch = false,
+  preventCloseOnBlur = false,
+  fetchHandler
+}: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
+
+    <style>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
+
+    <style>
+      ox-grist {
+        height: 600px;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
+    <ox-grist
+      mode=${mode}
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      ?url-params-sensitive=${urlParamsSensitive}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form ?without-search=${withoutSearch} autofocus></ox-filters-form>
+          <ox-record-creator id="add" light-popup ?prevent-close-on-blur=${preventCloseOnBlur}>
+            <button><md-icon>add</md-icon></button>
+            <div slot="popup">
+              <label>Test</label>
+              <input />
+            </div>
+          </ox-record-creator>
+        </div>
+      </div>
+    </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config,
+  fetchHandler,
+  mode: 'GRID'
+}

package/stories/click-event.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/fixed-column.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/grid-setting.stories.ts

@@ -6,7 +6,7 @@ import { sleep } from '@operato/utils'
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '../src/personalizer/ox-grist-personalizer.js'
 import '../src/personalizer/ox-grist-filter-personalizer.js'
 

package/stories/grist-modes.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/group-header.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/textarea.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

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

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/stories/tree-column.stories.ts

@@ -1,7 +1,7 @@
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
-import '../src/record-view/record-creator.js'
+import '../src/record-view/ox-record-creator.js'
 import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 

package/dist/src/record-view/record-creator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean\n  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (this.lightPopup) {\n        this.lightPopupRecordView()\n      } else {\n        this.popupRecordView()\n      }\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.grist = this.closest('ox-grist') as DataGrist\n  }\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n    const columns = this.grist!.compiledConfig.columns;\n    const invalidFields: { field: string; reason: ValidationReason }[] = [];\n\n    columns.forEach(column => {\n      if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {\n        invalidFields.push({\n          field: column.name,\n          reason: ValidationReason.MANDATORY\n        });\n      }\n      // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.\n    });\n\n    return invalidFields\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n            // 레코드 밸리데이션 체크\n            const invalidFields = await this.validateRecord(view.record);\n            if (invalidFields.length > 0) {\n              // const firstInvalidField = invalidFields[0];\n              // if (firstInvalidField) {\n              //   view.setFocus(firstInvalidField.field)\n              // }\n              view.setFocusOnInvalid(invalidFields);\n              return false;\n            }\n\n            popup.close()\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\n    var recordView = document.createElement('ox-record-view') as RecordView\n\n    recordView.columns = columns\n    recordView.record = record\n    recordView.rowIndex = rowIndex\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              // 레코드 밸리데이션 체크\n              const invalidFields = await this.validateRecord(view.record);\n              if (invalidFields.length > 0) {\n                const firstInvalidField = invalidFields[0];\n                if (firstInvalidField) {\n                  const fieldElement = view.renderRoot?.querySelector(`[name=\"${firstInvalidField}\"]`);\n                  if (fieldElement) {\n                    (fieldElement as HTMLElement).focus();\n                  }\n                }\n                return false;\n              }\n              \n              if (await this.callback?.(view.record)) {\n                popup.close()\n              } else {\n                // 밸리데이션 실패 시 처리\n                console.error('레코드 밸리데이션 실패');\n                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.\n              }\n            })\n\n            recordView.addEventListener('field-change', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!(await validation.call(this, after, before, record, column))) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n}\n"]}