@budibase/frontend-core 2.5.6-alpha.9 → 2.5.7

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

@@ -1,72 +0,0 @@
-<script>
-  import {
-    Modal,
-    ModalContent,
-    ActionButton,
-    notifications,
-  } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { selectedRows, rows, config } = getContext("grid")
-
-  let modal
-
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
-  $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => {
-      if (entry[1] === true) {
-        return $rows.find(x => x._id === entry[0])
-      } else {
-        return null
-      }
-    })
-    .filter(x => x != null)
-
-  // Deletion callback when confirmed
-  const performDeletion = async () => {
-    const count = rowsToDelete.length
-    await rows.actions.deleteRows(rowsToDelete)
-    notifications.success(`Deleted ${count} row${count === 1 ? "" : "s"}`)
-  }
-</script>
-
-{#if selectedRowCount}
-  <div class="delete-button" data-ignore-click-outside="true">
-    <ActionButton
-      icon="Delete"
-      size="S"
-      on:click={modal.show}
-      disabled={!$config.allowEditRows}
-    >
-      Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
-    </ActionButton>
-  </div>
-{/if}
-
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Delete rows"
-    confirmText="Continue"
-    cancelText="Cancel"
-    onConfirm={performDeletion}
-    size="M"
-  >
-    Are you sure you want to delete {selectedRowCount}
-    row{selectedRowCount === 1 ? "" : "s"}?
-  </ModalContent>
-</Modal>
-
-<style>
-  .delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
-    color: var(--spectrum-global-color-red-400);
-  }
-  .delete-button :global(.spectrum-ActionButton:not(:disabled)) {
-    border-color: var(--spectrum-global-color-red-400);
-  }
-  /*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
-  /*  color: var(--spectrum-global-color-gray-600);*/
-  /*}*/
-  /*.delete-button.disabled :global(.spectrum-ActionButton) {*/
-  /*  border-color: var(--spectrum-global-color-gray-400);*/
-  /*}*/
-</style>

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

