@operato/input 1.18.0 → 1.19.6

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 CHANGED
@@ -3,6 +3,23 @@
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.19.6](https://github.com/hatiolab/operato/compare/v1.19.5...v1.19.6) (2024-07-02)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * ox-input-code 에서 엔터키가 작동안되는 문제 ([4734337](https://github.com/hatiolab/operato/commit/473433759e1af435c0d96228b1ec3af9cc40b1cf))
12
+
13
+
14
+
15
+ ## [1.19.0](https://github.com/hatiolab/operato/compare/v1.18.0...v1.19.0) (2024-05-27)
16
+
17
+ **Note:** Version bump only for package @operato/input
18
+
19
+
20
+
21
+
22
+
6
23
  ## [1.18.0](https://github.com/hatiolab/operato/compare/v1.17.9...v1.18.0) (2024-05-24)
7
24
 
8
25
 
@@ -1,6 +1,6 @@
1
1
  export declare const getLocale: (() => string) & {
2
- _LIT_LOCALIZE_GET_LOCALE_?: undefined;
2
+ _LIT_LOCALIZE_GET_LOCALE_?: never;
3
3
  }, setLocale: ((newLocale: string) => Promise<void>) & {
4
- _LIT_LOCALIZE_SET_LOCALE_?: undefined;
4
+ _LIT_LOCALIZE_SET_LOCALE_?: never;
5
5
  };
6
6
  export declare const setLocaleFromUrl: () => Promise<void>;
@@ -18,8 +18,7 @@ export declare class OxInputCode extends OxFormField {
18
18
  * `value`는 에디터에서 작성중인 contents이다.
19
19
  */
20
20
  value: string;
21
- tabSize: number;
22
- tabAsSpace: boolean;
21
+ showLineNumbers: boolean;
23
22
  language?: string;
24
23
  private _self_changing;
25
24
  private _editor?;
@@ -4,6 +4,7 @@
4
4
  import { __decorate } from "tslib";
5
5
  import { css } from 'lit';
6
6
  import { customElement, property } from 'lit/decorators.js';
7
+ import { minimalSetup } from 'codemirror';
7
8
  import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
8
9
  import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
9
10
  import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
@@ -30,8 +31,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
30
31
  * `value`는 에디터에서 작성중인 contents이다.
31
32
  */
32
33
  this.value = '';
33
- this.tabSize = 2;
34
- this.tabAsSpace = true;
34
+ this.showLineNumbers = false;
35
35
  this.language = 'javascript';
36
36
  this._self_changing = false;
37
37
  this._changed = false;
@@ -45,6 +45,8 @@ let OxInputCode = class OxInputCode extends OxFormField {
45
45
  position: relative;
46
46
  background: white;
47
47
  overflow: auto;
48
+ border:1px solid var(--md-sys-color-outline, #111);
49
+ border-radius:var(--md-sys-shape-corner-small, 4px);
48
50
  }
49
51
 
50
52
  .cm-editor {
@@ -79,6 +81,7 @@ let OxInputCode = class OxInputCode extends OxFormField {
79
81
  this._editor = new EditorView({
80
82
  doc: this.value,
81
83
  extensions: [
84
+ minimalSetup,
82
85
  ...language,
83
86
  bracketMatching(),
84
87
  closeBrackets(),
@@ -113,12 +116,6 @@ let OxInputCode = class OxInputCode extends OxFormField {
113
116
  this.value = this._editor.state.doc.toString();
114
117
  this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
115
118
  });
116
- // this._editor.contentDOM.addEventListener('change', async e => {
117
- // this._self_changing = true
118
- // this._changed = true
119
- // await this.updateComplete
120
- // this._self_changing = false
121
- // })
122
119
  return this._editor;
123
120
  }
124
121
  };
@@ -126,11 +123,8 @@ __decorate([
126
123
  property({ type: String })
127
124
  ], OxInputCode.prototype, "value", void 0);
128
125
  __decorate([
129
- property({ type: Number, attribute: 'tab-size' })
130
- ], OxInputCode.prototype, "tabSize", void 0);
131
- __decorate([
132
- property({ type: Boolean, attribute: 'tab-as-space' })
133
- ], OxInputCode.prototype, "tabAsSpace", void 0);
126
+ property({ type: Boolean, attribute: 'show-line-numbers' })
127
+ ], OxInputCode.prototype, "showLineNumbers", void 0);
134
128
  __decorate([
135
129
  property({ type: String })
136
130
  ], OxInputCode.prototype, "language", void 0);
@@ -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;AAC1E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAmB,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAkBL;;WAEG;QACyB,UAAK,GAAW,EAAE,CAAA;QACK,YAAO,GAAW,CAAC,CAAA;QACd,eAAU,GAAY,IAAI,CAAA;QACtD,aAAQ,GAAY,YAAY,CAAA;QAEpD,mBAAc,GAAY,KAAK,CAAA;QAE/B,aAAQ,GAAY,KAAK,CAAA;IAmFnC,CAAC;aA9GQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;KAYF;KACF,AAfY,CAeZ;IAcD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAChE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAA;YAClD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACnB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;aACrF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,QAAQ,GAAsB,EAAE,CAAA;YACpC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACtB,KAAK,KAAK;oBACR,QAAQ,GAAG,CAAC,GAAG,EAAE,CAAC,CAAA;oBAClB,MAAK;gBACP,KAAK,MAAM;oBACT,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;oBACnB,MAAK;gBACP,KAAK,YAAY;oBACf,QAAQ,GAAG,CAAC,UAAU,EAAE,CAAC,CAAA;oBACzB,MAAK;gBACP;oBACE,MAAK;YACT,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;gBAC5B,GAAG,EAAE,IAAI,CAAC,KAAK;gBACf,UAAU,EAAE;oBACV,GAAG,QAAQ;oBACX,eAAe,EAAE;oBACjB,aAAa,EAAE;oBACf,OAAO,EAAE;oBACT,cAAc,EAAE;oBAChB,OAAO;oBACP,kBAAkB,CAAC,qBAAqB,CAAC;oBACzC,mBAAmB,EAAE;oBACrB,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,EAAE,aAAa,CAAC,CAAC;oBAC5C,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;wBACrC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;4BACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;4BAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;4BAEpB,MAAM,IAAI,CAAC,cAAc,CAAA;4BAEzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;wBAC7B,CAAC;oBACH,CAAC,CAAC;iBACH;gBACD,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE;YAC1D,KAAK,CAAC,eAAe,EAAE,CAAA;YAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,gBAAgB,CAAC,IAAI,CAAC,OAAQ,CAAC,UAAU,CAAC,CAAA;YAC5C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAM;YACR,CAAC;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAC/C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtG,CAAC,CAAC,CAAA;QAEF,kEAAkE;QAClE,+BAA+B;QAC/B,yBAAyB;QAEzB,8BAA8B;QAE9B,gCAAgC;QAChC,KAAK;QAEL,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;;AAzF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AACK;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAoB;AACd;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;+CAA2B;AACtD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiC;AAxBjD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA+GvB","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} 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: Number, attribute: 'tab-size' }) tabSize: number = 2\n @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n @property({ type: String }) language?: string = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\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([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n // this._editor.contentDOM.addEventListener('change', async e => {\n // this._self_changing = true\n // this._changed = true\n\n // await this.updateComplete\n\n // this._self_changing = false\n // })\n\n return this._editor\n }\n}\n"]}
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 { minimalSetup } from 'codemirror'\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} 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 border:1px solid var(--md-sys-color-outline, #111);\n border-radius:var(--md-sys-shape-corner-small, 4px);\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: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n @property({ type: String }) language?: string = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\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 minimalSetup,\n ...language,\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n highlightActiveLine(),\n keymap.of([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n return this._editor\n }\n}\n"]}