@budibase/frontend-core 2.23.12 → 2.24.0

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

@@ -0,0 +1,71 @@
+<script>
+  import { Popover, clickOutside } from "@budibase/bbui"
+  import { createEventDispatcher, getContext } from "svelte"
+  import {
+    PopoverMinWidth,
+    PopoverMaxWidth,
+    PopoverMaxHeight,
+  } from "../lib/constants"
+
+  export let anchor
+  export let minWidth = PopoverMinWidth
+  export let maxWidth = PopoverMaxWidth
+  export let maxHeight = PopoverMaxHeight
+  export let align = "left"
+  export let open = true
+  export let resizable = false
+  export let wrap = true
+
+  const { gridID } = getContext("grid")
+  const dispatch = createEventDispatcher()
+
+  $: style = buildStyles(minWidth, maxWidth, maxHeight)
+
+  const buildStyles = (minWidth, maxWidth, maxHeight) => {
+    let style = ""
+    if (minWidth != null) {
+      style += `min-width: ${minWidth}px;`
+    }
+    if (maxWidth != null) {
+      style += `max-width: ${maxWidth}px;`
+    }
+    if (maxHeight != null) {
+      style += `max-height: ${maxHeight}px;`
+    }
+    return style
+  }
+</script>
+
+<Popover
+  {open}
+  {anchor}
+  {align}
+  {resizable}
+  {wrap}
+  portalTarget="#{gridID} .grid-popover-container"
+  offset={0}
+>
+  <div
+    class="grid-popover-contents"
+    {style}
+    use:clickOutside={() => dispatch("close")}
+    on:wheel={e => e.stopPropagation()}
+  >
+    <slot />
+  </div>
+</Popover>
+
+<style>
+  :global(.grid-popover-container .spectrum-Popover) {
+    background: var(--grid-background);
+    min-width: none;
+    max-width: none;
+    overflow: hidden;
+  }
+  .grid-popover-contents {
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

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

@@ -20,6 +20,7 @@
 
   const ignoredOriginSelectors = [
     ".spectrum-Modal",
+    ".date-time-popover",
     "#builder-side-panel-container",
     "[data-grid-ignore]",
   ]

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

@@ -1,7 +1,8 @@
 <script>
-  import { clickOutside, Menu, MenuItem, Helpers } from "@budibase/bbui"
+  import { Menu, MenuItem, Helpers } from "@budibase/bbui"
   import { getContext } from "svelte"
   import { NewRowID } from "../lib/constants"
+  import GridPopover from "./GridPopover.svelte"
 
   const {
     focusedRow,
@@ -20,6 +21,8 @@
     isDatasourcePlus,
   } = getContext("grid")
 
+  let anchor
+
   $: style = makeStyle($menu)
   $: isNewRow = $focusedRowId === NewRowID
 
@@ -48,75 +51,74 @@
   }
 </script>
 
