@things-factory/integration-ui 6.1.116 → 6.1.117

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 (9) hide show
  1. package/client/editors/property-editor.ts +5 -0
  2. package/client/editors/things-editor-procedure-parameters.ts +24 -8
  3. package/dist-client/editors/property-editor.js +4 -0
  4. package/dist-client/editors/property-editor.js.map +1 -1
  5. package/dist-client/editors/things-editor-procedure-parameters.d.ts +3 -1
  6. package/dist-client/editors/things-editor-procedure-parameters.js +20 -7
  7. package/dist-client/editors/things-editor-procedure-parameters.js.map +1 -1
  8. package/dist-client/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +3 -3
package/client/editors/property-editor.ts CHANGED
@@ -81,11 +81,16 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
81
81
  }
82
82
 
83
83
  editorTemplate(value, spec) {
84
+ /* context must be a datagrid(grist) instance, and host must be a record */
85
+ const { context: grid, host: record } = spec
86
+ const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []
87
+
84
88
  return html`
85
89
  <things-editor-procedure-parameters
86
90
  id="editor"
87
91
  .value=${value}
88
92
  .properties=${spec.property}
93
+ .steps=${steps}
89
94
  fullwidth
90
95
  ></things-editor-procedure-parameters>
91
96
  `
package/client/editors/things-editor-procedure-parameters.ts CHANGED
@@ -9,7 +9,14 @@ import { customElement, property, queryAll } from 'lit/decorators.js'
9
9
 
10
10
  import { OxFormField } from '@operato/input'
11
11
 
12
- type ProcedureParameterType = { name: string; dir: string; type: string; val?: any; maxSize?: number }
12
+ type ProcedureParameterType = {
13
+ name: string
14
+ dir: string
15
+ type: string
16
+ val?: any
17
+ accessor?: string
18
+ maxSize?: number
19
+ }
13
20
 
14
21
  /**
15
22
  input component for procedure-parameters
@@ -94,6 +101,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
94
101
  ]
95
102
 
96
103
  @property({ type: Array }) value: ProcedureParameterType[] = []
104
+ @property({ type: Array }) steps: string[] = []
97
105
 
98
106
  private _changingNow: boolean = false
99
107
 
@@ -103,6 +111,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
103
111
 
104
112
  render() {
105
113
  const value = !this.value || !Array.isArray(this.value) ? [] : this.value
114
+ const steps = this.steps || []
106
115
 
107
116
  return html`
108
117
  ${value.map(
@@ -127,7 +136,8 @@ export class ThingsEditorProcedureParameters extends OxFormField {
127
136
  -->
128
137
  <option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
129
138
  </select>
130
- <input type="text" data-val placeholder="val" .value=${item.val} />
139
+ <input type="text" data-accessor placeholder="accessor" .value=${item.accessor || ''} list="step-list" />
140
+ <input type="text" data-val placeholder="val" .value=${item.val || ''} />
131
141
  <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
132
142
 
133
143
  <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
@@ -163,6 +173,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
163
173
  -->
164
174
  <option value="Cursor">Cursor</option>
165
175
  </select>
176
+ <input type="text" data-accessor placeholder="accessor" value="" list="step-list" />
166
177
  <input type="text" data-val placeholder="val" value="" />
167
178
  <input type="number" data-max-size placeholder="max-size" value="" />
168
179
 
@@ -172,6 +183,8 @@ export class ThingsEditorProcedureParameters extends OxFormField {
172
183
  <button class="hidden"><mwc-icon>add</mwc-icon></button>
173
184
  <button class="hidden"><mwc-icon>add</mwc-icon></button>
174
185
  </div>
186
+
187
+ <datalist id="step-list">${steps.map(id => html` <option value=${id}></option> `)}</datalist>
175
188
  `
176
189
  }
177
190
 
@@ -195,11 +208,12 @@ export class ThingsEditorProcedureParameters extends OxFormField {
195
208
  this._changingNow = false
196
209
  }
197
210
 
198
- _adjust({ name, type, dir, maxSize, val }: ProcedureParameterType): ProcedureParameterType {
211
+ _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {
199
212
  const entry = {
200
- name,
213
+ name: name && String(name).trim(),
201
214
  type,
202
- dir
215
+ dir,
216
+ accessor: accessor && String(accessor).trim()
203
217
  } as ProcedureParameterType
204
218
 
205
219
  if (
@@ -213,7 +227,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
213
227
  }
214
228
 
215
229
  if (dir != 'Out' && val !== null && val !== undefined && val != '') {
216
- entry.val = val
230
+ entry.val = type == 'Number' ? Number(val) : val
217
231
  }
218
232
 
219
233
  return entry
@@ -235,6 +249,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
235
249
  const type = (record.querySelector('[data-type]') as HTMLInputElement).value
236
250
  const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
237
251
  const val = (record.querySelector('[data-val]') as HTMLInputElement).value
252
+ const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
238
253
  const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
239
254
 
240
255
  const inputs = record.querySelectorAll(
@@ -246,7 +261,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
246
261
  }
247
262
 
248
263
  if (name) {
249
- newmap.push(this._adjust({ name, type, dir, val, maxSize }))
264
+ newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))
250
265
  }
251
266
  }
252
267
 
@@ -297,9 +312,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
297
312
  const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
298
313
  const type = (record.querySelector('[data-type]') as HTMLInputElement).value
299
314
  const val = (record.querySelector('[data-val]') as HTMLInputElement).value
315
+ const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
300
316
  const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
301
317
 
302
- return this._adjust({ name, dir, type, val, maxSize })
318
+ return this._adjust({ name, dir, type, val, accessor, maxSize })
303
319
  })
304
320
 
305
321
  this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
package/dist-client/editors/property-editor.js CHANGED
@@ -64,11 +64,15 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
64
64
  return [...OxPropertyEditor.styles];
65
65
  }
66
66
  editorTemplate(value, spec) {
67
+ /* context must be a datagrid(grist) instance, and host must be a record */
68
+ const { context: grid, host: record } = spec;
69
+ const steps = (grid === null || grid === void 0 ? void 0 : grid.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name)) || [];
67
70
  return html `
68
71
  <things-editor-procedure-parameters
69
72
  id="editor"
70
73
  .value=${value}
71
74
  .properties=${spec.property}
75
+ .steps=${steps}
72
76
  fullwidth
73
77
  ></things-editor-procedure-parameters>
74
78
  `;
