@operato/input 1.5.52 → 1.7.2

package/dist/src/ox-input-graphql.d.ts

@@ -1,29 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { PropertyValues } from 'lit';
-import { EditorView } from '@codemirror/view';
-import { OxFormField } from './ox-form-field';
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-
-  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
-  </ox-input-code>
-*/
-export declare class OxInputCode extends OxFormField {
-    static styles: import("lit").CSSResult[];
-    /**
-     * `value`는 에디터에서 작성중인 contents이다.
-     */
-    value: string;
-    mode?: string;
-    tabSize: number;
-    tabAsSpace: boolean;
-    private _self_changing;
-    private _editor?;
-    private _changed;
-    updated(changes: PropertyValues<this>): void;
-    get editor(): EditorView;
-}

package/dist/src/ox-input-graphql.js

@@ -1,108 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
-import { javascript } from '@codemirror/lang-javascript';
-import { ScrollbarStyles } from '@operato/styles';
-import { togglefullscreen } from '@operato/utils';
-import { OxFormField } from './ox-form-field';
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-
-  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
-  </ox-input-code>
-*/
-let OxInputCode = class OxInputCode extends OxFormField {
-    constructor() {
-        super(...arguments);
-        /**
-         * `value`는 에디터에서 작성중인 contents이다.
-         */
-        this.value = '';
-        this.tabSize = 2;
-        this.tabAsSpace = true;
-        this._self_changing = false;
-        this._changed = false;
-    }
-    static { this.styles = [
-        ScrollbarStyles,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background: white;
-      }
-
-      .cm-editor {
-        flex: 1;
-      }
-    `
-    ]; }
-    updated(changes) {
-        if (changes.has('value') && this.editor && !this._self_changing) {
-            const to = this.editor.state.doc.toString().length;
-            this.editor.dispatch({
-                changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
-            });
-        }
-    }
-    get editor() {
-        if (!this._editor) {
-            this._editor = new EditorView({
-                doc: this.value,
-                extensions: [
-                    highlightActiveLine(),
-                    history(),
-                    javascript(),
-                    keymap.of([
-                        ...historyKeymap,
-                        indentWithTab,
-                        {
-                            key: 'Escape',
-                            run: (view) => {
-                                togglefullscreen(this);
-                                return true;
-                            }
-                        }
-                    ]),
-                    EditorView.updateListener.of(v => {
-                        if (v.docChanged) {
-                            this._self_changing = true;
-                            this.value = v.state.doc.toString();
-                            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
-                            requestAnimationFrame(() => {
-                                this._self_changing = false;
-                            });
-                        }
-                    })
-                ],
-                parent: this.renderRoot
-            });
-        }
-        return this._editor;
-    }
-};
-__decorate([
-    property({ type: String })
-], OxInputCode.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], OxInputCode.prototype, "mode", void 0);
-__decorate([
-    property({ type: Number, attribute: 'tab-size' })
-], OxInputCode.prototype, "tabSize", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'tab-as-space' })
-], OxInputCode.prototype, "tabAsSpace", void 0);
-OxInputCode = __decorate([
-    customElement('ox-input-code')
-], OxInputCode);
-export { OxInputCode };
-//# sourceMappingURL=ox-input-graphql.js.map

package/dist/src/ox-input-graphql.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../src/ox-input-graphql.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 { javascript } from '@codemirror/lang-javascript'\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      }\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\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      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          highlightActiveLine(),\n          history(),\n          javascript(),\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"]}

package/src/ox-input-graphql.ts

@@ -1,99 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
-import { javascript } from '@codemirror/lang-javascript'
-import { ScrollbarStyles } from '@operato/styles'
-import { togglefullscreen } from '@operato/utils'
-
-import { OxFormField } from './ox-form-field'
-
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-
-  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
-  </ox-input-code>
-*/
-@customElement('ox-input-code')
-export class OxInputCode extends OxFormField {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background: white;
-      }
-
-      .cm-editor {
-        flex: 1;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 에디터에서 작성중인 contents이다.
-   */
-  @property({ type: String }) value: string = ''
-  @property({ type: String }) mode?: string
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
-
-  private _self_changing: boolean = false
-  private _editor?: EditorView
-  private _changed: boolean = false
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value') && this.editor && !this._self_changing) {
-      const to = this.editor.state.doc.toString().length
-      this.editor.dispatch({
-        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
-      })
-    }
-  }
-
-  get editor() {
-    if (!this._editor) {
-      this._editor = new EditorView({
-        doc: this.value,
-        extensions: [
-          highlightActiveLine(),
-          history(),
-          javascript(),
-          keymap.of([
-            ...historyKeymap,
-            indentWithTab,
-            {
-              key: 'Escape',
-              run: (view: EditorView) => {
-                togglefullscreen(this)
-                return true
-              }
-            }
-          ]),
-          EditorView.updateListener.of(v => {
-            if (v.docChanged) {
-              this._self_changing = true
-              this.value = v.state.doc.toString()
-              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-              requestAnimationFrame(() => {
-                this._self_changing = false
-              })
-            }
-          })
-        ],
-        parent: this.renderRoot
-      })
-    }
-
-    return this._editor
-  }
-}