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

<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
  console.log("Bindable Props: ", 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>
    {#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">
    <Heading extraSmall>Data binding</Heading>
    <Spacer small />
    <Body extraSmall lh>
      Binding connects one piece of data to another and makes it dynamic. Click
      the objects on the left, to add them to the textbox.
    </Body>
    <Spacer large />
    <TextArea bind:value placeholder="" />
    <div class="controls">
      <a href="https://docs.budibase.com">
        <Body small grey>Learn more about binding</Body>
      </a>
      <Button on:click={cancel} secondary>Cancel</Button>
      <Button on:click={close} primary>Done</Button>
    </div>
  </div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: auto auto;
  }
  .list,
  .text {
    padding: var(--spacing-m);
  }
  .controls {
    margin-top: var(--spacing-m);
    display: grid;
    align-items: baseline;
    grid-gap: var(--spacing-l);
    grid-template-columns: 1fr auto auto;
  }
  .list {
    width: 150px;
    border-right: 1.5px solid var(--grey-4);
    padding: var(--spacing-xl);
  }
  .text {
    width: 600px;
    padding: var(--spacing-xl);
    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(--ink);
    padding: var(--spacing-s) var(--spacing-m);
    margin: auto 0px;
    align-items: center;
    cursor: pointer;
  }

  li:hover {
    background-color: var(--grey-2);
  }

  li:active {
    color: var(--blue);
  }
</style>
initial commit 2020-08-12 17:30:20 +02:00			`<script>`
groups components and table in separate categories 2020-08-31 10:12:06 +02:00			`import groupBy from "lodash/fp/groupBy"`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`import {`
			`Button,`
			`TextArea,`
			`Label,`
			`Body,`
			`Heading,`
			`Spacer,`
			`} from "@budibase/bbui"`
adds panel interface 2020-08-25 10:15:51 +02:00			`import { createEventDispatcher } from "svelte"`

			`const dispatch = createEventDispatcher()`
			`export let bindableProperties`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`console.log("Bindable Props: ", bindableProperties)`
adds panel interface 2020-08-25 10:15:51 +02:00			`export let value = ""`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`export let close`
adds panel interface 2020-08-25 10:15:51 +02:00
			`function addToText(readableBinding) {`
			value = value + `{{ ${readableBinding} }}`
			`}`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`let originalValue = value`
adds panel interface 2020-08-25 10:15:51 +02:00
			`$: dispatch("update", value)`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00
			`function cancel() {`
			`dispatch("update", originalValue)`
			`close()`
			`}`
groups components and table in separate categories 2020-08-31 10:12:06 +02:00
			`$: ({ instance, context } = groupBy("type", bindableProperties))`
initial commit 2020-08-12 17:30:20 +02:00			`</script>`

wip: cypress fix 2020-09-01 11:16:41 +02:00			`<div class="container" data-cy="binding-dropdown-modal">`
adds panel interface 2020-08-25 10:15:51 +02:00			`<div class="list">`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<Heading extraSmall>Objects</Heading>`
groups components and table in separate categories 2020-08-31 10:12:06 +02:00			`{#if context}`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<Heading extraSmall>Tables</Heading>`
groups components and table in separate categories 2020-08-31 10:12:06 +02:00			`<ul>`
			`{#each context as { readableBinding }}`
			`<li on:click={() => addToText(readableBinding)}>{readableBinding}</li>`
			`{/each}`
			`</ul>`
			`{/if}`
			`{#if instance}`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<Heading extraSmall>Components</Heading>`
groups components and table in separate categories 2020-08-31 10:12:06 +02:00			`<ul>`
			`{#each instance as { readableBinding }}`
			`<li on:click={() => addToText(readableBinding)}>{readableBinding}</li>`
			`{/each}`
			`</ul>`
			`{/if}`
adds panel interface 2020-08-25 10:15:51 +02:00			`</div>`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`<div class="text">`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<Heading extraSmall>Data binding</Heading>`
			`<Spacer small />`
			`<Body extraSmall lh>`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`Binding connects one piece of data to another and makes it dynamic. Click`
			`the objects on the left, to add them to the textbox.`
			`</Body>`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<Spacer large />`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`<TextArea bind:value placeholder="" />`
			`<div class="controls">`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`<a href="https://docs.budibase.com">`
			`<Body small grey>Learn more about binding</Body>`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`</a>`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`<Button on:click={cancel} secondary>Cancel</Button>`
			`<Button on:click={close} primary>Done</Button>`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`</div>`
			`</div>`
adds panel interface 2020-08-25 10:15:51 +02:00			`</div>`
initial commit 2020-08-12 17:30:20 +02:00
			`<style>`
adds panel interface 2020-08-25 10:15:51 +02:00			`.container {`
			`display: grid;`
			`grid-template-columns: auto auto;`
			`}`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`.list,`
adds panel interface 2020-08-25 10:15:51 +02:00			`.text {`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`padding: var(--spacing-m);`
adds panel interface 2020-08-25 10:15:51 +02:00			`}`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`.controls {`
			`margin-top: var(--spacing-m);`
			`display: grid;`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`align-items: baseline;`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`grid-gap: var(--spacing-l);`
			`grid-template-columns: 1fr auto auto;`
			`}`
adds panel interface 2020-08-25 10:15:51 +02:00			`.list {`
			`width: 150px;`
fix color of separator in binding interface 2020-08-31 10:21:08 +02:00			`border-right: 1.5px solid var(--grey-4);`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`padding: var(--spacing-xl);`
wip: binding interface design 2020-08-28 14:43:28 +02:00			`}`
			`.text {`
			`width: 600px;`
Page titles and primary cta alignment and styling consistent Data and automations page titles now use BBUI Heading component and Spacer component. They are not consistent in styling and spacing. Welcome screen app cards buttons changed to text buttons. I made this change as there were too many buttons on the page. We want one primary button - create new app. Early changes mage to binding popover. More to come. 2020-09-26 01:45:56 +02:00			`padding: var(--spacing-xl);`
			`font-family: var(--font-sans);`
adds panel interface 2020-08-25 10:15:51 +02:00			`}`
updates correctly on close, cancel and done actions 2020-08-28 15:40:43 +02:00			`.text :global(p) {`
			`margin: 0;`
			`}`
initial commit 2020-08-12 17:30:20 +02:00			`ul {`
			`list-style: none;`
			`padding-left: 0;`
			`margin: 0;`
fix styling issues 2020-08-25 11:40:48 +02:00			`padding: 0;`
initial commit 2020-08-12 17:30:20 +02:00			`}`
fix styling issues 2020-08-25 11:40:48 +02:00
initial commit 2020-08-12 17:30:20 +02:00			`li {`
			`display: flex;`
			`font-family: var(--font-sans);`
			`font-size: var(--font-size-xs);`
			`color: var(--ink);`
			`padding: var(--spacing-s) var(--spacing-m);`
			`margin: auto 0px;`
			`align-items: center;`
			`cursor: pointer;`
			`}`
fix styling issues 2020-08-25 11:40:48 +02:00
			`li:hover {`
			`background-color: var(--grey-2);`
			`}`

			`li:active {`
			`color: var(--blue);`
			`}`
initial commit 2020-08-12 17:30:20 +02:00			`</style>`