@operato/data-grist 0.3.16 → 0.3.20

package/dist/src/filters/filter-range-number.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export const FilterRangeNumber = (column, owner) => {
     const filter = column.filter;
-    const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
     return html `
     <input name="${column.name}" type="number" placeholder="minimum" /> ~
     <input name="${column.name}" type="number" placeholder="maximum" />

package/dist/src/filters/filter-range-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA;mBACM,MAAM,CAAC,IAAI;mBACX,MAAM,CAAC,IAAI;GAC3B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html`\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"minimum\" /> ~\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}
+{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;mBACM,MAAM,CAAC,IAAI;mBACX,MAAM,CAAC,IAAI;GAC3B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"minimum\" /> ~\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}

package/dist/src/filters/filter-select.js

@@ -1,8 +1,8 @@
 import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterSelect = (column, owner) => {
-    var _a;
-    const options = (typeof column.filter !== 'boolean' && ((_a = column.filter) === null || _a === void 0 ? void 0 : _a.options)) || [];
+    const filter = column.filter;
+    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || [];
     return html `
     ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
   `;

package/dist/src/filters/filter-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;IAClE,MAAM,OAAO,GAAG,CAAC,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAA,CAAC,IAAI,EAAE,CAAA;IAEpF,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const options = (typeof column.filter !== 'boolean' && column.filter?.options) || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,EAAE,CAAA;IAErC,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}

package/dist/src/filters/filters-form.d.ts

@@ -1,19 +1,23 @@
 import '@operato/input/ox-checkbox.js';
 import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
-import { LitElement, TemplateResult } from 'lit';
-import { GristConfig } from '../types';
+import '@operato/input/ox-input-search.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, FilterOperator, GristConfig } from '../types';
 export declare type QueryFilterRangeValue = [from: number, to: number];
 export declare type QueryFilter = {
     name: string;
-    operator?: 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+    operator: FilterOperator;
     value: any;
 };
 export declare class FiltersForm extends LitElement {
     static styles: import("lit").CSSResult[];
     config: GristConfig;
-    defaultOperator: string;
+    filterColumns: ColumnConfig[];
+    searchColumns: ColumnConfig[];
     form: HTMLFormElement;
+    connectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
     render(): TemplateResult;
-    get queryFilters(): QueryFilter[];
+    getQueryFilters(): Promise<QueryFilter[]>;
 }

package/dist/src/filters/filters-form.js

@@ -2,20 +2,53 @@ import { __decorate } from "tslib";
 import '@operato/input/ox-checkbox.js';
 import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-search.js';
 import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, queryAsync, state } from 'lit/decorators.js';
 import { FilterStyles } from './filter-styles';
 import { getFilterRenderer } from './registry';
 let FiltersForm = class FiltersForm extends LitElement {
     constructor() {
         super(...arguments);
-        this.defaultOperator = 'eq';
+        this.filterColumns = [];
+        this.searchColumns = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const grist = this.closest('ox-grist');
+        if (grist) {
+            this.config = grist.compiledConfig;
+            grist.addEventListener('config-change', (e) => {
+                this.config = e.detail;
+            });
+            this.renderRoot.addEventListener('change', async (e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: await this.getQueryFilters()
+                }));
+            });
+        }
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
+            this.filterColumns = filters.filter((columnConfig) => {
+                const filter = columnConfig.filter;
+                return filter.operator !== 'search';
+            });
+            this.searchColumns = filters.filter(columnConfig => {
+                const filter = columnConfig.filter;
+                return filter.operator === 'search';
+            });
+        }
     }
     render() {
-        const columns = this.config.columns.filter(columnConfig => columnConfig.filter);
         return html `
       <form>
-        ${columns.map((column) => {
+        ${this.searchColumns.length === 0 ? html `` : html ` <ox-input-search name="search"></ox-input-search> `}
+        ${this.filterColumns.map((column) => {
             const { name, label, filter } = column;
             const placeholder = typeof label === 'string'
                 ? name
@@ -24,8 +57,8 @@ let FiltersForm = class FiltersForm extends LitElement {
                     : label.renderer
                         ? label.renderer()
                         : name;
-            const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
-            const idx = typeof filter === 'boolean' ? 0 : filter.operator === 'between' ? 1 : 0;
+            const type = filter.type;
+            const idx = filter.operator === 'between' ? 1 : 0;
             const renderer = getFilterRenderer(type)[idx];
             if (!renderer) {
                 return html ``;
@@ -43,13 +76,14 @@ let FiltersForm = class FiltersForm extends LitElement {
       </form>
     `;
     }
