@operato/dataset 1.0.0-alpha.20 → 1.0.0-alpha.23
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 +39 -0
- package/demo/data-item-grist.html +343 -0
- package/demo/index.html +6 -90
- package/demo/ox-data-entry-form.html +110 -0
- package/demo/ox-data-item-spec.html +148 -0
- package/dist/src/grist-editor/index.d.ts +1 -0
- package/dist/src/grist-editor/index.js +7 -0
- package/dist/src/grist-editor/index.js.map +1 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor-popup.d.ts +13 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js +90 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js.map +1 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor.d.ts +18 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor.js +98 -0
- package/dist/src/grist-editor/ox-data-item-spec-editor.js.map +1 -0
- package/dist/src/index.d.ts +3 -1
- package/dist/src/index.js +3 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-data-entry-form.d.ts +1 -24
- package/dist/src/ox-data-entry-form.js +7 -5
- package/dist/src/ox-data-entry-form.js.map +1 -1
- package/dist/src/ox-data-item-spec.d.ts +22 -0
- package/dist/src/ox-data-item-spec.js +67 -0
- package/dist/src/ox-data-item-spec.js.map +1 -0
- package/dist/src/types.d.ts +38 -0
- package/dist/src/types.js +2 -0
- package/dist/src/types.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -11
- package/src/grist-editor/index.ts +10 -0
- package/src/grist-editor/ox-data-item-spec-editor-popup.ts +90 -0
- package/src/grist-editor/ox-data-item-spec-editor.ts +105 -0
- package/src/index.ts +3 -1
- package/src/ox-data-entry-form.ts +8 -27
- package/src/ox-data-item-spec.ts +64 -0
- package/src/types.ts +38 -0
- package/themes/grist-theme.css +194 -0
- package/themes/oops-theme.css +26 -0
- package/themes/report-theme.css +47 -0
- package/translations/en.json +1 -0
- package/translations/ko.json +1 -0
- package/translations/ms.json +1 -0
- package/translations/zh.json +1 -0
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
--ox-checkbox-size: 12px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
#demo {
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
15
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
16
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
17
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="demo"></div>
|
|
21
|
+
|
|
22
|
+
<script type="module">
|
|
23
|
+
import { html, render } from 'lit'
|
|
24
|
+
|
|
25
|
+
import '@operato/property-editor/ox-property-editor-checkbox.js'
|
|
26
|
+
import '@operato/property-editor/ox-property-editor-number.js'
|
|
27
|
+
import '@operato/property-editor/ox-property-editor-string.js'
|
|
28
|
+
|
|
29
|
+
import '@operato/property-editor/ox-properties-dynamic-view.js'
|
|
30
|
+
|
|
31
|
+
import { OxPropertyEditor } from '@operato/property-editor'
|
|
32
|
+
|
|
33
|
+
OxPropertyEditor.register({
|
|
34
|
+
number: 'ox-property-editor-number',
|
|
35
|
+
string: 'ox-property-editor-string',
|
|
36
|
+
boolean: 'ox-property-editor-checkbox'
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
import { OxDataItemSpec } from '../dist/src/ox-data-item-spec.js'
|
|
40
|
+
import '../dist/src/ox-data-item-spec.js'
|
|
41
|
+
|
|
42
|
+
const parent = document.querySelector('#demo')
|
|
43
|
+
|
|
44
|
+
const ccpProvider = dataItem => {
|
|
45
|
+
return {
|
|
46
|
+
name: 'ccp',
|
|
47
|
+
description: 'ccp specs',
|
|
48
|
+
specs: [
|
|
49
|
+
{
|
|
50
|
+
type: 'number',
|
|
51
|
+
label: 'critical limits',
|
|
52
|
+
name: 'criticalLimits',
|
|
53
|
+
property: dataItem
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
type: 'string',
|
|
57
|
+
label: 'target limits',
|
|
58
|
+
name: 'targetLimits',
|
|
59
|
+
property: dataItem
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const qcProvider = dataItem => {
|
|
66
|
+
return {
|
|
67
|
+
name: 'qc',
|
|
68
|
+
description: 'qc specs',
|
|
69
|
+
specs: [
|
|
70
|
+
{
|
|
71
|
+
type: 'number',
|
|
72
|
+
label: 'critical limits',
|
|
73
|
+
name: 'criticalLimits',
|
|
74
|
+
property: dataItem
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
type: 'boolean',
|
|
78
|
+
label: 'target limits',
|
|
79
|
+
name: 'targetLimits',
|
|
80
|
+
property: dataItem
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
OxDataItemSpec.registerProvider('ccp', ccpProvider)
|
|
87
|
+
OxDataItemSpec.registerProvider('qc', qcProvider)
|
|
88
|
+
|
|
89
|
+
const dataItemA = {
|
|
90
|
+
name: '창고 온도',
|
|
91
|
+
description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
|
|
92
|
+
sequence: 1,
|
|
93
|
+
tag: 'temp',
|
|
94
|
+
unit: '℃',
|
|
95
|
+
type: 'number',
|
|
96
|
+
quota: 1
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const dataItemB = {
|
|
100
|
+
name: '품평',
|
|
101
|
+
description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
|
|
102
|
+
sequence: 4,
|
|
103
|
+
tag: 'evaluation',
|
|
104
|
+
type: 'select',
|
|
105
|
+
options: {
|
|
106
|
+
options: [
|
|
107
|
+
{ text: '최우수', value: '최우수' },
|
|
108
|
+
{ text: '우수', value: '우수' },
|
|
109
|
+
{ text: '보통', value: '보통' },
|
|
110
|
+
{ text: '미달', value: '미달' }
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
quota: 3
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const dataItemC = {
|
|
117
|
+
name: '코멘트',
|
|
118
|
+
description: '특이사항을 기록함.',
|
|
119
|
+
sequence: 4,
|
|
120
|
+
tag: 'comment',
|
|
121
|
+
type: 'string',
|
|
122
|
+
quota: 1
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
var specA = {
|
|
126
|
+
ccp: { criticalLimits: 1000, targetLimits: true },
|
|
127
|
+
qc: { criticalLimits: 400, targetLimits: false }
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
var specB = {
|
|
131
|
+
ccp: { accpetables: ['최우수', '우수'] },
|
|
132
|
+
qc: { accpetables: ['최우수', '우수'] }
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
render(
|
|
136
|
+
html`<ox-data-item-spec
|
|
137
|
+
.dataItem=${dataItemA}
|
|
138
|
+
.value=${specA}
|
|
139
|
+
@change=${e => {
|
|
140
|
+
specA = e.detail
|
|
141
|
+
console.log('change', specA)
|
|
142
|
+
}}
|
|
143
|
+
></ox-data-item-spec>`,
|
|
144
|
+
parent
|
|
145
|
+
)
|
|
146
|
+
</script>
|
|
147
|
+
</body>
|
|
148
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ox-data-item-spec-editor';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Json5Renderer, registerEditor, registerRenderer } from '@operato/data-grist';
|
|
2
|
+
import { OxDataItemSpecEditor } from './ox-data-item-spec-editor';
|
|
3
|
+
/* register grist renderer/editor for id */
|
|
4
|
+
registerEditor('data-item-spec', OxDataItemSpecEditor);
|
|
5
|
+
registerRenderer('data-item-spec', Json5Renderer);
|
|
6
|
+
export * from './ox-data-item-spec-editor';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAEjE,2CAA2C;AAC3C,cAAc,CAAC,gBAAgB,EAAE,oBAA2B,CAAC,CAAA;AAE7D,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA;AAEjD,cAAc,4BAA4B,CAAA","sourcesContent":["import { Json5Renderer, registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { OxDataItemSpecEditor } from './ox-data-item-spec-editor'\n\n/* register grist renderer/editor for id */\nregisterEditor('data-item-spec', OxDataItemSpecEditor as any)\n\nregisterRenderer('data-item-spec', Json5Renderer)\n\nexport * from './ox-data-item-spec-editor'\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import '../ox-data-item-spec.js';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { DataItem } from '../types.js';
|
|
4
|
+
export declare class OxDataItemSpecEditorPopup extends LitElement {
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
|
+
value: any;
|
|
7
|
+
dataItem?: DataItem;
|
|
8
|
+
confirmCallback: (newval: any) => void;
|
|
9
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
+
private onChange;
|
|
11
|
+
private onCancel;
|
|
12
|
+
private onConfirm;
|
|
13
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '../ox-data-item-spec.js';
|
|
3
|
+
import { LitElement, css, html } from 'lit';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
6
|
+
import { i18next } from '@operato/i18n';
|
|
7
|
+
let OxDataItemSpecEditorPopup = class OxDataItemSpecEditorPopup extends LitElement {
|
|
8
|
+
render() {
|
|
9
|
+
var dataItem = this.dataItem || {};
|
|
10
|
+
return html `
|
|
11
|
+
<ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>
|
|
12
|
+
</ox-data-item-spec>
|
|
13
|
+
|
|
14
|
+
<div class="button-container">
|
|
15
|
+
<mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
|
|
16
|
+
<mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
|
|
17
|
+
</div>
|
|
18
|
+
`;
|
|
19
|
+
}
|
|
20
|
+
onChange(e) {
|
|
21
|
+
e.stopPropagation();
|
|
22
|
+
/*
|
|
23
|
+
주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
|
|
24
|
+
layout의 구성에 변화가 발생하면, 다시 render된다.
|
|
25
|
+
이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
|
|
26
|
+
이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
|
|
27
|
+
만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
|
|
28
|
+
따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
|
|
29
|
+
(이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
|
|
30
|
+
=>
|
|
31
|
+
이런 이유로, Object.assign(...)을 사용하였다.
|
|
32
|
+
*/
|
|
33
|
+
this.value = e.detail;
|
|
34
|
+
}
|
|
35
|
+
onCancel(e) {
|
|
36
|
+
history.back();
|
|
37
|
+
}
|
|
38
|
+
onConfirm(e) {
|
|
39
|
+
this.confirmCallback && this.confirmCallback(this.value);
|
|
40
|
+
history.back();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
OxDataItemSpecEditorPopup.styles = [
|
|
44
|
+
ScrollbarStyles,
|
|
45
|
+
css `
|
|
46
|
+
:host {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
|
|
50
|
+
background-color: #fff;
|
|
51
|
+
|
|
52
|
+
width: var(--overlay-center-normal-width, 50%);
|
|
53
|
+
height: var(--overlay-center-normal-height, 50%);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
ox-data-item-spec {
|
|
57
|
+
flex: 1;
|
|
58
|
+
overflow-y: auto;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
span {
|
|
62
|
+
flex: 1;
|
|
63
|
+
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
|
|
68
|
+
color: var(--primary-color);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.button-container {
|
|
72
|
+
display: flex;
|
|
73
|
+
margin-left: auto;
|
|
74
|
+
}
|
|
75
|
+
`
|
|
76
|
+
];
|
|
77
|
+
__decorate([
|
|
78
|
+
property({ type: Object })
|
|
79
|
+
], OxDataItemSpecEditorPopup.prototype, "value", void 0);
|
|
80
|
+
__decorate([
|
|
81
|
+
property({ type: Object })
|
|
82
|
+
], OxDataItemSpecEditorPopup.prototype, "dataItem", void 0);
|
|
83
|
+
__decorate([
|
|
84
|
+
property({ type: Object })
|
|
85
|
+
], OxDataItemSpecEditorPopup.prototype, "confirmCallback", void 0);
|
|
86
|
+
OxDataItemSpecEditorPopup = __decorate([
|
|
87
|
+
customElement('ox-data-item-spec-editor-popup')
|
|
88
|
+
], OxDataItemSpecEditorPopup);
|
|
89
|
+
export { OxDataItemSpecEditorPopup };
|
|
90
|
+
//# sourceMappingURL=ox-data-item-spec-editor-popup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-data-item-spec-editor-popup.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-data-item-spec-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,UAAU;IAwCvD,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAElC,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,cAAc,QAAQ,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;6BAIzE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AA9EQ,gCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAwC;AAtCxD,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CA+ErC;SA/EY,yBAAyB","sourcesContent":["import '../ox-data-item-spec.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataItem } from '../types.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-data-item-spec-editor-popup')\nexport class OxDataItemSpecEditorPopup extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n\n width: var(--overlay-center-normal-width, 50%);\n height: var(--overlay-center-normal-height, 50%);\n }\n\n ox-data-item-spec {\n flex: 1;\n overflow-y: auto;\n }\n\n span {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--primary-color);\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) dataItem?: DataItem\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n var dataItem = this.dataItem || {}\n\n return html`\n <ox-data-item-spec .value=${this.value} .dataItem=${dataItem} @change=${this.onChange.bind(this)}>\n </ox-data-item-spec>\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n => \n 이런 이유로, Object.assign(...)을 사용하였다.\n */\n this.value = e.detail\n }\n\n private onCancel(e: Event) {\n history.back()\n }\n\n private onConfirm(e: Event) {\n this.confirmCallback && this.confirmCallback(this.value)\n history.back()\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import './ox-data-item-spec-editor-popup.js';
|
|
5
|
+
import { ColumnConfig, GristRecord } from '@operato/data-grist';
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
export declare class OxDataItemSpecEditor extends LitElement {
|
|
8
|
+
static styles: import("lit").CSSResult;
|
|
9
|
+
value: any;
|
|
10
|
+
column: ColumnConfig;
|
|
11
|
+
record: GristRecord;
|
|
12
|
+
row: number;
|
|
13
|
+
field: any;
|
|
14
|
+
private popup?;
|
|
15
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
+
firstUpdated(): Promise<void>;
|
|
17
|
+
openSelector(): Promise<void>;
|
|
18
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import './ox-data-item-spec-editor-popup.js';
|
|
6
|
+
import { LitElement, css, html } from 'lit';
|
|
7
|
+
import { openPopup } from '@operato/layout';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { i18next } from '@operato/i18n';
|
|
10
|
+
let OxDataItemSpecEditor = class OxDataItemSpecEditor extends LitElement {
|
|
11
|
+
render() {
|
|
12
|
+
const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
|
|
13
|
+
return html ` ${value || ''} `;
|
|
14
|
+
}
|
|
15
|
+
async firstUpdated() {
|
|
16
|
+
await this.updateComplete;
|
|
17
|
+
this.renderRoot.addEventListener('click', e => {
|
|
18
|
+
e.stopPropagation();
|
|
19
|
+
this.openSelector();
|
|
20
|
+
});
|
|
21
|
+
this.openSelector();
|
|
22
|
+
}
|
|
23
|
+
async openSelector() {
|
|
24
|
+
if (this.popup) {
|
|
25
|
+
delete this.popup;
|
|
26
|
+
}
|
|
27
|
+
var { options } = this.column.record;
|
|
28
|
+
if (typeof options === 'function') {
|
|
29
|
+
options = await options.call(this, this.value, this.column, this.record, this.row, this.field);
|
|
30
|
+
}
|
|
31
|
+
const { name, help, objectified = false } = options;
|
|
32
|
+
const confirmCallback = (newval) => {
|
|
33
|
+
this.dispatchEvent(new CustomEvent('field-change', {
|
|
34
|
+
bubbles: true,
|
|
35
|
+
composed: true,
|
|
36
|
+
detail: {
|
|
37
|
+
before: this.value,
|
|
38
|
+
after: !objectified ? JSON.stringify(newval) : newval,
|
|
39
|
+
record: this.record,
|
|
40
|
+
column: this.column,
|
|
41
|
+
row: this.row
|
|
42
|
+
}
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
try {
|
|
46
|
+
var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
|
|
47
|
+
}
|
|
48
|
+
catch (e) {
|
|
49
|
+
var value = {};
|
|
50
|
+
}
|
|
51
|
+
/*
|
|
52
|
+
주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
|
|
53
|
+
layout의 구성에 변화가 발생하면, 다시 render된다.
|
|
54
|
+
이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
|
|
55
|
+
이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
|
|
56
|
+
만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
|
|
57
|
+
따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
|
|
58
|
+
*/
|
|
59
|
+
var template = html `
|
|
60
|
+
<ox-data-item-spec-editor-popup .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>
|
|
61
|
+
</ox-data-item-spec-editor-popup>
|
|
62
|
+
`;
|
|
63
|
+
this.popup = openPopup(template, {
|
|
64
|
+
backdrop: true,
|
|
65
|
+
size: 'large',
|
|
66
|
+
title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || ''} ${i18next.t('field.spec')}`,
|
|
67
|
+
help
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
OxDataItemSpecEditor.styles = css `
|
|
72
|
+
:host {
|
|
73
|
+
color: black;
|
|
74
|
+
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
text-overflow: ellipsis;
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
79
|
+
__decorate([
|
|
80
|
+
property({ type: Object })
|
|
81
|
+
], OxDataItemSpecEditor.prototype, "value", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
property({ type: Object })
|
|
84
|
+
], OxDataItemSpecEditor.prototype, "column", void 0);
|
|
85
|
+
__decorate([
|
|
86
|
+
property({ type: Object })
|
|
87
|
+
], OxDataItemSpecEditor.prototype, "record", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
property({ type: Number })
|
|
90
|
+
], OxDataItemSpecEditor.prototype, "row", void 0);
|
|
91
|
+
__decorate([
|
|
92
|
+
property({ type: Object })
|
|
93
|
+
], OxDataItemSpecEditor.prototype, "field", void 0);
|
|
94
|
+
OxDataItemSpecEditor = __decorate([
|
|
95
|
+
customElement('ox-data-item-spec-editor')
|
|
96
|
+
], OxDataItemSpecEditor);
|
|
97
|
+
export { OxDataItemSpecEditor };
|
|
98
|
+
//# sourceMappingURL=ox-data-item-spec-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-data-item-spec-editor.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-data-item-spec-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-data-item-spec-editor-popup.js'\n\nimport { ColumnConfig, GristRecord } from '@operato/data-grist'\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-data-item-spec-editor')\nexport class OxDataItemSpecEditor extends LitElement {\n static styles = css`\n :host {\n color: black;\n\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `\n\n @property({ type: Object }) value: any\n @property({ type: Object }) column!: ColumnConfig\n @property({ type: Object }) record!: GristRecord\n @property({ type: Number }) row!: number\n @property({ type: Object }) field!: any\n\n private popup?: PopupHandle\n\n render() {\n const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n return html` ${value || ''} `\n }\n\n async firstUpdated() {\n await this.updateComplete\n\n this.renderRoot.addEventListener('click', e => {\n e.stopPropagation()\n\n this.openSelector()\n })\n\n this.openSelector()\n }\n\n async openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n var { options } = this.column.record\n\n if (typeof options === 'function') {\n options = await options.call(this, this.value, this.column, this.record, this.row, this.field)\n }\n\n const { name, help, objectified = false } = options\n\n const confirmCallback = (newval: any) => {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: !objectified ? JSON.stringify(newval) : newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n try {\n var value: any = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value\n } catch (e) {\n var value: any = {}\n }\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n */\n var template = html`\n <ox-data-item-spec-editor-popup .value=${value} .dataItem=${this.record} .confirmCallback=${confirmCallback}>\n </ox-data-item-spec-editor-popup>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: `${name?.toUpperCase() || ''} ${i18next.t('field.spec')}`,\n help\n })\n }\n}\n"]}
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,YAAY,CAAA","sourcesContent":["export * from './ox-data-entry-form.js'\nexport * from './ox-data-item-spec.js'\nexport * from './types.js'\n"]}
|
|
@@ -1,28 +1,6 @@
|
|
|
1
1
|
import '@operato/input/ox-input-file.js';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
|
-
|
|
4
|
-
text: string;
|
|
5
|
-
value: string;
|
|
6
|
-
};
|
|
7
|
-
declare type SelectOptions = SelectOption[];
|
|
8
|
-
declare type TypeOptions = {
|
|
9
|
-
options?: SelectOptions;
|
|
10
|
-
[prop: string]: any;
|
|
11
|
-
};
|
|
12
|
-
export declare type DataItem = {
|
|
13
|
-
name: string;
|
|
14
|
-
description: string;
|
|
15
|
-
sequence: number;
|
|
16
|
-
tag: string;
|
|
17
|
-
type: string;
|
|
18
|
-
options: TypeOptions;
|
|
19
|
-
quota: number;
|
|
20
|
-
};
|
|
21
|
-
export declare type DataSet = {
|
|
22
|
-
name: string;
|
|
23
|
-
description: string;
|
|
24
|
-
dataItems: DataItem[];
|
|
25
|
-
};
|
|
3
|
+
import { DataSet } from './types.js';
|
|
26
4
|
export declare class OxDataEntryForm extends LitElement {
|
|
27
5
|
static styles: import("lit").CSSResult;
|
|
28
6
|
dataSet?: DataSet;
|
|
@@ -34,4 +12,3 @@ export declare class OxDataEntryForm extends LitElement {
|
|
|
34
12
|
private buildInputs;
|
|
35
13
|
private buildValue;
|
|
36
14
|
}
|
|
37
|
-
export {};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@operato/input/ox-input-file.js';
|
|
3
|
-
import { css, html
|
|
3
|
+
import { LitElement, css, html } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
let OxDataEntryForm = class OxDataEntryForm extends LitElement {
|
|
6
6
|
render() {
|
|
7
7
|
return html `<form @change=${(e) => this.onChange(e)}>${this.buildInputs()}</form>`;
|
|
8
8
|
}
|
|
9
9
|
onChange(e) {
|
|
10
|
-
|
|
10
|
+
this.value = this.buildValue();
|
|
11
11
|
this.dispatchEvent(new CustomEvent('change', {
|
|
12
12
|
bubbles: true,
|
|
13
13
|
composed: true,
|
|
14
|
-
detail: value
|
|
14
|
+
detail: this.value
|
|
15
15
|
}));
|
|
16
16
|
}
|
|
17
17
|
buildInputs() {
|
|
18
18
|
const dataItems = this.dataSet.dataItems;
|
|
19
19
|
return (dataItems || []).map(dataItem => {
|
|
20
|
-
const { name, description, tag, type, quota = 1, options = {} } = dataItem;
|
|
20
|
+
const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem;
|
|
21
21
|
const samples = new Array(quota).fill(0);
|
|
22
22
|
const value = this.value && this.value[tag];
|
|
23
23
|
const elements = samples.map((_, idx) => {
|
|
@@ -49,7 +49,7 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
return html ` <label .title=${description}>
|
|
52
|
-
<div name>${name}</div>
|
|
52
|
+
<div name>${name}${unit ? `(${unit})` : ''}</div>
|
|
53
53
|
<div elements>${elements}</div>
|
|
54
54
|
</label>`;
|
|
55
55
|
});
|
|
@@ -94,6 +94,7 @@ OxDataEntryForm.styles = css `
|
|
|
94
94
|
background-color: var(--main-section-background-color);
|
|
95
95
|
padding: var(--padding-default) 0;
|
|
96
96
|
}
|
|
97
|
+
|
|
97
98
|
div[name] {
|
|
98
99
|
grid-column: span 2 / auto;
|
|
99
100
|
font: var(--label-font);
|
|
@@ -118,6 +119,7 @@ OxDataEntryForm.styles = css `
|
|
|
118
119
|
padding: var(--input-field-padding);
|
|
119
120
|
font: var(--input-field-font);
|
|
120
121
|
}
|
|
122
|
+
|
|
121
123
|
@media only screen and (max-width: 460px) {
|
|
122
124
|
div[name] {
|
|
123
125
|
grid-column: span 3 / auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataSet } from './types.js'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: row;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n label {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n label:nth-child(even) {\n background-color: var(--main-section-background-color);\n padding: var(--padding-default) 0;\n }\n\n div[name] {\n grid-column: span 2 / auto;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n div[elements] {\n grid-column: span 10 / auto;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n div[elements] * {\n flex: 1;\n }\n div[elements] input,\n div[elements] select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n div[name] {\n grid-column: span 3 / auto;\n }\n div[elements] {\n grid-column: span 9 / auto;\n }\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n }\n\n private onChange(e: Event) {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n private buildInputs() {\n const dataItems = this.dataSet!.dataItems\n\n return (dataItems || []).map(dataItem => {\n const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n const samples = new Array(quota).fill(0)\n const value = this.value && this.value[tag]\n\n const elements = samples.map((_, idx) => {\n const v = quota <= 1 ? value : value instanceof Array ? value[idx] : undefined\n\n switch (type) {\n case 'select':\n return html` <select .name=${tag}>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n break\n\n case 'number':\n return html` <input type=\"number\" name=${tag} value=${v} />`\n break\n\n case 'file':\n return html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n ></ox-input-file>`\n\n case 'string':\n default:\n return html` <input type=\"string\" name=${tag} value=${v} />`\n }\n })\n\n return html` <label .title=${description}>\n <div name>${name}${unit ? `(${unit})` : ''}</div>\n <div elements>${elements}</div>\n </label>`\n })\n }\n\n private buildValue() {\n const dataItems = this.dataSet!.dataItems\n\n return (dataItems || []).reduce((sum, dataItem) => {\n const { tag, quota, type } = dataItem\n\n const editors = Array.prototype.slice.call(\n this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n ) as HTMLInputElement[]\n\n if (editors.length > 0) {\n sum[tag] =\n editors.length > 1\n ? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n : type === 'boolean'\n ? editors[0].checked\n : editors[0].value\n }\n\n return sum\n }, {} as { [tag: string]: any })\n }\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
2
|
+
import { DataItem, DataItemSpecSet, DataItemSpecSetProvider } from './types.js';
|
|
3
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
4
|
+
export declare class OxDataItemSpec extends LitElement {
|
|
5
|
+
static registry: {
|
|
6
|
+
[name: string]: DataItemSpecSetProvider;
|
|
7
|
+
};
|
|
8
|
+
static registerProvider(name: string, provider: DataItemSpecSetProvider): void;
|
|
9
|
+
static styles: import("lit").CSSResult;
|
|
10
|
+
value?: {
|
|
11
|
+
[specSetName: string]: any;
|
|
12
|
+
};
|
|
13
|
+
dataItem?: DataItem;
|
|
14
|
+
dataItemSpecSets: DataItemSpecSet[];
|
|
15
|
+
specSetViews: NodeListOf<HTMLElement & {
|
|
16
|
+
value: any;
|
|
17
|
+
}>;
|
|
18
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
19
|
+
updated(changes: PropertyValues<this>): void;
|
|
20
|
+
private onChange;
|
|
21
|
+
private buildValue;
|
|
22
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var OxDataItemSpec_1;
|
|
2
|
+
import { __decorate } from "tslib";
|
|
3
|
+
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
4
|
+
import { LitElement, css, html } from 'lit';
|
|
5
|
+
import { customElement, property, queryAll, state } from 'lit/decorators.js';
|
|
6
|
+
let OxDataItemSpec = OxDataItemSpec_1 = class OxDataItemSpec extends LitElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.dataItemSpecSets = [];
|
|
10
|
+
}
|
|
11
|
+
static registerProvider(name, provider) {
|
|
12
|
+
OxDataItemSpec_1.registry[name] = provider;
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
return html `<form @property-change=${(e) => this.onChange(e)}>
|
|
16
|
+
${this.dataItemSpecSets.map(({ name, description, specs }) => {
|
|
17
|
+
var _a;
|
|
18
|
+
return html ` <div>${name}</div>
|
|
19
|
+
<div>${description}</div>
|
|
20
|
+
<ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${(_a = this.value) === null || _a === void 0 ? void 0 : _a[name]}>
|
|
21
|
+
</ox-properties-dynamic-view>`;
|
|
22
|
+
})}
|
|
23
|
+
</form>`;
|
|
24
|
+
}
|
|
25
|
+
updated(changes) {
|
|
26
|
+
if (changes.has('dataItem')) {
|
|
27
|
+
this.dataItemSpecSets = Object.values(OxDataItemSpec_1.registry).map(provider => provider(this.dataItem));
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
onChange(e) {
|
|
31
|
+
this.value = this.buildValue();
|
|
32
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
33
|
+
bubbles: true,
|
|
34
|
+
composed: true,
|
|
35
|
+
detail: { ...this.value }
|
|
36
|
+
}));
|
|
37
|
+
}
|
|
38
|
+
buildValue() {
|
|
39
|
+
var value = {};
|
|
40
|
+
this.specSetViews.forEach(view => (value[view.getAttribute('data-name')] = view.value));
|
|
41
|
+
return value;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
OxDataItemSpec.registry = {};
|
|
45
|
+
OxDataItemSpec.styles = css `
|
|
46
|
+
:host {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: Object })
|
|
53
|
+
], OxDataItemSpec.prototype, "value", void 0);
|
|
54
|
+
__decorate([
|
|
55
|
+
property({ type: Object })
|
|
56
|
+
], OxDataItemSpec.prototype, "dataItem", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
state()
|
|
59
|
+
], OxDataItemSpec.prototype, "dataItemSpecSets", void 0);
|
|
60
|
+
__decorate([
|
|
61
|
+
queryAll('ox-properties-dynamic-view')
|
|
62
|
+
], OxDataItemSpec.prototype, "specSetViews", void 0);
|
|
63
|
+
OxDataItemSpec = OxDataItemSpec_1 = __decorate([
|
|
64
|
+
customElement('ox-data-item-spec')
|
|
65
|
+
], OxDataItemSpec);
|
|
66
|
+
export { OxDataItemSpec };
|
|
67
|
+
//# sourceMappingURL=ox-data-item-spec.js.map
|