Move multiselect to BBUI

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.39.0",
+    "@budibase/bbui": "^1.40.1",
     "@budibase/client": "^0.1.23",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",

packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte

@@ -2,39 +2,33 @@
   import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "../../../helpers"
+  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""
 
-  const type = determineInputType(meta)
-  const label = capitalise(meta.name)
-
-  function determineInputType(meta) {
-    if (meta.type === "datetime") return "date"
-    if (meta.type === "number") return "number"
-    if (meta.type === "boolean") return "checkbox"
-    if (meta.type === "attachment") return "file"
-    if (meta.type === "options") return "select"
-    return "text"
-  }
+  $: type = meta.type
+  $: label = capitalise(meta.name)
 </script>
 
-{#if type === 'select'}
+{#if type === 'options'}
   <Select thin secondary {label} data-cy="{meta.name}-select" bind:value>
     <option value="">Choose an option</option>
     {#each meta.constraints.inclusion as opt}
       <option value={opt}>{opt}</option>
     {/each}
   </Select>
-{:else if type === 'date'}
+{:else if type === 'datetime'}
   <DatePicker {label} bind:value />
-{:else if type === 'file'}
+{:else if type === 'attachment'}
   <div>
     <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
     <Dropzone bind:files={value} />
   </div>
-{:else if type === 'checkbox'}
+{:else if type === 'boolean'}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
+{:else if type === 'link'}
+  <LinkedRecordSelector bind:linkedRecords={value} schema={meta} />
 {:else}
   <Input thin {label} data-cy="{meta.name}-input" {type} bind:value />
 {/if}

packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte

@@ -1,7 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
   import RecordFieldControl from "../RecordFieldControl.svelte"
   import * as api from "../api"
   import { Modal } from "components/common/Modal"
@@ -44,11 +43,7 @@
   <ErrorsBox {errors} />
   {#each modelSchema as [key, meta]}
     <div>
-      {#if meta.type === 'link'}
-        <LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} />
-      {:else}
       <RecordFieldControl {meta} bind:value={record[key]} />
-      {/if}
     </div>
   {/each}
 </Modal>

packages/builder/src/components/common/LinkedRecordSelector.svelte

@@ -2,9 +2,8 @@
   import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
-  import { Select, Label } from "@budibase/bbui"
+  import { Select, Label, Multiselect } from "@budibase/bbui"
   import { capitalise } from "../../helpers"
-  import MultiSelect from "components/common/MultiSelect.svelte"
 
   export let schema
   export let linkedRecords = []
@@ -19,8 +18,7 @@
   async function fetchRecords(linkedModelId) {
     const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
     const response = await api.get(FETCH_RECORDS_URL)
-    const result = await response.json()
-    return result
+    return await response.json()
   }
 
   function getPrettyName(record) {
@@ -37,15 +35,14 @@
   </Label>
 {:else}
   {#await promise then records}
-    <MultiSelect
-      thin
+    <Multiselect
       secondary
       bind:value={linkedRecords}
       {label}
-      placeholder="Choose an option">
+      placeholder="Choose some options">
       {#each records as record}
         <option value={record._id}>{getPrettyName(record)}</option>
       {/each}
-    </MultiSelect>
+    </Multiselect>
   {/await}
 {/if}

packages/builder/src/components/common/MultiSelect.svelte

@@ -1,19 +1,25 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, afterUpdate } from "svelte"
   import { fly } from "svelte/transition"
   import { Label } from "@budibase/bbui"
+  import buildStyle from "@budibase/bbui/src/utils/buildStyle"
   const xPath =
     "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 
   export let value = []
-  export let label
+  export let label = undefined
+  export let secondary = false
+  export let outline = false
+  export let disabled = false
+  export let placeholder = undefined
 
-  let placeholder = "Type to search"
   let options = []
   let optionsVisible = false
   let selected = {}
   let first = true
   let slot
+  let anchor
+  let dimensions = { top: 0, left: 0, minWidth: 0, maxHeight: 0 }
 
   onMount(() => {
     const domOptions = Array.from(slot.querySelectorAll("option"))
@@ -31,6 +37,13 @@
     first = false
   })
 
+  // Update dimensions after each dom update
+  afterUpdate(() => {
+    if (anchor) {
+      updateDimensions()
+    }
+  })
+
   // Keep value up to date with selected options
   $: {
     if (!first) {
@@ -38,6 +51,24 @@
     }
   }
 
+  // Build CSS styles for options dropdown
+  $: menuStyle = buildStyle({
+    "max-height": `${dimensions.maxHeight.toFixed(0)}px`,
+    "min-width": `${dimensions.minWidth.toFixed(0)}px`,
+    top: `${dimensions.top}px`,
+    left: `${dimensions.left}px`,
+  })
+
+  function updateDimensions() {
+    const { bottom, left, width } = anchor.getBoundingClientRect()
+    dimensions = {
+      top: bottom,
+      left,
+      minWidth: width - 4,
+      maxHeight: window.innerHeight - bottom - 30,
+    }
+  }
+
   function add(token) {
     selected[token.value] = token
   }
@@ -47,10 +78,6 @@
     selected = rest
   }
 
-  function removeAll() {
-    selected = []
-  }
-
   function showOptions(show) {
     optionsVisible = show
   }
@@ -79,12 +106,20 @@
   <div class="multiselect">
     <div class="tokens-wrapper">
       <div
+        bind:this={anchor}
         class="tokens"
+        class:outline
+        class:disabled
+        class:secondary
         class:optionsVisible
         on:click|self={handleClick}
         class:empty={!value || !value.length}>
         {#each Object.values(selected) as option}
-          <div class="token" data-id={option.value} on:click|self={handleClick}>
+          <div
+            class="token"
+            class:secondary
+            data-id={option.value}
+            on:click|self={handleClick}>
             <span>{option.name}</span>
             <div
               class="token-remove"
@@ -101,7 +136,13 @@
             </div>
           </div>
         {/each}
-        {#if !value || !value.length}&nbsp;{/if}
+        {#if !value || !value.length}
+          {#if placeholder && placeholder.length}
+            <div class:disabled class="placeholder">{placeholder}</div>
+          {:else}
+            <div class="placeholder">&nbsp;</div>
+          {/if}
+        {/if}
       </div>
     </div>
 
@@ -110,13 +151,16 @@
     </select>
 
     {#if optionsVisible}
-      <div class="options-overlay" on:click|self={() => showOptions(false)} />
+      <div class="options-overlay" on:mousedown|self={() => showOptions(false)}>
         <ul
           class="options"
+          style={menuStyle}
           transition:fly={{ duration: 200, y: 5 }}
           on:mousedown|preventDefault={handleOptionMousedown}>
           {#each options as option}
-          <li class:selected={selected[option.value]} data-value={option.value}>
+            <li
+              class:selected={selected[option.value]}
+              data-value={option.value}>
               {option.name}
             </li>
           {/each}
@@ -124,6 +168,7 @@
             <li class="no-results">No results</li>
           {/if}
         </ul>
+      </div>
     {/if}
   </div>
 </div>
@@ -135,6 +180,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    font-family: var(--font-sans);
   }
   .multiselect:hover {
     border-bottom-color: hsl(0, 0%, 50%);
@@ -146,7 +192,6 @@
     justify-content: flex-start;
     align-items: center;
     flex: 0 1 auto;
-    z-index: 2;
   }
 
   .tokens {
@@ -156,12 +201,22 @@
     position: relative;
     width: 0;
     flex: 1 1 auto;
-    background-color: var(--grey-2);
+    background-color: white;
     border-radius: var(--border-radius-m);
     padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
       calc(var(--spacing-m) / 2);
     border: var(--border-transparent);
   }
+  .tokens.disabled {
+    background-color: var(--grey-4);
+    pointer-events: none;
+  }
+  .tokens.outline {
+    border: var(--border-dark);
+  }
+  .tokens.secondary {
+    background-color: var(--grey-2);
+  }
   .tokens:hover {
     cursor: pointer;
   }
@@ -188,24 +243,34 @@
     width: 100%;
     left: 0;
   }
+
   .token {
     font-size: var(--font-size-xs);
-    align-items: center;
-    background-color: white;
+    background-color: var(--grey-2);
     border-radius: var(--border-radius-l);
     display: flex;
+    flex-direction: row;
+    align-items: center;
     margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
       calc(var(--spacing-m) / 2);
     max-height: 1.3rem;
     padding: var(--spacing-xs) var(--spacing-s);
     transition: background-color 0.3s;
     white-space: nowrap;
+    overflow: hidden;
+  }
+  .token.secondary {
+    background-color: white;
   }
   .token span {
     pointer-events: none;
     user-select: none;
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-  .token-remove {
+  .token .token-remove {
     align-items: center;
     background-color: var(--grey-4);
     border-radius: 50%;
@@ -216,12 +281,20 @@
     width: 1rem;
     margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
       var(--spacing-xs);
+    flex: 0 0 auto;
   }
-  .token-remove:hover {
+  .token .token-remove:hover {
     background-color: var(--grey-5);
     cursor: pointer;
   }
 
+  .placeholder {
+    pointer-events: none;
+  }
+  .placeholder.disabled {
+    color: var(--grey-6);
+  }
+
   .icon-clear path {
     fill: white;
   }
@@ -232,11 +305,10 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    z-index: 1;
+    z-index: 999;
   }
 
   .options {
-    z-index: 2;
     left: 0;
     list-style: none;
     margin-block-end: 0;
@@ -244,12 +316,10 @@
     overflow-y: auto;
     padding-inline-start: 0;
     position: absolute;
-    top: calc(100% + 1px);
-    width: calc(100% - 4px);
     border: var(--border-dark);
     border-radius: var(--border-radius-m);
     box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-    margin-top: var(--spacing-xs);
+    margin: var(--spacing-xs) 0;
     padding: var(--spacing-s) 0;
     background-color: white;
     max-height: 200px;
@@ -273,6 +343,12 @@
   }
 
   .hidden {
-    display: none;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
   }
 </style>

packages/builder/yarn.lock

@@ -709,10 +709,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.39.0":
-  version "1.39.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.39.0.tgz#7d3e259a60a0b4602f3d2da3452679d91a591fdd"
-  integrity sha512-9IL5Lw488sdYCa9mjHHdrap11VqW6wQHNcNTL8fFHaWNzummtlaUlVMScs9cunYgsR/L4NCgH0zSFdP0RnrUqw==
+"@budibase/bbui@^1.40.1":
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.40.1.tgz#7ebfd52b4da822312d3395447a4f73caa41f8014"
+  integrity sha512-0t5Makyn5jOURKZIQPvd+8G4m6ps4GyfLUkAz5rKJSnAQSAgLiuZ+RihcEReDEJK8tnfW7h2echJTffJduQRRQ==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
@@ -5844,10 +5844,6 @@ svelte-portal@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
 
-svelte-simple-modal@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.4.2.tgz#2cfe26ec8c0760b89813d65dfee836399620d6b2"
-
 svelte@^3.24.1:
   version "3.25.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4"