+<div bind:this={anchor} {style} class="menu-anchor" />
+
 {#if $menu.visible}
-  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
-    <Menu>
-      <MenuItem
-        icon="Copy"
-        on:click={clipboard.actions.copy}
-        on:click={menu.actions.close}
-      >
-        Copy
-      </MenuItem>
-      <MenuItem
-        icon="Paste"
-        disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
-        on:click={clipboard.actions.paste}
-        on:click={menu.actions.close}
-      >
-        Paste
-      </MenuItem>
-      <MenuItem
-        icon="Maximize"
-        disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
-        on:click={() => dispatch("edit-row", $focusedRow)}
-        on:click={menu.actions.close}
-      >
-        Edit row in modal
-      </MenuItem>
-      <MenuItem
-        icon="Copy"
-        disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
-        on:click={() => copyToClipboard($focusedRow?._id)}
-        on:click={menu.actions.close}
-      >
-        Copy row _id
-      </MenuItem>
-      <MenuItem
-        icon="Copy"
-        disabled={isNewRow || !$focusedRow?._rev}
-        on:click={() => copyToClipboard($focusedRow?._rev)}
-        on:click={menu.actions.close}
-      >
-        Copy row _rev
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        disabled={isNewRow || !$config.canAddRows}
-        on:click={duplicate}
-      >
-        Duplicate row
-      </MenuItem>
-      <MenuItem
-        icon="Delete"
-        disabled={isNewRow || !$config.canDeleteRows}
-        on:click={deleteRow}
-      >
-        Delete row
-      </MenuItem>
-    </Menu>
-  </div>
+  {#key style}
+    <GridPopover {anchor} on:close={menu.actions.close} maxHeight={null}>
+      <Menu>
+        <MenuItem
+          icon="Copy"
+          on:click={clipboard.actions.copy}
+          on:click={menu.actions.close}
+        >
+          Copy
+        </MenuItem>
+        <MenuItem
+          icon="Paste"
+          disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
+          on:click={clipboard.actions.paste}
+          on:click={menu.actions.close}
+        >
+          Paste
+        </MenuItem>
+        <MenuItem
+          icon="Maximize"
+          disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
+          on:click={() => dispatch("edit-row", $focusedRow)}
+          on:click={menu.actions.close}
+        >
+          Edit row in modal
+        </MenuItem>
+        <MenuItem
+          icon="Copy"
+          disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
+          on:click={() => copyToClipboard($focusedRow?._id)}
+          on:click={menu.actions.close}
+        >
+          Copy row _id
+        </MenuItem>
+        <MenuItem
+          icon="Copy"
+          disabled={isNewRow || !$focusedRow?._rev}
+          on:click={() => copyToClipboard($focusedRow?._rev)}
+          on:click={menu.actions.close}
+        >
+          Copy row _rev
+        </MenuItem>
+        <MenuItem
+          icon="Duplicate"
+          disabled={isNewRow || !$config.canAddRows}
+          on:click={duplicate}
+        >
+          Duplicate row
+        </MenuItem>
+        <MenuItem
+          icon="Delete"
+          disabled={isNewRow || !$config.canDeleteRows}
+          on:click={deleteRow}
+        >
+          Delete row
+        </MenuItem>
+      </Menu>
+    </GridPopover>
+  {/key}
 {/if}
 
 <style>
-  .menu {
+  .menu-anchor {
+    opacity: 0;
+    pointer-events: none;
     position: absolute;
-    background: var(--cell-background);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    width: 180px;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
   }
 </style>

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

@@ -0,0 +1,9 @@
+<div class="grid-popover-container" />
+
+<style>
+  .grid-popover-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

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

@@ -21,6 +21,7 @@
       class="resize-slider"
       class:visible={activeColumn === $stickyColumn.name}
       on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
+      on:touchstart={e => resize.actions.startResizing($stickyColumn, e)}
       on:dblclick={() => resize.actions.resetSize($stickyColumn)}
       style="left:{GutterWidth + $stickyColumn.width}px;"
     >
@@ -32,6 +33,7 @@
       class="resize-slider"
       class:visible={activeColumn === column.name}
       on:mousedown={e => resize.actions.startResizing(column, e)}
+      on:touchstart={e => resize.actions.startResizing(column, e)}
       on:dblclick={() => resize.actions.resetSize(column)}
       style={getStyle(column, offset, $scrollLeft)}
     >

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

@@ -2,6 +2,7 @@
   import { getContext } from "svelte"
   import { domDebounce } from "../../../utils/utils"
   import { DefaultRowHeight, ScrollBarSize } from "../lib/constants"
+  import { parseEventLocation } from "../lib/utils"
 
   const {
     scroll,
@@ -17,6 +18,7 @@
     height,
     isDragging,
     menu,
+    focusedCellAPI,
   } = getContext("grid")
 
   // State for dragging bars
@@ -47,33 +49,27 @@
   $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
 
   // Helper to close the context menu if it's open
-  const closeMenu = () => {
+  const closePopovers = () => {
     if ($menu.visible) {
       menu.actions.close()
     }
-  }
-
-  const getLocation = e => {
-    return {
-      y: e.touches?.[0]?.clientY ?? e.clientY,
-      x: e.touches?.[0]?.clientX ?? e.clientX,
-    }
+    $focusedCellAPI?.blur()
   }
 
   // V scrollbar drag handlers
   const startVDragging = e => {
     e.preventDefault()
-    initialMouse = getLocation(e).y
+    initialMouse = parseEventLocation(e).y
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
     document.addEventListener("touchmove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
     document.addEventListener("touchend", stopVDragging)
     isDraggingV = true
-    closeMenu()
+    closePopovers()
   }
   const moveVDragging = domDebounce(e => {
-    const delta = getLocation(e).y - initialMouse
+    const delta = parseEventLocation(e).y - initialMouse
     const weight = delta / availHeight
     const newScrollTop = initialScroll + weight * $maxScrollTop
     scroll.update(state => ({
@@ -92,17 +88,17 @@
   // H scrollbar drag handlers
   const startHDragging = e => {
     e.preventDefault()
-    initialMouse = getLocation(e).x
+    initialMouse = parseEventLocation(e).x
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
     document.addEventListener("touchmove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
     document.addEventListener("touchend", stopHDragging)
     isDraggingH = true
-    closeMenu()
+    closePopovers()
   }
   const moveHDragging = domDebounce(e => {
-    const delta = getLocation(e).x - initialMouse
+    const delta = parseEventLocation(e).x - initialMouse
     const weight = delta / availWidth
     const newScrollLeft = initialScroll + weight * $maxScrollLeft
     scroll.update(state => ({

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

@@ -48,22 +48,28 @@ export const createStores = () => {
 export const deriveStores = context => {
   const { columns, stickyColumn } = context
 
-  // Derive if we have any normal columns
-  const hasNonAutoColumn = derived(
+  // Quick access to all columns
+  const allColumns = derived(
     [columns, stickyColumn],
     ([$columns, $stickyColumn]) => {
       let allCols = $columns || []
       if ($stickyColumn) {
         allCols = [...allCols, $stickyColumn]
       }
-      const normalCols = allCols.filter(column => {
-        return !column.schema?.autocolumn
-      })
-      return normalCols.length > 0
+      return allCols
     }
   )
 
+  // Derive if we have any normal columns
+  const hasNonAutoColumn = derived(allColumns, $allColumns => {
+    const normalCols = $allColumns.filter(column => {
+      return !column.schema?.autocolumn
+    })
+    return normalCols.length > 0
+  })
+
   return {
+    allColumns,
     hasNonAutoColumn,
   }
 }
@@ -142,24 +148,26 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { definition, columns, stickyColumn, enrichedSchema } = context
+  const {
+    definition,
+    columns,
+    stickyColumn,
+    allColumns,
+    enrichedSchema,
+    compact,
+  } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
-  enrichedSchema.subscribe($enrichedSchema => {
+  const processColumns = $enrichedSchema => {
     if (!$enrichedSchema) {
       columns.set([])
       stickyColumn.set(null)
       return
     }
     const $definition = get(definition)
-    const $columns = get(columns)
+    const $allColumns = get(allColumns)
     const $stickyColumn = get(stickyColumn)
-
-    // Generate array of all columns to easily find pre-existing columns
-    let allColumns = $columns || []
-    if ($stickyColumn) {
-      allColumns.push($stickyColumn)
-    }
+    const $compact = get(compact)
 
     // Find primary display
     let primaryDisplay
@@ -171,7 +179,7 @@ export const initialise = context => {
     // Get field list
     let fields = []
     Object.keys($enrichedSchema).forEach(field => {
-      if (field !== primaryDisplay) {
+      if ($compact || field !== primaryDisplay) {
         fields.push(field)
       }
     })
@@ -181,7 +189,7 @@ export const initialise = context => {
       fields
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
-          const oldColumn = allColumns?.find(x => x.name === field)
+          const oldColumn = $allColumns?.find(x => x.name === field)
           return {
             name: field,
             label: fieldSchema.displayName || field,
@@ -189,9 +197,18 @@ export const initialise = context => {
             width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
             visible: fieldSchema.visible ?? true,
             order: fieldSchema.order ?? oldColumn?.order,
+            primaryDisplay: field === primaryDisplay,
           }
         })
         .sort((a, b) => {
+          // If we don't have a pinned column then primary display will be in
+          // the normal columns list, and should be first
+          if (a.name === primaryDisplay) {
+            return -1
+          } else if (b.name === primaryDisplay) {
+            return 1
+          }
+
           // Sort by order first
           const orderA = a.order
           const orderB = b.order
@@ -214,12 +231,12 @@ export const initialise = context => {
     )
 
     // Update sticky column
-    if (!primaryDisplay) {
+    if ($compact || !primaryDisplay) {
       stickyColumn.set(null)
       return
     }
     const stickySchema = $enrichedSchema[primaryDisplay]
-    const oldStickyColumn = allColumns?.find(x => x.name === primaryDisplay)
+    const oldStickyColumn = $allColumns?.find(x => x.name === primaryDisplay)
     stickyColumn.set({
       name: primaryDisplay,
       label: stickySchema.displayName || primaryDisplay,
@@ -228,6 +245,13 @@ export const initialise = context => {
       visible: true,
       order: 0,
       left: GutterWidth,
+      primaryDisplay: true,
     })
-  })
+  }
+
+  // Process columns when schema changes
+  enrichedSchema.subscribe(processColumns)
+
+  // Process columns when compact flag changes
+  compact.subscribe(() => processColumns(get(enrichedSchema)))
 }

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

@@ -13,13 +13,13 @@ export const createStores = () => {
 }
 
 export const createActions = context => {
-  const { menu, focusedCellId, rand } = context
+  const { menu, focusedCellId, gridID } = context
 
   const open = (cellId, e) => {
     e.preventDefault()
 
     // Get DOM node for grid data wrapper to compute relative position to
-    const gridNode = document.getElementById(`grid-${rand}`)
+    const gridNode = document.getElementById(gridID)
     const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
     if (!dataNode) {
       return

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

@@ -1,4 +1,5 @@
 import { get, writable, derived } from "svelte/store"
+import { parseEventLocation } from "../lib/utils"
 
 const reorderInitialState = {
   sourceColumn: null,
@@ -31,8 +32,8 @@ export const createActions = context => {
     scroll,
     bounds,
     stickyColumn,
-    ui,
     maxScrollLeft,
+    width,
   } = context
 
   let autoScrollInterval
@@ -43,7 +44,6 @@ export const createActions = context => {
     const $visibleColumns = get(visibleColumns)
     const $bounds = get(bounds)
     const $stickyColumn = get(stickyColumn)
-    ui.actions.blur()
 
     // Generate new breakpoints for the current columns
     let breakpoints = $visibleColumns.map(col => ({
@@ -55,6 +55,11 @@ export const createActions = context => {
         x: 0,
         column: $stickyColumn.name,
       })
+    } else if (!$visibleColumns[0].primaryDisplay) {
+      breakpoints.unshift({
+        x: 0,
+        column: null,
+      })
     }
 
     // Update state
@@ -69,6 +74,9 @@ export const createActions = context => {
     // Add listeners to handle mouse movement
     document.addEventListener("mousemove", onReorderMouseMove)
     document.addEventListener("mouseup", stopReordering)
+    document.addEventListener("touchmove", onReorderMouseMove)
+    document.addEventListener("touchend", stopReordering)
+    document.addEventListener("touchcancel", stopReordering)
 
     // Trigger a move event immediately so ensure a candidate column is chosen
     onReorderMouseMove(e)
@@ -77,7 +85,7 @@ export const createActions = context => {
   // Callback when moving the mouse when reordering columns
   const onReorderMouseMove = e => {
     // Immediately handle the current position
-    const x = e.clientX
+    const { x } = parseEventLocation(e)
     reorder.update(state => ({
       ...state,
       latestX: x,
@@ -86,8 +94,8 @@ export const createActions = context => {
 
     // Check if we need to start auto-scrolling
     const $reorder = get(reorder)
-    const proximityCutoff = 140
-    const speedFactor = 8
+    const proximityCutoff = Math.min(140, get(width) / 6)
+    const speedFactor = 16
     const rightProximity = Math.max(0, $reorder.gridLeft + $reorder.width - x)
     const leftProximity = Math.max(0, x - $reorder.gridLeft)
     if (rightProximity < proximityCutoff) {
@@ -158,19 +166,22 @@ export const createActions = context => {
     // Ensure auto-scrolling is stopped
     stopAutoScroll()
 
-    // Swap position of columns
-    let { sourceColumn, targetColumn } = get(reorder)
-    moveColumn(sourceColumn, targetColumn)
-
-    // Reset state
-    reorder.set(reorderInitialState)
-
     // Remove event handlers
     document.removeEventListener("mousemove", onReorderMouseMove)
     document.removeEventListener("mouseup", stopReordering)
+    document.removeEventListener("touchmove", onReorderMouseMove)
+    document.removeEventListener("touchend", stopReordering)
+    document.removeEventListener("touchcancel", stopReordering)
 
-    // Save column changes
-    await columns.actions.saveChanges()
+    // Ensure there's actually a change
+    let { sourceColumn, targetColumn } = get(reorder)
+    if (sourceColumn !== targetColumn) {
+      moveColumn(sourceColumn, targetColumn)
+      await columns.actions.saveChanges()
+    }
+
+    // Reset state
+    reorder.set(reorderInitialState)
   }
 
   // Moves a column after another columns.
@@ -185,8 +196,7 @@ export const createActions = context => {
       if (--targetIdx < sourceIdx) {
         targetIdx++
       }
-      state.splice(targetIdx, 0, removed[0])
-      return state.slice()
+      return state.toSpliced(targetIdx, 0, removed[0])
     })
   }
 

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

@@ -1,5 +1,6 @@
 import { writable, get, derived } from "svelte/store"
 import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
+import { parseEventLocation } from "../lib/utils"
 
 const initialState = {
   initialMouseX: null,
@@ -24,8 +25,11 @@ export const createActions = context => {
 
   // Starts resizing a certain column
   const startResizing = (column, e) => {
+    const { x } = parseEventLocation(e)
+
     // Prevent propagation to stop reordering triggering
     e.stopPropagation()
+    e.preventDefault()
     ui.actions.blur()
 
     // Find and cache index
@@ -39,7 +43,7 @@ export const createActions = context => {
       width: column.width,
       left: column.left,
       initialWidth: column.width,
-      initialMouseX: e.clientX,
+      initialMouseX: x,
       column: column.name,
       columnIdx,
     })
@@ -47,12 +51,16 @@ export const createActions = context => {
     // Add mouse event listeners to handle resizing
     document.addEventListener("mousemove", onResizeMouseMove)
     document.addEventListener("mouseup", stopResizing)
+    document.addEventListener("touchmove", onResizeMouseMove)
+    document.addEventListener("touchend", stopResizing)
+    document.addEventListener("touchcancel", stopResizing)
   }
 
   // Handler for moving the mouse to resize columns
   const onResizeMouseMove = e => {
     const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
-    const dx = e.clientX - initialMouseX
+    const { x } = parseEventLocation(e)
+    const dx = x - initialMouseX
     const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
 
     // Ignore small changes
@@ -87,6 +95,9 @@ export const createActions = context => {
     resize.set(initialState)
     document.removeEventListener("mousemove", onResizeMouseMove)
     document.removeEventListener("mouseup", stopResizing)
+    document.removeEventListener("touchmove", onResizeMouseMove)
+    document.removeEventListener("touchend", stopResizing)
+    document.removeEventListener("touchcancel", stopResizing)
 
     // Persist width if it changed
     if ($resize.width !== $resize.initialWidth) {