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

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.5.6-alpha.9",
+  "version": "2.5.7",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.5.6-alpha.9",
-    "@budibase/shared-core": "2.5.6-alpha.9",
-    "dayjs": "^1.11.7",
+    "@budibase/bbui": "^2.5.7",
+    "@budibase/shared-core": "^2.5.7",
     "lodash": "^4.17.21",
-    "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "560204d82570bd22b987e6e35f8e659e9c047425"
+  "gitHead": "6c37b6a6c69a1da43a5c0930419e743cc18b5b42"
 }

package/src/components/index.js

@@ -1,3 +1,2 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
-export { Grid } from "./grid"

package/src/constants.js

@@ -69,7 +69,6 @@ export const Features = {
   AUDIT_LOGS: "auditLogs",
   ENFORCEABLE_SSO: "enforceableSSO",
   BRANDING: "branding",
-  SCIM: "scim",
 }
 
 // Role IDs

package/src/fetch/DataFetch.js

@@ -21,11 +21,11 @@ export default class DataFetch {
     this.API = null
 
     // Feature flags
-    this.features = {
+    this.featureStore = writable({
       supportsSearch: false,
       supportsSort: false,
       supportsPagination: false,
-    }
+    })
 
     // Config
     this.options = {
@@ -56,7 +56,6 @@ export default class DataFetch {
       pageNumber: 0,
       cursor: null,
       cursors: [],
-      resetKey: Math.random(),
     })
 
     // Merge options with their default values
@@ -82,14 +81,17 @@ export default class DataFetch {
     this.prevPage = this.prevPage.bind(this)
 
     // Derive certain properties to return
-    this.derivedStore = derived(this.store, $store => {
-      return {
-        ...$store,
-        ...this.features,
-        hasNextPage: this.hasNextPage($store),
-        hasPrevPage: this.hasPrevPage($store),
+    this.derivedStore = derived(
+      [this.store, this.featureStore],
+      ([$store, $featureStore]) => {
+        return {
+          ...$store,
+          ...$featureStore,
+          hasNextPage: this.hasNextPage($store),
+          hasPrevPage: this.hasPrevPage($store),
+        }
       }
-    })
+    )
 
     // Mark as loaded if we have no datasource
     if (!this.options.datasource) {
@@ -118,11 +120,11 @@ export default class DataFetch {
     // Fetch datasource definition and determine feature flags
     const definition = await this.getDefinition(datasource)
     const features = this.determineFeatureFlags(definition)
-    this.features = {
+    this.featureStore.set({
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
       supportsPagination: paginate && !!features?.supportsPagination,
-    }
+    })
 
     // Fetch and enrich schema
     let schema = this.getSchema(datasource, definition)
@@ -136,17 +138,11 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the primary display and fallback to first column
+    // If no sort column, use the first field in the schema
     if (!this.options.sortColumn) {
-      let newSortColumn
-      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
-        newSortColumn = definition.primaryDisplay
-      } else {
-        newSortColumn = Object.keys(schema)[0]
-      }
-      this.options.sortColumn = newSortColumn
+      this.options.sortColumn = Object.keys(schema)[0]
     }
-    const { sortOrder, sortColumn } = this.options
+    const { sortColumn } = this.options
 
     // Determine what sort type to use
     let sortType = "string"
@@ -171,8 +167,6 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
-      sortOrder,
-      sortColumn,
     }))
 
     // Actually fetch data
@@ -186,7 +180,6 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
-      resetKey: Math.random(),
     }))
   }
 
