@budibase/frontend-core 3.2.28 → 3.2.30

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

@@ -74,12 +74,14 @@
   .value {
     display: -webkit-box;
     -webkit-line-clamp: var(--content-lines);
+    line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 20px;
   }
   .number .value {
     -webkit-line-clamp: 1;
+    line-clamp: 1;
   }
   input {
     flex: 1 1 auto;
@@ -110,5 +112,6 @@
   }
   input[type="number"] {
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 </style>

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

@@ -29,11 +29,11 @@
 
   const migrateUserColumn = async () => {
     try {
-      await API.migrateColumn({
-        tableId: $definition._id,
-        oldColumn: column.schema.name,
-        newColumn: newColumnName,
-      })
+      await API.migrateColumn(
+        $definition._id,
+        column.schema.name,
+        newColumnName
+      )
       notifications.success("Column migrated")
     } catch (e) {
       notifications.error(`Failed to migrate: ${e.message}`)

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { setContext, onMount } from "svelte"
   import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
@@ -47,24 +47,22 @@
   export let buttonsCollapsedText = null
   export let darkMode = false
   export let isCloud = null
-  export let rowConditions = null
   export let aiEnabled = false
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
 
   // Store props in a store for reference in other stores
-  const props = writable($$props)
+  const props: any = writable($$props)
 
   // Build up context
-  let context = {
+  let context = attachStores({
     API: API || createAPIClient(),
     Constants,
     gridID,
     props,
-  }
-  context = { ...context, ...createEventManagers() }
-  context = attachStores(context)
+    ...createEventManagers(),
+  })
 
   // Reference some stores for local use
   const {
@@ -106,7 +104,6 @@
     darkMode,
     isCloud,
     aiEnabled,
-    rowConditions,
   })
 
   // Derive min height and make available in context

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

@@ -7,7 +7,7 @@ export const HPadding = 40
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
-export const MinColumnWidth = 80
+export const MinColumnWidth = 56
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const GeneratedIDPrefix = "‽‽"

package/src/components/grid/lib/{events.js → events.ts}

@@ -2,11 +2,11 @@ import { createEventDispatcher } from "svelte"
 
 export const createEventManagers = () => {
   const svelteDispatch = createEventDispatcher()
-  let subscribers = {}
+  let subscribers: Record<string, ((...params: any) => void)[]> = {}
 
   // Dispatches an event, notifying subscribers and also emitting a normal
   // svelte event
-  const dispatch = (event, payload) => {
+  const dispatch = (event: string, payload: any) => {
     svelteDispatch(event, payload)
     const subs = subscribers[event] || []
     for (let i = 0; i < subs.length; i++) {
@@ -15,7 +15,7 @@ export const createEventManagers = () => {
   }
 
   // Subscribes to events
-  const subscribe = (event, callback) => {
+  const subscribe = (event: string, callback: () => void) => {
     const subs = subscribers[event] || []
     subscribers[event] = [...subs, callback]
 

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

@@ -1,3 +1,5 @@
+// TODO: remove when all stores are typed
+
 import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
 import { Helpers } from "@budibase/bbui"
 

package/src/components/grid/lib/utils.ts

@@ -0,0 +1,32 @@
+import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
+import { Helpers } from "@budibase/bbui"
+
+export const parseCellID = (cellId: string | null) => {
+  if (!cellId) {
+    return { rowId: undefined, field: undefined }
+  }
+  const parts = cellId.split(CellIDSeparator)
+  const field = parts.pop()
+  return { rowId: parts.join(CellIDSeparator), field }
+}
+
+export const getCellID = (rowId: string, fieldName: string) => {
+  return `${rowId}${CellIDSeparator}${fieldName}`
+}
+
+export const parseEventLocation = (event: MouseEvent | TouchEvent) => {
+  const e = event as MouseEvent & TouchEvent
+
+  return {
+    x: e.clientX ?? e.touches?.[0]?.clientX,
+    y: e.clientY ?? e.touches?.[0]?.clientY,
+  }
+}
+
+export const generateRowID = () => {
+  return `${GeneratedIDPrefix}${Helpers.uuid()}`
+}
+
+export const isGeneratedRowID = (id: string) => {
+  return id?.startsWith(GeneratedIDPrefix)
+}

package/src/components/grid/stores/bounds.ts

@@ -0,0 +1,29 @@
+import { derived, Readable, Writable, writable } from "svelte/store"
+
+interface BoundsStore {
+  bounds: Writable<{
+    left: number
+    top: number
+    width: number
+    height: number
+  }>
+  height: Readable<number>
+  width: Readable<number>
+}
+
+export type Store = BoundsStore
+
+export const createStores = (): BoundsStore => {
+  const bounds = writable({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  })
+
+  // Derive height and width as primitives to avoid wasted computation
+  const width = derived(bounds, $bounds => $bounds.width, 0)
+  const height = derived(bounds, $bounds => $bounds.height, 0)
+
+  return { bounds, height, width }
+}

package/src/components/grid/stores/{cache.js → cache.ts}

@@ -1,16 +1,31 @@
-export const createActions = context => {
+import { FindTableResponse } from "@budibase/types"
+import { Store as StoreContext } from "."
+
+interface CacheActionStore {
+  cache: {
+    actions: {
+      getPrimaryDisplayForTableId: (tableId: string) => Promise<string>
+      getTable: (tableId: string) => Promise<FindTableResponse>
+      resetCache: () => any
+    }
+  }
+}
+
+export type Store = CacheActionStore
+
+export const createActions = (context: StoreContext): CacheActionStore => {
   const { API } = context
 
   // Cache for the primary display columns of different tables.
   // If we ever need to cache table definitions for other purposes then we can
   // expand this to be a more generic cache.
-  let tableCache = {}
+  let tableCache: Record<string, Promise<FindTableResponse>> = {}
 
   const resetCache = () => {
     tableCache = {}
   }
 
-  const fetchTable = async tableId => {
+  const fetchTable = async (tableId: string) => {
     // If we've never encountered this tableId before then store a promise that
     // resolves to the primary display so that subsequent invocations before the
     // promise completes can reuse this promise
@@ -21,13 +36,13 @@ export const createActions = context => {
     return await tableCache[tableId]
   }
 
-  const getPrimaryDisplayForTableId = async tableId => {
+  const getPrimaryDisplayForTableId = async (tableId: string) => {
     const table = await fetchTable(tableId)
     const display = table?.primaryDisplay || table?.schema?.[0]?.name
     return display
   }
 
-  const getTable = async tableId => {
+  const getTable = async (tableId: string) => {
     const table = await fetchTable(tableId)
     return table
   }
@@ -43,7 +58,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { datasource, cache } = context
 
   // Wipe the caches whenever the datasource changes to ensure we aren't

package/src/components/grid/stores/{clipboard.js → clipboard.ts}

@@ -1,10 +1,41 @@
-import { derived, writable, get } from "svelte/store"
+import { derived, writable, get, Writable, Readable } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
 import { parseCellID, getCellID } from "../lib/utils"
 import { NewRowID } from "../lib/constants"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
-  const clipboard = writable({
+type ClipboardStoreData =
+  | {
+      value: any[][]
+      multiCellCopy: true
+    }
+  | {
+      value: any | null | undefined
+      multiCellCopy: false
+    }
+
+interface ClipboardStore {
+  clipboard: Writable<ClipboardStoreData>
+}
+
+interface ClipboardDerivedStore {
+  copyAllowed: Readable<boolean>
+  pasteAllowed: Readable<boolean>
+}
+
+interface ClipboardActions {
+  clipboard: ClipboardStore["clipboard"] & {
+    actions: {
+      copy: () => void
+      paste: (progressCallback: () => void) => Promise<void>
+    }
+  }
+}
+
+export type Store = ClipboardStore & ClipboardDerivedStore & ClipboardActions
+
+export const createStores = (): ClipboardStore => {
+  const clipboard = writable<ClipboardStoreData>({
     value: null,
     multiCellCopy: false,
   })
@@ -13,7 +44,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ClipboardDerivedStore => {
   const { clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId } =
     context
 
@@ -60,7 +91,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ClipboardActions => {
   const {
     clipboard,
     focusedCellAPI,
@@ -92,11 +123,11 @@ export const createActions = context => {
       const $rowChangeCache = get(rowChangeCache)
 
       // Extract value of each selected cell, accounting for the change cache
-      let value = []
-      for (let row of $selectedCells) {
+      const value = []
+      for (const row of $selectedCells) {
         const rowValues = []
-        for (let cellId of row) {
-          const { rowId, field } = parseCellID(cellId)
+        for (const cellId of row) {
+          const { rowId = "", field = "" } = parseCellID(cellId)
           const row = {
             ...$rowLookupMap[rowId],
             ...$rowChangeCache[rowId],
@@ -113,7 +144,7 @@ export const createActions = context => {
       })
     } else {
       // Single value to copy
-      const value = $focusedCellAPI.getValue()
+      const value = $focusedCellAPI?.getValue()
       clipboard.set({
         value,
         multiCellCopy,
@@ -130,7 +161,7 @@ export const createActions = context => {
   }
 
   // Pastes the previously copied value(s) into the selected cell(s)
-  const paste = async progressCallback => {
+  const paste = async (progressCallback: () => void) => {
     if (!get(pasteAllowed)) {
       return
     }
@@ -166,8 +197,8 @@ export const createActions = context => {
         const { rowId, field } = parseCellID($focusedCellId)
         const $rowLookupMap = get(rowLookupMap)
         const $columnLookupMap = get(columnLookupMap)
-        const rowIdx = $rowLookupMap[rowId].__idx
-        const colIdx = $columnLookupMap[field].__idx
+        const rowIdx = $rowLookupMap[rowId!].__idx
+        const colIdx = $columnLookupMap[field!].__idx || 0
 
         // Get limits of how many rows and columns we're able to paste into
         const $rows = get(rows)
@@ -187,7 +218,7 @@ export const createActions = context => {
         // Paste into target cell range
         if (targetCellId === $focusedCellId) {
           // Single cell edge case
-          get(focusedCellAPI).setValue(value[0][0])
+          get(focusedCellAPI)?.setValue(value[0][0])
         } else {
           // Select the new cells to paste into, then paste
           selectedCells.actions.selectRange($focusedCellId, targetCellId)
@@ -197,17 +228,20 @@ export const createActions = context => {
     } else {
       if (multiCellPaste) {
         // Single to multi - duplicate value to all selected cells
-        const newValue = get(selectedCells).map(row => row.map(() => value))
+        const newValue = get(selectedCells).map(row => row.map(() => value!))
         await pasteIntoSelectedCells(newValue, progressCallback)
       } else {
         // Single to single - just update the cell's value
-        get(focusedCellAPI).setValue(value)
+        get(focusedCellAPI)?.setValue(value ?? null)
       }
     }
   }
 
   // Paste the specified value into the currently selected cells
-  const pasteIntoSelectedCells = async (value, progressCallback) => {
+  const pasteIntoSelectedCells = async (
+    value: string[][],
+    progressCallback: () => any
+  ) => {
     const $selectedCells = get(selectedCells)
 
     // Find the extent at which we can paste
@@ -215,11 +249,13 @@ export const createActions = context => {
     const colExtent = Math.min(value[0].length, $selectedCells[0].length)
 
     // Build change map
-    let changeMap = {}
+    let changeMap: Record<string, Record<string, string>> = {}
     for (let rowIdx = 0; rowIdx < rowExtent; rowIdx++) {
       for (let colIdx = 0; colIdx < colExtent; colIdx++) {
         const cellId = $selectedCells[rowIdx][colIdx]
-        const { rowId, field } = parseCellID(cellId)
+        let { rowId, field } = parseCellID(cellId)
+        rowId = rowId!
+        field = field!
         if (!changeMap[rowId]) {
           changeMap[rowId] = {}
         }

package/src/components/grid/stores/{columns.js → columns.ts}

@@ -1,8 +1,34 @@
-import { derived, get, writable } from "svelte/store"
+import { derived, get, Readable, Writable, writable } from "svelte/store"
 import { DefaultColumnWidth, GutterWidth } from "../lib/constants"
+import { UIColumn } from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
-  const columns = writable([])
+interface ColumnStore {
+  columns: Writable<UIColumn[]>
+}
+
+interface DerivedColumnStore {
+  tableColumns: Readable<UIColumn[]>
+  displayColumn: Readable<UIColumn | undefined>
+  columnLookupMap: Readable<Record<string, UIColumn>>
+  visibleColumns: Readable<UIColumn[]>
+  scrollableColumns: Readable<UIColumn[]>
+  hasNonAutoColumn: Readable<boolean>
+}
+
+interface ColumnActions {
+  columns: ColumnStore["columns"] & {
+    actions: {
+      changeAllColumnWidths: (width: number) => Promise<void>
+      isReadonly: (column: UIColumn) => boolean
+    }
+  }
+}
+
+export type Store = ColumnStore & DerivedColumnStore & ColumnActions
+
+export const createStores = (): ColumnStore => {
+  const columns = writable<UIColumn[]>([])
 
   // Enrich columns with metadata about their display position
   const enrichedColumns = derived(columns, $columns => {
@@ -16,7 +42,7 @@ export const createStores = () => {
       }
       if (col.visible) {
         idx++
-        offset += col.width
+        offset += col.width ?? 0
       }
       return enriched
     })
@@ -30,12 +56,12 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedColumnStore => {
   const { columns } = context
 
   // Derive a lookup map for all columns by name
   const columnLookupMap = derived(columns, $columns => {
-    let map = {}
+    let map: Record<string, UIColumn> = {}
     $columns.forEach(column => {
       map[column.name] = column
     })
@@ -78,11 +104,11 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ColumnActions => {
   const { columns, datasource } = context
 
   // Updates the width of all columns
-  const changeAllColumnWidths = async width => {
+  const changeAllColumnWidths = async (width: number) => {
     const $columns = get(columns)
     $columns.forEach(column => {
       const { related } = column
@@ -101,7 +127,7 @@ export const createActions = context => {
   }
 
   // Checks if a column is readonly
-  const isReadonly = column => {
+  const isReadonly = (column: UIColumn) => {
     if (!column?.schema) {
       return false
     }
@@ -125,21 +151,21 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { definition, columns, displayColumn, enrichedSchema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
-  const processColumns = $enrichedSchema => {
-    if (!$enrichedSchema) {
+  const processColumns = ($enrichedSchema: any) => {
+    const $definition = get(definition)
+    if (!$enrichedSchema || !$definition) {
       columns.set([])
       return
     }
-    const $definition = get(definition)
-    const $columns = get(columns)
+
     const $displayColumn = get(displayColumn)
 
     // Find primary display
-    let primaryDisplay
+    let primaryDisplay: string
     const candidatePD = $definition.primaryDisplay || $displayColumn?.name
     if (candidatePD && $enrichedSchema[candidatePD]) {
       primaryDisplay = candidatePD
@@ -150,18 +176,20 @@ export const initialise = context => {
       Object.keys($enrichedSchema)
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
-          const oldColumn = $columns?.find(col => col.name === field)
-          const column = {
+          const column: UIColumn = {
+            type: fieldSchema.type,
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,
-            width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
+            width: fieldSchema.width || DefaultColumnWidth,
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
-            order: fieldSchema.order ?? oldColumn?.order,
+            order: fieldSchema.order,
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            __left: undefined as any, // TODO
+            __idx: undefined as any, // TODO
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {

package/src/components/grid/stores/{conditions.js → conditions.ts}

@@ -1,15 +1,31 @@
-import { writable, get } from "svelte/store"
+import { writable, get, Writable, Readable } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
-import { FieldType, EmptyFilterOption } from "@budibase/types"
+import {
+  FieldType,
+  EmptyFilterOption,
+  UIRow,
+  UICondition,
+} from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+interface ConditionStore {
+  metadata: Writable<Record<string, any>>
+}
+
+interface ConditionDerivedStore {
+  conditions: Readable<UICondition[]>
+}
+
+export type Store = ConditionStore & ConditionDerivedStore
+
+export const createStores = (): ConditionStore => {
   const metadata = writable({})
   return {
     metadata,
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ConditionDerivedStore => {
   const { columns } = context
 
   // Derive and memoize the cell conditions present in our columns so that we
@@ -33,12 +49,12 @@ export const deriveStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { metadata, conditions, rows } = context
 
   // Recompute all metadata if conditions change
   conditions.subscribe($conditions => {
-    let newMetadata = {}
+    let newMetadata: Record<string, any> = {}
     if ($conditions?.length) {
       for (let row of get(rows)) {
         newMetadata[row._id] = evaluateConditions(row, $conditions)
@@ -54,7 +70,7 @@ export const initialise = context => {
       return
     }
     const $metadata = get(metadata)
-    let metadataUpdates = {}
+    let metadataUpdates: Record<string, any> = {}
     for (let row of $rows) {
       if (!row._rev || $metadata[row._id]?.version !== row._rev) {
         metadataUpdates[row._id] = evaluateConditions(row, $conditions)
@@ -69,15 +85,15 @@ export const initialise = context => {
   })
 }
 
-const TypeCoercionMap = {
+const TypeCoercionMap: Partial<Record<FieldType, (val: string) => any>> = {
   [FieldType.NUMBER]: parseFloat,
-  [FieldType.DATETIME]: val => {
+  [FieldType.DATETIME]: (val: string) => {
     if (val) {
       return new Date(val).toISOString()
     }
     return null
   },
-  [FieldType.BOOLEAN]: val => {
+  [FieldType.BOOLEAN]: (val: string) => {
     if (`${val}`.toLowerCase().trim() === "true") {
       return true
     }
@@ -90,8 +106,12 @@ const TypeCoercionMap = {
 
 // Evaluates an array of cell conditions against a certain row and returns the
 // resultant metadata
-const evaluateConditions = (row, conditions) => {
-  let metadata = {
+const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
+  const metadata: {
+    version?: string
+    row: Record<string, string>
+    cell: Record<string, any>
+  } = {
     version: row._rev,
     row: {},
     cell: {},

package/src/components/grid/stores/{config.js → config.ts}

@@ -1,10 +1,22 @@
 import { derivedMemo } from "../../../utils"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { ViewV2Type } from "@budibase/types"
+import { BaseStoreProps, Store as StoreContext } from "."
 
-export const createStores = context => {
+type ConfigStore = {
+  [key in keyof BaseStoreProps]: Readable<BaseStoreProps[key]>
+}
+
+interface ConfigDerivedStore {
+  config: Readable<BaseStoreProps>
+}
+
+export type Store = ConfigStore & ConfigDerivedStore
+
+export const createStores = (context: StoreContext): ConfigStore => {
   const { props } = context
-  const getProp = prop => derivedMemo(props, $props => $props[prop])
+  const getProp = <T extends keyof BaseStoreProps>(prop: T) =>
+    derivedMemo(props, $props => $props[prop])
 
   // Derive and memoize some props so that we can react to them in isolation
   const datasource = getProp("datasource")
@@ -15,7 +27,6 @@ export const createStores = context => {
   const schemaOverrides = getProp("schemaOverrides")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
-  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -26,11 +37,10 @@ export const createStores = context => {
     schemaOverrides,
     notifySuccess,
     notifyError,
-    rowConditions,
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
   const { props, definition, hasNonAutoColumn } = context
 
   // Derive features