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

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

@@ -0,0 +1,237 @@
+<script>
+  import { getContext } from "svelte"
+  import GridCell from "./GridCell.svelte"
+  import { Icon, Popover, Menu, MenuItem } from "@budibase/bbui"
+  import { getColumnIcon } from "../lib/utils"
+
+  export let column
+  export let idx
+  export let orderable = true
+
+  const {
+    reorder,
+    isReordering,
+    isResizing,
+    rand,
+    sort,
+    renderedColumns,
+    dispatch,
+    config,
+    ui,
+    columns,
+  } = getContext("grid")
+  const bannedDisplayColumnTypes = [
+    "link",
+    "array",
+    "attachment",
+    "boolean",
+    "formula",
+    "json",
+  ]
+
+  let anchor
+  let open = false
+  let timeout
+
+  $: sortedBy = column.name === $sort.column
+  $: canMoveLeft = orderable && idx > 0
+  $: canMoveRight = orderable && idx < $renderedColumns.length - 1
+
+  const editColumn = () => {
+    dispatch("edit-column", column.schema)
+    open = false
+  }
+
+  const onMouseDown = e => {
+    if (e.button === 0 && orderable) {
+      timeout = setTimeout(() => {
+        reorder.actions.startReordering(column.name, e)
+      }, 200)
+    }
+  }
+
+  const onMouseUp = e => {
+    if (e.button === 0 && orderable) {
+      clearTimeout(timeout)
+    }
+  }
+
+  const onContextMenu = e => {
+    e.preventDefault()
+    ui.actions.blur()
+    open = !open
+  }
+
+  const sortAscending = () => {
+    sort.set({
+      column: column.name,
+      order: "ascending",
+    })
+    open = false
+  }
+
+  const sortDescending = () => {
+    sort.set({
+      column: column.name,
+      order: "descending",
+    })
+    open = false
+  }
+
+  const moveLeft = () => {
+    reorder.actions.moveColumnLeft(column.name)
+    open = false
+  }
+
+  const moveRight = () => {
+    reorder.actions.moveColumnRight(column.name)
+    open = false
+  }
+
+  const makeDisplayColumn = () => {
+    columns.actions.changePrimaryDisplay(column.name)
+    open = false
+  }
+</script>
+
+<div
+  class="header-cell"
+  class:open
+  style="flex: 0 0 {column.width}px;"
+  bind:this={anchor}
+  class:disabled={$isReordering || $isResizing}
+  class:sorted={sortedBy}
+>
+  <GridCell
+    on:mousedown={onMouseDown}
+    on:mouseup={onMouseUp}
+    on:contextmenu={onContextMenu}
+    width={column.width}
+    left={column.left}
+    defaultHeight
+    center
+  >
+    <Icon
+      size="S"
+      name={getColumnIcon(column)}
+      color={`var(--spectrum-global-color-gray-600)`}
+    />
+    <div class="name">
+      {column.label}
+    </div>
+    {#if sortedBy}
+      <div class="sort-indicator">
+        <Icon
+          size="S"
+          name={$sort.order === "descending" ? "SortOrderDown" : "SortOrderUp"}
+          color="var(--spectrum-global-color-gray-600)"
+        />
+      </div>
+    {/if}
+    <div
+      class="more"
+      on:mousedown|stopPropagation
+      on:click={() => (open = true)}
+    >
+      <Icon
+        size="S"
+        name="MoreVertical"
+        color="var(--spectrum-global-color-gray-600)"
+      />
+    </div>
+  </GridCell>
+</div>
+
+<Popover
+  bind:open
+  {anchor}
+  align="right"
+  offset={0}
+  popoverTarget={document.getElementById(`grid-${rand}`)}
+  animate={false}
+>
+  <Menu>
+    <MenuItem
+      icon="Edit"
+      on:click={editColumn}
+      disabled={!$config.allowEditColumns || column.schema.disabled}
+    >
+      Edit column
+    </MenuItem>
+    <MenuItem
+      icon="Label"
+      on:click={makeDisplayColumn}
+      disabled={idx === "sticky" ||
+        !$config.allowEditColumns ||
+        bannedDisplayColumnTypes.includes(column.schema.type)}
+    >
+      Use as display column
+    </MenuItem>
+    <MenuItem
+      icon="SortOrderUp"
+      on:click={sortAscending}
+      disabled={column.name === $sort.column && $sort.order === "ascending"}
+    >
+      Sort A-Z
+    </MenuItem>
+    <MenuItem
+      icon="SortOrderDown"
+      on:click={sortDescending}
+      disabled={column.name === $sort.column && $sort.order === "descending"}
+    >
+      Sort Z-A
+    </MenuItem>
+    <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
+      Move left
+    </MenuItem>
+    <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
+      Move right
+    </MenuItem>
+  </Menu>
+</Popover>
+
+<style>
+  .header-cell {
+    display: flex;
+  }
+  .header-cell.disabled {
+    pointer-events: none;
+  }
+  .header-cell :global(.cell) {
+    padding: 0 var(--cell-padding);
+    gap: calc(2 * var(--cell-spacing));
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .header-cell.sorted :global(.cell) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+
+  .name {
+    flex: 1 1 auto;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .more {
+    display: none;
+    padding: 4px;
+    margin: 0 -4px;
+  }
+  .header-cell.open .more,
+  .header-cell:hover .more {
+    display: block;
+  }
+  .more:hover {
+    cursor: pointer;
+  }
+  .more:hover :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-gray-800) !important;
+  }
+
+  .header-cell.open .sort-indicator,
+  .header-cell:hover .sort-indicator {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+<script>
+  import LongFormCell from "./LongFormCell.svelte"
+
+  export let onChange
+  export let value
+  export let api
+
+  $: stringified = getStringifiedValue(value)
+
+  const getStringifiedValue = value => {
+    if (!value) {
+      return value
+    }
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch (error) {
+      return null
+    }
+  }
+
+  const parse = value => {
+    const trimmed = value?.trim()
+    if (!trimmed) {
+      onChange(null)
+      return
+    }
+    try {
+      const parsed = JSON.parse(trimmed)
+      onChange(parsed)
+    } catch (error) {
+      // Swallow
+    }
+  }
+</script>
+
+<LongFormCell {...$$props} bind:api value={stringified} onChange={parse} />

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

@@ -0,0 +1,117 @@
+<script>
+  import { onMount, tick } from "svelte"
+
+  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
+
+  let textarea
+  let isOpen = false
+
+  $: editable = focused && !readonly
+  $: {
+    if (!focused) {
+      isOpen = false
+    }
+  }
+
+  const handleChange = e => {
+    onChange(e.target.value)
+  }
+
+  const onKeyDown = () => {
+    return isOpen
+  }
+
+  const open = async () => {
+    isOpen = true
+    await tick()
+    textarea.focus()
+    textarea.setSelectionRange(0, 0)
+  }
+
+  const close = () => {
+    textarea?.blur()
+    isOpen = false
+  }
+
+  onMount(() => {
+    api = {
+      focus: () => open(),
+      blur: () => close(),
+      onKeyDown,
+    }
+  })
+</script>
+
+{#if isOpen}
+  <textarea
+    class:invertX
+    class:invertY
+    bind:this={textarea}
+    value={value || ""}
+    on:change={handleChange}
+    on:wheel|stopPropagation
+    spellcheck="false"
+  />
+{:else}
+  <div class="long-form-cell" on:click={editable ? open : null} class:editable>
+    <div class="value">
+      {value || ""}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .long-form-cell {
+    flex: 1 1 auto;
+    padding: var(--cell-padding);
+    align-self: stretch;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+  }
+  .long-form-cell.editable:hover {
+    cursor: text;
+  }
+  .value {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--content-lines);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 20px;
+  }
+  textarea {
+    padding: var(--cell-padding);
+    margin: 0;
+    border: 2px solid var(--cell-color);
+    background: var(--cell-background);
+    font-size: var(--cell-font-size);
+    font-family: var(--font-sans);
+    color: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% + var(--max-cell-render-width-overflow));
+    height: var(--max-cell-render-height);
+    z-index: 1;
+    border-radius: 2px;
+    resize: none;
+    line-height: 20px;
+  }
+  textarea.invertX {
+    left: auto;
+    right: 0;
+  }
+  textarea.invertY {
+    transform: translateY(-100%);
+    top: calc(100% + 1px);
+  }
+  textarea:focus {
+    outline: none;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+<script>
+  import OptionsCell from "./OptionsCell.svelte"
+
+  export let api
+</script>
+
+<OptionsCell bind:api {...$$props} multi />

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

@@ -0,0 +1,7 @@
+<script>
+  import TextCell from "./TextCell.svelte"
+
+  export let api
+</script>
+
+<TextCell {...$$props} bind:api type="number" />

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

@@ -0,0 +1,239 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { getColor } from "../lib/utils"
+  import { onMount } from "svelte"
+
+  export let value
+  export let schema
+  export let onChange
+  export let focused = false
+  export let multi = false
+  export let readonly = false
+  export let api
+  export let invertX = false
+  export let invertY = false
+
+  let isOpen = false
+  let focusedOptionIdx = null
+
+  $: options = schema?.constraints?.inclusion || []
+  $: editable = focused && !readonly
+  $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
+  $: {
+    // Close when deselected
+    if (!focused) {
+      close()
+    }
+  }
+
+  const open = () => {
+    isOpen = true
+    focusedOptionIdx = 0
+  }
+
+  const close = () => {
+    isOpen = false
+  }
+
+  const getOptionColor = value => {
+    const index = value ? options.indexOf(value) : null
+    return getColor(index)
+  }
+
+  const toggleOption = option => {
+    if (!multi) {
+      onChange(option === value ? null : option)
+      close()
+    } else {
+      const sanitizedValues = values.filter(x => options.includes(x))
+      if (sanitizedValues.includes(option)) {
+        onChange(sanitizedValues.filter(x => x !== option))
+      } else {
+        onChange([...sanitizedValues, option])
+      }
+    }
+  }
+
+  const onKeyDown = e => {
+    if (!isOpen) {
+      return false
+    }
+    e.preventDefault()
+    if (e.key === "ArrowDown") {
+      focusedOptionIdx = Math.min(focusedOptionIdx + 1, options.length - 1)
+    } else if (e.key === "ArrowUp") {
+      focusedOptionIdx = Math.max(focusedOptionIdx - 1, 0)
+    } else if (e.key === "Enter") {
+      toggleOption(options[focusedOptionIdx])
+    }
+    return true
+  }
+
+  onMount(() => {
+    api = {
+      focus: open,
+      blur: close,
+      onKeyDown,
+    }
+  })
+</script>
+
+<div
+  class="container"
+  class:multi
+  class:editable
+  class:open
+  on:click|self={editable ? open : null}
+>
+  <div class="values" on:click={editable ? open : null}>
+    {#each values as val}
+      {@const color = getOptionColor(val)}
+      {#if color}
+        <div class="badge text" style="--color: {color}">
+          <span>
+            {val}
+          </span>
+        </div>
+      {:else}
+        <div class="text">
+          {val || ""}
+        </div>
+      {/if}
+    {/each}
+  </div>
+  {#if editable}
+    <div class="arrow" on:click={open}>
+      <Icon name="ChevronDown" />
+    </div>
+  {/if}
+  {#if isOpen}
+    <div
+      class="options"
+      class:invertX
+      class:invertY
+      on:wheel={e => e.stopPropagation()}
+    >
+      {#each options as option, idx}
+        {@const color = getOptionColor(option)}
+        <div
+          class="option"
+          on:click={() => toggleOption(option)}
+          class:focused={focusedOptionIdx === idx}
+          on:mouseenter={() => (focusedOptionIdx = idx)}
+        >
+          <div class="badge text" style="--color: {color}">
+            {option}
+          </div>
+          {#if values.includes(option)}
+            <Icon
+              name="Checkmark"
+              color="var(--spectrum-global-color-blue-400)"
+            />
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    align-self: stretch;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+  .container.editable:hover {
+    cursor: pointer;
+  }
+  .values {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    grid-column-gap: var(--cell-spacing);
+    grid-row-gap: var(--cell-padding);
+    overflow: hidden;
+    padding: var(--cell-padding);
+    flex-wrap: wrap;
+  }
+  .text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .multi .text {
+    flex: 0 0 auto;
+  }
+  .badge {
+    padding: 0 var(--cell-padding);
+    background: var(--color);
+    border-radius: var(--cell-padding);
+    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: var(--cell-spacing);
+    height: 20px;
+    max-width: 100%;
+  }
+  .badge span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .arrow {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    bottom: 2px;
+    padding: 0 6px 0 16px;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--cell-background) 40%
+    );
+  }
+  .options {
+    min-width: calc(100% + 2px);
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    max-height: var(--max-cell-render-height);
+    overflow-y: auto;
+    border: var(--cell-border);
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+  }
+  .options.invertX {
+    left: auto;
+    right: 0;
+  }
+  .options.invertY {
+    transform: translateY(-100%);
+    top: 0;
+  }
+  .option {
+    flex: 0 0 var(--default-row-height);
+    padding: 0 var(--cell-padding);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--cell-spacing);
+    background-color: var(--background);
+  }
+  .option:hover,
+  .option.focused {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+</style>