@budibase/bbui 3.28.1 → 3.28.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.28.1",
+  "version": "3.28.3",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "e034f570c9fbb13b51fa2178e74764b1c3182761"
+  "gitHead": "40bc76dc62aa2c1876e442d464c17aa388630975"
 }

package/src/Form/Core/RadioGroup.svelte

@@ -39,6 +39,8 @@
   {#if parsedOptions && Array.isArray(parsedOptions)}
     {#each parsedOptions as option}
       {@const isOptionDisabled = disabled || getOptionDisabled(option)}
+      {@const optionLabel = getOptionLabel(option)}
+      {@const optionSubtitle = getOptionSubtitle(option)}
       <div
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
@@ -54,10 +56,10 @@
         />
         <span class="spectrum-Radio-button"></span>
         <label for="" class="spectrum-Radio-label radio-label">
-          <span class="radio-label-text">{getOptionLabel(option)}</span>
-          {#if getOptionSubtitle(option)}
+          <span class="radio-label-text">{optionLabel}</span>
+          {#if optionSubtitle && optionSubtitle !== optionLabel}
             <span class="radio-label-subtitle">
-              {getOptionSubtitle(option)}
+              {optionSubtitle}
             </span>
           {/if}
         </label>

package/src/Form/RadioGroup.svelte

@@ -13,8 +13,10 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionTitle = option => extractProperty(option, "label")
-  export let getOptionSubtitle = option => extractProperty(option, "subtitle")
-  export let getOptionDisabled = option => extractProperty(option, "disabled")
+  export let getOptionSubtitle = option =>
+    extractProperty(option, "subtitle", undefined)
+  export let getOptionDisabled = option =>
+    extractProperty(option, "disabled", false)
   export let helpText = undefined
 
   const dispatch = createEventDispatcher()
@@ -22,11 +24,11 @@
     value = e.detail
     dispatch("change", e.detail)
   }
-  const extractProperty = (value, property) => {
+  const extractProperty = (value, property, primitiveFallback = value) => {
     if (value && typeof value === "object") {
       return value[property]
     }
-    return value
+    return primitiveFallback
   }
 </script>
 

package/src/Input/CopyInput.svelte

@@ -5,6 +5,7 @@
 
   export let label: string | undefined = undefined
   export let value: string | undefined = undefined
+  export let disabled: boolean = false
 
   const copyToClipboard = (val: string | undefined) => {
     if (val) {
@@ -22,7 +23,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div>
-  <Input readonly {value} {label} />
+  <Input readonly {disabled} {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value)}>
     <Icon size="S" name="copy" />
   </div>

package/src/Table/Table.svelte

@@ -43,10 +43,12 @@
   export let compact: boolean = false
   export let customPlaceholder: boolean = false
   export let showHeaderBorder: boolean = true
+  export let hideHeader: boolean = false
   export let placeholderText: string = "No rows found"
   export let snippets: any[] = []
   export let defaultSortColumn: string | undefined = undefined
   export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"
+  export let rounded: boolean = false
   export let stickyHeader: boolean = true
 
   const dispatch = createEventDispatcher()
@@ -78,12 +80,14 @@
     rowCount,
     rowHeight
   )
+  $: effectiveHeaderHeight = hideHeader ? 0 : headerHeight
   $: heightStyle = getHeightStyle(
     visibleRowCount,
     rowCount,
     totalRowCount,
     rowHeight,
-    loading
+    loading,
+    effectiveHeaderHeight
   )
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: gridStyle = getGridStyle(fields, schema, showEditColumn)
@@ -146,15 +150,16 @@
     rowCount: number,
     totalRowCount: number,
     rowHeight: number,
-    loading: boolean
+    loading: boolean,
+    effectiveHeaderHeight: number
   ): string => {
     if (loading) {
-      return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
+      return `height: ${effectiveHeaderHeight + visibleRowCount * rowHeight}px;`
     }
     if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
       return ""
     }
-    return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
+    return `height: ${effectiveHeaderHeight + visibleRowCount * rowHeight}px;`
   }
 
   const getGridStyle = (
@@ -370,7 +375,7 @@
     class:wrapper--quiet={quiet}
     class:wrapper--compact={compact}
     class:wrapper--sticky-header={stickyHeader}
-    style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+    style={`--row-height: ${rowHeight}px; --header-height: ${hideHeader ? 0 : headerHeight}px;`}
   >
     {#if loading}
       <div class="loading" style={heightStyle}>
@@ -382,9 +387,11 @@
       <div
         class="spectrum-Table"
         class:no-scroll={!rowCount}
+        class:rounded
         style={`${heightStyle}${gridStyle}`}
+        class:show-header={!hideHeader}
       >
-        {#if fields.length}
+        {#if fields.length && !hideHeader}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
               <div
@@ -710,11 +717,17 @@
     justify-content: center;
     align-items: center;
     border: var(--table-border);
-    border-top: none;
     grid-column: 1 / -1;
     background-color: var(--table-bg);
     padding: 40px;
   }
+  .spectrum-Table.show-header .placeholder {
+    border-top: none;
+  }
+  .spectrum-Table:not(.show-header) {
+    border-top: var(--table-border);
+  }
+
   .placeholder--no-fields {
     border-top: var(--table-border);
   }
@@ -743,4 +756,23 @@
     );
     text-align: center;
   }
+
+  /* Rounded corners */
+  .spectrum-Table.rounded {
+    border-radius: 6px;
+  }
+  .rounded.show-header .spectrum-Table-head > :first-child,
+  .rounded:not(.show-header) .spectrum-Table-row:first-child > :first-child {
+    border-top-left-radius: 6px;
+  }
+  .rounded.show-header .spectrum-Table-head > :last-child,
+  .rounded:not(.show-header) .spectrum-Table-row:first-child > :last-child {
+    border-top-right-radius: 6px;
+  }
+  .rounded .spectrum-Table-row:last-child > :first-child {
+    border-bottom-left-radius: 6px;
+  }
+  .rounded .spectrum-Table-row:last-child > :last-child {
+    border-bottom-right-radius: 6px;
+  }
 </style>