@budibase/frontend-core 2.5.6-alpha.5 → 2.5.6-alpha.7

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

@@ -0,0 +1,84 @@
+<script>
+  import { getContext } from "svelte"
+  import { domDebounce } from "../../../utils/utils"
+
+  const {
+    rowHeight,
+    scroll,
+    focusedCellId,
+    renderedRows,
+    maxScrollTop,
+    maxScrollLeft,
+    bounds,
+    hoveredRowId,
+    hiddenColumnsWidth,
+  } = getContext("grid")
+
+  export let scrollVertically = false
+  export let scrollHorizontally = false
+  export let wheelInteractive = false
+
+  $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
+
+  const generateStyle = (scroll, rowHeight, hiddenWidths) => {
+    const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
+    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
+    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+  }
+
+  // Handles a wheel even and updates the scroll offsets
+  const handleWheel = e => {
+    e.preventDefault()
+    const modifier = e.ctrlKey || e.metaKey
+    let x = modifier ? e.deltaY : e.deltaX
+    let y = modifier ? e.deltaX : e.deltaY
+    debouncedHandleWheel(x, y, e.clientY)
+  }
+  const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
+    const { top, left } = $scroll
+
+    // Calculate new scroll top
+    let newScrollTop = top + deltaY
+    newScrollTop = Math.max(0, Math.min(newScrollTop, $maxScrollTop))
+
+    // Calculate new scroll left
+    let newScrollLeft = left + deltaX
+    newScrollLeft = Math.max(0, Math.min(newScrollLeft, $maxScrollLeft))
+
+    // Update state
+    scroll.set({
+      left: scrollHorizontally ? newScrollLeft : left,
+      top: scrollVertically ? newScrollTop : top,
+    })
+
+    // Hover row under cursor
+    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:click|self={() => ($focusedCellId = null)}
+>
+  <div {style} class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    min-width: 100%;
+    min-height: 100%;
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .inner {
+    position: absolute;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+<script>
+  import { getContext } from "svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
+
+  const { renderedColumns } = getContext("grid")
+</script>
+
+<div class="header">
+  <GridScrollWrapper scrollHorizontally>
+    <div class="row">
+      {#each $renderedColumns as column, idx}
+        <HeaderCell {column} {idx} />
+      {/each}
+    </div>
+  </GridScrollWrapper>
+</div>
+
+<style>
+  .header {
+    background: var(--background);
+    border-bottom: var(--cell-border);
+    position: relative;
+    height: var(--default-row-height);
+    z-index: 1;
+  }
+  .row {
+    display: flex;
+  }
+</style>

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

@@ -0,0 +1,247 @@
+<script>
+  import GridCell from "../cells/GridCell.svelte"
+  import { getContext, onMount } from "svelte"
+  import { Icon, Button } from "@budibase/bbui"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import DataCell from "../cells/DataCell.svelte"
+  import { fly } from "svelte/transition"
+  import { GutterWidth } from "../lib/constants"
+
+  const {
+    hoveredRowId,
+    focusedCellId,
+    stickyColumn,
+    scroll,
+    config,
+    dispatch,
+    visibleColumns,
+    rows,
+    showHScrollbar,
+    tableId,
+    subscribe,
+    scrollLeft,
+  } = getContext("grid")
+
+  let isAdding = false
+  let newRow = {}
+  let touched = false
+
+  $: firstColumn = $stickyColumn || $visibleColumns[0]
+  $: rowHovered = $hoveredRowId === "new"
+  $: rowFocused = $focusedCellId?.startsWith("new-")
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
+  $: $tableId, (isAdding = false)
+
+  const addRow = async () => {
+    // Create row
+    const savedRow = await rows.actions.addRow(newRow, 0)
+    if (savedRow) {
+      // Select the first cell if possible
+      if (firstColumn) {
+        $focusedCellId = `${savedRow._id}-${firstColumn.name}`
+      }
+
+      // Reset state
+      isAdding = false
+      scroll.set({
+        left: 0,
+        top: 0,
+      })
+    }
+  }
+
+  const cancel = () => {
+    isAdding = false
+  }
+
+  const startAdding = () => {
+    newRow = {}
+    isAdding = true
+    if (firstColumn) {
+      $focusedCellId = `new-${firstColumn.name}`
+    }
+  }
+
+  const updateValue = (rowId, columnName, val) => {
+    touched = true
+    newRow[columnName] = val
+  }
+
+  const addViaModal = () => {
+    isAdding = false
+    dispatch("add-row")
+  }
+
+  onMount(() => subscribe("add-row-inline", startAdding))
+</script>
+
+<!-- Only show new row functionality if we have any columns -->
+{#if isAdding}
+  <div class="container" transition:fly={{ y: 20, duration: 130 }}>
+    <div class="content" class:above-scrollbar={$showHScrollbar}>
+      <div
+        class="new-row"
+        on:mouseenter={() => ($hoveredRowId = "new")}
+        on:mouseleave={() => ($hoveredRowId = null)}
+      >
+        <div
+          class="sticky-column"
+          style="flex: 0 0 {width}px"
+          class:scrolled={$scrollLeft > 0}
+        >
+          <GridCell width={GutterWidth} {rowHovered} {rowFocused}>
+            <div class="gutter">
+              <div class="number">1</div>
+              {#if $config.allowExpandRows}
+                <Icon
+                  name="Maximize"
+                  size="S"
+                  hoverable
+                  on:click={addViaModal}
+                />
+              {/if}
+            </div>
+          </GridCell>
+          {#if $stickyColumn}
+            {@const cellId = `new-${$stickyColumn.name}`}
+            <DataCell
+              {cellId}
+              column={$stickyColumn}
+              row={newRow}
+              {rowHovered}
+              focused={$focusedCellId === cellId}
+              {rowFocused}
+              width={$stickyColumn.width}
+              {updateValue}
+              rowIdx={0}
+            />
+          {/if}
+        </div>
+
+        <GridScrollWrapper scrollHorizontally wheelInteractive>
+          <div class="row">
+            {#each $visibleColumns as column}
+              {@const cellId = `new-${column.name}`}
+              {#key cellId}
+                <DataCell
+                  {cellId}
+                  {column}
+                  row={newRow}
+                  {rowHovered}
+                  focused={$focusedCellId === cellId}
+                  {rowFocused}
+                  width={column.width}
+                  {updateValue}
+                  rowIdx={0}
+                />
+              {/key}
+            {/each}
+          </div>
+        </GridScrollWrapper>
+      </div>
+    </div>
+    <div class="buttons">
+      <Button size="M" cta on:click={addRow}>Save</Button>
+      <Button size="M" secondary newStyles on:click={cancel}>Cancel</Button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .container {
+    pointer-events: none;
+    position: absolute;
+    top: var(--row-height);
+    left: 0;
+    width: 100%;
+    padding-bottom: 800px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .container:before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: var(--cell-background);
+    opacity: 0.8;
+    z-index: -1;
+  }
+  .content {
+    pointer-events: all;
+    background: var(--background);
+    border-bottom: var(--cell-border);
+  }
+
+  .new-row {
+    display: flex;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transition: margin-bottom 130ms ease-out;
+  }
+  .new-row :global(.cell) {
+    --cell-background: var(--background) !important;
+    border-bottom: none;
+  }
+
+  .sticky-column {
+    display: flex;
+    z-index: 1;
+    position: relative;
+  }
+  /* Don't show borders between cells in the sticky column */
+  .sticky-column :global(.cell:not(:last-child)) {
+    border-right: none;
+  }
+
+  .row {
+    width: 0;
+    display: flex;
+  }
+
+  /* Add shadow when scrolled */
+  .sticky-column.scrolled {
+    /*box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);*/
+  }
+  .sticky-column.scrolled:after {
+    content: "";
+    width: 10px;
+    height: 100%;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
+    left: 100%;
+    top: 0;
+    position: absolute;
+  }
+
+  /* Styles for gutter */
+  .gutter {
+    flex: 1 1 auto;
+    display: grid;
+    align-items: center;
+    padding: var(--cell-padding);
+    grid-template-columns: 1fr auto;
+    gap: var(--cell-spacing);
+  }
+
+  /* Floating buttons */
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    margin: 24px 0 0 var(--gutter-width);
+    pointer-events: all;
+    align-self: flex-start;
+  }
+
+  .number {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-500);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { rows } = getContext("grid")
+</script>
+
+<div>
+  {$rows.length} row{$rows.length === 1 ? "" : "s"}
+</div>

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

@@ -0,0 +1,245 @@
+<script>
+  import { getContext } from "svelte"
+  import { Checkbox, Icon } from "@budibase/bbui"
+  import GridCell from "../cells/GridCell.svelte"
+  import DataCell from "../cells/DataCell.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
+  import { GutterWidth } from "../lib/constants"
+
+  const {
+    rows,
+    selectedRows,
+    stickyColumn,
+    renderedRows,
+    focusedCellId,
+    hoveredRowId,
+    config,
+    selectedCellMap,
+    focusedRow,
+    dispatch,
+    scrollLeft,
+  } = getContext("grid")
+
+  $: rowCount = $rows.length
+  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
+
+  const selectAll = () => {
+    const allSelected = selectedRowCount === rowCount
+    if (allSelected) {
+      $selectedRows = {}
+    } else {
+      let allRows = {}
+      $rows.forEach(row => {
+        allRows[row._id] = true
+      })
+      $selectedRows = allRows
+    }
+  }
+
+  const selectRow = id => {
+    selectedRows.update(state => {
+      let newState = {
+        ...state,
+        [id]: !state[id],
+      }
+      if (!newState[id]) {
+        delete newState[id]
+      }
+      return newState
+    })
+  }
+</script>
+
+<div
+  class="sticky-column"
+  style="flex: 0 0 {width}px"
+  class:scrolled={$scrollLeft > 0}
+>
+  <div class="header row">
+    <GridCell width={GutterWidth} defaultHeight center>
+      <div class="gutter">
+        <div class="checkbox visible">
+          {#if $config.allowDeleteRows}
+            <div on:click={selectAll}>
+              <Checkbox
+                value={rowCount && selectedRowCount === rowCount}
+                disabled={!$renderedRows.length}
+              />
+            </div>
+          {/if}
+        </div>
+        {#if $config.allowExpandRows}
+          <div class="expand">
+            <Icon name="Maximize" size="S" />
+          </div>
+        {/if}
+      </div>
+    </GridCell>
+
+    {#if $stickyColumn}
+      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
+    {/if}
+  </div>
+
+  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+    <GridScrollWrapper scrollVertically wheelInteractive>
+      {#each $renderedRows as row, idx}
+        {@const rowSelected = !!$selectedRows[row._id]}
+        {@const rowHovered = $hoveredRowId === row._id}
+        {@const rowFocused = $focusedRow?._id === row._id}
+        {@const cellId = `${row._id}-${$stickyColumn?.name}`}
+        <div
+          class="row"
+          on:mouseenter={() => ($hoveredRowId = row._id)}
+          on:mouseleave={() => ($hoveredRowId = null)}
+        >
+          <GridCell
+            width={GutterWidth}
+            highlighted={rowFocused || rowHovered}
+            selected={rowSelected}
+          >
+            <div class="gutter">
+              <div
+                on:click={() => selectRow(row._id)}
+                class="checkbox"
+                class:visible={$config.allowDeleteRows &&
+                  (rowSelected || rowHovered || rowFocused)}
+              >
+                <Checkbox value={rowSelected} />
+              </div>
+              <div
+                class="number"
+                class:visible={!$config.allowDeleteRows ||
+                  !(rowSelected || rowHovered || rowFocused)}
+              >
+                {row.__idx + 1}
+              </div>
+              {#if $config.allowExpandRows}
+                <div class="expand" class:visible={rowFocused || rowHovered}>
+                  <Icon
+                    name="Maximize"
+                    hoverable
+                    size="S"
+                    on:click={() => {
+                      dispatch("edit-row", row)
+                    }}
+                  />
+                </div>
+              {/if}
+            </div>
+          </GridCell>
+          {#if $stickyColumn}
+            <DataCell
+              {row}
+              {cellId}
+              {rowFocused}
+              selected={rowSelected}
+              highlighted={rowHovered || rowFocused}
+              rowIdx={idx}
+              focused={$focusedCellId === cellId}
+              selectedUser={$selectedCellMap[cellId]}
+              width={$stickyColumn.width}
+              column={$stickyColumn}
+            />
+          {/if}
+        </div>
+      {/each}
+    </GridScrollWrapper>
+  </div>
+</div>
+
+<style>
+  .sticky-column {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 2;
+  }
+
+  /* Add right border */
+  .sticky-column:before {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 100%;
+    left: calc(100% - 1px);
+    top: 0;
+    border-left: var(--cell-border);
+  }
+
+  /* Add shadow when scrolled */
+  .sticky-column.scrolled:after {
+    position: absolute;
+    content: "";
+    width: 8px;
+    height: 100%;
+    left: 100%;
+    top: 0;
+    opacity: 1;
+    background: linear-gradient(to right, var(--drop-shadow), transparent);
+    z-index: -1;
+  }
+
+  /* Don't show borders between cells in the sticky column */
+  .sticky-column :global(.cell:not(:last-child)) {
+    border-right: none;
+  }
+
+  .header {
+    z-index: 1;
+  }
+  .header :global(.cell) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .content {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  /* Styles for gutter */
+  .gutter {
+    flex: 1 1 auto;
+    display: grid;
+    align-items: center;
+    padding: var(--cell-padding);
+    grid-template-columns: 1fr auto;
+    gap: var(--cell-spacing);
+  }
+  .checkbox,
+  .number {
+    display: none;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .checkbox :global(.spectrum-Checkbox) {
+    min-height: 0;
+    height: 20px;
+  }
+  .checkbox :global(.spectrum-Checkbox-box) {
+    margin: 3px 0 0 0;
+  }
+  .number {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  .checkbox.visible,
+  .number.visible {
+    display: flex;
+  }
+  .expand {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .expand.visible {
+    opacity: 1;
+    pointer-events: all;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+<script>
+  import { getContext } from "svelte"
+  import Avatar from "./Avatar.svelte"
+
+  const { users } = getContext("grid")
+</script>
+
+<div class="users">
+  {#each $users as user}
+    <Avatar {user} />
+  {/each}
+</div>
+
+<style>
+  .users {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+export const Padding = 276
+export const MaxCellRenderHeight = 252
+export const MaxCellRenderWidthOverflow = 200
+export const ScrollBarSize = 8
+export const GutterWidth = 72
+export const DefaultColumnWidth = 200
+export const MinColumnWidth = 100
+export const SmallRowHeight = 36
+export const MediumRowHeight = 64
+export const LargeRowHeight = 92
+export const DefaultRowHeight = SmallRowHeight

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

@@ -0,0 +1,29 @@
+import { createEventDispatcher } from "svelte"
+
+export const createEventManagers = () => {
+  const svelteDispatch = createEventDispatcher()
+  let subscribers = {}
+
+  // Dispatches an event, notifying subscribers and also emitting a normal
+  // svelte event
+  const dispatch = (event, payload) => {
+    svelteDispatch(event, payload)
+    const subs = subscribers[event] || []
+    for (let i = 0; i < subs.length; i++) {
+      subs[i](payload)
+    }
+  }
+
+  // Subscribes to events
+  const subscribe = (event, callback) => {
+    const subs = subscribers[event] || []
+    subscribers[event] = [...subs, callback]
+
+    // Return unsubscribe function
+    return () => {
+      subscribers[event] = subscribers[event].filter(cb => cb !== callback)
+    }
+  }
+
+  return { dispatch, subscribe }
+}

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

@@ -0,0 +1,29 @@
+import OptionsCell from "../cells/OptionsCell.svelte"
+import DateCell from "../cells/DateCell.svelte"
+import MultiSelectCell from "../cells/MultiSelectCell.svelte"
+import NumberCell from "../cells/NumberCell.svelte"
+import RelationshipCell from "../cells/RelationshipCell.svelte"
+import TextCell from "../cells/TextCell.svelte"
+import LongFormCell from "../cells/LongFormCell.svelte"
+import BooleanCell from "../cells/BooleanCell.svelte"
+import FormulaCell from "../cells/FormulaCell.svelte"
+import JSONCell from "../cells/JSONCell.svelte"
+import AttachmentCell from "../cells/AttachmentCell.svelte"
+
+const TypeComponentMap = {
+  text: TextCell,
+  options: OptionsCell,
+  datetime: DateCell,
+  barcodeqr: TextCell,
+  longform: LongFormCell,
+  array: MultiSelectCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  attachment: AttachmentCell,
+  link: RelationshipCell,
+  formula: FormulaCell,
+  json: JSONCell,
+}
+export const getCellRenderer = column => {
+  return TypeComponentMap[column?.schema?.type] || TextCell
+}