@operato/data-grist 0.4.3 → 0.4.6
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 +24 -0
- package/dist/src/editors/ox-grist-editor-checkbox.d.ts +5 -0
- package/dist/src/editors/ox-grist-editor-checkbox.js +17 -0
- package/dist/src/editors/ox-grist-editor-checkbox.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-color.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-color.js +14 -0
- package/dist/src/editors/ox-grist-editor-color.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-date.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-date.js +14 -0
- package/dist/src/editors/ox-grist-editor-date.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-dateTime.d.ts +6 -0
- package/dist/src/editors/ox-grist-editor-dateTime.js +27 -0
- package/dist/src/editors/ox-grist-editor-dateTime.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-email.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-email.js +14 -0
- package/dist/src/editors/ox-grist-editor-email.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-file.d.ts +5 -0
- package/dist/src/editors/ox-grist-editor-file.js +18 -0
- package/dist/src/editors/ox-grist-editor-file.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-image.d.ts +7 -0
- package/dist/src/editors/ox-grist-editor-image.js +31 -0
- package/dist/src/editors/ox-grist-editor-image.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-month.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-month.js +14 -0
- package/dist/src/editors/ox-grist-editor-month.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-number.d.ts +5 -0
- package/dist/src/editors/ox-grist-editor-number.js +26 -0
- package/dist/src/editors/ox-grist-editor-number.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-password.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-password.js +14 -0
- package/dist/src/editors/ox-grist-editor-password.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-select.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-select.js +41 -0
- package/dist/src/editors/ox-grist-editor-select.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-tel.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-tel.js +14 -0
- package/dist/src/editors/ox-grist-editor-tel.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-text.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-text.js +14 -0
- package/dist/src/editors/ox-grist-editor-text.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-time.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-time.js +14 -0
- package/dist/src/editors/ox-grist-editor-time.js.map +1 -0
- package/dist/src/editors/ox-grist-editor-week.d.ts +4 -0
- package/dist/src/editors/ox-grist-editor-week.js +14 -0
- package/dist/src/editors/ox-grist-editor-week.js.map +1 -0
- package/dist/src/editors/ox-grist-editor.d.ts +25 -0
- package/dist/src/editors/ox-grist-editor.js +159 -0
- package/dist/src/editors/ox-grist-editor.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-boolean.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-boolean.js +30 -0
- package/dist/src/renderers/ox-grist-renderer-boolean.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-color.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-color.js +12 -0
- package/dist/src/renderers/ox-grist-renderer-color.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-date.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-date.js +53 -0
- package/dist/src/renderers/ox-grist-renderer-date.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-file.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-file.js +15 -0
- package/dist/src/renderers/ox-grist-renderer-file.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-image.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-image.js +24 -0
- package/dist/src/renderers/ox-grist-renderer-image.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-json5.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-json5.js +27 -0
- package/dist/src/renderers/ox-grist-renderer-json5.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-link.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-link.js +12 -0
- package/dist/src/renderers/ox-grist-renderer-link.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-password.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-password.js +5 -0
- package/dist/src/renderers/ox-grist-renderer-password.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-progress.d.ts +5 -0
- package/dist/src/renderers/ox-grist-renderer-progress.js +46 -0
- package/dist/src/renderers/ox-grist-renderer-progress.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-select.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-select.js +20 -0
- package/dist/src/renderers/ox-grist-renderer-select.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer-text.d.ts +2 -0
- package/dist/src/renderers/ox-grist-renderer-text.js +17 -0
- package/dist/src/renderers/ox-grist-renderer-text.js.map +1 -0
- package/dist/src/renderers/ox-grist-renderer.d.ts +15 -0
- package/dist/src/renderers/ox-grist-renderer.js +48 -0
- package/dist/src/renderers/ox-grist-renderer.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/yarn-error.log +0 -17496
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, css, html } from 'lit';
|
|
3
|
+
import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
const STYLE = css `
|
|
6
|
+
:host {
|
|
7
|
+
display: flex;
|
|
8
|
+
|
|
9
|
+
align-items: center;
|
|
10
|
+
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
|
|
14
|
+
border: 0;
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:host > * {
|
|
19
|
+
display: flex;
|
|
20
|
+
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
|
|
24
|
+
border: 0;
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
|
|
29
|
+
font-size: inherit;
|
|
30
|
+
font-family: inherit;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host > style {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host > input[type='checkbox'] {
|
|
38
|
+
width: initial;
|
|
39
|
+
margin: auto;
|
|
40
|
+
}
|
|
41
|
+
input[type='checkbox'],
|
|
42
|
+
input[type='radio'] {
|
|
43
|
+
zoom: var(--grist-input-zoom);
|
|
44
|
+
}
|
|
45
|
+
*:focus {
|
|
46
|
+
outline: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
input[type='file'] {
|
|
50
|
+
opacity: 0%;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media screen and (max-width: 460px) {
|
|
54
|
+
:host > * {
|
|
55
|
+
border: initial;
|
|
56
|
+
background-color: initial;
|
|
57
|
+
}
|
|
58
|
+
*:focus {
|
|
59
|
+
outline: none;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
let OxGristEditor = class OxGristEditor extends LitElement {
|
|
64
|
+
constructor() {
|
|
65
|
+
super(...arguments);
|
|
66
|
+
this.column = ZERO_COLUMN;
|
|
67
|
+
this.record = ZERO_RECORD;
|
|
68
|
+
}
|
|
69
|
+
render() {
|
|
70
|
+
return this.editorTemplate;
|
|
71
|
+
}
|
|
72
|
+
get editor() {
|
|
73
|
+
return this.renderRoot.firstElementChild;
|
|
74
|
+
}
|
|
75
|
+
async firstUpdated() {
|
|
76
|
+
this.renderRoot.addEventListener('change', this._onchange.bind(this));
|
|
77
|
+
this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
|
|
78
|
+
this.renderRoot.addEventListener('click', this._onclick.bind(this));
|
|
79
|
+
this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
|
|
80
|
+
const align = this.column.record.align;
|
|
81
|
+
if (align) {
|
|
82
|
+
this.style.textAlign = align;
|
|
83
|
+
this.style.textAlignLast = align; /* for select */
|
|
84
|
+
}
|
|
85
|
+
const name = this.column.name || '';
|
|
86
|
+
this.value = this._dirtyValue = this.formatForEditor(this.record[name]);
|
|
87
|
+
this.focus();
|
|
88
|
+
await this.updateComplete;
|
|
89
|
+
this.select();
|
|
90
|
+
}
|
|
91
|
+
select() {
|
|
92
|
+
var _a;
|
|
93
|
+
if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
|
|
94
|
+
return this.editor.select();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
focus() {
|
|
98
|
+
var _a;
|
|
99
|
+
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
|
|
100
|
+
}
|
|
101
|
+
formatForEditor(value) {
|
|
102
|
+
return value === undefined ? '' : value;
|
|
103
|
+
}
|
|
104
|
+
formatFromEditor(e) {
|
|
105
|
+
return e.target.value;
|
|
106
|
+
}
|
|
107
|
+
_onfocusout() {
|
|
108
|
+
if (this._dirtyValue !== this.value) {
|
|
109
|
+
this.dispatchEvent(new CustomEvent('field-change', {
|
|
110
|
+
bubbles: true,
|
|
111
|
+
composed: true,
|
|
112
|
+
detail: {
|
|
113
|
+
before: this.value,
|
|
114
|
+
after: this._dirtyValue,
|
|
115
|
+
column: this.column,
|
|
116
|
+
record: this.record,
|
|
117
|
+
row: this.row
|
|
118
|
+
}
|
|
119
|
+
}));
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
_onchange(e) {
|
|
123
|
+
e.stopPropagation();
|
|
124
|
+
this._dirtyValue = this.formatFromEditor(e);
|
|
125
|
+
}
|
|
126
|
+
_onclick(e) {
|
|
127
|
+
e.stopPropagation();
|
|
128
|
+
}
|
|
129
|
+
_ondblclick(e) {
|
|
130
|
+
e.stopPropagation();
|
|
131
|
+
}
|
|
132
|
+
get editorTemplate() {
|
|
133
|
+
return html ``;
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
OxGristEditor.styles = STYLE;
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Object })
|
|
139
|
+
], OxGristEditor.prototype, "value", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
property({ type: Object })
|
|
142
|
+
], OxGristEditor.prototype, "column", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
property({ type: Object })
|
|
145
|
+
], OxGristEditor.prototype, "record", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
property({ type: Number })
|
|
148
|
+
], OxGristEditor.prototype, "rowIndex", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
property({ type: Object })
|
|
151
|
+
], OxGristEditor.prototype, "field", void 0);
|
|
152
|
+
__decorate([
|
|
153
|
+
property({ type: Number })
|
|
154
|
+
], OxGristEditor.prototype, "row", void 0);
|
|
155
|
+
OxGristEditor = __decorate([
|
|
156
|
+
customElement('ox-grist-editor')
|
|
157
|
+
], OxGristEditor);
|
|
158
|
+
export { OxGristEditor };
|
|
159
|
+
//# sourceMappingURL=ox-grist-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\nconst STYLE = css`\n :host {\n display: flex;\n\n align-items: center;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n }\n\n :host > * {\n display: flex;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n box-sizing: border-box;\n\n font-size: inherit;\n font-family: inherit;\n }\n\n :host > style {\n display: none;\n }\n\n :host > input[type='checkbox'] {\n width: initial;\n margin: auto;\n }\n input[type='checkbox'],\n input[type='radio'] {\n zoom: var(--grist-input-zoom);\n }\n *:focus {\n outline: none;\n }\n\n input[type='file'] {\n opacity: 0%;\n }\n\n @media screen and (max-width: 460px) {\n :host > * {\n border: initial;\n background-color: initial;\n }\n *:focus {\n outline: none;\n }\n }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n static styles = STYLE\n\n @property({ type: Object }) value?: any\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex?: number\n @property({ type: Object }) field?: DataGridField\n @property({ type: Number }) row?: number\n\n protected _dirtyValue?: any\n\n render() {\n return this.editorTemplate\n }\n\n get editor(): HTMLElement | null {\n return this.renderRoot.firstElementChild as HTMLElement\n }\n\n async firstUpdated() {\n this.renderRoot.addEventListener('change', this._onchange.bind(this))\n this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n this.renderRoot.addEventListener('click', this._onclick.bind(this))\n this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n const align = this.column.record.align\n if (align) {\n this.style.textAlign = align\n this.style.textAlignLast = align /* for select */\n }\n\n const name = this.column.name || ''\n this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n this.focus()\n await this.updateComplete\n this.select()\n }\n\n select() {\n if ((this.editor as HTMLInputElement)?.select) {\n return (this.editor as HTMLInputElement).select()\n }\n }\n\n focus() {\n this.editor?.focus()\n }\n\n formatForEditor(value: any): any {\n return value === undefined ? '' : value\n }\n\n formatFromEditor(e: Event): any {\n return (e.target as HTMLInputElement).value\n }\n\n _onfocusout() {\n if (this._dirtyValue !== this.value) {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: this._dirtyValue,\n column: this.column,\n record: this.record,\n row: this.row\n }\n })\n )\n }\n }\n\n _onchange(e: Event): void {\n e.stopPropagation()\n\n this._dirtyValue = this.formatFromEditor(e)\n }\n\n _onclick(e: Event): void {\n e.stopPropagation()\n }\n\n _ondblclick(e: Event): void {\n e.stopPropagation()\n }\n\n get editorTemplate() {\n return html``\n }\n}\n"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
export const OxGristRendererBoolean = (value, column, record, rowIndex, field) => {
|
|
3
|
+
return html `
|
|
4
|
+
<input
|
|
5
|
+
type="checkbox"
|
|
6
|
+
.checked=${!!value}
|
|
7
|
+
?disabled=${!column.record.editable}
|
|
8
|
+
@click=${(e) => {
|
|
9
|
+
/*
|
|
10
|
+
* 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.
|
|
11
|
+
* checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.
|
|
12
|
+
*
|
|
13
|
+
* 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.
|
|
14
|
+
*/
|
|
15
|
+
field.dispatchEvent(new CustomEvent('field-change', {
|
|
16
|
+
bubbles: true,
|
|
17
|
+
composed: true,
|
|
18
|
+
detail: {
|
|
19
|
+
before: value,
|
|
20
|
+
after: e.target.checked,
|
|
21
|
+
column: column,
|
|
22
|
+
record: record,
|
|
23
|
+
row: rowIndex
|
|
24
|
+
}
|
|
25
|
+
}));
|
|
26
|
+
}}
|
|
27
|
+
/>
|
|
28
|
+
`;
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=ox-grist-renderer-boolean.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-boolean.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-boolean.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,OAAO,IAAI,CAAA;;;iBAGI,CAAC,CAAC,KAAK;kBACN,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ;eAC1B,CAAC,CAAQ,EAAE,EAAE;QACpB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {\n return html`\n <input\n type=\"checkbox\"\n .checked=${!!value}\n ?disabled=${!column.record.editable}\n @click=${(e: Event) => {\n /*\n * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n *\n * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n */\n field.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: value,\n after: (e.target as HTMLInputElement).checked,\n column: column,\n record: record,\n row: rowIndex\n }\n })\n )\n }}\n />\n `\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
export const OxGristRendererColor = (value, column, record, rowIndex, field) => {
|
|
3
|
+
value = value === undefined ? '#000' : value;
|
|
4
|
+
return html `
|
|
5
|
+
<div
|
|
6
|
+
style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};"
|
|
7
|
+
>
|
|
8
|
+
<p>${value}</p>
|
|
9
|
+
</div>
|
|
10
|
+
`;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=ox-grist-renderer-color.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-color.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-color.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAE5C,OAAO,IAAI,CAAA;;8GAEiG,KAAK;;WAExG,KAAK;;GAEb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererColor: FieldRenderer = (value, column, record, rowIndex, field) => {\n value = value === undefined ? '#000' : value\n\n return html`\n <div\n style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};\"\n >\n <p>${value}</p>\n </div>\n `\n}\n"]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
|
|
3
|
+
const DATETIME_OPTIONS = {
|
|
4
|
+
year: 'numeric',
|
|
5
|
+
month: 'numeric',
|
|
6
|
+
day: 'numeric',
|
|
7
|
+
hour: 'numeric',
|
|
8
|
+
minute: 'numeric',
|
|
9
|
+
second: 'numeric',
|
|
10
|
+
hour12: false
|
|
11
|
+
};
|
|
12
|
+
const DATE_OPTIONS = {
|
|
13
|
+
year: 'numeric',
|
|
14
|
+
month: 'numeric',
|
|
15
|
+
day: 'numeric'
|
|
16
|
+
};
|
|
17
|
+
const TIME_OPTIONS = {
|
|
18
|
+
hour: 'numeric',
|
|
19
|
+
minute: 'numeric',
|
|
20
|
+
second: 'numeric'
|
|
21
|
+
};
|
|
22
|
+
const OPTIONS = {
|
|
23
|
+
datetime: DATETIME_OPTIONS,
|
|
24
|
+
time: TIME_OPTIONS,
|
|
25
|
+
date: DATE_OPTIONS
|
|
26
|
+
};
|
|
27
|
+
function getsec(time) {
|
|
28
|
+
var arr = time.split(':');
|
|
29
|
+
return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0);
|
|
30
|
+
}
|
|
31
|
+
/*
|
|
32
|
+
TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다.
|
|
33
|
+
따라서, 이 경우는 타임존에 대한 처리가 불필요하다.
|
|
34
|
+
*/
|
|
35
|
+
export const OxGristRendererDate = (value, column, record, rowIndex, field) => {
|
|
36
|
+
if (!value) {
|
|
37
|
+
return '';
|
|
38
|
+
}
|
|
39
|
+
if (!isNaN(Number(value)))
|
|
40
|
+
value = Number(value);
|
|
41
|
+
var options = column.record.options || OPTIONS[column.type];
|
|
42
|
+
var formatter = new Intl.DateTimeFormat(navigator.language, options);
|
|
43
|
+
switch (column.type) {
|
|
44
|
+
case 'datetime':
|
|
45
|
+
case 'date':
|
|
46
|
+
value = formatter.format(new Date(value));
|
|
47
|
+
break;
|
|
48
|
+
case 'time':
|
|
49
|
+
default:
|
|
50
|
+
}
|
|
51
|
+
return html `<span>${value}</span>`;
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=ox-grist-renderer-date.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-date.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-date.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,kCAAkC;AAClC,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;CACf,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,gBAAgB;IAC1B,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED,SAAS,MAAM,CAAC,IAAY;IAC1B,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACzB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AAC5E,CAAC;AAED;;;EAGE;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAAE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEhD,IAAI,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAoC,CAAC,CAAA;IAC3F,IAAI,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAEpE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,UAAU,CAAC;QAChB,KAAK,MAAM;YACT,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;YACzC,MAAK;QACP,KAAK,MAAM,CAAC;QACZ,QAAQ;KACT;IAED,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst DATETIME_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n}\n\nconst DATE_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric'\n}\n\nconst TIME_OPTIONS = {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n}\n\nconst OPTIONS = {\n datetime: DATETIME_OPTIONS,\n time: TIME_OPTIONS,\n date: DATE_OPTIONS\n}\n\nfunction getsec(time: string): number {\n var arr = time.split(':')\n return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0)\n}\n\n/* \n TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다. \n 따라서, 이 경우는 타임존에 대한 처리가 불필요하다.\n*/\nexport const OxGristRendererDate: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n\n if (!isNaN(Number(value))) value = Number(value)\n\n var options = column.record.options || OPTIONS[column.type as 'datetime' | 'date' | 'time']\n var formatter = new Intl.DateTimeFormat(navigator.language, options)\n\n switch (column.type) {\n case 'datetime':\n case 'date':\n value = formatter.format(new Date(value))\n break\n case 'time':\n default:\n }\n\n return html`<span>${value}</span>`\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
export const OxGristRendererFile = (value, column, record, rowIndex, field) => {
|
|
3
|
+
let text;
|
|
4
|
+
if (!value) {
|
|
5
|
+
text = '';
|
|
6
|
+
}
|
|
7
|
+
else if (typeof value === 'string') {
|
|
8
|
+
text = value;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
text = value[0].name;
|
|
12
|
+
}
|
|
13
|
+
return html `<span>${text}</span>`;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=ox-grist-renderer-file.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-file.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-file.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,IAAY,CAAA;IAEhB,IAAI,CAAC,KAAK,EAAE;QACV,IAAI,GAAG,EAAE,CAAA;KACV;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,IAAI,GAAG,KAAK,CAAA;KACb;SAAM;QACL,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;KACrB;IAED,OAAO,IAAI,CAAA,SAAS,IAAI,SAAS,CAAA;AACnC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererFile: FieldRenderer = (value, column, record, rowIndex, field) => {\n let text: string\n\n if (!value) {\n text = ''\n } else if (typeof value === 'string') {\n text = value\n } else {\n text = value[0].name\n }\n\n return html`<span>${text}</span>`\n}\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href;
|
|
3
|
+
export const OxGristRendererImage = (value, column, record, rowIndex, field) => {
|
|
4
|
+
let src;
|
|
5
|
+
if (!value) {
|
|
6
|
+
src = IMAGE_FALLBACK;
|
|
7
|
+
}
|
|
8
|
+
else if (typeof value === 'string') {
|
|
9
|
+
src = value;
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
src = URL.createObjectURL(value);
|
|
13
|
+
requestAnimationFrame(() => URL.revokeObjectURL(src));
|
|
14
|
+
}
|
|
15
|
+
const { width, height } = column.record.options || {};
|
|
16
|
+
return html ` <img
|
|
17
|
+
src=${src}
|
|
18
|
+
width=${width}
|
|
19
|
+
height=${height}
|
|
20
|
+
style="object-fit: contain; max-width: 100%;"
|
|
21
|
+
onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
|
|
22
|
+
/>`;
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=ox-grist-renderer-image.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-image.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-image.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3F,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,IAAI,GAAW,CAAA;IAEf,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,GAAG,cAAc,CAAA;KACrB;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA;UACH,GAAG;YACD,KAAK;aACJ,MAAM;;6BAEU,cAAc,qBAAqB,cAAc;KACzE,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nconst IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href\n\nexport const OxGristRendererImage: FieldRenderer = (value, column, record, rowIndex, field) => {\n let src: string\n\n if (!value) {\n src = IMAGE_FALLBACK\n } else if (typeof value === 'string') {\n src = value\n } else {\n src = URL.createObjectURL(value)\n requestAnimationFrame(() => URL.revokeObjectURL(src))\n }\n\n const { width, height } = column.record.options || {}\n\n return html` <img\n src=${src}\n width=${width}\n height=${height}\n style=\"object-fit: contain; max-width: 100%;\"\n onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\n />`\n}\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import JSON5 from 'json5';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
function onmouseover(e) {
|
|
4
|
+
const element = e.target;
|
|
5
|
+
var parsed;
|
|
6
|
+
try {
|
|
7
|
+
parsed = JSON5.parse(element.textContent);
|
|
8
|
+
}
|
|
9
|
+
catch (_a) { }
|
|
10
|
+
element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2));
|
|
11
|
+
}
|
|
12
|
+
function onmouseout(e) {
|
|
13
|
+
const element = e.target;
|
|
14
|
+
element.removeAttribute('data-tooltip');
|
|
15
|
+
}
|
|
16
|
+
export const OxGristRendererJson5 = (value, column, record, rowIndex, field) => {
|
|
17
|
+
var parsed = value;
|
|
18
|
+
if (typeof value === 'string') {
|
|
19
|
+
try {
|
|
20
|
+
parsed = JSON5.parse(value);
|
|
21
|
+
}
|
|
22
|
+
catch (_a) { }
|
|
23
|
+
}
|
|
24
|
+
const text = parsed === undefined || parsed === null ? '' : JSON5.stringify(parsed);
|
|
25
|
+
return html `<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`;
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=ox-grist-renderer-json5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-json5.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-json5.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAwB,CAAA;IAC1C,IAAI,MAAM,CAAA;IACV,IAAI;QACF,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3C;IAAC,WAAM,GAAE;IAEV,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;AACxE,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAwB,CAAA;IAC1C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,IAAI,MAAM,GAAQ,KAAK,CAAA;IAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,IAAI;YACF,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;SAC5B;QAAC,WAAM,GAAE;KACX;IAED,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACnF,OAAO,IAAI,CAAA,mBAAmB,WAAW,cAAc,UAAU,IAAI,IAAI,QAAQ,CAAA;AACnF,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport JSON5 from 'json5'\nimport { html } from 'lit'\n\nfunction onmouseover(e: Event) {\n const element = e.target as HTMLPreElement\n var parsed\n try {\n parsed = JSON5.parse(element.textContent!)\n } catch {}\n\n element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))\n}\n\nfunction onmouseout(e: Event) {\n const element = e.target as HTMLPreElement\n element.removeAttribute('data-tooltip')\n}\n\nexport const OxGristRendererJson5: FieldRenderer = (value, column, record, rowIndex, field) => {\n var parsed: any = value\n\n if (typeof value === 'string') {\n try {\n parsed = JSON5.parse(value)\n } catch {}\n }\n\n const text = parsed === undefined || parsed === null ? '' : JSON5.stringify(parsed)\n return html`<pre @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</pre>`\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
export const OxGristRendererLink = (value, column, record, rowIndex, field) => {
|
|
3
|
+
var { href, target } = column.record.options || {};
|
|
4
|
+
value = value === undefined ? '' : value;
|
|
5
|
+
if (typeof href == 'function') {
|
|
6
|
+
href = href(value, column, record, rowIndex, field);
|
|
7
|
+
}
|
|
8
|
+
return target
|
|
9
|
+
? html ` <a style="text-decoration:none;color:inherit" href=${href || value} target=${target}>${value}</a> `
|
|
10
|
+
: html ` <a style="text-decoration:none;color:inherit" href=${href || value}>${value}</a> `;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=ox-grist-renderer-link.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-link.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-link.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAElD,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACpD;IAED,OAAO,MAAM;QACX,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,OAAO;QAC3G,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,CAAA;AAC9F,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const OxGristRendererLink: FieldRenderer = (value, column, record, rowIndex, field) => {\n var { href, target } = column.record.options || {}\n\n value = value === undefined ? '' : value\n\n if (typeof href == 'function') {\n href = href(value, column, record, rowIndex, field)\n }\n\n return target\n ? html` <a style=\"text-decoration:none;color:inherit\" href=${href || value} target=${target}>${value}</a> `\n : html` <a style=\"text-decoration:none;color:inherit\" href=${href || value}>${value}</a> `\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-password.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-password.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,uBAAuB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC/F,OAAO,IAAI,CAAA,uBAAuB,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererPassword: FieldRenderer = (value, column, record, rowIndex, field) => {\n return html`<span>********</span>`\n}\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import { OxGristRenderer } from './ox-grist-renderer';
|
|
5
|
+
let OxGristRendererProgress = class OxGristRendererProgress extends OxGristRenderer {
|
|
6
|
+
get rendererTemplate() {
|
|
7
|
+
var { min = 0, max = 100 } = this.column.record.options || {};
|
|
8
|
+
var value = Number(this.value);
|
|
9
|
+
var progress = isNaN(value) ? 0 : Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)));
|
|
10
|
+
return html `
|
|
11
|
+
<div id="border"></div>
|
|
12
|
+
<div id="bar" style="width:${progress}%"> ${progress}</div>
|
|
13
|
+
`;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
OxGristRendererProgress.styles = css `
|
|
17
|
+
:host {
|
|
18
|
+
display: block;
|
|
19
|
+
position: relative;
|
|
20
|
+
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
#border {
|
|
25
|
+
display: block;
|
|
26
|
+
position: absolute;
|
|
27
|
+
|
|
28
|
+
height: 100%;
|
|
29
|
+
width: 100%;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
|
|
32
|
+
border: var(--grist-input-progress-border);
|
|
33
|
+
background-color: var(--grist-input-progress-background);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#bar {
|
|
37
|
+
background-color: var(--grist-input-progress-bar-background);
|
|
38
|
+
text-align: left;
|
|
39
|
+
color: var(--grist-input-progress-bar-color);
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
OxGristRendererProgress = __decorate([
|
|
43
|
+
customElement('ox-grist-progress-renderer')
|
|
44
|
+
], OxGristRendererProgress);
|
|
45
|
+
export { OxGristRendererProgress };
|
|
46
|
+
//# sourceMappingURL=ox-grist-renderer-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-progress.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAGrD,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,eAAe;IA4B1D,IAAI,gBAAgB;QAClB,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAC7D,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9B,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QAEjG,OAAO,IAAI,CAAA;;mCAEoB,QAAQ,YAAY,QAAQ;KAC1D,CAAA;IACH,CAAC;CACF,CAAA;AArCQ,8BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,CAAA;AA1BU,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAsCnC;SAtCY,uBAAuB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxGristRenderer } from './ox-grist-renderer'\n\n@customElement('ox-grist-progress-renderer')\nexport class OxGristRendererProgress extends OxGristRenderer {\n static styles = css`\n :host {\n display: block;\n position: relative;\n\n width: 100%;\n }\n\n #border {\n display: block;\n position: absolute;\n\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n border: var(--grist-input-progress-border);\n background-color: var(--grist-input-progress-background);\n }\n\n #bar {\n background-color: var(--grist-input-progress-bar-background);\n text-align: left;\n color: var(--grist-input-progress-bar-color);\n }\n `\n\n get rendererTemplate() {\n var { min = 0, max = 100 } = this.column.record.options || {}\n var value = Number(this.value)\n var progress = isNaN(value) ? 0 : Math.min(100, Math.max(0, ((value - min) * 100) / (max - min)))\n\n return html`\n <div id=\"border\"></div>\n <div id=\"bar\" style=\"width:${progress}%\"> ${progress}</div>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
export const OxGristRendererSelect = (value, column, record, rowIndex, field) => {
|
|
3
|
+
if (!value) {
|
|
4
|
+
return '';
|
|
5
|
+
}
|
|
6
|
+
var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField];
|
|
7
|
+
var options = (rowOptionField === null || rowOptionField === void 0 ? void 0 : rowOptionField.options) ? rowOptionField.options : column.record.options;
|
|
8
|
+
if (!options) {
|
|
9
|
+
console.error(`options value for select '${column.name}' column is mandatory.`);
|
|
10
|
+
}
|
|
11
|
+
else if (typeof options == 'function') {
|
|
12
|
+
options = options.call(null, value, column, record, rowIndex, field);
|
|
13
|
+
}
|
|
14
|
+
var res = options ? options.filter((option) => option.value == value) : [];
|
|
15
|
+
if (res.length) {
|
|
16
|
+
return html `<span>${res[0].display}</span>`;
|
|
17
|
+
}
|
|
18
|
+
return html `<span>${value}</span>`;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=ox-grist-renderer-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-select.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,qBAAqB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC7F,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IACD,IAAI,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IACzF,IAAI,OAAO,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,EAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;IAEtF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,6BAA6B,MAAM,CAAC,IAAI,wBAAwB,CAAC,CAAA;KAChF;SAAM,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE;QACvC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACrE;IAED,IAAI,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/E,IAAI,GAAG,CAAC,MAAM,EAAE;QACd,OAAO,IAAI,CAAA,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,SAAS,CAAA;KAC5C;IACD,OAAO,IAAI,CAAA,SAAS,KAAK,SAAS,CAAA;AACpC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nexport const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]\n var options = rowOptionField?.options ? rowOptionField.options : column.record.options\n\n if (!options) {\n console.error(`options value for select '${column.name}' column is mandatory.`)\n } else if (typeof options == 'function') {\n options = options.call(null, value, column, record, rowIndex, field)\n }\n\n var res = options ? options.filter((option: any) => option.value == value) : []\n if (res.length) {\n return html`<span>${res[0].display}</span>`\n }\n return html`<span>${value}</span>`\n}\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { detectOverflow } from '@operato/utils';
|
|
3
|
+
function onmouseover(e) {
|
|
4
|
+
const element = e.target;
|
|
5
|
+
if (detectOverflow(element)) {
|
|
6
|
+
element.setAttribute('data-tooltip', element.textContent);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
function onmouseout(e) {
|
|
10
|
+
const element = e.target;
|
|
11
|
+
element.removeAttribute('data-tooltip');
|
|
12
|
+
}
|
|
13
|
+
export const OxGristRendererText = (value, column, record, rowIndex, field) => {
|
|
14
|
+
const text = value === undefined ? '' : value;
|
|
15
|
+
return html `<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=ox-grist-renderer-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-grist-renderer-text.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAI/C,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3D;AACH,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC3F,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAC7C,OAAO,IAAI,CAAA,oBAAoB,WAAW,cAAc,UAAU,IAAI,IAAI,SAAS,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { detectOverflow } from '@operato/utils'\n\nimport { FieldRenderer } from '../types'\n\nfunction onmouseover(e: Event) {\n const element = e.target as HTMLSpanElement\n if (detectOverflow(element)) {\n element.setAttribute('data-tooltip', element.textContent!)\n }\n}\n\nfunction onmouseout(e: Event) {\n const element = e.target as HTMLSpanElement\n element.removeAttribute('data-tooltip')\n}\n\nexport const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {\n const text = value === undefined ? '' : value\n return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ColumnConfig, GristRecord } from '../types';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { DataGridField } from '../data-grid/data-grid-field';
|
|
4
|
+
export declare class OxGristRenderer extends LitElement {
|
|
5
|
+
static styles: import("lit").CSSResult;
|
|
6
|
+
value?: any;
|
|
7
|
+
column: ColumnConfig;
|
|
8
|
+
record: GristRecord;
|
|
9
|
+
rowIndex?: number;
|
|
10
|
+
field?: DataGridField;
|
|
11
|
+
row?: number;
|
|
12
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
13
|
+
firstUpdated(): Promise<void>;
|
|
14
|
+
get rendererTemplate(): import("lit-html").TemplateResult<1>;
|
|
15
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, css, html } from 'lit';
|
|
3
|
+
import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
const STYLE = css ``;
|
|
6
|
+
let OxGristRenderer = class OxGristRenderer extends LitElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.column = ZERO_COLUMN;
|
|
10
|
+
this.record = ZERO_RECORD;
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
13
|
+
return this.rendererTemplate;
|
|
14
|
+
}
|
|
15
|
+
async firstUpdated() {
|
|
16
|
+
const align = this.column.record.align;
|
|
17
|
+
if (align) {
|
|
18
|
+
this.style.textAlign = align;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
get rendererTemplate() {
|
|
22
|
+
return html ``;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
OxGristRenderer.styles = STYLE;
|
|
26
|
+
__decorate([
|
|
27
|
+
property({ type: Object })
|
|
28
|
+
], OxGristRenderer.prototype, "value", void 0);
|
|
29
|
+
__decorate([
|
|
30
|
+
property({ type: Object })
|
|
31
|
+
], OxGristRenderer.prototype, "column", void 0);
|
|
32
|
+
__decorate([
|
|
33
|
+
property({ type: Object })
|
|
34
|
+
], OxGristRenderer.prototype, "record", void 0);
|
|
35
|
+
__decorate([
|
|
36
|
+
property({ type: Number })
|
|
37
|
+
], OxGristRenderer.prototype, "rowIndex", void 0);
|
|
38
|
+
__decorate([
|
|
39
|
+
property({ type: Object })
|
|
40
|
+
], OxGristRenderer.prototype, "field", void 0);
|
|
41
|
+
__decorate([
|
|
42
|
+
property({ type: Number })
|
|
43
|
+
], OxGristRenderer.prototype, "row", void 0);
|
|
44
|
+
OxGristRenderer = __decorate([
|
|
45
|
+
customElement('ox-grist-renderer')
|
|
46
|
+
], OxGristRenderer);
|
|
47
|
+
export { OxGristRenderer };
|
|
48
|
+
//# sourceMappingURL=ox-grist-renderer.js.map
|