@operato/data-grist 0.3.15 → 0.3.19

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 (170) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/assets/images/no-image.png +0 -0
  3. package/custom-elements.json +1345 -770
  4. package/demo/data-grist-test.html +142 -85
  5. package/demo/index.html +62 -129
  6. package/dist/src/configure/column-builder.js +26 -2
  7. package/dist/src/configure/column-builder.js.map +1 -1
  8. package/dist/src/data-card/data-card.d.ts +3 -6
  9. package/dist/src/data-card/data-card.js +3 -131
  10. package/dist/src/data-card/data-card.js.map +1 -1
  11. package/dist/src/data-card/record-card.d.ts +0 -3
  12. package/dist/src/data-card/record-card.js +7 -62
  13. package/dist/src/data-card/record-card.js.map +1 -1
  14. package/dist/src/data-grid/data-grid-body.d.ts +7 -1
  15. package/dist/src/data-grid/data-grid-body.js +26 -5
  16. package/dist/src/data-grid/data-grid-body.js.map +1 -1
  17. package/dist/src/data-grid/data-grid-field.js +1 -1
  18. package/dist/src/data-grid/data-grid-field.js.map +1 -1
  19. package/dist/src/data-grid/data-grid-header.d.ts +1 -0
  20. package/dist/src/data-grid/data-grid-header.js +14 -4
  21. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  22. package/dist/src/data-grid/data-grid.d.ts +8 -4
  23. package/dist/src/data-grid/data-grid.js +12 -132
  24. package/dist/src/data-grid/data-grid.js.map +1 -1
  25. package/dist/src/data-grist.d.ts +1 -0
  26. package/dist/src/data-grist.js +8 -0
  27. package/dist/src/data-grist.js.map +1 -1
  28. package/dist/src/data-list/data-list.d.ts +3 -6
  29. package/dist/src/data-list/data-list.js +3 -131
  30. package/dist/src/data-list/data-list.js.map +1 -1
  31. package/dist/src/data-list/record-partial.d.ts +0 -2
  32. package/dist/src/data-list/record-partial.js +7 -58
  33. package/dist/src/data-list/record-partial.js.map +1 -1
  34. package/dist/src/data-manipulator.d.ts +20 -0
  35. package/dist/src/data-manipulator.js +148 -0
  36. package/dist/src/data-manipulator.js.map +1 -0
  37. package/dist/src/editors/image-input.d.ts +7 -0
  38. package/dist/src/editors/image-input.js +31 -0
  39. package/dist/src/editors/image-input.js.map +1 -0
  40. package/dist/src/editors/index.d.ts +1 -0
  41. package/dist/src/editors/index.js +1 -0
  42. package/dist/src/editors/index.js.map +1 -1
  43. package/dist/src/editors/input-editors.d.ts +1 -8
  44. package/dist/src/editors/input-editors.js +3 -47
  45. package/dist/src/editors/input-editors.js.map +1 -1
  46. package/dist/src/editors/registry.js +2 -1
  47. package/dist/src/editors/registry.js.map +1 -1
  48. package/dist/src/filters/filter-checkbox.js +2 -2
  49. package/dist/src/filters/filter-checkbox.js.map +1 -1
  50. package/dist/src/filters/filter-input.js +1 -1
  51. package/dist/src/filters/filter-input.js.map +1 -1
  52. package/dist/src/filters/filter-range-date.js +1 -1
  53. package/dist/src/filters/filter-range-date.js.map +1 -1
  54. package/dist/src/filters/filter-range-number.js +1 -1
  55. package/dist/src/filters/filter-range-number.js.map +1 -1
  56. package/dist/src/filters/filter-select.js +2 -2
  57. package/dist/src/filters/filter-select.js.map +1 -1
  58. package/dist/src/filters/filters-form.d.ts +9 -5
  59. package/dist/src/filters/filters-form.js +63 -15
  60. package/dist/src/filters/filters-form.js.map +1 -1
  61. package/dist/src/handlers/record-view-handler.d.ts +1 -2
  62. package/dist/src/handlers/record-view-handler.js +5 -35
  63. package/dist/src/handlers/record-view-handler.js.map +1 -1
  64. package/dist/src/handlers/select-row-toggle.d.ts +1 -1
  65. package/dist/src/handlers/select-row-toggle.js.map +1 -1
  66. package/dist/src/record-view/event-handlers/record-view-body-click-handler.d.ts +7 -0
  67. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js +24 -0
  68. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map +1 -0
  69. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.d.ts +7 -0
  70. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js +22 -0
  71. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map +1 -0
  72. package/dist/src/record-view/index.d.ts +1 -0
  73. package/dist/src/record-view/index.js +1 -0
  74. package/dist/src/record-view/index.js.map +1 -1
  75. package/dist/src/record-view/record-creator.d.ts +16 -0
  76. package/dist/src/record-view/record-creator.js +145 -0
  77. package/dist/src/record-view/record-creator.js.map +1 -0
  78. package/dist/src/record-view/record-view-body.d.ts +3 -4
  79. package/dist/src/record-view/record-view-body.js +19 -41
  80. package/dist/src/record-view/record-view-body.js.map +1 -1
  81. package/dist/src/record-view/record-view-handler.d.ts +9 -0
  82. package/dist/src/record-view/record-view-handler.js +57 -0
  83. package/dist/src/record-view/record-view-handler.js.map +1 -0
  84. package/dist/src/record-view/record-view.d.ts +4 -3
  85. package/dist/src/record-view/record-view.js +20 -55
  86. package/dist/src/record-view/record-view.js.map +1 -1
  87. package/dist/src/sorters/sorters-control.d.ts +12 -0
  88. package/dist/src/sorters/sorters-control.js +120 -0
  89. package/dist/src/sorters/sorters-control.js.map +1 -0
  90. package/dist/src/types.d.ts +7 -4
  91. package/dist/src/types.js.map +1 -1
  92. package/dist/tsconfig.tsbuildinfo +1 -1
  93. package/package.json +10 -8
  94. package/src/configure/column-builder.ts +29 -3
  95. package/src/data-card/data-card.ts +4 -158
  96. package/src/data-card/record-card.ts +14 -78
  97. package/src/data-grid/data-grid-body.ts +43 -6
  98. package/src/data-grid/data-grid-field.ts +1 -1
  99. package/src/data-grid/data-grid-header.ts +18 -6
  100. package/src/data-grid/data-grid.ts +25 -143
  101. package/src/data-grist.ts +12 -0
  102. package/src/data-list/data-list.ts +4 -158
  103. package/src/data-list/record-partial.ts +14 -73
  104. package/src/data-manipulator.ts +201 -0
  105. package/src/editors/image-input.ts +29 -0
  106. package/src/editors/index.ts +1 -0
  107. package/src/editors/input-editors.ts +5 -48
  108. package/src/editors/registry.ts +1 -1
  109. package/src/filters/filter-checkbox.ts +3 -2
  110. package/src/filters/filter-input.ts +3 -3
  111. package/src/filters/filter-range-date.ts +3 -3
  112. package/src/filters/filter-range-number.ts +3 -3
  113. package/src/filters/filter-select.ts +3 -2
  114. package/src/filters/filters-form.ts +77 -41
  115. package/src/handlers/record-view-handler.ts +8 -44
  116. package/src/handlers/select-row-toggle.ts +1 -2
  117. package/src/record-view/event-handlers/record-view-body-click-handler.ts +30 -0
  118. package/src/record-view/event-handlers/record-view-body-keydown-handler.ts +26 -0
  119. package/src/record-view/index.ts +1 -0
  120. package/src/record-view/record-creator.ts +180 -0
  121. package/src/record-view/record-view-body.ts +20 -54
  122. package/src/record-view/record-view-handler.ts +86 -0
  123. package/src/record-view/record-view.ts +21 -55
  124. package/src/sorters/sorters-control.ts +125 -0
  125. package/src/types.ts +42 -31
  126. package/dist/src/data-card/event-handlers/data-card-click-handler.d.ts +0 -6
  127. package/dist/src/data-card/event-handlers/data-card-click-handler.js +0 -16
  128. package/dist/src/data-card/event-handlers/data-card-click-handler.js.map +0 -1
  129. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.d.ts +0 -6
  130. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js +0 -16
  131. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js.map +0 -1
  132. package/dist/src/data-list/event-handlers/data-list-click-handler.d.ts +0 -6
  133. package/dist/src/data-list/event-handlers/data-list-click-handler.js +0 -16
  134. package/dist/src/data-list/event-handlers/data-list-click-handler.js.map +0 -1
  135. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.d.ts +0 -6
  136. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js +0 -16
  137. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js.map +0 -1
  138. package/dist/src/interfaces/index.d.ts +0 -2
  139. package/dist/src/interfaces/index.js +0 -3
  140. package/dist/src/interfaces/index.js.map +0 -1
  141. package/dist/src/interfaces/ox-grist-search-form.d.ts +0 -6
  142. package/dist/src/interfaces/ox-grist-search-form.js +0 -2
  143. package/dist/src/interfaces/ox-grist-search-form.js.map +0 -1
  144. package/dist/src/interfaces/ox-search-field.d.ts +0 -39
  145. package/dist/src/interfaces/ox-search-field.js +0 -2
  146. package/dist/src/interfaces/ox-search-field.js.map +0 -1
  147. package/dist/src/search-form/index.d.ts +0 -7
  148. package/dist/src/search-form/index.js +0 -8
  149. package/dist/src/search-form/index.js.map +0 -1
  150. package/dist/src/search-form/ox-basic-field.d.ts +0 -18
  151. package/dist/src/search-form/ox-basic-field.js +0 -75
  152. package/dist/src/search-form/ox-basic-field.js.map +0 -1
  153. package/dist/src/search-form/ox-checkbox-field.d.ts +0 -11
  154. package/dist/src/search-form/ox-checkbox-field.js +0 -60
  155. package/dist/src/search-form/ox-checkbox-field.js.map +0 -1
  156. package/dist/src/search-form/ox-grist-search-form.d.ts +0 -11
  157. package/dist/src/search-form/ox-grist-search-form.js +0 -177
  158. package/dist/src/search-form/ox-grist-search-form.js.map +0 -1
  159. package/dist/src/search-form/ox-number-field.d.ts +0 -14
  160. package/dist/src/search-form/ox-number-field.js +0 -112
  161. package/dist/src/search-form/ox-number-field.js.map +0 -1
  162. package/dist/src/search-form/ox-search-form.d.ts +0 -15
  163. package/dist/src/search-form/ox-search-form.js +0 -53
  164. package/dist/src/search-form/ox-search-form.js.map +0 -1
  165. package/dist/src/search-form/ox-select-field.d.ts +0 -21
  166. package/dist/src/search-form/ox-select-field.js +0 -181
  167. package/dist/src/search-form/ox-select-field.js.map +0 -1
  168. package/dist/src/search-form/ox-text-field.d.ts +0 -11
  169. package/dist/src/search-form/ox-text-field.js +0 -60
  170. package/dist/src/search-form/ox-text-field.js.map +0 -1
