@operato/data-grist 2.0.0-alpha.82 → 2.0.0-alpha.85

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 (48) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/filters/filter-checkbox.js +12 -5
  3. package/dist/src/filters/filter-checkbox.js.map +1 -1
  4. package/dist/src/filters/filter-styles.js +35 -28
  5. package/dist/src/filters/filter-styles.js.map +1 -1
  6. package/dist/src/filters/filters-form.js +50 -47
  7. package/dist/src/filters/filters-form.js.map +1 -1
  8. package/dist/stories/accumulator.stories.js +27 -3
  9. package/dist/stories/accumulator.stories.js.map +1 -1
  10. package/dist/stories/barcode-input-filter.stories.js +20 -0
  11. package/dist/stories/barcode-input-filter.stories.js.map +1 -1
  12. package/dist/stories/default-filters.stories.js +20 -0
  13. package/dist/stories/default-filters.stories.js.map +1 -1
  14. package/dist/stories/dynamic-editable.stories.js +20 -0
  15. package/dist/stories/dynamic-editable.stories.js.map +1 -1
  16. package/dist/stories/empty-sorters.stories.js +20 -0
  17. package/dist/stories/empty-sorters.stories.js.map +1 -1
  18. package/dist/stories/explicit-fetch.stories.js +20 -0
  19. package/dist/stories/explicit-fetch.stories.js.map +1 -1
  20. package/dist/stories/fixed-column.stories.js +27 -3
  21. package/dist/stories/fixed-column.stories.js.map +1 -1
  22. package/dist/stories/grist-modes.stories.js +27 -3
  23. package/dist/stories/grist-modes.stories.js.map +1 -1
  24. package/dist/stories/group-header.stories.js +27 -3
  25. package/dist/stories/group-header.stories.js.map +1 -1
  26. package/dist/stories/textarea.stories.js +27 -3
  27. package/dist/stories/textarea.stories.js.map +1 -1
  28. package/dist/stories/tree-column-with-checkbox.stories.js +28 -4
  29. package/dist/stories/tree-column-with-checkbox.stories.js.map +1 -1
  30. package/dist/stories/tree-column.stories.js +27 -3
  31. package/dist/stories/tree-column.stories.js.map +1 -1
  32. package/dist/tsconfig.tsbuildinfo +1 -1
  33. package/package.json +5 -5
  34. package/src/filters/filter-checkbox.ts +15 -5
  35. package/src/filters/filter-styles.ts +35 -28
  36. package/src/filters/filters-form.ts +50 -47
  37. package/stories/accumulator.stories.ts +27 -3
  38. package/stories/barcode-input-filter.stories.ts +20 -0
  39. package/stories/default-filters.stories.ts +20 -0
  40. package/stories/dynamic-editable.stories.ts +20 -0
  41. package/stories/empty-sorters.stories.ts +20 -0
  42. package/stories/explicit-fetch.stories.ts +20 -0
  43. package/stories/fixed-column.stories.ts +27 -3
  44. package/stories/grist-modes.stories.ts +27 -3
  45. package/stories/group-header.stories.ts +27 -3
  46. package/stories/textarea.stories.ts +27 -3
  47. package/stories/tree-column-with-checkbox.stories.ts +28 -4
  48. package/stories/tree-column.stories.ts +27 -3
package/stories/tree-column-with-checkbox.stories.ts CHANGED
@@ -232,6 +232,26 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
232
232
  <link href="/themes/oops-theme.css" rel="stylesheet" />
233
233
  <link href="/themes/grist-theme.css" rel="stylesheet" />
234
234
 
235
+ <style>
236
+ ox-filters-form {
237
+ --input-gap-vertical: 8px;
238
+ --input-gap-horizontal: 16px;
239
+
240
+ --ox-filters-input-placeholder-color: var(--primary-color);
241
+
242
+ --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
243
+ --ox-filters-input-focus-border: 1px solid var(--primary-color);
244
+ --ox-filters-input-font: normal 14px var(--theme-font);
245
+ --ox-filters-input-color: var(--primary-text-color);
246
+ --ox-filters-input-focus-color: var(--primary-color);
247
+ --ox-filters-label-font: normal 14px var(--theme-font);
248
+ --ox-filters-label-color: var(--primary-text-color);
249
+
250
+ --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
251
+ --ox-filters-input-padding: 6px 2px;
252
+ }
253
+ </style>
254
+
235
255
  <style>
236
256
  ox-grist {
237
257
  width: 100%;
@@ -293,13 +313,17 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
293
313
  text-align: right;
294
314
  }
295
315
 
296
- #add button {
316
+ #add #add button {
317
+ display: flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+
297
321
  background-color: var(--primary-color);
298
322
  border: 0;
299
323
  border-radius: 50%;
300
324
  padding: 5px;
301
- width: 36px;
302
- height: 36px;
325
+ width: 32px;
326
+ height: 32px;
303
327
  cursor: pointer;
304
328
  }
305
329
 
@@ -309,7 +333,7 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
309
333
  }
310
334
 
311
335
  #add button md-icon {
312
- font-size: 2em;
336
+ font-size: 1.5em;
313
337
  color: var(--theme-white-color);
314
338
  }
315
339
 
package/stories/tree-column.stories.ts CHANGED
@@ -231,6 +231,26 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
231
231
  <link href="/themes/oops-theme.css" rel="stylesheet" />
232
232
  <link href="/themes/grist-theme.css" rel="stylesheet" />
233
233
 
234
+ <style>
235
+ ox-filters-form {
236
+ --input-gap-vertical: 8px;
237
+ --input-gap-horizontal: 16px;
238
+
239
+ --ox-filters-input-placeholder-color: var(--primary-color);
240
+
241
+ --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
242
+ --ox-filters-input-focus-border: 1px solid var(--primary-color);
243
+ --ox-filters-input-font: normal 14px var(--theme-font);
244
+ --ox-filters-input-color: var(--primary-text-color);
245
+ --ox-filters-input-focus-color: var(--primary-color);
246
+ --ox-filters-label-font: normal 14px var(--theme-font);
247
+ --ox-filters-label-color: var(--primary-text-color);
248
+
249
+ --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
250
+ --ox-filters-input-padding: 6px 2px;
251
+ }
252
+ </style>
253
+
234
254
  <style>
235
255
  ox-grist {
236
256
  width: 100%;
@@ -293,12 +313,16 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
293
313
  }
294
314
 
295
315
  #add button {
316
+ display: flex;
317
+ align-items: center;
318
+ justify-content: center;
319
+
296
320
  background-color: var(--primary-color);
297
321
  border: 0;
298
322
  border-radius: 50%;
299
323
  padding: 5px;
300
- width: 36px;
301
- height: 36px;
324
+ width: 32px;
325
+ height: 32px;
302
326
  cursor: pointer;
303
327
  }
304
328
 
@@ -308,7 +332,7 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
308
332
  }
309
333
 
310
334
  #add button md-icon {
311
- font-size: 2em;
335
+ font-size: 1.5em;
312
336
  color: var(--theme-white-color);
313
337
  }
314
338