@operato/data-grist 0.2.51 → 0.3.4
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 +71 -0
- package/custom-elements.json +60 -138
- package/demo/index.html +51 -5
- package/dist/src/data-card/data-card-field.js +11 -2
- package/dist/src/data-card/data-card-field.js.map +1 -1
- package/dist/src/data-card/data-card-gutter-menu.d.ts +1 -1
- package/dist/src/data-card/data-card-gutter-menu.js +36 -9
- package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
- package/dist/src/data-card/data-card-gutter.d.ts +1 -1
- package/dist/src/data-card/data-card-gutter.js +3 -2
- package/dist/src/data-card/data-card-gutter.js.map +1 -1
- package/dist/src/data-card/data-card.js +0 -4
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/data-card/event-handlers/record-card-click-handler.js +15 -15
- package/dist/src/data-card/event-handlers/record-card-click-handler.js.map +1 -1
- package/dist/src/data-card/record-card.d.ts +4 -1
- package/dist/src/data-card/record-card.js +23 -16
- package/dist/src/data-card/record-card.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.d.ts +2 -2
- package/dist/src/data-grid/data-grid-header.js +4 -4
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grid/data-grid.js +0 -1
- package/dist/src/data-grid/data-grid.js.map +1 -1
- package/dist/src/data-list/data-list.js +0 -4
- package/dist/src/data-list/data-list.js.map +1 -1
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js +15 -15
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js.map +1 -1
- package/dist/src/filters/filter-select.d.ts +1 -1
- package/dist/src/filters/filter-select.js +1 -1
- package/dist/src/filters/filter-select.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/search-form/ox-select-field.d.ts +3 -3
- package/dist/src/search-form/ox-select-field.js +3 -3
- package/dist/src/search-form/ox-select-field.js.map +1 -1
- package/dist/src/types.d.ts +1 -1
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -8
- package/src/data-card/data-card-field.ts +11 -2
- package/src/data-card/data-card-gutter-menu.ts +35 -10
- package/src/data-card/data-card-gutter.ts +5 -3
- package/src/data-card/data-card.ts +0 -5
- package/src/data-card/event-handlers/record-card-click-handler.ts +16 -18
- package/src/data-card/record-card.ts +24 -17
- package/src/data-grid/data-grid-header.ts +7 -6
- package/src/data-grid/data-grid.ts +0 -1
- package/src/data-list/data-list.ts +0 -5
- package/src/data-list/event-handlers/record-partial-click-handler.ts +16 -18
- package/src/filters/filter-select.ts +3 -2
- package/src/index.ts +2 -0
- package/src/search-form/ox-select-field.ts +6 -5
- package/src/types.ts +1 -1
- package/tsconfig.json +3 -1
- package/dist/src/data-card/event-handlers/data-card-click-handler.d.ts +0 -6
- package/dist/src/data-card/event-handlers/data-card-click-handler.js +0 -16
- package/dist/src/data-card/event-handlers/data-card-click-handler.js.map +0 -1
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.d.ts +0 -6
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js +0 -16
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js.map +0 -1
- package/dist/src/data-list/event-handlers/data-list-click-handler.d.ts +0 -6
- package/dist/src/data-list/event-handlers/data-list-click-handler.js +0 -16
- package/dist/src/data-list/event-handlers/data-list-click-handler.js.map +0 -1
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.d.ts +0 -6
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js +0 -16
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js.map +0 -1
- package/src/data-card/event-handlers/data-card-click-handler.ts +0 -19
- package/src/data-card/event-handlers/data-card-dblclick-handler.ts +0 -19
- package/src/data-list/event-handlers/data-list-click-handler.ts +0 -19
- package/src/data-list/event-handlers/data-list-dblclick-handler.ts +0 -19
- package/yarn-error.log +0 -17496
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,77 @@
|
|
|
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
|
+
### [0.3.4](https://github.com/hatiolab/operato/compare/v0.3.3...v0.3.4) (2022-01-03)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/data-grist
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [0.3.3](https://github.com/hatiolab/operato/compare/v0.3.2...v0.3.3) (2022-01-03)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* apply import.meta.url into @operato/board ([1262fbe](https://github.com/hatiolab/operato/commit/1262fbec19798ac5fb0f1a430cabb48c9d8f3f35))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### [0.3.2](https://github.com/hatiolab/operato/compare/v0.3.1...v0.3.2) (2022-01-03)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### :bug: Bug Fix
|
|
27
|
+
|
|
28
|
+
* custem-elements ([8cf6675](https://github.com/hatiolab/operato/commit/8cf667565c1a04576dfa9cb39fac885ad0455f27))
|
|
29
|
+
* data-grist click handler ([2566553](https://github.com/hatiolab/operato/commit/2566553b2515810d3c7cae89061459df92b01e03))
|
|
30
|
+
* data-grist headroom sample style ([006642d](https://github.com/hatiolab/operato/commit/006642dca83c451a50e84d4d85f090085a2b48b6))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### [0.3.1](https://github.com/hatiolab/operato/compare/v0.3.0...v0.3.1) (2021-12-31)
|
|
35
|
+
|
|
36
|
+
**Note:** Version bump only for package @operato/data-grist
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## [0.3.0](https://github.com/hatiolab/operato/compare/v0.2.52...v0.3.0) (2021-12-31)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### :bug: Bug Fix
|
|
46
|
+
|
|
47
|
+
* for test data-grist ([be6db22](https://github.com/hatiolab/operato/commit/be6db220943fc4f68e4954539fba227c9ee4a589))
|
|
48
|
+
* grid container border ([c43f50d](https://github.com/hatiolab/operato/commit/c43f50d5b9f64b7f608a4c7a8b2ccfa953a17b3b))
|
|
49
|
+
* grist card-gutter-menu popup style ([d0b97f5](https://github.com/hatiolab/operato/commit/d0b97f5483f93d95df058facc673a6fdd30e897b))
|
|
50
|
+
* popup style ([2372729](https://github.com/hatiolab/operato/commit/23727297c8fe98267846bc3d6595238cb1f9e76b))
|
|
51
|
+
* text overflow ([43891b4](https://github.com/hatiolab/operato/commit/43891b46f60e3d75fe9be3a187ead875f73a1e3f))
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### :rocket: New Features
|
|
55
|
+
|
|
56
|
+
* add tsconfig option useDefineForClassFields ([6291438](https://github.com/hatiolab/operato/commit/6291438571eee0f095064e7d2ada1c620832e092))
|
|
57
|
+
* support package.json exports ([3717fa7](https://github.com/hatiolab/operato/commit/3717fa7f87f0411f6f023ba730b84441ffa5d4a8))
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### [0.2.52](https://github.com/hatiolab/operato/compare/v0.2.51...v0.2.52) (2021-12-21)
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
### :rocket: New Features
|
|
65
|
+
|
|
66
|
+
* add @operato/utils and @operato/attachment ([15a9c19](https://github.com/hatiolab/operato/commit/15a9c19ff1237738abd3e3509ba9ede90280b766))
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
### :bug: Bug Fix
|
|
70
|
+
|
|
71
|
+
* @operato/board dependencies ([45470f1](https://github.com/hatiolab/operato/commit/45470f1a9987a1572cdbe077caffab62c66b33db))
|
|
72
|
+
* data-card gutter event handling ([ba2a14e](https://github.com/hatiolab/operato/commit/ba2a14e4a6cb6063e8f63ac489448a4e64d272a7))
|
|
73
|
+
* upgrade dependencies ([3fde5e7](https://github.com/hatiolab/operato/commit/3fde5e7182bb4b502103bcb70de2f1bfab2bc1ff))
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
6
77
|
### [0.2.51](https://github.com/hatiolab/operato/compare/v0.2.50...v0.2.51) (2021-12-16)
|
|
7
78
|
|
|
8
79
|
**Note:** Version bump only for package @operato/data-grist
|
package/custom-elements.json
CHANGED
|
@@ -946,6 +946,14 @@
|
|
|
946
946
|
"path": "src/index.ts",
|
|
947
947
|
"declarations": [],
|
|
948
948
|
"exports": [
|
|
949
|
+
{
|
|
950
|
+
"kind": "js",
|
|
951
|
+
"name": "*",
|
|
952
|
+
"declaration": {
|
|
953
|
+
"name": "*",
|
|
954
|
+
"package": "./types"
|
|
955
|
+
}
|
|
956
|
+
},
|
|
949
957
|
{
|
|
950
958
|
"kind": "js",
|
|
951
959
|
"name": "*",
|
|
@@ -1699,6 +1707,22 @@
|
|
|
1699
1707
|
},
|
|
1700
1708
|
"attribute": "record"
|
|
1701
1709
|
},
|
|
1710
|
+
{
|
|
1711
|
+
"kind": "field",
|
|
1712
|
+
"name": "clickHandler",
|
|
1713
|
+
"type": {
|
|
1714
|
+
"text": "EventListener"
|
|
1715
|
+
},
|
|
1716
|
+
"attribute": "clickHandler"
|
|
1717
|
+
},
|
|
1718
|
+
{
|
|
1719
|
+
"kind": "field",
|
|
1720
|
+
"name": "dblclickHandler",
|
|
1721
|
+
"type": {
|
|
1722
|
+
"text": "EventListener"
|
|
1723
|
+
},
|
|
1724
|
+
"attribute": "dblclickHandler"
|
|
1725
|
+
},
|
|
1702
1726
|
{
|
|
1703
1727
|
"kind": "field",
|
|
1704
1728
|
"name": "icon",
|
|
@@ -1712,7 +1736,15 @@
|
|
|
1712
1736
|
},
|
|
1713
1737
|
{
|
|
1714
1738
|
"kind": "method",
|
|
1715
|
-
"name": "open"
|
|
1739
|
+
"name": "open",
|
|
1740
|
+
"parameters": [
|
|
1741
|
+
{
|
|
1742
|
+
"name": "e",
|
|
1743
|
+
"type": {
|
|
1744
|
+
"text": "Event"
|
|
1745
|
+
}
|
|
1746
|
+
}
|
|
1747
|
+
]
|
|
1716
1748
|
}
|
|
1717
1749
|
],
|
|
1718
1750
|
"attributes": [
|
|
@@ -1736,6 +1768,20 @@
|
|
|
1736
1768
|
"text": "GristRecord"
|
|
1737
1769
|
},
|
|
1738
1770
|
"fieldName": "record"
|
|
1771
|
+
},
|
|
1772
|
+
{
|
|
1773
|
+
"name": "clickHandler",
|
|
1774
|
+
"type": {
|
|
1775
|
+
"text": "EventListener"
|
|
1776
|
+
},
|
|
1777
|
+
"fieldName": "clickHandler"
|
|
1778
|
+
},
|
|
1779
|
+
{
|
|
1780
|
+
"name": "dblclickHandler",
|
|
1781
|
+
"type": {
|
|
1782
|
+
"text": "EventListener"
|
|
1783
|
+
},
|
|
1784
|
+
"fieldName": "dblclickHandler"
|
|
1739
1785
|
}
|
|
1740
1786
|
],
|
|
1741
1787
|
"superclass": {
|
|
@@ -2144,6 +2190,18 @@
|
|
|
2144
2190
|
},
|
|
2145
2191
|
"privacy": "private"
|
|
2146
2192
|
},
|
|
2193
|
+
{
|
|
2194
|
+
"kind": "field",
|
|
2195
|
+
"name": "clickHandler",
|
|
2196
|
+
"privacy": "private",
|
|
2197
|
+
"default": "recordCardClickHandler.bind(this)"
|
|
2198
|
+
},
|
|
2199
|
+
{
|
|
2200
|
+
"kind": "field",
|
|
2201
|
+
"name": "dblclickHandler",
|
|
2202
|
+
"privacy": "private",
|
|
2203
|
+
"default": "recordCardDblClickHandler.bind(this)"
|
|
2204
|
+
},
|
|
2147
2205
|
{
|
|
2148
2206
|
"kind": "method",
|
|
2149
2207
|
"name": "onFieldChange",
|
|
@@ -12891,7 +12949,7 @@
|
|
|
12891
12949
|
],
|
|
12892
12950
|
"superclass": {
|
|
12893
12951
|
"name": "OXBasicField",
|
|
12894
|
-
"module": "/src/search-form/ox-basic-field"
|
|
12952
|
+
"module": "/src/search-form/ox-basic-field.js"
|
|
12895
12953
|
},
|
|
12896
12954
|
"tagName": "ox-select-field",
|
|
12897
12955
|
"customElement": true,
|
|
@@ -13199,74 +13257,6 @@
|
|
|
13199
13257
|
}
|
|
13200
13258
|
]
|
|
13201
13259
|
},
|
|
13202
|
-
{
|
|
13203
|
-
"kind": "javascript-module",
|
|
13204
|
-
"path": "src/data-card/event-handlers/data-card-click-handler.ts",
|
|
13205
|
-
"declarations": [
|
|
13206
|
-
{
|
|
13207
|
-
"kind": "function",
|
|
13208
|
-
"name": "dataCardClickHandler",
|
|
13209
|
-
"return": {
|
|
13210
|
-
"type": {
|
|
13211
|
-
"text": "void"
|
|
13212
|
-
}
|
|
13213
|
-
},
|
|
13214
|
-
"parameters": [
|
|
13215
|
-
{
|
|
13216
|
-
"name": "e",
|
|
13217
|
-
"type": {
|
|
13218
|
-
"text": "MouseEvent"
|
|
13219
|
-
}
|
|
13220
|
-
}
|
|
13221
|
-
],
|
|
13222
|
-
"description": "ox-card 의 click handler\n\n- handler의 this 는 ox-card임."
|
|
13223
|
-
}
|
|
13224
|
-
],
|
|
13225
|
-
"exports": [
|
|
13226
|
-
{
|
|
13227
|
-
"kind": "js",
|
|
13228
|
-
"name": "dataCardClickHandler",
|
|
13229
|
-
"declaration": {
|
|
13230
|
-
"name": "dataCardClickHandler",
|
|
13231
|
-
"module": "src/data-card/event-handlers/data-card-click-handler.ts"
|
|
13232
|
-
}
|
|
13233
|
-
}
|
|
13234
|
-
]
|
|
13235
|
-
},
|
|
13236
|
-
{
|
|
13237
|
-
"kind": "javascript-module",
|
|
13238
|
-
"path": "src/data-card/event-handlers/data-card-dblclick-handler.ts",
|
|
13239
|
-
"declarations": [
|
|
13240
|
-
{
|
|
13241
|
-
"kind": "function",
|
|
13242
|
-
"name": "dataCardDblclickHandler",
|
|
13243
|
-
"return": {
|
|
13244
|
-
"type": {
|
|
13245
|
-
"text": "void"
|
|
13246
|
-
}
|
|
13247
|
-
},
|
|
13248
|
-
"parameters": [
|
|
13249
|
-
{
|
|
13250
|
-
"name": "e",
|
|
13251
|
-
"type": {
|
|
13252
|
-
"text": "MouseEvent"
|
|
13253
|
-
}
|
|
13254
|
-
}
|
|
13255
|
-
],
|
|
13256
|
-
"description": "ox-card 의 dblclick handler\n\n- handler의 this 는 ox-card임."
|
|
13257
|
-
}
|
|
13258
|
-
],
|
|
13259
|
-
"exports": [
|
|
13260
|
-
{
|
|
13261
|
-
"kind": "js",
|
|
13262
|
-
"name": "dataCardDblclickHandler",
|
|
13263
|
-
"declaration": {
|
|
13264
|
-
"name": "dataCardDblclickHandler",
|
|
13265
|
-
"module": "src/data-card/event-handlers/data-card-dblclick-handler.ts"
|
|
13266
|
-
}
|
|
13267
|
-
}
|
|
13268
|
-
]
|
|
13269
|
-
},
|
|
13270
13260
|
{
|
|
13271
13261
|
"kind": "javascript-module",
|
|
13272
13262
|
"path": "src/data-card/event-handlers/record-card-click-handler.ts",
|
|
@@ -13466,74 +13456,6 @@
|
|
|
13466
13456
|
}
|
|
13467
13457
|
]
|
|
13468
13458
|
},
|
|
13469
|
-
{
|
|
13470
|
-
"kind": "javascript-module",
|
|
13471
|
-
"path": "src/data-list/event-handlers/data-list-click-handler.ts",
|
|
13472
|
-
"declarations": [
|
|
13473
|
-
{
|
|
13474
|
-
"kind": "function",
|
|
13475
|
-
"name": "dataListClickHandler",
|
|
13476
|
-
"return": {
|
|
13477
|
-
"type": {
|
|
13478
|
-
"text": "void"
|
|
13479
|
-
}
|
|
13480
|
-
},
|
|
13481
|
-
"parameters": [
|
|
13482
|
-
{
|
|
13483
|
-
"name": "e",
|
|
13484
|
-
"type": {
|
|
13485
|
-
"text": "MouseEvent"
|
|
13486
|
-
}
|
|
13487
|
-
}
|
|
13488
|
-
],
|
|
13489
|
-
"description": "ox-list 의 click handler\n\n- handler의 this 는 ox-list임."
|
|
13490
|
-
}
|
|
13491
|
-
],
|
|
13492
|
-
"exports": [
|
|
13493
|
-
{
|
|
13494
|
-
"kind": "js",
|
|
13495
|
-
"name": "dataListClickHandler",
|
|
13496
|
-
"declaration": {
|
|
13497
|
-
"name": "dataListClickHandler",
|
|
13498
|
-
"module": "src/data-list/event-handlers/data-list-click-handler.ts"
|
|
13499
|
-
}
|
|
13500
|
-
}
|
|
13501
|
-
]
|
|
13502
|
-
},
|
|
13503
|
-
{
|
|
13504
|
-
"kind": "javascript-module",
|
|
13505
|
-
"path": "src/data-list/event-handlers/data-list-dblclick-handler.ts",
|
|
13506
|
-
"declarations": [
|
|
13507
|
-
{
|
|
13508
|
-
"kind": "function",
|
|
13509
|
-
"name": "dataListDblclickHandler",
|
|
13510
|
-
"return": {
|
|
13511
|
-
"type": {
|
|
13512
|
-
"text": "void"
|
|
13513
|
-
}
|
|
13514
|
-
},
|
|
13515
|
-
"parameters": [
|
|
13516
|
-
{
|
|
13517
|
-
"name": "e",
|
|
13518
|
-
"type": {
|
|
13519
|
-
"text": "MouseEvent"
|
|
13520
|
-
}
|
|
13521
|
-
}
|
|
13522
|
-
],
|
|
13523
|
-
"description": "ox-list 의 dblclick handler\n\n- handler의 this 는 ox-list임."
|
|
13524
|
-
}
|
|
13525
|
-
],
|
|
13526
|
-
"exports": [
|
|
13527
|
-
{
|
|
13528
|
-
"kind": "js",
|
|
13529
|
-
"name": "dataListDblclickHandler",
|
|
13530
|
-
"declaration": {
|
|
13531
|
-
"name": "dataListDblclickHandler",
|
|
13532
|
-
"module": "src/data-list/event-handlers/data-list-dblclick-handler.ts"
|
|
13533
|
-
}
|
|
13534
|
-
}
|
|
13535
|
-
]
|
|
13536
|
-
},
|
|
13537
13459
|
{
|
|
13538
13460
|
"kind": "javascript-module",
|
|
13539
13461
|
"path": "src/data-list/event-handlers/record-partial-click-handler.ts",
|
package/demo/index.html
CHANGED
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<script type="module">
|
|
50
50
|
import { LitElement, html, css, render } from 'lit'
|
|
51
51
|
import '../dist/index.js'
|
|
52
|
-
import '@operato/popup'
|
|
52
|
+
import '@operato/popup/ox-popup-list.js'
|
|
53
53
|
import '@material/mwc-icon'
|
|
54
54
|
|
|
55
55
|
const fetchHandler = async ({ page, limit, sorters = [] }) => {
|
|
@@ -66,7 +66,8 @@
|
|
|
66
66
|
return {
|
|
67
67
|
id: idx,
|
|
68
68
|
name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
|
|
69
|
-
description:
|
|
69
|
+
description:
|
|
70
|
+
idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
|
|
70
71
|
email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
|
|
71
72
|
active: Math.round(Math.random() * 2) % 2 ? true : false,
|
|
72
73
|
barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
|
|
@@ -154,8 +155,8 @@
|
|
|
154
155
|
// href: 'http://hatiolab.com',
|
|
155
156
|
href: function (column, record, rowIndex) {
|
|
156
157
|
return record['homepage']
|
|
157
|
-
}
|
|
158
|
-
|
|
158
|
+
},
|
|
159
|
+
target: '_blank'
|
|
159
160
|
}
|
|
160
161
|
},
|
|
161
162
|
filter: {
|
|
@@ -174,7 +175,7 @@
|
|
|
174
175
|
},
|
|
175
176
|
width: 200,
|
|
176
177
|
handlers: {
|
|
177
|
-
|
|
178
|
+
click: (columns, data, column, record, rowIndex, target) => {
|
|
178
179
|
alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
|
|
179
180
|
}
|
|
180
181
|
}
|
|
@@ -361,7 +362,38 @@
|
|
|
361
362
|
}
|
|
362
363
|
|
|
363
364
|
#filters {
|
|
365
|
+
display: flex;
|
|
366
|
+
flex-direction: row;
|
|
367
|
+
justify-content: space-between;
|
|
368
|
+
margin-right: auto;
|
|
369
|
+
align-items: center;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
#filters > * {
|
|
373
|
+
padding: var(--padding-default) var(--padding-wide);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
#search {
|
|
377
|
+
display: flex;
|
|
378
|
+
position: relative;
|
|
379
|
+
align-items: center;
|
|
380
|
+
|
|
381
|
+
--mdc-icon-size: 20px;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
#search [type='text'] {
|
|
364
385
|
flex: 1;
|
|
386
|
+
background-color: transparent;
|
|
387
|
+
border: 0;
|
|
388
|
+
border-bottom: var(--border-dark-color);
|
|
389
|
+
padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
|
|
390
|
+
font-size: var(--fontsize-large);
|
|
391
|
+
outline: none;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
#search mwc-icon {
|
|
395
|
+
position: absolute;
|
|
396
|
+
color: var(--secondary-color);
|
|
365
397
|
}
|
|
366
398
|
|
|
367
399
|
#tailer {
|
|
@@ -369,6 +401,7 @@
|
|
|
369
401
|
flex-direction: row;
|
|
370
402
|
margin: 0 var(--margin-default);
|
|
371
403
|
}
|
|
404
|
+
|
|
372
405
|
#tailer a {
|
|
373
406
|
padding: 0 var(--padding-narrow) 0 var(--padding-default);
|
|
374
407
|
margin: 0 var(--margin-narrow);
|
|
@@ -386,14 +419,22 @@
|
|
|
386
419
|
height: 36px;
|
|
387
420
|
cursor: pointer;
|
|
388
421
|
}
|
|
422
|
+
|
|
389
423
|
#add button:hover {
|
|
390
424
|
background-color: var(--focus-background-color);
|
|
391
425
|
box-shadow: var(--box-shadow);
|
|
392
426
|
}
|
|
427
|
+
|
|
393
428
|
#add button mwc-icon {
|
|
394
429
|
font-size: 2em;
|
|
395
430
|
color: var(--theme-white-color);
|
|
396
431
|
}
|
|
432
|
+
|
|
433
|
+
@media only screen and (max-width: 460px) {
|
|
434
|
+
#filters {
|
|
435
|
+
flex-direction: column;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
397
438
|
`
|
|
398
439
|
]
|
|
399
440
|
|
|
@@ -421,6 +462,11 @@
|
|
|
421
462
|
<ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
|
|
422
463
|
<div slot="headroom" id="headroom">
|
|
423
464
|
<div id="filters">
|
|
465
|
+
<div id="search">
|
|
466
|
+
<mwc-icon>search</mwc-icon>
|
|
467
|
+
<input type="text" />
|
|
468
|
+
</div>
|
|
469
|
+
|
|
424
470
|
<mwc-icon
|
|
425
471
|
@click=${e => {
|
|
426
472
|
const target = e.currentTarget
|
|
@@ -29,8 +29,8 @@ DataCardField.styles = [
|
|
|
29
29
|
justify-content: flex-start;
|
|
30
30
|
position: relative;
|
|
31
31
|
|
|
32
|
-
white-space:
|
|
33
|
-
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
|
|
34
34
|
padding: 1px 7px 1px 0;
|
|
35
35
|
|
|
36
36
|
font: inherit;
|
|
@@ -39,6 +39,11 @@ DataCardField.styles = [
|
|
|
39
39
|
* {
|
|
40
40
|
flex: 1;
|
|
41
41
|
margin: 0;
|
|
42
|
+
|
|
43
|
+
width: 100px;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
|
|
46
|
+
text-overflow: ellipsis;
|
|
42
47
|
text-align: left;
|
|
43
48
|
}
|
|
44
49
|
|
|
@@ -61,6 +66,10 @@ DataCardField.styles = [
|
|
|
61
66
|
font: var(--data-card-item-etc-label-font);
|
|
62
67
|
text-transform: capitalize;
|
|
63
68
|
}
|
|
69
|
+
label + a {
|
|
70
|
+
display: block;
|
|
71
|
+
min-width: 100%;
|
|
72
|
+
}
|
|
64
73
|
|
|
65
74
|
input[type='checkbox'],
|
|
66
75
|
input[type='radio'] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAInE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;
|
|
1
|
+
{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAInE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAiE8B,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE;YAC5B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,EAAE,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACvG;aAAM;YACL,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;SACtE;IACH,CAAC;CACF,CAAA;AApFQ,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;CACF,CAAA;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AApE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAqFzB;SArFY,aAAa","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n white-space: nowrap;\n\n padding: 1px 7px 1px 0;\n\n font: inherit;\n }\n\n * {\n flex: 1;\n margin: 0;\n\n width: 100px;\n overflow: hidden;\n\n text-overflow: ellipsis;\n text-align: left;\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n :host([name]) {\n display: block;\n }\n :host([name]) label {\n display: block;\n font: var(--data-card-item-name-label-font);\n color: var(--data-card-item-name-label-color);\n }\n label {\n flex: none;\n width: 33%;\n padding-bottom: 2px;\n font: var(--data-card-item-etc-label-font);\n text-transform: capitalize;\n }\n label + a {\n display: block;\n min-width: 100%;\n }\n\n input[type='checkbox'],\n input[type='radio'] {\n zoom: var(--grist-input-zoom);\n }\n\n @media only screen and (max-width: 460px) {\n *[center] {\n margin: initial;\n }\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n render(): TemplateResult {\n var { value, column, record, rowIndex } = this\n\n var {\n label,\n record: { renderer: recordRenderer }\n } = column\n\n if (typeof label == 'object') {\n let { renderer: labelRenderer } = label\n return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n } else {\n return html`${recordRenderer(value, column, record, rowIndex, this)}`\n }\n }\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import '@material/mwc-icon';
|
|
2
|
-
import './data-card-gutter';
|
|
2
|
+
import './data-card-gutter.js';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
|
-
import './data-card-gutter';
|
|
4
|
-
import {
|
|
3
|
+
import './data-card-gutter.js';
|
|
4
|
+
import { css, html, LitElement } from 'lit';
|
|
5
5
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
6
|
-
import {
|
|
6
|
+
import { OxPopup } from '@operato/popup';
|
|
7
7
|
let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
|
|
8
8
|
render() {
|
|
9
9
|
return html `
|
|
10
|
-
<mwc-icon @click=${(e) => this.open()}>more_horiz</mwc-icon>
|
|
10
|
+
<mwc-icon @click=${(e) => this.open(e)}>more_horiz</mwc-icon>
|
|
11
11
|
<slot></slot>
|
|
12
12
|
`;
|
|
13
13
|
}
|
|
@@ -21,17 +21,26 @@ let DataCardGutterMenu = class DataCardGutterMenu extends LitElement {
|
|
|
21
21
|
.value=${this.record[gutter.name]}
|
|
22
22
|
menu
|
|
23
23
|
alive-on-select
|
|
24
|
+
@click=${(e) => {
|
|
25
|
+
this.clickHandler(e);
|
|
26
|
+
// TODO close popup
|
|
27
|
+
}}
|
|
28
|
+
@dblclick=${(e) => {
|
|
29
|
+
this.dblclickHandler(e);
|
|
30
|
+
// TODO close popup
|
|
31
|
+
}}
|
|
24
32
|
></ox-card-gutter>
|
|
25
33
|
`)}
|
|
26
34
|
`;
|
|
27
35
|
}
|
|
28
|
-
open() {
|
|
29
|
-
|
|
30
|
-
const
|
|
36
|
+
open(e) {
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
const bottom = this.icon.offsetHeight;
|
|
39
|
+
const left = -4;
|
|
31
40
|
const parent = this;
|
|
32
|
-
|
|
41
|
+
OxPopup.open({
|
|
33
42
|
template: this.menuRender(),
|
|
34
|
-
|
|
43
|
+
bottom,
|
|
35
44
|
left,
|
|
36
45
|
parent
|
|
37
46
|
});
|
|
@@ -42,8 +51,20 @@ DataCardGutterMenu.styles = css `
|
|
|
42
51
|
position: relative;
|
|
43
52
|
}
|
|
44
53
|
|
|
54
|
+
::slotted(ox-popup) {
|
|
55
|
+
padding: 4px;
|
|
56
|
+
}
|
|
57
|
+
|
|
45
58
|
mwc-icon {
|
|
46
59
|
cursor: pointer;
|
|
60
|
+
|
|
61
|
+
flex: 1;
|
|
62
|
+
margin: 0;
|
|
63
|
+
margin-bottom: 1px;
|
|
64
|
+
border: var(--data-card-item-btn-border);
|
|
65
|
+
border-radius: var(--data-card-item-btn-border-radius);
|
|
66
|
+
padding: var(--data-card-item-btn-padding);
|
|
67
|
+
font-size: var(--grid-record-fontsize);
|
|
47
68
|
}
|
|
48
69
|
`;
|
|
49
70
|
__decorate([
|
|
@@ -55,6 +76,12 @@ __decorate([
|
|
|
55
76
|
__decorate([
|
|
56
77
|
property({ type: Object })
|
|
57
78
|
], DataCardGutterMenu.prototype, "record", void 0);
|
|
79
|
+
__decorate([
|
|
80
|
+
property()
|
|
81
|
+
], DataCardGutterMenu.prototype, "clickHandler", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
property()
|
|
84
|
+
], DataCardGutterMenu.prototype, "dblclickHandler", void 0);
|
|
58
85
|
__decorate([
|
|
59
86
|
query('mwc-icon')
|
|
60
87
|
], DataCardGutterMenu.prototype, "icon", void 0);
|
|
@@ -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,oBAAoB,CAAA;AAC3B,OAAO,
|
|
1
|
+
{"version":3,"file":"data-card-gutter-menu.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter-menu.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,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;IA+BzC,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;KAE9C,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;CACF,CAAA;AA5EQ,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,CAAA;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;AAExB;IAAlB,KAAK,CAAC,UAAU,CAAC;gDAAe;AA7B7B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CA6EvB","sourcesContent":["import '@material/mwc-icon'\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 mwc-icon {\n cursor: pointer;\n\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\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('mwc-icon') icon!: Element\n\n render() {\n return html`\n <mwc-icon @click=${(e: Event) => this.open(e)}>more_horiz</mwc-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
|
-
import { ColumnConfig, GristRecord } from '../types';
|
|
2
1
|
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
import { ColumnConfig, GristRecord } from '../types';
|
|
3
3
|
export declare class DataCardGutter extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
align?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
3
|
-
import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
4
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
|
|
5
5
|
const DEFAULT_TEXT_ALIGN = 'left';
|
|
6
6
|
let DataCardGutter = class DataCardGutter extends LitElement {
|
|
7
7
|
constructor() {
|
|
@@ -54,6 +54,7 @@ DataCardGutter.styles = [
|
|
|
54
54
|
border: var(--data-card-item-btn-border);
|
|
55
55
|
border-radius: var(--data-card-item-btn-border-radius);
|
|
56
56
|
padding: var(--data-card-item-btn-padding);
|
|
57
|
+
font-size: var(--grid-record-fontsize);
|
|
57
58
|
}
|
|
58
59
|
*:hover {
|
|
59
60
|
color: var(--grid-record-color-hover);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGnE,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAGjC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAiC8B,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAiCnD,CAAC;IA9BC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,kBAAkB,CAAA;YAC1D,IAAI,KAAK,IAAI,kBAAkB,EAAE;gBAC/B,IAAI,OAAO,GAAG,QAAQ,CAAA;gBACtB,QAAQ,KAAK,EAAE;oBACb,KAAK,OAAO;wBACV,OAAO,GAAG,UAAU,CAAA;wBACpB,MAAK;iBACR;gBACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oCAAoC,EAAE,OAAO,CAAC,CAAA;aACtE;SACF;IACH,CAAC;CACF,CAAA;AAnEQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AApC/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CAoE1B;SApEY,cAAc","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-card-gutter')\nexport class DataCardGutter extends LitElement {\n static styles = [\n css`\n :host {\n background-color: transparent;\n\n font-size: var(--grid-record-wide-fontsize);\n text-overflow: ellipsis;\n color: var(--grid-record-color);\n }\n\n * {\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 *:hover {\n color: var(--grid-record-color-hover);\n cursor: pointer;\n }\n\n *[center] {\n flex: none;\n margin: 0 auto;\n }\n `\n ]\n\n @property({ attribute: true }) align?: string\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Number }) rowIndex: number = -1\n @property({ type: Object }) value?: object\n\n get isEditing() {\n return this.hasAttribute('editing')\n }\n\n render(): TemplateResult {\n if (!this.column) {\n return html``\n }\n\n var { value, column, record, rowIndex } = this\n var { renderer } = column.record\n\n /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n return html` ${renderer(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-card-gutter-justify-content', justify)\n }\n }\n }\n}\n"]}
|