package/demo/data-grist-test.html CHANGED
@@ -44,11 +44,15 @@
44
44
  <link href="/themes/oops-theme.css" rel="stylesheet" />
45
45
  <link href="/themes/grist-theme.css" rel="stylesheet" />
46
46
  </head>
47
+
47
48
  <body>
48
49
  <script type="module">
49
50
  import { LitElement, html, css, render } from 'lit'
50
51
  import '../dist/index.js'
51
- import '@operato/popup'
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'
52
56
  import '@material/mwc-icon'
53
57
 
54
58
  const fetchHandler = async ({ page, limit, sorters = [] }) => {
@@ -65,7 +69,8 @@
65
69
  return {
66
70
  id: idx,
67
71
  name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
68
- description: idx % 2 ? `hatiolab manager-${start + idx + 1}` : `hatiosea manager-${start + idx + 1}`,
72
+ description:
73
+ idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
69
74
  email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
70
75
  active: Math.round(Math.random() * 2) % 2 ? true : false,
71
76
  barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
@@ -81,10 +86,14 @@
81
86
  name: 'HatioSEA',
82
87
  description: `말레이시아 세티아알람-${start + idx + 1}`
83
88
  },
84
- image:
85
- idx % 2
89
+ thumbnail:
90
+ idx % 4 === 0
91
+ ? '' /* no source */
92
+ : idx % 4 === 1
86
93
  ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
87
- : `http://www.hatiolab.com/assets/img/thingsboard-30.png`,
94
+ : idx % 4 === 2
95
+ ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
96
+ : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
88
97
  role: ['admin', 'worker', 'tester'][idx % 3],
89
98
  color: idx % 2 ? `#87f018` : `#180f87`,
90
99
  rate: Math.round(Math.random() * 100),
@@ -107,9 +116,7 @@
107
116
 
108
117
  const config = {
109
118
  list: {
110
- thumbnail: function (record, rowIndex) {
111
- return html` <img src=${record.image} style="width: 100%; height: 100%;" /> `
112
- },
119
+ thumbnail: 'thumbnail',
113
120
  fields: ['name', 'description'],
114
121
  details: ['role', 'email']
115
122
  },
@@ -153,10 +160,11 @@
153
160
  // href: 'http://hatiolab.com',
154
161
  href: function (column, record, rowIndex) {
155
162
  return record['homepage']
156
- }
157
- // target: '_blank'
163
+ },
164
+ target: '_blank'
158
165
  }
