npm - @things-factory/integration-ui - Versions diffs - 6.1.116 → 6.1.118 - Mend

@things-factory/integration-ui 6.1.116 → 6.1.118

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/integration-ui",
-  "version": "6.1.116",
+  "version": "6.1.118",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -37,11 +37,11 @@
     "@operato/property-editor": "^1.0.0",
     "@operato/styles": "^1.0.0",
     "@operato/utils": "^1.0.1",
-    "@things-factory/export-base": "^6.1.116",
-    "@things-factory/import-base": "^6.1.116",
-    "@things-factory/integration-base": "^6.1.116",
+    "@things-factory/export-base": "^6.1.118",
+    "@things-factory/import-base": "^6.1.118",
+    "@things-factory/integration-base": "^6.1.118",
     "d3": "^7.8.5",
     "moment-timezone": "^0.5.40"
   },
-  "gitHead": "4477d162a7008239bfd5f31dcfa879f59a2ad2ce"
+  "gitHead": "ea96bacb831bdc751bd1962a9d73a7d8abf0e304"
 }

package/dist-client/editors/things-editor-procedure-output.d.ts DELETED Viewed

@@ -1,37 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@material/mwc-icon';
-import { OxFormField } from '@operato/input';
-type NameType = {
-    [name: string]: string;
-};
-type ArrayedNameType = {
-    name: string;
-    type: any;
-};
-/**
- input component for key-value map
- Example:
-   <things-editor-procedure-output
-     value=${map}
-   </things-editor-procedure-output>
- */
-export declare class ThingsEditorProcedureOutput extends OxFormField {
-    static styles: import("lit").CSSResult;
-    value: NameType;
-    private _changingNow;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    _onChange(e: Event): void;
-    _build(includeNewRecord?: boolean): void;
-    _toArray(map: NameType): ArrayedNameType[];
-    _add(): void;
-    _delete(e: MouseEvent): void;
-    records: NodeListOf<HTMLElement>;
-    _up(e: MouseEvent): void;
-    _down(e: MouseEvent): void;
-}
-export {};

package/dist-client/editors/things-editor-procedure-output.js DELETED Viewed