package/dist-client/editors/property-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,MAAM,OAAO,+BAAgC,SAAQ,gBAAgB;IACnE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,2EAA2E;QAC3E,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAI,EAAE,CAAA;QAExG,OAAO,IAAI,CAAA;kCACmB,KAAK,IAAI,EAAE;iCACZ,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAClF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,+BAA+B,CAAC,CAAA;AAE7F,MAAM,OAAO,yBAA0B,SAAQ,gBAAgB;IAC7D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;uDACwC,KAAK,gBAAgB,IAAI,CAAC,QAAQ;KACpF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,CAAA;AAEhF,MAAM,OAAO,4BAA6B,SAAQ,gBAAgB;IAChE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;;;iBAGE,KAAK;sBACA,IAAI,CAAC,QAAQ;;KAE9B,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,iCAAiC,EAAE,4BAA4B,CAAC,CAAA;AAEtF,MAAM,OAAO,sBAAuB,SAAQ,gBAAgB;IAC1D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;oDACqC,KAAK,gBAAgB,IAAI,CAAC,QAAQ;KACjF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAA;AAE1E,MAAM,OAAO,iCAAkC,SAAQ,gBAAgB;IACrE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;;;iBAGE,KAAK;sBACA,IAAI,CAAC,QAAQ;;;KAG9B,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,sCAAsC,EAAE,iCAAiC,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-procedure-parameters'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n `\n }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n ></things-editor-http-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n `\n }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-procedure-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n fullwidth\n ></things-editor-procedure-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n"]}
1
+ {"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-procedure-parameters'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n `\n }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n ></things-editor-http-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n `\n }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <things-editor-procedure-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n .steps=${steps}\n fullwidth\n ></things-editor-procedure-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n"]}
package/dist-client/editors/things-editor-procedure-parameters.d.ts CHANGED
@@ -8,6 +8,7 @@ type ProcedureParameterType = {
8
8
  dir: string;
9
9
  type: string;
10
10
  val?: any;
11
+ accessor?: string;
11
12
  maxSize?: number;
12
13
  };