159
166
  },
167
+ filter: 'search',
160
168
  sortable: true,
161
169
  width: 120
162
170
  },
@@ -164,13 +172,14 @@
164
172
  type: 'string',
165
173
  name: 'description',
166
174
  header: 'description',
175
+ filter: 'search',
167
176
  record: {
168
177
  editable: true,
169
178
  align: 'left'
170
179
  },
171
180
  width: 200,
172
181
  handlers: {
173
- dblclick: (columns, data, column, record, rowIndex) => {
182
+ click: (columns, data, column, record, rowIndex, target) => {
174
183
  alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
175
184
  }
176
185
  }
@@ -183,6 +192,7 @@
183
192
  record: {
184
193
  editable: true
185
194
  },
195
+ filter: 'search',
186
196
  sortable: true,
187
197
  width: 130,
188
198
  validation: function (after, before, record, column) {
@@ -207,6 +217,7 @@
207
217
  record: {
208
218
  editable: true
209
219
  },
220
+ filter: true,
210
221
  handlers: {
211
222
  dblclick: () => {
212
223
  const grist = document.querySelector('ox-grist')
@@ -225,6 +236,10 @@
225
236
  options: ['admin', 'worker', 'tester'],
226
237
  editable: true
227
238
  },
239
+ filter: {
240
+ options: ['admin', 'worker', 'tester', 'xyz', 'VERY'],
241
+ multiple: true /* this case, operator should be 'in' */
242
+ },
228
243
  sortable: true,
229
244
  width: 120
230
245
  },
@@ -246,6 +261,7 @@
246
261
  align: 'right',
247
262
  editable: true
248
263
  },
264
+ filter: 'between',
249
265
  sortable: true,
250
266
  width: 50
251
267
  },
