@operato/data-grist 2.0.0-alpha.6 → 2.0.0-alpha.60

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 (185) hide show
  1. package/CHANGELOG.md +263 -0
  2. package/dist/src/accumulator/accumulator.js +4 -4
  3. package/dist/src/accumulator/accumulator.js.map +1 -1
  4. package/dist/src/configure/rows-option-builder.js +2 -1
  5. package/dist/src/configure/rows-option-builder.js.map +1 -1
  6. package/dist/src/configure/zero-config.js +1 -0
  7. package/dist/src/configure/zero-config.js.map +1 -1
  8. package/dist/src/data-card/data-card.d.ts +1 -1
  9. package/dist/src/data-card/event-handlers/record-card-click-handler.js +1 -1
  10. package/dist/src/data-card/event-handlers/record-card-click-handler.js.map +1 -1
  11. package/dist/src/data-card/record-card.d.ts +1 -1
  12. package/dist/src/data-grid/data-grid-accum-field.js +3 -2
  13. package/dist/src/data-grid/data-grid-accum-field.js.map +1 -1
  14. package/dist/src/data-grid/data-grid-body.d.ts +3 -3
  15. package/dist/src/data-grid/data-grid-body.js +9 -4
  16. package/dist/src/data-grid/data-grid-body.js.map +1 -1
  17. package/dist/src/data-grid/data-grid-field.d.ts +1 -1
  18. package/dist/src/data-grid/data-grid-field.js +2 -2
  19. package/dist/src/data-grid/data-grid-field.js.map +1 -1
  20. package/dist/src/data-grid/data-grid-footer.d.ts +1 -1
  21. package/dist/src/data-grid/data-grid-header.js +1 -3
  22. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  23. package/dist/src/data-grid/data-grid.d.ts +1 -1
  24. package/dist/src/data-grid/data-grid.js +1 -1
  25. package/dist/src/data-grid/data-grid.js.map +1 -1
  26. package/dist/src/data-grist.d.ts +226 -4
  27. package/dist/src/data-grist.js +196 -4
  28. package/dist/src/data-grist.js.map +1 -1
  29. package/dist/src/data-list/data-list-gutter.js +12 -0
  30. package/dist/src/data-list/data-list-gutter.js.map +1 -1
  31. package/dist/src/data-list/data-list.d.ts +1 -1
  32. package/dist/src/data-list/event-handlers/record-partial-click-handler.js +1 -1
  33. package/dist/src/data-list/event-handlers/record-partial-click-handler.js.map +1 -1
  34. package/dist/src/data-list/record-partial.d.ts +1 -1
  35. package/dist/src/data-list/record-partial.js +2 -0
  36. package/dist/src/data-list/record-partial.js.map +1 -1
  37. package/dist/src/data-manipulator.d.ts +6 -6
  38. package/dist/src/data-manipulator.js +44 -29
  39. package/dist/src/data-manipulator.js.map +1 -1
  40. package/dist/src/data-report/data-report-body.d.ts +1 -1
  41. package/dist/src/data-report/data-report-component.d.ts +1 -1
  42. package/dist/src/data-report.d.ts +1 -1
  43. package/dist/src/editors/ox-grist-editor-checkbox.d.ts +3 -2
  44. package/dist/src/editors/ox-grist-editor-checkbox.js +9 -2
  45. package/dist/src/editors/ox-grist-editor-checkbox.js.map +1 -1
  46. package/dist/src/editors/ox-grist-editor-color.d.ts +1 -1
  47. package/dist/src/editors/ox-grist-editor-date.d.ts +1 -1
  48. package/dist/src/editors/ox-grist-editor-datetime.d.ts +2 -2
  49. package/dist/src/editors/ox-grist-editor-datetime.js +1 -2
  50. package/dist/src/editors/ox-grist-editor-datetime.js.map +1 -1
  51. package/dist/src/editors/ox-grist-editor-email.d.ts +1 -1
  52. package/dist/src/editors/ox-grist-editor-file.d.ts +3 -2
  53. package/dist/src/editors/ox-grist-editor-file.js +8 -2
  54. package/dist/src/editors/ox-grist-editor-file.js.map +1 -1
  55. package/dist/src/editors/ox-grist-editor-image.d.ts +2 -2
  56. package/dist/src/editors/ox-grist-editor-image.js +8 -8
  57. package/dist/src/editors/ox-grist-editor-image.js.map +1 -1
  58. package/dist/src/editors/ox-grist-editor-month.d.ts +1 -1
  59. package/dist/src/editors/ox-grist-editor-multiple-select.d.ts +1 -1
  60. package/dist/src/editors/ox-grist-editor-number.d.ts +3 -2
  61. package/dist/src/editors/ox-grist-editor-number.js +10 -9
  62. package/dist/src/editors/ox-grist-editor-number.js.map +1 -1
  63. package/dist/src/editors/ox-grist-editor-password.d.ts +1 -1
  64. package/dist/src/editors/ox-grist-editor-select.d.ts +1 -1
  65. package/dist/src/editors/ox-grist-editor-tel.d.ts +1 -1
  66. package/dist/src/editors/ox-grist-editor-text.d.ts +2 -1
  67. package/dist/src/editors/ox-grist-editor-text.js +3 -0
  68. package/dist/src/editors/ox-grist-editor-text.js.map +1 -1
  69. package/dist/src/editors/ox-grist-editor-textarea.d.ts +2 -1
  70. package/dist/src/editors/ox-grist-editor-textarea.js +3 -0
  71. package/dist/src/editors/ox-grist-editor-textarea.js.map +1 -1
  72. package/dist/src/editors/ox-grist-editor-time.d.ts +1 -1
  73. package/dist/src/editors/ox-grist-editor-tree.d.ts +1 -1
  74. package/dist/src/editors/ox-grist-editor-week.d.ts +1 -1
  75. package/dist/src/editors/ox-grist-editor.d.ts +4 -4
  76. package/dist/src/editors/ox-grist-editor.js +14 -12
  77. package/dist/src/editors/ox-grist-editor.js.map +1 -1
  78. package/dist/src/editors/ox-input-tree.d.ts +1 -1
  79. package/dist/src/empty-note.d.ts +1 -1
  80. package/dist/src/filters/filter-range-date.js +12 -1
  81. package/dist/src/filters/filter-range-date.js.map +1 -1
  82. package/dist/src/filters/filters-form.d.ts +1 -0
  83. package/dist/src/filters/filters-form.js +41 -23
  84. package/dist/src/filters/filters-form.js.map +1 -1
  85. package/dist/src/handlers/contextmenu-tree-mutation.js +1 -19
  86. package/dist/src/handlers/contextmenu-tree-mutation.js.map +1 -1
  87. package/dist/src/index.d.ts +0 -1
  88. package/dist/src/index.js +0 -1
  89. package/dist/src/index.js.map +1 -1
  90. package/dist/src/record-view/record-creator.d.ts +1 -1
  91. package/dist/src/record-view/record-view-body.d.ts +2 -2
  92. package/dist/src/record-view/record-view.d.ts +1 -1
  93. package/dist/src/renderers/ox-grist-renderer-progress.d.ts +1 -1
  94. package/dist/src/renderers/ox-grist-renderer-tree.d.ts +1 -1
  95. package/dist/src/renderers/ox-grist-renderer.d.ts +2 -2
  96. package/dist/src/types.d.ts +1 -8
  97. package/dist/src/types.js.map +1 -1
  98. package/dist/stories/accumulator.stories.js +117 -114
  99. package/dist/stories/accumulator.stories.js.map +1 -1
  100. package/dist/stories/dynamic-editable.stories.js +89 -80
  101. package/dist/stories/dynamic-editable.stories.js.map +1 -1
  102. package/dist/stories/grist-modes.stories.js +23 -2
  103. package/dist/stories/grist-modes.stories.js.map +1 -1
  104. package/dist/tsconfig.tsbuildinfo +1 -1
  105. package/docs/default-value/default-value.md +1 -1
  106. package/docs/default-value/value-generator/date-generator.md +2 -2
  107. package/docs/default-value/value-generator/month-date-generator.md +2 -2
  108. package/docs/default-value/value-generator/week-date-generator.md +2 -2
  109. package/docs/default-value/value-generator/year-date-generator.md +2 -2
  110. package/package.json +20 -19
  111. package/src/accumulator/accumulator.ts +4 -4
  112. package/src/configure/rows-option-builder.ts +11 -1
  113. package/src/configure/zero-config.ts +1 -0
  114. package/src/data-card/event-handlers/record-card-click-handler.ts +1 -1
  115. package/src/data-grid/data-grid-accum-field.ts +3 -2
  116. package/src/data-grid/data-grid-body.ts +10 -5
  117. package/src/data-grid/data-grid-field.ts +1 -1
  118. package/src/data-grid/data-grid-header.ts +2 -4
  119. package/src/data-grid/data-grid.ts +3 -3
  120. package/src/data-grist.ts +251 -4
  121. package/src/data-list/data-list-gutter.ts +12 -0
  122. package/src/data-list/event-handlers/record-partial-click-handler.ts +1 -1
  123. package/src/data-list/record-partial.ts +2 -0
  124. package/src/data-manipulator.ts +52 -31
  125. package/src/editors/ox-grist-editor-checkbox.ts +12 -2
  126. package/src/editors/ox-grist-editor-datetime.ts +1 -2
  127. package/src/editors/ox-grist-editor-file.ts +12 -2
  128. package/src/editors/ox-grist-editor-image.ts +10 -7
  129. package/src/editors/ox-grist-editor-number.ts +11 -9
  130. package/src/editors/ox-grist-editor-text.ts +4 -0
  131. package/src/editors/ox-grist-editor-textarea.ts +4 -0
  132. package/src/editors/ox-grist-editor.ts +14 -10
  133. package/src/filters/filter-range-date.ts +16 -1
  134. package/src/filters/filters-form.ts +69 -46
  135. package/src/handlers/contextmenu-tree-mutation.ts +1 -19
  136. package/src/index.ts +0 -1
  137. package/src/types.ts +1 -9
  138. package/stories/accumulator.stories.ts +118 -119
  139. package/stories/dynamic-editable.stories.ts +96 -86
  140. package/stories/grist-modes.stories.ts +23 -2
  141. package/themes/grist-theme.css +1 -1
  142. package/dist/src/value-generator/date-generator.d.ts +0 -6
  143. package/dist/src/value-generator/date-generator.js +0 -30
  144. package/dist/src/value-generator/date-generator.js.map +0 -1
  145. package/dist/src/value-generator/hour-time-generator.d.ts +0 -7
  146. package/dist/src/value-generator/hour-time-generator.js +0 -29
  147. package/dist/src/value-generator/hour-time-generator.js.map +0 -1
  148. package/dist/src/value-generator/index.d.ts +0 -1
  149. package/dist/src/value-generator/index.js +0 -2
  150. package/dist/src/value-generator/index.js.map +0 -1
  151. package/dist/src/value-generator/minute-time-generator.d.ts +0 -7
  152. package/dist/src/value-generator/minute-time-generator.js +0 -29
  153. package/dist/src/value-generator/minute-time-generator.js.map +0 -1
  154. package/dist/src/value-generator/month-date-generator.d.ts +0 -7
  155. package/dist/src/value-generator/month-date-generator.js +0 -31
  156. package/dist/src/value-generator/month-date-generator.js.map +0 -1
  157. package/dist/src/value-generator/now-generator.d.ts +0 -4
  158. package/dist/src/value-generator/now-generator.js +0 -8
  159. package/dist/src/value-generator/now-generator.js.map +0 -1
  160. package/dist/src/value-generator/registry.d.ts +0 -11
  161. package/dist/src/value-generator/registry.js +0 -50
  162. package/dist/src/value-generator/registry.js.map +0 -1
  163. package/dist/src/value-generator/time-generator.d.ts +0 -6
  164. package/dist/src/value-generator/time-generator.js +0 -28
  165. package/dist/src/value-generator/time-generator.js.map +0 -1
  166. package/dist/src/value-generator/today-generator.d.ts +0 -4
  167. package/dist/src/value-generator/today-generator.js +0 -8
  168. package/dist/src/value-generator/today-generator.js.map +0 -1
  169. package/dist/src/value-generator/week-date-generator.d.ts +0 -7
  170. package/dist/src/value-generator/week-date-generator.js +0 -29
  171. package/dist/src/value-generator/week-date-generator.js.map +0 -1
  172. package/dist/src/value-generator/year-date-generator.d.ts +0 -7
  173. package/dist/src/value-generator/year-date-generator.js +0 -29
  174. package/dist/src/value-generator/year-date-generator.js.map +0 -1
  175. package/src/value-generator/date-generator.ts +0 -35
  176. package/src/value-generator/hour-time-generator.ts +0 -43
  177. package/src/value-generator/index.ts +0 -1
  178. package/src/value-generator/minute-time-generator.ts +0 -43
  179. package/src/value-generator/month-date-generator.ts +0 -38
  180. package/src/value-generator/now-generator.ts +0 -10
  181. package/src/value-generator/registry.ts +0 -58
  182. package/src/value-generator/time-generator.ts +0 -33
  183. package/src/value-generator/today-generator.ts +0 -10
  184. package/src/value-generator/week-date-generator.ts +0 -40
  185. package/src/value-generator/year-date-generator.ts +0 -36
