@budibase/frontend-core 2.7.34-alpha.4 → 2.7.34-alpha.6

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

@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import { writable } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -17,11 +16,8 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import SortButton from "../controls/SortButton.svelte"
-  import AddColumnButton from "../controls/AddColumnButton.svelte"
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
-  import AddRowButton from "../controls/AddRowButton.svelte"
-  import RowHeightButton from "../controls/RowHeightButton.svelte"
-  import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
+  import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
@@ -33,48 +29,37 @@
 
   export let API = null
   export let tableId = null
-  export let tableType = null
   export let schemaOverrides = null
+  export let columnWhitelist = null
   export let allowAddRows = true
-  export let allowAddColumns = true
-  export let allowEditColumns = true
   export let allowExpandRows = true
   export let allowEditRows = true
   export let allowDeleteRows = true
+  export let allowSchemaChanges = true
   export let stripeRows = false
   export let collaboration = true
   export let showAvatars = true
+  export let showControls = true
+  export let initialFilter = null
+  export let initialSortColumn = null
+  export let initialSortOrder = null
+  export let initialRowHeight = null
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
 
-  // State stores
-  const tableIdStore = writable(tableId)
-  const schemaOverridesStore = writable(schemaOverrides)
-  const config = writable({
-    allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-    stripeRows,
-  })
-
   // Build up context
   let context = {
     API: API || createAPIClient(),
     rand,
-    config,
-    tableId: tableIdStore,
-    tableType,
-    schemaOverrides: schemaOverridesStore,
+    props: $$props,
   }
   context = { ...context, ...createEventManagers() }
   context = attachStores(context)
 
   // Reference some stores for local use
   const {
+    config,
     isResizing,
     isReordering,
     ui,
@@ -82,19 +67,27 @@
     loading,
     rowHeight,
     contentLines,
+    gridFocused,
   } = context
 
-  // Keep stores up to date
-  $: tableIdStore.set(tableId)
-  $: schemaOverridesStore.set(schemaOverrides)
+  // Keep config store up to date with props
   $: config.set({
+    tableId,
+    schemaOverrides,
+    columnWhitelist,
     allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    allowSchemaChanges,
     stripeRows,
+    collaboration,
+    showAvatars,
+    showControls,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+    initialRowHeight,
   })
 
   // Set context for children to consume
@@ -116,25 +109,27 @@
   id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  class:stripe={$config.stripeRows}
+  class:stripe={stripeRows}
+  on:mouseenter={() => gridFocused.set(true)}
+  on:mouseleave={() => gridFocused.set(false)}
   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};"
 >
-  <div class="controls">
-    <div class="controls-left">
-      <AddRowButton />
-      <AddColumnButton />
-      <slot name="controls" />
-      <SortButton />
-      <HideColumnsButton />
-      <ColumnWidthButton />
-      <RowHeightButton />
-    </div>
-    <div class="controls-right">
-      {#if showAvatars}
-        <UserAvatars />
-      {/if}
+  {#if showControls}
+    <div class="controls">
+      <div class="controls-left">
+        <slot name="filter" />
+        <SortButton />
+        <HideColumnsButton />
+        <SizeButton />
+        <slot name="controls" />
+      </div>
+      <div class="controls-right">
+        {#if showAvatars}
+          <UserAvatars />
+        {/if}
+      </div>
     </div>
-  </div>
+  {/if}
   {#if $loaded}
     <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
       <div class="grid-data-inner">
@@ -167,25 +162,28 @@
 </div>
 
 <style>
+  /* Core grid */
   .grid {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    overflow: hidden;
-    background: var(--cell-background);
-
     /* Variables */
-    --cell-background: var(--spectrum-global-color-gray-50);
-    --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
+    --grid-background: var(--spectrum-global-color-gray-50);
+    --grid-background-alt: var(--spectrum-global-color-gray-100);
+    --cell-background: var(--grid-background);
+    --cell-background-hover: var(--grid-background-alt);
     --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
     --controls-height: 50px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+    background: var(--grid-background);
   }
   .grid,
   .grid :global(*) {
@@ -201,6 +199,7 @@
     --cell-background-alt: var(--spectrum-global-color-gray-75);
   }
 
+  /* Data layers */
   .grid-data-outer,
   .grid-data-inner {
     flex: 1 1 auto;
@@ -234,7 +233,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--background);
+    background: var(--grid-background-alt);
     z-index: 2;
   }
   .controls-left,
@@ -270,7 +269,15 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--background);
+    background: var(--grid-background-alt);
     opacity: 0.6;
   }
+
+  /* Disable checkbox animation anywhere in the grid data */
+  .grid-data-outer :global(.spectrum-Checkbox-box:before),
+  .grid-data-outer :global(.spectrum-Checkbox-box:after),
+  .grid-data-outer :global(.spectrum-Checkbox-checkmark),
+  .grid-data-outer :global(.spectrum-Checkbox-partialCheckmark) {
+    transition: none;
+  }
 </style>

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

@@ -12,6 +12,7 @@
     config,
     hoveredRowId,
     dispatch,
+    isDragging,
   } = getContext("grid")
 
   let body
