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

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

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

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

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

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

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

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

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

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