@operato/dataset 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-data-item-spec.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-data-item-spec.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;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAwCjD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,cAAc,QAAQ,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;6BAIzE,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;AA9EQ,0BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwC;AAtCxD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA+E/B;SA/EY,mBAAmB","sourcesContent":["import '../ox-data-item-spec.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataItem } from '../types.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-popup-data-item-spec')\nexport class OxPopupDataItemSpec 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?: DataItem\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var dataItem = this.dataItem || {}\n\n    return html`\n      <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>\n      </ox-data-item-spec>\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/index.d.ts

@@ -1 +1,3 @@
-export * from './ox-data-entry-form';
+export * from './ox-data-entry-form.js';
+export * from './ox-data-item-spec.js';
+export * from './types.js';

package/dist/src/index.js

@@ -1,2 +1,4 @@
-export * from './ox-data-entry-form';
+export * from './ox-data-entry-form.js';
+export * from './ox-data-item-spec.js';
+export * from './types.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ox-data-entry-form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,YAAY,CAAA","sourcesContent":["export * from './ox-data-entry-form.js'\nexport * from './ox-data-item-spec.js'\nexport * from './types.js'\n"]}

package/dist/src/ox-data-entry-form.d.ts

@@ -1,28 +1,6 @@
 import '@operato/input/ox-input-file.js';
 import { LitElement } from 'lit';
