@budibase/frontend-core 2.7.34-alpha.8 → 2.7.35

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

@@ -1,5 +1,6 @@
 <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"
@@ -16,8 +17,11 @@
   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 SizeButton from "../controls/SizeButton.svelte"
+  import AddRowButton from "../controls/AddRowButton.svelte"
+  import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
@@ -29,37 +33,48 @@
 
   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,
-    props: $$props,
+    config,
+    tableId: tableIdStore,
+    tableType,
+    schemaOverrides: schemaOverridesStore,
   }
   context = { ...context, ...createEventManagers() }
   context = attachStores(context)
 
   // Reference some stores for local use
   const {
-    config,
     isResizing,
     isReordering,
     ui,
@@ -67,27 +82,19 @@
     loading,
     rowHeight,
     contentLines,
-    gridFocused,
   } = context
 
-  // Keep config store up to date with props
+  // Keep stores up to date
+  $: tableIdStore.set(tableId)
+  $: schemaOverridesStore.set(schemaOverrides)
   $: 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
@@ -109,27 +116,25 @@
   id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  class:stripe={stripeRows}
-  on:mouseenter={() => gridFocused.set(true)}
-  on:mouseleave={() => gridFocused.set(false)}
+  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}
-    <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 class="controls">
+    <div class="controls-left">
+      <AddRowButton />
+      <AddColumnButton />
+      <slot name="controls" />
+      <SortButton />
+      <HideColumnsButton />
+      <ColumnWidthButton />
+      <RowHeightButton />
     </div>
-  {/if}
+    <div class="controls-right">
+      {#if showAvatars}
+        <UserAvatars />
+      {/if}
+    </div>
+  </div>
   {#if $loaded}
     <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
       <div class="grid-data-inner">
@@ -162,20 +167,7 @@
 </div>
 
 <style>
-  /* Core grid */
   .grid {
-    /* Variables */
-    --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;
@@ -183,7 +175,17 @@
     align-items: stretch;
     position: relative;
     overflow: hidden;
-    background: var(--grid-background);
+    background: var(--cell-background);
+
+    /* Variables */
+    --cell-background: var(--spectrum-global-color-gray-50);
+    --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --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;
   }
   .grid,
   .grid :global(*) {
@@ -199,7 +201,6 @@
     --cell-background-alt: var(--spectrum-global-color-gray-75);
   }
 
-  /* Data layers */
   .grid-data-outer,
   .grid-data-inner {
     flex: 1 1 auto;
@@ -233,7 +234,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--grid-background-alt);
+    background: var(--background);
     z-index: 2;
   }
   .controls-left,
@@ -269,15 +270,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--grid-background-alt);
+    background: var(--background);
     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,7 +12,6 @@
     config,
     hoveredRowId,
     dispatch,
-    isDragging,
   } = getContext("grid")
 
   let body
@@ -48,8 +47,8 @@
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
         style="width:{renderColumnsWidth}px"
-        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
-        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+        on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+        on:mouseleave={() => ($hoveredRowId = null)}
         on:click={() => dispatch("add-row-inline")}
       />
     {/if}

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

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

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

@@ -12,7 +12,6 @@
     bounds,
     hoveredRowId,
     hiddenColumnsWidth,
-    menu,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -31,11 +30,6 @@
   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.allowSchemaChanges}
+  {#if $config.allowAddColumns}
     <div
       class="add"
       style="left:{left}px"
@@ -42,7 +42,7 @@
 
 <style>
   .header {
-    background: var(--grid-background-alt);
+    background: var(--background);
     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(--grid-background-alt);
+    background: var(--spectrum-global-color-gray-100);
     z-index: 1;
   }
   .add:hover {

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

@@ -26,8 +26,6 @@
     maxScrollTop,
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
-    selectedRows,
-    config,
   } = getContext("grid")
 
   let visible = false
@@ -39,7 +37,6 @@
   $: 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) {
@@ -78,7 +75,7 @@
   }
 
   const startAdding = async () => {
-    if (visible || !firstColumn) {
+    if (visible) {
       return
     }
 
@@ -132,6 +129,9 @@
         e.preventDefault()
         clear()
       }
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      addRow()
     }
   }
 
@@ -141,18 +141,6 @@
   })
 </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
