@operato/data-grist 1.1.51 → 1.1.52
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 +10 -0
- package/dist/src/data-card/data-card.d.ts +3 -1
- package/dist/src/data-card/data-card.js +28 -4
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/data-grid/data-grid-body.js +1 -0
- package/dist/src/data-grid/data-grid-body.js.map +1 -1
- package/dist/src/data-grid/data-grid.d.ts +2 -0
- package/dist/src/data-grid/data-grid.js +24 -2
- package/dist/src/data-grid/data-grid.js.map +1 -1
- package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js +0 -1
- package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js.map +1 -1
- package/dist/src/data-grist.d.ts +0 -1
- package/dist/src/data-grist.js +4 -19
- package/dist/src/data-grist.js.map +1 -1
- package/dist/src/data-list/data-list.d.ts +2 -1
- package/dist/src/data-list/data-list.js +25 -5
- package/dist/src/data-list/data-list.js.map +1 -1
- package/dist/src/empty-note.js +5 -2
- package/dist/src/empty-note.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -13
- package/src/data-card/data-card.ts +27 -3
- package/src/data-grid/data-grid-body.ts +1 -0
- package/src/data-grid/data-grid.ts +22 -2
- package/src/data-grid/event-handlers/data-grid-body-click-handler.ts +0 -1
- package/src/data-grist.ts +4 -19
- package/src/data-list/data-list.ts +23 -4
- package/src/empty-note.ts +5 -2
|
@@ -2,7 +2,7 @@ import '@material/mwc-icon'
|
|
|
2
2
|
import './record-partial'
|
|
3
3
|
|
|
4
4
|
import { css, html, PropertyValues } from 'lit'
|
|
5
|
-
import { customElement, property } from 'lit/decorators.js'
|
|
5
|
+
import { customElement, property, state } from 'lit/decorators.js'
|
|
6
6
|
|
|
7
7
|
import { DataManipulator } from '../data-manipulator'
|
|
8
8
|
import { GristRecord } from '../types'
|
|
@@ -16,7 +16,7 @@ export class DataList extends DataManipulator {
|
|
|
16
16
|
overflow-y: auto;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
:nth-child(even) {
|
|
19
|
+
ox-record-partial:nth-child(even) {
|
|
20
20
|
background-color: var(--theme-white-color);
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -39,11 +39,21 @@ export class DataList extends DataManipulator {
|
|
|
39
39
|
slot {
|
|
40
40
|
width: 100%;
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
ox-empty-note {
|
|
44
|
+
display: block;
|
|
45
|
+
position: absolute;
|
|
46
|
+
left: 50%;
|
|
47
|
+
top: 50%;
|
|
48
|
+
transform: translate(-50%, -50%);
|
|
49
|
+
}
|
|
42
50
|
`
|
|
43
51
|
]
|
|
44
52
|
|
|
45
|
-
@property({ type: Boolean })
|
|
46
|
-
|
|
53
|
+
@property({ type: Boolean }) empty?: boolean
|
|
54
|
+
|
|
55
|
+
@state() private _records: GristRecord[] = []
|
|
56
|
+
@state() private isTop: boolean = false
|
|
47
57
|
|
|
48
58
|
private _total: number = 0
|
|
49
59
|
private _limit: number = 20
|
|
@@ -105,6 +115,15 @@ export class DataList extends DataManipulator {
|
|
|
105
115
|
></ox-record-partial>
|
|
106
116
|
`
|
|
107
117
|
)}
|
|
118
|
+
${this.empty
|
|
119
|
+
? html`
|
|
120
|
+
<ox-empty-note
|
|
121
|
+
icon="list"
|
|
122
|
+
title="EMPTY LIST"
|
|
123
|
+
description="There are no records to be shown"
|
|
124
|
+
></ox-empty-note>
|
|
125
|
+
`
|
|
126
|
+
: html``}
|
|
108
127
|
${this.isTop
|
|
109
128
|
? html``
|
|
110
129
|
: html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
|
package/src/empty-note.ts
CHANGED
|
@@ -10,6 +10,7 @@ export class EmptyNote extends LitElement {
|
|
|
10
10
|
display: block;
|
|
11
11
|
text-align: center;
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
mwc-icon {
|
|
14
15
|
font: var(--oops-note-icon-font);
|
|
15
16
|
color: var(--oops-note-icon-color);
|
|
@@ -17,12 +18,14 @@ export class EmptyNote extends LitElement {
|
|
|
17
18
|
border-radius: var(--oops-note-icon-border-radius);
|
|
18
19
|
padding: var(--oops-note-icon-padding);
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
+
|
|
22
|
+
[titler] {
|
|
21
23
|
margin: var(--oops-note-title-margin);
|
|
22
24
|
font: var(--oops-note-title-font);
|
|
23
25
|
color: var(--oops-note-title-color);
|
|
24
26
|
text-transform: capitalize;
|
|
25
27
|
}
|
|
28
|
+
|
|
26
29
|
[description] {
|
|
27
30
|
font: var(--oops-note-description-font);
|
|
28
31
|
color: var(--oops-note-description-color);
|
|
@@ -36,7 +39,7 @@ export class EmptyNote extends LitElement {
|
|
|
36
39
|
render() {
|
|
37
40
|
return html`
|
|
38
41
|
<mwc-icon>${this.icon}</mwc-icon>
|
|
39
|
-
<div
|
|
42
|
+
<div titler>${this.title}</div>
|
|
40
43
|
<div description>${this.description}</div>
|
|
41
44
|
`
|
|
42
45
|
}
|