@budibase/bbui 1.0.97 → 1.0.98-alpha.0
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/dist/bbui.es.js +1 -1
- package/dist/bbui.es.js.map +1 -1
- package/package.json +3 -3
- package/src/Table/Table.svelte +17 -6
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budibase/bbui",
|
|
3
3
|
"description": "A UI solution used in the different Budibase projects.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.98-alpha.0",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@adobe/spectrum-css-workflow-icons": "^1.2.1",
|
|
41
|
-
"@budibase/string-templates": "^1.0.
|
|
41
|
+
"@budibase/string-templates": "^1.0.98-alpha.0",
|
|
42
42
|
"@spectrum-css/actionbutton": "^1.0.1",
|
|
43
43
|
"@spectrum-css/actiongroup": "^1.0.1",
|
|
44
44
|
"@spectrum-css/avatar": "^3.0.2",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"svelte-flatpickr": "^3.2.3",
|
|
85
85
|
"svelte-portal": "^1.0.0"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "b5f8bddd3eb3abcfcb8279b386f75fe7383daadc"
|
|
88
88
|
}
|
package/src/Table/Table.svelte
CHANGED
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
$: if (!loading) loaded = true
|
|
57
57
|
$: fields = getFields(schema, showAutoColumns, autoSortColumns)
|
|
58
58
|
$: rows = fields?.length ? data || [] : []
|
|
59
|
+
$: totalRowCount = rows?.length || 0
|
|
59
60
|
$: visibleRowCount = getVisibleRowCount(
|
|
60
61
|
loaded,
|
|
61
62
|
height,
|
|
@@ -63,7 +64,12 @@
|
|
|
63
64
|
rowCount,
|
|
64
65
|
rowHeight
|
|
65
66
|
)
|
|
66
|
-
$:
|
|
67
|
+
$: heightStyle = getHeightStyle(
|
|
68
|
+
visibleRowCount,
|
|
69
|
+
rowCount,
|
|
70
|
+
totalRowCount,
|
|
71
|
+
rowHeight
|
|
72
|
+
)
|
|
67
73
|
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
|
|
68
74
|
$: gridStyle = getGridStyle(fields, schema, showEditColumn)
|
|
69
75
|
$: showEditColumn = allowEditRows || allowSelectRows
|
|
@@ -107,11 +113,16 @@
|
|
|
107
113
|
return Math.min(allRows, Math.ceil(height / rowHeight))
|
|
108
114
|
}
|
|
109
115
|
|
|
110
|
-
const
|
|
111
|
-
|
|
116
|
+
const getHeightStyle = (
|
|
117
|
+
visibleRowCount,
|
|
118
|
+
rowCount,
|
|
119
|
+
totalRowCount,
|
|
120
|
+
rowHeight
|
|
121
|
+
) => {
|
|
122
|
+
if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
|
|
112
123
|
return ""
|
|
113
124
|
}
|
|
114
|
-
return `height: ${headerHeight +
|
|
125
|
+
return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
|
|
115
126
|
}
|
|
116
127
|
|
|
117
128
|
const getGridStyle = (fields, schema, showEditColumn) => {
|
|
@@ -264,11 +275,11 @@
|
|
|
264
275
|
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
|
|
265
276
|
>
|
|
266
277
|
{#if !loaded}
|
|
267
|
-
<div class="loading" style={
|
|
278
|
+
<div class="loading" style={heightStyle}>
|
|
268
279
|
<ProgressCircle />
|
|
269
280
|
</div>
|
|
270
281
|
{:else}
|
|
271
|
-
<div class="spectrum-Table" style={`${
|
|
282
|
+
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
|
|
272
283
|
{#if fields.length}
|
|
273
284
|
<div class="spectrum-Table-head">
|
|
274
285
|
{#if showEditColumn}
|