@operato/app 1.0.0-alpha.4 → 1.0.0-alpha.40

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 (128) hide show
  1. package/@types/global/index.d.ts +2 -0
  2. package/CHANGELOG.md +236 -9
  3. package/demo/data-grist-test.html +456 -0
  4. package/dist/src/{grist → grist-editor}/index.d.ts +0 -0
  5. package/dist/src/grist-editor/index.js +26 -0
  6. package/dist/src/grist-editor/index.js.map +1 -0
  7. package/dist/src/grist-editor/ox-grist-editor-code.d.ts +7 -0
  8. package/dist/src/grist-editor/ox-grist-editor-code.js +56 -0
  9. package/dist/src/grist-editor/ox-grist-editor-code.js.map +1 -0
  10. package/dist/src/grist-editor/ox-grist-editor-crontab.d.ts +8 -0
  11. package/dist/src/grist-editor/ox-grist-editor-crontab.js +50 -0
  12. package/dist/src/grist-editor/ox-grist-editor-crontab.js.map +1 -0
  13. package/dist/src/grist-editor/ox-grist-editor-json.d.ts +7 -0
  14. package/dist/src/grist-editor/ox-grist-editor-json.js +54 -0
  15. package/dist/src/grist-editor/ox-grist-editor-json.js.map +1 -0
  16. package/dist/src/grist-editor/ox-grist-editor-parameters.d.ts +12 -0
  17. package/dist/src/grist-editor/ox-grist-editor-parameters.js +84 -0
  18. package/dist/src/grist-editor/ox-grist-editor-parameters.js.map +1 -0
  19. package/dist/src/grist-editor/ox-grist-editor-partition-keys.d.ts +11 -0
  20. package/dist/src/grist-editor/ox-grist-editor-partition-keys.js +74 -0
  21. package/dist/src/grist-editor/ox-grist-editor-partition-keys.js.map +1 -0
  22. package/dist/src/{grist/code-editor.d.ts → grist-editor/ox-grist-editor-resource-code.d.ts} +2 -2
  23. package/dist/src/{grist/code-editor.js → grist-editor/ox-grist-editor-resource-code.js} +10 -5
  24. package/dist/src/grist-editor/ox-grist-editor-resource-code.js.map +1 -0
  25. package/dist/src/grist-editor/ox-grist-editor-resource-id.d.ts +10 -0
  26. package/dist/src/{grist/id-input.js → grist-editor/ox-grist-editor-resource-id.js} +18 -67
  27. package/dist/src/grist-editor/ox-grist-editor-resource-id.js.map +1 -0
  28. package/dist/src/grist-editor/ox-grist-editor-resource-object.d.ts +11 -0
  29. package/dist/src/{grist/object-editor.js → grist-editor/ox-grist-editor-resource-object.js} +14 -64
  30. package/dist/src/grist-editor/ox-grist-editor-resource-object.js.map +1 -0
  31. package/dist/src/grist-editor/ox-grist-editor-value-map.d.ts +11 -0
  32. package/dist/src/grist-editor/ox-grist-editor-value-map.js +74 -0
  33. package/dist/src/grist-editor/ox-grist-editor-value-map.js.map +1 -0
  34. package/dist/src/grist-editor/ox-grist-renderer-resource-id.d.ts +2 -0
  35. package/dist/src/grist-editor/ox-grist-renderer-resource-id.js +9 -0
  36. package/dist/src/grist-editor/ox-grist-renderer-resource-id.js.map +1 -0
  37. package/dist/src/grist-editor/ox-grist-renderer-resource-object.d.ts +2 -0
  38. package/dist/src/grist-editor/ox-grist-renderer-resource-object.js +22 -0
  39. package/dist/src/grist-editor/ox-grist-renderer-resource-object.js.map +1 -0
  40. package/dist/src/grist-editor/ox-parameters-builder.d.ts +4 -0
  41. package/dist/src/grist-editor/ox-parameters-builder.js +118 -0
  42. package/dist/src/grist-editor/ox-parameters-builder.js.map +1 -0
  43. package/dist/src/grist-editor/ox-popup-code-input.d.ts +12 -0
  44. package/dist/src/grist-editor/ox-popup-code-input.js +71 -0
  45. package/dist/src/grist-editor/ox-popup-code-input.js.map +1 -0
  46. package/dist/src/grist-editor/ox-popup-crontab-input.d.ts +11 -0
  47. package/dist/src/grist-editor/ox-popup-crontab-input.js +74 -0
  48. package/dist/src/grist-editor/ox-popup-crontab-input.js.map +1 -0
  49. package/dist/src/grist-editor/ox-popup-parameters-builder.d.ts +13 -0
  50. package/dist/src/grist-editor/ox-popup-parameters-builder.js +111 -0
  51. package/dist/src/grist-editor/ox-popup-parameters-builder.js.map +1 -0
  52. package/dist/src/grist-editor/ox-popup-partition-keys-input.d.ts +12 -0
  53. package/dist/src/grist-editor/ox-popup-partition-keys-input.js +98 -0
  54. package/dist/src/grist-editor/ox-popup-partition-keys-input.js.map +1 -0
  55. package/dist/src/grist-editor/ox-popup-value-map-input.d.ts +12 -0
  56. package/dist/src/grist-editor/ox-popup-value-map-input.js +104 -0
  57. package/dist/src/grist-editor/ox-popup-value-map-input.js.map +1 -0
  58. package/dist/src/{grist/id-selector.d.ts → grist-editor/ox-selector-resource-id.d.ts} +1 -1
  59. package/dist/src/{grist/id-selector.js → grist-editor/ox-selector-resource-id.js} +15 -15
  60. package/dist/src/grist-editor/ox-selector-resource-id.js.map +1 -0
  61. package/dist/src/{grist/object-selector.d.ts → grist-editor/ox-selector-resource-object.d.ts} +1 -1
  62. package/dist/src/{grist/object-selector.js → grist-editor/ox-selector-resource-object.js} +21 -21
  63. package/dist/src/grist-editor/ox-selector-resource-object.js.map +1 -0
  64. package/dist/src/index.d.ts +3 -1
  65. package/dist/src/index.js +3 -1
  66. package/dist/src/index.js.map +1 -1
  67. package/dist/src/input/index.d.ts +3 -0
  68. package/dist/src/input/index.js +4 -0
  69. package/dist/src/input/index.js.map +1 -0
  70. package/dist/src/input/ox-input-background-pattern.d.ts +31 -0
  71. package/dist/src/input/ox-input-background-pattern.js +150 -0
  72. package/dist/src/input/ox-input-background-pattern.js.map +1 -0
  73. package/dist/src/input/ox-input-fill-style.d.ts +41 -0
  74. package/dist/src/input/ox-input-fill-style.js +325 -0
  75. package/dist/src/input/ox-input-fill-style.js.map +1 -0
  76. package/dist/src/input/ox-input-graphql.d.ts +36 -0
  77. package/dist/src/input/ox-input-graphql.js +161 -0
  78. package/dist/src/input/ox-input-graphql.js.map +1 -0
  79. package/dist/src/property-editor/index.d.ts +24 -0
  80. package/dist/src/property-editor/index.js +58 -0
  81. package/dist/src/property-editor/index.js.map +1 -0
  82. package/dist/src/property-editor/ox-property-editor-graphql.d.ts +5 -0
  83. package/dist/src/property-editor/ox-property-editor-graphql.js +15 -0
  84. package/dist/src/property-editor/ox-property-editor-graphql.js.map +1 -0
  85. package/dist/tsconfig.tsbuildinfo +1 -1
  86. package/package.json +42 -16
  87. package/src/grist-editor/index.ts +28 -0
  88. package/src/grist-editor/ox-grist-editor-code.ts +64 -0
  89. package/src/grist-editor/ox-grist-editor-crontab.ts +62 -0
  90. package/src/grist-editor/ox-grist-editor-json.ts +62 -0
  91. package/src/grist-editor/ox-grist-editor-parameters.ts +99 -0
  92. package/src/grist-editor/ox-grist-editor-partition-keys.ts +86 -0
  93. package/src/{grist/code-editor.ts → grist-editor/ox-grist-editor-resource-code.ts} +4 -5
  94. package/src/grist-editor/ox-grist-editor-resource-id.ts +83 -0
  95. package/src/{grist/object-editor.ts → grist-editor/ox-grist-editor-resource-object.ts} +11 -48
  96. package/src/grist-editor/ox-grist-editor-value-map.ts +86 -0
  97. package/src/{grist/id-renderer.ts → grist-editor/ox-grist-renderer-resource-id.ts} +4 -3
  98. package/src/grist-editor/ox-grist-renderer-resource-object.ts +26 -0
  99. package/src/grist-editor/ox-parameters-builder.ts +128 -0
  100. package/src/grist-editor/ox-popup-code-input.ts +65 -0
  101. package/src/grist-editor/ox-popup-crontab-input.ts +74 -0
  102. package/src/grist-editor/ox-popup-parameters-builder.ts +106 -0
  103. package/src/grist-editor/ox-popup-partition-keys-input.ts +95 -0
  104. package/src/grist-editor/ox-popup-value-map-input.ts +101 -0
  105. package/src/{grist/id-selector.ts → grist-editor/ox-selector-resource-id.ts} +2 -2
  106. package/src/{grist/object-selector.ts → grist-editor/ox-selector-resource-object.ts} +3 -3
  107. package/src/index.ts +3 -1
  108. package/src/input/index.ts +3 -0
  109. package/src/input/ox-input-background-pattern.ts +166 -0
  110. package/src/input/ox-input-fill-style.ts +359 -0
  111. package/src/input/ox-input-graphql.ts +169 -0
  112. package/src/property-editor/index.ts +59 -0
  113. package/src/property-editor/ox-property-editor-graphql.ts +12 -0
  114. package/yarn-error.log +17112 -0
  115. package/dist/src/grist/code-editor.js.map +0 -1
  116. package/dist/src/grist/id-input.d.ts +0 -19
  117. package/dist/src/grist/id-input.js.map +0 -1
  118. package/dist/src/grist/id-renderer.d.ts +0 -2
  119. package/dist/src/grist/id-renderer.js +0 -9
  120. package/dist/src/grist/id-renderer.js.map +0 -1
  121. package/dist/src/grist/id-selector.js.map +0 -1
  122. package/dist/src/grist/index.js +0 -9
  123. package/dist/src/grist/index.js.map +0 -1
  124. package/dist/src/grist/object-editor.d.ts +0 -18
  125. package/dist/src/grist/object-editor.js.map +0 -1
  126. package/dist/src/grist/object-selector.js.map +0 -1
  127. package/src/grist/id-input.ts +0 -135
  128. package/src/grist/index.ts +0 -11
