npm - @operato/app - Versions diffs - 1.0.0-alpha.3 → 1.0.0-alpha.6 - Mend

@operato/app 1.0.0-alpha.3 → 1.0.0-alpha.6

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 (19) hide show

package/CHANGELOG.md +30 -0
package/demo/data-grist-test.html +456 -0
package/dist/src/grist/index.js +2 -0
package/dist/src/grist/index.js.map +1 -1
package/dist/src/grist/parameters-editor-builder.d.ts +4 -0
package/dist/src/grist/parameters-editor-builder.js +119 -0
package/dist/src/grist/parameters-editor-builder.js.map +1 -0
package/dist/src/grist/parameters-editor-popup.d.ts +13 -0
package/dist/src/grist/parameters-editor-popup.js +111 -0
package/dist/src/grist/parameters-editor-popup.js.map +1 -0
package/dist/src/grist/parameters-editor.d.ts +19 -0
package/dist/src/grist/parameters-editor.js +105 -0
package/dist/src/grist/parameters-editor.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +11 -10
package/src/grist/index.ts +2 -0
package/src/grist/parameters-editor-builder.ts +130 -0
package/src/grist/parameters-editor-popup.ts +106 -0
package/src/grist/parameters-editor.ts +112 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,36 @@
 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.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+**Note:** Version bump only for package @operato/app
+## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
+### :rocket: New Features
+* start migration grist editors from things-factory ([8b31c7f](https://github.com/hatiolab/operato/commit/8b31c7f00ae9b32e68f6860c559a768c3d456704))
+### :bug: Bug Fix
+* migrate parameter-editor from things-factory ([019a30d](https://github.com/hatiolab/operato/commit/019a30df6fd4c8a273d4194d13f5784ed6f8d956))
+## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
+**Note:** Version bump only for package @operato/app
 ## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
 **Note:** Version bump only for package @operato/app

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

@@ -0,0 +1,456 @@
+<!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" />
+  </head>
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '../dist/index.js'
+      import '../dist/src/filters/filters-form.js'
+      import '../dist/src/sorters/sorters-control.js'
+      import '../dist/src/record-view/record-creator.js'
+      import '@operato/popup/ox-popup-list.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 120993
+        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: 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}`,
+                email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+                active: Math.round(Math.random() * 2) % 2 ? true : false,
+                barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
+                company:
+                  idx % 2
+                    ? {
+                        id: '2',
+                        name: 'HatioLAB',
+                        description: `경기도 성남시-${start + idx + 1}`
+                      }
+                    : {
+                        id: '3',
+                        name: 'HatioSEA',
+                        description: `말레이시아 세티아알람-${start + idx + 1}`
+                      },
+                thumbnail:
+                  idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
+                    ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                    : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+                role: ['admin', 'worker', 'tester'][idx % 3],
+                color: idx % 2 ? `#87f018` : `#180f87`,
+                rate: Math.round(Math.random() * 100),
+                dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+                dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+                homepage:
+                  idx % 2
+                    ? `http://hatiolab.com/${start + idx + 1}`
+                    : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+                json5: {
+                  abc: 'abc',
+                  value: 123
+                },
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+      const config = {
+        list: {
+          thumbnail: 'thumbnail',
+          fields: ['name', 'description'],
+          details: ['role', 'email']
+        },
+        columns: [
+          {
+            type: 'gutter',
+            gutterName: 'dirty'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'sequence'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'row-selector',
+            multiple: true
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'edit',
+            handlers: {
+              click: function () {
+                console.log('clicked')
+              }
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'link',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+              editable: true,
+              options: {
+                // href: 'http://hatiolab.com',
+                href: function (column, record, rowIndex) {
+                  return record['homepage']
+                },
+                target: '_blank'
+              }
+            },
+            filter: 'search',
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+              editable: true,
+              align: 'left'
+            },
+            width: 200,
+            handlers: {
+              click: (columns, data, column, record, rowIndex, target) => {
+                alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+              }
+            }
+          },
+          {
+            type: 'email',
+            name: 'email',
+            label: true,
+            header: 'email',
+            record: {
+              editable: true
+            },
+            filter: 'search',
+            sortable: true,
+            width: 130,
+            validation: function (after, before, record, column) {
+              if (after.indexOf('@') == -1) {
+                document.dispatchEvent(
+                  new CustomEvent('notify', {
+                    detail: {
+                      type: 'error',
+                      message: `invalid value - ${after}`
+                    }
+                  })
+                )
+                return false
+              }
+              return true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'active',
+            header: 'active',
+            record: {
+              editable: true
+            },
+            filter: true,
+            handlers: {
+              dblclick: () => {
+                const grist = document.querySelector('ox-grist')
+                console.log(grist.dirtyRecords)
+              }
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'select',
+            name: 'role',
+            label: true,
+            header: 'role',
+            record: {
+              options: ['', 'admin', 'worker', 'tester'],
+              editable: true
+            },
+            filter: true,
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'color',
+            name: 'color',
+            header: 'color',
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'float',
+            name: 'rate',
+            header: 'rate',
+            record: {
+              align: 'right',
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'json5',
+            name: 'json5',
+            header: 'JSON5',
+            width: 200
+          },
+          {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+              editable: true
+            }
+          },
+          {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+          },
+          {
+            type: 'datetime',
+            name: 'createdAt',
+            header: 'created at',
+            record: {
+              editable: false
+            },
+            sortable: true,
+            width: 180
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          },
+          handlers: {
+            click: 'select-row-toggle'
+          },
+          classifier: function (record, rowIndex) {
+            const rate = record['rate']
+            const emphasized =
+              rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+            return {
+              emphasized
+            }
+          }
+        },
+        sorters: [
+          {
+            name: 'name',
+            desc: true
+          },
+          {
+            name: 'email'
+          }
+        ],
+        pagination: {
+          pages: [20, 30, 50, 100, 200]
+        }
+      }
+      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="tailer">
+                  <a href="./report-test.html">Report Test</a>
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').reset()
+                    }}
+                    >Reset</a
+                  >
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').fetch(true)
+                    }}
+                    >Fetch</a
+                  >
+                </div>
+                <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>
+                <ox-record-creator id="add" light-popup>
+                  <button><mwc-icon>add</mwc-icon></button>
+                </ox-record-creator>
+                <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
+              </div>
+            </ox-grist>
+          `
+        }
+      }
+      customElements.define('grist-demo', GristDemo)
+      setTimeout(() => {
+        render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
+      })
+    </script>
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/dist/src/grist/index.js CHANGED Viewed

@@ -2,8 +2,10 @@ import { registerEditor, registerRenderer } from '@operato/data-grist';
 import { CodeEditor } from './code-editor';
 import { IdInput } from './id-input.js';
 import { IdRenderer } from './id-renderer.js';
+import { ObjectEditor } from './object-editor';
 /* register grist renderer/editor for id */
 registerEditor('id', IdInput);
+registerEditor('object', ObjectEditor);
 registerEditor('code', CodeEditor);
 registerRenderer('id', IdRenderer);
 //# sourceMappingURL=index.js.map

package/dist/src/grist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;~~AAE7C~~,2CAA2C;AAC3C,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC7B,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAElC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { CodeEditor } from './code-editor'\nimport { IdInput } from './id-input.js'\nimport { IdRenderer } from './id-renderer.js'\n\n/* register grist renderer/editor for id */\nregisterEditor('id', IdInput)\nregisterEditor('code', CodeEditor)\n\nregisterRenderer('id', IdRenderer)\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,2CAA2C;AAC3C,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC7B,cAAc,CAAC,QAAQ,EAAE,YAAmB,CAAC,CAAA;AAC7C,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAElC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { CodeEditor } from './code-editor'\nimport { IdInput } from './id-input.js'\nimport { IdRenderer } from './id-renderer.js'\nimport { ObjectEditor } from './object-editor'\n\n/* register grist renderer/editor for id */\nregisterEditor('id', IdInput)\nregisterEditor('object', ObjectEditor as any)\nregisterEditor('code', CodeEditor)\n\nregisterRenderer('id', IdRenderer)\n"]}

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

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/modeller-ui';

package/dist/src/grist/parameters-editor-builder.js ADDED Viewed

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/modeller-ui';
+import { LitElement, html } from 'lit';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { customElement, property } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { store } from '@operato/shell';
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+Example:
+    <ox-parameters-editor-builder value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </ox-parameters-editor-builder>
+*/
+const DEFAULT_VALUE = {
+    legend: '',
+    number: 0,
+    angle: 0,
+    string: '',
+    text: '',
+    textarea: '',
+    checkbox: false,
+    select: '',
+    color: '#000000',
+    'solidcolor-stops': null,
+    'gradientcolor-stops': null,
+    'gltf-selector': '',
+    'image-selector': '',
+    multiplecolor: null,
+    editortable: null,
+    imageselector: '',
+    options: null,
+    date: null
+};
+let ParametersEditorBuilder = class ParametersEditorBuilder extends connect(store)(LitElement) {
+    render() {
+        return html `<slot></slot>`;
+    }
+    firstUpdated() {
+        this.addEventListener('change', this._onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this._onPropsChanged(this.props);
+        changes.has('value') && this._setValues();
+    }
+    _onPropsChanged(props) {
+        this.textContent = '';
+        (props || []).forEach(prop => {
+            let elementType = OxPropertyEditor.getEditor(prop.type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', prop.type);
+                return;
+            }
+            let element = document.createElement(elementType);
+            element.label = prop.label;
+            element.type = prop.type;
+            element.placeholder = prop.placeholder;
+            element.host = this.host;
+            // element.context = this.context
+            element.setAttribute('name', prop.name);
+            if (prop.observe) {
+                element.observe = prop.observe;
+            }
+            element.property = prop.property;
+            element.setAttribute('property-editor', '');
+            this.appendChild(element);
+        });
+    }
+    _setValues() {
+        var value = this.value || {};
+        Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {
+            const editor = propertyEditor;
+            let name = editor.getAttribute('name');
+            editor.value = value[name] === undefined ? DEFAULT_VALUE[editor.type] : value[name];
+        });
+    }
+    _getValues() {
+        var value = {};
+        Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {
+            const editor = propertyEditor;
+            let name = editor.getAttribute('name');
+            value[name] = editor.value === undefined ? DEFAULT_VALUE[editor.type] : editor.value;
+        });
+        return value;
+    }
+    _onValueChanged(e) {
+        e.stopPropagation();
+        var prop = e.target;
+        if (!prop || !prop.hasAttribute('property-editor')) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: this._getValues()
+        }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], ParametersEditorBuilder.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], ParametersEditorBuilder.prototype, "props", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorBuilder.prototype, "host", void 0);
+ParametersEditorBuilder = __decorate([
+    customElement('ox-parameters-editor-builder')
+], ParametersEditorBuilder);
+//# sourceMappingURL=parameters-editor-builder.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"parameters-editor-builder.js","sourceRoot":"","sources":["../../../src/grist/parameters-editor-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui'\n\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\nimport { store } from '@operato/shell'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n <ox-parameters-editor-builder value=\"{{value}}\">\n <label>Center X</label>\n <input type=\"number\" .value=\"${value.cx}\">\n <label>Width</label>\n <input type=\"number\" .value=\"${value.width}\">\n </ox-parameters-editor-builder>\n*/\n\nconst DEFAULT_VALUE = {\n legend: '',\n number: 0,\n angle: 0,\n string: '',\n text: '',\n textarea: '',\n checkbox: false,\n select: '',\n color: '#000000',\n 'solidcolor-stops': null,\n 'gradientcolor-stops': null,\n 'gltf-selector': '',\n 'image-selector': '',\n multiplecolor: null,\n editortable: null,\n imageselector: '',\n options: null,\n date: null\n} as any\n\n@customElement('ox-parameters-editor-builder')\nclass ParametersEditorBuilder extends connect(store)(LitElement) {\n @property({ type: Object }) value: any\n @property({ type: Array }) props?: PropertySpec[]\n @property({ type: Object }) host: any\n\n render() {\n return html`<slot></slot>`\n }\n\n firstUpdated() {\n this.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('props') && this._onPropsChanged(this.props)\n changes.has('value') && this._setValues()\n }\n\n _onPropsChanged(props: PropertySpec[] | undefined) {\n this.textContent = ''\n ;(props || []).forEach(prop => {\n let elementType = OxPropertyEditor.getEditor(prop.type)\n if (!elementType) {\n console.warn('Property Editor not defined', prop.type)\n return\n }\n let element = document.createElement(elementType) as OxPropertyEditor\n\n element.label = prop.label\n element.type = prop.type\n element.placeholder = prop.placeholder\n element.host = this.host\n // element.context = this.context\n element.setAttribute('name', prop.name)\n\n if (prop.observe) {\n element.observe = prop.observe\n }\n element.property = prop.property\n element.setAttribute('property-editor', '')\n\n this.appendChild(element)\n })\n }\n\n _setValues() {\n var value = this.value || {}\n Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n const editor = propertyEditor as OxPropertyEditor\n let name = editor.getAttribute('name')\n editor.value = value[name!] === undefined ? DEFAULT_VALUE[editor.type] : value[name!]\n })\n }\n\n _getValues() {\n var value = {} as any\n Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n const editor = propertyEditor as OxPropertyEditor\n let name = editor.getAttribute('name')\n value[name!] = editor.value === undefined ? DEFAULT_VALUE[editor.type] : editor.value\n })\n\n return value\n }\n\n _onValueChanged(e: Event) {\n e.stopPropagation()\n var prop = e.target as HTMLElement\n\n if (!prop || !prop.hasAttribute('property-editor')) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: this._getValues()\n })\n )\n }\n}\n"]}

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

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class ParametersEditorPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    props: any;
+    host: any;
+    context: any;
+    confirmCallback: (newval: any) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private onCancel;
+    private onConfirm;
+}