From 973b04c4131554fb9181ce70e3d699c70b6ee4a6 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Tue, 10 May 2022 15:16:13 +0100
Subject: [PATCH] Added MultiSelect Checkboxes

---
 .../bbui/src/Form/Core/CheckboxGroup.svelte   | 68 +++++++++++++++++++
 packages/bbui/src/Form/Core/index.js          |  1 +
 packages/client/manifest.json                 | 37 ++++++++++
 .../app/forms/MultiFieldSelect.svelte         | 42 ++++++++----
 4 files changed, 135 insertions(+), 13 deletions(-)
 create mode 100644 packages/bbui/src/Form/Core/CheckboxGroup.svelte

diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
new file mode 100644
index 0000000000..640d5d99cd
--- /dev/null
+++ b/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>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 3c3f9acb4d..96d81855e4 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/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"
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4190d7f076..db62d2cb6e 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2346,6 +2346,43 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "select",
+        "label": "Type",
+        "key": "optionsType",
+        "defaultValue": "select",
+        "placeholder": "Pick an options type",
+        "options": [
+          {
+            "label": "Select",
+            "value": "select"
+          },
+          {
+            "label": "Checkbox buttons",
+            "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",
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 6bc0970051..55bca89c23 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/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,17 +63,31 @@
   bind:fieldSchema
 >
   {#if fieldState}
-    <CoreMultiselect
-      value={fieldState.value || []}
-      error={fieldState.error}
-      getOptionLabel={flatOptions ? x => x : x => x.label}
-      getOptionValue={flatOptions ? x => x : x => x.value}
-      id={fieldState.fieldId}
-      disabled={fieldState.disabled}
-      on:change={handleChange}
-      {placeholder}
-      {options}
-      {autocomplete}
-    />
+    {#if !optionsType || optionsType === "select"}
+      <CoreMultiselect
+        value={fieldState.value || []}
+        error={fieldState.error}
+        getOptionLabel={flatOptions ? x => x : x => x.label}
+        getOptionValue={flatOptions ? x => x : x => x.value}
+        id={fieldState.fieldId}
+        disabled={fieldState.disabled}
+        on:change={handleChange}
+        {placeholder}
+        {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>