diff --git a/lerna.json b/lerna.json index 8d3d0f4c2c..838ce6d479 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index ff08c9e057..49d4038181 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -20,7 +20,7 @@ "test:watch": "jest --watchAll" }, "dependencies": { - "@budibase/types": "2.1.32-alpha.8", + "@budibase/types": "2.1.32-alpha.10", "@shopify/jest-koa-mocks": "5.0.1", "@techpass/passport-openidconnect": "0.3.2", "aws-sdk": "2.1030.0", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 1cd2579bc3..388faff0d8 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,7 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.2.1", - "@budibase/string-templates": "2.1.32-alpha.8", + "@budibase/string-templates": "2.1.32-alpha.10", "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/actiongroup": "^1.0.1", "@spectrum-css/avatar": "^3.0.2", diff --git a/packages/bbui/src/Skeleton/Skeleton.svelte b/packages/bbui/src/Skeleton/Skeleton.svelte new file mode 100644 index 0000000000..e12d37b057 --- /dev/null +++ b/packages/bbui/src/Skeleton/Skeleton.svelte @@ -0,0 +1,56 @@ +
+
+ +
+
+ + diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 7745c3c407..d6be0e8c9b 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -71,7 +71,8 @@ visibleRowCount, rowCount, totalRowCount, - rowHeight + rowHeight, + loading ) $: sortedRows = sortRows(rows, sortColumn, sortOrder) $: gridStyle = getGridStyle(fields, schema, showEditColumn) @@ -120,8 +121,12 @@ visibleRowCount, rowCount, totalRowCount, - rowHeight + rowHeight, + loading ) => { + if (loading) { + return `height: ${headerHeight + visibleRowCount * rowHeight}px;` + } if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) { return "" } @@ -277,9 +282,11 @@ bind:offsetHeight={height} style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`} > - {#if !loaded} + {#if loading}
- + + +
{:else}
@@ -438,9 +445,10 @@ /* Loading */ .loading { - display: grid; - place-items: center; + display: flex; + align-items: center; min-height: 100px; + justify-content: center; } /* Table */ diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 538a62188f..601c4dcbca 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -4,6 +4,7 @@ import "./bbui.css" import "@spectrum-css/icon/dist/index-vars.css" // Components +export { default as Skeleton } from "./Skeleton/Skeleton.svelte" export { default as Input } from "./Form/Input.svelte" export { default as Stepper } from "./Form/Stepper.svelte" export { default as TextArea } from "./Form/TextArea.svelte" diff --git a/packages/builder/package.json b/packages/builder/package.json index 69dfd089ed..202cf52cb0 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,10 +71,10 @@ } }, "dependencies": { - "@budibase/bbui": "2.1.32-alpha.8", - "@budibase/client": "2.1.32-alpha.8", - "@budibase/frontend-core": "2.1.32-alpha.8", - "@budibase/string-templates": "2.1.32-alpha.8", + "@budibase/bbui": "2.1.32-alpha.10", + "@budibase/client": "2.1.32-alpha.10", + "@budibase/frontend-core": "2.1.32-alpha.10", + "@budibase/string-templates": "2.1.32-alpha.10", "@sentry/browser": "5.19.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", diff --git a/packages/builder/src/components/integration/QueryBindingBuilder.svelte b/packages/builder/src/components/integration/QueryBindingBuilder.svelte index 255bee21dd..3a89c4b968 100644 --- a/packages/builder/src/components/integration/QueryBindingBuilder.svelte +++ b/packages/builder/src/components/integration/QueryBindingBuilder.svelte @@ -1,5 +1,5 @@
Bindings - {#if !bindable} - - {/if}
{#if !bindable} diff --git a/packages/cli/package.json b/packages/cli/package.json index f22d6e6aae..8dfb594d36 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/cli", - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "description": "Budibase CLI, for developers, self hosting and migrations.", "main": "src/index.js", "bin": { @@ -26,9 +26,9 @@ "outputPath": "build" }, "dependencies": { - "@budibase/backend-core": "2.1.32-alpha.8", - "@budibase/string-templates": "2.1.32-alpha.8", - "@budibase/types": "2.1.32-alpha.8", + "@budibase/backend-core": "2.1.32-alpha.10", + "@budibase/string-templates": "2.1.32-alpha.10", + "@budibase/types": "2.1.32-alpha.10", "axios": "0.21.2", "chalk": "4.1.0", "cli-progress": "3.11.2", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 8ded099d80..1f29012197 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -284,7 +284,7 @@ "editable": true, "size": { "width": 105, - "height": 35 + "height": 32 }, "settings": [ { @@ -683,7 +683,7 @@ "editable": true, "size": { "width": 400, - "height": 30 + "height": 24 }, "settings": [ { @@ -808,7 +808,7 @@ "editable": true, "size": { "width": 400, - "height": 40 + "height": 32 }, "settings": [ { @@ -2447,6 +2447,7 @@ ] }, "stringfield": { + "skeleton": false, "name": "Text Field", "icon": "Text", "styles": [ @@ -2455,7 +2456,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 32 }, "settings": [ { @@ -2538,6 +2539,7 @@ ] }, "numberfield": { + "skeleton": false, "name": "Number Field", "icon": "123", "styles": [ @@ -2652,6 +2654,7 @@ ] }, "optionsfield": { + "skeleton": false, "name": "Options Picker", "icon": "Menu", "styles": [ @@ -2820,6 +2823,7 @@ ] }, "multifieldselect": { + "skeleton": false, "name": "Multi-select Picker", "icon": "ViewList", "styles": [ @@ -2982,12 +2986,13 @@ ] }, "booleanfield": { + "skeleton": false, "name": "Checkbox", "icon": "SelectBox", "editable": true, "size": { - "width": 400, - "height": 50 + "width": 20, + "height": 20 }, "settings": [ { @@ -3139,6 +3144,7 @@ ] }, "datetimefield": { + "skeleton": false, "name": "Date Picker", "icon": "Date", "styles": [ @@ -3220,6 +3226,7 @@ ] }, "codescanner": { + "skeleton": false, "name": "Barcode/QR Scanner", "icon": "Camera", "styles": [ @@ -3385,6 +3392,7 @@ ] }, "attachmentfield": { + "skeleton": false, "name": "Attachment", "icon": "Attach", "styles": [ @@ -3443,6 +3451,7 @@ ] }, "relationshipfield": { + "skeleton": false, "name": "Relationship Picker", "icon": "TaskList", "styles": [ @@ -3506,6 +3515,7 @@ ] }, "jsonfield": { + "skeleton": false, "name": "JSON Field", "icon": "Brackets", "styles": [ @@ -3707,6 +3717,7 @@ } }, "table": { + "skeleton": false, "name": "Table", "icon": "Table", "illegalChildren": [ diff --git a/packages/client/package.json b/packages/client/package.json index 1afd060163..b9b1564eb9 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "2.1.32-alpha.8", + "version": "2.1.32-alpha.10", "license": "MPL-2.0", "module": "dist/budibase-client.js", "main": "dist/budibase-client.js", @@ -19,9 +19,9 @@ "dev:builder": "rollup -cw" }, "dependencies": { - "@budibase/bbui": "2.1.32-alpha.8", - "@budibase/frontend-core": "2.1.32-alpha.8", - "@budibase/string-templates": "2.1.32-alpha.8", + "@budibase/bbui": "2.1.32-alpha.10", + "@budibase/frontend-core": "2.1.32-alpha.10", + "@budibase/string-templates": "2.1.32-alpha.10", "@spectrum-css/button": "^3.0.3", "@spectrum-css/card": "^3.0.3", "@spectrum-css/divider": "^1.0.3", diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 0131c5f0d4..c23a31b8b9 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -23,6 +23,7 @@ // to render this part of the block, taking advantage of binding enrichment $: id = `${block.id}-${context ?? rand}` $: instance = { + _blockElementHasChildren: $$slots?.default ?? false, _component: `@budibase/standard-components/${type}`, _id: id, _instanceName: type[0].toUpperCase() + type.slice(1), diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index b98548fc9c..c44225cd71 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -29,6 +29,7 @@ import Placeholder from "components/app/Placeholder.svelte" import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte" import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte" + import Skeleton from "components/app/Skeleton.svelte" export let instance = {} export let isLayout = false @@ -38,6 +39,7 @@ // Get parent contexts const context = getContext("context") + const loading = getContext("loading") const insideScreenslot = !!getContext("screenslot") // Create component context @@ -470,9 +472,21 @@ componentStore.actions.unregisterInstance(id) } }) + + $: showSkeleton = + $loading && + definition.name !== "Screenslot" && + children.length === 0 && + !instance._blockElementHasChildren && + definition.skeleton !== false -{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden} +{#if showSkeleton} + +{:else if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
+ import { writable } from "svelte/store" import { setContext, getContext, onMount } from "svelte" import Router, { querystring } from "svelte-spa-router" import { routeStore, stateStore } from "stores" @@ -9,6 +10,9 @@ const component = getContext("component") setContext("screenslot", true) + const loading = writable(false) + setContext("loading", loading) + // Only wrap this as an array to take advantage of svelte keying, // to ensure the svelte-spa-router is fully remounted when route config // changes diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte index 8cd2f00eec..c28cdef24c 100644 --- a/packages/client/src/components/app/DataProvider.svelte +++ b/packages/client/src/components/app/DataProvider.svelte @@ -1,6 +1,7 @@ {#if $component.empty} - {:else if rows.length > 0} + {:else if !$loading && rows.length === 0} +
{noRowsMessage}
+ {:else} {#each rows as row, index} {/each} - {:else if loaded && noRowsMessage} -
{noRowsMessage}
{/if} diff --git a/packages/client/src/components/app/Skeleton.svelte b/packages/client/src/components/app/Skeleton.svelte new file mode 100644 index 0000000000..5c247bf3e4 --- /dev/null +++ b/packages/client/src/components/app/Skeleton.svelte @@ -0,0 +1,31 @@ + + +
+ + + +
diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte index 9887901d4c..da04c57e82 100644 --- a/packages/client/src/components/app/forms/AttachmentField.svelte +++ b/packages/client/src/components/app/forms/AttachmentField.svelte @@ -76,18 +76,26 @@ bind:fieldApi defaultValue={[]} > - {#if fieldState} - - {/if} +
+ {#if fieldState} + + {/if} +
+ + diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index d6dddbbe39..a14c6ac9c8 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -1,6 +1,7 @@