@operato/data-grist 0.3.16 → 0.3.20

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 (103) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/custom-elements.json +693 -674
  3. package/demo/data-grist-test.html +142 -85
  4. package/demo/index.html +65 -97
  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-card/record-card.d.ts +0 -2
  8. package/dist/src/data-card/record-card.js +7 -59
  9. package/dist/src/data-card/record-card.js.map +1 -1
  10. package/dist/src/data-grid/data-grid-body.d.ts +7 -1
  11. package/dist/src/data-grid/data-grid-body.js +21 -0
  12. package/dist/src/data-grid/data-grid-body.js.map +1 -1
  13. package/dist/src/data-grid/data-grid-header.js +5 -3
  14. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  15. package/dist/src/data-grid/data-grid.d.ts +1 -0
  16. package/dist/src/data-grid/data-grid.js +6 -0
  17. package/dist/src/data-grid/data-grid.js.map +1 -1
  18. package/dist/src/data-grist.js +5 -0
  19. package/dist/src/data-grist.js.map +1 -1
  20. package/dist/src/data-list/record-partial.d.ts +0 -2
  21. package/dist/src/data-list/record-partial.js +7 -58
  22. package/dist/src/data-list/record-partial.js.map +1 -1
  23. package/dist/src/editors/image-input.d.ts +7 -0
  24. package/dist/src/editors/image-input.js +31 -0
  25. package/dist/src/editors/image-input.js.map +1 -0
  26. package/dist/src/editors/index.d.ts +1 -0
  27. package/dist/src/editors/index.js +1 -0
  28. package/dist/src/editors/index.js.map +1 -1
  29. package/dist/src/editors/input-editors.d.ts +1 -8
  30. package/dist/src/editors/input-editors.js +3 -47
  31. package/dist/src/editors/input-editors.js.map +1 -1
  32. package/dist/src/editors/registry.js +2 -1
  33. package/dist/src/editors/registry.js.map +1 -1
  34. package/dist/src/filters/filter-checkbox.js +2 -2
  35. package/dist/src/filters/filter-checkbox.js.map +1 -1
  36. package/dist/src/filters/filter-input.js +1 -1
  37. package/dist/src/filters/filter-input.js.map +1 -1
  38. package/dist/src/filters/filter-range-date.js +1 -1
  39. package/dist/src/filters/filter-range-date.js.map +1 -1
  40. package/dist/src/filters/filter-range-number.js +1 -1
  41. package/dist/src/filters/filter-range-number.js.map +1 -1
  42. package/dist/src/filters/filter-select.js +2 -2
  43. package/dist/src/filters/filter-select.js.map +1 -1
  44. package/dist/src/filters/filters-form.d.ts +9 -5
  45. package/dist/src/filters/filters-form.js +63 -15
  46. package/dist/src/filters/filters-form.js.map +1 -1
  47. package/dist/src/handlers/record-view-handler.d.ts +1 -2
  48. package/dist/src/handlers/record-view-handler.js +5 -35
  49. package/dist/src/handlers/record-view-handler.js.map +1 -1
  50. package/dist/src/handlers/select-row-toggle.d.ts +1 -1
  51. package/dist/src/handlers/select-row-toggle.js.map +1 -1
  52. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js +3 -1
  53. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map +1 -1
  54. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js +0 -74
  55. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map +1 -1
  56. package/dist/src/record-view/index.d.ts +1 -0
  57. package/dist/src/record-view/index.js +1 -0
  58. package/dist/src/record-view/index.js.map +1 -1
  59. package/dist/src/record-view/record-creator.d.ts +5 -2
  60. package/dist/src/record-view/record-creator.js +69 -14
  61. package/dist/src/record-view/record-creator.js.map +1 -1
  62. package/dist/src/record-view/record-view-body.js +6 -6
  63. package/dist/src/record-view/record-view-body.js.map +1 -1
  64. package/dist/src/record-view/record-view-handler.d.ts +9 -0
  65. package/dist/src/record-view/record-view-handler.js +57 -0
  66. package/dist/src/record-view/record-view-handler.js.map +1 -0
  67. package/dist/src/record-view/record-view.d.ts +2 -3
  68. package/dist/src/record-view/record-view.js +11 -61
  69. package/dist/src/record-view/record-view.js.map +1 -1
  70. package/dist/src/sorters/sorters-control.js +22 -8
  71. package/dist/src/sorters/sorters-control.js.map +1 -1
  72. package/dist/src/types.d.ts +6 -3
  73. package/dist/src/types.js.map +1 -1
  74. package/dist/tsconfig.tsbuildinfo +1 -1
  75. package/package.json +7 -7
  76. package/src/configure/column-builder.ts +29 -3
  77. package/src/data-card/record-card.ts +14 -74
  78. package/src/data-grid/data-grid-body.ts +38 -1
  79. package/src/data-grid/data-grid-header.ts +7 -5
  80. package/src/data-grid/data-grid.ts +12 -0
  81. package/src/data-grist.ts +8 -0
  82. package/src/data-list/record-partial.ts +14 -73
  83. package/src/editors/image-input.ts +29 -0
  84. package/src/editors/index.ts +1 -0
  85. package/src/editors/input-editors.ts +5 -48
  86. package/src/editors/registry.ts +1 -1
  87. package/src/filters/filter-checkbox.ts +3 -2
  88. package/src/filters/filter-input.ts +3 -3
  89. package/src/filters/filter-range-date.ts +3 -3
  90. package/src/filters/filter-range-number.ts +3 -3
  91. package/src/filters/filter-select.ts +3 -2
  92. package/src/filters/filters-form.ts +77 -41
  93. package/src/handlers/record-view-handler.ts +8 -44
  94. package/src/handlers/select-row-toggle.ts +1 -2
  95. package/src/record-view/event-handlers/record-view-body-click-handler.ts +3 -1
  96. package/src/record-view/event-handlers/record-view-body-keydown-handler.ts +0 -89
  97. package/src/record-view/index.ts +1 -0
  98. package/src/record-view/record-creator.ts +85 -16
  99. package/src/record-view/record-view-body.ts +6 -6
  100. package/src/record-view/record-view-handler.ts +86 -0
  101. package/src/record-view/record-view.ts +12 -62
  102. package/src/sorters/sorters-control.ts +22 -8
  103. package/src/types.ts +33 -30
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
@@ -164,9 +164,7 @@
164
164
  target: '_blank'