@@ -47,8 +48,8 @@
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
         style="width:{renderColumnsWidth}px"
-        on:mouseenter={() => ($hoveredRowId = BlankRowID)}
-        on:mouseleave={() => ($hoveredRowId = null)}
+        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
+        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         on:click={() => dispatch("add-row-inline")}
       />
     {/if}

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

@@ -16,6 +16,7 @@
     focusedRow,
     columnHorizontalInversionIndex,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -27,8 +28,8 @@
 <div
   class="row"
   on:focus
-  on:mouseenter={() => ($hoveredRowId = row._id)}
-  on:mouseleave={() => ($hoveredRowId = null)}
+  on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+  on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
 >
   {#each $renderedColumns as column, columnIdx (column.name)}
     {@const cellId = `${row._id}-${column.name}`}

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

@@ -12,6 +12,7 @@
     bounds,
     hoveredRowId,
     hiddenColumnsWidth,
+    menu,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -30,6 +31,11 @@
   const handleWheel = e => {
     e.preventDefault()
     debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+
+    // If a context menu was visible, hide it
+    if ($menu.visible) {
+      menu.actions.close()
+    }
   }
   const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
     const { top, left } = $scroll

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

@@ -29,7 +29,7 @@
       {/each}
     </div>
   </GridScrollWrapper>
-  {#if $config.allowAddColumns}
+  {#if $config.allowSchemaChanges}
     <div
       class="add"
       style="left:{left}px"
@@ -42,7 +42,7 @@
 
 <style>
   .header {
-    background: var(--background);
+    background: var(--grid-background-alt);
     border-bottom: var(--cell-border);
     position: relative;
     height: var(--default-row-height);
@@ -60,7 +60,7 @@
     border-left: var(--cell-border);
     border-right: var(--cell-border);
     border-bottom: var(--cell-border);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
     z-index: 1;
   }
   .add:hover {

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

@@ -26,6 +26,8 @@
     maxScrollTop,
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
+    selectedRows,
+    config,
   } = getContext("grid")
 
   let visible = false
@@ -37,6 +39,7 @@
   $: width = GutterWidth + ($stickyColumn?.width || 0)
   $: $tableId, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
+  $: selectedRowCount = Object.values($selectedRows).length
 
   const shouldInvertY = (offset, inversionIndex, rows) => {
     if (offset === 0) {
@@ -75,7 +78,7 @@
   }
 
   const startAdding = async () => {
-    if (visible) {
+    if (visible || !firstColumn) {
       return
     }
 
@@ -129,9 +132,6 @@
         e.preventDefault()
         clear()
       }
-    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault()
-      addRow()
     }
   }
 
@@ -141,6 +141,18 @@
   })
 </script>
 
+<!-- New row FAB -->
+{#if !visible && !selectedRowCount && $config.allowAddRows && firstColumn}
+  <div
+    class="new-row-fab"
+    on:click={() => dispatch("add-row-inline")}
+    transition:fade|local={{ duration: 130 }}
+    class:offset={!$stickyColumn}
+  >
+    <Icon name="Add" size="S" />
+  </div>
+{/if}
+
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}
   <div
@@ -151,7 +163,7 @@
     <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
     <div class="underlay" transition:fade|local={{ duration: 130 }} />
     <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
-      <GutterCell on:expand={addViaModal} rowHovered>
+      <GutterCell expandable on:expand={addViaModal} rowHovered>
         <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
         {#if isAdding}
           <div in:fade={{ duration: 130 }} class="loading-overlay" />
@@ -227,6 +239,26 @@
 {/if}
 
 <style>
+  /* New row FAB */
+  .new-row-fab {
+    position: absolute;
+    top: var(--default-row-height);
+    left: calc(var(--gutter-width) / 2);
+    transform: translateX(6px) translateY(-50%);
+    background: var(--cell-background);
+    padding: 4px;
+    border-radius: 50%;
+    border: var(--cell-border);
+    z-index: 10;
+  }
+  .new-row-fab:hover {
+    background: var(--cell-background-hover);
+    cursor: pointer;
+  }
+  .new-row-fab.offset {
+    margin-left: -6px;
+  }
+
   .container {
     position: absolute;
     top: var(--default-row-height);

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

@@ -23,10 +23,11 @@
     scrollLeft,
     dispatch,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowCount = $rows.length
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: selectedRowCount = Object.values($selectedRows).length
   $: width = GutterWidth + ($stickyColumn?.width || 0)
 
   const selectAll = () => {
@@ -50,7 +51,6 @@
 >
   <div class="header row">
     <GutterCell
-      disableExpand
       disableNumber
       on:select={selectAll}
       defaultHeight
@@ -71,8 +71,8 @@
         {@const cellId = `${row._id}-${$stickyColumn?.name}`}
         <div
           class="row"
-          on:mouseenter={() => ($hoveredRowId = row._id)}
-          on:mouseleave={() => ($hoveredRowId = null)}
+          on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         >
           <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
           {#if $stickyColumn}
@@ -96,11 +96,13 @@
       {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
         <div
           class="row new"
-          on:mouseenter={() => ($hoveredRowId = BlankRowID)}
-          on:mouseleave={() => ($hoveredRowId = null)}
+          on:mouseenter={$isDragging
+            ? null
+            : () => ($hoveredRowId = BlankRowID)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
           on:click={() => dispatch("add-row-inline")}
         >
-          <GutterCell disableExpand rowHovered={$hoveredRowId === BlankRowID}>
+          <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
             <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
           </GutterCell>
           {#if $stickyColumn}
@@ -159,7 +161,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
   .row {
     display: flex;

package/src/components/grid/lib/constants.js

@@ -1,6 +1,5 @@
-export const Padding = 256
-export const MaxCellRenderHeight = 252
-export const MaxCellRenderWidthOverflow = 200
+export const Padding = 246
+export const MaxCellRenderHeight = 222
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -12,3 +11,5 @@ export const DefaultRowHeight = SmallRowHeight
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
+export const FocusedCellMinOffset = 48
+export const MaxCellRenderWidthOverflow = Padding - 3 * ScrollBarSize

package/src/components/grid/lib/websocket.js

@@ -3,7 +3,7 @@ import { createWebsocket } from "../../../utils"
 import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
 
 export const createGridWebsocket = context => {
-  const { rows, tableId, users, focusedCellId, table } = context
+  const { rows, tableId, users, focusedCellId, table, API } = context
   const socket = createWebsocket("/socket/grid")
 
   const connectToTable = tableId => {
@@ -11,9 +11,10 @@ export const createGridWebsocket = context => {
       return
     }
     // Identify which table we are editing
+    const appId = API.getAppID()
     socket.emit(
       GridSocketEvent.SelectTable,
-      { tableId },
+      { tableId, appId },
       ({ users: gridUsers }) => {
         users.set(gridUsers)
       }

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -15,6 +15,7 @@
     selectedRows,
     config,
     menu,
+    gridFocused,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -24,6 +25,11 @@
 
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
+    // Ignore completely if the grid is not focused
+    if (!$gridFocused) {
+      return
+    }
+
     // Avoid processing events sourced from certain origins
     if (e.target?.closest) {
       for (let selector of ignoredOriginSelectors) {

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -72,7 +72,9 @@
       </MenuItem>
       <MenuItem
         icon="Maximize"
-        disabled={isNewRow || !$config.allowEditRows}
+        disabled={isNewRow ||
+          !$config.allowEditRows ||
+          !$config.allowExpandRows}
         on:click={() => dispatch("edit-row", $focusedRow)}
         on:click={menu.actions.close}
       >

package/src/components/grid/overlays/ReorderOverlay.svelte

@@ -57,7 +57,7 @@
     position: absolute;
     top: 0;
     width: 2px;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
     margin-left: -2px;
   }
 </style>

package/src/components/grid/overlays/ResizeOverlay.svelte

@@ -65,6 +65,6 @@
     margin-left: -1px;
     width: 2px;
     height: 100%;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
   }
 </style>

package/src/components/grid/overlays/ScrollOverlay.svelte

@@ -15,11 +15,18 @@
     scrollLeft,
     scrollTop,
     height,
+    isDragging,
+    menu,
   } = getContext("grid")
 
   // State for dragging bars
   let initialMouse
   let initialScroll
+  let isDraggingV = false
+  let isDraggingH = false
+
+  // Update state to reflect if we are dragging
+  $: isDragging.set(isDraggingV || isDraggingH)
 
   // Calculate V scrollbar size and offset
   // Terminology is the same for both axes:
@@ -39,6 +46,13 @@
   $: availWidth = renderWidth - barWidth
   $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
 
+  // Helper to close the context menu if it's open
+  const closeMenu = () => {
+    if ($menu.visible) {
+      menu.actions.close()
+    }
+  }
+
   // V scrollbar drag handlers
   const startVDragging = e => {
     e.preventDefault()
@@ -46,6 +60,8 @@
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
+    isDraggingV = true
+    closeMenu()
   }
   const moveVDragging = domDebounce(e => {
     const delta = e.clientY - initialMouse
@@ -59,6 +75,7 @@
   const stopVDragging = () => {
     document.removeEventListener("mousemove", moveVDragging)
     document.removeEventListener("mouseup", stopVDragging)
+    isDraggingV = false
   }
 
   // H scrollbar drag handlers
@@ -68,6 +85,8 @@
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
+    isDraggingH = true
+    closeMenu()
   }
   const moveHDragging = domDebounce(e => {
     const delta = e.clientX - initialMouse
@@ -81,6 +100,7 @@
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
+    isDraggingH = false
   }
 </script>
 
@@ -89,6 +109,7 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
+    class:dragging={isDraggingV}
   />
 {/if}
 {#if $showHScrollbar}
@@ -96,6 +117,7 @@
     class="h-scrollbar"
     style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
+    class:dragging={isDraggingH}
   />
 {/if}
 
@@ -103,11 +125,12 @@
   div {
     position: absolute;
     background: var(--spectrum-global-color-gray-500);
-    opacity: 0.7;
+    opacity: 0.5;
     border-radius: 4px;
     transition: opacity 130ms ease-out;
   }
-  div:hover {
+  div:hover,
+  div.dragging {
     opacity: 1;
   }
   .v-scrollbar {