@operato/input 1.7.2 → 1.7.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 +9 -0
- package/dist/src/ox-input-code.d.ts +1 -1
- package/dist/src/ox-input-code.js +7 -6
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-data.js +1 -1
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/ox-input-code.ts +7 -7
- package/src/ox-input-data.ts +1 -1
- package/yarn-error.log +0 -17084
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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.7.3](https://github.com/hatiolab/operato/compare/v1.7.2...v1.7.3) (2023-12-11)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add language option into ox-input-code and relatives ([1ee1c85](https://github.com/hatiolab/operato/commit/1ee1c85efa1f8a7d8c9dcabe6c17190159e43812))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [1.7.2](https://github.com/hatiolab/operato/compare/v1.7.1...v1.7.2) (2023-12-11)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -9,7 +9,7 @@ WEB Component for code-mirror code editor.
|
|
|
9
9
|
|
|
10
10
|
Example:
|
|
11
11
|
|
|
12
|
-
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
|
12
|
+
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true" language="javascript">
|
|
13
13
|
</ox-input-code>
|
|
14
14
|
*/
|
|
15
15
|
export declare class OxInputCode extends OxFormField {
|
|
@@ -20,7 +20,7 @@ WEB Component for code-mirror code editor.
|
|
|
20
20
|
|
|
21
21
|
Example:
|
|
22
22
|
|
|
23
|
-
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
|
|
23
|
+
<ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true" language="javascript">
|
|
24
24
|
</ox-input-code>
|
|
25
25
|
*/
|
|
26
26
|
let OxInputCode = class OxInputCode extends OxFormField {
|
|
@@ -61,23 +61,24 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
61
61
|
}
|
|
62
62
|
get editor() {
|
|
63
63
|
if (!this._editor) {
|
|
64
|
-
let language;
|
|
64
|
+
let language = [];
|
|
65
65
|
switch (this.language) {
|
|
66
66
|
case 'sql':
|
|
67
|
-
language = sql();
|
|
67
|
+
language = [sql()];
|
|
68
68
|
break;
|
|
69
69
|
case 'json':
|
|
70
|
-
language = json();
|
|
70
|
+
language = [json()];
|
|
71
71
|
break;
|
|
72
72
|
case 'javascript':
|
|
73
|
+
language = [javascript()];
|
|
74
|
+
break;
|
|
73
75
|
default:
|
|
74
|
-
language = javascript();
|
|
75
76
|
break;
|
|
76
77
|
}
|
|
77
78
|
this._editor = new EditorView({
|
|
78
79
|
doc: this.value,
|
|
79
80
|
extensions: [
|
|
80
|
-
language,
|
|
81
|
+
...language,
|
|
81
82
|
bracketMatching(),
|
|
82
83
|
closeBrackets(),
|
|
83
84
|
history(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\" language=\"javascript\">\n </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n background: white;\n overflow: auto;\n }\n\n .cm-editor {\n flex: 1;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: String }) mode?: string\n @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n @property({ type: String }) language?: 'javascript' | 'sql' | 'json' = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && this.editor && !this._self_changing) {\n const to = this.editor.state.doc.toString().length\n this.editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\n }\n\n get editor() {\n if (!this._editor) {\n let language: LanguageSupport[] = []\n switch (this.language) {\n case 'sql':\n language = [sql()]\n break\n case 'json':\n language = [json()]\n break\n case 'javascript':\n language = [javascript()]\n break\n default:\n break\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n ...language,\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n highlightActiveLine(),\n keymap.of([\n ...historyKeymap,\n indentWithTab,\n {\n key: 'Escape',\n run: (view: EditorView) => {\n togglefullscreen(this)\n return true\n }\n }\n ]),\n EditorView.updateListener.of(v => {\n if (v.docChanged) {\n this._self_changing = true\n this.value = v.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n requestAnimationFrame(() => {\n this._self_changing = false\n })\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -71,7 +71,7 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
71
71
|
<mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
|
|
72
72
|
</div>
|
|
73
73
|
|
|
74
|
-
<ox-input-code .value=${this._getData(this.value)} editor> </ox-input-code>
|
|
74
|
+
<ox-input-code .value=${this._getData(this.value)} language="javascript" editor> </ox-input-code>
|
|
75
75
|
`;
|
|
76
76
|
}
|
|
77
77
|
firstUpdated() {
|
|
@@ -1 +1 @@
|
|
|
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 } from 'lit/decorators.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 return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n />object\n <mwc-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</mwc-icon>\n </div>\n\n <ox-input-code .value=${this._getData(this.value)} editor> </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 udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\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 = String(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._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 _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
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 } from 'lit/decorators.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 return html`\n <div datatype>\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${typeof this.value == 'string'}\n @click=${() => this._setDataType('string')}\n />string\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${typeof this.value == 'number'}\n @click=${() => this._setDataType('number')}\n />number\n\n <input\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${typeof this.value == 'object'}\n @click=${() => this._setDataType('object')}\n />object\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> </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 udpated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.value = this._getData(this.value)\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 = String(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._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 _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|