diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 2b8a5ec701..10ed0c71c5 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -446,12 +446,7 @@ export const getFrontendStore = () => {
_id: Helpers.uuid(),
_component: definition.component,
_styles: {
- normal: {
- "grid-column-start": 1,
- "grid-column-end": 2,
- "grid-row-start": 1,
- "grid-row-end": 2,
- },
+ normal: {},
hover: {},
active: {},
},
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 16f4bc10c6..94b3ac36be 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -87,10 +87,9 @@
"showSettingsBar": true,
"size": {
"width": 400,
- "height": 100
+ "height": 200
},
"styles": [
- "grid",
"padding",
"size",
"background",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6e5d09646a..d9264f93bf 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -35,6 +35,7 @@
export let isScreen = false
export let isBlock = false
export let parent = null
+ export let parentType = null
// Get parent contexts
const context = getContext("context")
@@ -165,23 +166,35 @@
$: pad = pad || (interactive && hasChildren && inDndPath)
$: $dndIsDragging, (pad = false)
+ // We can apply additional styles automatically if required.
+ // One use case for this is ensuring grid children have proper styles to
+ // display properly inside a grid.
+ $: additionalStyles = getAdditionalStyles(
+ instance._styles?.normal || {},
+ parentType,
+ definition
+ )
+
+ // Compute overall styles
+ $: styles = {
+ ...instance._styles,
+ normal: {
+ ...instance._styles?.normal,
+ ...additionalStyles,
+ },
+ custom: customCSS,
+ id,
+ empty: emptyState,
+ interactive,
+ draggable,
+ editable,
+ }
+
// Update component context
$: store.set({
id,
children: children.length,
- styles: {
- ...instance._styles,
- normal: {
- ...instance._styles?.normal,
- ...(selected ? $builderStore.gridStyles : null),
- },
- custom: customCSS,
- id,
- empty: emptyState,
- interactive,
- draggable,
- editable,
- },
+ styles,
empty: emptyState,
selected,
name,
@@ -442,6 +455,54 @@
})
}
+ const getAdditionalStyles = (styles, parentType, definition) => {
+ let newStyles = {}
+
+ // Ensure grid styles are set
+ if (parentType?.endsWith("/grid")) {
+ newStyles = {
+ ...newStyles,
+ overflow: "hidden",
+ width: "auto",
+ height: "auto",
+ }
+
+ // Guess rough grid size from definition size
+ let columns = 6
+ let rows = 4
+ if (definition.size?.width) {
+ columns = Math.round(definition.size.width / 100)
+ }
+ if (definition.size?.height) {
+ rows = Math.round(definition.size.height / 100)
+ }
+
+ // Ensure grid position styles are set
+ if (!styles["grid-column-start"]) {
+ newStyles["grid-column-start"] = 1
+ }
+ if (!styles["grid-column-end"]) {
+ newStyles["grid-column-end"] = columns + 1
+ }
+ if (!styles["grid-row-start"]) {
+ newStyles["grid-row-start"] = 1
+ }
+ if (!styles["grid-row-end"]) {
+ newStyles["grid-row-end"] = rows + 1
+ }
+
+ // Ensure grid end styles aren't before grid start styles
+ if (newStyles["grid-column-end"] <= newStyles["grid-column-start"]) {
+ newStyles["grid-column-end"] = newStyles["grid-column-start"] + 1
+ }
+ if (newStyles["grid-row-end"] <= newStyles["grid-row-start"]) {
+ newStyles["grid-row-end"] = newStyles["grid-row-start"] + 1
+ }
+ }
+
+ return newStyles
+ }
+
onMount(() => {
if (
$appStore.isDevApp &&
@@ -450,6 +511,7 @@
componentStore.actions.registerInstance(id, {
component: instance._component,
getSettings: () => cachedSettings,
+ getStyles: () => styles,
getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
getDataContext: () => get(context),
reload: () => initialise(instance, true),
@@ -490,7 +552,11 @@