@budibase/bbui 1.58.13 → 2.0.0

package/src/Stores/notifications.js

@@ -1,47 +1,84 @@
-import { writable, derived } from "svelte/store";
-
-const NOTIFICATION_TIMEOUT = 3000;
-
-const createNotificationStore = () => {
-  const _notifications = writable([]);
-
-  const send = (message, type = "default") => {
-    _notifications.update((state) => {
-      return [...state, { id: id(), type, message }];
-    });
-  };
-
-  let timers = [];
-
-  const notifications = derived(_notifications, ($_notifications, set) => {
-    set($_notifications);
-    if ($_notifications.length > 0) {
-      const timeout = setTimeout(() => {
-        _notifications.update((state) => {
-          state.shift();
-          return state;
-        });
-        set($_notifications);
-      }, NOTIFICATION_TIMEOUT);
-      return () => {
-        clearTimeout(timeout);
-      };
+import { writable } from "svelte/store"
+
+const NOTIFICATION_TIMEOUT = 3000
+
+export const createNotificationStore = () => {
+  const timeoutIds = new Set()
+  const _notifications = writable([], () => {
+    return () => {
+      // clear all the timers
+      timeoutIds.forEach(timeoutId => {
+        clearTimeout(timeoutId)
+      })
+      _notifications.set([])
+    }
+  })
+  let block = false
+
+  const blockNotifications = (timeout = 1000) => {
+    block = true
+    setTimeout(() => (block = false), timeout)
+  }
+
+  const send = (
+    message,
+    {
+      type = "default",
+      icon = "",
+      autoDismiss = true,
+      action = null,
+      wide = false,
     }
-  });
-  const { subscribe } = notifications;
+  ) => {
+    if (block) {
+      return
+    }
+    let _id = id()
+    _notifications.update(state => {
+      return [
+        ...state,
+        {
+          id: _id,
+          type,
+          message,
+          icon,
+          dismissable: !autoDismiss,
+          action,
+          wide,
+        },
+      ]
+    })
+    if (autoDismiss) {
+      const timeoutId = setTimeout(() => {
+        dismissNotification(_id)
+      }, NOTIFICATION_TIMEOUT)
+      timeoutIds.add(timeoutId)
+    }
+  }
+
+  const dismissNotification = id => {
+    _notifications.update(state => {
+      return state.filter(n => n.id !== id)
+    })
+  }
+
+  const { subscribe } = _notifications
 
   return {
     subscribe,
     send,
-    danger: (msg) => send(msg, "danger"),
-    warning: (msg) => send(msg, "warning"),
-    info: (msg) => send(msg, "info"),
-    success: (msg) => send(msg, "success"),
-  };
-};
+    info: msg => send(msg, { type: "info", icon: "Info" }),
+    error: msg =>
+      send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
+    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
+    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
+    blockNotifications,
+    dismiss: dismissNotification,
+  }
+}
 
 function id() {
-  return "_" + Math.random().toString(36).substr(2, 9);
+  return "_" + Math.random().toString(36).slice(2, 9)
 }
 
-export const notifications = createNotificationStore();
+export const notifications = createNotificationStore()

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 = Array.isArray(value) ? 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,73 @@
+<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}
+      on:click={e => {
+        e.stopPropagation()
+      }}
+    >
+      <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}
+        on:click={e => {
+          e.stopPropagation()
+        }}
+      >
+        {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>