@budibase/frontend-core 2.11.33 → 2.11.35

package/package.json

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

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

@@ -17,13 +17,24 @@
   const { config, dispatch, selectedRows } = getContext("grid")
   const svelteDispatch = createEventDispatcher()
 
-  const select = () => {
+  const select = e => {
+    e.stopPropagation()
     svelteDispatch("select")
     const id = row?._id
     if (id) {
       selectedRows.actions.toggleRow(id)
     }
   }
+
+  const bulkDelete = e => {
+    e.stopPropagation()
+    dispatch("request-bulk-delete")
+  }
+
+  const expand = e => {
+    e.stopPropagation()
+    svelteDispatch("expand")
+  }
 </script>
 
 <GridCell
@@ -56,7 +67,7 @@
       {/if}
     {/if}
     {#if rowSelected && $config.canDeleteRows}
-      <div class="delete" on:click={() => dispatch("request-bulk-delete")}>
+      <div class="delete" on:click={bulkDelete}>
         <Icon
           name="Delete"
           size="S"
@@ -65,12 +76,7 @@
       </div>
     {:else}
       <div class="expand" class:visible={$config.canExpandRows && expandable}>
-        <Icon
-          size="S"
-          name="Maximize"
-          hoverable
-          on:click={() => svelteDispatch("expand")}
-        />
+        <Icon size="S" name="Maximize" hoverable on:click={expand} />
       </div>
     {/if}
   </div>

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

@@ -35,7 +35,7 @@
 </script>
 
 <div bind:this={body} class="grid-body">
-  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
+  <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
       <GridRow
         {row}

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

@@ -17,6 +17,7 @@
     columnHorizontalInversionIndex,
     contentLines,
     isDragging,
+    dispatch,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -30,6 +31,7 @@
   on:focus
   on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
   on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+  on:click={() => dispatch("rowclick", row)}
 >
   {#each $renderedColumns as column, columnIdx (column.name)}
     {@const cellId = `${row._id}-${column.name}`}

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

@@ -17,7 +17,11 @@
 
   export let scrollVertically = false
   export let scrollHorizontally = false
-  export let wheelInteractive = false
+  export let attachHandlers = false
+
+  // Used for tracking touch events
+  let initialTouchX
+  let initialTouchY
 
   $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
 
@@ -27,17 +31,47 @@
     return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
   }
 
-  // Handles a wheel even and updates the scroll offsets
+  // Handles a mouse wheel event and updates scroll state
   const handleWheel = e => {
     e.preventDefault()
-    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+    updateScroll(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) => {
+
+  // Handles touch start events
+  const handleTouchStart = e => {
+    if (!e.touches?.[0]) return
+    initialTouchX = e.touches[0].clientX
+    initialTouchY = e.touches[0].clientY
+  }
+
+  // Handles touch move events and updates scroll state
+  const handleTouchMove = e => {
+    if (!e.touches?.[0]) return
+    e.preventDefault()
+
+    // Compute delta from previous event, and update scroll
+    const deltaX = initialTouchX - e.touches[0].clientX
+    const deltaY = initialTouchY - e.touches[0].clientY
+    updateScroll(deltaX, deltaY)
+
+    // Store position to reference in next event
+    initialTouchX = e.touches[0].clientX
+    initialTouchY = e.touches[0].clientY
+
+    // If a context menu was visible, hide it
+    if ($menu.visible) {
+      menu.actions.close()
+    }
+  }
+
+  // Updates the scroll offset by a certain delta, and ensure scrolling
+  // stays within sensible bounds. Debounced for performance.
+  const updateScroll = domDebounce((deltaX, deltaY, clientY) => {
     const { top, left } = $scroll
 
     // Calculate new scroll top
@@ -55,15 +89,19 @@
     })
 
     // Hover row under cursor
-    const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
-    const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
-    hoveredRowId.set(hoveredRow?._id)
+    if (clientY != null) {
+      const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
+      const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
+      hoveredRowId.set(hoveredRow?._id)
+    }
   })
 </script>
 
 <div
   class="outer"
-  on:wheel={wheelInteractive ? handleWheel : null}
+  on:wheel={attachHandlers ? handleWheel : null}
+  on:touchstart={attachHandlers ? handleTouchStart : null}
+  on:touchmove={attachHandlers ? handleTouchMove : null}
   on:click|self={() => ($focusedCellId = null)}
 >
   <div {style} class="inner">

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

@@ -205,7 +205,7 @@
       {/if}
     </div>
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
-      <GridScrollWrapper scrollHorizontally wheelInteractive>
+      <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
           {#each $renderedColumns as column, columnIdx}
             {@const cellId = `new-${column.name}`}

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

@@ -64,7 +64,7 @@
   </div>
 
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically wheelInteractive>
+    <GridScrollWrapper scrollVertically attachHandlers>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -74,6 +74,7 @@
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+          on:click={() => dispatch("rowclick", row)}
         >
           <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
           {#if $stickyColumn}

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

@@ -53,18 +53,27 @@
     }
   }
 
+  const getLocation = e => {
+    return {
+      y: e.touches?.[0]?.clientY ?? e.clientY,
+      x: e.touches?.[0]?.clientX ?? e.clientX,
+    }
+  }
+
   // V scrollbar drag handlers
   const startVDragging = e => {
     e.preventDefault()
-    initialMouse = e.clientY
+    initialMouse = getLocation(e).y
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
+    document.addEventListener("touchmove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
+    document.addEventListener("touchend", stopVDragging)
     isDraggingV = true
     closeMenu()
   }
   const moveVDragging = domDebounce(e => {
-    const delta = e.clientY - initialMouse
+    const delta = getLocation(e).y - initialMouse
     const weight = delta / availHeight
     const newScrollTop = initialScroll + weight * $maxScrollTop
     scroll.update(state => ({
@@ -74,22 +83,26 @@
   })
   const stopVDragging = () => {
     document.removeEventListener("mousemove", moveVDragging)
+    document.removeEventListener("touchmove", moveVDragging)
     document.removeEventListener("mouseup", stopVDragging)
+    document.removeEventListener("touchend", stopVDragging)
     isDraggingV = false
   }
 
   // H scrollbar drag handlers
   const startHDragging = e => {
     e.preventDefault()
-    initialMouse = e.clientX
+    initialMouse = getLocation(e).x
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
+    document.addEventListener("touchmove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
+    document.addEventListener("touchend", stopHDragging)
     isDraggingH = true
     closeMenu()
   }
   const moveHDragging = domDebounce(e => {
-    const delta = e.clientX - initialMouse
+    const delta = getLocation(e).x - initialMouse
     const weight = delta / availWidth
     const newScrollLeft = initialScroll + weight * $maxScrollLeft
     scroll.update(state => ({
@@ -99,7 +112,9 @@
   })
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
+    document.removeEventListener("touchmove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
+    document.removeEventListener("touchend", stopHDragging)
     isDraggingH = false
   }
 </script>
@@ -109,6 +124,7 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
+    on:touchstart={startVDragging}
     class:dragging={isDraggingV}
   />
 {/if}
@@ -117,6 +133,7 @@
     class="h-scrollbar"
     style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
+    on:touchstart={startHDragging}
     class:dragging={isDraggingH}
   />
 {/if}

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

@@ -1,4 +1,5 @@
 import { writable, get } from "svelte/store"
+import { Helpers } from "@budibase/bbui"
 
 export const createStores = () => {
   const copiedCell = writable(null)
@@ -12,7 +13,16 @@ export const createActions = context => {
   const { copiedCell, focusedCellAPI } = context
 
   const copy = () => {
-    copiedCell.set(get(focusedCellAPI)?.getValue())
+    const value = get(focusedCellAPI)?.getValue()
+    copiedCell.set(value)
+
+    // Also copy a stringified version to the clipboard
+    let stringified = ""
+    if (value != null && value !== "") {
+      // Only conditionally stringify to avoid redundant quotes around text
+      stringified = typeof value === "object" ? JSON.stringify(value) : value
+    }
+    Helpers.copyToClipboard(stringified)
   }
 
   const paste = () => {