@@ -79,7 +79,8 @@ const config = {
79
79
  },
80
80
  filter: 'search',
81
81
  sortable: true,
82
- width: 120
82
+ width: 120,
83
+ fixed: true
83
84
  },
84
85
  {
85
86
  type: 'string',
@@ -102,9 +103,14 @@ const config = {
102
103
  header: 'accval',
103
104
  record: {
104
105
  editable: true,
105
- align: 'right'
106
+ align: 'right',
107
+ defaultValue: 100
106
108
  },
107
109
  accumulator: 'avg',
110
+ // accumulator: {
111
+ // type: 'avg',
112
+ // tag: true
113
+ // },
108
114
  sortable: true,
109
115
  width: 130
110
116
  },
@@ -115,7 +121,10 @@ const config = {
115
121
  header: 'accval2',
116
122
  record: {
117
123
  editable: true,
118
- align: 'right'
124
+ align: 'right',
125
+ renderer: (value: any, column: any, record: any) => {
126
+ return value && Intl.NumberFormat('en-US').format(value)
127
+ }
119
128
  },
120
129
  accumulator: {
121
130
  type: 'sum',
@@ -162,9 +171,6 @@ const config = {
162
171
  {
163
172
  name: 'name',
164
173
  desc: true
165
- },
166
- {
167
- name: 'email'
168
174
  }
169
175
  ],
170
176
  pagination: {
@@ -195,137 +201,130 @@ interface ArgTypes {
195
201
  fetchHandler: object
196
202
  }
197
203
 
198
- const Template: Story<ArgTypes> = ({
199
- config,
200
- mode = 'GRID',
201
- urlParamsSensitive = false,
202
- fetchHandler
203
- }: ArgTypes) => html` <link
204
- href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
205
- rel="stylesheet"
206
- />
207
- <link href="/themes/app-theme.css" rel="stylesheet" />
208
- <link href="/themes/oops-theme.css" rel="stylesheet" />
209
- <link href="/themes/grist-theme.css" rel="stylesheet" />
210
-
211
- <style>
212
- ox-grist {
213
- height: 600px;
214
- }
215
-
216
- [slot='headroom'] {
217
- display: flex;
218
- flex-direction: row;
219
- align-items: center;
220
- padding: var(--padding-default) var(--padding-wide);
221
- background-color: var(--theme-white-color);
222
- box-shadow: var(--box-shadow);
204
+ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
205
+ html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
206
+ <link href="/themes/app-theme.css" rel="stylesheet" />
207
+ <link href="/themes/oops-theme.css" rel="stylesheet" />
208
+ <link href="/themes/grist-theme.css" rel="stylesheet" />
223
209
 
224
- --mdc-icon-size: 24px;
225
- }
226
- #sorters mwc-icon,
227
- #modes mwc-icon {
228
- --mdc-icon-size: 18px;
229
- }
230
- #sorters {
231
- margin-left: auto;
232
- margin-right: var(--margin-default);
233
- padding-left: var(--padding-narrow);
234
- border-bottom: var(--border-dark-color);
235
- position: relative;
236
- color: var(--secondary-color);
237
- font-size: var(--fontsize-default);
238
- user-select: none;
239
- }
210
+ <style>
211
+ ox-grist {
212
+ height: 600px;
213
+ }
240
214
 
241
- #sorters > * {
242
- padding: var(--padding-narrow);
243
- vertical-align: middle;
244
- }
215
+ [slot='headroom'] {
216
+ display: flex;
217
+ flex-direction: row;
218
+ align-items: center;
219
+ padding: var(--padding-default) var(--padding-wide);
220
+ background-color: var(--theme-white-color);
221
+ box-shadow: var(--box-shadow);
245
222
 
246
- #modes > * {
247
- padding: var(--padding-narrow);
248
- opacity: 0.5;
249
- color: var(--primary-text-color);
250
- cursor: pointer;
251
- }
223
+ --mdc-icon-size: 24px;
224
+ }
225
+ #sorters mwc-icon,
226
+ #modes mwc-icon {
227
+ --mdc-icon-size: 18px;
228
+ }
229
+ #sorters {
230
+ margin-left: auto;
231
+ margin-right: var(--margin-default);
232
+ padding-left: var(--padding-narrow);
233
+ border-bottom: var(--border-dark-color);
234
+ position: relative;
235
+ color: var(--secondary-color);
236
+ font-size: var(--fontsize-default);
237
+ user-select: none;
238
+ }
252
239
 
253
- #modes > mwc-icon[active] {
254
- border-radius: 9px;
255
- background-color: rgba(var(--primary-color-rgb), 0.05);
256
- opacity: 1;
257
- color: var(--secondary-text-color);
258
- cursor: default;
259
- }
240
+ #sorters > * {
241
+ padding: var(--padding-narrow);
242
+ vertical-align: middle;
243
+ }
260
244
 
261
- #modes > mwc-icon:hover {
262
- opacity: 1;
263
- color: var(--secondary-text-color);
264
- }
245
+ #modes > * {
246
+ padding: var(--padding-narrow);
247
+ opacity: 0.5;
248
+ color: var(--primary-text-color);
249
+ cursor: pointer;
250
+ }
265
251
 
266
- #add {
267
- width: 50px;
268
- text-align: right;
269
- }
252
+ #modes > mwc-icon[active] {
253
+ border-radius: 9px;
254
+ background-color: rgba(var(--primary-color-rgb), 0.05);
255
+ opacity: 1;
256
+ color: var(--secondary-text-color);
257
+ cursor: default;
258
+ }
270
259
 
271
- #add button {
272
- background-color: var(--primary-color);
273
- border: 0;
274
- border-radius: 50%;
275
- padding: 5px;
276
- width: 36px;
277
- height: 36px;
278
- cursor: pointer;
279
- }
260
+ #modes > mwc-icon:hover {
261
+ opacity: 1;
262
+ color: var(--secondary-text-color);
263
+ }
280
264
 
281
- #add button:hover {
282
- background-color: var(--focus-background-color);
283
- box-shadow: var(--box-shadow);
284
- }
265
+ #add {
266
+ width: 50px;
267
+ text-align: right;
268
+ }
285
269
 
286
- #add button mwc-icon {
287
- font-size: 2em;
288
- color: var(--theme-white-color);
289
- }
270
+ #add button {
271
+ background-color: var(--primary-color);
272
+ border: 0;
273
+ border-radius: 50%;
274
+ padding: 5px;
275
+ width: 36px;
276
+ height: 36px;
277
+ cursor: pointer;
278
+ }
290
279
 
291
- #filters {
292
- display: flex;
293
- justify-content: center;
294
- align-items: center;
295
- }
280
+ #add button:hover {
281
+ background-color: var(--focus-background-color);
282
+ box-shadow: var(--box-shadow);
283
+ }
296
284
 
297
- #filters * {
298
- margin-right: var(--margin-default);
299
- }
285
+ #add button mwc-icon {
286
+ font-size: 2em;
287
+ color: var(--theme-white-color);
288
+ }
300
289
 
301
- @media only screen and (max-width: 460px) {
302
290
  #filters {
303
- flex-direction: column;
291
+ display: flex;
292
+ justify-content: center;
293
+ align-items: center;
304
294
  }
305
295
 
306
- #modes {
307
- display: none;
296
+ #filters * {
297
+ margin-right: var(--margin-default);
308
298
  }
309
- }
310
- </style>
311
299
 
312
- <ox-grist
313
- mode="GRID"
314
- .config=${config}
315
- .fetchHandler=${fetchHandler}
316
- ?url-params-sensitive=${urlParamsSensitive}
317
- @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
318
- >
319
- <div slot="headroom">
320
- <div id="filters">
321
- <ox-filters-form autofocus></ox-filters-form>
322
- </div>
300
+ @media only screen and (max-width: 460px) {
301
+ #filters {
302
+ flex-direction: column;
303
+ }
323
304
 
324
- <ox-record-creator id="add" light-popup>
325
- <button><mwc-icon>add</mwc-icon></button>
326
- </ox-record-creator>
327
- </div>
328
- </ox-grist>`
305
+ #modes {
306
+ display: none;
307
+ }
308
+ }
309
+ </style>
310
+
311
+ <ox-grist
312
+ mode="GRID"
313
+ .config=${config}
314
+ .fetchHandler=${fetchHandler}
315
+ ?url-params-sensitive=${urlParamsSensitive}
316
+ @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
317
+ >
318
+ <div slot="headroom">
319
+ <div id="filters">
320
+ <ox-filters-form autofocus></ox-filters-form>
321
+ </div>
322
+
323
+ <ox-record-creator id="add" light-popup>
324
+ <button><mwc-icon>add</mwc-icon></button>
325
+ </ox-record-creator>
326
+ </div>
327
+ </ox-grist>`
329
328
 
330
329
  export const Regular = Template.bind({})
331
330
  Regular.args = {
@@ -24,6 +24,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
24
24
  name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
25
25
  description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
26
26
  number: idx,
27
+ float: 1.3,
27
28
  date: '2023-09-20',
28
29
  routing: {
29
30
  id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
@@ -101,7 +102,8 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
101
102
  editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
102
103
  return record?.name !== 'heartyoh-3'
103
104
  }
104
- }
105
+ },
106
+ width: 40
105
107
  },
106
108
  {
107
109
  type: 'number',
@@ -117,6 +119,15 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
117
119
  },
118
120
  width: 80
119
121
  },
122
+ {
123
+ type: 'float',
124
+ name: 'float',
125
+ header: 'float',
126
+ record: {
127
+ editable: true
128
+ },
129
+ width: 80
130
+ },
120
131
  {
121
132
  type: 'date',
122
133
  name: 'date',
@@ -182,102 +193,101 @@ interface ArgTypes {
182
193
  headerFilter: boolean
183
194
  }
184
195
 
185
- const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) => html` <link
186
- href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
187
- rel="stylesheet"
188
- />
189
- <link href="/themes/app-theme.css" rel="stylesheet" />
190
- <link href="/themes/oops-theme.css" rel="stylesheet" />
191
- <link href="/themes/grist-theme.css" rel="stylesheet" />
196
+ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
197
+ html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
198
+ <link href="/themes/app-theme.css" rel="stylesheet" />
199
+ <link href="/themes/oops-theme.css" rel="stylesheet" />
200
+ <link href="/themes/grist-theme.css" rel="stylesheet" />
192
201
 
193
- <style>
194
- [slot='headroom'] {
195
- display: flex;
196
- flex-direction: row;
197
- align-items: center;
198
- padding: var(--padding-default) var(--padding-wide);
199
- background-color: var(--theme-white-color);
200
- box-shadow: var(--box-shadow);
202
+ <style>
203
+ [slot='headroom'] {
204
+ display: flex;
205
+ flex-direction: row;
206
+ align-items: center;
207
+ padding: var(--padding-default) var(--padding-wide);
208
+ background-color: var(--theme-white-color);
209
+ box-shadow: var(--box-shadow);
201
210
 
202
- --mdc-icon-size: 24px;
203
- }
204
- #sorters mwc-icon,
205
- #modes mwc-icon {
206
- --mdc-icon-size: 18px;
207
- }
208
- #sorters {
209
- margin-left: auto;
210
- margin-right: var(--margin-default);
211
- padding-left: var(--padding-narrow);
212
- border-bottom: var(--border-dark-color);
213
- position: relative;
214
- color: var(--secondary-color);
215
- font-size: var(--fontsize-default);
216
- user-select: none;
217
- }
218
-
219
- #sorters > * {
220
- padding: var(--padding-narrow);
221
- vertical-align: middle;
222
- }
223
-
224
- #filters {
225
- display: flex;
226
- justify-content: center;
227
- align-items: center;
228
- }
211
+ --mdc-icon-size: 24px;
212
+ }
213
+ #sorters mwc-icon,
214
+ #modes mwc-icon {
215
+ --mdc-icon-size: 18px;
216
+ }
217
+ #sorters {
218
+ margin-left: auto;
219
+ margin-right: var(--margin-default);
220
+ padding-left: var(--padding-narrow);
221
+ border-bottom: var(--border-dark-color);
222
+ position: relative;
223
+ color: var(--secondary-color);
224
+ font-size: var(--fontsize-default);
225
+ user-select: none;
226
+ }
229
227
 