@@ -255,6 +271,14 @@
255
271
  header: 'JSON5',
256
272
  width: 200
257
273
  },
274
+ {
275
+ type: 'image',
276
+ name: 'thumbnail',
277
+ header: 'thumbnail',
278
+ record: {
279
+ editable: true
280
+ }
281
+ },
258
282
  {
259
283
  type: 'datetime',
260
284
  name: 'updatedAt',
@@ -262,6 +286,7 @@
262
286
  record: {
263
287
  editable: true
264
288
  },
289
+ filter: 'between',
265
290
  sortable: true,
266
291
  width: 180
267
292
  },
@@ -270,7 +295,7 @@
270
295
  name: 'createdAt',
271
296
  header: 'created at',
272
297
  record: {
273
- editable: true
298
+ editable: false
274
299
  },
275
300
  sortable: true,
276
301
  width: 180
@@ -311,6 +336,7 @@
311
336
  css`
312
337
  :host {
313
338
  display: flex;
339
+ flex-direction: column;
314
340
  }
315
341
 
316
342
  ox-grist {
@@ -321,34 +347,95 @@
321
347
  --grid-record-emphasized-color: yellow;
322
348
  }
323
349
 
324
- #headroom {
350
+ [slot='headroom'] {
325
351
  display: flex;
326
- flex-direction: column;
327
- background-color: var(--primary-color);
328
- height: 200px;
352
+ flex-direction: row;
329
353
  align-items: center;
330
- justify-content: center;
331
- color: var(--theme-white-color);
354
+ padding: var(--padding-default) var(--padding-wide);
355
+ border-top: 2px solid rgba(0, 0, 0, 0.2);
356
+ background-color: var(--theme-white-color);
357
+ box-shadow: var(--box-shadow);
358
+
359
+ --mdc-icon-size: 24px;
360
+ }
361
+
362
+ #sorters {
363
+ margin-left: auto;
364
+ position: relative;
365
+ }
366
+
367
+ #sorters > * {
368
+ padding: var(--padding-narrow);
369
+ margin-right: var(--margin-default);
332
370
  }
333
371
 
334
372
  #modes > * {
335
373
  padding: var(--padding-narrow);
336
- font-size: 1.5em;
337
- opacity: 0.7;
374
+ opacity: 0.5;
375
+ color: var(--primary-text-color);
376
+ cursor: pointer;
338
377
  }
339
378
 
340
379
  #modes > mwc-icon[active] {
341
- border: 1px solid var(--status-warning-color);
342
380
  border-radius: 9px;
343
- background-color: rgba(0, 0, 0, 0.3);
381
+ background-color: rgba(var(--primary-color-rgb), 0.05);
344
382
  opacity: 1;
383
+ color: var(--secondary-text-color);
384
+ cursor: default;
345
385
  }
346
386
 
347
- #filters {
348
- position: absolute;
349
- left: 10px;
350
- bottom: 10px;
351
- width: calc(100% - 20px);
387
+ #modes > mwc-icon:hover {
388
+ opacity: 1;
389
+ color: var(--secondary-text-color);
390
+ }
391
+
392
+ #add {
393
+ width: 50px;
394
+ text-align: right;
395
+ }
396
+
397
+ #add button {
398
+ background-color: var(--status-success-color);
399
+ border: 0;
400
+ border-radius: 50%;
401
+ padding: 5px;
402
+ width: 36px;
403
+ height: 36px;
404
+ cursor: pointer;
405
+ }
406
+
407
+ #add button:hover {
408
+ background-color: var(--focus-background-color);
409
+ box-shadow: var(--box-shadow);
410
+ }
411
+
412
+ #add button mwc-icon {
413
+ font-size: 2em;
414
+ color: var(--theme-white-color);
415
+ }
416
+
417
+ #filters * {
418
+ margin-right: var(--margin-default);
419
+ }
420
+
421
+ #tailer {
422
+ display: flex;
423
+ flex-direction: row;
424
+ margin: 0 var(--margin-default);
425
+ }
426
+
427
+ #tailer a {
428
+ padding: 0 var(--padding-narrow) 0 var(--padding-default);
429
+ margin: 0 var(--margin-narrow);
430
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
431
+ font-size: var(--fontsize-default);
432
+ color: var(--primary-color);
433
+ }
434
+
435
+ @media only screen and (max-width: 460px) {
436
+ #modes {
437
+ display: none;
438
+ }
352
439
  }
353
440
  `