-    get queryFilters() {
-        var formData = new FormData(this.form);
-        return this.config.columns
-            .filter(columnConfig => columnConfig.filter)
+    async getQueryFilters() {
+        var _a;
+        const formData = new FormData(await this.form);
+        const search = (_a = formData.get('search')) === null || _a === void 0 ? void 0 : _a.toString();
+        var filters = this.filterColumns
             .map((column) => {
             const { name, filter } = column;
-            const operator = typeof filter === 'boolean' ? 'eq' : filter.operator || 'eq';
+            const operator = filter.operator;
             var value = formData.getAll(name);
             if (value.length == 0) {
                 return;
@@ -64,6 +98,17 @@ let FiltersForm = class FiltersForm extends LitElement {
             };
         })
             .filter(result => result !== undefined);
+        if (search) {
+            filters = filters.concat(this.searchColumns.map((column) => {
+                const { name } = column;
+                return {
+                    name,
+                    operator: 'search',
+                    value: `%${search}%`
+                };
+            }));
+        }
+        return filters;
     }
 };
 FiltersForm.styles = [
@@ -84,13 +129,16 @@ FiltersForm.styles = [
     `
 ];
 __decorate([
-    property({ type: Object })
+    state()
 ], FiltersForm.prototype, "config", void 0);
 __decorate([
-    property({ type: String })
-], FiltersForm.prototype, "defaultOperator", void 0);
+    state()
+], FiltersForm.prototype, "filterColumns", void 0);
+__decorate([
+    state()
+], FiltersForm.prototype, "searchColumns", void 0);
 __decorate([
-    query('form')
+    queryAsync('form')
 ], FiltersForm.prototype, "form", void 0);
 FiltersForm = __decorate([
     customElement('ox-filters-form')

package/dist/src/filters/filters-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ColumnConfig } from '..'\nimport { GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator?:\n    | 'eq'\n    | 'between'\n    | 'gte'\n    | 'lte'\n    | 'is_not_true'\n    | 'in'\n    | 'like'\n    | 'i_like'\n    | 'noteq'\n    | 'is_empty_num_id'\n    | 'is_blank'\n    | 'is_present'\n    | 'is_not_false'\n    | 'is_true'\n    | 'is_false'\n    | 'is_not_null'\n    | 'is_null'\n    | 'notin_with_null'\n    | 'notin'\n    | 'gt'\n    | 'lt'\n    | 'i_nlike'\n    | 'nlike'\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config!: GristConfig\n  @property({ type: String }) defaultOperator: string = 'eq'\n  @query('form') form!: HTMLFormElement\n\n  render(): TemplateResult {\n    const columns = this.config.columns.filter(columnConfig => columnConfig.filter)\n\n    return html`\n      <form>\n        ${columns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n          const idx = typeof filter === 'boolean' ? 0 : filter!.operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  get queryFilters(): QueryFilter[] {\n    var formData = new FormData(this.form)\n\n    return this.config.columns\n      .filter(columnConfig => columnConfig.filter)\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = typeof filter === 'boolean' ? 'eq' : filter!.operator || 'eq'\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n  }\n}\n"]}
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        e.stopPropagation()\n\n        this.dispatchEvent(\n          new CustomEvent('change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const idx = (filter as FilterConfigObject).operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = (filter as FilterConfigObject).operator\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n}\n"]}

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

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

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.js

@@ -17,6 +17,8 @@ export function recordViewBodyClickHandler(e) {
         return;
     }
     this.currentTarget = target;
-    target.setAttribute('editing', 'true');
+    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

@@ -1 +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,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AACxC,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  target.setAttribute('editing', 'true')\n}\n"]}
+{"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.js

@@ -4,7 +4,6 @@
  * - handler의 this 는 ox-record-view-body임.
  */
 export async function recordViewBodyKeydownHandler(e) {
-    // e.preventDefault()
     switch (e.key) {
         case 'Esc':
         case 'Escape':
@@ -19,78 +18,5 @@ export async function recordViewBodyKeydownHandler(e) {
             break;
         default:
     }
-    // arrow-key
-    // var keyCode = e.keyCode
-    // var { row = 0, column = 0 } = this.focused || {}
-    // var { records = [] } = this.data || {}
-    // var maxrow = this.config.rows.appendable ? records.length : records.length - 1
-    // var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1
-    // if (this.currentTarget) {
-    //   switch (keyCode) {
-    //     case KEYCODE.KEY_ESC:
-    //     /* TODO 편집이 취소되어야 한다. */
-    //     case KEYCODE.KEY_ENTER:
-    //       this.currentTarget = null
-    //       this.focus()
-    //       return
-    //     // case KEYCODE.KEY_TAP:
-    //     //   this.currentTarget = null
-    //     //   column = Math.min(maxcolumn, column + 1)
-    //     //   this.focus()
-    //     //   break
-    //     // case KEYCODE.KEY_DOWN:
-    //     //   this.currentTarget = null
-    //     //   row = Math.min(maxrow, row + 1)
-    //     //   this.focus()
-    //     //   break
-    //     default:
-    //       return
-    //   }
-    // } else {
-    //   switch (keyCode) {
-    //     case KEYCODE.KEY_UP:
-    //       row = Math.max(0, row - 1)
-    //       break
-    //     case KEYCODE.KEY_DOWN:
-    //       row = Math.min(maxrow, row + 1)
-    //       break
-    //     case KEYCODE.KEY_ENTER:
-    //       this.startEditTarget(row, column)
-    //       return
-    //     case KEYCODE.KEY_LEFT:
-    //     case KEYCODE.KEY_BACKSPACE:
-    //       column = Math.max(0, column - 1)
-    //       break
-    //     case KEYCODE.KEY_RIGHT:
-    //     case KEYCODE.KEY_TAP:
-    //       column = Math.min(maxcolumn, column + 1)
-    //       break
-    //     case KEYCODE.KEY_PAGEUP:
-    //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-    //       row = Math.max(0, row - 10)
-    //       break
-    //     case KEYCODE.KEY_PAGEDOWN:
-    //       row = Math.min(maxrow, row + 10)
-    //       break
-    //     case KEYCODE.KEY_ESC:
-    //       return
-    //     default:
-    //       if (
-    //         (keyCode > 47 && keyCode < 58) || // number keys
-    //         keyCode == 32 ||
-    //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
-    //         (keyCode > 64 && keyCode < 91) || // letter keys
-    //         (keyCode > 95 && keyCode < 112) || // numpad keys
-    //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
-    //         (keyCode > 218 && keyCode < 223) // [\]' (in order)
-    //       ) {
-    //         this.startEditTarget(row, column)
-    //       }
-    //       return
-    //   }
-    // }
-    // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-    //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))
-    // }
 }
 //# sourceMappingURL=record-view-body-keydown-handler.js.map

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

@@ -1 +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,qBAAqB;IAErB,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;IAED,YAAY;IACZ,0BAA0B;IAC1B,mDAAmD;IACnD,yCAAyC;IACzC,iFAAiF;IACjF,mFAAmF;IAEnF,4BAA4B;IAC5B,uBAAuB;IACvB,4BAA4B;IAC5B,+BAA+B;IAC/B,8BAA8B;IAC9B,kCAAkC;IAClC,qBAAqB;IACrB,eAAe;IAEf,+BAA+B;IAC/B,qCAAqC;IACrC,oDAAoD;IACpD,wBAAwB;IACxB,iBAAiB;IAEjB,gCAAgC;IAChC,qCAAqC;IACrC,2CAA2C;IAC3C,wBAAwB;IACxB,iBAAiB;IAEjB,eAAe;IACf,eAAe;IACf,MAAM;IACN,WAAW;IACX,uBAAuB;IACvB,2BAA2B;IAC3B,mCAAmC;IACnC,cAAc;IAEd,6BAA6B;IAC7B,wCAAwC;IACxC,cAAc;IAEd,8BAA8B;IAC9B,0CAA0C;IAC1C,eAAe;IAEf,6BAA6B;IAC7B,kCAAkC;IAClC,yCAAyC;IACzC,cAAc;IAEd,8BAA8B;IAC9B,4BAA4B;IAC5B,iDAAiD;IACjD,cAAc;IAEd,+BAA+B;IAC/B,+CAA+C;IAC/C,oCAAoC;IACpC,cAAc;IAEd,iCAAiC;IACjC,yCAAyC;IACzC,cAAc;IAEd,4BAA4B;IAC5B,eAAe;IAEf,eAAe;IACf,aAAa;IACb,2DAA2D;IAC3D,2BAA2B;IAC3B,+FAA+F;IAC/F,2DAA2D;IAC3D,4DAA4D;IAC5D,oEAAoE;IACpE,8DAA8D;IAC9D,YAAY;IACZ,4CAA4C;IAC5C,UAAU;IACV,eAAe;IACf,MAAM;IACN,IAAI;IAEJ,qFAAqF;IACrF,oHAAoH;IACpH,IAAI;AACN,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  // e.preventDefault()\n\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  // arrow-key\n  // var keyCode = e.keyCode\n  // var { row = 0, column = 0 } = this.focused || {}\n  // var { records = [] } = this.data || {}\n  // var maxrow = this.config.rows.appendable ? records.length : records.length - 1\n  // var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  // if (this.currentTarget) {\n  //   switch (keyCode) {\n  //     case KEYCODE.KEY_ESC:\n  //     /* TODO 편집이 취소되어야 한다. */\n  //     case KEYCODE.KEY_ENTER:\n  //       this.currentTarget = null\n  //       this.focus()\n  //       return\n\n  //     // case KEYCODE.KEY_TAP:\n  //     //   this.currentTarget = null\n  //     //   column = Math.min(maxcolumn, column + 1)\n  //     //   this.focus()\n  //     //   break\n\n  //     // case KEYCODE.KEY_DOWN:\n  //     //   this.currentTarget = null\n  //     //   row = Math.min(maxrow, row + 1)\n  //     //   this.focus()\n  //     //   break\n\n  //     default:\n  //       return\n  //   }\n  // } else {\n  //   switch (keyCode) {\n  //     case KEYCODE.KEY_UP:\n  //       row = Math.max(0, row - 1)\n  //       break\n\n  //     case KEYCODE.KEY_DOWN:\n  //       row = Math.min(maxrow, row + 1)\n  //       break\n\n  //     case KEYCODE.KEY_ENTER:\n  //       this.startEditTarget(row, column)\n  //       return\n\n  //     case KEYCODE.KEY_LEFT:\n  //     case KEYCODE.KEY_BACKSPACE:\n  //       column = Math.max(0, column - 1)\n  //       break\n\n  //     case KEYCODE.KEY_RIGHT:\n  //     case KEYCODE.KEY_TAP:\n  //       column = Math.min(maxcolumn, column + 1)\n  //       break\n\n  //     case KEYCODE.KEY_PAGEUP:\n  //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n  //       row = Math.max(0, row - 10)\n  //       break\n\n  //     case KEYCODE.KEY_PAGEDOWN:\n  //       row = Math.min(maxrow, row + 10)\n  //       break\n\n  //     case KEYCODE.KEY_ESC:\n  //       return\n\n  //     default:\n  //       if (\n  //         (keyCode > 47 && keyCode < 58) || // number keys\n  //         keyCode == 32 ||\n  //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)\n  //         (keyCode > 64 && keyCode < 91) || // letter keys\n  //         (keyCode > 95 && keyCode < 112) || // numpad keys\n  //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)\n  //         (keyCode > 218 && keyCode < 223) // [\\]' (in order)\n  //       ) {\n  //         this.startEditTarget(row, column)\n  //       }\n  //       return\n  //   }\n  // }\n\n  // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n  //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  // }\n}\n"]}
+{"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.d.ts

@@ -2,12 +2,15 @@ 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;
+    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

@@ -2,16 +2,21 @@ import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import './record-view';
 import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { OxPopup } from '@operato/popup';
 let RecordCreator = class RecordCreator extends LitElement {
     constructor() {
         super();
-        this.record = { __dirty__: '+' };
+        this.lightPopup = false;
         this.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
-            this.popupRecordView();
+            if (this.lightPopup) {
+                this.lightPopupRecordView();
+            }
+            else {
+                this.popupRecordView();
+            }
         });
     }
     connectedCallback() {
@@ -21,20 +26,15 @@ let RecordCreator = class RecordCreator extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
-    popupRecordView() {
+    lightPopupRecordView() {
         const config = this.grist.compiledConfig;
-        var titleField = config.list.fields[0] || 'name';
-        var title = this.record[titleField];
+        var title = 'create';
         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 `
+        <div title>${title}</div>
         <ox-record-view
           only-for-edit
           @field-change=${(e) => {
@@ -51,7 +51,6 @@ let RecordCreator = class RecordCreator extends LitElement {
                     [column.name]: after
                 };
             }}
-          .config=${config}
           .columns=${columns}
           .record=${record}
           .rowIndex=${rowIndex}
@@ -76,13 +75,69 @@ let RecordCreator = class RecordCreator extends LitElement {
             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([
-    state()
-], RecordCreator.prototype, "record", void 0);
+    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);