@operato/data-grist 0.3.17 → 0.3.21

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.
Files changed (55) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/custom-elements.json +343 -336
  3. package/demo/data-grist-test.html +142 -85
  4. package/demo/index.html +60 -95
  5. package/dist/src/configure/column-builder.js +26 -2
  6. package/dist/src/configure/column-builder.js.map +1 -1
  7. package/dist/src/data-grid/data-grid-header.js +5 -3
  8. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  9. package/dist/src/data-grist.js +5 -0
  10. package/dist/src/data-grist.js.map +1 -1
  11. package/dist/src/filters/filter-checkbox.js +2 -2
  12. package/dist/src/filters/filter-checkbox.js.map +1 -1
  13. package/dist/src/filters/filter-input.js +1 -1
  14. package/dist/src/filters/filter-input.js.map +1 -1
  15. package/dist/src/filters/filter-range-date.js +1 -1
  16. package/dist/src/filters/filter-range-date.js.map +1 -1
  17. package/dist/src/filters/filter-range-number.js +1 -1
  18. package/dist/src/filters/filter-range-number.js.map +1 -1
  19. package/dist/src/filters/filter-select.js +2 -2
  20. package/dist/src/filters/filter-select.js.map +1 -1
  21. package/dist/src/filters/filters-form.d.ts +9 -5
  22. package/dist/src/filters/filters-form.js +63 -15
  23. package/dist/src/filters/filters-form.js.map +1 -1
  24. package/dist/src/record-view/record-view-body.js +4 -2
  25. package/dist/src/record-view/record-view-body.js.map +1 -1
  26. package/dist/src/sorters/sorters-control.js +22 -8
  27. package/dist/src/sorters/sorters-control.js.map +1 -1
  28. package/dist/src/types.d.ts +6 -3
  29. package/dist/src/types.js.map +1 -1
  30. package/dist/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +8 -8
  32. package/src/configure/column-builder.ts +29 -3
  33. package/src/data-grid/data-grid-header.ts +7 -5
  34. package/src/data-grist.ts +8 -0
  35. package/src/filters/filter-checkbox.ts +3 -2
  36. package/src/filters/filter-input.ts +3 -3
  37. package/src/filters/filter-range-date.ts +3 -3
  38. package/src/filters/filter-range-number.ts +3 -3
  39. package/src/filters/filter-select.ts +3 -2
  40. package/src/filters/filters-form.ts +77 -41
  41. package/src/record-view/record-view-body.ts +4 -2
  42. package/src/sorters/sorters-control.ts +22 -8
  43. package/src/types.ts +33 -30
  44. package/dist/src/editors/image-editor.d.ts +0 -9
  45. package/dist/src/editors/image-editor.js +0 -53
  46. package/dist/src/editors/image-editor.js.map +0 -1
  47. package/dist/src/editors/input-editors copy.d.ts +0 -75
  48. package/dist/src/editors/input-editors copy.js +0 -373
  49. package/dist/src/editors/input-editors copy.js.map +0 -1
  50. package/dist/src/record-view/record-creator copy.d.ts +0 -13
  51. package/dist/src/record-view/record-creator copy.js +0 -90
  52. package/dist/src/record-view/record-creator copy.js.map +0 -1
  53. package/dist/src/record-view/record-creator-backup.d.ts +0 -13
  54. package/dist/src/record-view/record-creator-backup.js +0 -90
  55. package/dist/src/record-view/record-creator-backup.js.map +0 -1
