@budibase/bbui 3.30.1 → 3.30.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.30.1",
+  "version": "3.30.2",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "ce9e344b6a609da55770d535cc59079ede2f5da6"
+  "gitHead": "13dbc5b25ef09b4c6ae6ef16c6e16d7ef37f5589"
 }

package/src/Form/Field.svelte

@@ -3,18 +3,32 @@
   import FieldLabel from "./FieldLabel.svelte"
   import Icon from "../Icon/Icon.svelte"
   import type { LabelPosition } from "../types"
+  import Label from "../Label/Label.svelte"
 
   export let id: string | undefined = undefined
   export let label: string | undefined = undefined
   export let labelPosition: LabelPosition = "above"
   export let error: string | undefined | false = undefined
+  export let description: string | undefined = undefined
   export let helpText: string | undefined = undefined
   export let tooltip: string | undefined = undefined
+  export let required: boolean = false
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
-    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
+    <FieldLabel
+      forId={id}
+      {label}
+      position={labelPosition}
+      {tooltip}
+      {required}
+    />
+  {/if}
+  {#if description}
+    <div class="description">
+      <Label muted>{description}</Label>
+    </div>
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />
@@ -61,4 +75,7 @@
     color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+  .description {
+    margin-bottom: var(--spacing-xs);
+  }
 </style>

package/src/Form/FieldLabel.svelte

@@ -1,12 +1,14 @@
-<script>
+<script lang="ts">
   import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+  import type { LabelPosition } from "../types"
 
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
 
-  export let forId
-  export let label
-  export let position = "above"
-  export let tooltip = ""
+  export let forId: string | undefined = undefined
+  export let label: string
+  export let position: LabelPosition = "above"
+  export let tooltip: string = ""
+  export let required: boolean = false
 
   $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
 </script>
@@ -17,6 +19,9 @@
     class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
   >
     {label || ""}
+    {#if required}
+      <sup class="required-asterisk">*</sup>
+    {/if}
   </label>
 </TooltipWrapper>
 
@@ -29,4 +34,8 @@
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);
   }
+  .required-asterisk {
+    color: var(--spectrum-global-color-red-500);
+    margin-left: -2px;
+  }
 </style>

package/src/Form/Input.svelte

@@ -17,6 +17,8 @@
   export let autofocus: boolean | undefined = undefined
   export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
   export let helpText: string | undefined = undefined
+  export let required: boolean | undefined = false
+  export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher<{
     change: any
@@ -42,7 +44,7 @@
   }
 </script>
 
-<Field {helpText} {label} {labelPosition} {error}>
+<Field {helpText} {label} {labelPosition} {error} {required} {description}>
   <TextField
     {updateOnChange}
     {disabled}

package/src/Form/Select.svelte

@@ -48,6 +48,8 @@
   export let loading: boolean | undefined = false
   export let searchPlaceholder: string | undefined = undefined
   export let hideChevron: boolean = false
+  export let required: boolean = false
+  export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = (e: CustomEvent<any>) => {
@@ -63,7 +65,15 @@
   }
 </script>
 
-<Field {helpText} {label} {labelPosition} {error} {tooltip}>
+<Field
+  {helpText}
+  {label}
+  {labelPosition}
+  {error}
+  {tooltip}
+  {required}
+  {description}
+>
   <Select
     {size}
     {bordered}

package/src/Table/Table.svelte

@@ -36,6 +36,7 @@
   export let allowEditRows: boolean = true
   export let allowEditColumns: boolean = true
   export let allowClickRows: boolean = true
+  export let selectOnRowClick: boolean = true
   export let selectedRows: any[] = []
   export let customRenderers: any[] = []
   export let disableSorting: boolean = false
@@ -488,7 +489,9 @@
                   on:click={() => {
                     if (!schema[field]?.preventSelectRow) {
                       dispatch("click", row)
-                      toggleSelectRow(row)
+                      if (selectOnRowClick) {
+                        toggleSelectRow(row)
+                      }
                     }
                   }}
                 >