@budibase/frontend-core 2.11.15-alpha.2 → 2.11.16

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.11.15-alpha.2",
+  "version": "2.11.16",
   "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.15-alpha.2",
-    "@budibase/shared-core": "2.11.15-alpha.2",
+    "@budibase/bbui": "2.11.16",
+    "@budibase/shared-core": "2.11.16",
     "dayjs": "^1.10.8",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "2dd5d4e24145308689bf0aa62052c8672593fe88"
+  "gitHead": "c0e8a437c5079010fe16810adde01723f97e6531"
 }

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

@@ -17,24 +17,13 @@
   const { config, dispatch, selectedRows } = getContext("grid")
   const svelteDispatch = createEventDispatcher()
 
-  const select = e => {
-    e.stopPropagation()
+  const select = () => {
     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
@@ -67,7 +56,7 @@
       {/if}
     {/if}
     {#if rowSelected && $config.canDeleteRows}
-      <div class="delete" on:click={bulkDelete}>
+      <div class="delete" on:click={() => dispatch("request-bulk-delete")}>
         <Icon
           name="Delete"
           size="S"
@@ -76,7 +65,12 @@
       </div>
     {:else}
       <div class="expand" class:visible={$config.canExpandRows && expandable}>
-        <Icon size="S" name="Maximize" hoverable on:click={expand} />
+        <Icon
+          size="S"
+          name="Maximize"
+          hoverable
+          on:click={() => svelteDispatch("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 attachHandlers>
+  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
     {#each $renderedRows as row, idx}
       <GridRow
         {row}

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

@@ -17,7 +17,6 @@
     columnHorizontalInversionIndex,
     contentLines,
     isDragging,
-    dispatch,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -31,7 +30,6 @@
   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,11 +17,7 @@
 
   export let scrollVertically = false
   export let scrollHorizontally = false
-  export let attachHandlers = false
-
-  // Used for tracking touch events
-  let initialTouchX
-  let initialTouchY
+  export let wheelInteractive = false
 
   $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
 
@@ -31,47 +27,17 @@
     return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
   }
 
-  // Handles a mouse wheel event and updates scroll state
+  // Handles a wheel even and updates the scroll offsets
   const handleWheel = e => {
     e.preventDefault()
-    updateScroll(e.deltaX, e.deltaY, e.clientY)
+    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
 
     // If a context menu was visible, hide it
     if ($menu.visible) {
       menu.actions.close()
     }
   }
-
-  // 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 debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
     const { top, left } = $scroll
 
     // Calculate new scroll top
@@ -89,19 +55,15 @@
     })
 
     // Hover row under cursor
-    if (clientY != null) {
-      const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
-      const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
-      hoveredRowId.set(hoveredRow?._id)
-    }
+    const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
+    const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
+    hoveredRowId.set(hoveredRow?._id)
   })
 </script>
 
 <div
   class="outer"
-  on:wheel={attachHandlers ? handleWheel : null}
-  on:touchstart={attachHandlers ? handleTouchStart : null}
-  on:touchmove={attachHandlers ? handleTouchMove : null}
+  on:wheel={wheelInteractive ? handleWheel : 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 attachHandlers>
+      <GridScrollWrapper scrollHorizontally wheelInteractive>
         <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 attachHandlers>
+    <GridScrollWrapper scrollVertically wheelInteractive>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -74,7 +74,6 @@
           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,27 +53,18 @@
     }
   }
 
-  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 = getLocation(e).y
+    initialMouse = e.clientY
     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 = getLocation(e).y - initialMouse
+    const delta = e.clientY - initialMouse
     const weight = delta / availHeight
     const newScrollTop = initialScroll + weight * $maxScrollTop
     scroll.update(state => ({
@@ -83,26 +74,22 @@
   })
   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 = getLocation(e).x
+    initialMouse = e.clientX
     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 = getLocation(e).x - initialMouse
+    const delta = e.clientX - initialMouse
     const weight = delta / availWidth
     const newScrollLeft = initialScroll + weight * $maxScrollLeft
     scroll.update(state => ({
@@ -112,9 +99,7 @@
   })
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
-    document.removeEventListener("touchmove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
-    document.removeEventListener("touchend", stopHDragging)
     isDraggingH = false
   }
 </script>
@@ -124,7 +109,6 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
-    on:touchstart={startVDragging}
     class:dragging={isDraggingV}
   />
 {/if}
@@ -133,7 +117,6 @@
     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,5 +1,4 @@
 import { writable, get } from "svelte/store"
-import { Helpers } from "@budibase/bbui"
 
 export const createStores = () => {
   const copiedCell = writable(null)
@@ -13,16 +12,7 @@ export const createActions = context => {
   const { copiedCell, focusedCellAPI } = context
 
   const copy = () => {
-    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)
+    copiedCell.set(get(focusedCellAPI)?.getValue())
   }
 
   const paste = () => {