@budibase/bbui 1.0.25 → 1.0.27-alpha.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.25",
+  "version": "1.0.27-alpha.10",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -82,5 +82,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "382b86689a90ef561bd06d9020ee3d1400052d19"
+  "gitHead": "37b3e81a0d6f99566d3b753f79b91d5b05185106"
 }

package/src/ActionButton/ActionButton.svelte

@@ -80,4 +80,8 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+
+  .spectrum-ActionButton-label {
+    padding-bottom: 2px;
+  }
 </style>

package/src/Banner/Banner.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  export let type = "info"
+  export let icon = "Info"
+  export let size = "S"
+  export let extraButtonText
+  export let extraButtonAction
+
+  let show = true
+
+  function clear() {
+    show = false
+    dispatch("change")
+  }
+</script>
+
+{#if show}
+  <div class="spectrum-Toast spectrum-Toast--{type}">
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size} spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+    <div class="spectrum-Toast-body">
+      <div class="spectrum-Toast-content">
+        <slot />
+      </div>
+      {#if extraButtonText && extraButtonAction}
+        <button
+          class="spectrum-Button spectrum-Button--sizeM spectrum-Button--overBackground spectrum-Button--quiet"
+          on:click={extraButtonAction}
+        >
+          <span class="spectrum-Button-label">{extraButtonText}</span>
+        </button>
+      {/if}
+    </div>
+    <div class="spectrum-Toast-buttons">
+      <button
+        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
+        on:click={clear}
+      >
+        <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>
+  </div>
+{/if}

package/src/Drawer/Drawer.svelte

@@ -21,16 +21,8 @@
     }
     visible = false
   }
-
-  function handleKey(e) {
-    if (visible && e.key === "Escape") {
-      hide()
-    }
-  }
 </script>
 
