@operato/data-grist 2.0.0-alpha.6 → 2.0.0-alpha.61
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.
- package/CHANGELOG.md +272 -0
- package/dist/src/accumulator/accumulator.js +4 -4
- package/dist/src/accumulator/accumulator.js.map +1 -1
- package/dist/src/configure/rows-option-builder.js +2 -1
- package/dist/src/configure/rows-option-builder.js.map +1 -1
- package/dist/src/configure/zero-config.js +1 -0
- package/dist/src/configure/zero-config.js.map +1 -1
- package/dist/src/data-card/data-card.d.ts +1 -1
- package/dist/src/data-card/event-handlers/record-card-click-handler.js +1 -1
- package/dist/src/data-card/event-handlers/record-card-click-handler.js.map +1 -1
- package/dist/src/data-card/record-card.d.ts +1 -1
- package/dist/src/data-grid/data-grid-accum-field.js +3 -2
- package/dist/src/data-grid/data-grid-accum-field.js.map +1 -1
- package/dist/src/data-grid/data-grid-body.d.ts +3 -3
- package/dist/src/data-grid/data-grid-body.js +9 -4
- package/dist/src/data-grid/data-grid-body.js.map +1 -1
- package/dist/src/data-grid/data-grid-field.d.ts +1 -1
- package/dist/src/data-grid/data-grid-field.js +2 -2
- package/dist/src/data-grid/data-grid-field.js.map +1 -1
- package/dist/src/data-grid/data-grid-footer.d.ts +1 -1
- package/dist/src/data-grid/data-grid-header.js +26 -25
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grid/data-grid.d.ts +1 -1
- package/dist/src/data-grid/data-grid.js +1 -1
- package/dist/src/data-grid/data-grid.js.map +1 -1
- package/dist/src/data-grist.d.ts +226 -4
- package/dist/src/data-grist.js +196 -4
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/data-list/data-list-gutter.js +12 -0
- package/dist/src/data-list/data-list-gutter.js.map +1 -1
- package/dist/src/data-list/data-list.d.ts +1 -1
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js +1 -1
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js.map +1 -1
- package/dist/src/data-list/record-partial.d.ts +1 -1
- package/dist/src/data-list/record-partial.js +2 -0
- package/dist/src/data-list/record-partial.js.map +1 -1
- package/dist/src/data-manipulator.d.ts +6 -6
- package/dist/src/data-manipulator.js +44 -29
- package/dist/src/data-manipulator.js.map +1 -1
- package/dist/src/data-report/data-report-body.d.ts +1 -1
- package/dist/src/data-report/data-report-component.d.ts +1 -1
- package/dist/src/data-report.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-checkbox.d.ts +3 -2
- package/dist/src/editors/ox-grist-editor-checkbox.js +9 -2
- package/dist/src/editors/ox-grist-editor-checkbox.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-color.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-date.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-datetime.d.ts +2 -2
- package/dist/src/editors/ox-grist-editor-datetime.js +1 -2
- package/dist/src/editors/ox-grist-editor-datetime.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-email.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-file.d.ts +3 -2
- package/dist/src/editors/ox-grist-editor-file.js +8 -2
- package/dist/src/editors/ox-grist-editor-file.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-image.d.ts +2 -2
- package/dist/src/editors/ox-grist-editor-image.js +8 -8
- package/dist/src/editors/ox-grist-editor-image.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-month.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-multiple-select.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-number.d.ts +3 -2
- package/dist/src/editors/ox-grist-editor-number.js +10 -9
- package/dist/src/editors/ox-grist-editor-number.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-password.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-select.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-tel.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-text.d.ts +2 -1
- package/dist/src/editors/ox-grist-editor-text.js +3 -0
- package/dist/src/editors/ox-grist-editor-text.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-textarea.d.ts +2 -1
- package/dist/src/editors/ox-grist-editor-textarea.js +3 -0
- package/dist/src/editors/ox-grist-editor-textarea.js.map +1 -1
- package/dist/src/editors/ox-grist-editor-time.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-tree.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor-week.d.ts +1 -1
- package/dist/src/editors/ox-grist-editor.d.ts +4 -4
- package/dist/src/editors/ox-grist-editor.js +14 -12
- package/dist/src/editors/ox-grist-editor.js.map +1 -1
- package/dist/src/editors/ox-input-tree.d.ts +1 -1
- package/dist/src/empty-note.d.ts +1 -1
- package/dist/src/filters/filter-range-date.js +12 -1
- package/dist/src/filters/filter-range-date.js.map +1 -1
- package/dist/src/filters/filters-form.d.ts +1 -0
- package/dist/src/filters/filters-form.js +41 -23
- package/dist/src/filters/filters-form.js.map +1 -1
- package/dist/src/handlers/contextmenu-tree-mutation.js +1 -19
- package/dist/src/handlers/contextmenu-tree-mutation.js.map +1 -1
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/record-view/record-creator.d.ts +1 -1
- package/dist/src/record-view/record-view-body.d.ts +2 -2
- package/dist/src/record-view/record-view.d.ts +1 -1
- package/dist/src/renderers/ox-grist-renderer-progress.d.ts +1 -1
- package/dist/src/renderers/ox-grist-renderer-tree.d.ts +1 -1
- package/dist/src/renderers/ox-grist-renderer.d.ts +2 -2
- package/dist/src/types.d.ts +1 -8
- package/dist/src/types.js.map +1 -1
- package/dist/stories/accumulator.stories.js +117 -114
- package/dist/stories/accumulator.stories.js.map +1 -1
- package/dist/stories/dynamic-editable.stories.js +89 -80
- package/dist/stories/dynamic-editable.stories.js.map +1 -1
- package/dist/stories/grist-modes.stories.js +23 -2
- package/dist/stories/grist-modes.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/docs/default-value/default-value.md +1 -1
- package/docs/default-value/value-generator/date-generator.md +2 -2
- package/docs/default-value/value-generator/month-date-generator.md +2 -2
- package/docs/default-value/value-generator/week-date-generator.md +2 -2
- package/docs/default-value/value-generator/year-date-generator.md +2 -2
- package/package.json +20 -19
- package/src/accumulator/accumulator.ts +4 -4
- package/src/configure/rows-option-builder.ts +11 -1
- package/src/configure/zero-config.ts +1 -0
- package/src/data-card/event-handlers/record-card-click-handler.ts +1 -1
- package/src/data-grid/data-grid-accum-field.ts +3 -2
- package/src/data-grid/data-grid-body.ts +10 -5
- package/src/data-grid/data-grid-field.ts +1 -1
- package/src/data-grid/data-grid-header.ts +57 -56
- package/src/data-grid/data-grid.ts +3 -3
- package/src/data-grist.ts +251 -4
- package/src/data-list/data-list-gutter.ts +12 -0
- package/src/data-list/event-handlers/record-partial-click-handler.ts +1 -1
- package/src/data-list/record-partial.ts +2 -0
- package/src/data-manipulator.ts +52 -31
- package/src/editors/ox-grist-editor-checkbox.ts +12 -2
- package/src/editors/ox-grist-editor-datetime.ts +1 -2
- package/src/editors/ox-grist-editor-file.ts +12 -2
- package/src/editors/ox-grist-editor-image.ts +10 -7
- package/src/editors/ox-grist-editor-number.ts +11 -9
- package/src/editors/ox-grist-editor-text.ts +4 -0
- package/src/editors/ox-grist-editor-textarea.ts +4 -0
- package/src/editors/ox-grist-editor.ts +14 -10
- package/src/filters/filter-range-date.ts +16 -1
- package/src/filters/filters-form.ts +69 -46
- package/src/handlers/contextmenu-tree-mutation.ts +1 -19
- package/src/index.ts +0 -1
- package/src/types.ts +1 -9
- package/stories/accumulator.stories.ts +118 -119
- package/stories/dynamic-editable.stories.ts +96 -86
- package/stories/grist-modes.stories.ts +23 -2
- package/themes/grist-theme.css +1 -1
- package/dist/src/value-generator/date-generator.d.ts +0 -6
- package/dist/src/value-generator/date-generator.js +0 -30
- package/dist/src/value-generator/date-generator.js.map +0 -1
- package/dist/src/value-generator/hour-time-generator.d.ts +0 -7
- package/dist/src/value-generator/hour-time-generator.js +0 -29
- package/dist/src/value-generator/hour-time-generator.js.map +0 -1
- package/dist/src/value-generator/index.d.ts +0 -1
- package/dist/src/value-generator/index.js +0 -2
- package/dist/src/value-generator/index.js.map +0 -1
- package/dist/src/value-generator/minute-time-generator.d.ts +0 -7
- package/dist/src/value-generator/minute-time-generator.js +0 -29
- package/dist/src/value-generator/minute-time-generator.js.map +0 -1
- package/dist/src/value-generator/month-date-generator.d.ts +0 -7
- package/dist/src/value-generator/month-date-generator.js +0 -31
- package/dist/src/value-generator/month-date-generator.js.map +0 -1
- package/dist/src/value-generator/now-generator.d.ts +0 -4
- package/dist/src/value-generator/now-generator.js +0 -8
- package/dist/src/value-generator/now-generator.js.map +0 -1
- package/dist/src/value-generator/registry.d.ts +0 -11
- package/dist/src/value-generator/registry.js +0 -50
- package/dist/src/value-generator/registry.js.map +0 -1
- package/dist/src/value-generator/time-generator.d.ts +0 -6
- package/dist/src/value-generator/time-generator.js +0 -28
- package/dist/src/value-generator/time-generator.js.map +0 -1
- package/dist/src/value-generator/today-generator.d.ts +0 -4
- package/dist/src/value-generator/today-generator.js +0 -8
- package/dist/src/value-generator/today-generator.js.map +0 -1
- package/dist/src/value-generator/week-date-generator.d.ts +0 -7
- package/dist/src/value-generator/week-date-generator.js +0 -29
- package/dist/src/value-generator/week-date-generator.js.map +0 -1
- package/dist/src/value-generator/year-date-generator.d.ts +0 -7
- package/dist/src/value-generator/year-date-generator.js +0 -29
- package/dist/src/value-generator/year-date-generator.js.map +0 -1
- package/src/value-generator/date-generator.ts +0 -35
- package/src/value-generator/hour-time-generator.ts +0 -43
- package/src/value-generator/index.ts +0 -1
- package/src/value-generator/minute-time-generator.ts +0 -43
- package/src/value-generator/month-date-generator.ts +0 -38
- package/src/value-generator/now-generator.ts +0 -10
- package/src/value-generator/registry.ts +0 -58
- package/src/value-generator/time-generator.ts +0 -33
- package/src/value-generator/today-generator.ts +0 -10
- package/src/value-generator/week-date-generator.ts +0 -40
- 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
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
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
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
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
|
-
|
242
|
-
|
243
|
-
|
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
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
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
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
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
|
-
|
262
|
-
|
263
|
-
|
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
|
-
|
267
|
-
|
268
|
-
|
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
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
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
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
265
|
+
#add {
|
266
|
+
width: 50px;
|
267
|
+
text-align: right;
|
268
|
+
}
|
285
269
|
|
286
|
-
|
287
|
-
|
288
|
-
|
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
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
}
|
280
|
+
#add button:hover {
|
281
|
+
background-color: var(--focus-background-color);
|
282
|
+
box-shadow: var(--box-shadow);
|
283
|
+
}
|
296
284
|
|
297
|
-
|
298
|
-
|
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
|
-
|
291
|
+
display: flex;
|
292
|
+
justify-content: center;
|
293
|
+
align-items: center;
|
304
294
|
}
|
305
295
|
|
306
|
-
#
|
307
|
-
|
296
|
+
#filters * {
|
297
|
+
margin-right: var(--margin-default);
|
308
298
|
}
|
309
|
-
}
|
310
|
-
</style>
|
311
299
|
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
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
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
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) =>
|
186
|
-
|
187
|
-
rel="stylesheet"
|
188
|
-
|
189
|
-
|
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
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
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
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
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
|
-
|
231
|
-
|
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
|
-
|
234
|
+
display: flex;
|
235
|
+
justify-content: center;
|
236
|
+
align-items: center;
|
237
237
|
}
|
238
238
|
|
239
|
-
#
|
240
|
-
|
239
|
+
#filters * {
|
240
|
+
margin-right: var(--margin-default);
|
241
241
|
}
|
242
|
-
}
|
243
|
-
</style>
|
244
242
|
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
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
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
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
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
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:
|
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:
|
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
|
},
|
package/themes/grist-theme.css
CHANGED
@@ -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
|
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,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 +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;
|