@operato/app 0.4.2 → 0.4.5
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 +25 -0
- package/dist/src/filter-renderer/filter-resource-select.d.ts +4 -0
- package/dist/src/filter-renderer/filter-resource-select.js +79 -0
- package/dist/src/filter-renderer/filter-resource-select.js.map +1 -0
- package/dist/src/filter-renderer/index.d.ts +1 -0
- package/dist/src/filter-renderer/index.js +5 -0
- package/dist/src/filter-renderer/index.js.map +1 -0
- package/dist/src/grist-editor/index.d.ts +1 -0
- package/dist/src/grist-editor/index.js +28 -0
- package/dist/src/grist-editor/index.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-code.d.ts +7 -0
- package/dist/src/grist-editor/ox-grist-editor-code.js +53 -0
- package/dist/src/grist-editor/ox-grist-editor-code.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-crontab.d.ts +8 -0
- package/dist/src/grist-editor/ox-grist-editor-crontab.js +50 -0
- package/dist/src/grist-editor/ox-grist-editor-crontab.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-json.d.ts +7 -0
- package/dist/src/grist-editor/ox-grist-editor-json.js +54 -0
- package/dist/src/grist-editor/ox-grist-editor-json.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-parameters.d.ts +12 -0
- package/dist/src/grist-editor/ox-grist-editor-parameters.js +84 -0
- package/dist/src/grist-editor/ox-grist-editor-parameters.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-partition-keys.d.ts +11 -0
- package/dist/src/grist-editor/ox-grist-editor-partition-keys.js +74 -0
- package/dist/src/grist-editor/ox-grist-editor-partition-keys.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-code.d.ts +6 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-code.js +55 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-code.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-id.d.ts +9 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-id.js +72 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-id.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-object.d.ts +11 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-object.js +104 -0
- package/dist/src/grist-editor/ox-grist-editor-resource-object.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-editor-value-map.d.ts +11 -0
- package/dist/src/grist-editor/ox-grist-editor-value-map.js +74 -0
- package/dist/src/grist-editor/ox-grist-editor-value-map.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-renderer-crontab.d.ts +2 -0
- package/dist/src/grist-editor/ox-grist-renderer-crontab.js +26 -0
- package/dist/src/grist-editor/ox-grist-renderer-crontab.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-id.d.ts +2 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-id.js +9 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-id.js.map +1 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-object.d.ts +2 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-object.js +22 -0
- package/dist/src/grist-editor/ox-grist-renderer-resource-object.js.map +1 -0
- package/dist/src/grist-editor/ox-parameters-builder.d.ts +4 -0
- package/dist/src/grist-editor/ox-parameters-builder.js +118 -0
- package/dist/src/grist-editor/ox-parameters-builder.js.map +1 -0
- package/dist/src/grist-editor/ox-popup-code-input.d.ts +12 -0
- package/dist/src/grist-editor/ox-popup-code-input.js +71 -0
- package/dist/src/grist-editor/ox-popup-code-input.js.map +1 -0
- package/dist/src/grist-editor/ox-popup-crontab-input.d.ts +11 -0
- package/dist/src/grist-editor/ox-popup-crontab-input.js +74 -0
- package/dist/src/grist-editor/ox-popup-crontab-input.js.map +1 -0
- package/dist/src/grist-editor/ox-popup-parameters-builder.d.ts +13 -0
- package/dist/src/grist-editor/ox-popup-parameters-builder.js +111 -0
- package/dist/src/grist-editor/ox-popup-parameters-builder.js.map +1 -0
- package/dist/src/grist-editor/ox-popup-partition-keys-input.d.ts +12 -0
- package/dist/src/grist-editor/ox-popup-partition-keys-input.js +98 -0
- package/dist/src/grist-editor/ox-popup-partition-keys-input.js.map +1 -0
- package/dist/src/grist-editor/ox-popup-value-map-input.d.ts +12 -0
- package/dist/src/grist-editor/ox-popup-value-map-input.js +104 -0
- package/dist/src/grist-editor/ox-popup-value-map-input.js.map +1 -0
- package/dist/src/grist-editor/ox-selector-resource-id.d.ts +24 -0
- package/dist/src/grist-editor/ox-selector-resource-id.js +202 -0
- package/dist/src/grist-editor/ox-selector-resource-id.js.map +1 -0
- package/dist/src/grist-editor/ox-selector-resource-object.d.ts +39 -0
- package/dist/src/grist-editor/ox-selector-resource-object.js +343 -0
- package/dist/src/grist-editor/ox-selector-resource-object.js.map +1 -0
- package/dist/src/input/index.d.ts +3 -0
- package/dist/src/input/index.js +4 -0
- package/dist/src/input/index.js.map +1 -0
- package/dist/src/input/ox-input-background-pattern.d.ts +31 -0
- package/dist/src/input/ox-input-background-pattern.js +150 -0
- package/dist/src/input/ox-input-background-pattern.js.map +1 -0
- package/dist/src/input/ox-input-fill-style.d.ts +41 -0
- package/dist/src/input/ox-input-fill-style.js +325 -0
- package/dist/src/input/ox-input-fill-style.js.map +1 -0
- package/dist/src/input/ox-input-graphql.d.ts +36 -0
- package/dist/src/input/ox-input-graphql.js +161 -0
- package/dist/src/input/ox-input-graphql.js.map +1 -0
- package/dist/src/input/ox-input-resource.d.ts +36 -0
- package/dist/src/input/ox-input-resource.js +161 -0
- package/dist/src/input/ox-input-resource.js.map +1 -0
- package/dist/src/property-editor/index.d.ts +24 -0
- package/dist/src/property-editor/index.js +58 -0
- package/dist/src/property-editor/index.js.map +1 -0
- package/dist/src/property-editor/ox-property-editor-graphql.d.ts +5 -0
- package/dist/src/property-editor/ox-property-editor-graphql.js +15 -0
- package/dist/src/property-editor/ox-property-editor-graphql.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -8
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import 'codemirror/addon/display/fullscreen';
|
|
6
|
+
import 'codemirror/addon/display/autorefresh';
|
|
7
|
+
import 'codemirror/addon/hint/show-hint';
|
|
8
|
+
import 'codemirror/addon/lint/lint';
|
|
9
|
+
import 'codemirror-graphql/hint';
|
|
10
|
+
import 'codemirror-graphql/lint';
|
|
11
|
+
import 'codemirror-graphql/mode';
|
|
12
|
+
import { GRAPHQL_URI } from '@operato/graphql';
|
|
13
|
+
import { LitElement, css, html, unsafeCSS } from 'lit';
|
|
14
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
15
|
+
import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
|
|
16
|
+
import CodeMirror from 'codemirror';
|
|
17
|
+
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
18
|
+
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
19
|
+
import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
|
|
20
|
+
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
21
|
+
import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
|
|
22
|
+
import { fetch } from 'cross-fetch';
|
|
23
|
+
import { print } from 'graphql';
|
|
24
|
+
/**
|
|
25
|
+
WEB Component for code-mirror graphql editor.
|
|
26
|
+
|
|
27
|
+
Example:
|
|
28
|
+
|
|
29
|
+
<ox-input-graphql value=${text} link=${link}>
|
|
30
|
+
</ox-input-graphql>
|
|
31
|
+
*/
|
|
32
|
+
let OxInputGraphql = class OxInputGraphql extends LitElement {
|
|
33
|
+
constructor() {
|
|
34
|
+
super(...arguments);
|
|
35
|
+
this._self_changing = false;
|
|
36
|
+
this._changed = false;
|
|
37
|
+
}
|
|
38
|
+
async updated(changes) {
|
|
39
|
+
if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
|
|
40
|
+
if (changes.has('link')) {
|
|
41
|
+
this._editor = undefined;
|
|
42
|
+
}
|
|
43
|
+
;
|
|
44
|
+
(await this.getEditor()).setValue(this.value === undefined ? '' : String(this.value));
|
|
45
|
+
// ;(await this.getEditor()).refresh()
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
return html ` <textarea></textarea> `;
|
|
50
|
+
}
|
|
51
|
+
async getSchema() {
|
|
52
|
+
const executor = async ({ document, variables }) => {
|
|
53
|
+
const query = print(document);
|
|
54
|
+
const uri = this.link || GRAPHQL_URI;
|
|
55
|
+
const fetchResult = await fetch(uri, {
|
|
56
|
+
method: 'POST',
|
|
57
|
+
headers: {
|
|
58
|
+
'Content-Type': 'application/json'
|
|
59
|
+
},
|
|
60
|
+
body: JSON.stringify({ query, variables })
|
|
61
|
+
});
|
|
62
|
+
return fetchResult.json();
|
|
63
|
+
};
|
|
64
|
+
return await wrapSchema({
|
|
65
|
+
schema: await introspectSchema(executor),
|
|
66
|
+
executor
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
async getEditor() {
|
|
70
|
+
if (!this._editor) {
|
|
71
|
+
try {
|
|
72
|
+
var schema = await this.getSchema();
|
|
73
|
+
}
|
|
74
|
+
catch (err) {
|
|
75
|
+
console.error(err);
|
|
76
|
+
}
|
|
77
|
+
if (this.textarea) {
|
|
78
|
+
this._editor = CodeMirror.fromTextArea(this.textarea, {
|
|
79
|
+
value: this.value,
|
|
80
|
+
mode: 'graphql',
|
|
81
|
+
lint: {
|
|
82
|
+
//@ts-ignore
|
|
83
|
+
schema
|
|
84
|
+
},
|
|
85
|
+
hintOptions: {
|
|
86
|
+
//@ts-ignore
|
|
87
|
+
schema
|
|
88
|
+
},
|
|
89
|
+
tabSize: 2,
|
|
90
|
+
lineNumbers: false,
|
|
91
|
+
showCursorWhenSelecting: true,
|
|
92
|
+
theme: 'night',
|
|
93
|
+
extraKeys: {
|
|
94
|
+
F11: function (cm) {
|
|
95
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
|
96
|
+
},
|
|
97
|
+
Esc: function (cm) {
|
|
98
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
autoRefresh: {
|
|
102
|
+
delay: 500
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
this._editor.on('blur', (editor, e) => {
|
|
106
|
+
if (!this._changed)
|
|
107
|
+
return;
|
|
108
|
+
this.value = editor.getValue();
|
|
109
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
110
|
+
});
|
|
111
|
+
this._editor.on('change', async (editor, changeObj) => {
|
|
112
|
+
this._self_changing = true;
|
|
113
|
+
this._changed = true;
|
|
114
|
+
await this.requestUpdate();
|
|
115
|
+
this._self_changing = false;
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return this._editor;
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
OxInputGraphql.styles = [
|
|
123
|
+
css `
|
|
124
|
+
${unsafeCSS(CodeMirrorStyle)}
|
|
125
|
+
${unsafeCSS(FullScreenStyle)}
|
|
126
|
+
${unsafeCSS(NightThemeStyle)}
|
|
127
|
+
${unsafeCSS(LintStyle)}
|
|
128
|
+
${unsafeCSS(ShowHintStyle)}
|
|
129
|
+
`,
|
|
130
|
+
css `
|
|
131
|
+
:host {
|
|
132
|
+
display: block;
|
|
133
|
+
position: relative;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
textarea {
|
|
137
|
+
display: block;
|
|
138
|
+
height: 100%;
|
|
139
|
+
width: 100%;
|
|
140
|
+
resize: none;
|
|
141
|
+
font-size: 16px;
|
|
142
|
+
line-height: 20px;
|
|
143
|
+
border: 0px;
|
|
144
|
+
padding: 0px;
|
|
145
|
+
}
|
|
146
|
+
`
|
|
147
|
+
];
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ type: String })
|
|
150
|
+
], OxInputGraphql.prototype, "value", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ type: String })
|
|
153
|
+
], OxInputGraphql.prototype, "link", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
query('textarea')
|
|
156
|
+
], OxInputGraphql.prototype, "textarea", void 0);
|
|
157
|
+
OxInputGraphql = __decorate([
|
|
158
|
+
customElement('ox-input-graphql')
|
|
159
|
+
], OxInputGraphql);
|
|
160
|
+
export default OxInputGraphql;
|
|
161
|
+
//# sourceMappingURL=ox-input-graphql.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\nimport 'codemirror/addon/hint/show-hint'\nimport 'codemirror/addon/lint/lint'\nimport 'codemirror-graphql/hint'\nimport 'codemirror-graphql/lint'\nimport 'codemirror-graphql/mode'\n\nimport { GRAPHQL_URI, client } from '@operato/graphql'\nimport { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n <ox-input-graphql value=${text} link=${link}>\n </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends LitElement {\n static styles = [\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n ${unsafeCSS(LintStyle)}\n ${unsafeCSS(ShowHintStyle)}\n `,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value?: string\n @property({ type: String }) link?: string\n\n @query('textarea') textarea!: HTMLTextAreaElement\n\n private _self_changing: boolean = false\n private _changed: boolean = false\n private _editor?: CodeMirror.EditorFromTextArea\n\n async updated(changes: PropertyValues<this>) {\n if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {\n if (changes.has('link')) {\n this._editor = undefined\n }\n ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))\n // ;(await this.getEditor()).refresh()\n }\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n async getSchema() {\n const executor = async ({ document, variables }: any) => {\n const query = print(document)\n const uri = this.link || GRAPHQL_URI\n\n const fetchResult = await fetch(uri, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ query, variables })\n })\n return fetchResult.json()\n }\n\n return await wrapSchema({\n schema: await introspectSchema(executor),\n executor\n })\n }\n\n async getEditor() {\n if (!this._editor) {\n try {\n var schema = await this.getSchema()\n } catch (err) {\n console.error(err)\n }\n\n if (this.textarea) {\n this._editor = CodeMirror.fromTextArea(this.textarea, {\n value: this.value,\n mode: 'graphql',\n lint: {\n //@ts-ignore\n schema\n },\n hintOptions: {\n //@ts-ignore\n schema\n },\n tabSize: 2,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n }\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n if (!this._changed) return\n\n this.value = editor.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n })\n\n this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n this._self_changing = true\n\n this._changed = true\n\n await this.requestUpdate()\n\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import 'codemirror/addon/display/fullscreen';
|
|
5
|
+
import 'codemirror/addon/display/autorefresh';
|
|
6
|
+
import 'codemirror/addon/hint/show-hint';
|
|
7
|
+
import 'codemirror/addon/lint/lint';
|
|
8
|
+
import 'codemirror-graphql/hint';
|
|
9
|
+
import 'codemirror-graphql/lint';
|
|
10
|
+
import 'codemirror-graphql/mode';
|
|
11
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
12
|
+
import CodeMirror from 'codemirror';
|
|
13
|
+
/**
|
|
14
|
+
WEB Component for code-mirror graphql editor.
|
|
15
|
+
|
|
16
|
+
Example:
|
|
17
|
+
|
|
18
|
+
<ox-input-graphql value=${text} link=${link}>
|
|
19
|
+
</ox-input-graphql>
|
|
20
|
+
*/
|
|
21
|
+
export default class OxInputGraphql extends LitElement {
|
|
22
|
+
static styles: import("lit").CSSResult[];
|
|
23
|
+
/**
|
|
24
|
+
* `value`는 에디터에서 작성중인 contents이다.
|
|
25
|
+
*/
|
|
26
|
+
value?: string;
|
|
27
|
+
link?: string;
|
|
28
|
+
textarea: HTMLTextAreaElement;
|
|
29
|
+
private _self_changing;
|
|
30
|
+
private _changed;
|
|
31
|
+
private _editor?;
|
|
32
|
+
updated(changes: PropertyValues<this>): Promise<void>;
|
|
33
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
34
|
+
getSchema(): Promise<import("graphql").GraphQLSchema>;
|
|
35
|
+
getEditor(): Promise<CodeMirror.EditorFromTextArea | undefined>;
|
|
36
|
+
}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import 'codemirror/addon/display/fullscreen';
|
|
6
|
+
import 'codemirror/addon/display/autorefresh';
|
|
7
|
+
import 'codemirror/addon/hint/show-hint';
|
|
8
|
+
import 'codemirror/addon/lint/lint';
|
|
9
|
+
import 'codemirror-graphql/hint';
|
|
10
|
+
import 'codemirror-graphql/lint';
|
|
11
|
+
import 'codemirror-graphql/mode';
|
|
12
|
+
import { GRAPHQL_URI } from '@operato/graphql';
|
|
13
|
+
import { LitElement, css, html, unsafeCSS } from 'lit';
|
|
14
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
15
|
+
import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
|
|
16
|
+
import CodeMirror from 'codemirror';
|
|
17
|
+
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
18
|
+
import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
19
|
+
import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
|
|
20
|
+
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
21
|
+
import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
|
|
22
|
+
import { fetch } from 'cross-fetch';
|
|
23
|
+
import { print } from 'graphql';
|
|
24
|
+
/**
|
|
25
|
+
WEB Component for code-mirror graphql editor.
|
|
26
|
+
|
|
27
|
+
Example:
|
|
28
|
+
|
|
29
|
+
<ox-input-graphql value=${text} link=${link}>
|
|
30
|
+
</ox-input-graphql>
|
|
31
|
+
*/
|
|
32
|
+
let OxInputGraphql = class OxInputGraphql extends LitElement {
|
|
33
|
+
constructor() {
|
|
34
|
+
super(...arguments);
|
|
35
|
+
this._self_changing = false;
|
|
36
|
+
this._changed = false;
|
|
37
|
+
}
|
|
38
|
+
async updated(changes) {
|
|
39
|
+
if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
|
|
40
|
+
if (changes.has('link')) {
|
|
41
|
+
this._editor = undefined;
|
|
42
|
+
}
|
|
43
|
+
;
|
|
44
|
+
(await this.getEditor()).setValue(this.value === undefined ? '' : String(this.value));
|
|
45
|
+
// ;(await this.getEditor()).refresh()
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
return html ` <textarea></textarea> `;
|
|
50
|
+
}
|
|
51
|
+
async getSchema() {
|
|
52
|
+
const executor = async ({ document, variables }) => {
|
|
53
|
+
const query = print(document);
|
|
54
|
+
const uri = this.link || GRAPHQL_URI;
|
|
55
|
+
const fetchResult = await fetch(uri, {
|
|
56
|
+
method: 'POST',
|
|
57
|
+
headers: {
|
|
58
|
+
'Content-Type': 'application/json'
|
|
59
|
+
},
|
|
60
|
+
body: JSON.stringify({ query, variables })
|
|
61
|
+
});
|
|
62
|
+
return fetchResult.json();
|
|
63
|
+
};
|
|
64
|
+
return await wrapSchema({
|
|
65
|
+
schema: await introspectSchema(executor),
|
|
66
|
+
executor
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
async getEditor() {
|
|
70
|
+
if (!this._editor) {
|
|
71
|
+
try {
|
|
72
|
+
var schema = await this.getSchema();
|
|
73
|
+
}
|
|
74
|
+
catch (err) {
|
|
75
|
+
console.error(err);
|
|
76
|
+
}
|
|
77
|
+
if (this.textarea) {
|
|
78
|
+
this._editor = CodeMirror.fromTextArea(this.textarea, {
|
|
79
|
+
value: this.value,
|
|
80
|
+
mode: 'graphql',
|
|
81
|
+
lint: {
|
|
82
|
+
//@ts-ignore
|
|
83
|
+
schema
|
|
84
|
+
},
|
|
85
|
+
hintOptions: {
|
|
86
|
+
//@ts-ignore
|
|
87
|
+
schema
|
|
88
|
+
},
|
|
89
|
+
tabSize: 2,
|
|
90
|
+
lineNumbers: false,
|
|
91
|
+
showCursorWhenSelecting: true,
|
|
92
|
+
theme: 'night',
|
|
93
|
+
extraKeys: {
|
|
94
|
+
F11: function (cm) {
|
|
95
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
|
96
|
+
},
|
|
97
|
+
Esc: function (cm) {
|
|
98
|
+
cm.setOption('fullScreen', !cm.getOption('fullScreen'));
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
autoRefresh: {
|
|
102
|
+
delay: 500
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
this._editor.on('blur', (editor, e) => {
|
|
106
|
+
if (!this._changed)
|
|
107
|
+
return;
|
|
108
|
+
this.value = editor.getValue();
|
|
109
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
110
|
+
});
|
|
111
|
+
this._editor.on('change', async (editor, changeObj) => {
|
|
112
|
+
this._self_changing = true;
|
|
113
|
+
this._changed = true;
|
|
114
|
+
await this.requestUpdate();
|
|
115
|
+
this._self_changing = false;
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return this._editor;
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
OxInputGraphql.styles = [
|
|
123
|
+
css `
|
|
124
|
+
${unsafeCSS(CodeMirrorStyle)}
|
|
125
|
+
${unsafeCSS(FullScreenStyle)}
|
|
126
|
+
${unsafeCSS(NightThemeStyle)}
|
|
127
|
+
${unsafeCSS(LintStyle)}
|
|
128
|
+
${unsafeCSS(ShowHintStyle)}
|
|
129
|
+
`,
|
|
130
|
+
css `
|
|
131
|
+
:host {
|
|
132
|
+
display: block;
|
|
133
|
+
position: relative;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
textarea {
|
|
137
|
+
display: block;
|
|
138
|
+
height: 100%;
|
|
139
|
+
width: 100%;
|
|
140
|
+
resize: none;
|
|
141
|
+
font-size: 16px;
|
|
142
|
+
line-height: 20px;
|
|
143
|
+
border: 0px;
|
|
144
|
+
padding: 0px;
|
|
145
|
+
}
|
|
146
|
+
`
|
|
147
|
+
];
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ type: String })
|
|
150
|
+
], OxInputGraphql.prototype, "value", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ type: String })
|
|
153
|
+
], OxInputGraphql.prototype, "link", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
query('textarea')
|
|
156
|
+
], OxInputGraphql.prototype, "textarea", void 0);
|
|
157
|
+
OxInputGraphql = __decorate([
|
|
158
|
+
customElement('ox-input-graphql')
|
|
159
|
+
], OxInputGraphql);
|
|
160
|
+
export default OxInputGraphql;
|
|
161
|
+
//# sourceMappingURL=ox-input-resource.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-resource.js","sourceRoot":"","sources":["../../../src/input/ox-input-resource.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\nimport 'codemirror/addon/hint/show-hint'\nimport 'codemirror/addon/lint/lint'\nimport 'codemirror-graphql/hint'\nimport 'codemirror-graphql/lint'\nimport 'codemirror-graphql/mode'\n\nimport { GRAPHQL_URI, client } from '@operato/graphql'\nimport { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n <ox-input-graphql value=${text} link=${link}>\n </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends LitElement {\n static styles = [\n css`\n ${unsafeCSS(CodeMirrorStyle)}\n ${unsafeCSS(FullScreenStyle)}\n ${unsafeCSS(NightThemeStyle)}\n ${unsafeCSS(LintStyle)}\n ${unsafeCSS(ShowHintStyle)}\n `,\n css`\n :host {\n display: block;\n position: relative;\n }\n\n textarea {\n display: block;\n height: 100%;\n width: 100%;\n resize: none;\n font-size: 16px;\n line-height: 20px;\n border: 0px;\n padding: 0px;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value?: string\n @property({ type: String }) link?: string\n\n @query('textarea') textarea!: HTMLTextAreaElement\n\n private _self_changing: boolean = false\n private _changed: boolean = false\n private _editor?: CodeMirror.EditorFromTextArea\n\n async updated(changes: PropertyValues<this>) {\n if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {\n if (changes.has('link')) {\n this._editor = undefined\n }\n ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))\n // ;(await this.getEditor()).refresh()\n }\n }\n\n render() {\n return html` <textarea></textarea> `\n }\n\n async getSchema() {\n const executor = async ({ document, variables }: any) => {\n const query = print(document)\n const uri = this.link || GRAPHQL_URI\n\n const fetchResult = await fetch(uri, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ query, variables })\n })\n return fetchResult.json()\n }\n\n return await wrapSchema({\n schema: await introspectSchema(executor),\n executor\n })\n }\n\n async getEditor() {\n if (!this._editor) {\n try {\n var schema = await this.getSchema()\n } catch (err) {\n console.error(err)\n }\n\n if (this.textarea) {\n this._editor = CodeMirror.fromTextArea(this.textarea, {\n value: this.value,\n mode: 'graphql',\n lint: {\n //@ts-ignore\n schema\n },\n hintOptions: {\n //@ts-ignore\n schema\n },\n tabSize: 2,\n lineNumbers: false,\n showCursorWhenSelecting: true,\n theme: 'night',\n extraKeys: {\n F11: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n },\n Esc: function (cm) {\n cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n }\n },\n autoRefresh: {\n delay: 500\n }\n })\n\n this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n if (!this._changed) return\n\n this.value = editor.getValue()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n })\n\n this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n this._self_changing = true\n\n this._changed = true\n\n await this.requestUpdate()\n\n this._self_changing = false\n })\n }\n }\n\n return this._editor\n }\n}\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import '@operato/property-editor/ox-property-editor-legend.js';
|
|
2
|
+
import '@operato/property-editor/ox-property-editor-number.js';
|
|
3
|
+
import '@operato/property-editor/ox-property-editor-password.js';
|
|
4
|
+
import '@operato/property-editor/ox-property-editor-angle.js';
|
|
5
|
+
import '@operato/property-editor/ox-property-editor-string.js';
|
|
6
|
+
import '@operato/property-editor/ox-property-editor-data.js';
|
|
7
|
+
import '@operato/property-editor/ox-property-editor-date.js';
|
|
8
|
+
import '@operato/property-editor/ox-property-editor-checkbox.js';
|
|
9
|
+
import '@operato/property-editor/ox-property-editor-options.js';
|
|
10
|
+
import '@operato/property-editor/ox-property-editor-select.js';
|
|
11
|
+
import '@operato/property-editor/ox-property-editor-scene-component-id.js';
|
|
12
|
+
import '@operato/property-editor/ox-property-editor-color.js';
|
|
13
|
+
import '@operato/property-editor/ox-property-editor-multiple-colors.js';
|
|
14
|
+
import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
|
|
15
|
+
import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
|
|
16
|
+
import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
|
|
17
|
+
import '@operato/property-editor/ox-property-editor-textarea.js';
|
|
18
|
+
import '@operato/property-editor/ox-property-editor-table.js';
|
|
19
|
+
import '@operato/property-editor/ox-property-editor-value-map.js';
|
|
20
|
+
import '@operato/property-editor/ox-property-editor-value-ranges.js';
|
|
21
|
+
import '@operato/attachment/ox-property-editor-attachment-selector.js';
|
|
22
|
+
import '@operato/attachment/ox-property-editor-image-selector.js';
|
|
23
|
+
import '@operato/font/ox-property-editor-font-selector.js';
|
|
24
|
+
import './ox-property-editor-graphql.js';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import '@operato/property-editor/ox-property-editor-legend.js';
|
|
2
|
+
import '@operato/property-editor/ox-property-editor-number.js';
|
|
3
|
+
import '@operato/property-editor/ox-property-editor-password.js';
|
|
4
|
+
import '@operato/property-editor/ox-property-editor-angle.js';
|
|
5
|
+
import '@operato/property-editor/ox-property-editor-string.js';
|
|
6
|
+
import '@operato/property-editor/ox-property-editor-data.js';
|
|
7
|
+
import '@operato/property-editor/ox-property-editor-date.js';
|
|
8
|
+
import '@operato/property-editor/ox-property-editor-checkbox.js';
|
|
9
|
+
import '@operato/property-editor/ox-property-editor-options.js';
|
|
10
|
+
import '@operato/property-editor/ox-property-editor-select.js';
|
|
11
|
+
import '@operato/property-editor/ox-property-editor-scene-component-id.js';
|
|
12
|
+
import '@operato/property-editor/ox-property-editor-color.js';
|
|
13
|
+
import '@operato/property-editor/ox-property-editor-multiple-colors.js';
|
|
14
|
+
import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
|
|
15
|
+
import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
|
|
16
|
+
import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
|
|
17
|
+
import '@operato/property-editor/ox-property-editor-textarea.js';
|
|
18
|
+
import '@operato/property-editor/ox-property-editor-table.js';
|
|
19
|
+
import '@operato/property-editor/ox-property-editor-value-map.js';
|
|
20
|
+
import '@operato/property-editor/ox-property-editor-value-ranges.js';
|
|
21
|
+
import '@operato/attachment/ox-property-editor-attachment-selector.js';
|
|
22
|
+
import '@operato/attachment/ox-property-editor-image-selector.js';
|
|
23
|
+
import '@operato/font/ox-property-editor-font-selector.js';
|
|
24
|
+
import './ox-property-editor-graphql.js';
|
|
25
|
+
import { OxPropertyEditor } from '@operato/property-editor';
|
|
26
|
+
OxPropertyEditor.register({
|
|
27
|
+
legend: 'ox-property-editor-legend',
|
|
28
|
+
number: 'ox-property-editor-number',
|
|
29
|
+
slider: 'ox-property-editor-range',
|
|
30
|
+
password: 'ox-property-editor-password',
|
|
31
|
+
angle: 'ox-property-editor-angle',
|
|
32
|
+
string: 'ox-property-editor-string',
|
|
33
|
+
textarea: 'ox-property-editor-textarea',
|
|
34
|
+
javascript: 'ox-property-editor-textarea',
|
|
35
|
+
checkbox: 'ox-property-editor-checkbox',
|
|
36
|
+
boolean: 'ox-property-editor-checkbox',
|
|
37
|
+
select: 'ox-property-editor-select',
|
|
38
|
+
date: 'ox-property-editor-date',
|
|
39
|
+
options: 'ox-property-editor-options',
|
|
40
|
+
data: 'ox-property-editor-data',
|
|
41
|
+
file: 'ox-property-editor-file',
|
|
42
|
+
image: 'ox-property-editor-image',
|
|
43
|
+
'range-input': 'ox-property-editor-range',
|
|
44
|
+
'attachment-selector': 'ox-property-editor-attachment-selector',
|
|
45
|
+
'gltf-selector': 'ox-property-editor-attachment-selector',
|
|
46
|
+
'image-selector': 'ox-property-editor-image-selector',
|
|
47
|
+
color: 'ox-property-editor-color',
|
|
48
|
+
'solid-color-stops': 'ox-property-editor-solid-colorstops',
|
|
49
|
+
'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
|
|
50
|
+
'multiple-color': 'ox-property-editor-multiple-colors',
|
|
51
|
+
map: 'ox-property-editor-value-map',
|
|
52
|
+
range: 'ox-property-editor-value-ranges',
|
|
53
|
+
graphql: 'ox-property-editor-graphql',
|
|
54
|
+
'editor-table': 'ox-property-editor-table',
|
|
55
|
+
'id-input': 'ox-property-editor-scene-component-id',
|
|
56
|
+
'font-selector': 'ox-property-editor-font-selector'
|
|
57
|
+
});
|
|
58
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/property-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,uDAAuD,CAAA;AAC9D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,yDAAyD,CAAA;AAChE,OAAO,sDAAsD,CAAA;AAC7D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,qDAAqD,CAAA;AAC5D,OAAO,yDAAyD,CAAA;AAChE,OAAO,wDAAwD,CAAA;AAC/D,OAAO,uDAAuD,CAAA;AAC9D,OAAO,mEAAmE,CAAA;AAC1E,OAAO,sDAAsD,CAAA;AAC7D,OAAO,gEAAgE,CAAA;AACvE,OAAO,iEAAiE,CAAA;AACxE,OAAO,oEAAoE,CAAA;AAC3E,OAAO,oEAAoE,CAAA;AAC3E,OAAO,yDAAyD,CAAA;AAChE,OAAO,sDAAsD,CAAA;AAC7D,OAAO,0DAA0D,CAAA;AACjE,OAAO,6DAA6D,CAAA;AACpE,OAAO,+DAA+D,CAAA;AACtE,OAAO,0DAA0D,CAAA;AACjE,OAAO,mDAAmD,CAAA;AAC1D,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,gBAAgB,CAAC,QAAQ,CAAC;IACxB,MAAM,EAAE,2BAA2B;IACnC,MAAM,EAAE,2BAA2B;IACnC,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,6BAA6B;IACvC,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,6BAA6B;IACvC,UAAU,EAAE,6BAA6B;IACzC,QAAQ,EAAE,6BAA6B;IACvC,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,2BAA2B;IACnC,IAAI,EAAE,yBAAyB;IAC/B,OAAO,EAAE,4BAA4B;IACrC,IAAI,EAAE,yBAAyB;IAC/B,IAAI,EAAE,yBAAyB;IAC/B,KAAK,EAAE,0BAA0B;IACjC,aAAa,EAAE,0BAA0B;IACzC,qBAAqB,EAAE,wCAAwC;IAC/D,eAAe,EAAE,wCAAwC;IACzD,gBAAgB,EAAE,mCAAmC;IACrD,KAAK,EAAE,0BAA0B;IACjC,mBAAmB,EAAE,qCAAqC;IAC1D,sBAAsB,EAAE,wCAAwC;IAChE,gBAAgB,EAAE,oCAAoC;IACtD,GAAG,EAAE,8BAA8B;IACnC,KAAK,EAAE,iCAAiC;IACxC,OAAO,EAAE,4BAA4B;IACrC,cAAc,EAAE,0BAA0B;IAC1C,UAAU,EAAE,uCAAuC;IACnD,eAAe,EAAE,kCAAkC;CACpD,CAAC,CAAA","sourcesContent":["import '@operato/property-editor/ox-property-editor-legend.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-password.js'\nimport '@operato/property-editor/ox-property-editor-angle.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-property-editor-data.js'\nimport '@operato/property-editor/ox-property-editor-date.js'\nimport '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-options.js'\nimport '@operato/property-editor/ox-property-editor-select.js'\nimport '@operato/property-editor/ox-property-editor-scene-component-id.js'\nimport '@operato/property-editor/ox-property-editor-color.js'\nimport '@operato/property-editor/ox-property-editor-multiple-colors.js'\nimport '@operato/property-editor/ox-property-editor-solid-colorstops.js'\nimport '@operato/property-editor/ox-property-editor-gradient-colorstops.js'\nimport '@operato/property-editor/ox-property-editor-gradient-colorstops.js'\nimport '@operato/property-editor/ox-property-editor-textarea.js'\nimport '@operato/property-editor/ox-property-editor-table.js'\nimport '@operato/property-editor/ox-property-editor-value-map.js'\nimport '@operato/property-editor/ox-property-editor-value-ranges.js'\nimport '@operato/attachment/ox-property-editor-attachment-selector.js'\nimport '@operato/attachment/ox-property-editor-image-selector.js'\nimport '@operato/font/ox-property-editor-font-selector.js'\nimport './ox-property-editor-graphql.js'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nOxPropertyEditor.register({\n legend: 'ox-property-editor-legend',\n number: 'ox-property-editor-number',\n slider: 'ox-property-editor-range',\n password: 'ox-property-editor-password',\n angle: 'ox-property-editor-angle',\n string: 'ox-property-editor-string',\n textarea: 'ox-property-editor-textarea',\n javascript: 'ox-property-editor-textarea',\n checkbox: 'ox-property-editor-checkbox',\n boolean: 'ox-property-editor-checkbox',\n select: 'ox-property-editor-select',\n date: 'ox-property-editor-date',\n options: 'ox-property-editor-options',\n data: 'ox-property-editor-data',\n file: 'ox-property-editor-file',\n image: 'ox-property-editor-image',\n 'range-input': 'ox-property-editor-range',\n 'attachment-selector': 'ox-property-editor-attachment-selector',\n 'gltf-selector': 'ox-property-editor-attachment-selector',\n 'image-selector': 'ox-property-editor-image-selector',\n color: 'ox-property-editor-color',\n 'solid-color-stops': 'ox-property-editor-solid-colorstops',\n 'gradient-color-stops': 'ox-property-editor-gradient-colorstops',\n 'multiple-color': 'ox-property-editor-multiple-colors',\n map: 'ox-property-editor-value-map',\n range: 'ox-property-editor-value-ranges',\n graphql: 'ox-property-editor-graphql',\n 'editor-table': 'ox-property-editor-table',\n 'id-input': 'ox-property-editor-scene-component-id',\n 'font-selector': 'ox-property-editor-font-selector'\n})\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '../input/ox-input-graphql.js';
|
|
3
|
+
import { OxPropertyEditor } from '@operato/property-editor';
|
|
4
|
+
import { customElement } from 'lit/decorators.js';
|
|
5
|
+
import { html } from 'lit';
|
|
6
|
+
let OxPropertyEditorGraphQL = class OxPropertyEditorGraphQL extends OxPropertyEditor {
|
|
7
|
+
editorTemplate() {
|
|
8
|
+
return html ` <ox-input-graphql id="editor" .value=${this.value} fullwidth> </ox-input-graphql> `;
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
OxPropertyEditorGraphQL = __decorate([
|
|
12
|
+
customElement('ox-property-editor-graphql')
|
|
13
|
+
], OxPropertyEditorGraphQL);
|
|
14
|
+
export { OxPropertyEditorGraphQL };
|
|
15
|
+
//# sourceMappingURL=ox-property-editor-graphql.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-property-editor-graphql.js","sourceRoot":"","sources":["../../../src/property-editor/ox-property-editor-graphql.ts"],"names":[],"mappings":";AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,gBAAgB;IAC3D,cAAc;QACZ,OAAO,IAAI,CAAA,yCAAyC,IAAI,CAAC,KAAK,kCAAkC,CAAA;IAClG,CAAC;CACF,CAAA;AAJY,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAInC;SAJY,uBAAuB","sourcesContent":["import '../input/ox-input-graphql.js'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-property-editor-graphql')\nexport class OxPropertyEditorGraphQL extends OxPropertyEditor {\n editorTemplate() {\n return html` <ox-input-graphql id=\"editor\" .value=${this.value} fullwidth> </ox-input-graphql> `\n }\n}\n"]}
|