remove BindableInput and switch to DrawerBindableInput

6 years ago · 9f9858fd59
1 changed files with 0 additions and 83 deletions
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@ -1,83 +0,0 @@
 <script>
  import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
  import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
  import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()
  export let value = ""
  export let bindings = []
  export let thin = true
  export let label = ""
  export let title = "Bindings"
  export let placeholder
  let bindingDrawer
  $: tempValue = value
  $: readableValue = runtimeToReadableBinding(bindings, value)
  const handleClose = () => {
    onChange(tempValue)
    bindingDrawer.hide()
  }
  const onChange = value => {
    dispatch("change", readableToRuntimeBinding(bindings, value))
  }
 </script>
 <div class="control">
  <Input
    {thin}
    {label}
    value={readableValue}
    on:change={event => onChange(event.target.value)}
    {placeholder} />
  <div class="icon" on:click={bindingDrawer.show}>
    <Icon name="lightning" />
  </div>
 </div>
 <Drawer bind:this={bindingDrawer} {title}>
  <div slot="description">
    <Body extraSmall grey>
      Add the objects on the left to enrich your text.
    </Body>
  </div>
  <heading slot="buttons">
    <Button thin blue on:click={handleClose}>Save</Button>
  </heading>
  <div slot="body">
    <BindingPanel
      {value}
      close={handleClose}
      on:update={event => (tempValue = event.detail)}
      {bindings} />
  </div>
 </Drawer>
 <style>
  .icon {
    right: 2px;
    top: 5px;
    bottom: 2px;
    position: absolute;
    align-items: center;
    display: flex;
    box-sizing: border-box;
    padding-left: var(--spacing-xs);
    border-left: 1px solid var(--grey-4);
    background-color: var(--grey-2);
    border-top-right-radius: var(--border-radius-m);
    border-bottom-right-radius: var(--border-radius-m);
    color: var(--grey-7);
    font-size: 16px;
    margin-top: 20px;
  }
  .icon:hover {
    color: var(--ink);
    cursor: pointer;
  }
 </style>