Update some component manifest styles and fix issue with default grid vars

packages/client/manifest.json

@@ -114,13 +114,12 @@
     "icon": "Selection",
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
       "height": 200
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "stretch",
+      "vAlign": "stretch"
-      "showControls": false
     },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
@@ -363,8 +362,12 @@
     "illegalChildren": ["section"],
     "showEmptyState": false,
     "size": {
-      "width": 400,
+      "width": 600,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -735,8 +738,12 @@
     "illegalChildren": ["section"],
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -4963,8 +4970,12 @@
     "hasChildren": true,
     "actions": ["RefreshDatasource"],
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -5281,6 +5292,10 @@
       "width": 100,
       "height": 35
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -5327,6 +5342,14 @@
     "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
+    "size": {
+      "width": 600,
+      "height": 400
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "select",
@@ -6250,6 +6273,10 @@
       "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "text",
@@ -6459,8 +6486,12 @@
     "illegalChildren": ["section", "rowexplorer"],
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
-      "height": 100
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -6731,9 +6762,13 @@
     "hasChildren": false,
     "ejectable": false,
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "styles": ["size"],
     "settings": [
       {
@@ -6922,7 +6957,7 @@
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
     "grid": {
@@ -7147,8 +7182,12 @@
     "name": "Row Explorer Block",
     "icon": "PersonalizationField",
     "size": {
-      "width": 600,
+      "width": 800,
-      "height": 400
+      "height": 426
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
     },
     "settings": [
       {
@@ -7272,8 +7311,7 @@
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "stretch",
+      "vAlign": "stretch"
-      "showControls": false
     },
     "settings": [
       {

packages/client/src/components/Component.svelte

@@ -634,6 +634,8 @@
   // Generates any required base styles based on the component definition
   const getBaseStyles = definition => {
     return {
+      "--default-width": definition.size?.width || 100,
+      "--default-height": definition.size?.height || 100,
       ...getBaseGridVars(definition),
     }
   }

packages/client/src/components/app/container/GridContainer.svelte

@@ -41,8 +41,8 @@
       ...$component.styles?.normal,
       "--cols": cols,
       "--rows": rows,
-      "--col-size": `${colSize}px`,
+      "--col-size": colSize,
-      "--row-size": `${rowSize}px`,
+      "--row-size": rowSize,
     },
     empty: false,
   }}
@@ -70,14 +70,14 @@
     gap: 0;
 
     /* Prevent cross-grid variable inheritance */
-    --grid-desktop-col-start: initial;
+    /*    --grid-desktop-col-start: initial;
     --grid-desktop-col-end: initial;
     --grid-desktop-row-start: initial;
     --grid-desktop-row-end: initial;
     --grid-mobile-col-start: initial;
     --grid-mobile-col-end: initial;
     --grid-mobile-row-start: initial;
-    --grid-mobile-row-end: initial;
+    --grid-mobile-row-end: initial;*/
   }
   .grid,
   .underlay {
@@ -111,9 +111,22 @@
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
     --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
-    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
+    --col-end: var(
+      --grid-desktop-col-end,
+      var(
+        --grid-mobile-col-end,
+        /* Our final*/
+          round(up, calc(var(--default-width) / var(--col-size) + 1))
+      )
+    );
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
-    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
+    --row-end: var(
+      --grid-desktop-row-end,
+      var(
+        --grid-mobile-row-end,
+        round(up, calc(var(--default-height) / var(--row-size) + 1))
+      )
+    );
 
     /*  Flex vars */
     --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -1,14 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
-  import { get } from "svelte/store"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
-  import {
+  import { isGridEvent, getGridParentID, getGridVar } from "utils/grid"
-    isGridEvent,
-    getGridParentID,
-    getGridVar,
-    getGridVarValue,
-  } from "utils/grid"
 
   // Smallest possible 1x1 transparent GIF
   const ghost = new Image(1, 1)
@@ -166,24 +160,21 @@
     }
 
     const { id, gridId } = dragInfo
+    const domComponent = getDOMNode(id)
     const domGrid = getDOMNode(gridId)
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
-    const instance = get(componentStore.actions.getComponentInstance(id))
+    const styles = getComputedStyle(domComponent.parentNode)
-    if (!instance) {
-      return
-    }
-    const styles = get(instance.state).styles
     if (domGrid) {
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
 
         // Ensure things are within limits
-        rowStart: minMax(getGridVarValue(styles, vars.rowStart), 1, gridRows),
+        rowStart: minMax(styles["grid-row-start"], 1, gridRows),
-        rowEnd: minMax(getGridVarValue(styles, vars.rowEnd), 2, gridRows + 1),
+        rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
-        colStart: minMax(getGridVarValue(styles, vars.colStart), 1, gridCols),
+        colStart: minMax(styles["grid-column-start"], 1, gridCols),
-        colEnd: minMax(getGridVarValue(styles, vars.colEnd), 2, gridCols + 1),
+        colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
       }
       handleEvent(e)
     }

packages/client/src/components/preview/GridStylesButton.svelte

@@ -11,6 +11,7 @@
   export let componentId
 
   $: currentValue = getGridVarValue(gridStyles, style)
+  $: console.log(style, currentValue, value)
   $: active = currentValue === value
 </script>
 

packages/client/src/components/preview/SettingsBar.svelte

@@ -40,7 +40,10 @@
   $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
-  $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
+  $: showGridStyles =
+    insideGrid &&
+    (definition?.grid?.hAlign !== "stretch" ||
+      definition?.grid?.vAlign !== "stretch")
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
   $: gridStyles = $state?.styles

packages/client/src/utils/grid.js

@@ -70,23 +70,17 @@ export const getGridParentID = node => {
 }
 
 // Generates the base set of grid CSS vars from a component definition
-const alignmentToStyleMap = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
-}
 export const getBaseGridVars = definition => {
   const gridHAlign = definition?.grid?.hAlign || "stretch"
   const gridVAlign = definition?.grid?.vAlign || "center"
   const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto"
   return {
-    ["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],
+    "--grid-desktop-h-align": gridHAlign,
-    ["--grid-mobile-h-align"]: alignmentToStyleMap[gridHAlign],
+    "--grid-mobile-h-align": gridHAlign,
-    ["--grid-desktop-v-align"]: alignmentToStyleMap[gridVAlign],
+    "--grid-desktop-v-align": gridVAlign,
-    ["--grid-mobile-v-align"]: alignmentToStyleMap[gridVAlign],
+    "--grid-mobile-v-align": gridVAlign,
-    ["--grid-desktop-child-flex"]: flexStyles,
+    "--grid-desktop-child-flex": flexStyles,
-    ["--grid-mobile-child-flex"]: flexStyles,
+    "--grid-mobile-child-flex": flexStyles,
   }
 }