@operato/data-grist 0.3.13 → 0.3.17

package/dist/src/handlers/record-view-handler.js

@@ -1,44 +1,14 @@
-import '../record-view/record-view';
-import { html } from 'lit';
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
  * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
  */
 export const RecordViewHandler = function (columns, data, column, record, rowIndex, field) {
-    document.dispatchEvent(new CustomEvent('open-popup', {
+    field.dispatchEvent(new CustomEvent('show-record-view', {
+        bubbles: true,
+        composed: true,
         detail: {
-            template: html `
-          <record-view
-            .field=${field}
-            .columns=${columns}
-            .column=${column}
-            .record=${record}
-            .rowIndex=${rowIndex}
-            @reset=${(e) => {
-                field.dispatchEvent(new CustomEvent('record-reset', {
-                    bubbles: true,
-                    composed: true,
-                    detail: record
-                }));
-            }}
-            @cancel=${(e) => {
-                field.dispatchEvent(new CustomEvent('record-reset', {
-                    bubbles: true,
-                    composed: true,
-                    detail: record
-                }));
-                // popup.close()
-            }}
-            @ok=${(e) => {
-                // popup.close()
-            }}
-          ></record-view>
-        `
-        },
-        options: {
-            backdrop: true,
-            size: 'large',
-            title: record['name']
+            record,
+            row: rowIndex
         }
     }));
 };

package/dist/src/handlers/record-view-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/handlers/record-view-handler.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAKnC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;QAC5B,MAAM,EAAE;YACN,QAAQ,EAAE,IAAI,CAAA;;qBAED,KAAK;uBACH,OAAO;sBACR,MAAM;sBACN,MAAM;wBACJ,QAAQ;qBACX,CAAC,CAAQ,EAAE,EAAE;gBACpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,MAAM;iBACf,CAAC,CACH,CAAA;YACH,CAAC;sBACS,CAAC,CAAQ,EAAE,EAAE;gBACrB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,MAAM;iBACf,CAAC,CACH,CAAA;gBACD,gBAAgB;YAClB,CAAC;kBACK,CAAC,CAAQ,EAAE,EAAE;gBACjB,gBAAgB;YAClB,CAAC;;SAEJ;SACF;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;SACtB;KACK,CAAC,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '../record-view/record-view'\n\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { html } from 'lit'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  document.dispatchEvent(\n    new CustomEvent('open-popup', {\n      detail: {\n        template: html`\n          <record-view\n            .field=${field}\n            .columns=${columns}\n            .column=${column}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            @reset=${(e: Event) => {\n              field.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: record\n                })\n              )\n            }}\n            @cancel=${(e: Event) => {\n              field.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: record\n                })\n              )\n              // popup.close()\n            }}\n            @ok=${(e: Event) => {\n              // popup.close()\n            }}\n          ></record-view>\n        `\n      },\n      options: {\n        backdrop: true,\n        size: 'large',\n        title: record['name']\n      }\n    } as any)\n  )\n}\n"]}
+{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/handlers/record-view-handler.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,kBAAkB,EAAE;QAClC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,MAAM;YACN,GAAG,EAAE,QAAQ;SACd;KACF,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('show-record-view', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        record,\n        row: rowIndex\n      }\n    })\n  )\n}\n"]}

package/dist/src/handlers/select-row-toggle.d.ts

@@ -1,3 +1,3 @@
-import { ColumnConfig, GristData, GristRecord } from '../types';
 import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristData, GristRecord } from '../types';
 export declare const SelectRowToggle: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => void;