230
- #filters * {
231
- margin-right: var(--margin-default);
232
- }
228
+ #sorters > * {
229
+ padding: var(--padding-narrow);
230
+ vertical-align: middle;
231
+ }
233
232
 
234
- @media only screen and (max-width: 460px) {
235
233
  #filters {
236
- flex-direction: column;
234
+ display: flex;
235
+ justify-content: center;
236
+ align-items: center;
237
237
  }
238
238
 
239
- #modes {
240
- display: none;
239
+ #filters * {
240
+ margin-right: var(--margin-default);
241
241
  }
242
- }
243
- </style>
244
242
 
245
- <ox-grist
246
- .config=${buildConfig({ headerFilter })}
247
- mode="GRID"
248
- .fetchHandler=${fetchHandler}
249
- @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
250
- @field-change="${(e: any) => {
251
- console.log(e.detail.record.name, e.detail.record.number)
252
- }}"
253
- >
254
- <div slot="headroom">
255
- <div id="filters">
256
- <ox-filters-form></ox-filters-form>
257
- </div>
243
+ @media only screen and (max-width: 460px) {
244
+ #filters {
245
+ flex-direction: column;
246
+ }
258
247
 
259
- <div id="sorters">
260
- Sort
261
- <mwc-icon
262
- @click=${(e: Event) => {
263
- const target = e.currentTarget as HTMLElement
264
- ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
265
- right: 0,
266
- top: target.offsetTop + target.offsetHeight
267
- })
268
- }}
269
- >expand_more</mwc-icon
270
- >
271
- <ox-popup id="sorter-control">
272
- <ox-sorters-control> </ox-sorters-control>
273
- </ox-popup>
274
- </div>
248
+ #modes {
249
+ display: none;
250
+ }
251
+ }
252
+ </style>
275
253
 
