@budibase/frontend-core 2.23.11 → 2.24.0

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.23.11",
+  "version": "2.24.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.23.11",
-    "@budibase/shared-core": "2.23.11",
-    "@budibase/types": "2.23.11",
+    "@budibase/bbui": "2.24.0",
+    "@budibase/shared-core": "2.24.0",
+    "@budibase/types": "2.24.0",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "ec1634d42c00cb3cb86228f75d68251f42d1f05d"
+  "gitHead": "6a49eb3bee39821852e6c3b4c0203281a3eff99e"
 }

package/src/api/backups.js

@@ -1,7 +1,4 @@
 export const buildBackupsEndpoints = API => ({
-  /**
-   * Gets a list of users in the current tenant.
-   */
   searchBackups: async ({ appId, trigger, type, page, startDate, endDate }) => {
     const opts = {}
     if (page) {

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount, getContext } from "svelte"
   import { Dropzone } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let focused = false
@@ -8,7 +9,6 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let invertY = false
   export let schema
   export let maximum
 
@@ -16,6 +16,7 @@
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false
+  let anchor
 
   $: editable = focused && !readonly
   $: {
@@ -73,7 +74,12 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="attachment-cell" class:editable on:click={editable ? open : null}>
+<div
+  class="attachment-cell"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
   {#each value || [] as attachment}
     {#if isImage(attachment.extension)}
       <img src={attachment.url} alt={attachment.extension} />
@@ -86,16 +92,24 @@
 </div>
 
 {#if isOpen}
-  <div class="dropzone" class:invertX class:invertY>
-    <Dropzone
-      {value}
-      compact
-      on:change={e => onChange(e.detail)}
-      maximum={maximum || schema.constraints?.length?.maximum}
-      {processFiles}
-      {handleFileTooLarge}
-    />
-  </div>
+  <GridPopover
+    open={isOpen}
+    {anchor}
+    {invertX}
+    maxHeight={null}
+    on:close={close}
+  >
+    <div class="dropzone">
+      <Dropzone
+        {value}
+        compact
+        on:change={e => onChange(e.detail)}
+        maximum={maximum || schema.constraints?.length?.maximum}
+        {processFiles}
+        {handleFileTooLarge}
+      />
+    </div>
+  </GridPopover>
 {/if}
 
 <style>
@@ -129,23 +143,8 @@
     user-select: none;
   }
   .dropzone {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 320px;
     background: var(--grid-background-alt);
-    border: var(--cell-border);
+    width: 320px;
     padding: var(--cell-padding);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .dropzone.invertX {
-    left: auto;
-    right: 0;
-  }
-  .dropzone.invertY {
-    transform: translateY(-100%);
-    top: 0;
   }
 </style>

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

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import RelationshipCell from "./RelationshipCell.svelte"
-  import { FieldSubtype, RelationshipType } from "@budibase/types"
+  import { BBReferenceFieldSubType, RelationshipType } from "@budibase/types"
 
   export let api
 
@@ -13,13 +13,16 @@
     // This is not really used, just adding some content to be able to render the relationship cell
     tableId: "external",
     relationshipType:
-      subtype === FieldSubtype.USER
+      subtype === BBReferenceFieldSubType.USER
         ? RelationshipType.ONE_TO_MANY
         : RelationshipType.MANY_TO_MANY,
   }
 
   async function searchFunction(searchParams) {
-    if (subtype !== FieldSubtype.USER && subtype !== FieldSubtype.USERS) {
+    if (
+      subtype !== BBReferenceFieldSubType.USER &&
+      subtype !== BBReferenceFieldSubType.USERS
+    ) {
       throw `Search for '${subtype}' not implemented`
     }
 

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

@@ -1,7 +1,8 @@
 <script>
-  import dayjs from "dayjs"
-  import { CoreDatePicker, Icon } from "@budibase/bbui"
+  import { CoreDatePickerPopoverContents, Icon, Helpers } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import dayjs from "dayjs"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let schema
@@ -9,83 +10,117 @@
   export let focused = false
   export let readonly = false
   export let api
+  export let invertX = false
 
-  let flatpickr
   let isOpen
+  let anchor
 
-  // Adding the 0- will turn a string like 00:00:00 into a valid ISO
-  // date, but will make actual ISO dates invalid
-  $: isTimeValue = !isNaN(new Date(`0-${value}`))
-  $: timeOnly = isTimeValue || schema?.timeOnly
-  $: dateOnly = schema?.dateOnly
-  $: format = timeOnly
-    ? "HH:mm:ss"
-    : dateOnly
-    ? "MMM D YYYY"
-    : "MMM D YYYY, HH:mm"
+  $: timeOnly = schema?.timeOnly
+  $: enableTime = !schema?.dateOnly
+  $: ignoreTimezones = schema?.ignoreTimezones
   $: editable = focused && !readonly
-  $: displayValue = getDisplayValue(value, format, timeOnly, isTimeValue)
-
-  const getDisplayValue = (value, format, timeOnly, isTimeValue) => {
-    if (!value) {
-      return ""
-    }
-    // Parse full date strings
-    if (!timeOnly || !isTimeValue) {
-      return dayjs(value).format(format)
+  $: parsedValue = Helpers.parseDate(value, {
+    timeOnly,
+    enableTime,
+    ignoreTimezones,
+  })
+  $: displayValue = getDisplayValue(parsedValue, timeOnly, enableTime)
+  // Ensure open state matches desired state
+  $: {
+    if (!focused && isOpen) {
+      close()
     }
-    // Otherwise must be a time string
-    return dayjs(`0-${value}`).format(format)
   }
 
-  // Ensure we close flatpickr when unselected
-  $: {
-    if (!focused) {
-      flatpickr?.close()
+  const getDisplayValue = (value, timeOnly, enableTime) => {
+    return Helpers.getDateDisplayValue(value, {
+      enableTime,
+      timeOnly,
+    })
+  }
+
+  const open = () => {
+    isOpen = true
+  }
+
+  const close = () => {
+    isOpen = false
+
+    // Only save the changed value when closing. If the value is unchanged then
+    // this is handled upstream and no action is taken.
+    onChange(value)
+  }
+
+  const onKeyDown = e => {
+    if (!isOpen) {
+      return false
+    }
+    e.preventDefault()
+    if (e.key === "ArrowUp") {
+      changeDate(-1, "week")
+    } else if (e.key === "ArrowDown") {
+      changeDate(1, "week")
+    } else if (e.key === "ArrowLeft") {
+      changeDate(-1, "day")
+    } else if (e.key === "ArrowRight") {
+      changeDate(1, "day")
+    } else if (e.key === "Enter") {
+      close()
     }
+    return true
   }
 
-  const onKeyDown = () => {
-    return isOpen
+  const changeDate = (quantity, unit) => {
+    let newValue
+    if (!value) {
+      newValue = dayjs()
+    } else {
+      newValue = dayjs(value).add(quantity, unit)
+    }
+    value = Helpers.stringifyDate(newValue, {
+      enableTime,
+      timeOnly,
+      ignoreTimezones,
+    })
   }
 
   onMount(() => {
     api = {
       onKeyDown,
-      focus: () => flatpickr?.open(),
-      blur: () => flatpickr?.close(),
+      focus: open,
+      blur: close,
       isActive: () => isOpen,
     }
   })
 </script>
 
-<div class="container">
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="container"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
   <div class="value">
-    {#if value}
-      {displayValue}
-    {/if}
+    {displayValue}
   </div>
   {#if editable}
     <Icon name="Calendar" />
   {/if}
 </div>
 
-{#if editable}
-  <div class="picker">
-    <CoreDatePicker
-      {value}
-      on:change={e => onChange(e.detail)}
-      appendTo={document.documentElement}
-      enableTime={!dateOnly}
-      {timeOnly}
-      time24hr
-      ignoreTimezones={schema.ignoreTimezones}
-      bind:flatpickr
-      on:open={() => (isOpen = true)}
-      on:close={() => (isOpen = false)}
+{#if isOpen}
+  <GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
+    <CoreDatePickerPopoverContents
+      value={parsedValue}
       useKeyboardShortcuts={false}
+      on:change={e => (value = e.detail)}
+      {enableTime}
+      {timeOnly}
+      {ignoreTimezones}
     />
-  </div>
+  </GridPopover>
 {/if}
 
 <style>
@@ -97,6 +132,10 @@
     align-items: center;
     flex: 1 1 auto;
     gap: var(--cell-spacing);
+    user-select: none;
+  }
+  .container.editable:hover {
+    cursor: pointer;
   }
   .value {
     flex: 1 1 auto;
@@ -105,15 +144,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 20px;
-  }
-  .picker {
-    position: absolute;
-    opacity: 0;
-  }
-  .picker :global(.flatpickr) {
-    min-width: 0;
-  }
-  .picker :global(.spectrum-Textfield-input) {
-    width: 100%;
+    height: 20px;
   }
 </style>

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

@@ -43,6 +43,9 @@
   on:mouseup
   on:click
   on:contextmenu
+  on:touchstart
+  on:touchend
+  on:touchcancel
   {style}
 >
   {#if error}

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

@@ -1,30 +1,22 @@
 <script>
   import { getContext, onMount, tick } from "svelte"
   import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
-  import {
-    Icon,
-    Popover,
-    Menu,
-    MenuItem,
-    clickOutside,
-    Modal,
-  } from "@budibase/bbui"
+  import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
   import GridCell from "./GridCell.svelte"
   import { getColumnIcon } from "../lib/utils"
   import MigrationModal from "../controls/MigrationModal.svelte"
   import { debounce } from "../../../utils/utils"
   import { FieldType, FormulaType } from "@budibase/types"
   import { TableNames } from "../../../constants"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let column
   export let idx
-  export let orderable = true
 
   const {
     reorder,
     isReordering,
     isResizing,
-    rand,
     sort,
     visibleColumns,
     dispatch,
@@ -53,7 +45,6 @@
   let open = false
   let editIsOpen = false
   let timeout
-  let popover
   let migrationModal
   let searchValue
   let input
@@ -66,6 +57,12 @@
   $: resetSearchValue(column.name)
   $: searching = searchValue != null
   $: debouncedUpdateFilter(searchValue)
+  $: orderable = !column.primaryDisplay
+
+  const close = () => {
+    open = false
+    editIsOpen = false
+  }
 
   const getSortingLabels = type => {
     switch (type) {
@@ -106,22 +103,19 @@
     dispatch("edit-column", column.schema)
   }
 
-  const cancelEdit = () => {
-    popover.hide()
-    editIsOpen = false
-  }
-
   const onMouseDown = e => {
-    if (e.button === 0 && orderable) {
+    ui.actions.blur()
+    if ((e.touches?.length || e.button === 0) && orderable) {
       timeout = setTimeout(() => {
         reorder.actions.startReordering(column.name, e)
       }, 200)
     }
   }
 
-  const onMouseUp = e => {
-    if (e.button === 0 && orderable) {
+  const onMouseUp = () => {
+    if (timeout) {
       clearTimeout(timeout)
+      timeout = null
     }
   }
 
@@ -236,7 +230,7 @@
   }
   const debouncedUpdateFilter = debounce(updateFilter, 250)
 
-  onMount(() => subscribe("close-edit-column", cancelEdit))
+  onMount(() => subscribe("close-edit-column", close))
 </script>
 
 <Modal bind:this={migrationModal}>
@@ -258,6 +252,9 @@
   <GridCell
     on:mousedown={onMouseDown}
     on:mouseup={onMouseUp}
+    on:touchstart={onMouseDown}
+    on:touchend={onMouseUp}
+    on:touchcancel={onMouseUp}
     on:contextmenu={onContextMenu}
     width={column.width}
     left={column.left}
@@ -310,88 +307,88 @@
   </GridCell>
 </div>
 
-<Popover
-  bind:open
-  bind:this={popover}
-  {anchor}
-  align="right"
-  offset={0}
-  popoverTarget={document.getElementById(`grid-${rand}`)}
-  customZindex={50}
->
-  {#if editIsOpen}
-    <div
-      use:clickOutside={() => {
-        editIsOpen = false
-      }}
-      class="content"
-    >
-      <slot />
-    </div>
-  {:else}
-    <Menu>
-      <MenuItem
-        icon="Edit"
-        on:click={editColumn}
-        disabled={!$config.canEditColumns || column.schema.disabled}
-      >
-        Edit column
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        on:click={duplicateColumn}
-        disabled={!$config.canEditColumns}
-      >
-        Duplicate column
-      </MenuItem>
-      <MenuItem
-        icon="Label"
-        on:click={makeDisplayColumn}
-        disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
-      >
-        Use as display column
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderUp"
-        on:click={sortAscending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "ascending")}
-      >
-        Sort {sortingLabels.ascending}
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderDown"
-        on:click={sortDescending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "descending")}
-      >
-        Sort {sortingLabels.descending}
-      </MenuItem>
-      <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-        Move left
-      </MenuItem>
-      <MenuItem
-        disabled={!canMoveRight}
-        icon="ChevronRight"
-        on:click={moveRight}
-      >
-        Move right
-      </MenuItem>
-      <MenuItem
-        disabled={idx === "sticky" || !$config.showControls}
-        icon="VisibilityOff"
-        on:click={hideColumn}
-      >
-        Hide column
-      </MenuItem>
-      {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
-        <MenuItem icon="User" on:click={openMigrationModal}>
-          Migrate to user column
+{#if open}
+  <GridPopover
+    {anchor}
+    align="right"
+    on:close={close}
+    maxHeight={null}
+    resizable
+  >
+    {#if editIsOpen}
+      <div class="content">
+        <slot />
+      </div>
+    {:else}
+      <Menu>
+        <MenuItem
+          icon="Edit"
+          on:click={editColumn}
+          disabled={!$config.canEditColumns || column.schema.disabled}
+        >
+          Edit column
         </MenuItem>
-      {/if}
-    </Menu>
-  {/if}
-</Popover>
+        <MenuItem
+          icon="Duplicate"
+          on:click={duplicateColumn}
+          disabled={!$config.canEditColumns}
+        >
+          Duplicate column
+        </MenuItem>
+        <MenuItem
+          icon="Label"
+          on:click={makeDisplayColumn}
+          disabled={column.primaryDisplay ||
+            !canBeDisplayColumn(column.schema.type)}
+        >
+          Use as display column
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderUp"
+          on:click={sortAscending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "ascending")}
+        >
+          Sort {sortingLabels.ascending}
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderDown"
+          on:click={sortDescending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "descending")}
+        >
+          Sort {sortingLabels.descending}
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveLeft}
+          icon="ChevronLeft"
+          on:click={moveLeft}
+        >
+          Move left
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveRight}
+          icon="ChevronRight"
+          on:click={moveRight}
+        >
+          Move right
+        </MenuItem>
+        <MenuItem
+          disabled={column.primaryDisplay || !$config.showControls}
+          icon="VisibilityOff"
+          on:click={hideColumn}
+        >
+          Hide column
+        </MenuItem>
+        {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
+          <MenuItem icon="User" on:click={openMigrationModal}>
+            Migrate to user column
+          </MenuItem>
+        {/if}
+      </Menu>
+    {/if}
+  </GridPopover>
+{/if}
 
 <style>
   .header-cell {
@@ -485,7 +482,7 @@
   }
 
   .content {
-    width: 300px;
+    width: 360px;
     padding: 20px;
     display: flex;
     flex-direction: column;