@operato/data-grist 7.1.26 → 7.1.27

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/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

package/translations/en.json

@@ -6,5 +6,9 @@
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",
   "label.accumulator_max": "min",
-  "label.accumulator_min": "max"
+  "label.accumulator_min": "max",
+  "text.validation-reason.MANDATORY": "mandatory",
+  "text.validation-reason.FORMAT": "invalid format",
+  "text.validation-reason.RANGE": "out of range",
+  "text.validation-reason.UNIQUE": "duplicate value"
 }

package/translations/ja.json

@@ -5,5 +5,9 @@
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",
   "label.accumulator_max": "最小",
-  "label.accumulator_min": "最大"
+  "label.accumulator_min": "最大",
+  "text.validation-reason.MANDATORY": "必須",
+  "text.validation-reason.FORMAT": "形式が正しくありません",
+  "text.validation-reason.RANGE": "範囲外",
+  "text.validation-reason.UNIQUE": "重複"
 }

package/translations/ko.json

@@ -5,5 +5,9 @@
   "label.accumulator_avg": "평균",
   "label.accumulator_count": "계수",
   "label.accumulator_max": "최소",
-  "label.accumulator_min": "최대"
+  "label.accumulator_min": "최대",
+  "text.validation-reason.MANDATORY": "필수 입력 항목입니다.",
+  "text.validation-reason.FORMAT": "잘못된 형식입니다.",
+  "text.validation-reason.RANGE": "범위를 벗어났습니다.",
+  "text.validation-reason.UNIQUE": "중복된 값입니다."
 }

package/translations/ms.json

@@ -5,5 +5,9 @@
   "label.accumulator_avg": "Purata",
   "label.accumulator_count": "Kiraan",
   "label.accumulator_max": "Minimum",
-  "label.accumulator_min": "Maksimum"
+  "label.accumulator_min": "Maksimum",
+  "text.validation-reason.MANDATORY": "wajib",
+  "text.validation-reason.FORMAT": "format tidak sah",
+  "text.validation-reason.RANGE": "diluar jangka",
+  "text.validation-reason.UNIQUE": "nilai duplikat"
 }

package/translations/zh.json

@@ -5,5 +5,9 @@
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "计数",
   "label.accumulator_max": "最小",
-  "label.accumulator_min": "最大"
+  "label.accumulator_min": "最大",
+  "text.validation-reason.MANDATORY": "必填",
+  "text.validation-reason.FORMAT": "格式不正确",
+  "text.validation-reason.RANGE": "超出范围",
+  "text.validation-reason.UNIQUE": "重复值"
 }

package/dist/src/record-view/record-creator.d.ts

@@ -1,17 +0,0 @@
-import '@material/web/icon/icon.js';
-import './record-view';
-import { LitElement } from 'lit';
-import { DataGrist } from '../data-grist';
-export declare class RecordCreator extends LitElement {
-    grist?: DataGrist;
-    callback?: (operation: {
-        [key: string]: any;
-    }) => boolean;
-    lightPopup: boolean;
-    preventCloseOnBlur: boolean;
-    constructor();
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    lightPopupRecordView(): void;
-    popupRecordView(): void;
-}

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

@@ -1,148 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import './record-view';
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { OxPopup } from '@operato/popup';
-let RecordCreator = class RecordCreator extends LitElement {
-    constructor() {
-        super();
-        this.lightPopup = false;
-        this.preventCloseOnBlur = false;
-        this.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (this.lightPopup) {
-                this.lightPopupRecordView();
-            }
-            else {
-                this.popupRecordView();
-            }
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.grist = this.closest('ox-grist');
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    lightPopupRecordView() {
-        const config = this.grist.compiledConfig;
-        var title = 'create';
-        const rowIndex = -1;
-        var record = {};
-        const columns = config.columns;
-        var popup = OxPopup.open({
-            template: html `
-        <div title>${title}</div>
-        <ox-record-view
-          @field-change=${(e) => {
-                const view = e.currentTarget;
-                var { after, before, column, record, row } = e.detail;
-                var validation = column.validation;
-                if (validation && typeof validation == 'function') {
-                    if (!validation.call(this, after, before, record, column)) {
-                        return;
-                    }
-                }
-                view.record = {
-                    ...record,
-                    [column.name]: after
-                };
-            }}
-          .columns=${columns}
-          .record=${record}
-          .rowIndex=${rowIndex}
-          @reset=${(e) => {
-                const view = e.currentTarget;
-                view.record = {};
-            }}
-          @cancel=${(e) => {
-                popup.close();
-            }}
-          @ok=${(e) => {
-                popup.close();
-                const view = e.currentTarget;
-                this.dispatchEvent(new CustomEvent('ok', {
-                    bubbles: true,
-                    composed: true,
-                    detail: view.record
-                }));
-            }}
-        ></ox-record-view>
-      `,
-            parent: document.body,
-            preventCloseOnBlur: this.preventCloseOnBlur
-        });
-    }
-    popupRecordView() {
-        const config = this.grist.compiledConfig;
-        const rowIndex = -1;
-        var record = {};
-        const columns = config.columns;
-        var title = 'create';
-        var recordView = document.createElement('ox-record-view');
-        recordView.columns = columns;
-        recordView.record = record;
-        recordView.rowIndex = rowIndex;
-        document.dispatchEvent(new CustomEvent('open-popup', {
-            detail: {
-                template: recordView,
-                options: {
-                    backdrop: true,
-                    size: 'large',
-                    title
-                },
-                callback: (popup) => {
-                    recordView.addEventListener('reset', (e) => {
-                        const view = e.currentTarget;
-                        view.record = {};
-                    });
-                    recordView.addEventListener('cancel', (e) => {
-                        popup.close();
-                    });
-                    recordView.addEventListener('ok', async (e) => {
-                        var _a;
-                        const view = e.currentTarget;
-                        if (await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, view.record))) {
-                            popup.close();
-                        }
-                    });
-                    recordView.addEventListener('field-change', async (e) => {
-                        const view = e.currentTarget;
-                        var { after, before, column, record, row } = e.detail;
-                        var validation = column.validation;
-                        if (validation && typeof validation == 'function') {
-                            if (!(await validation.call(this, after, before, record, column))) {
-                                return;
-                            }
-                        }
-                        view.record = {
-                            ...record,
-                            [column.name]: after
-                        };
-                    });
-                    popup.onclosed = () => { };
-                }
-            }
-        }));
-    }
-};
-__decorate([
-    state()
-], RecordCreator.prototype, "grist", void 0);
-__decorate([
-    property({ type: Object })
-], RecordCreator.prototype, "callback", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'light-popup' })
-], RecordCreator.prototype, "lightPopup", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-close-on-blur' })
-], RecordCreator.prototype, "preventCloseOnBlur", void 0);
-RecordCreator = __decorate([
-    customElement('ox-record-creator')
-], RecordCreator);
-export { RecordCreator };
-//# sourceMappingURL=record-creator.js.map

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 } 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  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=${(e: Event) => {\n            popup.close()\n\n            const view = e.currentTarget as RecordView\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              if (await this.callback?.(view.record)) {\n                popup.close()\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"]}