276
- <ox-record-creator id="add" light-popup>
277
- <button><mwc-icon>add</mwc-icon></button>
278
- </ox-record-creator>
279
- </div>
280
- </ox-grist>`
254
+ <ox-grist
255
+ .config=${buildConfig({ headerFilter })}
256
+ mode="GRID"
257
+ .fetchHandler=${fetchHandler}
258
+ @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
259
+ @field-change=${(e: any) => {
260
+ const { name, number, chk } = e.detail.record
261
+ console.log(name, number, chk)
262
+ }}
263
+ >
264
+ <div slot="headroom">
265
+ <div id="filters">
266
+ <ox-filters-form></ox-filters-form>
267
+ </div>
268
+
269
+ <div id="sorters">
270
+ Sort
271
+ <mwc-icon
272
+ @click=${(e: Event) => {
273
+ const target = e.currentTarget as HTMLElement
274
+ ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
275
+ right: 0,
276
+ top: target.offsetTop + target.offsetHeight
277
+ })
278
+ }}
279
+ >expand_more</mwc-icon
280
+ >
281
+ <ox-popup id="sorter-control">
282
+ <ox-sorters-control> </ox-sorters-control>
283
+ </ox-popup>
284
+ </div>
285
+
286
+ <ox-record-creator id="add" light-popup>
287
+ <button><mwc-icon>add</mwc-icon></button>
288
+ </ox-record-creator>
289
+ </div>
290
+ </ox-grist>`
281
291
 
