@budibase/frontend-core 2.29.21 → 2.29.23

package/src/components/grid/controls/ClipboardHandler.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { Modal, ModalContent, ProgressBar } from "@budibase/bbui"
+  import { getContext, onMount } from "svelte"
+  import { sleep } from "../../../utils/utils"
+
+  const { clipboard, subscribe, copyAllowed, pasteAllowed, selectedCellCount } =
+    getContext("grid")
+  const duration = 260
+
+  let modal
+  let progressPercentage = 0
+  let processing = false
+
+  const handleCopyRequest = () => {
+    if (!$copyAllowed) {
+      return
+    }
+    clipboard.actions.copy()
+  }
+
+  const handlePasteRequest = async () => {
+    progressPercentage = 0
+    if (!$pasteAllowed) {
+      return
+    }
+    // Prompt if paste will update multiple cells
+    const multiCellPaste = $selectedCellCount > 1
+    const prompt = $clipboard.multiCellCopy || multiCellPaste
+    if (prompt) {
+      modal?.show()
+    } else {
+      clipboard.actions.paste()
+    }
+  }
+
+  const performBulkPaste = async () => {
+    processing = true
+    await clipboard.actions.paste(progress => {
+      progressPercentage = progress * 100
+    })
+    await sleep(duration)
+    processing = false
+  }
+
+  onMount(() => subscribe("copy", handleCopyRequest))
+  onMount(() => subscribe("paste", handlePasteRequest))
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Confirm paste"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={performBulkPaste}
+    size="M"
+  >
+    Are you sure you want to paste? This will update multiple values.
+    {#if processing}
+      <ProgressBar
+        size="L"
+        value={progressPercentage}
+        {duration}
+        width="100%"
+      />
+    {/if}
+  </ModalContent>
+</Modal>

package/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -7,14 +7,12 @@
 
   export let allowViewReadonlyColumns = false
 
-  const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
+  const { columns, datasource, dispatch } = getContext("grid")
 
   let open = false
   let anchor
 
-  $: allColumns = $stickyColumn ? [$stickyColumn, ...$columns] : $columns
-
-  $: restrictedColumns = allColumns.filter(col => !col.visible || col.readonly)
+  $: restrictedColumns = $columns.filter(col => !col.visible || col.readonly)
   $: anyRestricted = restrictedColumns.length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
 
@@ -43,12 +41,9 @@
     HIDDEN: "hidden",
   }
 
