diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index d35e7cd515..012ab461f0 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -3,6 +3,7 @@ "name": "Blocks", "icon": "Article", "children": [ + "gridblock", "tableblock", "cardsblock", "repeaterblock", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 71637723c1..b3e4438646 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5225,5 +5225,25 @@ "type": "schema", "suffix": "repeater" } + }, + "gridblock": { + "block": true, + "name": "Grid block", + "icon": "Table", + "styles": [ + "size" + ], + "size": { + "width": 600, + "height": 400 + }, + "settings": [ + { + "type": "table", + "label": "Table", + "key": "table", + "required": true + } + ] } } diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte new file mode 100644 index 0000000000..aae41b30c6 --- /dev/null +++ b/packages/client/src/components/app/GridBlock.svelte @@ -0,0 +1,37 @@ + + +
+ +
+ + diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index 70074790ac..060c15a857 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -36,6 +36,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte" export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte" export { default as grid } from "./Grid.svelte" export { default as sidepanel } from "./SidePanel.svelte" +export { default as gridblock } from "./GridBlock.svelte" export * from "./charts" export * from "./forms" export * from "./table" diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte index 56c4c20d54..a8e0da85de 100644 --- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte @@ -70,10 +70,12 @@ color="var(--spectrum-global-color-red-400)" /> - {:else if $config.allowExpandRows} + {:else}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index dc24fc0d64..3fead0c926 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -43,6 +43,9 @@ export let stripeRows = false export let collaboration = true export let showAvatars = true + export let showControls = true + + allowExpandRows = false // Unique identifier for DOM nodes inside this instance const rand = Math.random() @@ -117,22 +120,24 @@ class:stripe={$config.stripeRows} style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" > -
-
- - - - - - - + {#if showControls} +
+
+ + + + + + + +
+
+ {#if showAvatars} + + {/if} +
-
- {#if showAvatars} - - {/if} -
-
+ {/if} {#if $loaded}