354
441
  ]
@@ -359,27 +446,49 @@
359
446
  }
360
447
  }
361
448
 
449
+ get searchForm() {
450
+ return this.shadowRoot.querySelector('ox-filters-form')
451
+ }
452
+
362
453
  render() {
363
454
  const mode = this.mode || 'CARD'
364
455
 
365
456
  return html`
366
457
  <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
458
+ <ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
459
+
367
460
  <div slot="headroom" id="headroom">
368
- <h1>HEAD ROOM AREA</h1>
461
+ <div id="sorters">
462
+ <mwc-icon
463
+ @click=${e => {
464
+ const target = e.currentTarget
465
+ this.renderRoot.querySelector('#sorter-control').open({
466
+ right: 0,
467
+ top: target.offsetTop + target.offsetHeight
468
+ })
469
+ }}
470
+ >sort</mwc-icon
471
+ >
472
+ <ox-popup id="sorter-control">
473
+ <ox-sorters-control> </ox-sorters-control>
474
+ </ox-popup>
475
+ </div>
476
+
369
477
  <div id="modes">
370
478
  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
371
479
  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
372
480
  <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
373
481
  </div>
482
+
374
483
  <div id="tailer">
375
- <a href="./report-test.html">Report Test</a>|
484
+ <a href="./report-test.html">Report Test</a>
376
485
  <a
377
486
  href="#"
378
487
  @click=${() => {
379
488
  this.renderRoot.querySelector('ox-grist').reset()
380
489
  }}
381
490
  >Reset</a
382
- >|
491
+ >
383
492
  <a
384
493
  href="#"
385
494
  @click=${() => {
@@ -389,61 +498,9 @@
389
498
  >
390
499
  </div>
391
500
 
392
- <div id="filters">
393
- <mwc-icon
394
- @click=${e => {
395
- const target = e.currentTarget
396
- this.renderRoot.querySelector('ox-popup-list').open({
397
- left: target.offsetLeft,
398
- top: target.offsetTop + target.offsetHeight
399
- })
400
- }}
401
- >sort</mwc-icon
402
- >
403
- <mwc-icon
404
- @click=${e => {
405
- const target = e.currentTarget
406
- this.renderRoot.querySelector('ox-popup-list').open({
407
- left: target.offsetLeft,
408
- top: target.offsetTop + target.offsetHeight
409
- })
410
- }}
411
- >more_horiz</mwc-icon
412
- >
413
- <mwc-icon
414
- @click=${e => {
415
- const target = e.currentTarget
416
- this.renderRoot.querySelector('ox-popup-list').open({
417
- left: target.offsetLeft,
418
- top: target.offsetTop + target.offsetHeight
419
- })
420
- }}
421
- >sort</mwc-icon
422
- >
423
-
424
- <ox-popup-list @select=${() => console.log(e.detail)} multiple>
425
- <div
426
- option
427
- @click=${function (e) {
428
- const icon = e.currentTarget.querySelector('mwc-icon')
429
- icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
430
- }}
431
- >
432
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
433
- <span>click me to toggle</span>
434
- </div>
435
- <div
436
- option
437
- @click=${function (e) {
438
- const icon = e.currentTarget.querySelector('mwc-icon')
439
- icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
440
- }}
441
- >
442
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
443
- <span>click me to toggle</span>
444
- </div>
445
- </ox-popup-list>
446
- </div>
501
+ <ox-record-creator id="add" light-popup>
502
+ <button><mwc-icon>add</mwc-icon></button>
503
+ </ox-record-creator>
447
504
  </div>
448
505
  </ox-grist>
449
506
  `
package/demo/index.html CHANGED
@@ -50,6 +50,8 @@
50
50
  import { LitElement, html, css, render } from 'lit'
51
51
  import '../dist/index.js'
52
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'
53
55
  import '@operato/popup/ox-popup-list.js'
54
56
  import '@material/mwc-icon'
55
57
 
@@ -162,9 +164,7 @@
162
164
  target: '_blank'
163
165
  }