@@ -1,234 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
-import { css, html } from 'lit';
-import { customElement, property, queryAll } from 'lit/decorators.js';
-import { OxFormField } from '@operato/input';
-/**
- input component for key-value map
- Example:
-   <things-editor-procedure-output
-     value=${map}
-   </things-editor-procedure-output>
- */
-let ThingsEditorProcedureOutput = class ThingsEditorProcedureOutput extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-        this._changingNow = false;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    render() {
-        const value = !this.value || typeof this.value !== 'object' ? {} : this.value;
-        return html `
-      ${this._toArray(value).map(item => html `
-          <div data-record>
-            <input type="text" data-name placeholder="name" .value=${item.name} />
-            <select data-type placeholder="type" .value=${item.type}>
-              <option value="" ?selected=${item.type == ''}>&nbsp;</option>
-              <option value="String" ?selected=${item.type == 'String'}>String</option>
-              <option value="Number" ?selected=${item.type == 'Number'}>Number</option>
-              <option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
-            </select>
-            <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
-              <mwc-icon>remove</mwc-icon>
-            </button>
-            <button class="record-action" @click=${(e) => this._up(e)} tabindex="-1">
-              <mwc-icon>arrow_upward</mwc-icon>
-            </button>
-            <button class="record-action" @click=${(e) => this._down(e)} tabindex="-1">
-              <mwc-icon>arrow_downward</mwc-icon>
-            </button>
-          </div>
-        `)}
-      <div data-record-new>
-        <input type="text" data-name placeholder="name" value="" />
-        <select data-type placeholder="type">
-          <option value="">&nbsp;</option>
-          <option value="String">String</option>
-          <option value="Number">Number</option>
-          <option value="Cursor">Cursor</option>
-        </select>
-        <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-      </div>
-    `;
-    }
-    _onChange(e) {
-        if (this._changingNow) {
-            return;
-        }
-        this._changingNow = true;
-        const input = e.target;
-        const record = e.target.closest('[data-record],[data-record-new]');
-        if (record.hasAttribute('data-record')) {
-            this._build();
-        }
-        else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
-            this._add();
-        }
-        this._changingNow = false;
-    }
-    _build(includeNewRecord) {
-        if (includeNewRecord) {
-            var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
-        }
-        else {
-            var records = this.renderRoot.querySelectorAll('[data-record]');
-        }
-        var newmap = {};
-        for (var i = 0; i < records.length; i++) {
-            var record = records[i];
-            const name = record.querySelector('[data-name]').value;
-            const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])');
-            if (!inputs || inputs.length == 0) {
-                continue;
-            }
-            var input = inputs[inputs.length - 1];
-            var value = input.value;
-            if (name) {
-                newmap[name] = value || '';
-            }
-        }
-        this.value = newmap;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
-    }
-    /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-    _toArray(map) {
-        var array = [];
-        for (var name in map) {
-            array.push({
-                name: name,
-                type: map[name]
-            });
-        }
-        return array;
-    }
-    _add() {
-        this._build(true);
-        const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])');
-        for (var i = 0; i < inputs.length; i++) {
-            let input = inputs[i];
-            input.value = '';
-        }
-        inputs[0].focus();
-    }
-    _delete(e) {
-        const record = e.target.closest('[data-record]');
-        record.querySelector('[data-name]').value = '';
-        this._build();
-    }
-    _up(e) {
-        const record = e.target.closest('[data-record]');
-        const array = Array.from(this.records);
-        const index = array.indexOf(record) - 1;
-        if (index < 0) {
-            return;
-        }
-        const deleted = array.splice(index, 1);
-        array.splice(index + 1, 0, ...deleted);
-        this.value = array.reduce((sum, record) => {
-            const name = record.querySelector('[data-name]').value;
-            const type = record.querySelector('[data-type]').value;
-            sum[name] = type;
-            return sum;
-        }, {});
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
-    }
-    _down(e) {
-        const record = e.target.closest('[data-record]');
-        const array = Array.from(this.records);
-        const index = array.indexOf(record);
-        if (index > array.length) {
-            return;
-        }
-        array.splice(index, 1);
-        array.splice(index + 1, 0, record);
-        this.value = array.reduce((sum, record) => {
-            const name = record.querySelector('[data-name]').value;
-            const type = record.querySelector('[data-type]').value;
-            sum[name] = type;
-            return sum;
-        }, {});
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
-    }
-};
-ThingsEditorProcedureOutput.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      margin-bottom: var(--margin-wide);
-    }
-    div {
-      display: flex;
-      flex-flow: row nowrap;
-      gap: var(--margin-default);
-      margin-bottom: var(--margin-narrow);
-    }
-    button {
-      border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
-      line-height: 0.8;
-      color: var(--button-color);
-      cursor: pointer;
-    }
-    button + button {
-      margin-left: -5px;
-    }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
-    button:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
-    }
-    input {
-      flex: 1;
-      border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
-      font: var(--input-font);
-      color: var(--primary-text-color);
-      min-width: 50px;
-    }
-    input:focus {
-      outline: none;
-      border-bottom: 1px solid var(--primary-color);
-    }
-    button.hidden {
-      opacity: 0;
-      cursor: default;
-    }
-  `;
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], ThingsEditorProcedureOutput.prototype, "value", void 0);
-__decorate([
-    queryAll('[data-record]'),
-    __metadata("design:type", Object)
-], ThingsEditorProcedureOutput.prototype, "records", void 0);
-ThingsEditorProcedureOutput = __decorate([
-    customElement('things-editor-procedure-output')
-], ThingsEditorProcedureOutput);
-export { ThingsEditorProcedureOutput };
-//# sourceMappingURL=things-editor-procedure-output.js.map

package/dist-client/editors/things-editor-procedure-output.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"things-editor-procedure-output.js","sourceRoot":"","sources":["../../client/editors/things-editor-procedure-output.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype NameType = { [name: string]: string }\ntype ArrayedNameType = { name: string; type: any }\n\n/**\n input component for key-value map\n \n Example:\n \n <things-editor-procedure-output \n value=${map}\n </things-editor-procedure-output>\n */\n@customElement('things-editor-procedure-output')\nexport class ThingsEditorProcedureOutput extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n margin-bottom: var(--margin-wide);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--margin-default);\n margin-bottom: var(--margin-narrow);\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button + button {\n margin-left: -5px;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n\n input {\n flex: 1;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n min-width: 50px;\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n `\n\n @property({ type: Object }) value: NameType = {}\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n\n return html`\n ${this._toArray(value).map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n <select data-type placeholder=\"type\" .value=${item.type}>\n <option value=\"\" ?selected=${item.type == ''}> </option>\n <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n </select>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n <mwc-icon>remove</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n <mwc-icon>arrow_upward</mwc-icon>\n </button>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n <mwc-icon>arrow_downward</mwc-icon>\n </button>\n </div>\n `\n )}\n\n <div data-record-new>\n <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n <select data-type placeholder=\"type\">\n <option value=\"\"> </option>\n <option value=\"String\">String</option>\n <option value=\"Number\">Number</option>\n <option value=\"Cursor\">Cursor</option>\n </select>\n <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n <mwc-icon>add</mwc-icon>\n </button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n </div>\n `\n }\n\n _onChange(e: Event) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n if (record.hasAttribute('data-record')) {\n this._build()\n } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n }\n\n var newmap: NameType = {}\n\n for (var i = 0; i < records.length; i++) {\n var record = records[i]\n\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const inputs = record.querySelectorAll(\n '[data-type]:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement>\n\n if (!inputs || inputs.length == 0) {\n continue\n }\n\n var input = inputs[inputs.length - 1]\n\n var value = input.value\n\n if (name) {\n newmap[name] = value || ''\n }\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n _toArray(map: NameType) {\n var array: ArrayedNameType[] = []\n\n for (var name in map) {\n array.push({\n name: name,\n type: map[name]\n })\n }\n\n return array\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n this._build()\n }\n\n @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n _up(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record) - 1\n\n if (index < 0) {\n return\n }\n\n const deleted = array.splice(index, 1)\n array.splice(index + 1, 0, ...deleted)\n\n this.value = array.reduce((sum, record) => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n\n sum[name] = type\n return sum\n }, {} as { [name: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _down(e: MouseEvent) {\n const record = (e.target as Element).closest('[data-record]') as HTMLElement\n const array = Array.from(this.records)\n const index = array.indexOf(record)\n\n if (index > array.length) {\n return\n }\n\n array.splice(index, 1)\n array.splice(index + 1, 0, record)\n\n this.value = array.reduce((sum, record) => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n\n sum[name] = type\n return sum\n }, {} as { [name: string]: string })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}