diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index a7f506a387..491b58c4c5 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -127,7 +127,9 @@ // Empty components are those which accept children but do not have any. // Empty states can be shown for these components, but can be disabled // in the component manifest. - $: empty = interactive && !children.length && hasChildren + $: empty = + (interactive && !children.length && hasChildren) || + hasMissingRequiredSettings $: emptyState = empty && showEmptyState // Enrich component settings diff --git a/packages/client/src/components/app/ComponentPlaceholder.svelte b/packages/client/src/components/app/ComponentPlaceholder.svelte index 13cc217ef0..7b0a8bbbd9 100644 --- a/packages/client/src/components/app/ComponentPlaceholder.svelte +++ b/packages/client/src/components/app/ComponentPlaceholder.svelte @@ -2,28 +2,25 @@ import { getContext } from "svelte" import { builderStore } from "stores" - const { styleable } = getContext("sdk") const component = getContext("component") $: requiredSetting = $component.missingRequiredSettings?.[0] {#if $builderStore.inBuilder && requiredSetting} -
-
- - Add the {requiredSetting.label} setting to start using your - component - - - { - builderStore.actions.highlightSetting(requiredSetting.key) - }} - > - Show me - -
+
+ + Add the {requiredSetting.label} setting to start using your component + - + + { + builderStore.actions.highlightSetting(requiredSetting.key) + }} + > + Show me +
{/if} diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte index 69b2ccfc82..8cd2f00eec 100644 --- a/packages/client/src/components/app/DataProvider.svelte +++ b/packages/client/src/components/app/DataProvider.svelte @@ -1,7 +1,6 @@