@budibase/bbui 1.0.49 → 1.0.50-alpha.3

package/src/Notification/Notification.svelte

@@ -1,7 +1,12 @@
 <script>
+  import { createEventDispatcher } from "svelte"
+
   export let type = "info"
   export let icon = "Info"
   export let message = ""
+  export let dismissable = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <div class="spectrum-Toast spectrum-Toast--{type}">
@@ -17,4 +22,28 @@
   <div class="spectrum-Toast-body">
     <div class="spectrum-Toast-content">{message || ""}</div>
   </div>
+  {#if dismissable}
+    <div class="spectrum-Toast-buttons">
+      <button
+        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM"
+        on:click={() => dispatch("dismiss")}
+      >
+        <div class="spectrum-ClearButton-fill">
+          <svg
+            class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Cross100" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  {/if}
 </div>
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+  }
+</style>

package/src/Notification/NotificationDisplay.svelte

@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/toast/dist/index-vars.css"
   import Portal from "svelte-portal"
-  import { flip } from "svelte/animate"
   import { notifications } from "../Stores/notifications"
   import Notification from "./Notification.svelte"
   import { fly } from "svelte/transition"
@@ -9,9 +8,15 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id } (id)}
-      <div animate:flip transition:fly={{ y: -30 }}>
-        <Notification {type} {icon} {message} />
+    {#each $notifications as { type, icon, message, id, dismissable } (id)}
+      <div transition:fly={{ y: -30 }}>
+        <Notification
+          {type}
+          {icon}
+          {message}
+          {dismissable}
+          on:dismiss={() => notifications.dismiss(id)}
+        />
       </div>
     {/each}
   </div>

package/src/Stores/notifications.js

@@ -20,20 +20,29 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "") => {
+  const send = (message, type = "default", icon = "", autoDismiss = true) => {
     if (block) {
       return
     }
     let _id = id()
     _notifications.update(state => {
-      return [...state, { id: _id, type, message, icon }]
+      return [
+        ...state,
+        { id: _id, type, message, icon, dismissable: !autoDismiss },
+      ]
+    })
+    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 timeoutId = setTimeout(() => {
-      _notifications.update(state => {
-        return state.filter(({ id }) => id !== _id)
-      })
-    }, NOTIFICATION_TIMEOUT)
-    timeoutIds.add(timeoutId)
   }
 
   const { subscribe } = _notifications
@@ -42,10 +51,11 @@ export const createNotificationStore = () => {
     subscribe,
     send,
     info: msg => send(msg, "info", "Info"),
-    error: msg => send(msg, "error", "Alert"),
+    error: msg => send(msg, "error", "Alert", false),
     warning: msg => send(msg, "warning", "Alert"),
     success: msg => send(msg, "success", "CheckmarkCircle"),
     blockNotifications,
+    dismiss: dismissNotification,
   }
 }
 

package/src/Table/InternalRenderer.svelte

@@ -8,10 +8,35 @@
     copyToClipboard(value)
   }
 
-  function copyToClipboard(value) {
-    navigator.clipboard.writeText(value).then(() => {
-      notifications.success("Copied")
+  const copyToClipboard = value => {
+    return new Promise(res => {
+      if (navigator.clipboard && window.isSecureContext) {
+        // Try using the clipboard API first
+        navigator.clipboard.writeText(value).then(res)
+      } else {
+        // Fall back to the textarea hack
+        let textArea = document.createElement("textarea")
+        textArea.value = value
+        textArea.style.position = "fixed"
+        textArea.style.left = "-9999px"
+        textArea.style.top = "-9999px"
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        document.execCommand("copy")
+        textArea.remove()
+        res()
+      }
     })
+      .then(() => {
+        notifications.success("Copied to clipboard")
+      })
+      .catch(() => {
+        notifications.error(
+          "Failed to copy to clipboard. Check the dev console for the value."
+        )
+        console.warn("Failed to copy the value", value)
+      })
   }
 </script>
 

package/src/Tooltip/TooltipWrapper.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Tooltip from "./Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let tooltip = ""
+  export let size = "M"
+
+  let showTooltip = false
+</script>
+
+<div class:container={!!tooltip}>
+  <slot />
+  {#if tooltip}
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
+</style>

package/src/index.js

@@ -60,6 +60,9 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
+export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
+export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"