@budibase/bbui 1.0.212-alpha.12 → 1.0.212-alpha.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.212-alpha.12",
+  "version": "1.0.212-alpha.13",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.212-alpha.12",
+    "@budibase/string-templates": "^1.0.212-alpha.13",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "2a15345a18bfeb1764cc1cd15a67fa3f881f8d9d"
+  "gitHead": "1b460f45a10f98573cb9fe7ca5269550155c5bed"
 }

package/src/ActionButton/ActionButton.svelte

@@ -13,6 +13,7 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let noPadding = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -41,6 +42,7 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
+  class:noPadding
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
@@ -80,4 +82,8 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
 </style>

package/src/Notification/Notification.svelte

@@ -1,15 +1,20 @@
 <script>
+  import { ActionButton } from "../"
+
   import { createEventDispatcher } from "svelte"
 
   export let type = "info"
   export let icon = "Info"
   export let message = ""
   export let dismissable = false
+  export let actionMessage = null
+  export let action = null
+  export let wide = false
 
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="spectrum-Toast spectrum-Toast--{type}">
+<div class="spectrum-Toast spectrum-Toast--{type}" class:wide>
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
@@ -19,8 +24,13 @@
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
-  <div class="spectrum-Toast-body">
+  <div class="spectrum-Toast-body" class:actionBody={!!action}>
     <div class="spectrum-Toast-content">{message || ""}</div>
+    {#if action}
+      <ActionButton quiet emphasized on:click={action}>
+        <div style="color: white; font-weight: 600;">{actionMessage}</div>
+      </ActionButton>
+    {/if}
   </div>
   {#if dismissable}
     <div class="spectrum-Toast-buttons">
@@ -46,4 +56,15 @@
   .spectrum-Toast {
     pointer-events: all;
   }
+
+  .wide {
+    width: 100%;
+  }
+
+  .actionBody {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
 </style>

package/src/Notification/NotificationDisplay.svelte

@@ -8,13 +8,15 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id, dismissable } (id)}
+    {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
       <div transition:fly={{ y: -30 }}>
         <Notification
           {type}
           {icon}
           {message}
           {dismissable}
+          {action}
+          {wide}
           on:dismiss={() => notifications.dismiss(id)}
         />
       </div>

package/src/Stores/notifications.js

@@ -20,7 +20,16 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "", autoDismiss = true) => {
+  const send = (
+    message,
+    {
+      type = "default",
+      icon = "",
+      autoDismiss = true,
+      action = null,
+      wide = false,
+    }
+  ) => {
     if (block) {
       return
     }
@@ -28,7 +37,15 @@ export const createNotificationStore = () => {
     _notifications.update(state => {
       return [
         ...state,
-        { id: _id, type, message, icon, dismissable: !autoDismiss },
+        {
+          id: _id,
+          type,
+          message,
+          icon,
+          dismissable: !autoDismiss,
+          action,
+          wide,
+        },
       ]
     })
     if (autoDismiss) {
@@ -50,10 +67,11 @@ export const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    info: msg => send(msg, "info", "Info"),
-    error: msg => send(msg, "error", "Alert", false),
-    warning: msg => send(msg, "warning", "Alert"),
-    success: msg => send(msg, "success", "CheckmarkCircle"),
+    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,
   }

package/src/Table/Table.svelte

@@ -37,6 +37,7 @@
   export let autoSortColumns = true
   export let compact = false
   export let customPlaceholder = false
+  export let placeholderText = "No rows found"
 
   const dispatch = createEventDispatcher()
 
@@ -405,7 +406,7 @@
               >
                 <use xlink:href="#spectrum-icon-18-Table" />
               </svg>
-              <div>No rows found</div>
+              <div>{placeholderText}</div>
             </div>
           {/if}
         </div>