@operato/data-grist 2.0.0-alpha.64 → 2.0.0-alpha.68
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 +9 -0
- package/demo/data-grist-test.html +25 -14
- package/demo/index.html +25 -14
- package/demo/report-test.html +13 -2
- package/dist/src/data-card/data-card-gutter-menu.d.ts +1 -1
- package/dist/src/data-card/data-card-gutter-menu.js +5 -5
- package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
- package/dist/src/data-card/data-card.d.ts +1 -1
- package/dist/src/data-card/data-card.js +3 -3
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/data-card/record-card.d.ts +1 -1
- package/dist/src/data-card/record-card.js +26 -26
- package/dist/src/data-card/record-card.js.map +1 -1
- package/dist/src/data-grid/data-grid-accum-field.js +5 -1
- package/dist/src/data-grid/data-grid-accum-field.js.map +1 -1
- package/dist/src/data-grid/data-grid-footer.d.ts +1 -1
- package/dist/src/data-grid/data-grid-footer.js +17 -9
- package/dist/src/data-grid/data-grid-footer.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.d.ts +1 -1
- package/dist/src/data-grid/data-grid-header.js +13 -15
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grist.js +21 -21
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/data-list/data-list.d.ts +1 -1
- package/dist/src/data-list/data-list.js +3 -3
- package/dist/src/data-list/data-list.js.map +1 -1
- package/dist/src/data-list/record-partial.d.ts +1 -1
- package/dist/src/data-list/record-partial.js +19 -19
- package/dist/src/data-list/record-partial.js.map +1 -1
- package/dist/src/empty-note.d.ts +1 -1
- package/dist/src/empty-note.js +3 -3
- package/dist/src/empty-note.js.map +1 -1
- package/dist/src/gutters/gutter-button.d.ts +1 -1
- package/dist/src/gutters/gutter-button.js +3 -3
- package/dist/src/gutters/gutter-button.js.map +1 -1
- package/dist/src/gutters/gutter-dirty.d.ts +1 -1
- package/dist/src/gutters/gutter-dirty.js +5 -5
- package/dist/src/gutters/gutter-dirty.js.map +1 -1
- package/dist/src/handlers/contextmenu-tree-mutation.js +4 -4
- package/dist/src/handlers/contextmenu-tree-mutation.js.map +1 -1
- package/dist/src/record-view/record-creator.d.ts +1 -1
- package/dist/src/record-view/record-creator.js +1 -1
- package/dist/src/record-view/record-creator.js.map +1 -1
- package/dist/src/record-view/record-view-body.d.ts +1 -1
- package/dist/src/record-view/record-view-body.js +4 -4
- package/dist/src/record-view/record-view-body.js.map +1 -1
- package/dist/src/record-view/record-view.d.ts +1 -1
- package/dist/src/record-view/record-view.js +5 -5
- package/dist/src/record-view/record-view.js.map +1 -1
- package/dist/src/sorters/sorters-control.js +3 -3
- package/dist/src/sorters/sorters-control.js.map +1 -1
- package/dist/stories/accumulator.stories.d.ts +1 -1
- package/dist/stories/accumulator.stories.js +22 -10
- package/dist/stories/accumulator.stories.js.map +1 -1
- package/dist/stories/barcode-input-filter.stories.d.ts +1 -1
- package/dist/stories/barcode-input-filter.stories.js +80 -72
- package/dist/stories/barcode-input-filter.stories.js.map +1 -1
- package/dist/stories/default-filters.stories.d.ts +1 -1
- package/dist/stories/default-filters.stories.js +80 -72
- package/dist/stories/default-filters.stories.js.map +1 -1
- package/dist/stories/dynamic-editable.stories.d.ts +1 -1
- package/dist/stories/dynamic-editable.stories.js +21 -9
- package/dist/stories/dynamic-editable.stories.js.map +1 -1
- package/dist/stories/empty-sorters.stories.d.ts +1 -1
- package/dist/stories/empty-sorters.stories.js +80 -71
- package/dist/stories/empty-sorters.stories.js.map +1 -1
- package/dist/stories/explicit-fetch.stories.d.ts +1 -1
- package/dist/stories/explicit-fetch.stories.js +81 -72
- package/dist/stories/explicit-fetch.stories.js.map +1 -1
- package/dist/stories/fixed-column.stories.d.ts +1 -1
- package/dist/stories/fixed-column.stories.js +122 -113
- package/dist/stories/fixed-column.stories.js.map +1 -1
- package/dist/stories/grist-modes.stories.d.ts +1 -1
- package/dist/stories/grist-modes.stories.js +132 -123
- package/dist/stories/grist-modes.stories.js.map +1 -1
- package/dist/stories/group-header.stories.d.ts +1 -1
- package/dist/stories/group-header.stories.js +122 -113
- package/dist/stories/group-header.stories.js.map +1 -1
- package/dist/stories/textarea.stories.d.ts +1 -1
- package/dist/stories/textarea.stories.js +113 -104
- package/dist/stories/textarea.stories.js.map +1 -1
- package/dist/stories/tree-column-with-checkbox.stories.d.ts +1 -1
- package/dist/stories/tree-column-with-checkbox.stories.js +126 -117
- package/dist/stories/tree-column-with-checkbox.stories.js.map +1 -1
- package/dist/stories/tree-column.stories.d.ts +1 -1
- package/dist/stories/tree-column.stories.js +126 -117
- package/dist/stories/tree-column.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/data-card/data-card-gutter-menu.ts +5 -5
- package/src/data-card/data-card.ts +3 -3
- package/src/data-card/record-card.ts +30 -32
- package/src/data-grid/data-grid-accum-field.ts +5 -1
- package/src/data-grid/data-grid-footer.ts +18 -11
- package/src/data-grid/data-grid-header.ts +13 -15
- package/src/data-grist.ts +23 -23
- package/src/data-list/data-list.ts +3 -3
- package/src/data-list/record-partial.ts +21 -23
- package/src/empty-note.ts +3 -3
- package/src/gutters/gutter-button.ts +3 -3
- package/src/gutters/gutter-dirty.ts +5 -5
- package/src/handlers/contextmenu-tree-mutation.ts +4 -4
- package/src/record-view/record-creator.ts +1 -1
- package/src/record-view/record-view-body.ts +4 -4
- package/src/record-view/record-view.ts +5 -5
- package/src/sorters/sorters-control.ts +3 -3
- package/stories/accumulator.stories.ts +22 -10
- package/stories/barcode-input-filter.stories.ts +91 -82
- package/stories/default-filters.stories.ts +91 -82
- package/stories/dynamic-editable.stories.ts +21 -9
- package/stories/empty-sorters.stories.ts +92 -82
- package/stories/explicit-fetch.stories.ts +93 -83
- package/stories/fixed-column.stories.ts +134 -124
- package/stories/grist-modes.stories.ts +144 -139
- package/stories/group-header.stories.ts +134 -124
- package/stories/textarea.stories.ts +115 -110
- package/stories/tree-column-with-checkbox.stories.ts +134 -124
- package/stories/tree-column.stories.ts +134 -124
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/data-grist
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -38,7 +38,18 @@
|
|
|
38
38
|
}
|
|
39
39
|
</style>
|
|
40
40
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
41
|
-
<link
|
|
41
|
+
<link
|
|
42
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
43
|
+
rel="stylesheet"
|
|
44
|
+
/>
|
|
45
|
+
<link
|
|
46
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
47
|
+
rel="stylesheet"
|
|
48
|
+
/>
|
|
49
|
+
<link
|
|
50
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
51
|
+
rel="stylesheet"
|
|
52
|
+
/>
|
|
42
53
|
|
|
43
54
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
44
55
|
<link href="/themes/oops-theme.css" rel="stylesheet" />
|
|
@@ -53,7 +64,7 @@
|
|
|
53
64
|
import '../dist/src/sorters/sorters-control.js'
|
|
54
65
|
import '../dist/src/record-view/record-creator.js'
|
|
55
66
|
import '@operato/popup/ox-popup-list.js'
|
|
56
|
-
import '@material/
|
|
67
|
+
import '@material/web/icon/icon.js'
|
|
57
68
|
import { CommonGristStyles } from '@operato/styles'
|
|
58
69
|
|
|
59
70
|
const fetchHandler = async ({ page, limit, sorters = [] }) => {
|
|
@@ -91,10 +102,10 @@
|
|
|
91
102
|
idx % 4 === 0
|
|
92
103
|
? '' /* no source */
|
|
93
104
|
: idx % 4 === 1
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
105
|
+
? `http://www.hatiolab.com/assets/img/operato-biz3.png`
|
|
106
|
+
: idx % 4 === 2
|
|
107
|
+
? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
|
|
108
|
+
: `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
|
|
98
109
|
role: ['admin', 'worker', 'tester'][idx % 3],
|
|
99
110
|
color: idx % 2 ? `#87f018` : `#180f87`,
|
|
100
111
|
rate: Math.round(Math.random() * 100),
|
|
@@ -411,7 +422,7 @@
|
|
|
411
422
|
|
|
412
423
|
<div id="sorters">
|
|
413
424
|
Sort
|
|
414
|
-
<
|
|
425
|
+
<md-icon
|
|
415
426
|
@click=${e => {
|
|
416
427
|
const target = e.currentTarget
|
|
417
428
|
this.renderRoot.querySelector('#sorter-control').open({
|
|
@@ -419,7 +430,7 @@
|
|
|
419
430
|
top: target.offsetTop + target.offsetHeight
|
|
420
431
|
})
|
|
421
432
|
}}
|
|
422
|
-
>expand_more</
|
|
433
|
+
>expand_more</md-icon
|
|
423
434
|
>
|
|
424
435
|
<ox-popup id="sorter-control">
|
|
425
436
|
<ox-sorters-control> </ox-sorters-control>
|
|
@@ -427,16 +438,16 @@
|
|
|
427
438
|
</div>
|
|
428
439
|
|
|
429
440
|
<div id="modes">
|
|
430
|
-
<
|
|
431
|
-
<
|
|
432
|
-
<
|
|
441
|
+
<md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
|
|
442
|
+
<md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
|
|
443
|
+
<md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
|
|
433
444
|
</div>
|
|
434
445
|
|
|
435
446
|
<ox-record-creator id="add" light-popup>
|
|
436
|
-
<button><
|
|
447
|
+
<button><md-icon>add</md-icon></button>
|
|
437
448
|
</ox-record-creator>
|
|
438
449
|
|
|
439
|
-
<button @click=${e => this.grist.cloneSelectedRecords()}><
|
|
450
|
+
<button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
|
|
440
451
|
</div>
|
|
441
452
|
</ox-grist>
|
|
442
453
|
`
|
package/demo/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -39,7 +39,18 @@
|
|
|
39
39
|
}
|
|
40
40
|
</style>
|
|
41
41
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
42
|
-
<link
|
|
42
|
+
<link
|
|
43
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
44
|
+
rel="stylesheet"
|
|
45
|
+
/>
|
|
46
|
+
<link
|
|
47
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
48
|
+
rel="stylesheet"
|
|
49
|
+
/>
|
|
50
|
+
<link
|
|
51
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
52
|
+
rel="stylesheet"
|
|
53
|
+
/>
|
|
43
54
|
|
|
44
55
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
45
56
|
<link href="/themes/oops-theme.css" rel="stylesheet" />
|
|
@@ -54,7 +65,7 @@
|
|
|
54
65
|
import '../dist/src/sorters/sorters-control.js'
|
|
55
66
|
import '../dist/src/record-view/record-creator.js'
|
|
56
67
|
import '@operato/popup/ox-popup-list.js'
|
|
57
|
-
import '@material/
|
|
68
|
+
import '@material/web/icon/icon.js'
|
|
58
69
|
import { CommonGristStyles } from '@operato/styles'
|
|
59
70
|
|
|
60
71
|
const fetchHandler = async ({ page, limit, sorters = [], filters }) => {
|
|
@@ -93,10 +104,10 @@
|
|
|
93
104
|
idx % 4 === 0
|
|
94
105
|
? '' /* no source */
|
|
95
106
|
: idx % 4 === 1
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
107
|
+
? `http://www.hatiolab.com/assets/img/operato-biz3.png`
|
|
108
|
+
: idx % 4 === 2
|
|
109
|
+
? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
|
|
110
|
+
: `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
|
|
100
111
|
file: 'abce.txt',
|
|
101
112
|
number: 100200300,
|
|
102
113
|
role: ['admin', 'worker', 'tester'][idx % 3],
|
|
@@ -484,7 +495,7 @@
|
|
|
484
495
|
|
|
485
496
|
<div id="sorters">
|
|
486
497
|
Sort
|
|
487
|
-
<
|
|
498
|
+
<md-icon
|
|
488
499
|
@click=${e => {
|
|
489
500
|
const target = e.currentTarget
|
|
490
501
|
this.renderRoot.querySelector('#sorter-control').open({
|
|
@@ -492,7 +503,7 @@
|
|
|
492
503
|
top: target.offsetTop + target.offsetHeight
|
|
493
504
|
})
|
|
494
505
|
}}
|
|
495
|
-
>expand_more</
|
|
506
|
+
>expand_more</md-icon
|
|
496
507
|
>
|
|
497
508
|
<ox-popup id="sorter-control">
|
|
498
509
|
<ox-sorters-control> </ox-sorters-control>
|
|
@@ -500,16 +511,16 @@
|
|
|
500
511
|
</div>
|
|
501
512
|
|
|
502
513
|
<div id="modes">
|
|
503
|
-
<
|
|
504
|
-
<
|
|
505
|
-
<
|
|
514
|
+
<md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
|
|
515
|
+
<md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
|
|
516
|
+
<md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
|
|
506
517
|
</div>
|
|
507
518
|
|
|
508
519
|
<ox-record-creator id="add" light-popup>
|
|
509
|
-
<button><
|
|
520
|
+
<button><md-icon>add</md-icon></button>
|
|
510
521
|
</ox-record-creator>
|
|
511
522
|
|
|
512
|
-
<button @click=${e => this.grist.cloneSelectedRecords()}><
|
|
523
|
+
<button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
|
|
513
524
|
</div>
|
|
514
525
|
</ox-grist>
|
|
515
526
|
`
|
package/demo/report-test.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -35,7 +35,18 @@
|
|
|
35
35
|
}
|
|
36
36
|
</style>
|
|
37
37
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
38
|
-
<link
|
|
38
|
+
<link
|
|
39
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
40
|
+
rel="stylesheet"
|
|
41
|
+
/>
|
|
42
|
+
<link
|
|
43
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
44
|
+
rel="stylesheet"
|
|
45
|
+
/>
|
|
46
|
+
<link
|
|
47
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
48
|
+
rel="stylesheet"
|
|
49
|
+
/>
|
|
39
50
|
|
|
40
51
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
41
52
|
<link href="/themes/oops-theme.css" rel="stylesheet" />
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
2
|
import './data-card-gutter.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import './data-card-gutter.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
5
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
@@ -7,7 +7,7 @@ import { OxPopup } from '@operato/popup';
|
|
|
7
7
|
let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
|
|
8
8
|
render() {
|
|
9
9
|
return html `
|
|
10
|
-
<
|
|
10
|
+
<md-icon @click=${(e) => this.open(e)}>more_horiz</md-icon>
|
|
11
11
|
<slot></slot>
|
|
12
12
|
`;
|
|
13
13
|
}
|
|
@@ -55,7 +55,7 @@ DataCardGutterMenu.styles = css `
|
|
|
55
55
|
padding: 4px;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
md-icon {
|
|
59
59
|
flex: 1;
|
|
60
60
|
margin: 0;
|
|
61
61
|
margin-bottom: 1px;
|
|
@@ -65,7 +65,7 @@ DataCardGutterMenu.styles = css `
|
|
|
65
65
|
font-size: var(--grid-record-fontsize);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
md-icon:hover {
|
|
69
69
|
cursor: pointer;
|
|
70
70
|
color: var(--grid-record-color-hover);
|
|
71
71
|
}
|
|
@@ -86,7 +86,7 @@ __decorate([
|
|
|
86
86
|
property()
|
|
87
87
|
], DataCardGutterMenu.prototype, "dblclickHandler", void 0);
|
|
88
88
|
__decorate([
|
|
89
|
-
query('
|
|
89
|
+
query('md-icon')
|
|
90
90
|
], DataCardGutterMenu.prototype, "icon", void 0);
|
|
91
91
|
DataCardGutterMenu = __decorate([
|
|
92
92
|
customElement('ox-card-gutter-menu')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAKxC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAkCzC,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;KAE7C,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEE,IAAI,CAAC,QAAQ;sBACf,MAAM;sBACN,IAAI,CAAC,MAAM;qBACZ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;;;qBAGxB,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;YACpB,mBAAmB;QACrB,CAAC;wBACW,CAAC,CAAQ,EAAE,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;YACvB,mBAAmB;QACrB,CAAC;;SAEJ,CACF;KACF,CAAA;IACH,CAAC;IAED,IAAI,CAAC,CAAQ;QACX,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAI,IAAI,CAAC,IAAoB,CAAC,YAAY,CAAA;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,CAAA;QACf,MAAM,MAAM,GAAG,IAAI,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC;YACX,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;YAC3B,MAAM;YACN,IAAI;YACJ,MAAM;SACP,CAAC,CAAA;IACJ,CAAC;;AA9EM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBlB,AAvBY,CAuBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AACpC;IAAX,QAAQ,EAAE;wDAA6B;AAC5B;IAAX,QAAQ,EAAE;2DAAgC;AAEzB;IAAjB,KAAK,CAAC,SAAS,CAAC;gDAAe;AAhC5B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAgFvB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-card-gutter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-gutter-menu')\nclass DataCardGutterMenu extends LitElement {\n static styles = css`\n :host {\n position: relative;\n }\n\n ::slotted(ox-popup) {\n padding: 4px;\n }\n\n md-icon {\n flex: 1;\n margin: 0;\n margin-bottom: 1px;\n border: var(--data-card-item-btn-border);\n border-radius: var(--data-card-item-btn-border-radius);\n padding: var(--data-card-item-btn-padding);\n font-size: var(--grid-record-fontsize);\n }\n\n md-icon:hover {\n cursor: pointer;\n color: var(--grid-record-color-hover);\n }\n `\n\n @property({ type: Object }) gutters!: ColumnConfig[]\n @property({ type: Number }) rowIndex!: number\n @property({ type: Object }) record!: GristRecord\n @property() clickHandler!: EventListener\n @property() dblclickHandler!: EventListener\n\n @query('md-icon') icon!: Element\n\n render() {\n return html`\n <md-icon @click=${(e: Event) => this.open(e)}>more_horiz</md-icon>\n <slot></slot>\n `\n }\n\n menuRender() {\n return html`\n ${this.gutters.map(\n gutter => html`\n <ox-card-gutter\n .rowIndex=${this.rowIndex}\n .column=${gutter}\n .record=${this.record}\n .value=${this.record[gutter.name]}\n menu\n alive-on-select\n @click=${(e: Event) => {\n this.clickHandler(e)\n // TODO close popup\n }}\n @dblclick=${(e: Event) => {\n this.dblclickHandler(e)\n // TODO close popup\n }}\n ></ox-card-gutter>\n `\n )}\n `\n }\n\n open(e: Event) {\n e.stopPropagation()\n\n const bottom = (this.icon as HTMLElement).offsetHeight\n const left = -4\n const parent = this\n\n OxPopup.open({\n template: this.menuRender(),\n bottom,\n left,\n parent\n })\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import '../empty-note';
|
|
4
4
|
import './record-card';
|
|
5
5
|
import { css, html } from 'lit';
|
|
@@ -62,7 +62,7 @@ let DataCard = class DataCard extends DataManipulator {
|
|
|
62
62
|
${this.empty ? html ` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html ``}
|
|
63
63
|
${this.isTop
|
|
64
64
|
? html ``
|
|
65
|
-
: html ` <
|
|
65
|
+
: html ` <md-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `}
|
|
66
66
|
`;
|
|
67
67
|
}
|
|
68
68
|
gotoTop(e) {
|
|
@@ -105,7 +105,7 @@ DataCard.styles = [
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
#upward {
|
|
108
|
-
--
|
|
108
|
+
--md-icon-size: 26px;
|
|
109
109
|
position: absolute;
|
|
110
110
|
top: var(--data-card-fab-position-vertical);
|
|
111
111
|
right: var(--data-card-fab-position-horizontal);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n static styles = [\n css`\n :host {\n background-color: var(--data-card-background-color);\n overflow-y: auto;\n padding: var(--padding-wide);\n\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n\n grid-template-rows: min-content;\n\n grid-gap: var(--margin-wide);\n }\n\n ox-record-card {\n height: min-content;\n align-items: stretch;\n background-color: var(--data-card-record-card-background-color);\n border: var(--data-card-record-card-border);\n border-radius: var(--data-card-record-card-border-radius);\n }\n ox-record-card:hover {\n border: var(--data-card-record-card-border-hover);\n box-shadow: var(--data-card-record-card-boxshadow-hover);\n }\n\n [selected-row] {\n background-color: var(--data-card-record-card-selected-border);\n }\n\n #upward {\n --md-icon-size: 26px;\n position: absolute;\n top: var(--data-card-fab-position-vertical);\n right: var(--data-card-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 20px;\n color: var(--data-card-fab-color);\n box-shadow: var(--data-card-fab-shadow);\n padding: 7px;\n }\n\n slot {\n width: 100%;\n }\n\n ox-empty-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n @media screen and (max-width: 460px) {\n #setting {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n }\n }\n `\n ]\n\n @property({ type: Boolean }) empty?: boolean\n\n @state() private _records: GristRecord[] = []\n @state() private isTop: boolean = false\n\n private _total: number = 0\n private _limit: number = 20\n private _page: number = 1\n\n firstUpdated(changes: PropertyValues<this>) {\n this.isTop = true\n\n /* infinite scrolling */\n this.addEventListener('scroll', e => {\n const totalScrollHeight = this.scrollHeight\n const screenHeight = this.offsetHeight\n const currentScrollTop = this.scrollTop\n\n if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n var lastPage = Math.ceil(this._total / this._limit)\n\n if (this._page < lastPage) {\n this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n }\n }\n\n this.isTop = this.scrollTop == 0\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._records = []\n this._page = 1\n }\n\n if (changes.has('data')) {\n this._records = this.data.records\n this._total = this.data.total || 0\n this._limit = this.data.limit || 20\n this._page = this.data.page || 0\n }\n }\n\n render() {\n var records = this._records || []\n\n if (this.config && this.config.rows.appendable) {\n records = [...records, { __dirty__: '+' }]\n }\n\n return html`\n ${records.map(\n (record, rowIndex) => html`\n <ox-record-card\n .config=${this.config}\n .data=${this.data}\n .record=${record}\n .rowIndex=${rowIndex}\n ?selected-row=${record['__selected__']}\n ?dirty=${record['__dirty__']}\n ></ox-record-card>\n `\n )}\n ${this.empty ? html` <ox-empty-note title=\"NO RECORDS\"></ox-empty-note> ` : html``}\n ${this.isTop\n ? html``\n : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n `\n }\n\n gotoTop(e: Event) {\n this.scrollTop = 0\n\n e.stopPropagation()\n }\n\n get pullToRefreshTarget() {\n return this\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import './data-card-field';
|
|
4
4
|
import '../record-view';
|
|
5
5
|
import './data-card-gutter';
|
|
@@ -78,7 +78,7 @@ let RecordCard = class RecordCard extends LitElement {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
return html `
|
|
81
|
-
${dirtyIcon ? html ` <
|
|
81
|
+
${dirtyIcon ? html ` <md-icon dirty>${dirtyIcon}</md-icon> ` : html ``}
|
|
82
82
|
${thumbnailColumn
|
|
83
83
|
? html ` <ox-card-field
|
|
84
84
|
thumbnail
|
|
@@ -112,40 +112,40 @@ let RecordCard = class RecordCard extends LitElement {
|
|
|
112
112
|
`
|
|
113
113
|
: gutters.length > 2
|
|
114
114
|
? html `
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
115
|
+
<ox-card-gutter-menu
|
|
116
|
+
.gutters=${gutters}
|
|
117
|
+
.rowIndex=${rowIndex}
|
|
118
|
+
.record=${record}
|
|
119
|
+
.clickHandler=${this.clickHandler}
|
|
120
|
+
.dblclickHandler=${this.dblclickHandler}
|
|
121
|
+
></ox-card-gutter-menu>
|
|
122
|
+
`
|
|
123
123
|
: html ``}
|
|
124
124
|
</div>
|
|
125
125
|
|
|
126
126
|
<div brief>
|
|
127
127
|
${briefFields.map((column, idx) => html `
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
128
|
+
<ox-card-field
|
|
129
|
+
.rowIndex=${rowIndex}
|
|
130
|
+
.column=${column}
|
|
131
|
+
.record=${record}
|
|
132
|
+
.value=${record[(column === null || column === void 0 ? void 0 : column.name) || '']}
|
|
133
|
+
?name=${idx == 0}
|
|
134
|
+
?desc=${idx == 1}
|
|
135
|
+
></ox-card-field>
|
|
136
|
+
`)}
|
|
137
137
|
</div>
|
|
138
138
|
${detailFields.length > 0
|
|
139
139
|
? html `
|
|
140
140
|
<div detail>
|
|
141
141
|
${detailFields.map((column, idx) => html `
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
142
|
+
<ox-card-field
|
|
143
|
+
.rowIndex=${rowIndex}
|
|
144
|
+
.column=${column}
|
|
145
|
+
.record=${record}
|
|
146
|
+
.value=${record[(column === null || column === void 0 ? void 0 : column.name) || '']}
|
|
147
|
+
></ox-card-field>
|
|
148
|
+
`)}
|
|
149
149
|
</div>
|
|
150
150
|
`
|
|
151
151
|
: html ``}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n }\n\n :host([dirty])::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n\n width: 0px;\n height: 0px;\n border-top: var(--grid-record-dirty-border-top);\n border-right: var(--grid-record-dirty-border-left);\n }\n\n [dirty] {\n position: absolute;\n margin: 0;\n height: 20px;\n\n font: var(--grid-record-dirty-icon-font);\n text-indent: 1px;\n left: 0;\n top: 0;\n color: var(--grid-record-dirty-color);\n }\n\n [thumbnail] {\n width: 100%;\n height: var(--data-card-thumbnail-height);\n border-top-left-radius: var(--data-card-record-card-border-radius);\n border-top-right-radius: var(--data-card-record-card-border-radius);\n border-bottom: var(--data-card-thumbnail-border-bottom);\n overflow: hidden;\n }\n\n [content] {\n display: grid;\n gap: 2px 7px;\n grid-template:\n 'brief gutters'\n 'detail detail';\n grid-template-columns: 1fr 35px;\n margin: var(--data-card-item-margin);\n }\n\n [brief] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n grid-area: brief;\n overflow: hidden;\n }\n\n [gutters] {\n grid-area: gutters;\n }\n\n [detail] {\n grid-area: detail;\n }\n\n ox-card-gutter {\n flex: 0 0 14px;\n }\n\n ox-card-field {\n font: var(--data-card-item-etc-font);\n color: var(--data-card-item-etc-color);\n }\n\n ox-card-field[name] {\n font: var(--data-card-item-name-font);\n color: var(--data-card-item-name-color);\n }\n\n ox-card-field[desc] {\n font: var(--data-card-item-disc-font);\n color: var(--data-card-item-disc-color);\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Object }) data: GristData = ZERO_DATA\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n /*\n * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n */\n @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n private _recordView: any\n private clickHandler = recordCardClickHandler.bind(this) as EventListener\n private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n firstUpdated() {\n /*\n long-press\n TODO. performance를 확인한 후에 활성화하자.\n */\n // longpressable(this.renderRoot.querySelector('[content]'))\n // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n this.renderRoot.addEventListener('click', this.clickHandler)\n this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n this.addEventListener('show-record-view', () => this.popupRecordView())\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('record') && this._recordView) {\n this._recordView.record = this.record\n }\n }\n\n render() {\n const record = this.record\n const rowIndex = this.rowIndex\n const { columns, list } = this.config\n const { thumbnail, fields, details } = list || {}\n\n const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n const detailFields =\n details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n const firstGutter = gutters[0]\n\n if (this.hasAttribute('dirty')) {\n var dirtyIcon\n\n switch (this.record['__dirty__']) {\n case 'M':\n dirtyIcon = 'done'\n break\n case '+':\n dirtyIcon = 'add'\n break\n case '-':\n dirtyIcon = 'remove'\n break\n }\n }\n\n return html`\n ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}\n ${thumbnailColumn\n ? html` <ox-card-field\n thumbnail\n .rowIndex=${rowIndex}\n .column=${thumbnailColumn}\n .record=${record}\n .value=${record[thumbnailColumn?.name || '']}\n ></ox-card-field>`\n : html``}\n\n <div content>\n <div gutters>\n ${firstGutter\n ? html`\n <ox-card-gutter\n .rowIndex=${rowIndex}\n .column=${firstGutter}\n .record=${record}\n .value=${record[firstGutter.name]}\n ></ox-card-gutter>\n `\n : html``}\n ${gutters.length === 2\n ? html`\n <ox-card-gutter\n .rowIndex=${rowIndex}\n .column=${gutters[1]}\n .record=${record}\n .value=${record[gutters[1].name]}\n ></ox-card-gutter>\n `\n : gutters.length > 2\n ? html`\n <ox-card-gutter-menu\n .gutters=${gutters}\n .rowIndex=${rowIndex}\n .record=${record}\n .clickHandler=${this.clickHandler}\n .dblclickHandler=${this.dblclickHandler}\n ></ox-card-gutter-menu>\n `\n : html``}\n </div>\n\n <div brief>\n ${briefFields.map(\n (column, idx) =>\n html`\n <ox-card-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ?name=${idx == 0}\n ?desc=${idx == 1}\n ></ox-card-field>\n `\n )}\n </div>\n ${detailFields.length > 0\n ? html`\n <div detail>\n ${detailFields.map(\n (column, idx) =>\n html`\n <ox-card-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ></ox-card-field>\n `\n )}\n </div>\n `\n : html``}\n </div>\n `\n }\n\n popupRecordView() {\n var titleField = this.config.list.fields[0] || 'name'\n var title = this.record[titleField]\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = this.config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n }\n\n this._recordView = RecordViewHandler(\n this.config.columns,\n this.record,\n this.rowIndex,\n this,\n {\n title\n },\n () => {\n delete this._recordView\n }\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n }\n\n :host([dirty])::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n\n width: 0px;\n height: 0px;\n border-top: var(--grid-record-dirty-border-top);\n border-right: var(--grid-record-dirty-border-left);\n }\n\n [dirty] {\n position: absolute;\n margin: 0;\n height: 20px;\n\n font: var(--grid-record-dirty-icon-font);\n text-indent: 1px;\n left: 0;\n top: 0;\n color: var(--grid-record-dirty-color);\n }\n\n [thumbnail] {\n width: 100%;\n height: var(--data-card-thumbnail-height);\n border-top-left-radius: var(--data-card-record-card-border-radius);\n border-top-right-radius: var(--data-card-record-card-border-radius);\n border-bottom: var(--data-card-thumbnail-border-bottom);\n overflow: hidden;\n }\n\n [content] {\n display: grid;\n gap: 2px 7px;\n grid-template:\n 'brief gutters'\n 'detail detail';\n grid-template-columns: 1fr 35px;\n margin: var(--data-card-item-margin);\n }\n\n [brief] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n grid-area: brief;\n overflow: hidden;\n }\n\n [gutters] {\n grid-area: gutters;\n }\n\n [detail] {\n grid-area: detail;\n }\n\n ox-card-gutter {\n flex: 0 0 14px;\n }\n\n ox-card-field {\n font: var(--data-card-item-etc-font);\n color: var(--data-card-item-etc-color);\n }\n\n ox-card-field[name] {\n font: var(--data-card-item-name-font);\n color: var(--data-card-item-name-color);\n }\n\n ox-card-field[desc] {\n font: var(--data-card-item-disc-font);\n color: var(--data-card-item-disc-color);\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Object }) data: GristData = ZERO_DATA\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex: number = -1\n /*\n * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n */\n @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n private _recordView: any\n private clickHandler = recordCardClickHandler.bind(this) as EventListener\n private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n firstUpdated() {\n /*\n long-press\n TODO. performance를 확인한 후에 활성화하자.\n */\n // longpressable(this.renderRoot.querySelector('[content]'))\n // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n this.renderRoot.addEventListener('click', this.clickHandler)\n this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n this.addEventListener('show-record-view', () => this.popupRecordView())\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('record') && this._recordView) {\n this._recordView.record = this.record\n }\n }\n\n render() {\n const record = this.record\n const rowIndex = this.rowIndex\n const { columns, list } = this.config\n const { thumbnail, fields, details } = list || {}\n\n const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n const detailFields =\n details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n const firstGutter = gutters[0]\n\n if (this.hasAttribute('dirty')) {\n var dirtyIcon\n\n switch (this.record['__dirty__']) {\n case 'M':\n dirtyIcon = 'done'\n break\n case '+':\n dirtyIcon = 'add'\n break\n case '-':\n dirtyIcon = 'remove'\n break\n }\n }\n\n return html`\n ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n ${thumbnailColumn\n ? html` <ox-card-field\n thumbnail\n .rowIndex=${rowIndex}\n .column=${thumbnailColumn}\n .record=${record}\n .value=${record[thumbnailColumn?.name || '']}\n ></ox-card-field>`\n : html``}\n\n <div content>\n <div gutters>\n ${firstGutter\n ? html`\n <ox-card-gutter\n .rowIndex=${rowIndex}\n .column=${firstGutter}\n .record=${record}\n .value=${record[firstGutter.name]}\n ></ox-card-gutter>\n `\n : html``}\n ${gutters.length === 2\n ? html`\n <ox-card-gutter\n .rowIndex=${rowIndex}\n .column=${gutters[1]}\n .record=${record}\n .value=${record[gutters[1].name]}\n ></ox-card-gutter>\n `\n : gutters.length > 2\n ? html`\n <ox-card-gutter-menu\n .gutters=${gutters}\n .rowIndex=${rowIndex}\n .record=${record}\n .clickHandler=${this.clickHandler}\n .dblclickHandler=${this.dblclickHandler}\n ></ox-card-gutter-menu>\n `\n : html``}\n </div>\n\n <div brief>\n ${briefFields.map(\n (column, idx) => html`\n <ox-card-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ?name=${idx == 0}\n ?desc=${idx == 1}\n ></ox-card-field>\n `\n )}\n </div>\n ${detailFields.length > 0\n ? html`\n <div detail>\n ${detailFields.map(\n (column, idx) => html`\n <ox-card-field\n .rowIndex=${rowIndex}\n .column=${column}\n .record=${record}\n .value=${record[column?.name || '']}\n ></ox-card-field>\n `\n )}\n </div>\n `\n : html``}\n </div>\n `\n }\n\n popupRecordView() {\n var titleField = this.config.list.fields[0] || 'name'\n var title = this.record[titleField]\n\n /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n if (typeof title == 'object') {\n var column = this.config.columns.find(column => column.name == titleField)\n title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n }\n\n this._recordView = RecordViewHandler(\n this.config.columns,\n this.record,\n this.rowIndex,\n this,\n {\n title\n },\n () => {\n delete this._recordView\n }\n )\n }\n}\n"]}
|
|
@@ -19,7 +19,7 @@ let DataGridAccumField = class DataGridAccumField extends LitElement {
|
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
21
|
if (!this.column || !this.column.accumulator) {
|
|
22
|
-
return this.columnIndex == 0 ? html `<
|
|
22
|
+
return this.columnIndex == 0 ? html `<md-icon>functions</md-icon>` : html `${nothing}`;
|
|
23
23
|
}
|
|
24
24
|
var { value, column, record, rowIndex } = this;
|
|
25
25
|
var { renderer } = column.record;
|
|
@@ -88,6 +88,10 @@ DataGridAccumField.styles = [
|
|
|
88
88
|
flex: none;
|
|
89
89
|
margin: 0 auto;
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
md-icon {
|
|
93
|
+
font-size: 1.5em;
|
|
94
|
+
}
|
|
91
95
|
`
|
|
92
96
|
];
|
|
93
97
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,OAAO,EAAE,MAAM,KAAK,CAAA;AACpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAG1B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;
|
|
1
|
+
{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { AccumulatorObject, ColumnConfig, GristRecord } from '../types'\nimport { i18next } from '@operato/i18n'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n static styles = [\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n align-items: center;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n position: relative;\n\n white-space: nowrap;\n background-color: var(--grid-accum-record-background-color, #ccc);\n border: 1px solid transparent;\n border-width: 1px 0;\n border-bottom: var(--grid-record-border-bottom);\n\n font-size: var(--grid-record-wide-fontsize);\n min-height: 19px;\n }\n\n span,\n pre {\n display: block;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n * {\n margin: 0;\n text-align: var(--data-grid-field-text-align);\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n\n md-icon {\n font-size: 1.5em;\n }\n `\n ]\n\n @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n @property({ type: Object }) record: GristRecord = {}\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex = -1\n @property({ type: Number }) columnIndex = 0\n @property({ type: Boolean }) editing = false\n @property({ type: Object }) value = {}\n @property({ attribute: false }) emphasized: any = false\n @property({ type: String }) fixed?: string\n\n render(): TemplateResult {\n if (!this.column || !this.column.accumulator) {\n return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer } = column.record\n\n // tag가 true이면 value 앞에 (sum) 같은 태그 생성\n var { accumulator } = column\n let tag = ''\n if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {\n tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`\n }\n\n return html`${tag} ${renderer?.call(this, value, column, record, rowIndex, this)}`\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('column')) {\n var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n if (align != DEFAULT_TEXT_ALIGN) {\n let justify = 'center'\n switch (align) {\n case 'right':\n justify = 'flex-end'\n break\n }\n this.style.setProperty('--data-grid-field-justify-content', justify)\n this.style.setProperty('--data-grid-field-text-align', align)\n }\n }\n\n if (changes.has('fixed')) {\n if (this.fixed) {\n this.style.left = this.fixed + 'px'\n }\n }\n }\n}\n"]}
|