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,105 +71,73 @@
   }
 </script>
 
-<button
+<div use:clickOutside={() => (open = false)}>
-  {id}
+  <button
-  class="spectrum-Picker spectrum-Picker--sizeM"
+    {id}
-  class:spectrum-Picker--quiet={quiet}
+    class="spectrum-Picker spectrum-Picker--sizeM"
-  {disabled}
+    class:spectrum-Picker--quiet={quiet}
-  class:is-invalid={!!error}
+    {disabled}
-  class:is-open={open}
+    class:is-invalid={!!error}
-  aria-haspopup="listbox"
+    class:is-open={open}
-  on:mousedown={onClick}
+    aria-haspopup="listbox"
->
+    on:mousedown={onClick}
-  {#if fieldIcon}
-    <span class="icon-Placeholder-Padding">
-      <img src={fieldIcon} alt="icon" width="20" height="15" />
-    </span>
-  {/if}
-
-  <span
-    class="spectrum-Picker-label"
-    class:is-placeholder={isPlaceholder}
-    class:auto-width={autoWidth}
   >
-    {fieldText}
+    {#if fieldIcon}
-  </span>
+      <span class="icon-Placeholder-Padding">
-  {#if error}
+        <img src={fieldIcon} alt="icon" width="20" height="15" />
+      </span>
+    {/if}
+
+    <span
+      class="spectrum-Picker-label"
+      class:is-placeholder={isPlaceholder}
+      class:auto-width={autoWidth}
+    >
+      {fieldText}
+    </span>
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
     <svg
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
       aria-hidden="true"
-      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-icon-18-Alert" />
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
-  {/if}
+  </button>
-  <svg
+  {#if open}
-    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    <div
-    focusable="false"
+      transition:fly|local={{ y: -20, duration: 200 }}
-    aria-hidden="true"
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-  >
+      class:auto-width={autoWidth}
-    <use xlink:href="#spectrum-css-icon-Chevron100" />
+    >
-  </svg>
+      {#if autocomplete}
-</button>
+        <Search
-{#if open}
+          value={searchTerm}
-  <div
+          on:change={event => (searchTerm = event.detail)}
-    use:clickOutside={() => (open = false)}
+          {disabled}
-    transition:fly|local={{ y: -20, duration: 200 }}
+          placeholder="Search"
-    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+        />
-    class:auto-width={autoWidth}
-  >
-    {#if autocomplete}
-      <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
-        {disabled}
-        placeholder="Search"
-      />
-    {/if}
-    <ul class="spectrum-Menu" role="listbox">
-      {#if placeholderOption}
-        <li
-          class="spectrum-Menu-item placeholder"
-          class:is-selected={isPlaceholder}
-          role="option"
-          aria-selected="true"
-          tabindex="0"
-          on:click={() => onSelectOption(null)}
-        >
-          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Checkmark100" />
-          </svg>
-        </li>
       {/if}
-      {#if filteredOptions.length}
+      <ul class="spectrum-Menu" role="listbox">
-        {#each filteredOptions as option, idx}
+        {#if placeholderOption}
           <li
-            class="spectrum-Menu-item"
+            class="spectrum-Menu-item placeholder"
-            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+            class:is-selected={isPlaceholder}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            on:click={() => onSelectOption(null)}
           >
-            {#if getOptionIcon(option, idx)}
+            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-              <span class="icon-Padding">
-                <img
-                  src={getOptionIcon(option, idx)}
-                  alt="icon"
-                  width="20"
-                  height="15"
-                />
-              </span>
-            {/if}
-            <span class="spectrum-Menu-itemLabel">
-              {getOptionLabel(option, idx)}
-            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -178,11 +146,44 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/each}
+        {/if}
-      {/if}
+        {#if filteredOptions.length}
-    </ul>
+          {#each filteredOptions as option, idx}
-  </div>
+            <li
-{/if}
+              class="spectrum-Menu-item"
+              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => onSelectOption(getOptionValue(option, idx))}
+            >
+              {#if getOptionIcon(option, idx)}
+                <span class="icon-Padding">
+                  <img
+                    src={getOptionIcon(option, idx)}
+                    alt="icon"
+                    width="20"
+                    height="15"
+                  />
+                </span>
+              {/if}
+              <span class="spectrum-Menu-itemLabel">
+                {getOptionLabel(option, idx)}
+              </span>
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+                focusable="false"
+                aria-hidden="true"
+              >
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  {/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,17 +63,31 @@
   bind:fieldSchema
 >
   {#if fieldState}
-    <CoreMultiselect
+    {#if !optionsType || optionsType === "select"}
-      value={fieldState.value || []}
+      <CoreMultiselect
-      error={fieldState.error}
+        value={fieldState.value || []}
-      getOptionLabel={flatOptions ? x => x : x => x.label}
+        error={fieldState.error}
-      getOptionValue={flatOptions ? x => x : x => x.value}
+        getOptionLabel={flatOptions ? x => x : x => x.label}
-      id={fieldState.fieldId}
+        getOptionValue={flatOptions ? x => x : x => x.value}
-      disabled={fieldState.disabled}
+        id={fieldState.fieldId}
-      on:change={handleChange}
+        disabled={fieldState.disabled}
-      {placeholder}
+        on:change={handleChange}
-      {options}
+        {placeholder}
-      {autocomplete}
+        {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>