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

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.51...v8.0.0-alpha.52) (2024-12-03)
+
+
+### :bug: Bug Fix
+
+* support custom popup for ox-record-create ([18f674c](https://github.com/hatiolab/operato/commit/18f674c4e37127b9e482223e9f29f58f95e598ce))
+
+
+
+## [8.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.50...v8.0.0-alpha.51) (2024-11-29)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
 ## [8.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
 
 

package/dist/src/gutters/gutter-sequence.d.ts

@@ -3,7 +3,7 @@ export declare class GutterSequence {
     static instance(config?: Partial<ColumnConfig>): {
         type: string;
         name: string;
-        gutterName?: ("button" | "sequence" | "row-selector" | "dirty") | undefined;
+        gutterName?: "button" | "sequence" | "row-selector" | "dirty" | undefined;
         title?: string | undefined;
         fixed?: boolean | undefined;
         icon?: string | undefined;

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

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

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

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

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

@@ -3,11 +3,11 @@ import './record-view';
 import { LitElement } from 'lit';
 import { DataGrist } from '../data-grist';
 import { GristRecord, ValidationReason } from '../types';
-export declare class RecordCreator extends LitElement {
+export declare class OxRecordCreator extends LitElement {
+    static styles: import("lit").CSSResult[];
     grist?: DataGrist;
-    callback?: (operation: {
-        [key: string]: any;
-    }) => boolean;
+    callback?: (record: GristRecord) => boolean;
+    customPopupCallback?: (popup: any) => boolean;
     lightPopup: boolean;
     preventCloseOnBlur: boolean;
     constructor();
@@ -17,6 +17,10 @@ export declare class RecordCreator extends LitElement {
         field: string;
         reason: ValidationReason;
     }[];
+    openLightPopup(): void;
+    openPopup(): void;
     lightPopupRecordView(): void;
     popupRecordView(): void;
+    lightPopupCustomCreator(originalContent: HTMLElement): void;
+    popupCustomCreator(originalContent: HTMLElement): void;
 }

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

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import './record-view';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxPopup } from '@operato/popup';
 import { ValidationReason } from '../types';
-let RecordCreator = class RecordCreator extends LitElement {
+let OxRecordCreator = class OxRecordCreator extends LitElement {
     constructor() {
         super();
         this.lightPopup = false;
@@ -14,10 +14,10 @@ let RecordCreator = class RecordCreator extends LitElement {
             e.preventDefault();
             e.stopPropagation();
             if (this.lightPopup) {
-                this.lightPopupRecordView();
+                this.openLightPopup();
             }
             else {
-                this.popupRecordView();
+                this.openPopup();
             }
         });
     }
@@ -26,23 +26,50 @@ let RecordCreator = class RecordCreator extends LitElement {
         this.grist = this.closest('ox-grist');
     }
     render() {
-        return html `<slot></slot>`;
+        return html `
+      <slot></slot>
+      <slot name="popup"></slot>
+    `;
     }
     validateRecord(record) {
         const columns = this.grist.compiledConfig.columns;
         const invalidFields = [];
         columns.forEach(column => {
             var _a;
-            if (((_a = column.record) === null || _a === void 0 ? void 0 : _a.mandatory) && (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
+            if (((_a = column.record) === null || _a === void 0 ? void 0 : _a.mandatory) &&
+                (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
                 invalidFields.push({
                     field: column.name,
                     reason: ValidationReason.MANDATORY
                 });
             }
-            // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.
         });
         return invalidFields;
     }
+    openLightPopup() {
+        var _a;
+        const slot = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name='popup']`);
+        const slottedElements = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true });
+        const originalContent = slottedElements === null || slottedElements === void 0 ? void 0 : slottedElements[0];
+        if (originalContent) {
+            this.lightPopupCustomCreator(originalContent);
+        }
+        else {
+            this.lightPopupRecordView();
+        }
+    }
+    openPopup() {
+        var _a;
+        const slot = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name='popup']`);
+        const slottedElements = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true });
+        const originalContent = slottedElements === null || slottedElements === void 0 ? void 0 : slottedElements[0];
+        if (originalContent) {
+            this.popupCustomCreator(originalContent);
+        }
+        else {
+            this.popupRecordView();
+        }
+    }
     lightPopupRecordView() {
         const config = this.grist.compiledConfig;
         var title = 'create';
@@ -138,6 +165,7 @@ let RecordCreator = class RecordCreator extends LitElement {
                             if (firstInvalidField) {
                                 const fieldElement = (_a = view.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${firstInvalidField}"]`);
                                 if (fieldElement) {
+                                    ;
                                     fieldElement.focus();
                                 }
                             }
@@ -171,21 +199,62 @@ let RecordCreator = class RecordCreator extends LitElement {
             }
         }));
     }
+    lightPopupCustomCreator(originalContent) {
+        var _a;
+        const title = 'create';
+        const popupContent = originalContent.cloneNode(true);
+        popupContent.removeAttribute('slot');
+        OxPopup.open({
+            template: html `
+        <div title>${title}</div>
+        ${popupContent}
+      `,
+            parent: document.body,
+            preventCloseOnBlur: this.preventCloseOnBlur
+        });
+        (_a = this.customPopupCallback) === null || _a === void 0 ? void 0 : _a.call(this, popupContent); // 사용자 정의 팝업용 콜백 실행
+    }
+    popupCustomCreator(originalContent) {
+        const title = 'create';
+        const popupContent = originalContent.cloneNode(true);
+        popupContent.removeAttribute('slot');
+        document.dispatchEvent(new CustomEvent('open-popup', {
+            detail: {
+                template: popupContent,
+                options: {
+                    backdrop: true,
+                    size: 'large',
+                    title
+                },
+                callback: this.customPopupCallback
+            }
+        }));
+    }
 };
+OxRecordCreator.styles = [
+    css `
+      ::slotted([slot='popup']) {
+        display: none;
+      }
+    `
+];
 __decorate([
     state()
-], RecordCreator.prototype, "grist", void 0);
+], OxRecordCreator.prototype, "grist", void 0);
+__decorate([
+    property({ type: Object })
+], OxRecordCreator.prototype, "callback", void 0);
 __decorate([
     property({ type: Object })
-], RecordCreator.prototype, "callback", void 0);
+], OxRecordCreator.prototype, "customPopupCallback", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'light-popup' })
-], RecordCreator.prototype, "lightPopup", void 0);
+], OxRecordCreator.prototype, "lightPopup", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'prevent-close-on-blur' })
-], RecordCreator.prototype, "preventCloseOnBlur", void 0);
-RecordCreator = __decorate([
+], OxRecordCreator.prototype, "preventCloseOnBlur", void 0);
+OxRecordCreator = __decorate([
     customElement('ox-record-creator')
-], RecordCreator);
-export { RecordCreator };
-//# sourceMappingURL=record-creator.js.map
+], OxRecordCreator);
+export { OxRecordCreator };
+//# sourceMappingURL=ox-record-creator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-record-creator.js","sourceRoot":"","sources":["../../../src/record-view/ox-record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class OxRecordCreator extends LitElement {\n  static styles = [\n    css`\n      ::slotted([slot='popup']) {\n        display: none;\n      }\n    `\n  ]\n\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (record: GristRecord) => boolean\n  @property({ type: Object }) customPopupCallback?: (popup: 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.openLightPopup()\n      } else {\n        this.openPopup()\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`\n      <slot></slot>\n      <slot name=\"popup\"></slot>\n    `\n  }\n\n  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n    const columns = this.grist!.compiledConfig.columns\n    const invalidFields: { field: string; reason: ValidationReason }[] = []\n\n    columns.forEach(column => {\n      if (\n        column.record?.mandatory &&\n        (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')\n      ) {\n        invalidFields.push({\n          field: column.name,\n          reason: ValidationReason.MANDATORY\n        })\n      }\n    })\n\n    return invalidFields\n  }\n\n  openLightPopup() {\n    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n    const slottedElements = slot?.assignedElements({ flatten: true })\n    const originalContent = slottedElements?.[0] as HTMLElement\n\n    if (originalContent) {\n      this.lightPopupCustomCreator(originalContent)\n    } else {\n      this.lightPopupRecordView()\n    }\n  }\n\n  openPopup() {\n    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n    const slottedElements = slot?.assignedElements({ flatten: true })\n    const originalContent = slottedElements?.[0] as HTMLElement\n\n    if (originalContent) {\n      this.popupCustomCreator(originalContent)\n    } else {\n      this.popupRecordView()\n    }\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${async (e: Event) => {\n            const view = e.currentTarget as RecordView\n\n            // 레코드 밸리데이션 체크\n            const invalidFields = await this.validateRecord(view.record)\n            if (invalidFields.length > 0) {\n              // const firstInvalidField = invalidFields[0];\n              // if (firstInvalidField) {\n              //   view.setFocus(firstInvalidField.field)\n              // }\n              view.setFocusOnInvalid(invalidFields)\n              return false\n            }\n\n            popup.close()\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\n    var recordView = document.createElement('ox-record-view') as RecordView\n\n    recordView.columns = columns\n    recordView.record = record\n    recordView.rowIndex = rowIndex\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              // 레코드 밸리데이션 체크\n              const invalidFields = await this.validateRecord(view.record)\n              if (invalidFields.length > 0) {\n                const firstInvalidField = invalidFields[0]\n                if (firstInvalidField) {\n                  const fieldElement = view.renderRoot?.querySelector(`[name=\"${firstInvalidField}\"]`)\n                  if (fieldElement) {\n                    ;(fieldElement as HTMLElement).focus()\n                  }\n                }\n                return false\n              }\n\n              if (await this.callback?.(view.record)) {\n                popup.close()\n              } else {\n                // 밸리데이션 실패 시 처리\n                console.error('레코드 밸리데이션 실패')\n                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.\n              }\n            })\n\n            recordView.addEventListener('field-change', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!(await validation.call(this, after, before, record, column))) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n\n  lightPopupCustomCreator(originalContent: HTMLElement) {\n    const title = 'create'\n    const popupContent = originalContent.cloneNode(true) as HTMLElement\n    popupContent.removeAttribute('slot')\n\n    OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        ${popupContent}\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n\n    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행\n  }\n\n  popupCustomCreator(originalContent: HTMLElement) {\n    const title = 'create'\n    const popupContent = originalContent.cloneNode(true) as HTMLElement\n    popupContent.removeAttribute('slot')\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: popupContent,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: this.customPopupCallback\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/stories/accumulator-format.stories.d.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';
 import { TemplateResult } from 'lit';