-<svelte:window on:keydown={handleKey} />
-
 {#if visible}
   <Portal>
     <section class:fillWidth class="drawer" transition:slide>

package/src/Form/Core/Dropzone.svelte

@@ -6,6 +6,8 @@
   import { generateID } from "../../utils/helpers"
   import Icon from "../../Icon/Icon.svelte"
   import Link from "../../Link/Link.svelte"
+  import Tag from "../../Tags/Tag.svelte"
+  import Tags from "../../Tags/Tags.svelte"
 
   const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
@@ -18,6 +20,8 @@
   export let handleFileTooLarge = null
   export let gallery = true
   export let error = null
+  export let fileTags = []
+  export let maximum = null
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -184,103 +188,118 @@
       {/each}
     {/if}
   {/if}
-  <div
-    class="spectrum-Dropzone"
-    class:is-invalid={!!error}
-    class:disabled
-    role="region"
-    tabindex="0"
-    on:dragover={handleDragOver}
-    on:dragleave={handleDragLeave}
-    on:dragenter={handleDragOver}
-    on:drop={handleDrop}
-    class:is-dragged={fileDragged}
-  >
-    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
-      <input
-        id={fieldId}
-        {disabled}
-        type="file"
-        multiple
-        on:change={handleFile}
-      />
-      <svg
-        class="spectrum-IllustratedMessage-illustration"
-        width="125"
-        height="60"
-        viewBox="0 0 199 97.7"
-      >
-        <defs>
-          <style>
-            .cls-1,
-            .cls-2 {
-              fill: none;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-            }
-            .cls-1 {
-              stroke-width: 3px;
-            }
-            .cls-2 {
-              stroke-width: 2px;
-            }
-          </style>
-        </defs>
-        <path
-          class="cls-1"
-          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+  {#if !maximum || (maximum && value?.length < maximum)}
+    <div
+      class="spectrum-Dropzone"
+      class:is-invalid={!!error}
+      class:disabled
+      role="region"
+      tabindex="0"
+      on:dragover={handleDragOver}
+      on:dragleave={handleDragLeave}
+      on:dragenter={handleDragOver}
+      on:drop={handleDrop}
+      class:is-dragged={fileDragged}
+    >
+      <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+        <input
+          id={fieldId}
+          {disabled}
+          type="file"
+          multiple
+          on:change={handleFile}
         />
-        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
-        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
-        <path
-          class="cls-1"
-          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
-        />
-        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
-        <path
-          class="cls-2"
-          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
-        />
-        <path
-          class="cls-2"
-          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
-        />
-        <path
-          class="cls-2"
-          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
-        />
-        <path
-          class="cls-1"
-          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
-        />
-        <rect
-          class="cls-1"
-          x="1.5"
-          y="34.5"
-          width="58"
-          height="39"
-          rx="2"
-          ry="2"
-        />
-      </svg>
-      <h2
-        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
-      >
-        Drag and drop your file
-      </h2>
-      {#if !disabled}
-        <p
-          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+        <svg
+          class="spectrum-IllustratedMessage-illustration"
+          width="125"
+          height="60"
+          viewBox="0 0 199 97.7"
+        >
+          <defs>
+            <style>
+              .cls-1,
+              .cls-2 {
+                fill: none;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+              .cls-1 {
+                stroke-width: 3px;
+              }
+              .cls-2 {
+                stroke-width: 2px;
+              }
+            </style>
+          </defs>
+          <path
+            class="cls-1"
+            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+          />
+          <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+          <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+          <path
+            class="cls-1"
+            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+          />
+          <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+          <path
+            class="cls-2"
+            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+          />
+          <path
+            class="cls-2"
+            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+          />
+          <path
+            class="cls-2"
+            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+          />
+          <path
+            class="cls-1"
+            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+          />
+          <rect
+            class="cls-1"
+            x="1.5"
+            y="34.5"
+            width="58"
+            height="39"
+            rx="2"
+            ry="2"
+          />
+        </svg>
+        <h2
+          class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
         >
-          <label for={fieldId} class="spectrum-Link">
-            Select a file to upload
-          </label>
-          <br />
-          from your computer
-        </p>
-      {/if}
+          Drag and drop your file
+        </h2>
+        {#if !disabled}
+          <p
+            class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+          >
+            <label for={fieldId} class="spectrum-Link">
+              Select a file to upload
+            </label>
+            <br />
+            from your computer
+          </p>
+          {#if fileTags.length}
+            <Tags>
+              <div class="tags">
+                {#each fileTags as tag}
+                  <div class="tag">
+                    <Tag>
+                      {tag}
+                    </Tag>
+                  </div>
+                {/each}
+              </div>
+            </Tags>
+          {/if}
+        {/if}
+      </div>
     </div>
-  </div>
+  {/if}
 </div>
 
 <style>
@@ -390,4 +409,15 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
+
+  .tags {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .tag {
+    margin-top: 8px;
+  }
 </style>

package/src/Form/Core/Search.svelte

@@ -7,7 +7,7 @@
   export let disabled = false
   export let id = null
   export let updateOnChange = true
-
+  export let quiet = false
   const dispatch = createEventDispatcher()
   let focus = false
 
@@ -41,6 +41,7 @@
 <div class="spectrum-Search" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield"
+    class:spectrum-Textfield--quiet={quiet}
     class:is-focused={focus}
     class:is-disabled={disabled}
   >

package/src/Form/Core/Switch.svelte

@@ -25,7 +25,9 @@
     class="spectrum-Switch-input"
   />
   <span class="spectrum-Switch-switch" />
-  <label class="spectrum-Switch-label" for={id}>{text}</label>
+  {#if text}
+    <label class="spectrum-Switch-label" for={id}>{text}</label>
+  {/if}
 </div>
 
 <style>

package/src/Form/Core/TextArea.svelte

@@ -7,6 +7,8 @@
   export let disabled = false
   export let error = null
   export let id = null
+  export let height = null
+  export let minHeight = null
   export const getCaretPosition = () => ({
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
@@ -22,6 +24,8 @@
 </script>
 
 <div
+  style={(height ? `height: ${height}px;` : "") +
+    (minHeight ? `min-height: ${minHeight}px` : "")}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}

package/src/Form/Dropzone.svelte

@@ -12,6 +12,8 @@
   export let processFiles = undefined
   export let handleFileTooLarge = undefined
   export let gallery = true
+  export let fileTags = []
+  export let maximum = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +31,8 @@
     {processFiles}
     {handleFileTooLarge}
     {gallery}
+    {fileTags}
+    {maximum}
     on:change={onChange}
   />
 </Field>

package/src/Form/RadioGroup.svelte

@@ -9,6 +9,7 @@
   export let labelPosition = "above"
   export let error = null
   export let options = []
+  export let direction = "vertical"
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
 
@@ -31,6 +32,7 @@
     {disabled}
     {value}
     {options}
+    {direction}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

package/src/Form/Search.svelte

@@ -9,6 +9,7 @@
   export let placeholder = null
   export let disabled = false
   export let updateOnChange = true
+  export let quiet = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -23,6 +24,7 @@
     {disabled}
     {value}
     {placeholder}
+    {quiet}
     on:change={onChange}
     on:click
     on:input

package/src/Form/TextArea.svelte

@@ -10,6 +10,8 @@
   export let disabled = false
   export let error = null
   export let getCaretPosition = null
+  export let height = null
+  export let minHeight = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,6 +27,8 @@
     {disabled}
     {value}
     {placeholder}
+    {height}
+    {minHeight}
     on:change={onChange}
   />
 </Field>

package/src/Icon/Icon.svelte

@@ -9,6 +9,7 @@
   export let size = "M"
   export let hoverable = false
   export let disabled = false
+  export let color
 
   $: rotation = getRotation(direction)
 
@@ -25,7 +26,9 @@
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}
-  style={`transform: rotate(${rotation}deg)`}
+  style={`transform: rotate(${rotation}deg); ${
+    color ? `color: ${color};` : ""
+  }`}
 >
   <use xlink:href="#spectrum-icon-18-{name}" />
 </svg>

package/src/Label/Label.svelte

@@ -19,6 +19,7 @@
     <div class="icon-container">
       <div
         class="icon"
+        class:icon-small={size === "M" || size === "S"}
         on:mouseover={() => (showTooltip = true)}
         on:mouseleave={() => (showTooltip = false)}
       >
@@ -44,6 +45,7 @@
   }
   .container {
     display: flex;
+    align-items: center;
   }
   .icon-container {
     position: relative;
@@ -64,4 +66,8 @@
   .icon {
     transform: scale(0.75);
   }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
 </style>

package/src/Layout/Layout.svelte

@@ -63,6 +63,9 @@
   .gap-L {
     grid-gap: var(--spectrum-alias-grid-gutter-medium);
   }
+  .gap-XL {
+    grid-gap: var(--spectrum-alias-grid-gutter-large);
+  }
   .horizontal.gap-S :global(*) + :global(*) {
     margin-left: var(--spectrum-alias-grid-gutter-xsmall);
   }

package/src/Modal/ModalContent.svelte

@@ -18,10 +18,23 @@
   export let disabled = false
   export let showDivider = true
 
+  export let showSecondaryButton = false
+  export let secondaryButtonText = undefined
+  export let secondaryAction = undefined
+  export let secondaryButtonWarning = false
+
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
 
+  async function secondary() {
+    loading = true
+    if (!secondaryAction || (await secondaryAction()) !== false) {
+      hide()
+    }
+    loading = false
+  }
+
   async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== false) {
@@ -73,6 +86,18 @@
         class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
       >
         <slot name="footer" />
+
+        {#if showSecondaryButton && secondaryButtonText && secondaryAction}
+          <div class="secondary-action">
+            <Button
+              group
+              secondary
+              warning={secondaryButtonWarning}
+              on:click={secondary}>{secondaryButtonText}</Button
+            >
+          </div>
+        {/if}
+
         {#if showCancelButton}
           <Button group secondary on:click={close}>{cancelText}</Button>
         {/if}
@@ -136,4 +161,8 @@
     display: flex;
     justify-content: space-between;
   }
+
+  .secondary-action {
+    margin-right: auto;
+  }
 </style>

package/src/Table/BoldRenderer.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let value
+</script>
+
+<div class="bold">{value}</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+  }
+</style>

package/src/Table/CodeRenderer.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value
+</script>
+
+<code>{value}</code>

package/src/Table/Table.svelte

@@ -4,6 +4,7 @@
   import CellRenderer from "./CellRenderer.svelte"
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
   import { cloneDeep } from "lodash"
+  import { deepGet } from "../utils/helpers"
 
   /**
    * The expected schema is our normal couch schemas for our tables.
@@ -318,7 +319,7 @@
                             {customRenderers}
                             {row}
                             schema={schema[field]}
-                            value={row[field]}
+                            value={deepGet(row, field)}
                             on:clickrelationship
                           >
                             <slot />

package/src/Tabs/Tab.svelte

@@ -5,7 +5,7 @@
   export let icon = ""
 
   const dispatch = createEventDispatcher()
-  const selected = getContext("tab")
+  let selected = getContext("tab")
   let tab
   let tabInfo
 
@@ -16,8 +16,8 @@
     // We just need to get this off the main thread to fix this, by using
     // a 0ms timeout.
     setTimeout(() => {
-      tabInfo = tab.getBoundingClientRect()
-      if ($selected.title === title) {
+      tabInfo = tab?.getBoundingClientRect()
+      if (tabInfo && $selected.title === title) {
         $selected.info = tabInfo
       }
     }, 0)