@budibase/bbui 1.3.0 → 1.3.3

package/src/Table/AttachmentRenderer.svelte

@@ -0,0 +1,67 @@
+<script>
+  import Link from "../Link/Link.svelte"
+
+  export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
+
+  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const isImage = extension => {
+    return imageExtensions.includes(extension?.toLowerCase())
+  }
+</script>
+
+{#each attachments as attachment}
+  {#if isImage(attachment.extension)}
+    <Link
+      quiet
+      target="_blank"
+      download={attachment.name}
+      href={attachment.url}
+    >
+      <div class="center" title={attachment.name}>
+        <img src={attachment.url} alt={attachment.extension} />
+      </div>
+    </Link>
+  {:else}
+    <div class="file" title={attachment.name}>
+      <Link
+        quiet
+        target="_blank"
+        download={attachment.name}
+        href={attachment.url}
+      >
+        {attachment.extension}
+      </Link>
+    </div>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  img {
+    height: 32px;
+    max-width: 64px;
+  }
+  .center,
+  .file {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .file {
+    height: 32px;
+    padding: 0 8px;
+    color: var(--spectrum-global-color-gray-800);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 11px;
+  }
+</style>

package/src/Table/BoldRenderer.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let value
+</script>
+
+<div class="bold">{value}</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>

package/src/Table/BooleanRenderer.svelte

@@ -0,0 +1,42 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+
+  export let value
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+>
+  <input
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id="checkbox-1"
+    disabled
+    checked={!!value}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    min-height: 0;
+  }
+  .spectrum-Checkbox-box {
+    margin: 0;
+  }
+</style>

package/src/Table/CellRenderer.svelte

@@ -0,0 +1,69 @@
+<script>
+  import StringRenderer from "./StringRenderer.svelte"
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+  import ArrayRenderer from "./ArrayRenderer.svelte"
+  import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"
+
+  export let row
+  export let schema
+  export let value
+  export let customRenderers = []
+
+  let renderer
+  const typeMap = {
+    boolean: BooleanRenderer,
+    datetime: DateTimeRenderer,
+    link: RelationshipRenderer,
+    attachment: AttachmentRenderer,
+    string: StringRenderer,
+    options: StringRenderer,
+    number: StringRenderer,
+    longform: StringRenderer,
+    array: ArrayRenderer,
+    internal: InternalRenderer,
+  }
+  $: type = getType(schema)
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getType = schema => {
+    // Use a string renderer for dates if we use a custom template
+    if (schema?.type === "datetime" && schema?.template) {
+      return "string"
+    }
+    return schema?.type || "string"
+  }
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
+</script>
+
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
+  <div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
+    <svelte:component
+      this={renderer}
+      {row}
+      {schema}
+      value={cellValue}
+      on:clickrelationship
+    >
+      <slot />
+    </svelte:component>
+  </div>
+{/if}
+
+<style>
+  div {
+    display: contents;
+  }
+</style>

package/src/Table/CodeRenderer.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value
+</script>
+
+<code>{value}</code>
+
+<style>
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>

package/src/Table/DateTimeRenderer.svelte

@@ -0,0 +1,29 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+  export let schema
+
+  // 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}`)
+  $: isTimeOnly = !isNaN(time) || schema?.timeOnly
+  $: isDateOnly = schema?.dateOnly
+  $: format = isTimeOnly
+    ? "HH:mm:ss"
+    : isDateOnly
+    ? "MMMM D YYYY"
+    : "MMMM D YYYY, HH:mm"
+</script>
+
+<div>
+  {dayjs(isTimeOnly ? time : value).format(format)}
+</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/src/Table/InternalRenderer.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { copyToClipboard } from "../helpers"
+  import { notifications } from "../Stores/notifications"
+
+  export let value
+
+  const onClick = async e => {
+    e.stopPropagation()
+    try {
+      await copyToClipboard(value)
+      notifications.success("Copied to clipboard")
+    } catch (error) {
+      notifications.error(
+        "Failed to copy to clipboard. Check the dev console for the value."
+      )
+      console.warn("Failed to copy the value", value)
+    }
+  }
+</script>
+
+<div on:click|stopPropagation={onClick}>
+  <Icon size="S" name="Copy" />
+</div>

package/src/Table/RelationshipRenderer.svelte

@@ -0,0 +1,40 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let row
+  export let value
+  export let schema
+
+  const dispatch = createEventDispatcher()
+  const displayLimit = 5
+
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
+
+  const onClick = e => {
+    e.stopPropagation()
+    dispatch("clickrelationship", {
+      tableId: row.tableId,
+      rowId: row._id,
+      fieldName: schema?.name,
+    })
+  }
+</script>
+
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
+      {relationship.primaryDisplay}
+    </span>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  span:hover {
+    cursor: pointer;
+  }
+</style>

package/src/Table/SelectEditRenderer.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Checkbox from "../Form/Checkbox.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let selected
+  export let onEdit
+  export let allowSelectRows = false
+  export let allowEditRows = false
+</script>
+
+<div>
+  {#if allowSelectRows}
+    <Checkbox value={selected} />
+  {/if}
+  {#if allowEditRows}
+    <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+  {/if}
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

package/src/Table/StringRenderer.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value
+</script>
+
+<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>