@operato/app 1.5.49 → 1.5.51
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/.storybook/main.js +2 -2
- package/CHANGELOG.md +18 -0
- package/dist/src/input/ox-input-graphql.d.ts +5 -14
- package/dist/src/input/ox-input-graphql.js +60 -87
- package/dist/src/input/ox-input-graphql.js.map +1 -1
- package/dist/src/property-editor/ox-property-editor-graphql.js +1 -1
- package/dist/src/property-editor/ox-property-editor-graphql.js.map +1 -1
- package/dist/stories/ox-input-graphql.stories.d.ts +25 -0
- package/dist/stories/ox-input-graphql.stories.js +44 -0
- package/dist/stories/ox-input-graphql.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -11
- package/src/input/ox-input-graphql.ts +61 -91
- package/src/property-editor/ox-property-editor-graphql.ts +1 -1
- package/stories/ox-input-graphql.stories.ts +58 -0
package/.storybook/main.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
module.exports = {
|
|
2
|
-
stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
|
|
3
|
-
}
|
|
2
|
+
stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
|
|
3
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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.5.51](https://github.com/hatiolab/operato/compare/v1.5.50...v1.5.51) (2023-12-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-input-code, ox-input-graphql ([5cf8a78](https://github.com/hatiolab/operato/commit/5cf8a782a27d3980aa55c428273e491b17dba73b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.5.50](https://github.com/hatiolab/operato/compare/v1.5.49...v1.5.50) (2023-12-07)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* codemirror v6 ([4332ac2](https://github.com/hatiolab/operato/commit/4332ac2fc74ae08bcb3d583a13f5c2469f9a9fcd))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [1.5.49](https://github.com/hatiolab/operato/compare/v1.5.48...v1.5.49) (2023-12-04)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @operato/app
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import '
|
|
5
|
-
import 'codemirror/
|
|
6
|
-
import '
|
|
7
|
-
import 'codemirror/addon/lint/lint';
|
|
8
|
-
import 'codemirror-graphql/hint';
|
|
9
|
-
import 'codemirror-graphql/lint';
|
|
10
|
-
import 'codemirror-graphql/mode';
|
|
11
|
-
import CodeMirror from 'codemirror';
|
|
12
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
4
|
+
import { PropertyValues } from 'lit';
|
|
5
|
+
import { EditorView } from '@codemirror/view';
|
|
6
|
+
import { OxFormField } from '@operato/input';
|
|
13
7
|
/**
|
|
14
8
|
WEB Component for code-mirror graphql editor.
|
|
15
9
|
|
|
@@ -18,19 +12,16 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
18
12
|
<ox-input-graphql value=${text} link=${link}>
|
|
19
13
|
</ox-input-graphql>
|
|
20
14
|
*/
|
|
21
|
-
export default class OxInputGraphql extends
|
|
15
|
+
export default class OxInputGraphql extends OxFormField {
|
|
22
16
|
static styles: import("lit").CSSResult[];
|
|
23
17
|
/**
|
|
24
18
|
* `value`는 에디터에서 작성중인 contents이다.
|
|
25
19
|
*/
|
|
26
20
|
value?: string;
|
|
27
21
|
link?: string;
|
|
28
|
-
textarea: HTMLTextAreaElement;
|
|
29
22
|
private _self_changing;
|
|
30
|
-
private _changed;
|
|
31
23
|
private _editor?;
|
|
32
24
|
updated(changes: PropertyValues<this>): Promise<void>;
|
|
33
|
-
render(): import("lit").TemplateResult<1>;
|
|
34
25
|
getSchema(): Promise<import("graphql").GraphQLSchema>;
|
|
35
|
-
getEditor(): Promise<
|
|
26
|
+
getEditor(): Promise<EditorView>;
|
|
36
27
|
}
|
|
@@ -2,25 +2,20 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
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 FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
|
|
13
|
-
import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
|
|
14
|
-
import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
|
|
15
|
-
import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
|
|
16
|
-
import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
|
|
17
|
-
import CodeMirror from 'codemirror';
|
|
18
5
|
import { fetch } from 'cross-fetch';
|
|
19
6
|
import { print } from 'graphql';
|
|
20
|
-
import { css
|
|
21
|
-
import { customElement, property
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { graphql } from 'cm6-graphql';
|
|
10
|
+
import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
|
|
11
|
+
import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
|
|
12
|
+
import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
|
|
13
|
+
import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
|
|
14
|
+
import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
|
|
22
15
|
import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
|
|
23
16
|
import { GRAPHQL_URI } from '@operato/graphql';
|
|
17
|
+
import { OxFormField } from '@operato/input';
|
|
18
|
+
import { togglefullscreen } from '@operato/utils';
|
|
24
19
|
/**
|
|
25
20
|
WEB Component for code-mirror graphql editor.
|
|
26
21
|
|
|
@@ -29,25 +24,20 @@ import { GRAPHQL_URI } from '@operato/graphql';
|
|
|
29
24
|
<ox-input-graphql value=${text} link=${link}>
|
|
30
25
|
</ox-input-graphql>
|
|
31
26
|
*/
|
|
32
|
-
let OxInputGraphql = class OxInputGraphql extends
|
|
27
|
+
let OxInputGraphql = class OxInputGraphql extends OxFormField {
|
|
33
28
|
constructor() {
|
|
34
29
|
super(...arguments);
|
|
35
30
|
this._self_changing = false;
|
|
36
|
-
this._changed = false;
|
|
37
31
|
}
|
|
38
32
|
async updated(changes) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
// ;(await this.getEditor()).refresh()
|
|
33
|
+
const editor = await this.getEditor();
|
|
34
|
+
if (changes.has('value') && editor && !this._self_changing) {
|
|
35
|
+
const to = editor.state.doc.toString().length;
|
|
36
|
+
editor.dispatch({
|
|
37
|
+
changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
|
|
38
|
+
});
|
|
46
39
|
}
|
|
47
40
|
}
|
|
48
|
-
render() {
|
|
49
|
-
return html ` <textarea></textarea> `;
|
|
50
|
-
}
|
|
51
41
|
async getSchema() {
|
|
52
42
|
const executor = async ({ document, variables }) => {
|
|
53
43
|
const query = print(document);
|
|
@@ -68,80 +58,66 @@ let OxInputGraphql = class OxInputGraphql extends LitElement {
|
|
|
68
58
|
}
|
|
69
59
|
async getEditor() {
|
|
70
60
|
if (!this._editor) {
|
|
61
|
+
var schema;
|
|
71
62
|
try {
|
|
72
|
-
|
|
63
|
+
schema = await this.getSchema();
|
|
73
64
|
}
|
|
74
65
|
catch (err) {
|
|
75
66
|
console.error(err);
|
|
76
67
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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'));
|
|
68
|
+
this._editor = new EditorView({
|
|
69
|
+
doc: this.value,
|
|
70
|
+
extensions: [
|
|
71
|
+
bracketMatching(),
|
|
72
|
+
closeBrackets(),
|
|
73
|
+
history(),
|
|
74
|
+
autocompletion(),
|
|
75
|
+
oneDark,
|
|
76
|
+
syntaxHighlighting(oneDarkHighlightStyle),
|
|
77
|
+
graphql(schema, {
|
|
78
|
+
onShowInDocs(field, type, parentType) {
|
|
79
|
+
alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`);
|
|
96
80
|
},
|
|
97
|
-
|
|
98
|
-
|
|
81
|
+
onFillAllFields(view, schema, _query, cursor, token) {
|
|
82
|
+
alert(`Filling all fields. Token: ${token}`);
|
|
99
83
|
}
|
|
100
|
-
},
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}
|
|
84
|
+
}),
|
|
85
|
+
highlightActiveLine(),
|
|
86
|
+
history(),
|
|
87
|
+
keymap.of([...historyKeymap, indentWithTab]),
|
|
88
|
+
EditorView.updateListener.of(v => {
|
|
89
|
+
if (v.docChanged) {
|
|
90
|
+
this._self_changing = true;
|
|
91
|
+
this.value = v.state.doc.toString();
|
|
92
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
|
|
93
|
+
requestAnimationFrame(() => {
|
|
94
|
+
this._self_changing = false;
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
})
|
|
98
|
+
],
|
|
99
|
+
parent: this.renderRoot
|
|
100
|
+
});
|
|
118
101
|
}
|
|
102
|
+
this._editor.contentDOM.addEventListener('keydown', event => {
|
|
103
|
+
if (event.key === 'Escape') {
|
|
104
|
+
togglefullscreen(this._editor.contentDOM);
|
|
105
|
+
}
|
|
106
|
+
});
|
|
119
107
|
return this._editor;
|
|
120
108
|
}
|
|
121
109
|
};
|
|
122
110
|
OxInputGraphql.styles = [
|
|
123
|
-
css `
|
|
124
|
-
${unsafeCSS(CodeMirrorStyle)}
|
|
125
|
-
${unsafeCSS(FullScreenStyle)}
|
|
126
|
-
${unsafeCSS(NightThemeStyle)}
|
|
127
|
-
${unsafeCSS(LintStyle)}
|
|
128
|
-
${unsafeCSS(ShowHintStyle)}
|
|
129
|
-
`,
|
|
130
111
|
css `
|
|
131
112
|
:host {
|
|
132
|
-
display:
|
|
113
|
+
display: flex;
|
|
114
|
+
flex-direction: column;
|
|
133
115
|
position: relative;
|
|
116
|
+
background: white;
|
|
134
117
|
}
|
|
135
118
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
height: 100%;
|
|
139
|
-
width: 100%;
|
|
140
|
-
resize: none;
|
|
141
|
-
font-size: 16px;
|
|
142
|
-
line-height: 20px;
|
|
143
|
-
border: 0px;
|
|
144
|
-
padding: 0px;
|
|
119
|
+
.cm-editor {
|
|
120
|
+
flex: 1;
|
|
145
121
|
}
|
|
146
122
|
`
|
|
147
123
|
];
|
|
@@ -151,9 +127,6 @@ __decorate([
|
|
|
151
127
|
__decorate([
|
|
152
128
|
property({ type: String })
|
|
153
129
|
], OxInputGraphql.prototype, "link", void 0);
|
|
154
|
-
__decorate([
|
|
155
|
-
query('textarea')
|
|
156
|
-
], OxInputGraphql.prototype, "textarea", void 0);
|
|
157
130
|
OxInputGraphql = __decorate([
|
|
158
131
|
customElement('ox-input-graphql')
|
|
159
132
|
], OxInputGraphql);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
|
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 { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { graphql } from 'cm6-graphql'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\n\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\nimport { GRAPHQL_URI } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\nimport { togglefullscreen } from '@operato/utils'\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 OxFormField {\n static styles = [\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 }) link?: string\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n\n async updated(changes: PropertyValues<this>) {\n const editor = await this.getEditor()\n if (changes.has('value') && editor && !this._self_changing) {\n const to = editor.state.doc.toString().length\n editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\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 var schema\n try {\n schema = await this.getSchema()\n } catch (err) {\n console.error(err)\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n graphql(schema, {\n onShowInDocs(field, type, parentType) {\n alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)\n },\n onFillAllFields(view, schema, _query, cursor, token) {\n alert(`Filling all fields. Token: ${token}`)\n }\n }),\n highlightActiveLine(),\n history(),\n keymap.of([...historyKeymap, indentWithTab]),\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 this._editor.contentDOM.addEventListener('keydown', event => {\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n return this._editor\n }\n}\n"]}
|
|
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
|
|
|
5
5
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
6
6
|
let OxPropertyEditorGraphQL = class OxPropertyEditorGraphQL extends OxPropertyEditor {
|
|
7
7
|
editorTemplate(value, spec) {
|
|
8
|
-
return html ` <ox-input-graphql id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
|
|
8
|
+
return html ` <ox-input-graphql class="multiline-input" id="editor" .value=${value} fullwidth> </ox-input-graphql> `;
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
11
|
OxPropertyEditorGraphQL = __decorate([
|
|
@@ -1 +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,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,gBAAgB;IAC3D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,
|
|
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,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,gBAAgB;IAC3D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,iEAAiE,KAAK,kCAAkC,CAAA;IACrH,CAAC;CACF,CAAA;AAJY,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAInC","sourcesContent":["import '../input/ox-input-graphql.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-graphql')\nexport class OxPropertyEditorGraphQL extends OxPropertyEditor {\n editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n return html` <ox-input-graphql class=\"multiline-input\" id=\"editor\" .value=${value} fullwidth> </ox-input-graphql> `\n }\n}\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import '../src/input/ox-input-graphql.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
value: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
name: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
16
|
+
interface Story<T> {
|
|
17
|
+
(args: T): TemplateResult;
|
|
18
|
+
args?: Partial<T>;
|
|
19
|
+
argTypes?: Record<string, unknown>;
|
|
20
|
+
}
|
|
21
|
+
interface ArgTypes {
|
|
22
|
+
name?: string;
|
|
23
|
+
value?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import '../src/input/ox-input-graphql.js';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'ox-input-graphql',
|
|
5
|
+
component: 'ox-input-graphql',
|
|
6
|
+
argTypes: {
|
|
7
|
+
value: { control: 'text' },
|
|
8
|
+
name: { control: 'text' }
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
const Template = ({ name = 'code', value = '' }) => html `
|
|
12
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
13
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
14
|
+
<style>
|
|
15
|
+
body {
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
|
|
19
|
+
<ox-input-graphql
|
|
20
|
+
@change=${(e) => {
|
|
21
|
+
console.log(e.target.value);
|
|
22
|
+
}}
|
|
23
|
+
name=${name}
|
|
24
|
+
.value=${value}
|
|
25
|
+
>
|
|
26
|
+
</ox-input-graphql>
|
|
27
|
+
`;
|
|
28
|
+
export const Regular = Template.bind({});
|
|
29
|
+
Regular.args = {
|
|
30
|
+
name: 'code',
|
|
31
|
+
value: `
|
|
32
|
+
query privileges {
|
|
33
|
+
privileges {
|
|
34
|
+
items {
|
|
35
|
+
privilege
|
|
36
|
+
category
|
|
37
|
+
description
|
|
38
|
+
}
|
|
39
|
+
total
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
`
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=ox-input-graphql.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-graphql.stories.js","sourceRoot":"","sources":["../../stories/ox-input-graphql.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASrE,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,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;;;;;;;;;;;CAWR;CACA,CAAA","sourcesContent":["import '../src/input/ox-input-graphql.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-graphql',\n component: 'ox-input-graphql',\n argTypes: {\n value: { control: 'text' },\n name: { control: 'text' }\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}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', 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 </style>\n\n <ox-input-graphql\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n >\n </ox-input-graphql>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'code',\n value: `\nquery privileges {\n privileges {\n items {\n privilege\n category\n description\n }\n total\n }\n}\n`\n}\n"]}
|