bump bbui

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.53.1",
+    "@budibase/bbui": "^1.54.0",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",

packages/builder/src/components/userInterface/BindingDropdown.svelte

@@ -1,106 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import {
-    Button,
-    TextArea,
-    Label,
-    Body,
-    Heading,
-    Spacer,
-  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  export let bindableProperties
-  export let value = ""
-  export let close
-
-  function addToText(readableBinding) {
-    value = value + `{{ ${readableBinding} }}`
-  }
-  let originalValue = value
-
-  $: dispatch("update", value)
-
-  function cancel() {
-    dispatch("update", originalValue)
-    close()
-  }
-
-  $: ({ instance, context } = groupBy("type", bindableProperties))
-</script>
-
-<div class="container" data-cy="binding-dropdown-modal">
-  <div class="list">
-    <Heading extraSmall>Objects</Heading>
-    <Spacer medium />
-    {#if context}
-      <Heading extraSmall>Tables</Heading>
-      <ul>
-        {#each context as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-    {#if instance}
-      <Heading extraSmall>Components</Heading>
-      <ul>
-        {#each instance as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  <div class="text">
-    <TextArea
-      thin
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the
-      textbox." />
-  </div>
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-  }
-  .list {
-    width: 150px;
-    border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-s);
-  }
-  .text {
-    padding: var(--spacing-s);
-    font-family: var(--font-sans);
-  }
-  .text :global(p) {
-    margin: 0;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-    padding: var(--spacing-s) 0;
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    color: var(--ink);
-    font-weight: 500;
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
+  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,7 +17,7 @@
   export let value
   export let props = {}
   export let onChange = () => {}
-
+  
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
@@ -25,6 +25,7 @@
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
+    showDrawer = false
   }
 
   function getBindableProperties() {
@@ -99,33 +100,12 @@
     </div>
   {/if}
 </div>
-{#if showDrawer}
+<BindingDrawer
-  <Drawer
+  {...handlevalueKey(value)}
-    title="Binding"
+  close={handleClose}
-    onClose={() => {
+  show={showDrawer}
-      handleClose()
+  on:update={e => (temporaryBindableValue = e.detail)}
-      showDrawer = false
+  {bindableProperties} />
-    }}>
-    <div slot="buttons">
-      <Button
-        blue
-        thin
-        on:click={() => {
-          notifier.success('Query parameters saved.')
-          handleSelected(value)
-        }}>
-        Save
-      </Button>
-    </div>
-    <div class="drawer-contents" slot="body">
-      <BindingDropdown
-        {...handlevalueKey(value)}
-        close={() => showDrawer = false}
-        on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties} />
-    </div>
-  </Drawer>
-{/if}
 
 <style>
   .property-control {

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.53.0":
+"@budibase/bbui@^1.54.0":
-  version "1.53.0"
+  version "1.54.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.53.0.tgz#36b57e6803fb7622111dce3e9766f6c63e34dbb2"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
-  integrity sha512-v+L2HCaZ9MD2uyzpAvWQ5vWF+rf3WOkZLMMFpil2GHJ+DHwgm3/9eC4BhHoNjCntF5zxbfpO+Y2DG7AF4UhNgw==
+  integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"