@@ -163,7 +151,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 expandable on:expand={addViaModal} rowHovered>
+      <GutterCell on:expand={addViaModal} rowHovered>
         <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
         {#if isAdding}
           <div in:fade={{ duration: 130 }} class="loading-overlay" />
@@ -239,26 +227,6 @@
 {/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,11 +23,10 @@
     scrollLeft,
     dispatch,
     contentLines,
-    isDragging,
   } = getContext("grid")
 
   $: rowCount = $rows.length
-  $: selectedRowCount = Object.values($selectedRows).length
+  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
   $: width = GutterWidth + ($stickyColumn?.width || 0)
 
   const selectAll = () => {
@@ -51,6 +50,7 @@
 >
   <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={$isDragging ? null : () => ($hoveredRowId = row._id)}
-          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+          on:mouseenter={() => ($hoveredRowId = row._id)}
+          on:mouseleave={() => ($hoveredRowId = null)}
         >
           <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
           {#if $stickyColumn}
@@ -96,13 +96,11 @@
       {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
         <div
           class="row new"
-          on:mouseenter={$isDragging
-            ? null
-            : () => ($hoveredRowId = BlankRowID)}
-          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+          on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+          on:mouseleave={() => ($hoveredRowId = null)}
           on:click={() => dispatch("add-row-inline")}
         >
-          <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
+          <GutterCell disableExpand rowHovered={$hoveredRowId === BlankRowID}>
             <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
           </GutterCell>
           {#if $stickyColumn}
@@ -161,7 +159,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--grid-background-alt);
+    background: var(--spectrum-global-color-gray-100);
   }
   .row {
     display: flex;

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

@@ -1,5 +1,6 @@
-export const Padding = 246
-export const MaxCellRenderHeight = 222
+export const Padding = 256
+export const MaxCellRenderHeight = 252
+export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -11,5 +12,3 @@ 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, API } = context
+  const { rows, tableId, users, focusedCellId, table } = context
   const socket = createWebsocket("/socket/grid")
 
   const connectToTable = tableId => {
@@ -11,10 +11,9 @@ export const createGridWebsocket = context => {
       return
     }
     // Identify which table we are editing
-    const appId = API.getAppID()
     socket.emit(
       GridSocketEvent.SelectTable,
-      { tableId, appId },
+      { tableId },
       ({ users: gridUsers }) => {
         users.set(gridUsers)
       }

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

@@ -15,7 +15,6 @@
     selectedRows,
     config,
     menu,
-    gridFocused,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -25,11 +24,6 @@
 
   // 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,9 +72,7 @@
       </MenuItem>
       <MenuItem
         icon="Maximize"
-        disabled={isNewRow ||
-          !$config.allowEditRows ||
-          !$config.allowExpandRows}
+        disabled={isNewRow || !$config.allowEditRows}
         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(--accent-color);
+    background: var(--spectrum-global-color-blue-400);
     margin-left: -2px;
   }
 </style>

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

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

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

@@ -15,18 +15,11 @@
     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:
@@ -46,13 +39,6 @@
   $: 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()
@@ -60,8 +46,6 @@
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
-    isDraggingV = true
-    closeMenu()
   }
   const moveVDragging = domDebounce(e => {
     const delta = e.clientY - initialMouse
@@ -75,7 +59,6 @@
   const stopVDragging = () => {
     document.removeEventListener("mousemove", moveVDragging)
     document.removeEventListener("mouseup", stopVDragging)
-    isDraggingV = false
   }
 
   // H scrollbar drag handlers
@@ -85,8 +68,6 @@
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
-    isDraggingH = true
-    closeMenu()
   }
   const moveHDragging = domDebounce(e => {
     const delta = e.clientX - initialMouse
@@ -100,7 +81,6 @@
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
-    isDraggingH = false
   }
 </script>
 
@@ -109,7 +89,6 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
-    class:dragging={isDraggingV}
   />
 {/if}
 {#if $showHScrollbar}
@@ -117,7 +96,6 @@
     class="h-scrollbar"
     style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
-    class:dragging={isDraggingH}
   />
 {/if}
 
@@ -125,12 +103,11 @@
   div {
     position: absolute;
     background: var(--spectrum-global-color-gray-500);
-    opacity: 0.5;
+    opacity: 0.7;
     border-radius: 4px;
     transition: opacity 130ms ease-out;
   }
-  div:hover,
-  div.dragging {
+  div:hover {
     opacity: 1;
   }
   .v-scrollbar {