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

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.5.6-alpha.5",
+  "version": "2.5.6-alpha.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.5",
-    "@budibase/shared-core": "2.5.6-alpha.5",
+    "@budibase/bbui": "2.5.6-alpha.7",
+    "@budibase/shared-core": "2.5.6-alpha.7",
+    "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
+    "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "bd66f0f010edb2916b667bba2e408e9a1ce92f6e"
+  "gitHead": "c34a935f5557c60d7bbf3556942828248057dd64"
 }

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

@@ -0,0 +1,153 @@
+<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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,77 @@
+<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

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

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

@@ -0,0 +1,159 @@
+<script>
+  export let focused = false
+  export let selected = false
+  export let highlighted = false
+  export let width = ""
+  export let selectedUser = null
+  export let error = null
+  export let rowIdx
+  export let defaultHeight = false
+  export let center = false
+
+  $: style = getStyle(width, selectedUser)
+
+  const getStyle = (width, selectedUser) => {
+    let style = `flex: 0 0 ${width}px;`
+    if (selectedUser) {
+      style += `--cell-color:${selectedUser.color};`
+    }
+    return style
+  }
+</script>
+
+<div
+  class="cell"
+  class:selected
+  class:highlighted
+  class:focused
+  class:error
+  class:center
+  class:default-height={defaultHeight}
+  class:selected-other={selectedUser != null}
+  on:focus
+  on:mousedown
+  on:mouseup
+  on:click
+  on:contextmenu
+  {style}
+  data-row={rowIdx}
+>
+  {#if error}
+    <div class="label">
+      {error}
+    </div>
+  {/if}
+  <slot />
+  {#if selectedUser && !focused}
+    <div class="label">
+      {selectedUser.label}
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Cells */
+  .cell {
+    height: var(--row-height);
+    border-bottom: var(--cell-border);
+    border-right: var(--cell-border);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    color: var(--spectrum-global-color-gray-800);
+    font-size: var(--cell-font-size);
+    gap: var(--cell-spacing);
+    background: var(--cell-background);
+    position: relative;
+    width: 0;
+    --cell-color: transparent;
+  }
+  .cell.default-height {
+    height: var(--default-row-height);
+  }
+  .cell.center {
+    align-items: center;
+  }
+
+  /* Cell border */
+  .cell.focused:after,
+  .cell.error:after,
+  .cell.selected-other:not(.focused):after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border: 2px solid var(--cell-color);
+    pointer-events: none;
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+
+  /* Cell border for cells with labels */
+  .cell.error:after,
+  .cell.selected-other:not(.focused):after {
+    border-radius: 0 2px 2px 2px;
+  }
+  .cell[data-row="0"].error:after,
+  .cell[data-row="0"].selected-other:not(.focused):after {
+    border-radius: 2px 2px 2px 0;
+  }
+
+  /* Cell z-index */
+  .cell.error,
+  .cell.selected-other:not(.focused) {
+    z-index: 1;
+  }
+  .cell.focused {
+    z-index: 2;
+  }
+  .cell.focused {
+    --cell-color: var(--spectrum-global-color-blue-400);
+  }
+  .cell.error {
+    --cell-color: var(--spectrum-global-color-red-500);
+  }
+  .cell:not(.focused) {
+    user-select: none;
+  }
+  .cell:hover {
+    cursor: default;
+  }
+  .cell.highlighted:not(.focused) {
+    --cell-background: var(--cell-background-hover);
+  }
+  .cell.selected:not(.focused) {
+    --cell-background: var(--spectrum-global-color-blue-100);
+  }
+
+  /* Label for additional text */
+  .label {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    padding: 1px 4px 3px 4px;
+    margin: 0 0 -2px 0;
+    background: var(--user-color);
+    border-radius: 2px;
+    display: block;
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    user-select: none;
+  }
+  .cell[data-row="0"] .label {
+    bottom: auto;
+    top: 100%;
+    border-radius: 0 2px 2px 2px;
+    padding: 2px 4px 2px 4px;
+    margin: -2px 0 0 0;
+  }
+  .error .label {
+    background: var(--spectrum-global-color-red-500);
+  }
+</style>