164
166
  },
165
- filter: {
166
- type: 'text'
167
- },
167
+ filter: 'search',
168
168
  sortable: true,
169
169
  width: 120
170
170
  },
@@ -172,6 +172,7 @@
172
172
  type: 'string',
173
173
  name: 'description',
174
174
  header: 'description',
175
+ filter: 'search',
175
176
  record: {
176
177
  editable: true,
177
178
  align: 'left'
@@ -191,9 +192,7 @@
191
192
  record: {
192
193
  editable: true
193
194
  },
194
- filter: {
195
- operator: 'i_like'
196
- },
195
+ filter: 'search',
197
196
  sortable: true,
198
197
  width: 130,
199
198
  validation: function (after, before, record, column) {
@@ -251,7 +250,6 @@
251
250
  record: {
252
251
  editable: true
253
252
  },
254
- filter: true,
255
253
  sortable: true,
256
254
  width: 50
257
255
  },
@@ -263,9 +261,7 @@
263
261
  align: 'right',
264
262
  editable: true
265
263
  },
266
- filter: {
267
- operator: 'between'
268
- },
264
+ filter: 'between',
269
265
  sortable: true,
270
266
  width: 50
271
267
  },
@@ -278,7 +274,10 @@
278
274
  {
279
275
  type: 'image',
280
276
  name: 'thumbnail',
281
- hidden: true
277
+ header: 'thumbnail',
278
+ record: {
279
+ editable: true
280
+ }
282
281
  },
