@operato/app 2.0.0-alpha.106 → 2.0.0-alpha.107
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/input/ox-input-graphql.js +0 -1
- package/dist/src/input/ox-input-graphql.js.map +1 -1
- package/dist/stories/graphql-client.stories.d.ts +26 -0
- package/dist/stories/graphql-client.stories.js +55 -0
- package/dist/stories/graphql-client.stories.js.map +1 -0
- package/dist/stories/ox-selector-resource-object.stories.d.ts +29 -0
- package/dist/stories/ox-selector-resource-object.stories.js +80 -0
- package/dist/stories/ox-selector-resource-object.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -12
- package/src/input/ox-input-graphql.ts +0 -1
- package/stories/graphql-client.stories.ts +73 -0
- package/stories/ox-selector-resource-object.stories.ts +98 -0
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
|
+
## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* consider graphql link for mocking ([8eb3687](https://github.com/hatiolab/operato/commit/8eb36875876244b9d15809f88fa6600589b132ef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [2.0.0-alpha.106](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.105...v2.0.0-alpha.106) (2024-04-26)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/app
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,
|
|
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 { 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, lineNumbers } 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 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 }) link?: string\n @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\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 ...(this.showLineNumbers ? [lineNumbers()] : []),\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(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"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import '@operato/graphql/graphql-client.js';
|
|
2
|
+
import '../src/input/ox-input-graphql.js';
|
|
3
|
+
import { TemplateResult } from 'lit';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
name: {
|
|
12
|
+
control: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
interface Story<T> {
|
|
18
|
+
(args: T): TemplateResult;
|
|
19
|
+
args?: Partial<T>;
|
|
20
|
+
argTypes?: Record<string, unknown>;
|
|
21
|
+
}
|
|
22
|
+
interface ArgTypes {
|
|
23
|
+
name?: string;
|
|
24
|
+
value?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js';
|
|
2
|
+
import '@operato/graphql/graphql-client.js';
|
|
3
|
+
import '../src/input/ox-input-graphql.js';
|
|
4
|
+
// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
|
|
5
|
+
import { html } from 'lit';
|
|
6
|
+
setClientLink(createMockLink({
|
|
7
|
+
request: {
|
|
8
|
+
query: ''
|
|
9
|
+
},
|
|
10
|
+
result: {
|
|
11
|
+
data: {
|
|
12
|
+
viewer: null
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}));
|
|
16
|
+
export default {
|
|
17
|
+
title: 'graphql-client',
|
|
18
|
+
component: 'graphql-client',
|
|
19
|
+
argTypes: {
|
|
20
|
+
value: { control: 'text' },
|
|
21
|
+
name: { control: 'text' }
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const Template = ({ name = 'code', value = '' }) => html `
|
|
25
|
+
<style>
|
|
26
|
+
body {
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
|
|
30
|
+
<ox-input-graphql
|
|
31
|
+
@change=${(e) => {
|
|
32
|
+
console.log(e.target.value);
|
|
33
|
+
}}
|
|
34
|
+
name=${name}
|
|
35
|
+
.value=${value}
|
|
36
|
+
>
|
|
37
|
+
</ox-input-graphql>
|
|
38
|
+
`;
|
|
39
|
+
export const Regular = Template.bind({});
|
|
40
|
+
Regular.args = {
|
|
41
|
+
name: 'code',
|
|
42
|
+
value: `
|
|
43
|
+
query privileges {
|
|
44
|
+
privileges {
|
|
45
|
+
items {
|
|
46
|
+
privilege
|
|
47
|
+
category
|
|
48
|
+
description
|
|
49
|
+
}
|
|
50
|
+
total
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
`
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=graphql-client.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graphql-client.stories.js","sourceRoot":"","sources":["../../stories/graphql-client.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,oCAAoC,CAAA;AAC3C,OAAO,kCAAkC,CAAA;AAEzC,6DAA6D;AAE7D,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,aAAa,CACX,cAAc,CAAC;IACb,OAAO,EAAE;QACP,KAAK,EAAE,EAAE;KACV;IACD,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,MAAM,EAAE,IAAI;SACb;KACF;CACF,CAAC,CACH,CAAA;AAED,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,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;;;;;;;cAOrE,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 { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'\nimport '@operato/graphql/graphql-client.js'\nimport '../src/input/ox-input-graphql.js'\n\n// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.\n\nimport { html, TemplateResult } from 'lit'\n\nsetClientLink(\n createMockLink({\n request: {\n query: ''\n },\n result: {\n data: {\n viewer: null\n }\n }\n })\n)\n\nexport default {\n title: 'graphql-client',\n component: 'graphql-client',\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 <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"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import '../src/selector/ox-selector-resource-object';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
queryName: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
value: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
valueField: {
|
|
14
|
+
control: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export default _default;
|
|
19
|
+
interface Story<T> {
|
|
20
|
+
(args: T): TemplateResult;
|
|
21
|
+
args?: Partial<T>;
|
|
22
|
+
argTypes?: Record<string, unknown>;
|
|
23
|
+
}
|
|
24
|
+
interface ArgTypes {
|
|
25
|
+
queryName: string;
|
|
26
|
+
value?: string;
|
|
27
|
+
valueField?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
|
+
import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js';
|
|
4
|
+
import '../src/selector/ox-selector-resource-object';
|
|
5
|
+
setClientLink(createMockLink({
|
|
6
|
+
request: {
|
|
7
|
+
query: ''
|
|
8
|
+
},
|
|
9
|
+
result: {
|
|
10
|
+
data: {
|
|
11
|
+
viewer: null
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}));
|
|
15
|
+
export default {
|
|
16
|
+
title: 'ox-selector-resource-object',
|
|
17
|
+
component: 'ox-selector-resource-object',
|
|
18
|
+
argTypes: {
|
|
19
|
+
queryName: { control: 'string' },
|
|
20
|
+
value: { control: 'string' },
|
|
21
|
+
valueField: { control: 'string' }
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const Template = ({ value = '', queryName, valueField }) => html `
|
|
25
|
+
<style>
|
|
26
|
+
body {
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
const select = ['name', 'description']
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<ox-selector-resource-object
|
|
35
|
+
@change=${(e) => {
|
|
36
|
+
console.log(e.target.value);
|
|
37
|
+
}}
|
|
38
|
+
name=${name}
|
|
39
|
+
value=${ifDefined(value)}
|
|
40
|
+
valueField=${ifDefined(valueField)}
|
|
41
|
+
.queryName=${queryName}
|
|
42
|
+
.confirmCallback=${(record) => console.log('confirm', record)}
|
|
43
|
+
.columns=${[
|
|
44
|
+
{
|
|
45
|
+
type: 'string',
|
|
46
|
+
name: 'id',
|
|
47
|
+
header: 'id',
|
|
48
|
+
hidden: true,
|
|
49
|
+
width: 100,
|
|
50
|
+
queryName: ''
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'string',
|
|
54
|
+
name: 'name',
|
|
55
|
+
header: 'name',
|
|
56
|
+
hidden: false,
|
|
57
|
+
width: 150,
|
|
58
|
+
queryName: ''
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
type: 'string',
|
|
62
|
+
name: 'description',
|
|
63
|
+
header: 'description',
|
|
64
|
+
hidden: false,
|
|
65
|
+
width: 150,
|
|
66
|
+
queryName: ''
|
|
67
|
+
}
|
|
68
|
+
]}
|
|
69
|
+
.list=${['name', 'description']}
|
|
70
|
+
.basicArgs=${''}
|
|
71
|
+
>
|
|
72
|
+
</ox-selector-resource-object>
|
|
73
|
+
`;
|
|
74
|
+
export const Regular = Template.bind({});
|
|
75
|
+
Regular.args = {
|
|
76
|
+
value: '',
|
|
77
|
+
queryName: 'entity',
|
|
78
|
+
valueField: 'id'
|
|
79
|
+
};
|
|
80
|
+
//# sourceMappingURL=ox-selector-resource-object.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-selector-resource-object.stories.js","sourceRoot":"","sources":["../../stories/ox-selector-resource-object.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,6CAA6C,CAAA;AAEpD,aAAa,CACX,cAAc,CAAC;IACb,OAAO,EAAE;QACP,KAAK,EAAE,EAAE;KACV;IACD,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,MAAM,EAAE,IAAI;SACb;KACF;CACF,CAAC,CACH,CAAA;AAED,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,6BAA6B;IACxC,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,UAAU,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAClC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,EAAE,UAAU,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;cAW7E,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;YACH,SAAS,CAAC,KAAK,CAAC;iBACX,SAAS,CAAC,UAAU,CAAC;iBACrB,SAAS;uBACH,CAAC,MAAW,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC;eACvD;IACT;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;QACZ,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,EAAE;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,EAAE;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,EAAE;KACd;CACF;YACO,CAAC,MAAM,EAAE,aAAa,CAAC;iBAClB,EAAE;;;CAGlB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,IAAI;CACjB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'\nimport '../src/selector/ox-selector-resource-object'\n\nsetClientLink(\n createMockLink({\n request: {\n query: ''\n },\n result: {\n data: {\n viewer: null\n }\n }\n })\n)\n\nexport default {\n title: 'ox-selector-resource-object',\n component: 'ox-selector-resource-object',\n argTypes: {\n queryName: { control: 'string' },\n value: { control: 'string' },\n valueField: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n queryName: string\n value?: string\n valueField?: string\n}\n\nconst Template: Story<ArgTypes> = ({ value = '', queryName, valueField }: ArgTypes) => html`\n <style>\n body {\n }\n </style>\n\n <script>\n const select = ['name', 'description']\n </script>\n\n <ox-selector-resource-object\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n value=${ifDefined(value)}\n valueField=${ifDefined(valueField)}\n .queryName=${queryName}\n .confirmCallback=${(record: any) => console.log('confirm', record)}\n .columns=${[\n {\n type: 'string',\n name: 'id',\n header: 'id',\n hidden: true,\n width: 100,\n queryName: ''\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n hidden: false,\n width: 150,\n queryName: ''\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n hidden: false,\n width: 150,\n queryName: ''\n }\n ]}\n .list=${['name', 'description']}\n .basicArgs=${''}\n >\n </ox-selector-resource-object>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: '',\n queryName: 'entity',\n valueField: 'id'\n}\n"]}
|