282
292
  export const Regular = Template.bind({})
283
293
  Regular.args = {}
@@ -237,7 +237,10 @@ const config = {
237
237
  editable: true,
238
238
  defaultValue: 10000.1
239
239
  },
240
- filter: 'between',
240
+ filter: {
241
+ operator: 'between',
242
+ value: [1, 100]
243
+ },
241
244
  sortable: true,
242
245
  width: 50
243
246
  },
@@ -266,7 +269,25 @@ const config = {
266
269
  name: 'now'
267
270
  }
268
271
  },
269
- filter: 'between',
272
+ filter: {
273
+ operator: 'between',
274
+ type: 'datetime',
275
+ value: [
276
+ {
277
+ name: 'today',
278
+ params: {
279
+ type: 'datetime'
280
+ }
281
+ },
282
+ {
283
+ name: 'now',
284
+ params: {
285
+ type: 'datetime',
286
+ relativeDays: 1
287
+ }
288
+ }
289
+ ]
290
+ },
270
291
  sortable: true,
271
292
  width: 180
272
293
  },
@@ -41,7 +41,7 @@ body {
41
41
 
42
42
  --grid-record-background-color: var(--theme-white-color);
43
43
  --grid-record-odd-background-color: #f9f7f5;
44
- --grid-record-padding: 0 0 0 var(--padding-default);
44
+ --grid-record-padding: 0 5px 0 5px;
45
45
  --grid-record-color: var(--secondary-color);
46
46
  --grid-record-color-hover: var(--primary-color);
47
47
  --grid-record-wide-fontsize: var(--fontsize-small);
@@ -1,6 +0,0 @@
1
- export type RelativeDateParams = {
2
- relativeDate?: number;
3
- timeZone?: string;
4
- format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
5
- };
6
- export declare const getRelativeDate: (params?: RelativeDateParams) => Date | number | string;
@@ -1,30 +0,0 @@
1
- export const getRelativeDate = (params = {}) => {
2
- const { relativeDate = 0, timeZone, format } = params;
3
- const relativeSeconds = relativeDate * 24 * 60 * 60;
4
- const now = new Date();
5
- let currentDate;
6
- if (timeZone) {
7
- const options = { timeZone };
8
- const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0];
9
- currentDate = new Date(currentDateISOString);
10
- }
11
- else {
12
- currentDate = now;
13
- }
14
- const startOfDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
15
- const targetTime = startOfDay.getTime() + relativeSeconds * 1000;
16
- if (format === 'date') {
17
- return new Date(targetTime);
18
- }
19
- else if (format === 'timestamp') {
20
- return targetTime;
21
- }
22
- else if (format) {
23
- const formatter = new Intl.DateTimeFormat(undefined, format);
24
- return formatter.format(new Date(targetTime));
25
- }
26
- else {
27
- return new Date(targetTime);
28
- }
29
- };
30
- //# sourceMappingURL=date-generator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-generator.js","sourceRoot":"","sources":["../../../src/value-generator/date-generator.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAA6B,EAAE,EAA0B,EAAE;IACzF,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IACrD,MAAM,eAAe,GAAG,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IAEnD,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAA;IACtB,IAAI,WAAiB,CAAA;IAErB,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAA+B,EAAE,QAAQ,EAAE,CAAA;QACxD,MAAM,oBAAoB,GAAG,GAAG,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/E,WAAW,GAAG,IAAI,IAAI,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC;SAAM,CAAC;QACN,WAAW,GAAG,GAAG,CAAA;IACnB,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAA;IACrG,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,EAAE,GAAG,eAAe,GAAG,IAAI,CAAA;IAEhE,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;SAAM,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,UAAU,CAAA;IACnB,CAAC;SAAM,IAAI,MAAM,EAAE,CAAC;QAClB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5D,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;AACH,CAAC,CAAA","sourcesContent":["export type RelativeDateParams = {\n relativeDate?: number\n timeZone?: string\n format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions\n}\n\nexport const getRelativeDate = (params: RelativeDateParams = {}): Date | number | string => {\n const { relativeDate = 0, timeZone, format } = params\n const relativeSeconds = relativeDate * 24 * 60 * 60\n\n const now = new Date()\n let currentDate: Date\n\n if (timeZone) {\n const options: Intl.DateTimeFormatOptions = { timeZone }\n const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]\n currentDate = new Date(currentDateISOString)\n } else {\n currentDate = now\n }\n\n const startOfDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())\n const targetTime = startOfDay.getTime() + relativeSeconds * 1000\n\n if (format === 'date') {\n return new Date(targetTime)\n } else if (format === 'timestamp') {\n return targetTime\n } else if (format) {\n const formatter = new Intl.DateTimeFormat(undefined, format)\n return formatter.format(new Date(targetTime))\n } else {\n return new Date(targetTime)\n }\n}\n"]}
@@ -1,7 +0,0 @@
1
- export type RelativeHourTimeParams = {
2
- timeZone?: string;
3
- format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
4
- relativeHour?: number;
5
- relativeSeconds?: number;
6
- };
7
- export declare const getRelativeHourTime: (params?: RelativeHourTimeParams) => Date | number | string;
@@ -1,29 +0,0 @@
1
- export const getRelativeHourTime = (params = {}) => {
2
- const { relativeHour = 0, relativeSeconds = 0, timeZone, format } = params;
3
- const now = new Date();
4
- let currentDate;
5
- if (timeZone) {
6
- const options = { timeZone };
7
- const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0];
8
- currentDate = new Date(currentDateISOString);
9
- }
10
- else {
11
- currentDate = now;
12
- }
13
- const startOfHour = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), currentDate.getHours(), 0, 0, 0);
14
- const targetTime = startOfHour.getTime() + relativeHour * 60 * 60 * 1000 + relativeSeconds * 1000;
15
- if (format === 'date') {
16
- return new Date(targetTime);
17
- }
18
- else if (format === 'timestamp') {
19
- return targetTime;
20
- }
21
- else if (format) {
22
- const formatter = new Intl.DateTimeFormat(undefined, format);
23
- return formatter.format(new Date(targetTime));
24
- }
25
- else {
26
- return new Date(targetTime);
27
- }
28
- };
29
- //# sourceMappingURL=hour-time-generator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hour-time-generator.js","sourceRoot":"","sources":["../../../src/value-generator/hour-time-generator.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAiC,EAAE,EAA0B,EAAE;IACjG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAE1E,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAA;IACtB,IAAI,WAAiB,CAAA;IAErB,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAA+B,EAAE,QAAQ,EAAE,CAAA;QACxD,MAAM,oBAAoB,GAAG,GAAG,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/E,WAAW,GAAG,IAAI,IAAI,CAAC,oBAAoB,CAAC,CAAA;IAC9C,CAAC;SAAM,CAAC;QACN,WAAW,GAAG,GAAG,CAAA;IACnB,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,IAAI,CAC1B,WAAW,CAAC,WAAW,EAAE,EACzB,WAAW,CAAC,QAAQ,EAAE,EACtB,WAAW,CAAC,OAAO,EAAE,EACrB,WAAW,CAAC,QAAQ,EAAE,EACtB,CAAC,EACD,CAAC,EACD,CAAC,CACF,CAAA;IACD,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,EAAE,GAAG,YAAY,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,eAAe,GAAG,IAAI,CAAA;IAEjG,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;SAAM,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,UAAU,CAAA;IACnB,CAAC;SAAM,IAAI,MAAM,EAAE,CAAC;QAClB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5D,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC;AACH,CAAC,CAAA","sourcesContent":["export type RelativeHourTimeParams = {\n timeZone?: string\n format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions\n relativeHour?: number\n relativeSeconds?: number\n}\n\nexport const getRelativeHourTime = (params: RelativeHourTimeParams = {}): Date | number | string => {\n const { relativeHour = 0, relativeSeconds = 0, timeZone, format } = params\n\n const now = new Date()\n let currentDate: Date\n\n if (timeZone) {\n const options: Intl.DateTimeFormatOptions = { timeZone }\n const currentDateISOString = now.toLocaleString('en-US', options).split(',')[0]\n currentDate = new Date(currentDateISOString)\n } else {\n currentDate = now\n }\n\n const startOfHour = new Date(\n currentDate.getFullYear(),\n currentDate.getMonth(),\n currentDate.getDate(),\n currentDate.getHours(),\n 0,\n 0,\n 0\n )\n const targetTime = startOfHour.getTime() + relativeHour * 60 * 60 * 1000 + relativeSeconds * 1000\n\n if (format === 'date') {\n return new Date(targetTime)\n } else if (format === 'timestamp') {\n return targetTime\n } else if (format) {\n const formatter = new Intl.DateTimeFormat(undefined, format)\n return formatter.format(new Date(targetTime))\n } else {\n return new Date(targetTime)\n }\n}\n"]}
@@ -1 +0,0 @@
1
- export * from './registry';
@@ -1,2 +0,0 @@
1
- export * from './registry';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/value-generator/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA","sourcesContent":["export * from './registry'\n"]}
@@ -1,7 +0,0 @@
1
- export type RelativeMinuteTimeParams = {
2
- timeZone?: string;
3
- format?: 'timestamp' | 'date' | Intl.DateTimeFormatOptions;
4
- relativeMinutes?: number;
5
- relativeSeconds?: number;
6
- };
7
- export declare const getRelativeMinuteTime: (params?: RelativeMinuteTimeParams) => Date | number | string;