@budibase/bbui 2.2.12-alpha.5 → 2.2.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.5",
+  "version": "2.2.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": "2.2.12-alpha.5",
+    "@budibase/string-templates": "^2.2.13",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
     "@spectrum-css/avatar": "3.0.2",
@@ -88,5 +88,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "1641ca6eacbaa560598d76801c2d4af1c3301f54"
+  "gitHead": "3d3c0d432f6be08367579f01c5142f9662981eee"
 }

package/src/Badge/Badge.svelte

@@ -10,13 +10,10 @@
   export let green = false
   export let active = false
   export let inactive = false
-  export let hoverable = false
 </script>
 
 <span
-  on:click
   class="spectrum-Label"
-  class:hoverable
   class:spectrum-Label--small={size === "S"}
   class:spectrum-Label--large={size === "L"}
   class:spectrum-Label--grey={grey}
@@ -30,13 +27,3 @@
 >
   <slot />
 </span>
-
-<style>
-  .spectrum-Label--grey {
-    background-color: var(--spectrum-global-color-gray-500);
-    font-weight: 600;
-  }
-  .hoverable:hover {
-    cursor: pointer;
-  }
-</style>

package/src/Form/Core/Dropzone.svelte

@@ -15,7 +15,6 @@
   export let value = []
   export let id = null
   export let disabled = false
-  export let compact = false
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
   export let deleteAttachments = null
@@ -240,72 +239,70 @@
           bind:this={fileInput}
           on:change={handleFile}
         />
-        {#if !compact}
-          <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"
-          >
-            Drag and drop your file
-          </h2>
-        {/if}
+        <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"
+        >
+          Drag and drop your file
+        </h2>
         {#if !disabled}
           <p
             class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
@@ -313,10 +310,8 @@
             <label for={fieldId} class="spectrum-Link">
               Select a file to upload
             </label>
-            {#if !compact}
-              <br />
-              from your computer
-            {/if}
+            <br />
+            from your computer
           </p>
           {#if fileTags.length}
             <Tags>

package/src/Form/Core/RadioGroup.svelte

@@ -11,14 +11,31 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionTitle = option => option
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => dispatch("change", e.target.value)
+
+  const getSortedOptions = (options, getLabel, sort) => {
+    if (!options?.length || !Array.isArray(options)) {
+      return []
+    }
+    if (!sort) {
+      return options
+    }
+    return [...options].sort((a, b) => {
+      const labelA = getLabel(a)
+      const labelB = getLabel(b)
+      return labelA > labelB ? 1 : -1
+    })
+  }
+
+  $: parsedOptions = getSortedOptions(options, getOptionLabel, sort)
 </script>
 
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
-  {#if options && Array.isArray(options)}
-    {#each options as option}
+  {#if parsedOptions && Array.isArray(parsedOptions)}
+    {#each parsedOptions as option}
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"

package/src/Table/RelationshipRenderer.svelte

@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/label/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import Badge from "../Badge/Badge.svelte"
 
   export let row
   export let value
@@ -25,11 +24,17 @@
 
 {#each relationships as relationship}
   {#if relationship?.primaryDisplay}
-    <Badge hoverable grey on:click={onClick}>
+    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
       {relationship.primaryDisplay}
-    </Badge>
+    </span>
   {/if}
 {/each}
 {#if leftover}
   <div>+{leftover} more</div>
 {/if}
+
+<style>
+  span:hover {
+    cursor: pointer;
+  }
+</style>