165
165
  }
166
166
  },
167
- filter: {
168
- type: 'text'
169
- },
167
+ filter: 'search',
170
168
  sortable: true,
171
169
  width: 120
172
170
  },
@@ -174,6 +172,7 @@
174
172
  type: 'string',
175
173
  name: 'description',
176
174
  header: 'description',
175
+ filter: 'search',
177
176
  record: {
178
177
  editable: true,
179
178
  align: 'left'
@@ -193,9 +192,7 @@
193
192
  record: {
194
193
  editable: true
195
194
  },
196
- filter: {
197
- operator: 'i_like'
198
- },
195
+ filter: 'search',
199
196
  sortable: true,
200
197
  width: 130,
201
198
  validation: function (after, before, record, column) {
@@ -253,7 +250,6 @@
253
250
  record: {
254
251
  editable: true
255
252
  },
256
- filter: true,
257
253
  sortable: true,
258
254
  width: 50
259
255
  },
@@ -265,9 +261,7 @@
265
261
  align: 'right',
266
262
  editable: true
267
263
  },
268
- filter: {
269
- operator: 'between'
270
- },
264
+ filter: 'between',
271
265
  sortable: true,
272
266
  width: 50
273
267
  },
@@ -280,7 +274,10 @@
280
274
  {
281
275
  type: 'image',
282
276
  name: 'thumbnail',
283
- hidden: true
277
+ header: 'thumbnail',
278
+ record: {
279
+ editable: true
280
+ }
284
281
  },
285
282
  {
286
283
  type: 'datetime',
@@ -289,10 +286,7 @@
289
286
  record: {
290
287
  editable: true
291
288
  },
292
- filter: {
293
- type: 'datetime',
294
- operator: 'between'
295
- },
289
+ filter: 'between',
296
290
  sortable: true,
297
291
  width: 180
298
292
  },
@@ -359,12 +353,24 @@
359
353
  align-items: center;
360
354
  padding: var(--padding-default) var(--padding-wide);
361
355
  border-top: 2px solid rgba(0, 0, 0, 0.2);
362
- 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);
363
370
  }
364
371
 
365
372
  #modes > * {
366
373
  padding: var(--padding-narrow);
367
- font-size: 1em;
368
374
  opacity: 0.5;
369
375
  color: var(--primary-text-color);
370
376
  cursor: pointer;
@@ -378,41 +384,38 @@
378
384
  cursor: default;
379
385
  }
380
386
 
381
- #filters {
382
- display: flex;
383
- flex-direction: row;
384
- justify-content: space-between;
385
- margin-right: auto;
386
- align-items: center;
387
+ #modes > mwc-icon:hover {
388
+ opacity: 1;
389
+ color: var(--secondary-text-color);
387
390
  }
388
391
 
389
- #filters > * {
390
- padding: var(--padding-default) var(--padding-wide);
392
+ #add {
393
+ width: 50px;
394
+ text-align: right;
391
395
  }
392
396
 
393
- #search {
394
- flex: 1;
395
-
396
- display: flex;
397
- position: relative;
398
- 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
+ }
399
406
 
400
- --mdc-icon-size: 20px;
407
+ #add button:hover {
408
+ background-color: var(--focus-background-color);
409
+ box-shadow: var(--box-shadow);
401
410
  }