@@ -196,22 +189,23 @@ export default class DataFetch {
   async getPage() {
     const { sortColumn, sortOrder, sortType, limit } = this.options
     const { query } = get(this.store)
+    const features = get(this.featureStore)
 
     // Get the actual data
     let { rows, info, hasNextPage, cursor, error } = await this.getData()
 
     // If we don't support searching, do a client search
-    if (!this.features.supportsSearch) {
+    if (!features.supportsSearch) {
       rows = runLuceneQuery(rows, query)
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort) {
+    if (!features.supportsSort) {
       rows = luceneSort(rows, sortColumn, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit
-    if (!this.features.supportsPagination) {
+    if (!features.supportsPagination) {
       rows = luceneLimit(rows, limit)
     }
 

package/src/fetch/QueryFetch.js

@@ -31,7 +31,7 @@ export default class QueryFetch extends DataFetch {
 
   async getData() {
     const { datasource, limit, paginate } = this.options
-    const { supportsPagination } = this.features
+    const { supportsPagination } = get(this.featureStore)
     const { cursor, definition } = get(this.store)
     const type = definition?.fields?.pagination?.type
 

package/src/themes/midnight.css

@@ -13,9 +13,6 @@
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 85%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
 
-    /* Custom additions */
     --modal-background: var(--spectrum-global-color-gray-50);
-    --drop-shadow: rgba(0, 0, 0, 0.25) !important;
-    --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
 

package/src/themes/nord.css

@@ -46,8 +46,5 @@
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
   --spectrum-alias-background-color-hover-overlay: rgba(169, 177, 193, 0.1);
 
-  /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
-  --drop-shadow: rgba(0, 0, 0, 0.15) !important;
-  --spectrum-global-color-blue-100: rgb(56, 65, 84) !important;
 }

package/src/utils/utils.js

@@ -86,23 +86,3 @@ export const throttle = (callback, minDelay = 1000) => {
   }
   return invoke
 }
-
-/**
- * Utility to debounce DOM activities using requestAnimationFrame
- * @param callback the function to run
- * @returns {Function}
- */
-export const domDebounce = callback => {
-  let active = false
-  let lastParams
-  return (...params) => {
-    lastParams = params
-    if (!active) {
-      active = true
-      requestAnimationFrame(() => {
-        callback(...lastParams)
-        active = false
-      })
-    }
-  }
-}

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

@@ -1,153 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { getContext } from "svelte"
-  import { Dropzone, notifications } from "@budibase/bbui"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let readonly = false
-  export let api
-  export let invertX = false
-  export let invertY = false
-
-  const { API } = getContext("grid")
-  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-
-  let isOpen = false
-
-  $: editable = focused && !readonly
-  $: {
-    if (!focused) {
-      close()
-    }
-  }
-
-  const onKeyDown = () => {
-    return isOpen
-  }
-
-  const open = () => {
-    isOpen = true
-  }
-
-  const close = () => {
-    isOpen = false
-  }
-
-  const isImage = extension => {
-    return imageExtensions.includes(extension?.toLowerCase())
-  }
-
-  const handleFileTooLarge = fileSizeLimit => {
-    notifications.error(
-      `Files cannot exceed ${
-        fileSizeLimit / 1000000
-      }MB. Please try again with smaller files.`
-    )
-  }
-
-  const processFiles = async fileList => {
-    let data = new FormData()
-    for (let i = 0; i < fileList.length; i++) {
-      data.append("file", fileList[i])
-    }
-    try {
-      return await API.uploadBuilderAttachment(data)
-    } catch (error) {
-      notifications.error("Failed to upload attachment")
-      return []
-    }
-  }
-
-  const deleteAttachments = async fileList => {
-    try {
-      return await API.deleteBuilderAttachments(fileList)
-    } catch (error) {
-      return []
-    }
-  }
-
-  onMount(() => {
-    api = {
-      focus: () => open(),
-      blur: () => close(),
-      onKeyDown,
-    }
-  })
-</script>
-
-<div class="attachment-cell" class:editable on:click={editable ? open : null}>
-  {#each value || [] as attachment}
-    {#if isImage(attachment.extension)}
-      <img src={attachment.url} alt={attachment.extension} />
-    {:else}
-      <div class="file" title={attachment.name}>
-        {attachment.extension}
-      </div>
-    {/if}
-  {/each}
-</div>
-
-{#if isOpen}
-  <div class="dropzone" class:invertX class:invertY>
-    <Dropzone
-      {value}
-      compact
-      on:change={e => onChange(e.detail)}
-      {processFiles}
-      {deleteAttachments}
-      {handleFileTooLarge}
-    />
-  </div>
-{/if}
-
-<style>
-  .attachment-cell {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding: var(--cell-padding);
-    flex-wrap: nowrap;
-    gap: var(--cell-spacing);
-    align-self: stretch;
-    overflow: hidden;
-    user-select: none;
-  }
-  .attachment-cell.editable:hover {
-    cursor: pointer;
-  }
-  .file {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 10px;
-    color: var(--spectrum-global-color-gray-700);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 12px;
-    user-select: none;
-  }
-  .dropzone {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 320px;
-    background: var(--background);
-    border: var(--cell-border);
-    padding: var(--cell-padding);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-  }
-  .dropzone.invertX {
-    left: auto;
-    right: 0;
-  }
-  .dropzone.invertY {
-    transform: translateY(-100%);
-    top: 0;
-  }
-</style>

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

@@ -1,44 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { Checkbox } from "@budibase/bbui"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let readonly = false
-  export let api
-
-  $: editable = focused && !readonly
-
-  const handleChange = e => {
-    onChange(e.detail)
-  }
-
-  const onKeyDown = e => {
-    if (e.key === "Enter") {
-      onChange(!value)
-      return true
-    }
-    return false
-  }
-
-  onMount(() => {
-    api = {
-      onKeyDown,
-    }
-  })
-</script>
-
-<div class="boolean-cell" class:editable>
-  <Checkbox {value} on:change={handleChange} />
-</div>
-
-<style>
-  .boolean-cell {
-    padding: 2px var(--cell-padding);
-    pointer-events: none;
-  }
-  .boolean-cell.editable {
-    pointer-events: all;
-  }
-</style>

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

@@ -1,86 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import GridCell from "./GridCell.svelte"
-  import { getCellRenderer } from "../lib/renderers"
-  import { derived, writable } from "svelte/store"
-
-  const { rows, focusedCellId, focusedCellAPI, menu, config, validation } =
-    getContext("grid")
-
-  export let highlighted
-  export let selected
-  export let rowFocused
-  export let rowIdx
-  export let focused
-  export let selectedUser
-  export let column
-  export let row
-  export let cellId
-  export let updateValue = rows.actions.updateValue
-  export let invertX = false
-  export let invertY = false
-
-  const emptyError = writable(null)
-
-  let api
-
-  // Get the error for this cell if the row is focused
-  $: error = getErrorStore(rowFocused, cellId)
-
-  // Determine if the cell is editable
-  $: readonly =
-    column.schema.autocolumn ||
-    column.schema.disabled ||
-    (!$config.allowEditRows && row._id)
-
-  // Register this cell API if the row is focused
-  $: {
-    if (focused) {
-      focusedCellAPI.set(cellAPI)
-    }
-  }
-
-  const getErrorStore = (selected, cellId) => {
-    if (!selected) {
-      return emptyError
-    }
-    return derived(validation, $validation => $validation[cellId])
-  }
-
-  const cellAPI = {
-    focus: () => api?.focus(),
-    blur: () => api?.blur(),
-    onKeyDown: (...params) => api?.onKeyDown(...params),
-    isReadonly: () => readonly,
-    getType: () => column.schema.type,
-    getValue: () => row[column.name],
-    setValue: value => {
-      validation.actions.setError(cellId, null)
-      updateValue(row._id, column.name, value)
-    },
-  }
-</script>
-
-<GridCell
-  {highlighted}
-  {selected}
-  {rowIdx}
-  {focused}
-  {selectedUser}
-  error={$error}
-  on:click={() => focusedCellId.set(cellId)}
-  on:contextmenu={e => menu.actions.open(cellId, e)}
-  width={column.width}
->
-  <svelte:component
-    this={getCellRenderer(column)}
-    bind:api
-    value={row[column.name]}
-    schema={column.schema}
-    onChange={cellAPI.setValue}
-    {focused}
-    {readonly}
-    {invertY}
-    {invertX}
-  />
-</GridCell>

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

@@ -1,77 +0,0 @@
-<script>
-  import dayjs from "dayjs"
-  import { CoreDatePicker, Icon } from "@budibase/bbui"
-
-  export let value
-  export let schema
-  export let onChange
-  export let focused = false
-  export let readonly = false
-
-  // adding the 0- will turn a string like 00:00:00 into a valid ISO
-  // date, but will make actual ISO dates invalid
-  $: time = new Date(`0-${value}`)
-  $: timeOnly = !isNaN(time) || schema?.timeOnly
-  $: dateOnly = schema?.dateOnly
-  $: format = timeOnly
-    ? "HH:mm:ss"
-    : dateOnly
-    ? "MMM D YYYY"
-    : "MMM D YYYY, HH:mm"
-  $: editable = focused && !readonly
-</script>
-
-<div class="container">
-  <div class="value">
-    {#if value}
-      {dayjs(timeOnly ? time : value).format(format)}
-    {/if}
-  </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}
-    />
-  </div>
-{/if}
-
-<style>
-  .container {
-    padding: var(--cell-padding);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 1 auto;
-    gap: var(--cell-spacing);
-  }
-  .value {
-    flex: 1 1 auto;
-    width: 0;
-    overflow: hidden;
-    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%;
-  }
-</style>

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

@@ -1,5 +0,0 @@
-<script>
-  import TextCell from "./TextCell.svelte"
-</script>
-
-<TextCell {...$$props} readonly />