13
14
  /**
@@ -22,11 +23,12 @@ type ProcedureParameterType = {
22
23
  export declare class ThingsEditorProcedureParameters extends OxFormField {
23
24
  static styles: import("lit").CSSResult[];
24
25
  value: ProcedureParameterType[];
26
+ steps: string[];
25
27
  private _changingNow;
26
28
  firstUpdated(): void;
27
29
  render(): import("lit-html").TemplateResult<1>;
28
30
  _onChange(e: Event): void;
29
- _adjust({ name, type, dir, maxSize, val }: ProcedureParameterType): ProcedureParameterType;
31
+ _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType;
30
32
  _build(includeNewRecord?: boolean): void;
31
33
  _add(): void;
32
34
  _delete(e: MouseEvent): void;
package/dist-client/editors/things-editor-procedure-parameters.js CHANGED
@@ -19,6 +19,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
19
19
  constructor() {
20
20
  super(...arguments);
21
21
  this.value = [];
22
+ this.steps = [];
22
23
  this._changingNow = false;
23
24
  }
24
25
  firstUpdated() {
@@ -26,6 +27,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
26
27
  }
27
28
  render() {
28
29
  const value = !this.value || !Array.isArray(this.value) ? [] : this.value;
30
+ const steps = this.steps || [];
29
31
  return html `
30
32
  ${value.map(item => html `
31
33
  <div data-record>
@@ -48,7 +50,8 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
48
50
  -->
49
51
  <option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
50
52
  </select>
51
- <input type="text" data-val placeholder="val" .value=${item.val} />
53
+ <input type="text" data-accessor placeholder="accessor" .value=${item.accessor || ''} list="step-list" />
54
+ <input type="text" data-val placeholder="val" .value=${item.val || ''} />
52
55
  <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
53
56
 
54
57
  <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
@@ -83,6 +86,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
83
86
  -->
84
87
  <option value="Cursor">Cursor</option>
85
88
  </select>
89
+ <input type="text" data-accessor placeholder="accessor" value="" list="step-list" />
86
90
  <input type="text" data-val placeholder="val" value="" />
87
91
  <input type="number" data-max-size placeholder="max-size" value="" />
88
92
 
@@ -92,6 +96,8 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
92
96
  <button class="hidden"><mwc-icon>add</mwc-icon></button>
93
97
  <button class="hidden"><mwc-icon>add</mwc-icon></button>
94
98
  </div>
99
+
100
+ <datalist id="step-list">${steps.map(id => html ` <option value=${id}></option> `)}</datalist>
95
101
  `;
96
102
  }
97
103
  _onChange(e) {
@@ -109,11 +115,12 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
109
115
  }
110
116
  this._changingNow = false;
111
117
  }
112
- _adjust({ name, type, dir, maxSize, val }) {
118
+ _adjust({ name, type, dir, maxSize, val, accessor }) {
113
119
  const entry = {
114
- name,
120
+ name: name && String(name).trim(),
115
121
  type,
116
- dir
122
+ dir,
123
+ accessor: accessor && String(accessor).trim()
117
124
  };
118
125
  if (dir != 'In' &&
119
126
  (type == 'String' || type == 'Buffer') &&
@@ -123,7 +130,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
123
130
  entry.maxSize = maxSize;
124
131
  }
125
132
  if (dir != 'Out' && val !== null && val !== undefined && val != '') {
126
- entry.val = val;
133
+ entry.val = type == 'Number' ? Number(val) : val;
127
134
  }
128
135
  return entry;
129
136
  }
@@ -141,13 +148,14 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
141
148
  const type = record.querySelector('[data-type]').value;
142
149
  const dir = record.querySelector('[data-dir]').value;
143
150
  const val = record.querySelector('[data-val]').value;
151
+ const accessor = record.querySelector('[data-accessor]').value;
144
152
  const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
145
153
  const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])');
146
154
  if (!inputs || inputs.length == 0) {
147
155
  continue;
148
156
  }
149
157
  if (name) {
150
- newmap.push(this._adjust({ name, type, dir, val, maxSize }));
158
+ newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }));
151
159
  }
152
160
  }
153
161
  this.value = newmap;
@@ -181,8 +189,9 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
181
189
  const dir = record.querySelector('[data-dir]').value;
182
190
  const type = record.querySelector('[data-type]').value;
183
191
  const val = record.querySelector('[data-val]').value;
192
+ const accessor = record.querySelector('[data-accessor]').value;
184
193
  const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
185
- return this._adjust({ name, dir, type, val, maxSize });
194
+ return this._adjust({ name, dir, type, val, accessor, maxSize });
186
195
  });
187
196
  this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
188
197
  }
@@ -280,6 +289,10 @@ __decorate([
280
289
  property({ type: Array }),
281
290
  __metadata("design:type", Array)
282
291
  ], ThingsEditorProcedureParameters.prototype, "value", void 0);
292
+ __decorate([
293
+ property({ type: Array }),
294
+ __metadata("design:type", Array)
295
+ ], ThingsEditorProcedureParameters.prototype, "steps", void 0);
283
296
  __decorate([
284
297
  queryAll('[data-record]'),
285
298
  __metadata("design:type", Object)
package/dist-client/editors/things-editor-procedure-parameters.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"things-editor-procedure-parameters.js","sourceRoot":"","sources":["../../client/editors/things-editor-procedure-parameters.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 ProcedureParameterType = { name: string; dir: string; type: string; val?: any; maxSize?: number }\n\n/**\n input component for procedure-parameters\n \n Example:\n \n <things-editor-procedure-parameters \n value=${map}\n </things-editor-procedure-parameters>\n */\n@customElement('things-editor-procedure-parameters')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n static styles = [\n 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\n button + button {\n margin-left: -5px;\n }\n\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\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\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n `\n ]\n\n @property({ type: Array }) value: ProcedureParameterType[] = []\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 || !Array.isArray(this.value) ? [] : this.value\n\n return html`\n ${value.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n <select data-dir placeholder=\"dir\" .value=${item.dir}>\n <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n </select>\n <select data-type placeholder=\"type\" .value=${item.type}>\n <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n <!-- \n <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n -->\n <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n </select>\n <input type=\"text\" data-val placeholder=\"val\" .value=${item.val} />\n <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\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-dir placeholder=\"dir\">\n <option value=\"\" selected>&nbsp;</option>\n <option value=\"In\">In</option>\n <option value=\"Inout\">Inout</option>\n <option value=\"Out\">Out</option>\n </select>\n <select data-type placeholder=\"type\" value=\"\">\n <option value=\"\" selected>&nbsp;</option>\n <option value=\"String\">String</option>\n <option value=\"Number\">Number</option>\n <option value=\"Date\">Date</option>\n <!--\n <option value=\"Buffer\">Buffer</option>\n <option value=\"Blob\">Blob</option>\n <option value=\"Clob\">Clob</option>\n -->\n <option value=\"Cursor\">Cursor</option>\n </select>\n <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\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 _adjust({ name, type, dir, maxSize, val }: ProcedureParameterType): ProcedureParameterType {\n const entry = {\n name,\n type,\n dir\n } as ProcedureParameterType\n\n if (\n dir != 'In' &&\n (type == 'String' || type == 'Buffer') &&\n maxSize !== null &&\n maxSize !== undefined &&\n !isNaN(maxSize)\n ) {\n entry.maxSize = maxSize\n }\n\n if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n entry.val = val\n }\n\n return entry\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: ProcedureParameterType[] = []\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 type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\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 if (name) {\n newmap.push(this._adjust({ name, type, dir, val, maxSize }))\n }\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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.map(record => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n return this._adjust({ name, dir, type, val, maxSize })\n })\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.map(record => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n return this._adjust({ name, dir, type, val, maxSize })\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
1
+ {"version":3,"file":"things-editor-procedure-parameters.js","sourceRoot":"","sources":["../../client/editors/things-editor-procedure-parameters.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 ProcedureParameterType = {\n name: string\n dir: string\n type: string\n val?: any\n accessor?: string\n maxSize?: number\n}\n\n/**\n input component for procedure-parameters\n \n Example:\n \n <things-editor-procedure-parameters \n value=${map}\n </things-editor-procedure-parameters>\n */\n@customElement('things-editor-procedure-parameters')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n static styles = [\n 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\n button + button {\n margin-left: -5px;\n }\n\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\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\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n button.hidden {\n opacity: 0;\n cursor: default;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n `\n ]\n\n @property({ type: Array }) value: ProcedureParameterType[] = []\n @property({ type: Array }) steps: string[] = []\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 || !Array.isArray(this.value) ? [] : this.value\n const steps = this.steps || []\n\n return html`\n ${value.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n <select data-dir placeholder=\"dir\" .value=${item.dir}>\n <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n </select>\n <select data-type placeholder=\"type\" .value=${item.type}>\n <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n <!-- \n <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n -->\n <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n </select>\n <input type=\"text\" data-accessor placeholder=\"accessor\" .value=${item.accessor || ''} list=\"step-list\" />\n <input type=\"text\" data-val placeholder=\"val\" .value=${item.val || ''} />\n <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\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-dir placeholder=\"dir\">\n <option value=\"\" selected>&nbsp;</option>\n <option value=\"In\">In</option>\n <option value=\"Inout\">Inout</option>\n <option value=\"Out\">Out</option>\n </select>\n <select data-type placeholder=\"type\" value=\"\">\n <option value=\"\" selected>&nbsp;</option>\n <option value=\"String\">String</option>\n <option value=\"Number\">Number</option>\n <option value=\"Date\">Date</option>\n <!--\n <option value=\"Buffer\">Buffer</option>\n <option value=\"Blob\">Blob</option>\n <option value=\"Clob\">Clob</option>\n -->\n <option value=\"Cursor\">Cursor</option>\n </select>\n <input type=\"text\" data-accessor placeholder=\"accessor\" value=\"\" list=\"step-list\" />\n <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\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 <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\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 _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {\n const entry = {\n name: name && String(name).trim(),\n type,\n dir,\n accessor: accessor && String(accessor).trim()\n } as ProcedureParameterType\n\n if (\n dir != 'In' &&\n (type == 'String' || type == 'Buffer') &&\n maxSize !== null &&\n maxSize !== undefined &&\n !isNaN(maxSize)\n ) {\n entry.maxSize = maxSize\n }\n\n if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n entry.val = type == 'Number' ? Number(val) : val\n }\n\n return entry\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: ProcedureParameterType[] = []\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 type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\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 if (name) {\n newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))\n }\n }\n\n this.value = newmap\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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.map(record => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n return this._adjust({ name, dir, type, val, accessor, maxSize })\n })\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.map(record => {\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n return this._adjust({ name, dir, type, val, maxSize })\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}