package/dist/src/handlers/select-row-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-row-toggle.js","sourceRoot":"","sources":["../../../src/handlers/select-row-toggle.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,UAC7B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;YAC5B,CAAC,CAAC;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC;aAClB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC;aAChB;KACN,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ColumnConfig, GristData, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const SelectRowToggle = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('select-record-change', {\n      bubbles: true,\n      composed: true,\n      detail: record['__selected__']\n        ? {\n            removed: [record]\n          }\n        : {\n            added: [record]\n          }\n    })\n  )\n}\n"]}
+{"version":3,"file":"select-row-toggle.js","sourceRoot":"","sources":["../../../src/handlers/select-row-toggle.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,UAC7B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;YAC5B,CAAC,CAAC;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC;aAClB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC;aAChB;KACN,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const SelectRowToggle = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('select-record-change', {\n      bubbles: true,\n      composed: true,\n      detail: record['__selected__']\n        ? {\n            removed: [record]\n          }\n        : {\n            added: [record]\n          }\n    })\n  )\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-click-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void;

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js

@@ -0,0 +1,24 @@
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export function recordViewBodyClickHandler(e) {
+    e.stopPropagation();
+    /* target should be 'ox-grid-field' */
+    var target = e.target;
+    if (!this.onlyForEdit && this.currentTarget) {
+        this.focus();
+        this.currentTarget.removeAttribute('editing');
+    }
+    if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
+        this.focus();
+        this.currentTarget = null;
+        return;
+    }
+    this.currentTarget = target;
+    if (!this.onlyForEdit) {
+        target.setAttribute('editing', 'true');
+    }
+}
+//# sourceMappingURL=record-view-body-click-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-click-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-click-handler.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAuB,CAAQ;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,sCAAsC;IACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IAEtC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;QAC3C,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;KAC9C;IAED,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QACzB,OAAM;KACP;IAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;KACvC;AACH,CAAC","sourcesContent":["import { DataGridField } from '../../data-grid/data-grid-field'\nimport { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 click handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-grid-field' */\n  var target = e.target as DataGridField\n\n  if (!this.onlyForEdit && this.currentTarget) {\n    this.focus()\n    this.currentTarget.removeAttribute('editing')\n  }\n\n  if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {\n    this.focus()\n    this.currentTarget = null\n    return\n  }\n\n  this.currentTarget = target\n  if (!this.onlyForEdit) {\n    target.setAttribute('editing', 'true')\n  }\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void>;

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js

@@ -0,0 +1,22 @@
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export async function recordViewBodyKeydownHandler(e) {
+    switch (e.key) {
+        case 'Esc':
+        case 'Escape':
+        /* TODO 편집이 취소되어야 한다. */
+        case 'Enter':
+            /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
+            !this.onlyForEdit && this.focus();
+            if (!this.onlyForEdit && this.currentTarget) {
+                this.currentTarget.removeAttribute('editing');
+            }
+            this.currentTarget = null;
+            break;
+        default:
+    }
+}
+//# sourceMappingURL=record-view-body-keydown-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-keydown-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,4BAA4B,CAAuB,CAAQ;IAC/E,QAAS,CAAmB,CAAC,GAAG,EAAE;QAChC,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ,CAAC;QACd,wBAAwB;QACxB,KAAK,OAAO;YACV,+DAA+D;YAC/D,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YAEjC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC3C,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;aAC9C;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAEzB,MAAK;QACP,QAAQ;KACT;AACH,CAAC","sourcesContent":["import { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 keydown handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {\n  switch ((e as KeyboardEvent).key) {\n    case 'Esc':\n    case 'Escape':\n    /* TODO 편집이 취소되어야 한다. */\n    case 'Enter':\n      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */\n      !this.onlyForEdit && this.focus()\n\n      if (!this.onlyForEdit && this.currentTarget) {\n        this.currentTarget.removeAttribute('editing')\n      }\n\n      this.currentTarget = null\n\n      break\n    default:\n  }\n}\n"]}

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

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

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

@@ -1,2 +1,3 @@
 export * from './record-view';
+export * from './record-creator';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/record-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from './record-view'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/record-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './record-view'\nexport * from './record-creator'\n"]}

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

@@ -0,0 +1,13 @@
+import '@material/mwc-icon';
+import './record-view';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist';
+import { GristRecord } from '../types';
+export declare class RecordCreator extends LitElement {
+    grist?: DataGrist;
+    record: GristRecord;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    popupRecordView(): void;
+}

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

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './record-view';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let RecordCreator = class RecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.record = { __dirty__: '+' };
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.popupRecordView();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        var titleField = config.list.fields[0] || 'name';
+        var title = this.record[titleField];
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+        if (typeof title == 'object') {
+            var column = config.columns.find(column => column.name == titleField);
+            title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, rowIndex, this);
+        }
+        var popup = OxPopup.open({
+            template: html `
+        <ox-record-view
+          only-for-edit
+          @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
+                };
+            }}
+          .config=${config}
+          .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
+        });
+    }
+};
+__decorate([
+    state()
+], RecordCreator.prototype, "grist", void 0);
+__decorate([
+    state()
+], RecordCreator.prototype, "record", void 0);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator%20copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-creator copy.js","sourceRoot":"","sources":["../../../src/record-view/record-creator copy.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { RecordView } from '.'\nimport { ColumnConfig } from '..'\nimport { DataGrist } from '../data-grist'\nimport { GristRecord } from '../types'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @state() record: GristRecord = { __dirty__: '+' }\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.popupRecordView()\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  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    var titleField = config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, record, rowIndex, this)\n    }\n\n    var popup = OxPopup.open({\n      template: html`\n        <ox-record-view\n          only-for-edit\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          .config=${config}\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    })\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+import '@material/mwc-icon';
+import './record-view';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist';
+import { GristRecord } from '../types';
+export declare class RecordCreator extends LitElement {
+    grist?: DataGrist;
+    record: GristRecord;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    popupRecordView(): void;
+}

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

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './record-view';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let RecordCreator = class RecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.record = { __dirty__: '+' };
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.popupRecordView();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        var titleField = config.list.fields[0] || 'name';
+        var title = this.record[titleField];
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+        if (typeof title == 'object') {
+            var column = config.columns.find(column => column.name == titleField);
+            title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, rowIndex, this);
+        }
+        var popup = OxPopup.open({
+            template: html `
+        <ox-record-view
+          only-for-edit
+          @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
+                };
+            }}
+          .config=${config}
+          .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
+        });
+    }
+};
+__decorate([
+    state()
+], RecordCreator.prototype, "grist", void 0);
+__decorate([
+    state()
+], RecordCreator.prototype, "record", void 0);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator-backup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-creator-backup.js","sourceRoot":"","sources":["../../../src/record-view/record-creator-backup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { RecordView } from '.'\nimport { ColumnConfig } from '..'\nimport { DataGrist } from '../data-grist'\nimport { GristRecord } from '../types'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @state() record: GristRecord = { __dirty__: '+' }\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.popupRecordView()\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  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    var titleField = config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, record, rowIndex, this)\n    }\n\n    var popup = OxPopup.open({\n      template: html`\n        <ox-record-view\n          only-for-edit\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          .config=${config}\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    })\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+import '@material/mwc-icon';
+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;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    lightPopupRecordView(): void;
+    popupRecordView(): void;
+}

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

@@ -0,0 +1,145 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+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.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
+          only-for-edit
+          @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
+        });
+    }
+    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.setAttribute('only-for-edit', '');
+        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', (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
+                        };
+                    });
+                    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);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\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\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          only-for-edit\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    })\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.setAttribute('only-for-edit', '')\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', (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 (!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"]}

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

@@ -7,10 +7,9 @@ export declare class RecordViewBody extends LitElement {
     columns: ColumnConfig[];
     record: GristRecord;
     rowIndex: number;
-    private editTarget;
-    private _focusedListener;
+    onlyForEdit: boolean;
+    currentTarget: any;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
     _renderLabel(column: ColumnConfig): import("lit-html").TemplateResult<1>;
 }