Merge pull request #5800 from Budibase/bug/sev3/misc-picker-fixes

Misc Picker Fixes

packages/bbui/src/Form/Core/CheckboxGroup.svelte

@@ -0,0 +1,68 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let direction = "vertical"
+  export let value = []
+  export let options = []
+  export let error = null
+  export let disabled = false
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    let tempValue = value
+    let isChecked = e.target.checked
+    if (!tempValue.includes(e.target.value) && isChecked) {
+      tempValue.push(e.target.value)
+    }
+    value = tempValue
+    dispatch(
+      "change",
+      tempValue.filter(val => val !== e.target.value || isChecked)
+    )
+  }
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+  {#if options && Array.isArray(options)}
+    {#each options as option}
+      <div
+        title={getOptionLabel(option)}
+        class="spectrum-Checkbox spectrum-FieldGroup-item"
+        class:is-invalid={!!error}
+      >
+        <label
+          class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
+        >
+          <input
+            on:change={onChange}
+            value={getOptionValue(option)}
+            type="checkbox"
+            class="spectrum-Checkbox-input"
+            {disabled}
+            checked={value.includes(getOptionValue(option))}
+          />
+          <span class="spectrum-Checkbox-box">
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </span>
+          <span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
+        </label>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+</style>

packages/bbui/src/Form/Core/Picker.svelte

@@ -43,7 +43,7 @@
       return
     }
     searchTerm = null
-    open = true
+    open = !open
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,7 +71,8 @@
   }
 </script>
 
-<button
+<div use:clickOutside={() => (open = false)}>
+  <button
     {id}
     class="spectrum-Picker spectrum-Picker--sizeM"
     class:spectrum-Picker--quiet={quiet}
@@ -80,7 +81,7 @@
     class:is-open={open}
     aria-haspopup="listbox"
     on:mousedown={onClick}
->
+  >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
         <img src={fieldIcon} alt="icon" width="20" height="15" />
@@ -111,10 +112,9 @@
     >
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
-</button>
+  </button>
-{#if open}
+  {#if open}
     <div
-    use:clickOutside={() => (open = false)}
       transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
       class:auto-width={autoWidth}
@@ -182,7 +182,8 @@
         {/if}
       </ul>
     </div>
-{/if}
+  {/if}
+</div>
 
 <style>
   .spectrum-Popover {

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

@@ -3,6 +3,7 @@ export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreMultiselect } from "./Multiselect.svelte"
 export { default as CoreCheckbox } from "./Checkbox.svelte"
 export { default as CoreRadioGroup } from "./RadioGroup.svelte"
+export { default as CoreCheckboxGroup } from "./CheckboxGroup.svelte"
 export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"

packages/client/manifest.json

@@ -2338,7 +2338,11 @@
         "type": "boolean",
         "label": "Autocomplete",
         "key": "autocomplete",
-        "defaultValue": false
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "optionsType",
+          "value": "select"
+        }
       },
       {
         "type": "boolean",
@@ -2346,6 +2350,43 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "select",
+        "label": "Type",
+        "key": "optionsType",
+        "defaultValue": "select",
+        "placeholder": "Pick an options type",
+        "options": [
+          {
+            "label": "Select",
+            "value": "select"
+          },
+          {
+            "label": "Checkboxes",
+            "value": "checkbox"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Direction",
+        "key": "direction",
+        "defaultValue": "vertical",
+        "options": [
+          {
+            "label": "Horizontal",
+            "value": "horizontal"
+          },
+          {
+            "label": "Vertical",
+            "value": "vertical"
+          }
+        ],
+        "dependsOn": {
+          "setting": "optionsType",
+          "value": "checkbox"
+        }
+      },
       {
         "type": "select",
         "label": "Options source",

packages/client/src/components/app/forms/MultiFieldSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { CoreMultiselect } from "@budibase/bbui"
+  import { CoreMultiselect, CoreCheckboxGroup } from "@budibase/bbui"
   import Field from "./Field.svelte"
   import { getOptions } from "./optionsParser"
   export let field
@@ -15,6 +15,8 @@
   export let customOptions
   export let autocomplete = false
   export let onChange
+  export let optionsType = "select"
+  export let direction = "vertical"
 
   let fieldState
   let fieldApi
@@ -61,6 +63,7 @@
   bind:fieldSchema
 >
   {#if fieldState}
+    {#if !optionsType || optionsType === "select"}
       <CoreMultiselect
         value={fieldState.value || []}
         error={fieldState.error}
@@ -73,5 +76,18 @@
         {options}
         {autocomplete}
       />
+    {:else if optionsType === "checkbox"}
+      <CoreCheckboxGroup
+        value={fieldState.value || []}
+        id={fieldState.fieldId}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
+        {options}
+        {direction}
+        on:change={handleChange}
+        getOptionLabel={flatOptions ? x => x : x => x.label}
+        getOptionValue={flatOptions ? x => x : x => x.value}
+      />
+    {/if}
   {/if}
 </Field>