@operato/input 1.13.11 → 1.13.12
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 +10 -0
- package/dist/src/ox-input-data.d.ts +1 -3
- package/dist/src/ox-input-data.js +18 -13
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/stories/ox-input-data.stories.d.ts +33 -0
- package/dist/stories/ox-input-data.stories.js +40 -0
- package/dist/stories/ox-input-data.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-data.ts +20 -15
- package/stories/ox-input-data.stories.ts +55 -0
- package/yarn-error.log +17084 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
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.13.12](https://github.com/hatiolab/operato/compare/v1.13.11...v1.13.12) (2024-01-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* fix typo ([5e71d20](https://github.com/hatiolab/operato/commit/5e71d20af7f30c57249cfbdfdeb9e88c48ef738e))
|
|
12
|
+
* ox-input-data 자동 타입 식별 기능 ([0763ddb](https://github.com/hatiolab/operato/commit/0763ddb2b0b9334c357d4b16df530ee3c8b883f3))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
6
16
|
### [1.13.11](https://github.com/hatiolab/operato/compare/v1.13.10...v1.13.11) (2024-01-18)
|
|
7
17
|
|
|
8
18
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import './ox-input-code';
|
|
5
|
-
import { PropertyValues } from 'lit';
|
|
6
5
|
import { OxFormField } from './ox-form-field.js';
|
|
7
6
|
/**
|
|
8
7
|
WEB Component for code-mirror based data editor.
|
|
@@ -16,9 +15,8 @@ export declare class OxInputData extends OxFormField {
|
|
|
16
15
|
static styles: import("lit").CSSResult[];
|
|
17
16
|
render(): import("lit").TemplateResult<1>;
|
|
18
17
|
firstUpdated(): void;
|
|
19
|
-
udpated(changes: PropertyValues<this>): void;
|
|
20
18
|
_setDataType(type: string | undefined | null): void;
|
|
21
19
|
_clearData(): void;
|
|
22
20
|
_getData(data: any): any;
|
|
23
|
-
_onAfterValueChange(): void
|
|
21
|
+
_onAfterValueChange(): Promise<void>;
|
|
24
22
|
}
|
|
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import './ox-input-code';
|
|
6
6
|
import { css, html } from 'lit';
|
|
7
7
|
import { customElement } from 'lit/decorators.js';
|
|
8
|
+
import { live } from 'lit/directives/live.js';
|
|
8
9
|
import { OxFormField } from './ox-form-field.js';
|
|
9
10
|
/**
|
|
10
11
|
WEB Component for code-mirror based data editor.
|
|
@@ -43,34 +44,42 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
43
44
|
`
|
|
44
45
|
]; }
|
|
45
46
|
render() {
|
|
47
|
+
const valueType = typeof this.value;
|
|
46
48
|
return html `
|
|
47
49
|
<div datatype>
|
|
48
50
|
<input
|
|
51
|
+
id="string"
|
|
49
52
|
type="radio"
|
|
50
53
|
name="data-type"
|
|
51
54
|
data-value="string"
|
|
52
|
-
.checked=${
|
|
55
|
+
.checked=${live(valueType == 'string')}
|
|
53
56
|
@click=${() => this._setDataType('string')}
|
|
54
57
|
?disabled=${this.disabled}
|
|
55
|
-
/>
|
|
58
|
+
/>
|
|
59
|
+
<label for="string">string</label>
|
|
56
60
|
|
|
57
61
|
<input
|
|
62
|
+
id="number"
|
|
58
63
|
type="radio"
|
|
59
64
|
name="data-type"
|
|
60
65
|
data-value="number"
|
|
61
|
-
.checked=${
|
|
66
|
+
.checked=${live(valueType == 'number')}
|
|
62
67
|
@click=${() => this._setDataType('number')}
|
|
63
68
|
?disabled=${this.disabled}
|
|
64
|
-
/>
|
|
69
|
+
/>
|
|
70
|
+
<label for="number">number</label>
|
|
65
71
|
|
|
66
72
|
<input
|
|
73
|
+
id="object"
|
|
67
74
|
type="radio"
|
|
68
75
|
name="data-type"
|
|
69
76
|
data-value="object"
|
|
70
|
-
.checked=${
|
|
77
|
+
.checked=${live(valueType == 'object')}
|
|
71
78
|
@click=${() => this._setDataType('object')}
|
|
72
79
|
?disabled=${this.disabled}
|
|
73
|
-
/>
|
|
80
|
+
/>
|
|
81
|
+
<label for="object">object</label>
|
|
82
|
+
|
|
74
83
|
<mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
|
|
75
84
|
</div>
|
|
76
85
|
|
|
@@ -89,18 +98,13 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
89
98
|
this._setDataType(type);
|
|
90
99
|
});
|
|
91
100
|
}
|
|
92
|
-
udpated(changes) {
|
|
93
|
-
if (changes.has('value')) {
|
|
94
|
-
this.value = this._getData(this.value);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
101
|
_setDataType(type) {
|
|
98
102
|
if (typeof this.value !== type) {
|
|
99
103
|
var value = this.value;
|
|
100
104
|
try {
|
|
101
105
|
switch (type) {
|
|
102
106
|
case 'string':
|
|
103
|
-
this.value =
|
|
107
|
+
this.value = this._getData(value);
|
|
104
108
|
break;
|
|
105
109
|
case 'number':
|
|
106
110
|
if (!isNaN(value)) {
|
|
@@ -116,6 +120,7 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
116
120
|
console.log(e);
|
|
117
121
|
}
|
|
118
122
|
}
|
|
123
|
+
this.requestUpdate();
|
|
119
124
|
this._onAfterValueChange();
|
|
120
125
|
}
|
|
121
126
|
_clearData() {
|
|
@@ -125,7 +130,7 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
125
130
|
_getData(data) {
|
|
126
131
|
return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1);
|
|
127
132
|
}
|
|
128
|
-
_onAfterValueChange() {
|
|
133
|
+
async _onAfterValueChange() {
|
|
129
134
|
this.dispatchEvent(new CustomEvent('change', {
|
|
130
135
|
bubbles: true,
|
|
131
136
|
composed: true
|
|
@@ -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,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-code'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, state } 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'\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 .value=${this._getData(this.value)} language=\"javascript\" editor ?disabled=${this.disabled}>\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n this.value = target.value\n }\n\n const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')\n this._setDataType(type)\n })\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value !== type) {\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n this.value = this._getData(value)\n break\n case 'number':\n if (!isNaN(value)) {\n this.value = Number(value)\n }\n break\n case 'object':\n this.value = eval('(' + value + ')')\n break\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getData(data: any) {\n return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)\n }\n\n async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import '../src/ox-input-data.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
value: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
name: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
language: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
17
|
+
disabled: {
|
|
18
|
+
control: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export default _default;
|
|
23
|
+
interface Story<T> {
|
|
24
|
+
(args: T): TemplateResult;
|
|
25
|
+
args?: Partial<T>;
|
|
26
|
+
argTypes?: Record<string, unknown>;
|
|
27
|
+
}
|
|
28
|
+
interface ArgTypes {
|
|
29
|
+
name?: string;
|
|
30
|
+
value?: string | number | object;
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
}
|
|
33
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import '../src/ox-input-data.js';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'ox-input-data',
|
|
5
|
+
component: 'ox-input-data',
|
|
6
|
+
argTypes: {
|
|
7
|
+
value: { control: 'text' },
|
|
8
|
+
name: { control: 'text' },
|
|
9
|
+
language: { control: 'select', options: ['javascript', 'sql', 'json'] },
|
|
10
|
+
disabled: { control: 'boolean' }
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const Template = ({ name = 'code', value = '', disabled }) => html `
|
|
14
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
15
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
16
|
+
<style>
|
|
17
|
+
body {
|
|
18
|
+
}
|
|
19
|
+
ox-input-data {
|
|
20
|
+
height: 300px;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<ox-input-data
|
|
25
|
+
@change=${(e) => {
|
|
26
|
+
const value = e.target.value;
|
|
27
|
+
console.log('value : ', value, typeof value);
|
|
28
|
+
}}
|
|
29
|
+
name=${name}
|
|
30
|
+
.value=${value}
|
|
31
|
+
?disabled=${disabled}
|
|
32
|
+
>
|
|
33
|
+
</ox-input-data>
|
|
34
|
+
`;
|
|
35
|
+
export const Regular = Template.bind({});
|
|
36
|
+
Regular.args = {
|
|
37
|
+
name: 'data',
|
|
38
|
+
value: ''
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=ox-input-data.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE;QACvE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAY/E,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-data.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-data',\n component: 'ox-input-data',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n language: { control: 'select', options: ['javascript', 'sql', 'json'] },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: string | number | object\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n <style>\n body {\n }\n ox-input-data {\n height: 300px;\n }\n </style>\n\n <ox-input-data\n @change=${(e: Event) => {\n const value = (e.target as HTMLInputElement).value\n console.log('value : ', value, typeof value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-data>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'data',\n value: ''\n}\n"]}
|