@@ -1,373 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { css, html, LitElement } from 'lit';
3
- import { customElement, property, query } from 'lit/decorators.js';
4
- import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
5
- const STYLE = css `
6
- :host {
7
- display: block;
8
-
9
- width: 100%;
10
- height: 100%;
11
-
12
- border: 0;
13
- background-color: transparent;
14
- }
15
-
16
- :host > * {
17
- display: block;
18
-
19
- width: 100%;
20
- height: 100%;
21
-
22
- border: 0;
23
- background-color: transparent;
24
-
25
- box-sizing: border-box;
26
-
27
- font-size: inherit;
28
- font-family: inherit;
29
- }
30
-
31
- :host > style {
32
- display: none;
33
- }
34
-
35
- :host > input[type='checkbox'] {
36
- width: initial;
37
- margin: auto;
38
- }
39
- input[type='checkbox'],
40
- input[type='radio'] {
41
- zoom: var(--grist-input-zoom);
42
- }
43
- *:focus {
44
- outline: none;
45
- }
46
-
47
- input[type='file'] {
48
- opacity: 0%;
49
- }
50
-
51
- @media screen and (max-width: 460px) {
52
- :host > * {
53
- border: initial;
54
- background-color: initial;
55
- }
56
- *:focus {
57
- outline: none;
58
- }
59
- }
60
- `;
61
- let InputEditor = class InputEditor extends LitElement {
62
- constructor() {
63
- super(...arguments);
64
- this.column = ZERO_COLUMN;
65
- this.record = ZERO_RECORD;
66
- }
67
- render() {
68
- return this.editorTemplate;
69
- }
70
- get editor() {
71
- return this.renderRoot.firstElementChild;
72
- }
73
- async firstUpdated() {
74
- this.renderRoot.addEventListener('change', this._onchange.bind(this));
75
- this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
76
- this.renderRoot.addEventListener('click', this._onclick.bind(this));
77
- this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
78
- const align = this.column.record.align;
79
- if (align) {
80
- this.style.textAlign = align;
81
- this.style.textAlignLast = align; /* for select */
82
- }
83
- const name = this.column.name || '';
84
- this.value = this._dirtyValue = this.formatForEditor(this.record[name]);
85
- this.focus();
86
- await this.updateComplete;
87
- this.select();
88
- }
89
- select() {
90
- var _a;
91
- if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
92
- return this.editor.select();
93
- }
94
- }
95
- focus() {
96
- var _a;
97
- (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
98
- }
99
- formatForEditor(value) {
100
- return value === undefined ? '' : value;
101
- }
102
- formatFromEditor(e) {
103
- return e.target.value;
104
- }
105
- _onfocusout() {
106
- if (this._dirtyValue !== this.value) {
107
- this.dispatchEvent(new CustomEvent('field-change', {
108
- bubbles: true,
109
- composed: true,
110
- detail: {
111
- before: this.value,
112
- after: this._dirtyValue,
113
- column: this.column,
114
- record: this.record,
115
- row: this.row
116
- }
117
- }));
118
- }
119
- }
120
- _onchange(e) {
121
- e.stopPropagation();
122
- this._dirtyValue = this.formatFromEditor(e);
123
- }
124
- _onclick(e) {
125
- e.stopPropagation();
126
- }
127
- _ondblclick(e) {
128
- e.stopPropagation();
129
- }
130
- get editorTemplate() {
131
- return html ``;
132
- }
133
- };
134
- InputEditor.styles = STYLE;
135
- __decorate([
136
- property({ type: Object })
137
- ], InputEditor.prototype, "value", void 0);
138
- __decorate([
139
- property({ type: Object })
140
- ], InputEditor.prototype, "column", void 0);
141
- __decorate([
142
- property({ type: Object })
143
- ], InputEditor.prototype, "record", void 0);
144
- __decorate([
145
- property({ type: Number })
146
- ], InputEditor.prototype, "rowIndex", void 0);
147
- __decorate([
148
- property({ type: Object })
149
- ], InputEditor.prototype, "field", void 0);
150
- __decorate([
151
- property({ type: Number })
152
- ], InputEditor.prototype, "row", void 0);
153
- InputEditor = __decorate([
154
- customElement('ox-input-editor')
155
- ], InputEditor);
156
- export { InputEditor };
157
- let TextInput = class TextInput extends InputEditor {
158
- get editorTemplate() {
159
- return html ` <input type="text" .value=${this.value} /> `;
160
- }
161
- };
162
- TextInput = __decorate([
163
- customElement('ox-text-input')
164
- ], TextInput);
165
- export { TextInput };
166
- let EmailInput = class EmailInput extends InputEditor {
167
- get editorTemplate() {
168
- return html ` <input type="email" .value=${this.value} /> `;
169
- }
170
- };
171
- EmailInput = __decorate([
172
- customElement('ox-email-input')
173
- ], EmailInput);
174
- export { EmailInput };
175
- let TelInput = class TelInput extends InputEditor {
176
- get editorTemplate() {
177
- return html ` <input type="tel" .value=${this.value} /> `;
178
- }
179
- };
180
- TelInput = __decorate([
181
- customElement('ox-tel-input')
182
- ], TelInput);
183
- export { TelInput };
184
- let NumberInput = class NumberInput extends InputEditor {
185
- formatFromEditor(e) {
186
- let value = e.target.value;
187
- switch (this.column.type) {
188
- case 'float':
189
- return Number.parseFloat(value);
190
- case 'integer':
191
- return Number.parseInt(value);
192
- default:
193
- return Number(value);
194
- }
195
- }
196
- get editorTemplate() {
197
- var { min = -Infinity, max = Infinity } = this.column.record.options || {};
198
- return html ` <input type="number" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `;
199
- }
200
- };
201
- NumberInput = __decorate([
202
- customElement('ox-number-input')
203
- ], NumberInput);
204
- export { NumberInput };
205
- let PasswordInput = class PasswordInput extends InputEditor {
206
- get editorTemplate() {
207
- return html ` <input type="password" .value=${this.value} /> `;
208
- }
209
- };
210
- PasswordInput = __decorate([
211
- customElement('ox-password-input')
212
- ], PasswordInput);
213
- export { PasswordInput };
214
- let DateInput = class DateInput extends InputEditor {
215
- get editorTemplate() {
216
- return html ` <input type="date" .value=${this.value} /> `;
217
- }
218
- };
219
- DateInput = __decorate([
220
- customElement('ox-date-input')
221
- ], DateInput);
222
- export { DateInput };
223
- let MonthInput = class MonthInput extends InputEditor {
224
- get editorTemplate() {
225
- return html ` <input type="month" .value=${this.value} /> `;
226
- }
227
- };
228
- MonthInput = __decorate([
229
- customElement('ox-month-input')
230
- ], MonthInput);
231
- export { MonthInput };
232
- let WeekInput = class WeekInput extends InputEditor {
233
- get editorTemplate() {
234
- return html ` <input type="week" .value=${this.value} /> `;
235
- }
236
- };
237
- WeekInput = __decorate([
238
- customElement('ox-week-input')
239
- ], WeekInput);
240
- export { WeekInput };
241
- let TimeInput = class TimeInput extends InputEditor {
242
- get editorTemplate() {
243
- return html ` <input type="time" .value=${this.value} /> `;
244
- }
245
- };
246
- TimeInput = __decorate([
247
- customElement('ox-time-input')
248
- ], TimeInput);
249
- export { TimeInput };
250
- let DateTimeInput = class DateTimeInput extends InputEditor {
251
- formatForEditor(timestamp) {
252
- if (!timestamp) {
253
- timestamp = Date.now();
254
- }
255
- var datetime = new Date(timestamp);
256
- var tzoffset = datetime.getTimezoneOffset() * 60000; //offset in milliseconds
257
- return new Date(timestamp - tzoffset).toISOString().slice(0, -1);
258
- }
259
- formatFromEditor(e) {
260
- var value = e.target.value;
261
- var datetime = new Date(value);
262
- return datetime.getTime();
263
- }
264
- get editorTemplate() {
265
- return html ` <input type="datetime-local" .value=${this.value} /> `;
266
- }
267
- };
268
- DateTimeInput = __decorate([
269
- customElement('ox-datetime-input')
270
- ], DateTimeInput);
271
- export { DateTimeInput };
272
- let ColorInput = class ColorInput extends InputEditor {
273
- get editorTemplate() {
274
- return html ` <input type="color" .value=${this.value} /> `;
275
- }
276
- };
277
- ColorInput = __decorate([
278
- customElement('ox-color-input')
279
- ], ColorInput);
280
- export { ColorInput };
281
- let CheckboxInput = class CheckboxInput extends InputEditor {
282
- formatFromEditor(e) {
283
- return e.target.checked;
284
- }
285
- get editorTemplate() {
286
- return html ` <input type="checkbox" .checked=${!!this.value} /> `;
287
- }
288
- };
289
- CheckboxInput = __decorate([
290
- customElement('ox-checkbox-input')
291
- ], CheckboxInput);
292
- export { CheckboxInput };
293
- let ImageInput = class ImageInput extends InputEditor {
294
- get editorTemplate() {
295
- return html `${this.value
296
- ? html `<span
297
- ><button
298
- @click=${() => {
299
- this.imageInput.dispatchEvent(new Event('change', {
300
- bubbles: true
301
- }));
302
- }}
303
- >
304
- X</button
305
- >${this.value.name || this.value}</span
306
- >`
307
- : ''} <input type="file" accept="image/*" /> `;
308
- }
309
- focus() {
310
- if (!this.value)
311
- this.imageInput.click();
312
- }
313
- _onchange(e) {
314
- e.stopPropagation();
315
- this._dirtyValue = this.formatFromEditor(e);
316
- this._onfocusout();
317
- }
318
- formatFromEditor(e) {
319
- var _a;
320
- // value가 image file object인지, image url인지 확인
321
- const input = e.target;
322
- if ((_a = input.files) === null || _a === void 0 ? void 0 : _a[0]) {
323
- return input.files[0];
324
- }
325
- else {
326
- return input.value;
327
- }
328
- }
329
- };
330
- __decorate([
331
- query('input[type=file]')
332
- ], ImageInput.prototype, "imageInput", void 0);
333
- ImageInput = __decorate([
334
- customElement('ox-image-input')
335
- ], ImageInput);
336
- export { ImageInput };
337
- let Select = class Select extends InputEditor {
338
- get editorTemplate() {
339
- var rowOptionField = this.record[this.column.record.rowOptionField || ''];
340
- var { options = [] } = rowOptionField ? rowOptionField : this.column.record;
341
- if (typeof options == 'function') {
342
- options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field);
343
- }
344
- options = options.map((option) => {
345
- switch (typeof option) {
346
- case 'string':
347
- return {
348
- display: option,
349
- value: option
350
- };
351
- case 'object':
352
- return {
353
- display: option.display,
354
- value: option.value
355
- };
356
- default:
357
- return option;
358
- }
359
- });
360
- return html `
361
- <select>
362
- ${options.map((option) => html `
363
- <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
364
- `)}
365
- </select>
366
- `;
367
- }
368
- };
369
- Select = __decorate([
370
- customElement('ox-select-input')
371
- ], Select);
372
- export { Select };
373
- //# sourceMappingURL=input-editors%20copy.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-editors copy.js","sourceRoot":"","sources":["../../../src/editors/input-editors copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst STYLE = css`\n :host {\n display: block;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n }\n\n :host > * {\n display: block;\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-input-editor')\nexport class InputEditor 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\n@customElement('ox-text-input')\nexport class TextInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"text\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-email-input')\nexport class EmailInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"email\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-tel-input')\nexport class TelInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"tel\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-number-input')\nexport class NumberInput extends InputEditor {\n formatFromEditor(e: Event) {\n let value = (e.target as HTMLInputElement).value\n\n switch (this.column.type) {\n case 'float':\n return Number.parseFloat(value)\n case 'integer':\n return Number.parseInt(value)\n default:\n return Number(value)\n }\n }\n\n get editorTemplate() {\n var { min = -Infinity, max = Infinity } = this.column.record.options || {}\n\n return html` <input type=\"number\" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `\n }\n}\n\n@customElement('ox-password-input')\nexport class PasswordInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"password\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-date-input')\nexport class DateInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"date\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-month-input')\nexport class MonthInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"month\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-week-input')\nexport class WeekInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"week\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-time-input')\nexport class TimeInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"time\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-datetime-input')\nexport class DateTimeInput extends InputEditor {\n formatForEditor(timestamp: any) {\n if (!timestamp) {\n timestamp = Date.now()\n }\n var datetime = new Date(timestamp)\n\n var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds\n\n return new Date(timestamp - tzoffset).toISOString().slice(0, -1)\n }\n\n formatFromEditor(e: Event) {\n var value = (e.target as HTMLInputElement).value\n var datetime = new Date(value)\n\n return datetime.getTime()\n }\n\n get editorTemplate() {\n return html` <input type=\"datetime-local\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-color-input')\nexport class ColorInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"color\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-checkbox-input')\nexport class CheckboxInput extends InputEditor {\n formatFromEditor(e: Event) {\n return (e.target as HTMLInputElement).checked\n }\n\n get editorTemplate() {\n return html` <input type=\"checkbox\" .checked=${!!this.value} /> `\n }\n}\n\n@customElement('ox-image-input')\nexport class ImageInput extends InputEditor {\n @query('input[type=file]') imageInput!: HTMLElement\n\n get editorTemplate() {\n return html`${this.value\n ? html`<span\n ><button\n @click=${() => {\n this.imageInput.dispatchEvent(\n new Event('change', {\n bubbles: true\n })\n )\n }}\n >\n X</button\n >${this.value.name || this.value}</span\n >`\n : ''} <input type=\"file\" accept=\"image/*\" /> `\n }\n\n focus() {\n if (!this.value) this.imageInput.click()\n }\n\n _onchange(e: Event) {\n e.stopPropagation()\n this._dirtyValue = this.formatFromEditor(e)\n this._onfocusout()\n }\n\n formatFromEditor(e: Event) {\n // value가 image file object인지, image url인지 확인\n const input = e.target as HTMLInputElement\n if (input.files?.[0]) {\n return input.files[0]\n } else {\n return input.value\n }\n }\n}\n\n@customElement('ox-select-input')\nexport class Select extends InputEditor {\n get editorTemplate() {\n var rowOptionField = this.record[this.column.record.rowOptionField || '']\n var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n if (typeof options == 'function') {\n options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n }\n\n options = options.map((option: any) => {\n switch (typeof option) {\n case 'string':\n return {\n display: option,\n value: option\n }\n case 'object':\n return {\n display: option.display,\n value: option.value\n }\n default:\n return option\n }\n })\n\n return html`\n <select>\n ${options.map(\n (option: any) => html`\n <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n `\n )}\n </select>\n `\n }\n}\n"]}
@@ -1,13 +0,0 @@
1
- import '@material/mwc-icon';
2
- import './record-view';
3
- import { LitElement } from 'lit';
4
- import { DataGrist } from '../data-grist';
5
- import { GristRecord } from '../types';
6
- export declare class RecordCreator extends LitElement {
7
- grist?: DataGrist;
8
- record: GristRecord;
9
- constructor();
10
- connectedCallback(): void;
11
- render(): import("lit-html").TemplateResult<1>;
12
- popupRecordView(): void;
13
- }
@@ -1,90 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@material/mwc-icon';
3
- import './record-view';
4
- import { html, LitElement } from 'lit';
5
- import { customElement, state } from 'lit/decorators.js';
6
- import { OxPopup } from '@operato/popup';
7
- let RecordCreator = class RecordCreator extends LitElement {
8
- constructor() {
9
- super();
10
- this.record = { __dirty__: '+' };
11
- this.addEventListener('click', (e) => {
12
- e.preventDefault();
13
- e.stopPropagation();
14
- this.popupRecordView();
15
- });
16
- }
17
- connectedCallback() {
18
- super.connectedCallback();
19
- this.grist = this.closest('ox-grist');
20
- }
21
- render() {
22
- return html `<slot></slot>`;
23
- }
24
- popupRecordView() {
25
- const config = this.grist.compiledConfig;
26
- var titleField = config.list.fields[0] || 'name';
27
- var title = this.record[titleField];
28
- const rowIndex = -1;
29
- var record = {};
30
- const columns = config.columns;
31
- /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
32
- if (typeof title == 'object') {
33
- var column = config.columns.find(column => column.name == titleField);
34
- title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, rowIndex, this);
35
- }
36
- var popup = OxPopup.open({
37
- template: html `
38
- <ox-record-view
39
- only-for-edit
40
- @field-change=${(e) => {
41
- const view = e.currentTarget;
42
- var { after, before, column, record, row } = e.detail;
43
- var validation = column.validation;
44
- if (validation && typeof validation == 'function') {
45
- if (!validation.call(this, after, before, record, column)) {
46
- return;
47
- }
48
- }
49
- view.record = {
50
- ...record,
51
- [column.name]: after
52
- };
53
- }}
54
- .config=${config}
55
- .columns=${columns}
56
- .record=${record}
57
- .rowIndex=${rowIndex}
58
- @reset=${(e) => {
59
- const view = e.currentTarget;
60
- view.record = {};
61
- }}
62
- @cancel=${(e) => {
63
- popup.close();
64
- }}
65
- @ok=${(e) => {
66
- popup.close();
67
- const view = e.currentTarget;
68
- this.dispatchEvent(new CustomEvent('ok', {
69
- bubbles: true,
70
- composed: true,
71
- detail: view.record
72
- }));
73
- }}
74
- ></ox-record-view>
75
- `,
76
- parent: document.body
77
- });
78
- }
79
- };
80
- __decorate([
81
- state()
82
- ], RecordCreator.prototype, "grist", void 0);
83
- __decorate([
84
- state()
85
- ], RecordCreator.prototype, "record", void 0);
86
- RecordCreator = __decorate([
87
- customElement('ox-record-creator')
88
- ], RecordCreator);
89
- export { RecordCreator };
90
- //# sourceMappingURL=record-creator%20copy.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"record-creator copy.js","sourceRoot":"","sources":["../../../src/record-view/record-creator copy.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { RecordView } from '.'\nimport { ColumnConfig } from '..'\nimport { DataGrist } from '../data-grist'\nimport { GristRecord } from '../types'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n @state() grist?: DataGrist\n\n @state() record: GristRecord = { __dirty__: '+' }\n\n constructor() {\n super()\n\n this.addEventListener('click', (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.popupRecordView()\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.grist = this.closest('ox-grist') as DataGrist\n }\n\n render() {\n return html`<slot></slot>`\n }\n\n popupRecordView() {\n const config = this.grist!.compiledConfig\n var titleField = config.list.fields[0] || 'name'\n var title = this.record[titleField]\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, record, rowIndex, this)\n }\n\n var popup = OxPopup.open({\n template: html`\n <ox-record-view\n only-for-edit\n @field-change=${(e: CustomEvent) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!validation.call(this, after, before, record, column)) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n }}\n .config=${config}\n .columns=${columns}\n .record=${record}\n .rowIndex=${rowIndex}\n @reset=${(e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n }}\n @cancel=${(e: Event) => {\n popup.close()\n }}\n @ok=${(e: Event) => {\n popup.close()\n\n const view = e.currentTarget as RecordView\n\n this.dispatchEvent(\n new CustomEvent('ok', {\n bubbles: true,\n composed: true,\n detail: view.record\n })\n )\n }}\n ></ox-record-view>\n `,\n parent: document.body\n })\n }\n}\n"]}
@@ -1,13 +0,0 @@
1
- import '@material/mwc-icon';
2
- import './record-view';
3
- import { LitElement } from 'lit';
4
- import { DataGrist } from '../data-grist';
5
- import { GristRecord } from '../types';
6
- export declare class RecordCreator extends LitElement {
7
- grist?: DataGrist;
8
- record: GristRecord;
9
- constructor();
10
- connectedCallback(): void;
11
- render(): import("lit-html").TemplateResult<1>;
12
- popupRecordView(): void;
13
- }
@@ -1,90 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@material/mwc-icon';
3
- import './record-view';
4
- import { html, LitElement } from 'lit';
5
- import { customElement, state } from 'lit/decorators.js';
6
- import { OxPopup } from '@operato/popup';
7
- let RecordCreator = class RecordCreator extends LitElement {
8
- constructor() {
9
- super();
10
- this.record = { __dirty__: '+' };
11
- this.addEventListener('click', (e) => {
12
- e.preventDefault();
13
- e.stopPropagation();
14
- this.popupRecordView();
15
- });
16
- }
17
- connectedCallback() {
18
- super.connectedCallback();
19
- this.grist = this.closest('ox-grist');
20
- }
21
- render() {
22
- return html `<slot></slot>`;
23
- }
24
- popupRecordView() {
25
- const config = this.grist.compiledConfig;
26
- var titleField = config.list.fields[0] || 'name';
27
- var title = this.record[titleField];
28
- const rowIndex = -1;
29
- var record = {};
30
- const columns = config.columns;
31
- /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
32
- if (typeof title == 'object') {
33
- var column = config.columns.find(column => column.name == titleField);
34
- title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, record, rowIndex, this);
35
- }
36
- var popup = OxPopup.open({
37
- template: html `
38
- <ox-record-view
39
- only-for-edit
40
- @field-change=${(e) => {
41
- const view = e.currentTarget;
42
- var { after, before, column, record, row } = e.detail;
43
- var validation = column.validation;
44
- if (validation && typeof validation == 'function') {
45
- if (!validation.call(this, after, before, record, column)) {
46
- return;
47
- }
48
- }
49
- view.record = {
50
- ...record,
51
- [column.name]: after
52
- };
53
- }}
54
- .config=${config}
55
- .columns=${columns}
56
- .record=${record}
57
- .rowIndex=${rowIndex}
58
- @reset=${(e) => {
59
- const view = e.currentTarget;
60
- view.record = {};
61
- }}
62
- @cancel=${(e) => {
63
- popup.close();
64
- }}
65
- @ok=${(e) => {
66
- popup.close();
67
- const view = e.currentTarget;
68
- this.dispatchEvent(new CustomEvent('ok', {
69
- bubbles: true,
70
- composed: true,
71
- detail: view.record
72
- }));
73
- }}
74
- ></ox-record-view>
75
- `,
76
- parent: document.body
77
- });
78
- }
79
- };
80
- __decorate([
81
- state()
82
- ], RecordCreator.prototype, "grist", void 0);
83
- __decorate([
84
- state()
85
- ], RecordCreator.prototype, "record", void 0);
86
- RecordCreator = __decorate([
87
- customElement('ox-record-creator')
88
- ], RecordCreator);
89
- export { RecordCreator };
90
- //# sourceMappingURL=record-creator-backup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"record-creator-backup.js","sourceRoot":"","sources":["../../../src/record-view/record-creator-backup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { RecordView } from '.'\nimport { ColumnConfig } from '..'\nimport { DataGrist } from '../data-grist'\nimport { GristRecord } from '../types'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n @state() grist?: DataGrist\n\n @state() record: GristRecord = { __dirty__: '+' }\n\n constructor() {\n super()\n\n this.addEventListener('click', (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.popupRecordView()\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.grist = this.closest('ox-grist') as DataGrist\n }\n\n render() {\n return html`<slot></slot>`\n }\n\n popupRecordView() {\n const config = this.grist!.compiledConfig\n var titleField = config.list.fields[0] || 'name'\n var title = this.record[titleField]\n const rowIndex = -1\n var record: GristRecord = {}\n const columns = config.columns\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, record, rowIndex, this)\n }\n\n var popup = OxPopup.open({\n template: html`\n <ox-record-view\n only-for-edit\n @field-change=${(e: CustomEvent) => {\n const view = e.currentTarget as RecordView\n\n var { after, before, column, record, row } = (e as CustomEvent).detail as {\n after: any\n before: any\n column: ColumnConfig\n record: GristRecord\n row: number\n }\n\n var validation = column.validation\n if (validation && typeof validation == 'function') {\n if (!validation.call(this, after, before, record, column)) {\n return\n }\n }\n\n view.record = {\n ...record,\n [column.name]: after\n }\n }}\n .config=${config}\n .columns=${columns}\n .record=${record}\n .rowIndex=${rowIndex}\n @reset=${(e: Event) => {\n const view = e.currentTarget as RecordView\n view.record = {}\n }}\n @cancel=${(e: Event) => {\n popup.close()\n }}\n @ok=${(e: Event) => {\n popup.close()\n\n const view = e.currentTarget as RecordView\n\n this.dispatchEvent(\n new CustomEvent('ok', {\n bubbles: true,\n composed: true,\n detail: view.record\n })\n )\n }}\n ></ox-record-view>\n `,\n parent: document.body\n })\n }\n}\n"]}