@@ -171,6 +171,7 @@
control={getComponentForSetting(setting)}
label={setting.label}
labelHidden={setting.labelHidden}
+ wide={setting.wide}
key={setting.key}
value={componentInstance[setting.key]}
defaultValue={setting.defaultValue}
@@ -207,7 +208,7 @@
{/if}
{/each}
-{#if componentDefinition?.block && !tag}
+{#if componentDefinition?.block && !tag && componentDefinition.ejectable !== false}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 1c7eddc476..59c1b5c620 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -64,6 +64,7 @@
on:change={event => (tempValue = event.detail)}
allowJS
{bindings}
+ autofocusEditor={true}
/>
{/key}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index dd129be11e..96e8faf93c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -8,6 +8,7 @@
"cardsblock",
"repeaterblock",
"formblock",
+ "multistepformblock",
"chartblock",
"rowexplorer"
]
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 45fe005ceb..65ea172012 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -36,12 +36,14 @@
// Determine selected component ID
$: selectedComponentId = $store.selectedComponentId
+ $: hoverComponentId = $store.hoverComponentId
$: previewData = {
appId: $store.appId,
layout,
screen,
selectedComponentId,
+ hoverComponentId,
theme: $store.theme,
customTheme: $store.customTheme,
previewDevice: $store.previewDevice,
@@ -117,6 +119,8 @@
error = event.error || "An unknown error occurred"
} else if (type === "select-component" && data.id) {
$store.selectedComponentId = data.id
+ } else if (type === "hover-component" && data.id) {
+ $store.hoverComponentId = data.id
} else if (type === "update-prop") {
await store.actions.components.updateSetting(data.prop, data.value)
} else if (type === "update-styles") {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 1ad522cbd4..8d4d64e4be 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -89,6 +89,17 @@
}
return findComponentPath($selectedComponent, component._id)?.length > 0
}
+
+ const handleMouseover = componentId => {
+ if ($store.hoverComponentId !== componentId) {
+ $store.hoverComponentId = componentId
+ }
+ }
+ const handleMouseout = componentId => {
+ if ($store.hoverComponentId === componentId) {
+ $store.hoverComponentId = null
+ }
+ }
@@ -109,6 +120,9 @@
on:dragover={dragover(component, index)}
on:iconClick={() => toggleNodeOpen(component._id)}
on:drop={onDrop}
+ hovering={$store.hoverComponentId === component._id}
+ on:mouseenter={() => handleMouseover(component._id)}
+ on:mouseleave={() => handleMouseout(component._id)}
text={getComponentText(component)}
icon={getComponentIcon(component)}
iconTooltip={getComponentName(component)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index 67b501e141..1e2ea47e63 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -32,6 +32,17 @@
const handleScroll = e => {
scrolling = e.target.scrollTop !== 0
}
+
+ const handleMouseover = componentId => {
+ if ($store.hoverComponentId !== componentId) {
+ $store.hoverComponentId = componentId
+ }
+ }
+ const handleMouseout = componentId => {
+ if ($store.hoverComponentId === componentId) {
+ $store.hoverComponentId = null
+ }
+ }
@@ -57,6 +68,12 @@
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-screen`
}}
+ hovering={$store.hoverComponentId ===
+ `${$store.selectedScreenId}-screen`}
+ on:mouseenter={() =>
+ handleMouseover(`${$store.selectedScreenId}-screen`)}
+ on:mouseleave={() =>
+ handleMouseout(`${$store.selectedScreenId}-screen`)}
id={`component-screen`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-screen`
@@ -78,6 +95,12 @@
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-navigation`
}}
+ hovering={$store.hoverComponentId ===
+ `${$store.selectedScreenId}-navigation`}
+ on:mouseenter={() =>
+ handleMouseover(`${$store.selectedScreenId}-navigation`)}
+ on:mouseleave={() =>
+ handleMouseout(`${$store.selectedScreenId}-navigation`)}
id={`component-nav`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-navigation`
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 92ed3dcfc7..a9d64afd19 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -125,7 +125,6 @@
// Handler for DatasourceModal confirmation, move to screen access select
const confirmScreenDatasources = async ({ templates }) => {
- console.log(templates)
selectedTemplates = templates
screenAccessRoleModal.show()
}
diff --git a/packages/builder/src/pages/builder/auth/reset.svelte b/packages/builder/src/pages/builder/auth/reset.svelte
index ac7414c5ca..06d5feaa53 100644
--- a/packages/builder/src/pages/builder/auth/reset.svelte
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@@ -45,7 +45,7 @@
}
} catch (err) {
submitted = false
- notifications.error("Unable to reset password")
+ notifications.error(err.message || "Unable to reset password")
}
}
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index a5b0b19c9b..4b68c285f8 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -257,7 +257,7 @@
{
diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte
index cbe84973ef..9e7c402e91 100644
--- a/packages/builder/src/pages/builder/portal/account/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/account/usage.svelte
@@ -15,6 +15,7 @@
import { DashCard, Usage } from "components/usage"
import { PlanModel } from "constants"
import { sdk } from "@budibase/shared-core"
+ import { PlanType } from "@budibase/types"
let staticUsage = []
let monthlyUsage = []
@@ -106,7 +107,14 @@
}
const planTitle = () => {
- return `${capitalise(license?.plan.type)} Plan`
+ const planType = license?.plan.type
+ let planName = license?.plan.type
+ if (planType === PlanType.PREMIUM_PLUS) {
+ planName = "Premium"
+ } else if (planType === PlanType.ENTERPRISE_BASIC) {
+ planName = "Enterprise"
+ }
+ return `${capitalise(planName)} Plan`
}
const getDaysRemaining = timestamp => {
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index cf2c61b11d..ad0d3658ea 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -1,6 +1,5 @@
+
+
+
+ {#each enrichedSteps as step, stepIdx}
+
+
+
+
+
+
+
+ {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
+ {#if getComponentForField(field)}
+
+ {/if}
+ {/each}
+
+
+
+
+ {/each}
+
+
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 1cb77cb3e5..04a7134ca0 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -5,6 +5,7 @@
import BlockComponent from "components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
+ import { Utils } from "@budibase/frontend-core"
export let title
export let dataSource
@@ -33,6 +34,7 @@
export let notificationOverride
const { fetchDatasourceSchema, API } = getContext("sdk")
+ const component = getContext("component")
const stateKey = `ID_${generate()}`
let formId
@@ -259,16 +261,25 @@
name="Details form block"
type="formblock"
bind:id={detailsFormBlockId}
+ context="form-edit"
props={{
dataSource,
- saveButtonLabel: sidePanelSaveLabel || "Save", //always show
- deleteButtonLabel: deleteLabel,
+ buttonPosition: "top",
+ buttons: Utils.buildFormBlockButtonConfig({
+ _id: $component.id + "-form-edit",
+ showDeleteButton: deleteLabel !== "",
+ showSaveButton: true,
+ saveButtonLabel: sidePanelSaveLabel || "Save",
+ deleteButtonLabel: deleteLabel,
+ notificationOverride,
+ actionType: "Update",
+ dataSource,
+ }),
actionType: "Update",
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
fields: sidePanelFields || normalFields,
title: editTitle,
labelPosition: "left",
- notificationOverride,
}}
/>
@@ -284,16 +295,23 @@
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index e4d3b55eff..cdf1a05628 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -1,31 +1,32 @@
-
- {#if actionType === "Create"}
-
-
-
- {:else}
-
-
-
-
-
- {/if}
-
+
+
+
diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
new file mode 100644
index 0000000000..26767f84b3
--- /dev/null
+++ b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
@@ -0,0 +1,64 @@
+
+
+
+ {#if actionType === "Create"}
+
+
+
+ {:else}
+
+
+
+
+
+ {/if}
+
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 52ef3ac80c..24d4cfa14c 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -1,22 +1,18 @@
-