402
411
 
403
- #search [type='text'] {
404
- flex: 1;
405
- background-color: transparent;
406
- border: 0;
407
- border-bottom: var(--border-dark-color);
408
- padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
409
- font-size: var(--fontsize-large);
410
- outline: none;
412
+ #add button mwc-icon {
413
+ font-size: 2em;
414
+ color: var(--theme-white-color);
411
415
  }
412
416
 
413
- #search mwc-icon {
414
- position: absolute;
415
- color: var(--secondary-color);
417
+ #filters * {
418
+ margin-right: var(--margin-default);
416
419
  }
417
420
 
418
421
  #tailer {
@@ -429,29 +432,9 @@
429
432
  color: var(--primary-color);
430
433
  }
431
434
 
432
- #add button {
433
- background-color: var(--status-success-color);
434
- border: 0;
435
- border-radius: 50%;
436
- padding: 5px;
437
- width: 36px;
438
- height: 36px;
439
- cursor: pointer;
440
- }
441
-
442
- #add button:hover {
443
- background-color: var(--focus-background-color);
444
- box-shadow: var(--box-shadow);
445
- }
446
-
447
- #add button mwc-icon {
448
- font-size: 2em;
449
- color: var(--theme-white-color);
450
- }
451
-
452
435
  @media only screen and (max-width: 460px) {
453
- #filters {
454
- flex-direction: column;
436
+ #modes {
437
+ display: none;
455
438
  }
456
439
  }
457
440
  `
@@ -472,40 +455,25 @@
472
455
 
473
456
  return html`
474
457
  <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
475
- <ox-filters-form
476
- slot="headroom"
477
- .config=${config}
478
- @submit=${event => {
479
- event.preventDefault()
480
- console.log(this.searchForm.queryFilters)
481
- }}
482
- @input=${() => console.log(this.searchForm.queryFilters)}
483
- @change=${() => console.log(this.searchForm.queryFilters)}
484
- ></ox-filters-form>
458
+ <ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
485
459
 
486
460
  <div slot="headroom" id="headroom">
487
- <div id="filters">
488
- <div id="search">
489
- <mwc-icon>search</mwc-icon>
490
- <input type="text" />
491
- </div>
492
-
493
- <div>
494
- <mwc-icon
495
- @click=${e => {
496
- const target = e.currentTarget
497
- this.renderRoot.querySelector('#sorter-control').open({
498
- left: target.offsetLeft,
499
- top: target.offsetTop + target.offsetHeight
500
- })
501
- }}
502
- >sort</mwc-icon
503
- >
504
- <ox-popup id="sorter-control">
505
- <ox-sorters-control> </ox-sorters-control>
506
- </ox-popup>
507
- </div>
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>
508
475
  </div>
476
+
509
477
  <div id="modes">
510
478
  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
511
479
  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
@@ -530,7 +498,7 @@
530
498
  >
531
499
  </div>
532
500
 
533
- <ox-record-creator id="add">
501
+ <ox-record-creator id="add" light-popup>
534
502
  <button><mwc-icon>add</mwc-icon></button>
535
503
  </ox-record-creator>
536
504
  </div>
package/dist/src/configure/column-builder.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { NOOP } from '../const';
2
- import { generateGutterColumn } from '../gutters';
3
2
  import { getEditor } from '../editors';
3
+ import { generateGutterColumn } from '../gutters';
4
4
  import { getGristEventHandler } from '../handlers';
5
5
  import { getRenderer } from '../renderers';
6
6
  export const buildColumn = (column) => {
@@ -8,7 +8,7 @@ export const buildColumn = (column) => {
8
8
  if (column.type == 'gutter') {
9
9
  compiled = generateGutterColumn(column);
10
10
  }
11
- var { name, header, record, handlers, label } = compiled;
11
+ var { name, header, record, handlers, label, filter } = compiled;
12
12
  /* header */
13
13
  if (typeof header == 'string') {
14
14
  compiled.header = {
@@ -61,6 +61,30 @@ export const buildColumn = (column) => {
61
61
  renderer: recordRenderer,
62
62
  editor
63
63
  };
64
+ /* filter */
65
+ if (filter) {
66
+ let type = typeof filter;
67
+ switch (type) {
68
+ case 'boolean':
69
+ compiled.filter = {
70
+ type: column.type,
71
+ operator: 'eq'
72
+ };
73
+ break;
74
+ case 'string':
75
+ compiled.filter = {
76
+ type: column.type,
77
+ operator: filter
78
+ };
79
+ break;
80
+ default:
81
+ compiled.filter = {
82
+ //@ts-ignore
83
+ type: column.type,
84
+ ...filter
85
+ };
86
+ }
87
+ }
64
88
  /* handler */
65
89
  var { click, dblclick } = handlers || {};
66
90
  compiled.handlers = {