283
282
  {
284
283
  type: 'datetime',
@@ -287,10 +286,7 @@
287
286
  record: {
288
287
  editable: true
289
288
  },
290
- filter: {
291
- type: 'datetime',
292
- operator: 'between'
293
- },
289
+ filter: 'between',
294
290
  sortable: true,
295
291
  width: 180
296
292
  },
@@ -299,7 +295,7 @@
299
295
  name: 'createdAt',
300
296
  header: 'created at',
301
297
  record: {
302
- editable: true
298
+ editable: false
303
299
  },
304
300
  sortable: true,
305
301
  width: 180
@@ -357,12 +353,24 @@
357
353
  align-items: center;
358
354
  padding: var(--padding-default) var(--padding-wide);
359
355
  border-top: 2px solid rgba(0, 0, 0, 0.2);
360
- background-color: var(--main-section-background-color);
356
+ background-color: var(--theme-white-color);
357
+ box-shadow: var(--box-shadow);
358
+
359
+ --mdc-icon-size: 24px;
360
+ }
361
+
362
+ #sorters {
363
+ margin-left: auto;
364
+ position: relative;
365
+ }
366
+
367
+ #sorters > * {
368
+ padding: var(--padding-narrow);
369
+ margin-right: var(--margin-default);
361
370
  }
362
371
 
363
372
  #modes > * {
364
373
  padding: var(--padding-narrow);
365
- font-size: 1em;
366
374
  opacity: 0.5;
367
375
  color: var(--primary-text-color);
368
376
  cursor: pointer;
@@ -376,41 +384,38 @@
376
384
  cursor: default;
377
385
  }
378
386
 
379
- #filters {
380
- display: flex;
381
- flex-direction: row;
382
- justify-content: space-between;
383
- margin-right: auto;
384
- align-items: center;
387
+ #modes > mwc-icon:hover {
388
+ opacity: 1;
389
+ color: var(--secondary-text-color);
385
390
  }
386
391
 
387
- #filters > * {
388
- padding: var(--padding-default) var(--padding-wide);
392
+ #add {
393
+ width: 50px;
394
+ text-align: right;
389
395
  }
390
396
 
391
- #search {
392
- flex: 1;
393
-
394
- display: flex;
395
- position: relative;
396
- align-items: center;
397
+ #add button {
398
+ background-color: var(--status-success-color);
399
+ border: 0;
400
+ border-radius: 50%;
401
+ padding: 5px;
402
+ width: 36px;
403
+ height: 36px;
404
+ cursor: pointer;
405
+ }
397
406
 
398
- --mdc-icon-size: 20px;
407
+ #add button:hover {
408
+ background-color: var(--focus-background-color);
409
+ box-shadow: var(--box-shadow);
399
410
  }
400
411
 
401
- #search [type='text'] {
402
- flex: 1;
403
- background-color: transparent;
404
- border: 0;
405
- border-bottom: var(--border-dark-color);
406
- padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
407
- font-size: var(--fontsize-large);
408
- outline: none;
412
+ #add button mwc-icon {
413
+ font-size: 2em;
414
+ color: var(--theme-white-color);
409
415
  }
410
416
 
