@operato/input 1.13.12 → 1.14.3
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.
- package/CHANGELOG.md +19 -0
- package/dist/src/ox-input-data.d.ts +2 -1
- package/dist/src/ox-input-data.js +71 -24
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-data.ts +81 -27
- package/yarn-error.log +0 -17084
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [1.14.3](https://github.com/hatiolab/operato/compare/v1.14.2...v1.14.3) (2024-02-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* bug on ox-input-data ([a277474](https://github.com/hatiolab/operato/commit/a2774741fd475e7458a5ad0a450a88a94ac0a53d))
|
|
12
|
+
* bug on ox-input-data ([6710eb1](https://github.com/hatiolab/operato/commit/6710eb12bfd4ab5cea30193e67bca327eeeaea28))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### [1.13.14](https://github.com/hatiolab/operato/compare/v1.13.13...v1.13.14) (2024-01-24)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### :bug: Bug Fix
|
|
20
|
+
|
|
21
|
+
* ox-input-data ([bd485dd](https://github.com/hatiolab/operato/commit/bd485dd1c508ec4247794ace55066b73cc70a1d7))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
### [1.13.12](https://github.com/hatiolab/operato/compare/v1.13.11...v1.13.12) (2024-01-24)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -15,8 +15,9 @@ export declare class OxInputData extends OxFormField {
|
|
|
15
15
|
static styles: import("lit").CSSResult[];
|
|
16
16
|
render(): import("lit").TemplateResult<1>;
|
|
17
17
|
firstUpdated(): void;
|
|
18
|
+
_setDataTypeAndValue(type: string | undefined | null, value: any): void;
|
|
18
19
|
_setDataType(type: string | undefined | null): void;
|
|
19
20
|
_clearData(): void;
|
|
20
|
-
|
|
21
|
+
_getStringData(data: any): string;
|
|
21
22
|
_onAfterValueChange(): Promise<void>;
|
|
22
23
|
}
|
|
@@ -7,6 +7,7 @@ import { css, html } from 'lit';
|
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
8
|
import { live } from 'lit/directives/live.js';
|
|
9
9
|
import { OxFormField } from './ox-form-field.js';
|
|
10
|
+
import { isEqual } from 'lodash-es';
|
|
10
11
|
/**
|
|
11
12
|
WEB Component for code-mirror based data editor.
|
|
12
13
|
|
|
@@ -83,7 +84,16 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
83
84
|
<mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
|
|
84
85
|
</div>
|
|
85
86
|
|
|
86
|
-
<ox-input-code
|
|
87
|
+
<ox-input-code
|
|
88
|
+
.value=${this._getStringData(this.value)}
|
|
89
|
+
language="text"
|
|
90
|
+
editor
|
|
91
|
+
?disabled=${this.disabled}
|
|
92
|
+
@change=${(e) => {
|
|
93
|
+
e.stopPropagation();
|
|
94
|
+
this._setDataTypeAndValue(valueType, e.target.value);
|
|
95
|
+
}}
|
|
96
|
+
>
|
|
87
97
|
</ox-input-code>
|
|
88
98
|
`;
|
|
89
99
|
}
|
|
@@ -92,34 +102,63 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
92
102
|
e.stopPropagation();
|
|
93
103
|
const target = e.target;
|
|
94
104
|
if (target.hasAttribute('editor')) {
|
|
105
|
+
if (this.value === undefined && target.value == '') {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
95
108
|
this.value = target.value;
|
|
96
109
|
}
|
|
97
|
-
const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value');
|
|
98
|
-
this._setDataType(type);
|
|
99
110
|
});
|
|
100
111
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
break;
|
|
114
|
-
case 'object':
|
|
115
|
-
this.value = eval('(' + value + ')');
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
112
|
+
_setDataTypeAndValue(type, value) {
|
|
113
|
+
/* value must be a string */
|
|
114
|
+
try {
|
|
115
|
+
switch (type) {
|
|
116
|
+
case 'number':
|
|
117
|
+
if (!isNaN(Number(value))) {
|
|
118
|
+
value = Number(value);
|
|
119
|
+
}
|
|
120
|
+
break;
|
|
121
|
+
case 'object':
|
|
122
|
+
value = eval('(' + value + ')');
|
|
123
|
+
break;
|
|
118
124
|
}
|
|
119
|
-
|
|
120
|
-
|
|
125
|
+
}
|
|
126
|
+
catch (e) { }
|
|
127
|
+
if (isEqual(this.value, value)) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
this.value = value;
|
|
131
|
+
this.requestUpdate();
|
|
132
|
+
this._onAfterValueChange();
|
|
133
|
+
}
|
|
134
|
+
_setDataType(type) {
|
|
135
|
+
if (typeof this.value == type) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
var value = this.value;
|
|
139
|
+
try {
|
|
140
|
+
switch (type) {
|
|
141
|
+
case 'string':
|
|
142
|
+
value = this._getStringData(value);
|
|
143
|
+
break;
|
|
144
|
+
case 'number':
|
|
145
|
+
if (!isNaN(value)) {
|
|
146
|
+
value = Number(value);
|
|
147
|
+
}
|
|
148
|
+
break;
|
|
149
|
+
case 'object':
|
|
150
|
+
value = eval('(' + value + ')');
|
|
151
|
+
break;
|
|
121
152
|
}
|
|
122
153
|
}
|
|
154
|
+
catch (e) {
|
|
155
|
+
console.log(e);
|
|
156
|
+
}
|
|
157
|
+
if (isEqual(this.value, value)) {
|
|
158
|
+
this.requestUpdate();
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
this.value = value;
|
|
123
162
|
this.requestUpdate();
|
|
124
163
|
this._onAfterValueChange();
|
|
125
164
|
}
|
|
@@ -127,8 +166,16 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
127
166
|
this.value = undefined;
|
|
128
167
|
this._onAfterValueChange();
|
|
129
168
|
}
|
|
130
|
-
|
|
131
|
-
|
|
169
|
+
_getStringData(data) {
|
|
170
|
+
const type = typeof data;
|
|
171
|
+
switch (type) {
|
|
172
|
+
case 'object':
|
|
173
|
+
return JSON.stringify(data, null, 1);
|
|
174
|
+
case 'undefined':
|
|
175
|
+
return '';
|
|
176
|
+
default:
|
|
177
|
+
return String(data) || '';
|
|
178
|
+
}
|
|
132
179
|
}
|
|
133
180
|
async _onAfterValueChange() {
|
|
134
181
|
this.dispatchEvent(new CustomEvent('change', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;aACnC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,CAAA;QAEnC,OAAO,IAAI,CAAA;;;;;;;qBAOM,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;2BAIR,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;iBAIjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;;oBAG5B,IAAI,CAAC,QAAQ;kBACf,CAAC,CAAc,EAAE,EAAE;YAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC,CAAA;QAC/D,CAAC;;;KAGJ,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;YACtC,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;oBACnD,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;YAC3B,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB,CAAC,IAA+B,EAAE,KAAU;QAC9D,4BAA4B;QAC5B,IAAI,CAAC;YACH,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;wBAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;oBACD,MAAK;gBACP,KAAK,QAAQ;oBACX,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA;oBAC/B,MAAK;YACT,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC,CAAA,CAAC;QAEd,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,YAAY,CAAC,IAA+B;QAC1C,IAAI,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YAC9B,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAEtB,IAAI,CAAC;YACH,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;oBAClC,MAAK;gBACP,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;wBAClB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;oBACD,MAAK;gBACP,KAAK,QAAQ;oBACX,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,CAAC,CAAA;oBAC/B,MAAK;YACT,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAChB,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,cAAc,CAAC,IAAS;QACtB,MAAM,IAAI,GAAG,OAAO,IAAI,CAAA;QAExB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YACtC,KAAK,WAAW;gBACd,OAAO,EAAE,CAAA;YACX;gBACE,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAxLU,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAyLvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div[datatype] {\n display: flex;\n align-items: center;\n padding: 2px;\n background-color: rgba(0, 0, 0, 0.08);\n font-size: small;\n }\n\n div[datatype] mwc-icon {\n margin-left: auto;\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n const valueType = typeof this.value\n\n return html`\n <div datatype>\n <input\n id=\"string\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${live(valueType == 'string')}\n @click=${() => this._setDataType('string')}\n ?disabled=${this.disabled}\n />\n <label for=\"string\">string</label>\n\n <input\n id=\"number\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${live(valueType == 'number')}\n @click=${() => this._setDataType('number')}\n ?disabled=${this.disabled}\n />\n <label for=\"number\">number</label>\n\n <input\n id=\"object\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${live(valueType == 'object')}\n @click=${() => this._setDataType('object')}\n ?disabled=${this.disabled}\n />\n <label for=\"object\">object</label>\n\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code\n .value=${this._getStringData(this.value)}\n language=\"text\"\n editor\n ?disabled=${this.disabled}\n @change=${(e: CustomEvent) => {\n e.stopPropagation()\n this._setDataTypeAndValue(valueType, (e.target as any).value)\n }}\n >\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n if (this.value === undefined && target.value == '') {\n return\n }\n this.value = target.value\n }\n })\n }\n\n _setDataTypeAndValue(type: string | undefined | null, value: any) {\n /* value must be a string */\n try {\n switch (type) {\n case 'number':\n if (!isNaN(Number(value))) {\n value = Number(value)\n }\n break\n case 'object':\n value = eval('(' + value + ')')\n break\n }\n } catch (e) {}\n\n if (isEqual(this.value, value)) {\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value == type) {\n return\n }\n\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n value = this._getStringData(value)\n break\n case 'number':\n if (!isNaN(value)) {\n value = Number(value)\n }\n break\n case 'object':\n value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n\n if (isEqual(this.value, value)) {\n this.requestUpdate()\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getStringData(data: any) {\n const type = typeof data\n\n switch (type) {\n case 'object':\n return JSON.stringify(data, null, 1)\n case 'undefined':\n return ''\n default:\n return String(data) || ''\n }\n }\n\n async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|