@budibase/frontend-core 2.13.10 → 2.13.11

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.13.10",
+  "version": "2.13.11",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.13.10",
-    "@budibase/shared-core": "2.13.10",
+    "@budibase/bbui": "2.13.11",
+    "@budibase/shared-core": "2.13.11",
     "dayjs": "^1.10.8",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "cd1db2c1fc02e152cb156464cd43aba32d5ccdf0"
+  "gitHead": "230e8d171197a2db905600d2914decbca281f8e0"
 }

package/src/components/grid/cells/GridCell.svelte

@@ -15,7 +15,7 @@
   $: style = getStyle(width, selectedUser)
 
   const getStyle = (width, selectedUser) => {
-    let style = `flex: 0 0 ${width}px;`
+    let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
       style += `--user-color:${selectedUser.color};`
     }

package/src/components/grid/layout/ButtonColumn.svelte

@@ -0,0 +1,144 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { Button } from "@budibase/bbui"
+  import GridCell from "../cells/GridCell.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+
+  const {
+    renderedRows,
+    hoveredRowId,
+    props,
+    width,
+    rows,
+    focusedRow,
+    selectedRows,
+    visibleColumns,
+    scroll,
+    isDragging,
+    buttonColumnWidth,
+  } = getContext("grid")
+
+  let measureContainer
+
+  $: buttons = $props.buttons?.slice(0, 3) || []
+  $: columnsWidth = $visibleColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+  $: end = columnsWidth - 1 - $scroll.left
+  $: left = Math.min($width - $buttonColumnWidth, end)
+
+  const handleClick = async (button, row) => {
+    await button.onClick?.(rows.actions.cleanRow(row))
+    // Refresh the row in case it changed
+    await rows.actions.refreshRow(row._id)
+  }
+
+  onMount(() => {
+    const observer = new ResizeObserver(entries => {
+      const width = entries?.[0]?.contentRect?.width ?? 0
+      buttonColumnWidth.set(width)
+    })
+    observer.observe(measureContainer)
+  })
+</script>
+
+<!-- Hidden copy of buttons to measure -->
+<div class="measure" bind:this={measureContainer}>
+  <GridCell width="auto">
+    <div class="buttons">
+      {#each buttons as button}
+        <Button size="S">
+          {button.text || "Button"}
+        </Button>
+      {/each}
+    </div>
+  </GridCell>
+</div>
+
+<div
+  class="button-column"
+  style="left:{left}px"
+  class:hidden={$buttonColumnWidth === 0}
+>
+  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+    <GridScrollWrapper scrollVertically attachHandlers>
+      {#each $renderedRows as row}
+        {@const rowSelected = !!$selectedRows[row._id]}
+        {@const rowHovered = $hoveredRowId === row._id}
+        {@const rowFocused = $focusedRow?._id === row._id}
+        <div
+          class="row"
+          on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+        >
+          <GridCell
+            width="auto"
+            rowIdx={row.__idx}
+            selected={rowSelected}
+            highlighted={rowHovered || rowFocused}
+          >
+            <div class="buttons">
+              {#each buttons as button}
+                <Button
+                  newStyles
+                  size="S"
+                  cta={button.type === "cta"}
+                  primary={button.type === "primary"}
+                  secondary={button.type === "secondary"}
+                  warning={button.type === "warning"}
+                  overBackground={button.type === "overBackground"}
+                  on:click={() => handleClick(button, row)}
+                >
+                  {button.text || "Button"}
+                </Button>
+              {/each}
+            </div>
+          </GridCell>
+        </div>
+      {/each}
+    </GridScrollWrapper>
+  </div>
+</div>
+
+<style>
+  .button-column {
+    display: flex;
+    flex-direction: column;
+    background: var(--cell-background);
+    position: absolute;
+    top: 0;
+  }
+  .button-column.hidden {
+    opacity: 0;
+  }
+  .content {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--cell-padding);
+    gap: var(--cell-padding);
+    height: inherit;
+  }
+
+  /* Add left cell border */
+  .button-column :global(.cell) {
+    border-left: var(--cell-border);
+  }
+
+  /* Hidden copy of buttons to measure width against */
+  .measure {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>

package/src/components/grid/layout/Grid.svelte

@@ -48,6 +48,7 @@
   export let fixedRowHeight = null
   export let notifySuccess = null
   export let notifyError = null
+  export let buttons = null
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -99,6 +100,7 @@
     fixedRowHeight,
     notifySuccess,
     notifyError,
+    buttons,
   })
 
   // Set context for children to consume

package/src/components/grid/layout/GridBody.svelte

@@ -3,6 +3,7 @@
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import GridRow from "./GridRow.svelte"
   import { BlankRowID } from "../lib/constants"
+  import ButtonColumn from "./ButtonColumn.svelte"
 
   const {
     bounds,
@@ -13,6 +14,7 @@
     dispatch,
     isDragging,
     config,
+    props,
   } = getContext("grid")
 
   let body
@@ -54,6 +56,9 @@
       />
     {/if}
   </GridScrollWrapper>
+  {#if $props.buttons?.length}
+    <ButtonColumn />
+  {/if}
 </div>
 
 <style>

package/src/components/grid/stores/rows.js

@@ -314,8 +314,12 @@ export const createActions = context => {
 
   // Refreshes a specific row
   const refreshRow = async id => {
-    const row = await datasource.actions.getRow(id)
-    replaceRow(id, row)
+    try {
+      const row = await datasource.actions.getRow(id)
+      replaceRow(id, row)
+    } catch {
+      // Do nothing - we probably just don't support refreshing individual rows
+    }
   }
 
   // Refreshes all data

package/src/components/grid/stores/scroll.js

@@ -20,8 +20,15 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { rows, visibleColumns, stickyColumn, rowHeight, width, height } =
-    context
+  const {
+    rows,
+    visibleColumns,
+    stickyColumn,
+    rowHeight,
+    width,
+    height,
+    buttonColumnWidth,
+  } = context
 
   // Memoize store primitives
   const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0)
@@ -40,9 +47,10 @@ export const deriveStores = context => {
 
   // Derive horizontal limits
   const contentWidth = derived(
-    [visibleColumns, stickyColumnWidth],
-    ([$visibleColumns, $stickyColumnWidth]) => {
-      let width = GutterWidth + Padding + $stickyColumnWidth
+    [visibleColumns, stickyColumnWidth, buttonColumnWidth],
+    ([$visibleColumns, $stickyColumnWidth, $buttonColumnWidth]) => {
+      const space = Math.max(Padding, $buttonColumnWidth - 1)
+      let width = GutterWidth + space + $stickyColumnWidth
       $visibleColumns.forEach(col => {
         width += col.width
       })

package/src/components/grid/stores/ui.js

@@ -18,6 +18,7 @@ export const createStores = context => {
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
   const isDragging = writable(false)
+  const buttonColumnWidth = writable(0)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -51,6 +52,7 @@ export const createStores = context => {
     rowHeight,
     gridFocused,
     isDragging,
+    buttonColumnWidth,
     selectedRows: {
       ...selectedRows,
       actions: {