-declare type SelectOption = {
-    text: string;
-    value: string;
-};
-declare type SelectOptions = SelectOption[];
-declare type TypeOptions = {
-    options?: SelectOptions;
-    [prop: string]: any;
-};
-export declare type DataItem = {
-    name: string;
-    description: string;
-    sequence: number;
-    tag: string;
-    type: string;
-    options: TypeOptions;
-    quota: number;
-};
-export declare type DataSet = {
-    name: string;
-    description: string;
-    dataItems: DataItem[];
-};
+import { DataSet } from './types.js';
 export declare class OxDataEntryForm extends LitElement {
     static styles: import("lit").CSSResult;
     dataSet?: DataSet;
@@ -34,4 +12,3 @@ export declare class OxDataEntryForm extends LitElement {
     private buildInputs;
     private buildValue;
 }
-export {};

package/dist/src/ox-data-entry-form.js

@@ -1,31 +1,31 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-file.js';
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let OxDataEntryForm = class OxDataEntryForm extends LitElement {
     render() {
         return html `<form @change=${(e) => this.onChange(e)}>${this.buildInputs()}</form>`;
     }
     onChange(e) {
-        const value = this.buildValue();
+        this.value = this.buildValue();
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: value
+            detail: this.value
         }));
     }
     buildInputs() {
         const dataItems = this.dataSet.dataItems;
         return (dataItems || []).map(dataItem => {
-            var _a;
-            const { name, description, tag, type, quota = 1, options = {} } = dataItem;
+            const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem;
             const samples = new Array(quota).fill(0);
-            const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a[tag];
+            const value = this.value && this.value[tag];
             const elements = samples.map((_, idx) => {
-                const v = quota <= 1 ? value : value instanceof Array && value[idx];
+                const v = quota <= 1 ? value : value instanceof Array ? value[idx] : undefined;
                 switch (type) {
                     case 'select':
                         return html ` <select .name=${tag}>
+              <option value=""></option>
               ${(options.options || []).map(option => html `<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`)}
             </select>`;
                         break;
@@ -48,7 +48,10 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
                         return html ` <input type="string" name=${tag} value=${v} />`;
                 }
             });
-            return html `<label .title=${description}>${name}${elements}</label>`;
+            return html ` <label .title=${description}>
+        <div name>${name}${unit ? `(${unit})` : ''}</div>
+        <div elements>${elements}</div>
+      </label>`;
         });
     }
     buildValue() {
@@ -75,9 +78,56 @@ OxDataEntryForm.styles = css `
     }
 
     form {
+      flex: 1;
+
       display: flex;
       flex-direction: column;
     }
+    label {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+    label:nth-child(even) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-column: span 2 / auto;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+    div[elements] {
+      grid-column: span 10 / auto;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+    div[elements] * {
+      flex: 1;
+    }
+    div[elements] input,
+    div[elements] select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      div[name] {
+        grid-column: span 3 / auto;
+      }
+      div[elements] {
+        grid-column: span 9 / auto;
+      }
+    }
   `;
 __decorate([
     property({ type: Object })

package/dist/src/ox-data-entry-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\ntype SelectOption = { text: string; value: string }\ntype SelectOptions = SelectOption[]\ntype TypeOptions = {\n  options?: SelectOptions\n  [prop: string]: any\n}\n\nexport type DataItem = {\n  name: string\n  description: string\n  sequence: number\n  tag: string\n  type: string\n  options: TypeOptions\n  quota: number\n}\n\nexport type DataSet = {\n  name: string\n  description: string\n  dataItems: DataItem[]\n}\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n    }\n\n    form {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n  }\n\n  private onChange(e: Event) {\n    const value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {} } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value?.[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = quota <= 1 ? value : value instanceof Array && value[idx]\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag}>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"string\" name=${tag} value=${v} />`\n        }\n      })\n\n      return html`<label .title=${description}>${name}${elements}</label>`\n    })\n  }\n\n  private buildValue() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).reduce((sum, dataItem) => {\n      const { tag, quota, type } = dataItem\n\n      const editors = Array.prototype.slice.call(\n        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n      ) as HTMLInputElement[]\n\n      if (editors.length > 0) {\n        sum[tag] =\n          editors.length > 1\n            ? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n            : type === 'boolean'\n            ? editors[0].checked\n            : editors[0].value\n      }\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}
+{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataSet } from './types.js'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      gap: 9px;\n      align-items: center;\n      margin-bottom: var(--margin-default);\n    }\n    label:nth-child(even) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-column: span 2 / auto;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[elements] {\n      grid-column: span 10 / auto;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n    div[elements] * {\n      flex: 1;\n    }\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      div[name] {\n        grid-column: span 3 / auto;\n      }\n      div[elements] {\n        grid-column: span 9 / auto;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).map(dataItem => {\n      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n      const samples = new Array(quota).fill(0)\n      const value = this.value && this.value[tag]\n\n      const elements = samples.map((_, idx) => {\n        const v = quota <= 1 ? value : value instanceof Array ? value[idx] : undefined\n\n        switch (type) {\n          case 'select':\n            return html` <select .name=${tag}>\n              <option value=\"\"></option>\n              ${(options.options || []).map(\n                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n              )}\n            </select>`\n            break\n\n          case 'boolean':\n            return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n            break\n\n          case 'number':\n            return html` <input type=\"number\" name=${tag} value=${v} />`\n            break\n\n          case 'file':\n            return html`<ox-input-file\n              name=${tag}\n              label=\"Attach Files\"\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n            ></ox-input-file>`\n\n          case 'string':\n          default:\n            return html` <input type=\"string\" name=${tag} value=${v} />`\n        }\n      })\n\n      return html` <label .title=${description}>\n        <div name>${name}${unit ? `(${unit})` : ''}</div>\n        <div elements>${elements}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const dataItems = this.dataSet!.dataItems\n\n    return (dataItems || []).reduce((sum, dataItem) => {\n      const { tag, quota, type } = dataItem\n\n      const editors = Array.prototype.slice.call(\n        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n      ) as HTMLInputElement[]\n\n      if (editors.length > 0) {\n        sum[tag] =\n          editors.length > 1\n            ? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n            : type === 'boolean'\n            ? editors[0].checked\n            : editors[0].value\n      }\n\n      return sum\n    }, {} as { [tag: string]: any })\n  }\n}\n"]}

package/dist/src/ox-data-item-spec.d.ts

@@ -0,0 +1,22 @@
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import { LitElement, PropertyValues } from 'lit';
+import { DataItem, DataItemSpecSet, DataItemSpecSetProvider } from './types.js';
+export declare class OxDataItemSpec extends LitElement {
+    static registry: {
+        [name: string]: DataItemSpecSetProvider;
+    };
+    static registerProvider(name: string, provider: DataItemSpecSetProvider): void;
+    static styles: import("lit").CSSResult;
+    value?: {
+        [specSetName: string]: any;
+    };
+    dataItem?: DataItem;
+    dataItemSpecSets: DataItemSpecSet[];
+    specSetViews: NodeListOf<HTMLElement & {
+        value: any;
+    }>;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    private onChange;
+    private buildValue;
+}

package/dist/src/ox-data-item-spec.js

@@ -0,0 +1,81 @@
+var OxDataItemSpec_1;
+import { __decorate } from "tslib";
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, queryAll, state } from 'lit/decorators.js';
+let OxDataItemSpec = OxDataItemSpec_1 = class OxDataItemSpec extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dataItemSpecSets = [];
+    }
+    static registerProvider(name, provider) {
+        OxDataItemSpec_1.registry[name] = provider;
+    }
+    render() {
+        return html `<form @property-change=${(e) => this.onChange(e)}>
+      ${this.dataItemSpecSets.map(({ name, description, specs }) => {
+            var _a;
+            return html ` <div specName>${name}</div>
+          <div description>${description}</div>
+          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a[name]}>
+          </ox-properties-dynamic-view>`;
+        })}
+    </form>`;
+    }
+    updated(changes) {
+        if (changes.has('dataItem')) {
+            this.dataItemSpecSets = Object.values(OxDataItemSpec_1.registry).map(provider => provider(this.dataItem));
+        }
+    }
+    onChange(e) {
+        this.value = this.buildValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { ...this.value }
+        }));
+    }
+    buildValue() {
+        var value = {};
+        this.specSetViews.forEach(view => (value[view.getAttribute('data-name')] = view.value));
+        return value;
+    }
+};
+OxDataItemSpec.registry = {};
+OxDataItemSpec.styles = css `
+    :host {
+      display: flex;
+      flex-direction: row;
+      border-bottom: var(--border-dark-color);
+      padding: var(--margin-default) 0;
+    }
+    [specName] {
+      font: var(--legend-font);
+      color: var(--legend-text-color);
+    }
+    [description] {
+      font: var(--form-sublabel-font);
+      opacity: 0.8;
+    }
+
+    form {
+      flex: 1;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataItemSpec.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataItemSpec.prototype, "dataItem", void 0);
+__decorate([
+    state()
+], OxDataItemSpec.prototype, "dataItemSpecSets", void 0);
+__decorate([
+    queryAll('ox-properties-dynamic-view')
+], OxDataItemSpec.prototype, "specSetViews", void 0);
+OxDataItemSpec = OxDataItemSpec_1 = __decorate([
+    customElement('ox-data-item-spec')
+], OxDataItemSpec);
+export { OxDataItemSpec };
+//# sourceMappingURL=ox-data-item-spec.js.map

package/dist/src/ox-data-item-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":";;AAAA,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAK5E,IAAa,cAAc,sBAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QA+BW,qBAAgB,GAAsB,EAAE,CAAA;IAuCnD,CAAC;IAnEQ,MAAM,CAAC,gBAAgB,CAAC,IAAY,EAAE,QAAiC;QAC5E,gBAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;IAC1C,CAAC;IA8BD,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;;YAAC,OAAA,IAAI,CAAA,kBAAkB,IAAI;6BACvC,WAAW;kDACU,IAAI,WAAW,KAAK,WAAW,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC;wCAC3D,CAAA;SAAA,CACjC;YACK,CAAA;IACV,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAA;SACzG;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAExF,OAAO,KAAK,CAAA;IACd,CAAC;CACF,CAAA;AArEQ,uBAAQ,GAAgD,EAAE,CAAA;AAM1D,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;wDAAyC;AAET;IAAvC,QAAQ,CAAC,4BAA4B,CAAC;oDAAwD;AAjCpF,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAsE1B;SAtEY,cAAc","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { DataItem, DataItemSpecSet, DataItemSpecSetProvider } from './types.js'\n\n@customElement('ox-data-item-spec')\nexport class OxDataItemSpec extends LitElement {\n  static registry: { [name: string]: DataItemSpecSetProvider } = {}\n\n  public static registerProvider(name: string, provider: DataItemSpecSetProvider) {\n    OxDataItemSpec.registry[name] = provider\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      border-bottom: var(--border-dark-color);\n      padding: var(--margin-default) 0;\n    }\n    [specName] {\n      font: var(--legend-font);\n      color: var(--legend-text-color);\n    }\n    [description] {\n      font: var(--form-sublabel-font);\n      opacity: 0.8;\n    }\n\n    form {\n      flex: 1;\n    }\n  `\n\n  @property({ type: Object }) value?: { [specSetName: string]: any }\n  @property({ type: Object }) dataItem?: DataItem\n\n  @state() dataItemSpecSets: DataItemSpecSet[] = []\n\n  @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>\n\n  render() {\n    return html`<form @property-change=${(e: Event) => this.onChange(e)}>\n      ${this.dataItemSpecSets.map(\n        ({ name, description, specs }) => html` <div specName>${name}</div>\n          <div description>${description}</div>\n          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>\n          </ox-properties-dynamic-view>`\n      )}\n    </form>`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('dataItem')) {\n      this.dataItemSpecSets = Object.values(OxDataItemSpec.registry).map(provider => provider(this.dataItem!))\n    }\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { ...this.value }\n      })\n    )\n  }\n\n  private buildValue() {\n    var value = {} as any\n    this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))\n\n    return value\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,38 @@
+export declare type SelectOption = {
+    text: string;
+    value: string;
+};
+export declare type SelectOptions = SelectOption[];
+export declare type TypeOptions = {
+    options?: SelectOptions;
+    [prop: string]: any;
+};
+export declare type DataItem = {
+    name: string;
+    description: string;
+    sequence: number;
+    tag: string;
+    type: string;
+    options: TypeOptions;
+    unit: string;
+    quota: number;
+};
+export declare type DataSet = {
+    name: string;
+    description: string;
+    dataItems: DataItem[];
+};
+export declare type DataItemSpec = {
+    type: string;
+    label: string;
+    name: string;
+    property: {
+        [option: string]: any;
+    };
+};
+export declare type DataItemSpecSet = {
+    name: string;
+    description: string;
+    specs: DataItemSpec[];
+};
+export declare type DataItemSpecSetProvider = (dataItem: DataItem) => DataItemSpecSet;

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SelectOption = { text: string; value: string }\nexport type SelectOptions = SelectOption[]\nexport type TypeOptions = {\n  options?: SelectOptions\n  [prop: string]: any\n}\n\nexport type DataItem = {\n  name: string\n  description: string\n  sequence: number\n  tag: string\n  type: string\n  options: TypeOptions\n  unit: string\n  quota: number\n}\n\nexport type DataSet = {\n  name: string\n  description: string\n  dataItems: DataItem[]\n}\n\nexport type DataItemSpec = {\n  type: string\n  label: string\n  name: string\n  property: { [option: string]: any }\n}\n\nexport type DataItemSpecSet = {\n  name: string\n  description: string\n  specs: DataItemSpec[]\n}\n\nexport type DataItemSpecSetProvider = (dataItem: DataItem) => DataItemSpecSet\n"]}