Use BBUI checkbox in standard components

packages/bbui/src/Form/Core/index.js

@@ -1,4 +1,4 @@
 export { default as CoreTextField } from "./TextField.svelte"
 export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreMultiselect } from "./Multiselect.svelte"
-export { default as Checkbox } from "./Checkbox.svelte"
+export { default as CoreCheckbox } from "./Checkbox.svelte"

packages/standard-components/src/forms/BooleanField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import { CoreCheckbox } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -9,10 +9,6 @@
 
   let fieldState
   let fieldApi
-
-  const onChange = event => {
-    fieldApi.setValue(event.target.checked)
-  }
 </script>
 
 <Field
@@ -24,37 +20,12 @@
   bind:fieldApi
   defaultValue={false}>
   {#if fieldState}
-    <div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
+    <CoreCheckbox
-      <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
+      value={$fieldState.value}
-        <input
+      disabled={$fieldState.disabled}
-          checked={$fieldState.value}
+      error={$fieldState.error}
-          disabled={$fieldState.disabled}
+      fieldId={$fieldState.fieldId}
-          on:change={onChange}
+      on:change={e => fieldApi.setValue(e.detail)}
-          type="checkbox"
+      {text} />
-          class="spectrum-Checkbox-input"
-          id={$fieldState.fieldId} />
-        <span class="spectrum-Checkbox-box">
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Checkmark75" />
-          </svg>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark"
-            focusable="false"
-            aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Dash75" />
-          </svg>
-        </span>
-        <span class="spectrum-Checkbox-label">{text || 'Checkbox'}</span>
-      </label>
-    </div>
   {/if}
 </Field>
-
-<style>
-  .spectrum-Checkbox {
-    width: 100%;
-  }
-</style>

packages/standard-components/src/forms/RelationshipField.svelte

@@ -21,6 +21,8 @@
   $: linkedTableId = fieldSchema?.tableId
   $: fetchRows(linkedTableId)
   $: fetchTable(linkedTableId)
+  $: singleValue = flatten($fieldState?.value)?.[0]
+  $: multiValue = flatten($fieldState?.value) ?? []
 
   const fetchTable = async id => {
     if (id) {
@@ -38,6 +40,13 @@
     }
   }
 
+  const flatten = values => {
+    if (!values) {
+      return []
+    }
+    return values.map(value => (typeof value === "object" ? value._id : value))
+  }
+
   const getDisplayName = row => {
     return row?.[tableDefinition?.primaryDisplay || "_id"] || "-"
   }
@@ -64,7 +73,7 @@
     <svelte:component
       this={multiselect ? CoreMultiselect : CoreSelect}
       {options}
-      value={multiselect ? $fieldState.value : $fieldState.value?.[0]}
+      value={multiselect ? multiValue : singleValue}
       on:change={multiselect ? multiHandler : singleHandler}
       fieldId={$fieldState.fieldId}
       disabled={$fieldState.disabled}