@budibase/bbui 1.0.0 → 1.0.1

package/src/Table/ArrayRenderer.svelte

@@ -0,0 +1,17 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import Badge from "../Badge/Badge.svelte"
+  export let value
+
+  const displayLimit = 5
+
+  $: badges = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - badges.length
+</script>
+
+{#each badges as badge}
+  <Badge size="S" grey>{badge}</Badge>
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}

package/src/Table/AttachmentRenderer.svelte

@@ -0,0 +1,55 @@
+<script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  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" href={attachment.url}>
+      <img src={attachment.url} alt={attachment.extension} />
+    </Link>
+  {:else}
+    <Tooltip text={attachment.name} direction="right">
+      <div class="file">
+        <Link quiet target="_blank" href={attachment.url}
+          >{attachment.extension}</Link
+        >
+      </div>
+    </Tooltip>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  img {
+    height: 32px;
+    max-width: 64px;
+  }
+  .file {
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 8px;
+    color: var(--spectrum-global-color-gray-800);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 11px;
+  }
+</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,37 @@
+<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"
+
+  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 = schema?.type ?? "string"
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+</script>
+
+{#if renderer && (customRenderer || (value != null && value !== ""))}
+  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+    <slot />
+  </svelte:component>
+{/if}

package/src/Table/DateTimeRenderer.svelte

@@ -0,0 +1,13 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+</script>
+
+<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
+
+<style>
+  div {
+    width: 200px;
+  }
+</style>

package/src/Table/InternalRenderer.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { notifications } from "../Stores/notifications"
+  export let value
+
+  const onClick = e => {
+    e.stopPropagation()
+    copyToClipboard(value)
+  }
+
+  function copyToClipboard(value) {
+    navigator.clipboard.writeText(value).then(() => {
+      notifications.success("Copied")
+    })
+  }
+</script>
+
+<div on:click|stopPropagation={onClick}>
+  <Icon size="S" name="Copy" />
+</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 150px;
+  }
+</style>

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,16 @@
+<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>
+
+{#if allowSelectRows}
+  <Checkbox value={selected} />
+{/if}
+{#if allowEditRows}
+  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+{/if}

package/src/Table/StringRenderer.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let value
+</script>
+
+<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 150px;
+  }
+</style>