npm - @operato/dataset - Versions diffs - 1.0.0-alpha.21 → 1.0.0-alpha.22 - Mend

@operato/dataset 1.0.0-alpha.21 → 1.0.0-alpha.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/CHANGELOG.md +14 -0
package/demo/data-item-grist.html +343 -0
package/demo/index.html +3 -2
package/demo/{data-entry-form.html → ox-data-entry-form.html} +0 -0
package/demo/{data-item-spec.html → ox-data-item-spec.html} +1 -1
package/dist/src/grist-editor/index.d.ts +1 -0
package/dist/src/grist-editor/index.js +7 -0
package/dist/src/grist-editor/index.js.map +1 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.d.ts +12 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js +94 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js.map +1 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.d.ts +18 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.js +98 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +16 -11
package/src/grist-editor/index.ts +10 -0
package/src/grist-editor/ox-data-item-spec-editor-popup.ts +93 -0
package/src/grist-editor/ox-data-item-spec-editor.ts +105 -0
package/themes/grist-theme.css +194 -0
package/themes/oops-theme.css +26 -0
package/themes/report-theme.css +47 -0
package/translations/en.json +1 -0
package/translations/ko.json +1 -0
package/translations/ms.json +1 -0
package/translations/zh.json +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+### :bug: Bug Fix
+* ccp demo ([67b7d65](https://github.com/hatiolab/operato/commit/67b7d65b48d0ca7b3350684a45a396c0538c4902))
+### :rocket: New Features
+* added data-item-spec-editor for grist ([8376e14](https://github.com/hatiolab/operato/commit/8376e142d894a709e60ed676e917d5a26e01e374))
 ## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)

package/demo/data-item-grist.html ADDED Viewed

@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <style>
+      body {
+        /* box-sizing: border-box; */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+      #demo {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      grist-demo {
+        flex: 1;
+        overflow: auto;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <script>
+      // HACK(keanulee): The Redux package assumes `process` exists - mock it here before
+      // the module is loaded.
+      window.process = {
+        env: {
+          NODE_ENV: 'production'
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '@operato/data-grist'
+      import '@operato/data-grist/ox-filters-form.js'
+      import '@operato/data-grist/ox-sorters-control.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+      import { i18next } from '@operato/i18n'
+      /* set grist-editors */
+      import '../dist/src/grist-editor/index.js'
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 10
+        var start = (page - 1) * limit
+        return {
+          total,
+          records: Array(limit * page > total ? total % limit : limit)
+            .fill()
+            .map((item, idx) => {
+              return {
+                id: idx,
+                name: `name-${start + idx + 1}`,
+                description: `description-${start + idx + 1}`,
+                sequence: idx + 1,
+                active: true,
+                tag: `tag-${idx + 1}`,
+                type: idx % 3 === 0 ? 'select' : idx % 3 === 1 ? 'number' : 'string',
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+      var config = {
+        list: { fields: ['name', 'description', 'active'] },
+        columns: [
+          { type: 'gutter', gutterName: 'row-selector', multiple: true },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          { type: 'gutter', gutterName: 'sequence' },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_upward',
+            handlers: {
+              click: 'move-up'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'number',
+            name: 'sequence',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: i18next.t('field.name'),
+            record: {
+              editable: true
+            },
+            width: 140
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: i18next.t('field.description'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'checkbox',
+            name: 'active',
+            label: true,
+            header: i18next.t('field.active'),
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'string',
+            name: 'tag',
+            header: i18next.t('field.tag'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'select',
+            name: 'type',
+            header: i18next.t('field.type'),
+            record: {
+              options: ['', 'number', 'text', 'select', 'boolean', 'file'],
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'parameters',
+            name: 'options',
+            header: i18next.t('field.options'),
+            record: {
+              editable: true,
+              renderer: (value, column, record, rowIndex, field) => {
+                return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''
+              },
+              options: async (value, column, record, row, field) => {
+                return {
+                  name: record.type,
+                  help: '',
+                  spec:
+                    record.type === 'select'
+                      ? [
+                          {
+                            type: 'options',
+                            name: 'options',
+                            label: 'options'
+                          }
+                        ]
+                      : [],
+                  context: this.grist,
+                  objectified: true
+                }
+              }
+            },
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'unit',
+            header: i18next.t('field.unit'),
+            record: {
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'number',
+            name: 'quota',
+            header: i18next.t('field.quota'),
+            record: {
+              editable: true
+            },
+            width: 60
+          },
+          {
+            type: 'data-item-spec',
+            name: 'spec',
+            header: i18next.t('field.spec'),
+            record: {
+              editable: true,
+              options: {
+                name,
+                objectified: true
+              }
+            },
+            width: 200
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          }
+        },
+        pagination: {
+          infinite: true
+        },
+        sorters: [
+          {
+            name: 'sequence'
+          }
+        ]
+      }
+      class GristDemo extends LitElement {
+        static styles = [
+          CommonGristStyles,
+          css`
+            :host {
+              display: flex;
+              flex-direction: column;
+            }
+            #tailer {
+              display: flex;
+              flex-direction: row;
+              margin: 0 var(--margin-default);
+            }
+            #tailer a {
+              padding: 0 var(--padding-default) 0 var(--padding-default);
+              margin: 0 var(--margin-narrow);
+              border-right: 1px solid rgba(0, 0, 0, 0.1);
+              font-size: var(--fontsize-default);
+              color: var(--primary-color);
+            }
+          `
+        ]
+        static get properties() {
+          return {
+            mode: String
+          }
+        }
+        get grist() {
+          return this.renderRoot.querySelector('ox-grist')
+        }
+        render() {
+          const mode = this.mode || 'CARD'
+          return html`
+            <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+              <div id="filters" slot="headroom">
+                <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
+              </div>
+              <div slot="headroom" id="headroom">
+                <div id="sorters">
+                  Sort
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >expand_more</mwc-icon
+                  >
+                  <ox-popup id="sorter-control">
+                    <ox-sorters-control> </ox-sorters-control>
+                  </ox-popup>
+                </div>
+                <div id="modes">
+                  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+                </div>
+              </div>
+            </ox-grist>
+          `
+        }
+      }
+      customElements.define('ox-data-items', GristDemo)
+      setTimeout(() => {
+        render(html` <ox-data-items mode="LIST"></ox-data-items> `, document.querySelector('#demo'))
+      })
+    </script>
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/demo/index.html CHANGED Viewed

@@ -19,7 +19,8 @@
     <link href="/themes/form-theme.css" rel="stylesheet" />
   </head>
   <body>
-    <a href="./data-entry-form.html">ox-data-entry-form</a>
-    <a href="./data-item-spec.html">ox-data-item-spec</a>
+    <a href="./ox-data-entry-form.html">ox-data-entry-form</a>
+    <a href="./ox-data-item-spec.html">ox-data-item-spec</a>
+    <a href="./data-item-grist.html">data-item-grist</a>
   </body>
 </html>

package/demo/{data-entry-form.html → ox-data-entry-form.html} RENAMED Viewed

File without changes

package/demo/{data-item-spec.html → ox-data-item-spec.html} RENAMED Viewed

@@ -91,7 +91,7 @@
         description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
         sequence: 1,
         tag: 'temp',
-        unit: 'celcius',
+        unit: '℃',
         type: 'number',
         quota: 1
       }

package/dist/src/grist-editor/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './ox-data-item-spec-editor';

package/dist/src/grist-editor/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { Json5Renderer, registerEditor, registerRenderer } from '@operato/data-grist';
+import { OxDataItemSpecEditor } from './ox-data-item-spec-editor';
+/* register grist renderer/editor for id */
+registerEditor('data-item-spec', OxDataItemSpecEditor);
+registerRenderer('data-item-spec', Json5Renderer);
+export * from './ox-data-item-spec-editor';
+//# sourceMappingURL=index.js.map

package/dist/src/grist-editor/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAEjE,2CAA2C;AAC3C,cAAc,CAAC,gBAAgB,EAAE,oBAA2B,CAAC,CAAA;AAE7D,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA;AAEjD,cAAc,4BAA4B,CAAA","sourcesContent":["import { Json5Renderer, registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { OxDataItemSpecEditor } from './ox-data-item-spec-editor'\n\n/* register grist renderer/editor for id */\nregisterEditor('data-item-spec', OxDataItemSpecEditor as any)\n\nregisterRenderer('data-item-spec', Json5Renderer)\n\nexport * from './ox-data-item-spec-editor'\n"]}

package/dist/src/grist-editor/ox-data-item-spec-editor-popup.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import '../ox-data-item-spec.js';
+import { LitElement } from 'lit';
+export declare class OxDataItemSpecEditorPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    dataItem: any;
+    confirmCallback: (newval: any) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private onCancel;
+    private onConfirm;
+}

package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js ADDED Viewed

@@ -0,0 +1,94 @@
+import { __decorate } from "tslib";
+import '../ox-data-item-spec.js';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+let OxDataItemSpecEditorPopup = class OxDataItemSpecEditorPopup extends LitElement {
+    render() {
+        var dataItem = this.dataItem instanceof Array ? this.dataItem : [];
+        return html `
+      ${dataItem.length > 0
+            ? html `
+            <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>
+            </ox-data-item-spec>
+          `
+            : html ` <span><i18n-msg msgid="text.no properties to set"></i18n-msg></span> `}
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+          (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+          =>
+          이런 이유로, Object.assign(...)을 사용하였다.
+        */
+        this.value = e.detail;
+    }
+    onCancel(e) {
+        history.back();
+    }
+    onConfirm(e) {
+        this.confirmCallback && this.confirmCallback(this.value);
+        history.back();
+    }
+};
+OxDataItemSpecEditorPopup.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+      ox-data-item-spec {
+        flex: 1;
+        overflow-y: auto;
+      }
+      span {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--primary-color);
+      }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditorPopup.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditorPopup.prototype, "dataItem", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditorPopup.prototype, "confirmCallback", void 0);
+OxDataItemSpecEditorPopup = __decorate([
+    customElement('ox-data-item-spec-editor-popup')
+], OxDataItemSpecEditorPopup);
+export { OxDataItemSpecEditorPopup };
+//# sourceMappingURL=ox-data-item-spec-editor-popup.js.map

package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ox-data-item-spec-editor-popup.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-data-item-spec-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,UAAU;IAwCvD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;QAElE,OAAO,IAAI,CAAA;QACP,QAAQ,CAAC,MAAM,GAAG,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA;wCAC0B,IAAI,CAAC,KAAK,cAAc,QAAQ,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;WAEjG;YACH,CAAC,CAAC,IAAI,CAAA,wEAAwE;;;6BAGzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AAlFQ,gCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAwC;AAtCxD,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CAmFrC;SAnFY,yBAAyB","sourcesContent":["import '../ox-data-item-spec.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-data-item-spec-editor-popup')\nexport class OxDataItemSpecEditorPopup extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n\n width: var(--overlay-center-normal-width, 50%);\n height: var(--overlay-center-normal-height, 50%);\n }\n\n ox-data-item-spec {\n flex: 1;\n overflow-y: auto;\n }\n\n span {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--primary-color);\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) dataItem: any\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n var dataItem = this.dataItem instanceof Array ? this.dataItem : []\n\n return html`\n ${dataItem.length > 0\n ? html`\n <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>\n </ox-data-item-spec>\n `\n : html` <span><i18n-msg msgid=\"text.no properties to set\"></i18n-msg></span> `}\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n => \n 이런 이유로, Object.assign(...)을 사용하였다.\n */\n this.value = e.detail\n }\n\n private onCancel(e: Event) {\n history.back()\n }\n\n private onConfirm(e: Event) {\n this.confirmCallback && this.confirmCallback(this.value)\n history.back()\n }\n}\n"]}

package/dist/src/grist-editor/ox-data-item-spec-editor.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-data-item-spec-editor-popup.js';
+import { ColumnConfig, GristRecord } from '@operato/data-grist';
+import { LitElement } from 'lit';
+export declare class OxDataItemSpecEditor extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: any;
+    column: ColumnConfig;
+    record: GristRecord;
+    row: number;
+    field: any;
+    private popup?;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    openSelector(): Promise<void>;
+}

package/dist/src/grist-editor/ox-data-item-spec-editor.js ADDED Viewed

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './ox-data-item-spec-editor-popup.js';
+import { LitElement, css, html } from 'lit';
+import { openPopup } from '@operato/layout';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+let OxDataItemSpecEditor = class OxDataItemSpecEditor extends LitElement {
+    render() {
+        const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
+        return html ` ${value || ''} `;
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        this.renderRoot.addEventListener('click', e => {
+            e.stopPropagation();
+            this.openSelector();
+        });
+        this.openSelector();
+    }
+    async openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        var { options } = this.column.record;
+        if (typeof options === 'function') {
+            options = await options.call(this, this.value, this.column, this.record, this.row, this.field);
+        }
+        const { name, help, objectified = false } = options;
+        const confirmCallback = (newval) => {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: !objectified ? JSON.stringify(newval) : newval,
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+        };
+        try {
+            var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
+        }
+        catch (e) {
+            var value = {};
+        }
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+        */
+        var template = html `
+      <ox-data-item-spec-editor-popup .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>
+      </ox-data-item-spec-editor-popup>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || ''} ${i18next.t('field.spec')}`,
+            help
+        });
+    }
+};
+OxDataItemSpecEditor.styles = css `
+    :host {
+      color: black;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], OxDataItemSpecEditor.prototype, "row", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpecEditor.prototype, "field", void 0);
+OxDataItemSpecEditor = __decorate([
+    customElement('ox-data-item-spec-editor')
+], OxDataItemSpecEditor);
+export { OxDataItemSpecEditor };
+//# sourceMappingURL=ox-data-item-spec-editor.js.map

package/dist/src/grist-editor/ox-data-item-spec-editor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ox-data-item-spec-editor.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-data-item-spec-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-data-item-spec-editor-popup.js'\n\nimport { ColumnConfig, GristRecord } from '@operato/data-grist'\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-data-item-spec-editor')\nexport class OxDataItemSpecEditor extends LitElement {\n static styles = css`\n :host {\n color: black;\n\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `\n\n @property({ type: Object }) value: any\n @property({ type: Object }) column!: ColumnConfig\n @property({ type: Object }) record!: GristRecord\n @property({ type: Number }) row!: number\n @property({ type: Object }) field!: any\n\n private popup?: PopupHandle\n\n render() {\n const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n return html` ${value || ''} `\n }\n\n async firstUpdated() {\n await this.updateComplete\n\n this.renderRoot.addEventListener('click', e => {\n e.stopPropagation()\n\n this.openSelector()\n })\n\n this.openSelector()\n }\n\n async openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n var { options } = this.column.record\n\n if (typeof options === 'function') {\n options = await options.call(this, this.value, this.column, this.record, this.row, this.field)\n }\n\n const { name, help, objectified = false } = options\n\n const confirmCallback = (newval: any) => {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: !objectified ? JSON.stringify(newval) : newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n try {\n var value: any = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value\n } catch (e) {\n var value: any = {}\n }\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n */\n var template = html`\n <ox-data-item-spec-editor-popup .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>\n </ox-data-item-spec-editor-popup>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: `${name?.toUpperCase() || ''} ${i18next.t('field.spec')}`,\n help\n })\n }\n}\n"]}