411
- #search mwc-icon {
412
- position: absolute;
413
- color: var(--secondary-color);
417
+ #filters * {
418
+ margin-right: var(--margin-default);
414
419
  }
415
420
 
416
421
  #tailer {
@@ -427,29 +432,9 @@
427
432
  color: var(--primary-color);
428
433
  }
429
434
 
430
- #add button {
431
- background-color: var(--status-success-color);
432
- border: 0;
433
- border-radius: 50%;
434
- padding: 5px;
435
- width: 36px;
436
- height: 36px;
437
- cursor: pointer;
438
- }
439
-
440
- #add button:hover {
441
- background-color: var(--focus-background-color);
442
- box-shadow: var(--box-shadow);
443
- }
444
-
445
- #add button mwc-icon {
446
- font-size: 2em;
447
- color: var(--theme-white-color);
448
- }
449
-
450
435
  @media only screen and (max-width: 460px) {
451
- #filters {
452
- flex-direction: column;
436
+ #modes {
437
+ display: none;
453
438
  }
454
439
  }
455
440
  `
@@ -470,78 +455,25 @@
470
455
 
471
456
  return html`
472
457
  <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
473
- <ox-filters-form
474
- slot="headroom"
475
- .config=${config}
476
- @submit=${event => {
477
- event.preventDefault()
478
- console.log(this.searchForm.queryFilters)
479
- }}
480
- @input=${() => console.log(this.searchForm.queryFilters)}
481
- @change=${() => console.log(this.searchForm.queryFilters)}
482
- ></ox-filters-form>
458
+ <ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
483
459
 
484
460
  <div slot="headroom" id="headroom">
485
- <div id="filters">
486
- <div id="search">
487
- <mwc-icon>search</mwc-icon>
488
- <input type="text" />
489
- </div>
490
-
491
- <mwc-icon
492
- @click=${e => {
493
- const target = e.currentTarget
494
- this.renderRoot.querySelector('ox-popup-list').open({
495
- left: target.offsetLeft,
496
- top: target.offsetTop + target.offsetHeight
497
- })
498
- }}
499
- >sort</mwc-icon
500
- >
461
+ <div id="sorters">
501
462
  <mwc-icon
502
463
  @click=${e => {
503
464
  const target = e.currentTarget
504
- this.renderRoot.querySelector('ox-popup-list').open({
505
- left: target.offsetLeft,
506
- top: target.offsetTop + target.offsetHeight
507
- })
508
- }}
509
- >more_horiz</mwc-icon
510
- >
511
- <mwc-icon
512
- @click=${e => {
513
- const target = e.currentTarget
514
- this.renderRoot.querySelector('ox-popup-list').open({
515
- left: target.offsetLeft,
465
+ this.renderRoot.querySelector('#sorter-control').open({
466
+ right: 0,
516
467
  top: target.offsetTop + target.offsetHeight
517
468
  })
518
469
  }}
519
470
  >sort</mwc-icon
520
471
  >
521
-
522
- <ox-popup-list multiple>
523
- <div
524
- option
525
- @click=${function (e) {
526
- const icon = e.currentTarget.querySelector('mwc-icon')
527
- icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
528
- }}
529
- >
530
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
531
- <span>click me to toggle</span>
532
- </div>
533
- <div
534
- option
535
- @click=${function (e) {
536
- const icon = e.currentTarget.querySelector('mwc-icon')
537
- icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
538
- }}
539
- >
540
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
541
- <span>click me to toggle</span>
542
- </div>
543
- </ox-popup-list>
472
+ <ox-popup id="sorter-control">
473
+ <ox-sorters-control> </ox-sorters-control>
474
+ </ox-popup>
544
475
  </div>
476
+
545
477
  <div id="modes">
546
478
  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
547
479
  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
@@ -565,9 +497,10 @@
565
497
  >Fetch</a
566
498
  >
567
499
  </div>
568
- <div id="add">
500
+
501
+ <ox-record-creator id="add" light-popup>
569
502
  <button><mwc-icon>add</mwc-icon></button>
570
- </div>
503
+ </ox-record-creator>
571
504
  </div>
572
505
  </ox-grist>
573
506
  `