Apply column order for Grid block (#11099)

* Apply column order for Grid block

* Refactor

* Do not allow column reorder for Grid block

* Refactor

packages/builder/src/components/design/settings/componentSettings.js

@@ -20,6 +20,7 @@ import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelt
 import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
+import GridColumnEditor from "./controls/ColumnEditor/GridColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
 
@@ -47,6 +48,7 @@ const componentMap = {
   fieldConfiguration: FieldConfiguration,
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
+  "columns/grid": GridColumnEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -18,6 +18,7 @@
   export let options = []
   export let schema = {}
   export let allowCellEditing = true
+  export let allowReorder = true
 
   const flipDurationMs = 150
   let dragDisabled = true
@@ -110,6 +111,7 @@
             {#each columns as column (column.id)}
               <div class="column" animate:flip={{ duration: flipDurationMs }}>
                 <div
+                  class:hide={!allowReorder}
                   class="handle"
                   aria-label="drag-handle"
                   style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
@@ -193,6 +195,9 @@
     display: grid;
     place-items: center;
   }
+  .handle.hide {
+    visibility: hidden;
+  }
   .wide {
     grid-column: 2 / -1;
   }

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -13,6 +13,7 @@
   export let componentInstance
   export let value = []
   export let allowCellEditing = true
+  export let allowReorder = true
 
   const dispatch = createEventDispatcher()
 
@@ -85,6 +86,7 @@
     {options}
     {schema}
     {allowCellEditing}
+    {allowReorder}
   />
 </Drawer>
 

packages/builder/src/components/design/settings/controls/ColumnEditor/GridColumnEditor.svelte

@@ -0,0 +1,10 @@
+<script>
+  import ColumnEditor from "./ColumnEditor.svelte"
+</script>
+
+<ColumnEditor
+  {...$$props}
+  on:change
+  allowCellEditing={false}
+  allowReorder={false}
+/>

packages/client/manifest.json

@@ -5248,7 +5248,7 @@
         "required": true
       },
       {
-        "type": "columns/basic",
+        "type": "columns/grid",
         "label": "Columns",
         "key": "columns",
         "dependsOn": "table"