-  $: displayColumns = allColumns.map(c => {
+  $: displayColumns = $columns.map(c => {
     const isRequired = helpers.schema.isRequired(c.schema.constraints)
-    const isDisplayColumn = $stickyColumn === c
-
     const requiredTooltip = isRequired && "Required columns must be writable"
-
     const editEnabled =
       !isRequired ||
       columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
@@ -74,9 +69,9 @@
     options.push({
       icon: "VisibilityOff",
       value: PERMISSION_OPTIONS.HIDDEN,
-      disabled: isDisplayColumn || isRequired,
+      disabled: c.primaryDisplay || isRequired,
       tooltip:
-        (isDisplayColumn && "Display column cannot be hidden") ||
+        (c.primaryDisplay && "Display column cannot be hidden") ||
         requiredTooltip ||
         "Hidden",
     })

package/src/components/grid/controls/SizeButton.svelte

@@ -8,14 +8,8 @@
     SmallRowHeight,
   } from "../lib/constants"
 
-  const {
-    stickyColumn,
-    columns,
-    rowHeight,
-    definition,
-    fixedRowHeight,
-    datasource,
-  } = getContext("grid")
+  const { columns, rowHeight, definition, fixedRowHeight, datasource } =
+    getContext("grid")
 
   // Some constants for column width options
   const smallColSize = 120
@@ -42,10 +36,9 @@
   let anchor
 
   // Column width sizes
-  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
-  $: allSmall = allCols.every(col => col.width === smallColSize)
-  $: allMedium = allCols.every(col => col.width === mediumColSize)
-  $: allLarge = allCols.every(col => col.width === largeColSize)
+  $: allSmall = $columns.every(col => col.width === smallColSize)
+  $: allMedium = $columns.every(col => col.width === mediumColSize)
+  $: allLarge = $columns.every(col => col.width === largeColSize)
   $: custom = !allSmall && !allMedium && !allLarge
   $: columnSizeOptions = [
     {
@@ -80,7 +73,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open}
-    disabled={!allCols.length}
+    disabled={!$columns.length}
   >
     Size
   </ActionButton>

package/src/components/grid/controls/SortButton.svelte

@@ -3,34 +3,20 @@
   import { ActionButton, Popover, Select } from "@budibase/bbui"
   import { canBeSortColumn } from "@budibase/shared-core"
 
-  const { sort, columns, stickyColumn } = getContext("grid")
+  const { sort, columns } = getContext("grid")
 
   let open = false
   let anchor
 
-  $: columnOptions = getColumnOptions($stickyColumn, $columns)
+  $: columnOptions = $columns
+    .map(col => ({
+      label: col.label || col.name,
+      value: col.name,
+      type: col.schema?.type,
+    }))
+    .filter(col => canBeSortColumn(col.type))
   $: orderOptions = getOrderOptions($sort.column, columnOptions)
 
-  const getColumnOptions = (stickyColumn, columns) => {
-    let options = []
-    if (stickyColumn) {
-      options.push({
-        label: stickyColumn.label || stickyColumn.name,
-        value: stickyColumn.name,
-        type: stickyColumn.schema?.type,
-      })
-    }
-    options = [
-      ...options,
-      ...columns.map(col => ({
-        label: col.label || col.name,
-        value: col.name,
-        type: col.schema?.type,
-      })),
-    ]
-    return options.filter(col => canBeSortColumn(col.type))
-  }
-
   const getOrderOptions = (column, columnOptions) => {
     const type = columnOptions.find(col => col.value === column)?.type
     return [

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

@@ -13,8 +13,8 @@
     rows,
     focusedRow,
     selectedRows,
-    visibleColumns,
-    scroll,
+    scrollableColumns,
+    scrollLeft,
     isDragging,
     buttonColumnWidth,
     showVScrollbar,
@@ -24,12 +24,13 @@
   let container
 
   $: buttons = $props.buttons?.slice(0, 3) || []
-  $: columnsWidth = $visibleColumns.reduce(
+  $: columnsWidth = $scrollableColumns.reduce(
     (total, col) => (total += col.width),
     0
   )
-  $: end = columnsWidth - 1 - $scroll.left
-  $: left = Math.min($width - $buttonColumnWidth, end)
+  $: columnEnd = columnsWidth - $scrollLeft - 1
+  $: gridEnd = $width - $buttonColumnWidth - 1
+  $: left = Math.min(columnEnd, gridEnd)
 
   const handleClick = async (button, row) => {
     await button.onClick?.(rows.actions.cleanRow(row))
@@ -40,7 +41,7 @@
   onMount(() => {
     const observer = new ResizeObserver(entries => {
       const width = entries?.[0]?.contentRect?.width ?? 0
-      buttonColumnWidth.set(width)
+      buttonColumnWidth.set(Math.floor(width) - 1)
     })
     observer.observe(container)
   })
@@ -51,6 +52,7 @@
   class="button-column"
   style="left:{left}px"
   class:hidden={$buttonColumnWidth === 0}
+  class:right-border={left !== gridEnd}
 >
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
     <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
@@ -68,6 +70,7 @@
             rowIdx={row.__idx}
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
+            metadata={row.__metadata?.row}
           >
             <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
@@ -150,4 +153,7 @@
   .button-column :global(.cell) {
     border-left: var(--cell-border);
   }
+  .button-column:not(.right-border) :global(.cell) {
+    border-right-color: transparent;
+  }
 </style>

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

@@ -7,6 +7,8 @@
   import { createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import BulkDeleteHandler from "../controls/BulkDeleteHandler.svelte"
+  import BulkDuplicationHandler from "../controls/BulkDuplicationHandler.svelte"
+  import ClipboardHandler from "../controls/ClipboardHandler.svelte"
   import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
@@ -35,14 +37,12 @@
   export let API = null
   export let datasource = null
   export let schemaOverrides = null
-  export let columnWhitelist = null
   export let canAddRows = true
   export let canExpandRows = true
   export let canEditRows = true
   export let canDeleteRows = true
   export let canEditColumns = true
   export let canSaveSchema = true
-  export let canSelectRows = false
   export let stripeRows = false
   export let quiet = false
   export let collaboration = true
@@ -58,6 +58,7 @@
   export let darkMode
   export let isCloud = null
   export let allowViewReadonlyColumns = false
+  export let rowConditions = null
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -92,14 +93,12 @@
   $: props.set({
     datasource,
     schemaOverrides,
-    columnWhitelist,
     canAddRows,
     canExpandRows,
     canEditRows,
     canDeleteRows,
     canEditColumns,
     canSaveSchema,
-    canSelectRows,
     stripeRows,
     quiet,
     collaboration,
@@ -114,6 +113,8 @@
     buttons,
     darkMode,
     isCloud,
+    allowViewReadonlyColumns,
+    rowConditions,
   })
 
   // Derive min height and make available in context
@@ -209,9 +210,11 @@
       <ProgressCircle />
     </div>
   {/if}
-  {#if $config.canDeleteRows}
-    <BulkDeleteHandler />
+  {#if $config.canAddRows}
+    <BulkDuplicationHandler />
   {/if}
+  <BulkDeleteHandler />
+  <ClipboardHandler />
   <KeyboardManager />
 </div>
 
@@ -229,6 +232,7 @@
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
+    --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -284,7 +288,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: var(--cell-border);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
     background: var(--grid-background-alt);

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

@@ -9,7 +9,7 @@
   const {
     bounds,
     renderedRows,
-    visibleColumns,
+    scrollableColumns,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -19,7 +19,7 @@
 
   let body
 
-  $: columnsWidth = $visibleColumns.reduce(
+  $: columnsWidth = $scrollableColumns.reduce(
     (total, col) => (total += col.width),
     0
   )

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

@@ -10,19 +10,23 @@
     focusedCellId,
     reorder,
     selectedRows,
-    visibleColumns,
+    scrollableColumns,
     hoveredRowId,
-    selectedCellMap,
     focusedRow,
     contentLines,
     isDragging,
     dispatch,
     rows,
     columnRenderMap,
+    userCellMap,
+    isSelectingCells,
+    selectedCellMap,
+    selectedCellCount,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
-  $: rowHovered = $hoveredRowId === row._id
+  $: rowHovered =
+    $hoveredRowId === row._id && (!$selectedCellCount || !$isSelectingCells)
   $: rowFocused = $focusedRow?._id === row._id
   $: reorderSource = $reorder.sourceColumn
 </script>
@@ -36,22 +40,24 @@
   on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
   on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
-  {#each $visibleColumns as column}
+  {#each $scrollableColumns as column}
     {@const cellId = getCellID(row._id, column.name)}
     <DataCell
       {cellId}
       {column}
       {row}
       {rowFocused}
+      {rowSelected}
+      cellSelected={$selectedCellMap[cellId]}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
-      selected={rowSelected}
       rowIdx={row.__idx}
       topRow={top}
       focused={$focusedCellId === cellId}
-      selectedUser={$selectedCellMap[cellId]}
+      selectedUser={$userCellMap[cellId]}
       width={column.width}
       contentLines={$contentLines}
       hidden={!$columnRenderMap[column.name]}
+      isSelectingCells={$isSelectingCells}
     />
   {/each}
 </div>

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

@@ -5,7 +5,7 @@
   const {
     rowHeight,
     scroll,
-    focusedCellId,
+    ui,
     renderedRows,
     maxScrollTop,
     maxScrollLeft,
@@ -13,6 +13,8 @@
     hoveredRowId,
     menu,
     focusedCellAPI,
+    scrollTop,
+    scrollLeft,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -24,12 +26,12 @@
   let initialTouchX
   let initialTouchY
 
-  $: style = generateStyle($scroll, $rowHeight)
+  $: style = generateStyle($scrollLeft, $scrollTop, $rowHeight)
 
-  const generateStyle = (scroll, rowHeight) => {
-    const offsetX = scrollHorizontally ? -1 * scroll.left : 0
-    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
-    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+  const generateStyle = (scrollLeft, scrollTop, rowHeight) => {
+    const offsetX = scrollHorizontally ? -1 * scrollLeft : 0
+    const offsetY = scrollVertically ? -1 * (scrollTop % rowHeight) : 0
+    return `transform: translate(${offsetX}px, ${offsetY}px);`
   }
 
   // Handles a mouse wheel event and updates scroll state
@@ -108,7 +110,7 @@
   on:wheel={attachHandlers ? handleWheel : null}
   on:touchstart={attachHandlers ? handleTouchStart : null}
   on:touchmove={attachHandlers ? handleTouchMove : null}
-  on:click|self={() => ($focusedCellId = null)}
+  on:click|self={ui.actions.blur}
 >
   <div {style} class="inner" bind:this={ref}>
     <slot />

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

@@ -5,14 +5,14 @@
   import HeaderCell from "../cells/HeaderCell.svelte"
   import { TempTooltip, TooltipType } from "@budibase/bbui"
 
-  const { visibleColumns, config, hasNonAutoColumn, datasource, loading } =
+  const { scrollableColumns, config, hasNonAutoColumn, datasource, loading } =
     getContext("grid")
 </script>
 
 <div class="header">
   <GridScrollWrapper scrollHorizontally>
     <div class="row">
-      {#each $visibleColumns as column, idx}
+      {#each $scrollableColumns as column, idx}
         <HeaderCell {column} {idx}>
           <slot name="edit-column" />
         </HeaderCell>

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

@@ -3,17 +3,23 @@
   import { Icon } from "@budibase/bbui"
   import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { visibleColumns, scroll, width, subscribe, ui, keyboardBlocked } =
-    getContext("grid")
+  const {
+    scrollableColumns,
+    scrollLeft,
+    width,
+    subscribe,
+    ui,
+    keyboardBlocked,
+  } = getContext("grid")
 
   let anchor
   let isOpen = false
 
-  $: columnsWidth = $visibleColumns.reduce(
+  $: columnsWidth = $scrollableColumns.reduce(
     (total, col) => (total += col.width),
     0
   )
-  $: end = columnsWidth - 1 - $scroll.left
+  $: end = columnsWidth - 1 - $scrollLeft
   $: left = Math.min($width - 40, end)
   $: keyboardBlocked.set(isOpen)
 
@@ -43,7 +49,7 @@
 {#if isOpen}
   <GridPopover
     {anchor}
-    align={$visibleColumns.length ? "right" : "left"}
+    align={$scrollableColumns.length ? "right" : "left"}
     on:close={close}
     maxHeight={null}
     resizable

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

@@ -12,7 +12,7 @@
   const {
     hoveredRowId,
     focusedCellId,
-    stickyColumn,
+    displayColumn,
     scroll,
     dispatch,
     rows,
@@ -20,7 +20,7 @@
     datasource,
     subscribe,
     renderedRows,
-    visibleColumns,
+    scrollableColumns,
     rowHeight,
     hasNextPage,
     maxScrollTop,
@@ -31,6 +31,7 @@
     filter,
     inlineFilters,
     columnRenderMap,
+    visibleColumns,
     scrollTop,
   } = getContext("grid")
 
@@ -39,8 +40,8 @@
   let newRow
   let offset = 0
 
-  $: firstColumn = $stickyColumn || $visibleColumns[0]
-  $: width = GutterWidth + ($stickyColumn?.width || 0)
+  $: firstColumn = $visibleColumns[0]
+  $: width = GutterWidth + ($displayColumn?.width || 0)
   $: $datasource, (visible = false)
   $: selectedRowCount = Object.values($selectedRows).length
   $: hasNoRows = !$rows.length
@@ -70,7 +71,10 @@
     const newRowIndex = offset ? undefined : 0
     let rowToCreate = { ...newRow }
     delete rowToCreate._isNewRow
-    const savedRow = await rows.actions.addRow(rowToCreate, newRowIndex)
+    const savedRow = await rows.actions.addRow({
+      row: rowToCreate,
+      idx: newRowIndex,
+    })
     if (savedRow) {
       // Reset state
       clear()
@@ -167,7 +171,7 @@
       class="new-row-fab"
       on:click={() => dispatch("add-row-inline")}
       transition:fade|local={{ duration: 130 }}
-      class:offset={!$stickyColumn}
+      class:offset={!$displayColumn}
     >
       <Icon name="Add" size="S" />
     </div>
@@ -191,19 +195,19 @@
             <div in:fade={{ duration: 130 }} class="loading-overlay" />
           {/if}
         </GutterCell>
-        {#if $stickyColumn}
-          {@const cellId = getCellID(NewRowID, $stickyColumn.name)}
+        {#if $displayColumn}
+          {@const cellId = getCellID(NewRowID, $displayColumn.name)}
           <DataCell
             {cellId}
             rowFocused
-            column={$stickyColumn}
+            column={$displayColumn}
             row={newRow}
             focused={$focusedCellId === cellId}
-            width={$stickyColumn.width}
+            width={$displayColumn.width}
             {updateValue}
             topRow={offset === 0}
           >
-            {#if $stickyColumn?.schema?.autocolumn}
+            {#if $displayColumn?.schema?.autocolumn}
               <div class="readonly-overlay">Can't edit auto column</div>
             {/if}
             {#if isAdding}
@@ -216,7 +220,7 @@
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
       <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
-          {#each $visibleColumns as column}
+          {#each $scrollableColumns as column}
             {@const cellId = getCellID(NewRowID, column.name)}
             <DataCell
               {cellId}