@@ -1,91 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle } from "@budibase/bbui"
-
-  const { columns } = getContext("grid")
-
-  let open = false
-  let anchor
-
-  $: anyHidden = $columns.some(col => !col.visible)
-
-  const toggleVisibility = (column, visible) => {
-    columns.update(state => {
-      const index = state.findIndex(col => col.name === column.name)
-      state[index].visible = visible
-      return state.slice()
-    })
-    columns.actions.saveChanges()
-  }
-
-  const showAll = () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: true,
-      }))
-    })
-    columns.actions.saveChanges()
-  }
-
-  const hideAll = () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: false,
-      }))
-    })
-    columns.actions.saveChanges()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="VisibilityOff"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open || anyHidden}
-    disabled={!$columns.length}
-  >
-    Hide columns
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <div class="columns">
-      {#each $columns as column}
-        <Toggle
-          size="S"
-          value={column.visible}
-          on:change={e => toggleVisibility(column, e.detail)}
-        />
-        <span>{column.name}</span>
-      {/each}
-    </div>
-    <div class="buttons">
-      <ActionButton on:click={showAll}>Show all</ActionButton>
-      <ActionButton on:click={hideAll}>Hide all</ActionButton>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-  .columns {
-    display: grid;
-    align-items: center;
-    grid-template-columns: auto 1fr;
-  }
-</style>

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

@@ -1,70 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import {
-    LargeRowHeight,
-    MediumRowHeight,
-    SmallRowHeight,
-  } from "../lib/constants"
-
-  const { rowHeight, columns, table } = getContext("grid")
-  const sizeOptions = [
-    {
-      label: "Small",
-      size: SmallRowHeight,
-    },
-    {
-      label: "Medium",
-      size: MediumRowHeight,
-    },
-    {
-      label: "Large",
-      size: LargeRowHeight,
-    },
-  ]
-
-  let open = false
-  let anchor
-
-  const changeRowHeight = height => {
-    columns.actions.saveTable({
-      ...$table,
-      rowHeight: height,
-    })
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="LineHeight"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-  >
-    Row height
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        selected={$rowHeight === option.size}
-        on:click={() => changeRowHeight(option.size)}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>

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

@@ -1,107 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover, Select } from "@budibase/bbui"
-
-  const { sort, visibleColumns, stickyColumn } = getContext("grid")
-  const orderOptions = [
-    { label: "A-Z", value: "ascending" },
-    { label: "Z-A", value: "descending" },
-  ]
-
-  let open = false
-  let anchor
-
-  $: columnOptions = getColumnOptions($stickyColumn, $visibleColumns)
-  $: checkValidSortColumn($sort.column, $stickyColumn, $visibleColumns)
-
-  const getColumnOptions = (stickyColumn, columns) => {
-    let options = []
-    if (stickyColumn) {
-      options.push(stickyColumn.name)
-    }
-    return [...options, ...columns.map(col => col.name)]
-  }
-
-  const updateSortColumn = e => {
-    sort.update(state => ({
-      ...state,
-      column: e.detail,
-    }))
-  }
-
-  const updateSortOrder = e => {
-    sort.update(state => ({
-      ...state,
-      order: e.detail,
-    }))
-  }
-
-  // Ensure we never have a sort column selected that is not visible
-  const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => {
-    if (!sortColumn) {
-      return
-    }
-    if (
-      sortColumn !== stickyColumn?.name &&
-      !visibleColumns.some(col => col.name === sortColumn)
-    ) {
-      if (stickyColumn) {
-        sort.update(state => ({
-          ...state,
-          column: stickyColumn.name,
-        }))
-      } else {
-        sort.update(state => ({
-          ...state,
-          column: visibleColumns[0]?.name,
-        }))
-      }
-    }
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="SortOrderDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open || $sort.column}
-    disabled={!columnOptions.length}
-  >
-    Sort
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <Select
-      placeholder={null}
-      value={$sort.column}
-      options={columnOptions}
-      autoWidth
-      on:change={updateSortColumn}
-      label="Column"
-    />
-    <Select
-      placeholder={null}
-      value={$sort.order}
-      options={orderOptions}
-      autoWidth
-      on:change={updateSortOrder}
-      label="Order"
-    />
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 6px 12px 12px 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .content :global(.spectrum-Picker) {
-    width: 140px;
-  }
-</style>

package/src/components/grid/index.js

@@ -1 +0,0 @@
-export { default as Grid } from "./layout/Grid.svelte"

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

@@ -1,24 +0,0 @@
-<script>
-  export let user
-</script>
-
-<div class="user" style="background:{user.color};" title={user.email}>
-  {user.email[0]}
-</div>
-
-<style>
-  div {
-    width: 24px;
-    height: 24px;
-    display: grid;
-    place-items: center;
-    color: white;
-    border-radius: 50%;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  div:hover {
-    cursor: pointer;
-  }
-</style>

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

@@ -1,250 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import { writable } from "svelte/store"
-  import { fade } from "svelte/transition"
-  import { clickOutside, ProgressCircle } from "@budibase/bbui"
-  import { createEventManagers } from "../lib/events"
-  import { createAPIClient } from "../../../api"
-  import { attachStores } from "../stores"
-  import DeleteButton from "../controls/DeleteButton.svelte"
-  import BetaButton from "../controls/BetaButton.svelte"
-  import GridBody from "./GridBody.svelte"
-  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
-  import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
-  import HeaderRow from "./HeaderRow.svelte"
-  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
-  import MenuOverlay from "../overlays/MenuOverlay.svelte"
-  import StickyColumn from "./StickyColumn.svelte"
-  import UserAvatars from "./UserAvatars.svelte"
-  import KeyboardManager from "../overlays/KeyboardManager.svelte"
-  import SortButton from "../controls/SortButton.svelte"
-  import AddColumnButton from "../controls/AddColumnButton.svelte"
-  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
-  import AddRowButton from "../controls/AddRowButton.svelte"
-  import RowHeightButton from "../controls/RowHeightButton.svelte"
-  import {
-    MaxCellRenderHeight,
-    MaxCellRenderWidthOverflow,
-    GutterWidth,
-    DefaultRowHeight,
-  } from "../lib/constants"
-
-  export let API = null
-  export let tableId = null
-  export let schemaOverrides = null
-  export let allowAddRows = true
-  export let allowAddColumns = true
-  export let allowEditColumns = true
-  export let allowExpandRows = true
-  export let allowEditRows = true
-  export let allowDeleteRows = true
-
-  // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random()
-
-  // State stores
-  const tableIdStore = writable(tableId)
-  const schemaOverridesStore = writable(schemaOverrides)
-  const config = writable({
-    allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-  })
-
-  // Build up context
-  let context = {
-    API: API || createAPIClient(),
-    rand,
-    config,
-    tableId: tableIdStore,
-    schemaOverrides: schemaOverridesStore,
-  }
-  context = { ...context, ...createEventManagers() }
-  context = attachStores(context)
-
-  // Reference some stores for local use
-  const {
-    isResizing,
-    isReordering,
-    ui,
-    loaded,
-    loading,
-    rowHeight,
-    contentLines,
-  } = context
-
-  // Keep stores up to date
-  $: tableIdStore.set(tableId)
-  $: schemaOverridesStore.set(schemaOverrides)
-  $: config.set({
-    allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-  })
-
-  // Set context for children to consume
-  setContext("grid", context)
-
-  // Expose ability to retrieve context externally for external control
-  export const getContext = () => context
-
-  // Initialise websocket for multi-user
-  // onMount(() => createWebsocket(context))
-</script>
-
-<div
-  class="grid"
-  id="grid-{rand}"
-  class:is-resizing={$isResizing}
-  class:is-reordering={$isReordering}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
->
-  <div class="controls">
-    <div class="controls-left">
-      <AddRowButton />
-      <AddColumnButton />
-      <slot name="controls" />
-      <RowHeightButton />
-      <HideColumnsButton />
-      <SortButton />
-    </div>
-    <div class="controls-right">
-      <DeleteButton />
-      <UserAvatars />
-    </div>
-  </div>
-  {#if $loaded}
-    <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
-      <div class="grid-data-inner">
-        <StickyColumn />
-        <div class="grid-data-content">
-          <HeaderRow />
-          <GridBody />
-        </div>
-        <div class="overlays">
-          <ResizeOverlay />
-          <ReorderOverlay />
-          <BetaButton />
-          <ScrollOverlay />
-          <MenuOverlay />
-        </div>
-      </div>
-    </div>
-  {/if}
-  {#if $loading}
-    <div in:fade|local={{ duration: 130 }} class="grid-loading">
-      <ProgressCircle />
-    </div>
-  {/if}
-  <KeyboardManager />
-</div>
-
-<style>
-  .grid {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    overflow: hidden;
-    background: var(--cell-background);
-
-    /* Variables */
-    --cell-background: var(--spectrum-global-color-gray-50);
-    --cell-background-hover: var(--spectrum-global-color-gray-100);
-    --cell-padding: 8px;
-    --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
-    --cell-font-size: 14px;
-    --controls-height: 50px;
-  }
-  .grid,
-  .grid :global(*) {
-    box-sizing: border-box;
-  }
-  .grid.is-resizing :global(*) {
-    cursor: col-resize !important;
-  }
-  .grid.is-reordering :global(*) {
-    cursor: grabbing !important;
-  }
-
-  .grid-data-outer,
-  .grid-data-inner {
-    flex: 1 1 auto;
-    display: flex;
-    justify-items: flex-start;
-    align-items: stretch;
-    overflow: hidden;
-  }
-  .grid-data-outer {
-    height: 0;
-    flex-direction: column;
-  }
-  .grid-data-inner {
-    flex-direction: row;
-    position: relative;
-  }
-  .grid-data-content {
-    flex: 1 1 auto;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Controls */
-  .controls {
-    height: var(--controls-height);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
-    padding: var(--cell-padding);
-    gap: var(--cell-spacing);
-    background: var(--background);
-  }
-  .controls-left,
-  .controls-right {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--cell-spacing);
-  }
-  .controls-right {
-    gap: 12px;
-  }
-
-  /* Overlays */
-  .overlays {
-    z-index: 10;
-  }
-
-  /* Loading */
-  .grid-loading {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-    z-index: 10;
-  }
-  .grid-loading:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    opacity: 0.6;
-  }
-</style>

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

@@ -1,38 +0,0 @@
-<script>
-  import { getContext, onMount } from "svelte"
-  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import GridRow from "./GridRow.svelte"
-
-  const { bounds, renderedRows, rowVerticalInversionIndex } = getContext("grid")
-
-  let body
-
-  onMount(() => {
-    // Observe and record the height of the body
-    const observer = new ResizeObserver(() => {
-      bounds.set(body.getBoundingClientRect())
-    })
-    observer.observe(body)
-    return () => {
-      observer.disconnect()
-    }
-  })
-</script>
-
-<div bind:this={body} class="grid-body">
-  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
-    {#each $renderedRows as row, idx}
-      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
-    {/each}
-  </GridScrollWrapper>
-</div>
-
-<style>
-  .grid-body {
-    display: block;
-    position: relative;
-    cursor: default;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-</style>

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

@@ -1,57 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import DataCell from "../cells/DataCell.svelte"
-
-  export let row
-  export let idx
-  export let invertY = false
-
-  const {
-    focusedCellId,
-    reorder,
-    selectedRows,
-    renderedColumns,
-    hoveredRowId,
-    selectedCellMap,
-    focusedRow,
-    columnHorizontalInversionIndex,
-  } = getContext("grid")
-
-  $: rowSelected = !!$selectedRows[row._id]
-  $: rowHovered = $hoveredRowId === row._id
-  $: rowFocused = $focusedRow?._id === row._id
-  $: reorderSource = $reorder.sourceColumn
-</script>
-
-<div
-  class="row"
-  on:focus
-  on:mouseenter={() => ($hoveredRowId = row._id)}
-  on:mouseleave={() => ($hoveredRowId = null)}
->
-  {#each $renderedColumns as column, columnIdx (column.name)}
-    {@const cellId = `${row._id}-${column.name}`}
-    <DataCell
-      {cellId}
-      {column}
-      {row}
-      {invertY}
-      {rowFocused}
-      invertX={columnIdx >= $columnHorizontalInversionIndex}
-      highlighted={rowHovered || rowFocused || reorderSource === column.name}
-      selected={rowSelected}
-      rowIdx={idx}
-      focused={$focusedCellId === cellId}
-      selectedUser={$selectedCellMap[cellId]}
-      width={column.width}
-    />
-  {/each}
-</div>
-
-<style>
-  .row {
-    width: 0;
-    display: flex;
-    height: var(--row-height);
-  }
-</style>