package/dist/stories/accumulator-format.stories.js

@@ -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';
 import { html } from 'lit';

package/dist/stories/accumulator-format.stories.js.map

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

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

@@ -0,0 +1,45 @@
+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 { TemplateResult } from 'lit';
+import { FetchHandler } from '../src/types.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        config: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: string[];
+        };
+        urlParamsSensitive: {
+            control: string;
+        };
+        withoutSearch: {
+            control: string;
+        };
+        preventCloseOnBlur: {
+            control: string;
+        };
+    };
+};
+export default _default;
+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;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/click-event-custom.stories.js

@@ -0,0 +1,247 @@
+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 } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
+const fetchHandler = async ({ page, limit }) => {
+    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')),
+                dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('column - dblclicked')),
+                contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('column - contextmenued')),
+                focus: ((columns, data, column, record, rowIndex, target, e) => console.log('column - focused'))
+            }
+        },
+        {
+            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, column, record) => {
+                    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')),
+            dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('row - dblclicked')),
+            contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('row - contextmenued')),
+            focus: ((columns, data, column, record, rowIndex, target, e) => console.log('row - focused'))
+        },
+        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' }
+    }
+};
+const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, withoutSearch = false, preventCloseOnBlur = false, fetchHandler }) => 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) => console.log('filters', e.target.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'
+};
+//# sourceMappingURL=click-event-custom.stories.js.map