@operato/input 1.5.53 → 1.7.2
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 -0
- package/dist/src/ox-input-code.js +20 -1
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/stories/ox-input-code.stories.d.ts +5 -0
- package/dist/stories/ox-input-code.stories.js +6 -3
- package/dist/stories/ox-input-code.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -2
- package/src/ox-input-code.ts +19 -2
- package/stories/ox-input-code.stories.ts +7 -3
- package/yarn-error.log +17084 -0
- package/dist/src/ox-input-graphql.d.ts +0 -29
- package/dist/src/ox-input-graphql.js +0 -108
- package/dist/src/ox-input-graphql.js.map +0 -1
- package/src/ox-input-graphql.ts +0 -99
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.2](https://github.com/hatiolab/operato/compare/v1.7.1...v1.7.2) (2023-12-11)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add language type in "input-code" ([c051074](https://github.com/hatiolab/operato/commit/c051074f538131eb23c3adc9570dbbd3d6dc4f27))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [1.5.53](https://github.com/hatiolab/operato/compare/v1.5.52...v1.5.53) (2023-12-07)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -10,6 +10,8 @@ import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
|
|
|
10
10
|
import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
|
|
11
11
|
import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
|
|
12
12
|
import { javascript } from '@codemirror/lang-javascript';
|
|
13
|
+
import { sql } from '@codemirror/lang-sql';
|
|
14
|
+
import { json } from '@codemirror/lang-json';
|
|
13
15
|
import { ScrollbarStyles } from '@operato/styles';
|
|
14
16
|
import { togglefullscreen } from '@operato/utils';
|
|
15
17
|
import { OxFormField } from './ox-form-field';
|
|
@@ -30,6 +32,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
30
32
|
this.value = '';
|
|
31
33
|
this.tabSize = 2;
|
|
32
34
|
this.tabAsSpace = true;
|
|
35
|
+
this.language = 'javascript';
|
|
33
36
|
this._self_changing = false;
|
|
34
37
|
}
|
|
35
38
|
static { this.styles = [
|
|
@@ -58,9 +61,23 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
58
61
|
}
|
|
59
62
|
get editor() {
|
|
60
63
|
if (!this._editor) {
|
|
64
|
+
let language;
|
|
65
|
+
switch (this.language) {
|
|
66
|
+
case 'sql':
|
|
67
|
+
language = sql();
|
|
68
|
+
break;
|
|
69
|
+
case 'json':
|
|
70
|
+
language = json();
|
|
71
|
+
break;
|
|
72
|
+
case 'javascript':
|
|
73
|
+
default:
|
|
74
|
+
language = javascript();
|
|
75
|
+
break;
|
|
76
|
+
}
|
|
61
77
|
this._editor = new EditorView({
|
|
62
78
|
doc: this.value,
|
|
63
79
|
extensions: [
|
|
80
|
+
language,
|
|
64
81
|
bracketMatching(),
|
|
65
82
|
closeBrackets(),
|
|
66
83
|
history(),
|
|
@@ -68,7 +85,6 @@ let OxInputCode = class OxInputCode extends OxFormField {
|
|
|
68
85
|
oneDark,
|
|
69
86
|
syntaxHighlighting(oneDarkHighlightStyle),
|
|
70
87
|
highlightActiveLine(),
|
|
71
|
-
javascript(),
|
|
72
88
|
keymap.of([
|
|
73
89
|
...historyKeymap,
|
|
74
90
|
indentWithTab,
|
|
@@ -109,6 +125,9 @@ __decorate([
|
|
|
109
125
|
__decorate([
|
|
110
126
|
property({ type: Boolean, attribute: 'tab-as-space' })
|
|
111
127
|
], OxInputCode.prototype, "tabAsSpace", void 0);
|
|
128
|
+
__decorate([
|
|
129
|
+
property({ type: String })
|
|
130
|
+
], OxInputCode.prototype, "language", void 0);
|
|
112
131
|
OxInputCode = __decorate([
|
|
113
132
|
customElement('ox-input-code')
|
|
114
133
|
], OxInputCode);
|
|
@@ -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;AAE1E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,
|
|
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 { EditorState } from '@codemirror/state'\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\">\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 default:\n language = javascript()\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"]}
|
|
@@ -10,6 +10,10 @@ declare const _default: {
|
|
|
10
10
|
name: {
|
|
11
11
|
control: string;
|
|
12
12
|
};
|
|
13
|
+
language: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
13
17
|
};
|
|
14
18
|
};
|
|
15
19
|
export default _default;
|
|
@@ -21,5 +25,6 @@ interface Story<T> {
|
|
|
21
25
|
interface ArgTypes {
|
|
22
26
|
name?: string;
|
|
23
27
|
value?: string;
|
|
28
|
+
language: 'javascript' | 'sql' | 'json';
|
|
24
29
|
}
|
|
25
30
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -5,10 +5,11 @@ export default {
|
|
|
5
5
|
component: 'ox-input-code',
|
|
6
6
|
argTypes: {
|
|
7
7
|
value: { control: 'text' },
|
|
8
|
-
name: { control: 'text' }
|
|
8
|
+
name: { control: 'text' },
|
|
9
|
+
language: { control: 'select', options: ['javascript', 'sql', 'json'] }
|
|
9
10
|
}
|
|
10
11
|
};
|
|
11
|
-
const Template = ({ name = 'code', value = '' }) => html `
|
|
12
|
+
const Template = ({ name = 'code', language = 'javascript', value = '' }) => html `
|
|
12
13
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
13
14
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
14
15
|
<style>
|
|
@@ -24,6 +25,7 @@ const Template = ({ name = 'code', value = '' }) => html `
|
|
|
24
25
|
console.log(e.target.value);
|
|
25
26
|
}}
|
|
26
27
|
name=${name}
|
|
28
|
+
language=${language}
|
|
27
29
|
.value=${value}
|
|
28
30
|
>
|
|
29
31
|
</ox-input-code>
|
|
@@ -31,6 +33,7 @@ const Template = ({ name = 'code', value = '' }) => html `
|
|
|
31
33
|
export const Regular = Template.bind({});
|
|
32
34
|
Regular.args = {
|
|
33
35
|
name: 'code',
|
|
34
|
-
value: ''
|
|
36
|
+
value: '',
|
|
37
|
+
language: 'javascript'
|
|
35
38
|
};
|
|
36
39
|
//# sourceMappingURL=ox-input-code.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-code.stories.js","sourceRoot":"","sources":["../../stories/ox-input-code.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;
|
|
1
|
+
{"version":3,"file":"ox-input-code.stories.js","sourceRoot":"","sources":["../../stories/ox-input-code.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;KACxE;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAY9F,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;eACA,QAAQ;aACV,KAAK;;;CAGjB,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;IACT,QAAQ,EAAE,YAAY;CACvB,CAAA","sourcesContent":["import '../src/ox-input-code.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-code',\n component: 'ox-input-code',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' },\n language: { control: 'select', options: ['javascript', 'sql', 'json'] }\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\n language: 'javascript' | 'sql' | 'json'\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '' }: 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-code {\n height: 300px;\n }\n </style>\n\n <ox-input-code\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n language=${language}\n .value=${value}\n >\n </ox-input-code>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'code',\n value: '',\n language: 'javascript'\n}\n"]}
|