@@ -0,0 +1,456 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" />
6
+ <style>
7
+ body {
8
+ /* box-sizing: border-box; */
9
+ margin: 0;
10
+ padding: 0;
11
+ overflow: hidden;
12
+
13
+ /* This is a font-stack that tries to use the system-default sans-serifs first */
14
+ font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
15
+ line-height: 1.5;
16
+ -webkit-font-smoothing: antialiased;
17
+ }
18
+
19
+ #app {
20
+ width: 100vw;
21
+ height: 100vh;
22
+
23
+ display: flex;
24
+ flex-direction: column;
25
+ }
26
+
27
+ #demo {
28
+ flex: 1;
29
+
30
+ display: flex;
31
+ flex-direction: column;
32
+ overflow: hidden;
33
+ }
34
+
35
+ grist-demo {
36
+ flex: 1;
37
+ overflow: auto;
38
+ }
39
+ </style>
40
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
41
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
42
+
43
+ <link href="/themes/app-theme.css" rel="stylesheet" />
44
+ <link href="/themes/oops-theme.css" rel="stylesheet" />
45
+ <link href="/themes/grist-theme.css" rel="stylesheet" />
46
+ </head>
47
+
48
+ <body>
49
+ <script type="module">
50
+ import { LitElement, html, css, render } from 'lit'
51
+ import '../dist/index.js'
52
+ import '../dist/src/filters/filters-form.js'
53
+ import '../dist/src/sorters/sorters-control.js'
54
+ import '../dist/src/record-view/record-creator.js'
55
+ import '@operato/popup/ox-popup-list.js'
56
+ import '@material/mwc-icon'
57
+ import { CommonGristStyles } from '@operato/styles'
58
+
59
+ const fetchHandler = async ({ page, limit, sorters = [] }) => {
60
+ var total = 120993
61
+ var start = (page - 1) * limit
62
+
63
+ await new Promise(resolve => setTimeout(resolve, 500))
64
+
65
+ return {
66
+ total,
67
+ records: Array(limit * page > total ? total % limit : limit)
68
+ .fill()
69
+ .map((item, idx) => {
70
+ return {
71
+ id: idx,
72
+ name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
73
+ description:
74
+ idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
75
+ email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
76
+ active: Math.round(Math.random() * 2) % 2 ? true : false,
77
+ barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
78
+ company:
79
+ idx % 2
80
+ ? {
81
+ id: '2',
82
+ name: 'HatioLAB',
83
+ description: `경기도 성남시-${start + idx + 1}`
84
+ }
85
+ : {
86
+ id: '3',
87
+ name: 'HatioSEA',
88
+ description: `말레이시아 세티아알람-${start + idx + 1}`
89
+ },
90
+ thumbnail:
91
+ idx % 4 === 0
92
+ ? '' /* no source */
93
+ : idx % 4 === 1
94
+ ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
95
+ : idx % 4 === 2
96
+ ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
97
+ : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
98
+ role: ['admin', 'worker', 'tester'][idx % 3],
99
+ color: idx % 2 ? `#87f018` : `#180f87`,
100
+ rate: Math.round(Math.random() * 100),
101
+ dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
102
+ dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
103
+ homepage:
104
+ idx % 2
105
+ ? `http://hatiolab.com/${start + idx + 1}`
106
+ : `http://deadpool.hatiolab.com/${start + idx + 1}`,
107
+ json5: {
108
+ abc: 'abc',
109
+ value: 123
110
+ },
111
+ createdAt: Date.now(),
112
+ updatedAt: Date.now()
113
+ }
114
+ })
115
+ }
116
+ }
117
+
118
+ const config = {
119
+ list: {
120
+ thumbnail: 'thumbnail',
121
+ fields: ['name', 'description'],
122
+ details: ['role', 'email']
123
+ },
124
+ columns: [
125
+ {
126
+ type: 'gutter',
127
+ gutterName: 'dirty'
128
+ },
129
+ {
130
+ type: 'gutter',
131
+ gutterName: 'sequence'
132
+ },
133
+ {
134
+ type: 'gutter',
135
+ gutterName: 'row-selector',
136
+ multiple: true
137
+ },
138
+ {
139
+ type: 'gutter',
140
+ gutterName: 'button',
141
+ icon: 'edit',
142
+ handlers: {
143
+ click: function () {
144
+ console.log('clicked')
145
+ }
146
+ }
147
+ },
148
+ {
149
+ type: 'gutter',
150
+ gutterName: 'button',
151
+ icon: 'add',
152
+ handlers: {
153
+ click: 'record-copy'
154
+ }
155
+ },
156
+ {
157
+ type: 'gutter',
158
+ gutterName: 'button',
159
+ icon: 'arrow_downward',
160
+ handlers: {
161
+ click: 'move-down'
162
+ }
163
+ },
164
+ {
165
+ type: 'string',
166
+ name: 'id',
167
+ hidden: true
168
+ },
169
+ {
170
+ type: 'link',
171
+ name: 'name',
172
+ label: true,
173
+ header: 'name',
174
+ record: {
175
+ editable: true,
176
+ options: {
177
+ // href: 'http://hatiolab.com',
178
+ href: function (column, record, rowIndex) {
179
+ return record['homepage']
180
+ },
181
+ target: '_blank'
182
+ }
183
+ },
184
+ filter: 'search',
185
+ sortable: true,
186
+ width: 120
187
+ },
188
+ {
189
+ type: 'string',
190
+ name: 'description',
191
+ header: 'description',
192
+ filter: 'search',
193
+ record: {
194
+ editable: true,
195
+ align: 'left'
196
+ },
197
+ width: 200,
198
+ handlers: {
199
+ click: (columns, data, column, record, rowIndex, target) => {
200
+ alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
201
+ }
202
+ }
203
+ },
204
+ {
205
+ type: 'email',
206
+ name: 'email',
207
+ label: true,
208
+ header: 'email',
209
+ record: {
210
+ editable: true
211
+ },
212
+ filter: 'search',
213
+ sortable: true,
214
+ width: 130,
215
+ validation: function (after, before, record, column) {
216
+ if (after.indexOf('@') == -1) {
217
+ document.dispatchEvent(
218
+ new CustomEvent('notify', {
219
+ detail: {
220
+ type: 'error',
221
+ message: `invalid value - ${after}`
222
+ }
223
+ })
224
+ )
225
+ return false
226
+ }
227
+ return true
228
+ }
229
+ },
230
+ {
231
+ type: 'boolean',
232
+ name: 'active',
233
+ header: 'active',
234
+ record: {
235
+ editable: true
236
+ },
237
+ filter: true,
238
+ handlers: {
239
+ dblclick: () => {
240
+ const grist = document.querySelector('ox-grist')
241
+ console.log(grist.dirtyRecords)
242
+ }
243
+ },
244
+ sortable: true,
245
+ width: 60
246
+ },
247
+ {
248
+ type: 'select',
249
+ name: 'role',
250
+ label: true,
251
+ header: 'role',
252
+ record: {
253
+ options: ['', 'admin', 'worker', 'tester'],
254
+ editable: true
255
+ },
256
+ filter: true,
257
+ sortable: true,
258
+ width: 120
259
+ },
260
+ {
261
+ type: 'color',
262
+ name: 'color',
263
+ header: 'color',
264
+ record: {
265
+ editable: true
266
+ },
267
+ sortable: true,
268
+ width: 50
269
+ },
270
+ {
271
+ type: 'float',
272
+ name: 'rate',
273
+ header: 'rate',
274
+ record: {
275
+ align: 'right',
276
+ editable: true
277
+ },
278
+ filter: 'between',
279
+ sortable: true,
280
+ width: 50
281
+ },
282
+ {
283
+ type: 'json5',
284
+ name: 'json5',
285
+ header: 'JSON5',
286
+ width: 200
287
+ },
288
+ {
289
+ type: 'image',
290
+ name: 'thumbnail',
291
+ header: 'thumbnail',
292
+ record: {
293
+ editable: true
294
+ }
295
+ },
296
+ {
297
+ type: 'datetime',
298
+ name: 'updatedAt',
299
+ header: 'updated at',
300
+ record: {
301
+ editable: true
302
+ },
303
+ filter: 'between',
304
+ sortable: true,
305
+ width: 180
306
+ },
307
+ {
308
+ type: 'datetime',
309
+ name: 'createdAt',
310
+ header: 'created at',
311
+ record: {
312
+ editable: false
313
+ },
314
+ sortable: true,
315
+ width: 180
316
+ }
317
+ ],
318
+ rows: {
319
+ selectable: {
320
+ multiple: true
321
+ },
322
+ handlers: {
323
+ click: 'select-row-toggle'
324
+ },
325
+ classifier: function (record, rowIndex) {
326
+ const rate = record['rate']
327
+ const emphasized =
328
+ rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
329
+ return {
330
+ emphasized
331
+ }
332
+ }
333
+ },
334
+ sorters: [
335
+ {
336
+ name: 'name',
337
+ desc: true
338
+ },
339
+ {
340
+ name: 'email'
341
+ }
342
+ ],
343
+ pagination: {
344
+ pages: [20, 30, 50, 100, 200]
345
+ }
346
+ }
347
+
348
+ class GristDemo extends LitElement {
349
+ static styles = [
350
+ CommonGristStyles,
351
+ css`
352
+ :host {
353
+ display: flex;
354
+ flex-direction: column;
355
+ }
356
+
357
+ #tailer {
358
+ display: flex;
359
+ flex-direction: row;
360
+ margin: 0 var(--margin-default);
361
+ }
362
+
363
+ #tailer a {
364
+ padding: 0 var(--padding-default) 0 var(--padding-default);
365
+ margin: 0 var(--margin-narrow);
366
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
367
+ font-size: var(--fontsize-default);
368
+ color: var(--primary-color);
369
+ }
370
+ `
371
+ ]
372
+
373
+ static get properties() {
374
+ return {
375
+ mode: String
376
+ }
377
+ }
378
+
379
+ get grist() {
380
+ return this.renderRoot.querySelector('ox-grist')
381
+ }
382
+
383
+ render() {
384
+ const mode = this.mode || 'CARD'
385
+
386
+ return html`
387
+ <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
388
+ <div id="filters" slot="headroom">
389
+ <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
390
+ </div>
391
+
392
+ <div slot="headroom" id="headroom">
393
+ <div id="tailer">
394
+ <a href="./report-test.html">Report Test</a>
395
+ <a
396
+ href="#"
397
+ @click=${() => {
398
+ this.renderRoot.querySelector('ox-grist').reset()
399
+ }}
400
+ >Reset</a
401
+ >
402
+ <a
403
+ href="#"
404
+ @click=${() => {
405
+ this.renderRoot.querySelector('ox-grist').fetch(true)
406
+ }}
407
+ >Fetch</a
408
+ >
409
+ </div>
410
+
411
+ <div id="sorters">
412
+ Sort
413
+ <mwc-icon
414
+ @click=${e => {
415
+ const target = e.currentTarget
416
+ this.renderRoot.querySelector('#sorter-control').open({
417
+ right: 0,
418
+ top: target.offsetTop + target.offsetHeight
419
+ })
420
+ }}
421
+ >expand_more</mwc-icon
422
+ >
423
+ <ox-popup id="sorter-control">
424
+ <ox-sorters-control> </ox-sorters-control>
425
+ </ox-popup>
426
+ </div>
427
+
428
+ <div id="modes">
429
+ <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
430
+ <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
431
+ <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
432
+ </div>
433
+
434
+ <ox-record-creator id="add" light-popup>
435
+ <button><mwc-icon>add</mwc-icon></button>
436
+ </ox-record-creator>
437
+
438
+ <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
439
+ </div>
440
+ </ox-grist>
441
+ `
442
+ }
443
+ }
444
+
445
+ customElements.define('grist-demo', GristDemo)
446
+
447
+ setTimeout(() => {
448
+ render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
449
+ })
450
+ </script>
451
+
452
+ <div id="app">
453
+ <div id="demo"></div>
454
+ </div>
455
+ </body>
456
+ </html>
File without changes
@@ -0,0 +1,26 @@
1
+ import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist';
2
+ import { OxGristEditorCrontab } from './ox-grist-editor-crontab.js';
3
+ import { OxGristEditorJson } from './ox-grist-editor-json.js';
4
+ import { OxGristEditorParameters } from './ox-grist-editor-parameters.js';
5
+ import { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js';
6
+ import { OxGristEditorResourceCode } from './ox-grist-editor-resource-code.js';
7
+ import { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js';
8
+ import { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js';
9
+ import { OxGristEditorValueMap } from './ox-grist-editor-value-map.js';
10
+ import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js';
11
+ import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js';
12
+ /* register grist renderer/editor for id */
13
+ registerEditor('resource-id', OxGristEditorResourceId);
14
+ registerEditor('resource-object', OxGristEditorResourceObject);
15
+ registerEditor('resource-code', OxGristEditorResourceCode);
16
+ registerEditor('parameters', OxGristEditorParameters);
17
+ registerEditor('value-map', OxGristEditorValueMap);
18
+ registerEditor('partition-keys', OxGristEditorPartitionKeys);
19
+ registerEditor('crontab', OxGristEditorCrontab);
20
+ registerEditor('json', OxGristEditorJson);
21
+ registerRenderer('resource-id', OxGristRendererResourceId);
22
+ registerRenderer('resource-object', OxGristRendererResourceObject);
23
+ registerRenderer('parameters', OxGristRendererJson5);
24
+ registerRenderer('value-map', OxGristRendererJson5);
25
+ registerRenderer('partition-keys', OxGristRendererJson5);
26
+ //# 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,oBAAoB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE5F,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAA;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AAEtF,2CAA2C;AAC3C,cAAc,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAA;AACtD,cAAc,CAAC,iBAAiB,EAAE,2BAA2B,CAAC,CAAA;AAC9D,cAAc,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAA;AAC1D,cAAc,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;AACrD,cAAc,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAA;AAClD,cAAc,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,CAAA;AAC5D,cAAc,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;AAC/C,cAAc,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEzC,gBAAgB,CAAC,aAAa,EAAE,yBAAyB,CAAC,CAAA;AAC1D,gBAAgB,CAAC,iBAAiB,EAAE,6BAA6B,CAAC,CAAA;AAClE,gBAAgB,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAA;AACpD,gBAAgB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;AACnD,gBAAgB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAA","sourcesContent":["import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { OxGristEditorCrontab } from './ox-grist-editor-crontab.js'\nimport { OxGristEditorJson } from './ox-grist-editor-json.js'\nimport { OxGristEditorParameters } from './ox-grist-editor-parameters.js'\nimport { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js'\nimport { OxGristEditorResourceCode } from './ox-grist-editor-resource-code.js'\nimport { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js'\nimport { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js'\nimport { OxGristEditorValueMap } from './ox-grist-editor-value-map.js'\nimport { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'\nimport { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'\n\n/* register grist renderer/editor for id */\nregisterEditor('resource-id', OxGristEditorResourceId)\nregisterEditor('resource-object', OxGristEditorResourceObject)\nregisterEditor('resource-code', OxGristEditorResourceCode)\nregisterEditor('parameters', OxGristEditorParameters)\nregisterEditor('value-map', OxGristEditorValueMap)\nregisterEditor('partition-keys', OxGristEditorPartitionKeys)\nregisterEditor('crontab', OxGristEditorCrontab)\nregisterEditor('json', OxGristEditorJson)\n\nregisterRenderer('resource-id', OxGristRendererResourceId)\nregisterRenderer('resource-object', OxGristRendererResourceObject)\nregisterRenderer('parameters', OxGristRendererJson5)\nregisterRenderer('value-map', OxGristRendererJson5)\nregisterRenderer('partition-keys', OxGristRendererJson5)\n"]}
@@ -0,0 +1,7 @@
1
+ import './ox-popup-code-input.js';
2
+ import { OxGristEditor } from '@operato/data-grist';
3
+ export declare class OxGristEditorCode extends OxGristEditor {
4
+ get editorTemplate(): import("lit-html").TemplateResult<1>;
5
+ firstUpdated(): Promise<void>;
6
+ showEditorPopup(): void;
7
+ }
@@ -0,0 +1,56 @@
1
+ import { __decorate } from "tslib";
2
+ import './ox-popup-code-input.js';
3
+ import { OxGristEditor } from '@operato/data-grist';
4
+ import { customElement } from 'lit/decorators.js';
5
+ import { html } from 'lit';
6
+ import { i18next } from '@operato/i18n';
7
+ import { openPopup } from '@operato/layout';
8
+ let OxGristEditorCode = class OxGristEditorCode extends OxGristEditor {
9
+ get editorTemplate() {
10
+ return html ` <input type="text" .value=${this.value || ''} /> `;
11
+ }
12
+ async firstUpdated() {
13
+ await this.updateComplete;
14
+ this.renderRoot.addEventListener('click', e => {
15
+ e.stopPropagation();
16
+ this.showEditorPopup();
17
+ });
18
+ this.showEditorPopup();
19
+ }
20
+ showEditorPopup() {
21
+ var _a;
22
+ var { mode } = ((_a = this.column.record) === null || _a === void 0 ? void 0 : _a.options) || {};
23
+ var change = (value) => {
24
+ this.dispatchEvent(new CustomEvent('change', {
25
+ bubbles: true,
26
+ composed: true,
27
+ detail: {
28
+ before: this.value,
29
+ after: value,
30
+ column: this.column,
31
+ record: this.record,
32
+ row: this.row
33
+ }
34
+ }));
35
+ };
36
+ var popup = openPopup(html `
37
+ <ox-popup-code-input
38
+ .value=${this.value}
39
+ mode=${mode}
40
+ @change=${(e) => {
41
+ change(e.detail.value);
42
+ popup.close();
43
+ }}
44
+ ></ox-popup-code-input>
45
+ `, {
46
+ backdrop: true,
47
+ title: i18next.t('title.setting schedule'),
48
+ help: 'data-grist/grist-editor/code'
49
+ });
50
+ }
51
+ };
52
+ OxGristEditorCode = __decorate([
53
+ customElement('ox-grist-editor-code')
54
+ ], OxGristEditorCode);
55
+ export { OxGristEditorCode };
56
+ //# sourceMappingURL=ox-grist-editor-code.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-grist-editor-code.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-editor-code.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG3C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,aAAa;IAClD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK,IAAI,EAAE,MAAM,CAAA;IACjE,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC5C,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAED,eAAe;;QACb,IAAI,EAAE,IAAI,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,MAAM,0CAAE,OAAO,KAAI,EAAE,CAAA;QAEhD,IAAI,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,KAAK;oBAClB,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAA;QAED,IAAI,KAAK,GAAG,SAAS,CACnB,IAAI,CAAA;;mBAES,IAAI,CAAC,KAAK;iBACZ,IAAI;oBACD,CAAC,CAAc,EAAE,EAAE;YAC3B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACtB,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;;OAEJ,EACD;YACE,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;YAC1C,IAAI,EAAE,8BAA8B;SACrC,CACF,CAAA;IACH,CAAC;CACF,CAAA;AAtDY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAsD7B;SAtDY,iBAAiB","sourcesContent":["import './ox-popup-code-input.js'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-grist-editor-code')\nexport class OxGristEditorCode extends OxGristEditor {\n get editorTemplate() {\n return html` <input type=\"text\" .value=${this.value || ''} /> `\n }\n\n async firstUpdated() {\n await this.updateComplete\n\n this.renderRoot.addEventListener('click', e => {\n e.stopPropagation()\n\n this.showEditorPopup()\n })\n\n this.showEditorPopup()\n }\n\n showEditorPopup() {\n var { mode } = this.column.record?.options || {}\n\n var change = (value: string) => {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: value,\n column: this.column,\n record: this.record,\n row: this.row\n }\n })\n )\n }\n\n var popup = openPopup(\n html`\n <ox-popup-code-input\n .value=${this.value}\n mode=${mode}\n @change=${(e: CustomEvent) => {\n change(e.detail.value)\n popup.close()\n }}\n ></ox-popup-code-input>\n `,\n {\n backdrop: true,\n title: i18next.t('title.setting schedule'),\n help: 'data-grist/grist-editor/code'\n }\n )\n }\n}\n"]}
@@ -0,0 +1,8 @@
1
+ import './ox-popup-crontab-input.js';
2
+ import { OxGristEditor } from '@operato/data-grist';
3
+ export declare class OxGristEditorCrontab extends OxGristEditor {
4
+ private popup?;
5
+ get editorTemplate(): import("lit-html").TemplateResult<1>;
6
+ firstUpdated(): Promise<void>;
7
+ showEditorPopup(): void;
8
+ }
@@ -0,0 +1,50 @@
1
+ import { __decorate } from "tslib";
2
+ import './ox-popup-crontab-input.js';
3
+ import { openPopup } from '@operato/layout';
4
+ import { OxGristEditor } from '@operato/data-grist';
5
+ import { customElement } from 'lit/decorators.js';
6
+ import { html } from 'lit';
7
+ import { i18next } from '@operato/i18n';
8
+ let OxGristEditorCrontab = class OxGristEditorCrontab extends OxGristEditor {
9
+ get editorTemplate() {
10
+ return html ` <input type="text" .value=${this.value || ''} /> `;
11
+ }
12
+ async firstUpdated() {
13
+ await this.updateComplete;
14
+ this.renderRoot.addEventListener('click', e => {
15
+ e.stopPropagation();
16
+ this.showEditorPopup();
17
+ });
18
+ this.showEditorPopup();
19
+ }
20
+ showEditorPopup() {
21
+ if (this.popup) {
22
+ delete this.popup;
23
+ }
24
+ const confirmCallback = (newval) => {
25
+ this.dispatchEvent(new CustomEvent('field-change', {
26
+ bubbles: true,
27
+ composed: true,
28
+ detail: {
29
+ before: this.value,
30
+ after: newval,
31
+ record: this.record,
32
+ column: this.column,
33
+ row: this.row
34
+ }
35
+ }));
36
+ };
37
+ this.popup = openPopup(html `
38
+ <ox-popup-crontab-input .value=${this.value} .confirmCallback=${confirmCallback}></ox-popup-crontab-input>
39
+ `, {
40
+ backdrop: true,
41
+ title: i18next.t('title.setting schedule'),
42
+ help: 'data-grist/grist-editor/crontab'
43
+ });
44
+ }
45
+ };
46
+ OxGristEditorCrontab = __decorate([
47
+ customElement('ox-grist-editor-crontab')
48
+ ], OxGristEditorCrontab);
49
+ export { OxGristEditorCrontab };
50
+ //# sourceMappingURL=ox-grist-editor-crontab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-grist-editor-crontab.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-editor-crontab.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAe,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,aAAa;IAGrD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK,IAAI,EAAE,MAAM,CAAA;IACjE,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC5C,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED,MAAM,eAAe,GAAG,CAAC,MAAW,EAAE,EAAE;YACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,KAAK;oBAClB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CACpB,IAAI,CAAA;yCAC+B,IAAI,CAAC,KAAK,qBAAqB,eAAe;OAChF,EACD;YACE,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;YAC1C,IAAI,EAAE,iCAAiC;SACxC,CACF,CAAA;IACH,CAAC;CACF,CAAA;AAnDY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAmDhC;SAnDY,oBAAoB","sourcesContent":["import './ox-popup-crontab-input.js'\n\nimport { PopupHandle, openPopup } from '@operato/layout'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-grist-editor-crontab')\nexport class OxGristEditorCrontab extends OxGristEditor {\n private popup?: PopupHandle\n\n get editorTemplate() {\n return html` <input type=\"text\" .value=${this.value || ''} /> `\n }\n\n async firstUpdated() {\n await this.updateComplete\n\n this.renderRoot.addEventListener('click', e => {\n e.stopPropagation()\n\n this.showEditorPopup()\n })\n\n this.showEditorPopup()\n }\n\n showEditorPopup() {\n if (this.popup) {\n delete this.popup\n }\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: newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n this.popup = openPopup(\n html`\n <ox-popup-crontab-input .value=${this.value} .confirmCallback=${confirmCallback}></ox-popup-crontab-input>\n `,\n {\n backdrop: true,\n title: i18next.t('title.setting schedule'),\n help: 'data-grist/grist-editor/crontab'\n }\n )\n }\n}\n"]}
@@ -0,0 +1,7 @@
1
+ import './ox-popup-code-input.js';
2
+ import { OxGristEditor } from '@operato/data-grist';
3
+ export declare class OxGristEditorJson extends OxGristEditor {
4
+ get editorTemplate(): import("lit-html").TemplateResult<1>;
5
+ firstUpdated(): Promise<void>;
6
+ showEditorPopup(): void;
7
+ }